diff --git a/src/VisualEditor/VisualEditor.css b/src/VisualEditor/VisualEditor.css index f628afa..acef0c9 100644 --- a/src/VisualEditor/VisualEditor.css +++ b/src/VisualEditor/VisualEditor.css @@ -32,11 +32,11 @@ svg > text { cursor: grabbing; } -/* .rountangle.selected { +.rountangle.selected { fill: rgba(0, 0, 255, 0.2); - stroke: blue; - stroke-width: 4px; -} */ + /* stroke: blue; + stroke-width: 4px; */ +} .lineHelper { stroke: rgba(0, 0, 0, 0); @@ -81,7 +81,7 @@ svg > text { -.selected { +line.selected, circle.selected { fill: rgba(0, 0, 255, 0.2); /* stroke-dasharray: 7 6; */ stroke: blue; diff --git a/src/VisualEditor/VisualEditor.tsx b/src/VisualEditor/VisualEditor.tsx index b1e4afc..67d4451 100644 --- a/src/VisualEditor/VisualEditor.tsx +++ b/src/VisualEditor/VisualEditor.tsx @@ -95,6 +95,21 @@ export function VisualEditor() { // console.log('selectingState:', selectingState); // }, [selectingState]); + useEffect(() => { + const recoveredState = JSON.parse(window.localStorage.getItem("state") || "null") || emptyState; + setState(recoveredState); + }, []); + + useEffect(() => { + // delay is necessary for 2 reasons: + // 1) it's a hack - prevents us from writing the initial state to localstorage (before having recovered the state that was in localstorage) + // 2) performance: only save when the user does nothing + const timeout = setTimeout(() => { + window.localStorage.setItem("state", JSON.stringify(state)); + console.log('saved to localStorage'); + }, 100); + return () => clearTimeout(timeout); + }, [state]); const onMouseDown: MouseEventHandler = (e) => { @@ -368,7 +383,7 @@ export function RountangleSVG(props: {rountangle: Rountangle, dragging: boolean,