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

58
src/components/MermaidToExcalidraw.tsx
View File

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