Remove label/math/text from graph on umount (Doenet#1982)

jaltekruse · Mar 8, 2023 · f2d878d · f2d878d
1 parent cef9377
commit f2d878d
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 11 deletions.
diff --git a/src/Viewer/renderers/label.jsx b/src/Viewer/renderers/label.jsx
@@ -1,4 +1,4 @@
-import React, { useContext, useRef } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import { BoardContext } from './graph';
 import useDoenetRender from './useDoenetRenderer';
 import { MathJax } from "better-react-mathjax";
@@ -26,6 +26,20 @@ export default React.memo(function Label(props) {
   let previousPositionFromAnchor = useRef(null);
 
 
+  useEffect(() => {
+    //On unmount
+    return () => {
+      if (labelJXG.current !== null) {
+        labelJXG.current.off('drag');
+        labelJXG.current.off('down');
+        labelJXG.current.off('up');
+        board?.removeObject(labelJXG.current);
+        labelJXG.current = null;
+      }
+
+    }
+  }, [])
+
   function createLabelJXG() {
 
     let fixed = !SVs.draggable || SVs.fixed;
@@ -206,10 +220,12 @@ export default React.memo(function Label(props) {
     if (SVs.hasLatex) {
       setTimeout(() => {
 
-        labelJXG.current.needsUpdate = true;
-        labelJXG.current.setText(SVs.value)
-        labelJXG.current.update();
-        board.updateRenderer();
+        if (labelJXG.current) {
+          labelJXG.current.needsUpdate = true;
+          labelJXG.current.setText(SVs.value)
+          labelJXG.current.update();
+          board?.updateRenderer();
+        }
 
       }, 1000)
     }

diff --git a/src/Viewer/renderers/math.jsx b/src/Viewer/renderers/math.jsx
@@ -1,4 +1,4 @@
-import React, { useContext, useRef } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import { BoardContext } from './graph';
 import useDoenetRender from './useDoenetRenderer';
 import { MathJax } from "better-react-mathjax";
@@ -26,6 +26,20 @@ export default React.memo(function MathComponent(props) {
   let lastPositionFromCore = useRef(null);
   let previousPositionFromAnchor = useRef(null);
 
+  useEffect(() => {
+    //On unmount
+    return () => {
+      if (mathJXG.current !== null) {
+        mathJXG.current.off('drag');
+        mathJXG.current.off('down');
+        mathJXG.current.off('up');
+        board?.removeObject(mathJXG.current);
+        mathJXG.current = null;
+      }
+
+    }
+  }, [])
+
 
   function createMathJXG() {
 
@@ -225,10 +239,12 @@ export default React.memo(function MathComponent(props) {
     // TODO: can we trigger this on MathJax being finished rather than wait 1 second?
     setTimeout(() => {
 
-      mathJXG.current.needsUpdate = true;
-      mathJXG.current.setText(beginDelim + SVs.latex + endDelim)
-      mathJXG.current.update();
-      board.updateRenderer();
+      if (mathJXG.current) {
+        mathJXG.current.needsUpdate = true;
+        mathJXG.current.setText(beginDelim + SVs.latex + endDelim)
+        mathJXG.current.update();
+        board.updateRenderer();
+      }
 
     }, 1000)
   }

diff --git a/src/Viewer/renderers/text.jsx b/src/Viewer/renderers/text.jsx
@@ -1,4 +1,4 @@
-import React, { useContext, useRef } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import { BoardContext } from './graph';
 import useDoenetRender from './useDoenetRenderer';
 import me from 'math-expressions';
@@ -26,6 +26,20 @@ export default React.memo(function Text(props) {
   let previousPositionFromAnchor = useRef(null);
 
 
+  useEffect(() => {
+    //On unmount
+    return () => {
+      if (textJXG.current !== null) {
+        textJXG.current.off('drag');
+        textJXG.current.off('down');
+        textJXG.current.off('up');
+        board?.removeObject(textJXG.current);
+        textJXG.current = null;
+      }
+
+    }
+  }, [])
+
   function createTextJXG() {
 
     let fixed = !SVs.draggable || SVs.fixed;