feat: add destroy method for cleanup

lib/canvas_editor/create_editor.js

@@ -59,14 +59,32 @@ function createEditor(
   });
   resizeObserver.observe(editorContainer);
 
+  let removeMouseListeners = null;
+  let removeKeyboardListeners = null;
+
   if (readOnly) {
     toolbarCanvas.remove();
   } else {
-    addMouseListeners(editorCanvas, editorArea, JavaEditorArea);
-    addKeyboardListeners(editorCanvas, editorArea, JavaEditorArea);
+    removeMouseListeners = addMouseListeners(
+      editorCanvas,
+      editorArea,
+      JavaEditorArea,
+    );
+    removeKeyboardListeners = addKeyboardListeners(
+      editorCanvas,
+      editorArea,
+      JavaEditorArea,
+    );
+  }
+
+  function destroy() {
+    childElement.remove();
+    resizeObserver.disconnect();
+    removeMouseListeners?.();
+    removeKeyboardListeners?.();
   }
 
-  return { editorArea, toolbar };
+  return { editorArea, toolbar, uiHelper, destroy };
 }
 
 module.exports = createEditor;

lib/canvas_editor/events.js

@@ -31,11 +31,14 @@ function addMouseListeners(canvasElement, drawArea, JavaEditorArea) {
     isMouseDown = true;
     fireMouseEvent(JavaEditorArea.MOUSE_EVENT_PRESSED, ev, ev.detail);
   });
-  // Listen on document to capture mouse release outside the canvas.
-  document.addEventListener('mouseup', (ev) => {
+
+  function handleMouseUp(ev) {
     isMouseDown = false;
     fireMouseEvent(JavaEditorArea.MOUSE_EVENT_RELEASED, ev, ev.detail);
-  });
+  }
+  // Listen on document to capture mouse release outside the canvas.
+  document.addEventListener('mouseup', handleMouseUp);
+
   canvasElement.addEventListener('click', (ev) => {
     fireMouseEvent(JavaEditorArea.MOUSE_EVENT_CLICKED, ev, ev.detail);
   });
@@ -52,6 +55,10 @@ function addMouseListeners(canvasElement, drawArea, JavaEditorArea) {
       fireMouseEvent(JavaEditorArea.MOUSE_EVENT_MOVED, ev);
     }
   });
+
+  return () => {
+    document.removeEventListener('mouseup', handleMouseUp);
+  };
 }
 
 function addKeyboardListeners(canvasElement, editorArea, JavaEditorArea) {
@@ -79,6 +86,10 @@ function addKeyboardListeners(canvasElement, editorArea, JavaEditorArea) {
   canvasElement.addEventListener('keyup', (ev) => {
     fireKeyEvent(JavaEditorArea.KEY_EVENT_RELEASED, ev);
   });
+
+  return () => {
+    // No cleanup needed.
+  };
 }
 
 /**

lib/canvas_editor/index.js

@@ -4,6 +4,7 @@ const createEditor = require('./create_editor');
 
 function createCanvasEditor(JavaEditorArea, JavaEditorToolbar, JavaUIHelper) {
   return class CanvasEditor {
+    #isReadOnly;
     #editorArea;
     // Can be useful for debugging.
     /* eslint-disable no-unused-private-class-members */
@@ -12,19 +13,19 @@ function createCanvasEditor(JavaEditorArea, JavaEditorToolbar, JavaUIHelper) {
     /* eslint-enable no-unused-private-class-members */
     #onChange;
     #changeEventMap;
-    #isReadOnly;
+    #destroy;
 
     constructor(rootElement, options = {}) {
       const { readOnly = false } = options;
-      this.#isReadOnly = readOnly;
-      const { editorArea, toolbar, uiHelper } = createEditor(
+      const { editorArea, toolbar, uiHelper, destroy } = createEditor(
         rootElement,
         options,
         (event) => this.#handleChange(event),
         JavaEditorArea,
         JavaEditorToolbar,
         JavaUIHelper,
       );
+      this.#isReadOnly = readOnly;
       this.#editorArea = editorArea;
       this.#toolbar = toolbar;
       this.#uiHelper = uiHelper;
@@ -35,34 +36,63 @@ function createCanvasEditor(JavaEditorArea, JavaEditorToolbar, JavaUIHelper) {
         [JavaEditorArea.EDITOR_EVENT_HIGHLIGHT_ATOM_CHANGED]: 'highlight-atom',
         [JavaEditorArea.EDITOR_EVENT_HIGHLIGHT_BOND_CHANGED]: 'highlight-bond',
       };
+      this.#destroy = destroy;
     }
 
     setMolecule(molecule) {
+      this.#checkNotDestroyed();
+
       this.#editorArea.setMolecule(molecule);
     }
 
     getMolecule() {
+      this.#checkNotDestroyed();
+
       return this.#editorArea.getMolecule();
     }
 
     setReaction(reaction) {
+      this.#checkNotDestroyed();
+
       this.#editorArea.setReaction(reaction);
     }
 
     getReaction() {
+      this.#checkNotDestroyed();
+
       this.#editorArea.getReaction();
     }
 
     setOnChangeListener(onChange) {
+      this.#checkNotDestroyed();
+
       if (this.#isReadOnly) return;
 
       this.#onChange = onChange;
     }
 
     removeOnChangeListner() {
+      this.#checkNotDestroyed();
+
       this.#onChange = null;
     }
 
+    destroy() {
+      this.#checkNotDestroyed();
+      this.#destroy();
+      this.#editorArea = null;
+      this.#toolbar = null;
+      this.#uiHelper = null;
+      this.#onChange = null;
+      this.#destroy = null;
+    }
+
+    #checkNotDestroyed() {
+      if (!this.#editorArea) {
+        throw new Error('CanvasEditor has been destroyed');
+      }
+    }
+
     /**
      * @param {{ what: number; isUserEvent: boolean; }} event
      */

types.d.ts

@@ -3756,4 +3756,11 @@ export declare class CanvasEditor {
    * Remove the change listener callback.
    */
   removeOnChangeListener(): void;
+
+  /**
+   * Destroy the editor.
+   * This should be called when the editor is no longer needed to free resources.
+   * All methods will throw an error after calling this.
+   */
+  destroy(): void;
 }