|
|
|
@@ -1,7 +1,6 @@ |
|
|
|
import React, { useCallback, useEffect, useRef, useState } from 'react' |
|
|
|
import mermaid from 'mermaid' |
|
|
|
import { usePrevious } from 'ahooks' |
|
|
|
import CryptoJS from 'crypto-js' |
|
|
|
import { useTranslation } from 'react-i18next' |
|
|
|
import { ExclamationTriangleIcon } from '@heroicons/react/24/outline' |
|
|
|
import LoadingAnim from '@/app/components/base/chat/chat/loading-anim' |
|
|
|
@@ -38,7 +37,6 @@ const Flowchart = React.forwardRef((props: { |
|
|
|
const [svgCode, setSvgCode] = useState(null) |
|
|
|
const [look, setLook] = useState<'classic' | 'handDrawn'>('classic') |
|
|
|
|
|
|
|
const chartId = useRef(`flowchart_${CryptoJS.MD5(props.PrimitiveCode).toString()}`) |
|
|
|
const prevPrimitiveCode = usePrevious(props.PrimitiveCode) |
|
|
|
const [isLoading, setIsLoading] = useState(true) |
|
|
|
const timeRef = useRef<NodeJS.Timeout>() |
|
|
|
@@ -51,12 +49,10 @@ const Flowchart = React.forwardRef((props: { |
|
|
|
|
|
|
|
try { |
|
|
|
if (typeof window !== 'undefined' && mermaidAPI) { |
|
|
|
const svgGraph = await mermaidAPI.render(chartId.current, PrimitiveCode) |
|
|
|
const svgGraph = await mermaidAPI.render('flowchart', PrimitiveCode) |
|
|
|
const base64Svg: any = await svgToBase64(svgGraph.svg) |
|
|
|
setSvgCode(base64Svg) |
|
|
|
setIsLoading(false) |
|
|
|
if (chartId.current && base64Svg) |
|
|
|
localStorage.setItem(chartId.current, base64Svg) |
|
|
|
} |
|
|
|
} |
|
|
|
catch (error) { |
|
|
|
@@ -79,19 +75,11 @@ const Flowchart = React.forwardRef((props: { |
|
|
|
}, |
|
|
|
}) |
|
|
|
|
|
|
|
localStorage.removeItem(chartId.current) |
|
|
|
renderFlowchart(props.PrimitiveCode) |
|
|
|
} |
|
|
|
}, [look]) |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
const cachedSvg: any = localStorage.getItem(chartId.current) |
|
|
|
|
|
|
|
if (cachedSvg) { |
|
|
|
setSvgCode(cachedSvg) |
|
|
|
setIsLoading(false) |
|
|
|
return |
|
|
|
} |
|
|
|
if (timeRef.current) |
|
|
|
clearTimeout(timeRef.current) |
|
|
|
|