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

store canvas data in refs

Browse Source
This commit is contained in:
Aakansha Doshi 2023-08-24 12:50:03 +05:30
parent 6518e05cab
commit 3346c72356
1 changed files with 35 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/components/MermaidToExcalidraw.tsx
View File

@ -51,12 +51,12 @@ const MermaidToExcalidraw = ({
elements: readonly NonDeletedExcalidrawElement[]; elements: readonly NonDeletedExcalidrawElement[];
}) => { }) => {
const [text, setText] = useState(""); const [text, setText] = useState("");
const [canvasData, setCanvasData] = useState<{
//@ts-ignore const canvasRef = useRef<HTMLDivElement>(null);
const data = useRef<{
elements: readonly NonDeletedExcalidrawElement[]; elements: readonly NonDeletedExcalidrawElement[];
files: BinaryFiles | null; files: BinaryFiles | null;
}>({ elements: [], files: null }); }>({ elements: [], files: null });
const canvasRef = useRef<HTMLDivElement>(null);
const app = useApp(); const app = useApp();
useEffect(() => { useEffect(() => {
@ -66,34 +66,6 @@ const MermaidToExcalidraw = ({
} }
}, []); }, []);
useEffect(() => {
const canvasNode = canvasRef.current;
if (!canvasNode) {
return;
}
const maxWidth = canvasNode.offsetWidth;
const maxHeight = canvasNode.offsetHeight;
let dimension = Math.max(maxWidth, maxHeight);
if (dimension > canvasNode.offsetWidth) {
dimension = canvasNode.offsetWidth - 10;
}
if (dimension > canvasNode.offsetHeight) {
dimension = canvasNode.offsetHeight;
}
exportToCanvas({
elements: canvasData.elements,
files: canvasData.files,
exportPadding: DEFAULT_EXPORT_PADDING,
maxWidthOrHeight: dimension,
}).then((canvas) => {
// if converting to blob fails, there's some problem that will
// likely prevent preview and export (e.g. canvas too big)
return canvasToBlob(canvas).then(() => {
canvasNode.replaceChildren(canvas);
});
});
}, [canvasData, canvasRef]);
useEffect(() => { useEffect(() => {
const convertMermaidToExcal = async () => { const convertMermaidToExcal = async () => {
let mermaidGraphData; let mermaidGraphData;
@ -108,9 +80,35 @@ const MermaidToExcalidraw = ({
if (mermaidGraphData) { if (mermaidGraphData) {
const { elements, files } = graphToExcalidraw(mermaidGraphData); const { elements, files } = graphToExcalidraw(mermaidGraphData);
setCanvasData({ data.current = {
elements: convertToExcalidrawElements(elements), elements: convertToExcalidrawElements(elements),
files, files,
};
const canvasNode = canvasRef.current;
if (!canvasNode) {
return;
}
const maxWidth = canvasNode.offsetWidth;
const maxHeight = canvasNode.offsetHeight;
let dimension = Math.max(maxWidth, maxHeight);
if (dimension > canvasNode.offsetWidth) {
dimension = canvasNode.offsetWidth - 10;
}
if (dimension > canvasNode.offsetHeight) {
dimension = canvasNode.offsetHeight;
}
exportToCanvas({
elements: data.current.elements,
files: data.current.files,
exportPadding: DEFAULT_EXPORT_PADDING,
maxWidthOrHeight: dimension,
}).then((canvas) => {
// if converting to blob fails, there's some problem that will
// likely prevent preview and export (e.g. canvas too big)
return canvasToBlob(canvas).then(() => {
canvasNode.replaceChildren(canvas);
});
}); });
} }
}; };
@ -126,11 +124,12 @@ const MermaidToExcalidraw = ({
}; };
const onSelect = () => { const onSelect = () => {
app.scene.replaceAllElements([...elements, ...canvasData.elements]); const { elements: newElements, files } = data.current;
app.addFiles(Object.values(canvasData.files || [])); app.scene.replaceAllElements([...elements, ...newElements]);
app.scrollToContent(canvasData.elements); app.addFiles(Object.values(files || []));
app.scrollToContent(newElements);
app.setSelection(canvasData.elements); app.setSelection(newElements);
onClose(); onClose();
}; };