diff --git a/src/Viewer/renderers/label.jsx b/src/Viewer/renderers/label.jsx index e8285ee2ea..4a97bb7a06 100644 --- 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 index b80ca8837e..21fcaf404b 100644 --- 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 index a04384a8c9..7acf89aaeb 100644 --- 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;