diff --git a/src/GraphArea.jsx b/src/GraphArea.jsx index f855635..a1e0154 100644 --- a/src/GraphArea.jsx +++ b/src/GraphArea.jsx @@ -57,12 +57,17 @@ function Graph({ useEffect(() => { const handleResize = () => setContainerDim(ref.current); + let graph = null; if (ref.current) { setContainerDim(ref.current); window.addEventListener('resize', handleResize); - setInstance(initialiseNewGraph()); + graph = initialiseNewGraph(); + setInstance(graph); } - return () => window.removeEventListener('resize', handleResize); + return () => { + window.removeEventListener('resize', handleResize); + if (graph) graph.dispose(); + }; }, [ref]); // Update theme when darkMode changes diff --git a/src/component/TabBar.jsx b/src/component/TabBar.jsx index ae6fe5a..7bdeaa5 100644 --- a/src/component/TabBar.jsx +++ b/src/component/TabBar.jsx @@ -15,7 +15,9 @@ const TabBar = ({ superState, dispatcher }) => { const [tabToClose, setTabToClose] = useState(null); const closeTab = (i) => { - localStorageManager.remove(superState.graphs[i] ? superState.graphs[i].graphID : null); + const graph = superState.graphs[i]; + if (graph && graph.instance) graph.instance.dispose(); + localStorageManager.remove(graph ? graph.graphID : null); dispatcher({ type: T.REMOVE_GRAPH, payload: i }); if (!superState.curGraphIndex && superState.graphs.length === 1) { dispatcher({ type: T.SET_CUR_INSTANCE, payload: null }); diff --git a/src/graph-builder/graph-core/1-core.js b/src/graph-builder/graph-core/1-core.js index 1ec5f94..14d2b79 100644 --- a/src/graph-builder/graph-core/1-core.js +++ b/src/graph-builder/graph-core/1-core.js @@ -372,6 +372,15 @@ class CoreGraph { } } + dispose() { + if (!this.cy) return; + if (this.autoSaveIntervalId !== null) clearTimeout(this.autoSaveIntervalId); + this.autoSaveIntervalId = null; + this.cy.destroy(); + this.cy = null; + this.dispatcher = null; + } + reset() { this.resetAllComp(); this.resetAllAction();