Dylan/excalidraw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

show mermaid error messgae react way

Browse Source
This commit is contained in:
Aakansha Doshi 2023-08-30 08:58:27 +05:30
parent a573fbbb5a
commit 742e4bc017
1 changed files with 36 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/MermaidToExcalidraw.tsx
View File

@ -39,6 +39,24 @@ const importMermaidDataFromStorage = () => {
return null; return null;
}; };
const ErrorComp = ({ error }: { error: string }) => {
return (
<div
style={{
color: "red",
fontWeight: 800,
fontSize: "30px",
wordBreak: "break-word",
overflow: "auto",
maxHeight: "100%",
textAlign: "center",
}}
>
Error!! <p style={{ fontSize: "18px", fontWeight: "600" }}>{error}</p>
</div>
);
};
const MermaidToExcalidraw = ({ const MermaidToExcalidraw = ({
appState, appState,
elements, elements,
@ -49,6 +67,8 @@ const MermaidToExcalidraw = ({
const mermaidToExcalidrawLib = useRef<any>(null); const mermaidToExcalidrawLib = useRef<any>(null);
const [text, setText] = useState(""); const [text, setText] = useState("");
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const canvasRef = useRef<HTMLDivElement>(null); const canvasRef = useRef<HTMLDivElement>(null);
const data = useRef<{ const data = useRef<{
elements: readonly NonDeletedExcalidrawElement[]; elements: readonly NonDeletedExcalidrawElement[];
@ -90,20 +110,12 @@ const MermaidToExcalidraw = ({
fontSize: DEFAULT_FONT_SIZE, fontSize: DEFAULT_FONT_SIZE,
}, },
); );
} catch (e) { setError(null);
console.error(e); } catch (e: any) {
if (text) { console.error(e.message);
const errorEle = document.createElement("div"); canvasNode.replaceChildren();
errorEle.innerHTML = "ERROR!!!!"; setError(e.message);
errorEle.style.color = "red";
errorEle.style.fontWeight = "800";
errorEle.style.fontSize = "40px";
canvasNode.replaceChildren(errorEle);
} else {
canvasNode.replaceChildren();
}
} }
if (mermaidGraphData) { if (mermaidGraphData) {
const { elements, files } = const { elements, files } =
mermaidToExcalidrawLib.current.graphToExcalidraw(mermaidGraphData); mermaidToExcalidrawLib.current.graphToExcalidraw(mermaidGraphData);
@ -112,15 +124,15 @@ const MermaidToExcalidraw = ({
elements: convertToExcalidrawElements(elements), elements: convertToExcalidrawElements(elements),
files, files,
}; };
const parent = canvasNode.parentElement!;
const maxWidth = canvasNode.offsetWidth; const maxWidth = parent.offsetWidth;
const maxHeight = canvasNode.offsetHeight; const maxHeight = parent.offsetHeight;
let dimension = Math.max(maxWidth, maxHeight); let dimension = Math.max(maxWidth, maxHeight);
if (dimension > canvasNode.offsetWidth) { if (dimension > parent.offsetWidth) {
dimension = canvasNode.offsetWidth - 10; dimension = parent.offsetWidth - 10;
} }
if (dimension > canvasNode.offsetHeight) { if (dimension > parent.offsetHeight) {
dimension = canvasNode.offsetHeight; dimension = parent.offsetHeight;
} }
exportToCanvas({ exportToCanvas({
elements: data.current.elements, elements: data.current.elements,
@ -194,10 +206,10 @@ const MermaidToExcalidraw = ({
style={{ display: "flex", flexDirection: "column" }} style={{ display: "flex", flexDirection: "column" }}
> >
<label>Preview</label> <label>Preview</label>
<div <div className="mermaid-to-excalidraw-wrapper-preview-canvas">
className="mermaid-to-excalidraw-wrapper-preview-canvas" {error && <ErrorComp error={error} />}
ref={canvasRef} <div ref={canvasRef} />
></div> </div>
<Button <Button
className="mermaid-to-excalidraw-wrapper-preview-insert" className="mermaid-to-excalidraw-wrapper-preview-insert"
onSelect={onSelect} onSelect={onSelect}