@judah-silva/rnacanvas 0.0.7 → 0.0.9

package/README.md

@@ -129,3 +129,7 @@ const props: MotifProps = {
   locked: false,
 };
 ```
+
+
+
+test

package/dist/index.d.mts

@@ -8,7 +8,16 @@ import { Mesh, TransformNode, Scene, Matrix, Nullable, Quaternion, Observer, Eng
 declare class Residue extends Group<MeshObject> {
     constructor(name: string);
     addChild(child: MeshObject): void;
+    /**
+     * Checks if the residue has a mesh with the given uuid
+     * @param uuid
+     */
     hasMesh(uuid: string): boolean;
+    /**
+     * Cretes a material with the given color and sets it to the mesh
+     * @param color String in the format of #RRGGBB
+     */
+    colorResidue(color: string): void;
 }
 
 /**
@@ -297,6 +306,7 @@ declare class RenderScene {
     dispose(): void;
     add(motif: Motif): void;
     remove(motif: Motif): void;
+    removeAll(): void;
     setBackgroundColor(hexColor: string): void;
     private _reattachToScene;
     private _handleResize;
@@ -460,8 +470,8 @@ declare class CanvasDataManager {
     private static _listeners;
     static get selectedMotifIds(): Set<string>;
     static setSelectedMotifIds(selectedMotifIds: Set<string>): void;
-    static get lockedMotifIds(): string[];
-    static setLockedMotifIds(lockedMotifIds: string[]): void;
+    static get lockedMotifIds(): Set<string>;
+    static setLockedMotifIds(lockedMotifIds: Set<string>): void;
     static get hardLockedMotifIds(): string[];
     static setHardLockedMotifIds(hardLockedMotifIds: string[]): void;
     static get scoreRMSD(): ScoreInfo[][];

package/dist/index.d.ts

@@ -8,7 +8,16 @@ import { Mesh, TransformNode, Scene, Matrix, Nullable, Quaternion, Observer, Eng
 declare class Residue extends Group<MeshObject> {
     constructor(name: string);
     addChild(child: MeshObject): void;
+    /**
+     * Checks if the residue has a mesh with the given uuid
+     * @param uuid
+     */
     hasMesh(uuid: string): boolean;
+    /**
+     * Cretes a material with the given color and sets it to the mesh
+     * @param color String in the format of #RRGGBB
+     */
+    colorResidue(color: string): void;
 }
 
 /**
@@ -297,6 +306,7 @@ declare class RenderScene {
     dispose(): void;
     add(motif: Motif): void;
     remove(motif: Motif): void;
+    removeAll(): void;
     setBackgroundColor(hexColor: string): void;
     private _reattachToScene;
     private _handleResize;
@@ -460,8 +470,8 @@ declare class CanvasDataManager {
     private static _listeners;
     static get selectedMotifIds(): Set<string>;
     static setSelectedMotifIds(selectedMotifIds: Set<string>): void;
-    static get lockedMotifIds(): string[];
-    static setLockedMotifIds(lockedMotifIds: string[]): void;
+    static get lockedMotifIds(): Set<string>;
+    static setLockedMotifIds(lockedMotifIds: Set<string>): void;
     static get hardLockedMotifIds(): string[];
     static setHardLockedMotifIds(hardLockedMotifIds: string[]): void;
     static get scoreRMSD(): ScoreInfo[][];

package/dist/index.js

@@ -312,7 +312,10 @@ var Residue = class extends Group {
     child.setParent(this);
     this._children.add(child);
   }
-  // Temporary function to find if Residue contains mesh with uuid
+  /**
+   * Checks if the residue has a mesh with the given uuid
+   * @param uuid 
+   */
   hasMesh(uuid) {
     let found = false;
     this._children.forEach((child) => {
@@ -322,6 +325,15 @@ var Residue = class extends Group {
     });
     return found;
   }
+  /**
+   * Cretes a material with the given color and sets it to the mesh
+   * @param color String in the format of #RRGGBB
+   */
+  colorResidue(color) {
+    this._children.forEach((child) => {
+      child.createAndSetMaterial(color);
+    });
+  }
 };
 
 // src/3D/MeshObject.ts
@@ -366,6 +378,7 @@ var MeshObject = class {
     const color3 = import_core7.Color3.FromHexString(`#${color.replace(/^0x/, "")}`);
     mat.diffuseColor = color3;
     mat.specularColor = color3;
+    mat.backFaceCulling = false;
     this._mesh.material = mat;
   }
   setNewMesh(mesh) {
@@ -591,9 +604,19 @@ var EventManager = class {
         canceled: false,
         timestamp: performance.now()
       };
-      if (keyboardInfo.type === import_core8.KeyboardEventTypes.KEYDOWN) {
+      if (keyboardInfo.type === import_core8.KeyboardEventTypes.KEYDOWN && /^[wasdqeWASD]$/.test(event.key)) {
+        if (event.key.charCodeAt(0) >= 97) {
+          this._activeKeys.delete(event.key.toUpperCase());
+        } else {
+          this._activeKeys.delete(event.key.toLowerCase());
+        }
         this._activeKeys.add(event.key);
       } else if (keyboardInfo.type === import_core8.KeyboardEventTypes.KEYUP) {
+        if (event.key.charCodeAt(0) >= 97) {
+          this._activeKeys.delete(event.key.toUpperCase());
+        } else {
+          this._activeKeys.delete(event.key.toLowerCase());
+        }
         this._activeKeys.delete(event.key);
       }
       if (this._activeKeys.has("w")) keyboardEvent.rotationAxis.add(new Vec3(-1, 0, 0));
@@ -733,7 +756,15 @@ var RenderScene = class {
       return;
     }
     this._children.delete(motif.uuid);
-    this._scene.removeTransformNode(motif.node);
+    motif.node.dispose(false, true);
+  }
+  removeAll() {
+    this._scene.meshes.slice().forEach((mesh) => {
+      if (mesh && this._scene.getMeshById(mesh.id)) {
+        this._scene.removeMesh(mesh);
+      }
+    });
+    this._children.clear();
   }
   setBackgroundColor(hexColor) {
     this._scene.clearColor = import_core9.Color4.FromHexString(`${hexColor.replace(/^0x/, "")}`);
@@ -750,7 +781,7 @@ var RenderScene = class {
       geo?.applyToMesh(mesh);
       mesh.material = mat;
       currObj.setNewMesh(mesh);
-      node.dispose();
+      node.dispose(false, true);
     }
     if (!(currObj instanceof MeshObject)) {
       currObj.children.forEach((childObj) => {
@@ -883,7 +914,7 @@ var CanvasAttributeTypes = /* @__PURE__ */ ((CanvasAttributeTypes2) => {
 })(CanvasAttributeTypes || {});
 var CanvasDataManager = class {
   static _selectedMotifIds = /* @__PURE__ */ new Set();
-  static _lockedMotifIds = [];
+  static _lockedMotifIds = /* @__PURE__ */ new Set();
   static _hardLockedMotifIds = [];
   static _scoreRMSD = [];
   static _kabschRMSD = [];
@@ -1140,28 +1171,27 @@ function Canvas({
 }) {
   const canvasRef = (0, import_react.useRef)(null);
   const scene = (0, import_react.useRef)(null);
-  const motifs = [];
+  const motifs = (0, import_react.useRef)([]);
   let hardLockedMotifIds = [];
   motifProps.forEach((motifProp) => {
-    motifs.push(motifProp.motif);
     if (motifProp.locked) hardLockedMotifIds.push(motifProp.motif.uuid);
   });
   CanvasDataManager.setHardLockedMotifIds(hardLockedMotifIds);
   const selectedMotifMeshState = (0, import_react.useRef)(/* @__PURE__ */ new Set());
-  const lockedMotifIdState = (0, import_react.useRef)([]);
+  const lockedMotifIdState = (0, import_react.useRef)(/* @__PURE__ */ new Set());
   const [cursorStyle, setCursorStyle] = (0, import_react.useState)("auto");
   const [selectedMotifIds, setSelectedmotifIds] = (0, import_react.useState)(/* @__PURE__ */ new Set());
   const [scoreRMSD, setScoreRMSD] = (0, import_react.useState)([]);
   const [kabschRMSD, setKabschRMSD] = (0, import_react.useState)([]);
-  const [lockedMotifIds, setLockedMotifIds] = (0, import_react.useState)([]);
+  const [lockedMotifIds, setLockedMotifIds] = (0, import_react.useState)(/* @__PURE__ */ new Set());
   const addMotif = (motif) => {
     if (selectedMotifMeshState.current.has(motif)) {
       return;
     }
     const newSet = /* @__PURE__ */ new Set();
-    for (let i = 0; i < motifs.length; i += 1) {
-      if (selectedMotifMeshState.current.has(motifs[i]) || motifs[i].uuid === motif.uuid) {
-        newSet.add(motifs[i].uuid);
+    for (let i = 0; i < motifs.current.length; i += 1) {
+      if (selectedMotifMeshState.current.has(motifs.current[i]) || motifs.current[i].uuid === motif.uuid) {
+        newSet.add(motifs.current[i].uuid);
       }
     }
     setSelectedmotifIds(newSet);
@@ -1179,7 +1209,7 @@ function Canvas({
     });
   };
   function updateGlow() {
-    motifs.forEach((motif) => {
+    motifs.current.forEach((motif) => {
       motif.children.forEach((residue) => {
         residue.children.forEach((childMesh) => {
           if (selectedMotifIds.has(motif.uuid)) {
@@ -1196,7 +1226,7 @@ function Canvas({
       return;
     }
     const { motif } = event;
-    if (!motif || selectedMotifMeshState.current.has(motif) || lockedMotifIdState.current.includes(motif.uuid) || hardLockedMotifIds.includes(motif.uuid)) {
+    if (!motif || selectedMotifMeshState.current.has(motif)) {
       return;
     }
     if (event.multiSelect && motif) {
@@ -1228,7 +1258,7 @@ function Canvas({
         const deltaX = rawDeltaX / renderWidth * canvasRef.current.width;
         const deltaY = rawDeltaY / renderHeight * canvasRef.current.height;
         selectedMotifMeshState.current.forEach((element) => {
-          if (!lockedMotifIdState.current.includes(element.uuid) && !hardLockedMotifIds.includes(element.uuid)) {
+          if (!lockedMotifIdState.current.has(element.uuid) && !hardLockedMotifIds.includes(element.uuid)) {
             element.translate(-deltaX, -deltaY, 0);
           }
         });
@@ -1241,11 +1271,11 @@ function Canvas({
       if (scene.current) {
         const angle = directionVec.length() / scene.current.renderWidth * (3 * Math.PI);
         selectedMotifMeshState.current.forEach((element) => {
-          if (!lockedMotifIdState.current.includes(element.uuid) && !hardLockedMotifIds.includes(element.uuid)) {
+          if (!lockedMotifIdState.current.has(element.uuid) && !hardLockedMotifIds.includes(element.uuid)) {
             element.rotate(axisVec, angle);
           }
         });
-        if (showRMSD) setScoreRMSD(calculateRMSD(Array.from(selectedMotifMeshState.current), motifs));
+        if (showRMSD) setScoreRMSD(calculateRMSD(Array.from(selectedMotifMeshState.current), motifs.current));
       }
     }
   }
@@ -1258,7 +1288,7 @@ function Canvas({
       const zoomSpeed = 0.1;
       const zoomDirection = event.originalEvent.deltaY > 0 ? -1 : 1;
       selectedMotifMeshState.current.forEach((element) => {
-        if (!lockedMotifIdState.current.includes(element.uuid) && !hardLockedMotifIds.includes(element.uuid) && !(element.scale <= 1 && zoomDirection === -1) && !(element.scale >= 30 && zoomDirection === 1)) {
+        if (!lockedMotifIdState.current.has(element.uuid) && !hardLockedMotifIds.includes(element.uuid) && !(element.scale <= 1 && zoomDirection === -1) && !(element.scale >= 30 && zoomDirection === 1)) {
           const scaleFactor = 1 + zoomDirection * zoomSpeed;
           element.multiplyScalar(scaleFactor);
         }
@@ -1286,19 +1316,19 @@ function Canvas({
     }
     const angle = event.rotationAxis.length() / 500 * (6 * Math.PI);
     selectedMotifMeshState.current.forEach((element) => {
-      if (!lockedMotifIdState.current.includes(element.uuid) && !hardLockedMotifIds.includes(element.uuid)) {
+      if (!lockedMotifIdState.current.has(element.uuid) && !hardLockedMotifIds.includes(element.uuid)) {
         element.rotate(event.rotationAxis, angle);
       }
     });
-    if (showRMSD) setScoreRMSD(calculateRMSD(Array.from(selectedMotifMeshState.current), motifs));
+    if (showRMSD) setScoreRMSD(calculateRMSD(Array.from(selectedMotifMeshState.current), motifs.current));
   }
   function onKeyboardTranslate(event) {
     if (event.translationDirection.equals(Vec3.Zero)) {
       return;
     }
-    event.translationDirection.multiplyScalar(0.5);
+    event.translationDirection.multiplyScalar(4.5);
     selectedMotifMeshState.current.forEach((element) => {
-      if (!lockedMotifIdState.current.includes(element.uuid) && !hardLockedMotifIds.includes(element.uuid)) {
+      if (!lockedMotifIdState.current.has(element.uuid) && !hardLockedMotifIds.includes(element.uuid)) {
         element.translate(
           event.translationDirection.x,
           event.translationDirection.y,
@@ -1311,10 +1341,10 @@ function Canvas({
     if (!event.rotationAxis.equals(Vec3.Zero) || !event.translationDirection.equals(Vec3.Zero)) {
       return;
     }
-    if (!/^[1-9]$/.test(event.key) || Number(event.key) > motifs.length) {
+    if (!/^[1-9]$/.test(event.key) || Number(event.key) > motifs.current.length) {
       return;
     }
-    const motif = motifs[Number(event.key) - 1];
+    const motif = motifs.current[Number(event.key) - 1];
     if (selectedMotifMeshState.current.has(motif)) {
       removeMotif(motif);
     } else {
@@ -1337,8 +1367,8 @@ function Canvas({
     return positions;
   };
   const updateMotifs = () => {
-    const positions = calculatePositions(motifs.length);
-    motifs.forEach((motifMesh, index) => {
+    const positions = calculatePositions(motifs.current.length);
+    motifs.current.forEach((motifMesh, index) => {
       if (!scene.current?.children.has(motifMesh.uuid)) return;
       if (motifProps[index].position) positions[index] = motifProps[index].position.clone();
       motifMesh.setPosition(positions[index].x, positions[index].y, positions[index].z);
@@ -1348,9 +1378,6 @@ function Canvas({
       motifMesh.setScale(scale);
     });
   };
-  (0, import_react.useEffect)(() => {
-    updateMotifs();
-  }, [motifProps]);
   (0, import_react.useEffect)(() => {
     const unsubscribe = CanvasDataManager.subscribe("selectedMotifs" /* SELECTED_MOTIFS */, () => {
       setSelectedmotifIds(CanvasDataManager.selectedMotifIds);
@@ -1362,13 +1389,13 @@ function Canvas({
       CanvasDataManager.setSelectedMotifIds(selectedMotifIds);
     }
     selectedMotifMeshState.current.clear();
-    motifs.forEach((motif) => {
+    motifs.current.forEach((motif) => {
       if (selectedMotifIds.has(motif.uuid)) {
         selectedMotifMeshState.current.add(motif);
       }
     });
     updateGlow();
-    if (showRMSD) setScoreRMSD(calculateRMSD(Array.from(selectedMotifMeshState.current), motifs));
+    if (showRMSD) setScoreRMSD(calculateRMSD(Array.from(selectedMotifMeshState.current), motifs.current));
   }, [selectedMotifIds]);
   (0, import_react.useEffect)(() => {
     const unsubscribe = CanvasDataManager.subscribe("lockedMotifIds" /* LOCKED_MOTIF_IDS */, () => {
@@ -1409,8 +1436,8 @@ function Canvas({
     if (!showRMSD) return;
     if (CanvasDataManager.kabschRMSD !== kabschRMSD) {
       CanvasDataManager.setKabschRMSD(kabschRMSD);
-    } else if (CanvasDataManager.kabschRMSD.length !== motifs.length) {
-      CanvasDataManager.setKabschRMSD(calculateAllKabschRMSD(motifs));
+    } else if (CanvasDataManager.kabschRMSD.length !== motifs.current.length) {
+      CanvasDataManager.setKabschRMSD(calculateAllKabschRMSD(motifs.current));
     }
   }, [kabschRMSD]);
   (0, import_react.useEffect)(() => {
@@ -1429,84 +1456,91 @@ function Canvas({
         rendererSizeIsWindow ? window.innerWidth : rendererWidth,
         rendererSizeIsWindow ? window.innerHeight : rendererHeight
       );
-    }
-    if (motifs.length > 0) {
-      if (showRMSD) setKabschRMSD(calculateAllKabschRMSD(motifs));
-      if (scene.current.children.size !== motifs.length) {
-        const positions = calculatePositions(motifs.length);
-        motifs.forEach((motifMesh, index) => {
-          scene.current?.add(motifMesh);
-          if (motifProps[index].position) positions[index] = motifProps[index].position.clone();
-          motifMesh.setPosition(positions[index].x, positions[index].y, positions[index].z);
-          if (motifProps[index].rotation) motifMesh.setQuaternion(motifProps[index].rotation);
-          let scale = canvasRef.current.width / 250;
-          if (motifProps[index].scale) scale = motifProps[index].scale;
-          motifMesh.multiplyScalar(scale);
+      const eventManager = scene.current?.eventManager;
+      eventManager.on(Events.EventType.OBJECT_SELECTED, onSelectMotif);
+      eventManager.on(Events.EventType.OBJECT_DESELECTED, onDeselectMotif);
+      eventManager.on(Events.EventType.POINTER_MOVE, onMouseMove);
+      eventManager.on(Events.EventType.POINTER_WHEEL, onMouseScroll);
+      eventManager.on(Events.EventType.POINTER_DOWN, onMouseDown);
+      eventManager.on(Events.EventType.POINTER_UP, onMouseUp);
+      eventManager.on(Events.EventType.KEY_DOWN, onKeyboardRotate);
+      eventManager.on(Events.EventType.KEY_DOWN, onKeyboardTranslate);
+      eventManager.on(Events.EventType.KEY_DOWN, onKeyboardSelect);
+      if (customEventProps) {
+        customEventProps.forEach((customEventProp) => {
+          switch (customEventProp.eventType) {
+            // Handle Pointer Events
+            case Events.EventType.POINTER_DOWN:
+            case Events.EventType.POINTER_UP:
+            case Events.EventType.POINTER_MOVE:
+            case Events.EventType.POINTER_WHEEL:
+            case Events.EventType.TOUCH_END:
+            case Events.EventType.TOUCH_MOVE:
+            case Events.EventType.TOUCH_START:
+              eventManager.on(
+                customEventProp.eventType,
+                customEventProp.callback
+              );
+              break;
+            // Handle Keyboard Events
+            case Events.EventType.KEY_DOWN:
+            case Events.EventType.KEY_UP:
+              eventManager.on(
+                customEventProp.eventType,
+                customEventProp.callback
+              );
+              break;
+            // Handle Pinch Events
+            case Events.EventType.PINCH:
+            case Events.EventType.PINCH_END:
+            case Events.EventType.PINCH_START:
+              eventManager.on(
+                customEventProp.eventType,
+                customEventProp.callback
+              );
+              break;
+            // Handle Selection Events
+            case Events.EventType.OBJECT_SELECTED:
+            case Events.EventType.OBJECT_DESELECTED:
+              eventManager.on(
+                customEventProp.eventType,
+                customEventProp.callback
+              );
+              break;
+            // Handle Events
+            default:
+              eventManager.on(
+                customEventProp.eventType,
+                customEventProp.callback
+              );
+              break;
+          }
         });
-        const eventManager = scene.current?.eventManager;
-        eventManager.on(Events.EventType.OBJECT_SELECTED, onSelectMotif);
-        eventManager.on(Events.EventType.OBJECT_DESELECTED, onDeselectMotif);
-        eventManager.on(Events.EventType.POINTER_MOVE, onMouseMove);
-        eventManager.on(Events.EventType.POINTER_WHEEL, onMouseScroll);
-        eventManager.on(Events.EventType.POINTER_DOWN, onMouseDown);
-        eventManager.on(Events.EventType.POINTER_UP, onMouseUp);
-        eventManager.on(Events.EventType.KEY_DOWN, onKeyboardRotate);
-        eventManager.on(Events.EventType.KEY_DOWN, onKeyboardTranslate);
-        eventManager.on(Events.EventType.KEY_DOWN, onKeyboardSelect);
-        if (customEventProps) {
-          customEventProps.forEach((customEventProp) => {
-            switch (customEventProp.eventType) {
-              // Handle Pointer Events
-              case Events.EventType.POINTER_DOWN:
-              case Events.EventType.POINTER_UP:
-              case Events.EventType.POINTER_MOVE:
-              case Events.EventType.POINTER_WHEEL:
-              case Events.EventType.TOUCH_END:
-              case Events.EventType.TOUCH_MOVE:
-              case Events.EventType.TOUCH_START:
-                eventManager.on(
-                  customEventProp.eventType,
-                  customEventProp.callback
-                );
-                break;
-              // Handle Keyboard Events
-              case Events.EventType.KEY_DOWN:
-              case Events.EventType.KEY_UP:
-                eventManager.on(
-                  customEventProp.eventType,
-                  customEventProp.callback
-                );
-                break;
-              // Handle Pinch Events
-              case Events.EventType.PINCH:
-              case Events.EventType.PINCH_END:
-              case Events.EventType.PINCH_START:
-                eventManager.on(
-                  customEventProp.eventType,
-                  customEventProp.callback
-                );
-                break;
-              // Handle Selection Events
-              case Events.EventType.OBJECT_SELECTED:
-              case Events.EventType.OBJECT_DESELECTED:
-                eventManager.on(
-                  customEventProp.eventType,
-                  customEventProp.callback
-                );
-                break;
-              // Handle Events
-              default:
-                eventManager.on(
-                  customEventProp.eventType,
-                  customEventProp.callback
-                );
-                break;
-            }
-          });
-        }
       }
+      scene.current.start();
+    }
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (!scene.current || !canvasRef.current) return;
+    motifs.current.length = 0;
+    motifProps.forEach((motifProp) => {
+      motifs.current.push(motifProp.motif);
+    });
+    if (motifs.current.length > 0) {
+      if (showRMSD) setKabschRMSD(calculateAllKabschRMSD(motifs.current));
+      scene.current.removeAll();
+      const positions = calculatePositions(motifs.current.length);
+      motifs.current.forEach((motifMesh, index) => {
+        scene.current?.add(motifMesh);
+        if (motifProps[index].position) positions[index] = motifProps[index].position.clone();
+        motifMesh.setPosition(positions[index].x, positions[index].y, positions[index].z);
+        if (motifProps[index].rotation) motifMesh.setQuaternion(motifProps[index].rotation);
+        let scale = canvasRef.current.width / 250;
+        if (motifProps[index].scale) scale = motifProps[index].scale;
+        motifMesh.setScale(scale);
+        if (motifProps[index].locked) lockedMotifIdState.current.add(motifMesh.uuid);
+      });
     }
-    scene.current?.start();
   }, [rendererWidth, rendererHeight, rendererSizeIsWindow, motifProps]);
   return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("canvas", { ref: canvasRef }));
 }

package/dist/index.mjs

@@ -255,7 +255,10 @@ var Residue = class extends Group {
     child.setParent(this);
     this._children.add(child);
   }
-  // Temporary function to find if Residue contains mesh with uuid
+  /**
+   * Checks if the residue has a mesh with the given uuid
+   * @param uuid 
+   */
   hasMesh(uuid) {
     let found = false;
     this._children.forEach((child) => {
@@ -265,6 +268,15 @@ var Residue = class extends Group {
     });
     return found;
   }
+  /**
+   * Cretes a material with the given color and sets it to the mesh
+   * @param color String in the format of #RRGGBB
+   */
+  colorResidue(color) {
+    this._children.forEach((child) => {
+      child.createAndSetMaterial(color);
+    });
+  }
 };
 
 // src/3D/MeshObject.ts
@@ -309,6 +321,7 @@ var MeshObject = class {
     const color3 = Color3.FromHexString(`#${color.replace(/^0x/, "")}`);
     mat.diffuseColor = color3;
     mat.specularColor = color3;
+    mat.backFaceCulling = false;
     this._mesh.material = mat;
   }
   setNewMesh(mesh) {
@@ -534,9 +547,19 @@ var EventManager = class {
         canceled: false,
         timestamp: performance.now()
       };
-      if (keyboardInfo.type === KeyboardEventTypes.KEYDOWN) {
+      if (keyboardInfo.type === KeyboardEventTypes.KEYDOWN && /^[wasdqeWASD]$/.test(event.key)) {
+        if (event.key.charCodeAt(0) >= 97) {
+          this._activeKeys.delete(event.key.toUpperCase());
+        } else {
+          this._activeKeys.delete(event.key.toLowerCase());
+        }
         this._activeKeys.add(event.key);
       } else if (keyboardInfo.type === KeyboardEventTypes.KEYUP) {
+        if (event.key.charCodeAt(0) >= 97) {
+          this._activeKeys.delete(event.key.toUpperCase());
+        } else {
+          this._activeKeys.delete(event.key.toLowerCase());
+        }
         this._activeKeys.delete(event.key);
       }
       if (this._activeKeys.has("w")) keyboardEvent.rotationAxis.add(new Vec3(-1, 0, 0));
@@ -676,7 +699,15 @@ var RenderScene = class {
       return;
     }
     this._children.delete(motif.uuid);
-    this._scene.removeTransformNode(motif.node);
+    motif.node.dispose(false, true);
+  }
+  removeAll() {
+    this._scene.meshes.slice().forEach((mesh) => {
+      if (mesh && this._scene.getMeshById(mesh.id)) {
+        this._scene.removeMesh(mesh);
+      }
+    });
+    this._children.clear();
   }
   setBackgroundColor(hexColor) {
     this._scene.clearColor = Color4.FromHexString(`${hexColor.replace(/^0x/, "")}`);
@@ -693,7 +724,7 @@ var RenderScene = class {
       geo?.applyToMesh(mesh);
       mesh.material = mat;
       currObj.setNewMesh(mesh);
-      node.dispose();
+      node.dispose(false, true);
     }
     if (!(currObj instanceof MeshObject)) {
       currObj.children.forEach((childObj) => {
@@ -826,7 +857,7 @@ var CanvasAttributeTypes = /* @__PURE__ */ ((CanvasAttributeTypes2) => {
 })(CanvasAttributeTypes || {});
 var CanvasDataManager = class {
   static _selectedMotifIds = /* @__PURE__ */ new Set();
-  static _lockedMotifIds = [];
+  static _lockedMotifIds = /* @__PURE__ */ new Set();
   static _hardLockedMotifIds = [];
   static _scoreRMSD = [];
   static _kabschRMSD = [];
@@ -1083,28 +1114,27 @@ function Canvas({
 }) {
   const canvasRef = useRef(null);
   const scene = useRef(null);
-  const motifs = [];
+  const motifs = useRef([]);
   let hardLockedMotifIds = [];
   motifProps.forEach((motifProp) => {
-    motifs.push(motifProp.motif);
     if (motifProp.locked) hardLockedMotifIds.push(motifProp.motif.uuid);
   });
   CanvasDataManager.setHardLockedMotifIds(hardLockedMotifIds);
   const selectedMotifMeshState = useRef(/* @__PURE__ */ new Set());
-  const lockedMotifIdState = useRef([]);
+  const lockedMotifIdState = useRef(/* @__PURE__ */ new Set());
   const [cursorStyle, setCursorStyle] = useState("auto");
   const [selectedMotifIds, setSelectedmotifIds] = useState(/* @__PURE__ */ new Set());
   const [scoreRMSD, setScoreRMSD] = useState([]);
   const [kabschRMSD, setKabschRMSD] = useState([]);
-  const [lockedMotifIds, setLockedMotifIds] = useState([]);
+  const [lockedMotifIds, setLockedMotifIds] = useState(/* @__PURE__ */ new Set());
   const addMotif = (motif) => {
     if (selectedMotifMeshState.current.has(motif)) {
       return;
     }
     const newSet = /* @__PURE__ */ new Set();
-    for (let i = 0; i < motifs.length; i += 1) {
-      if (selectedMotifMeshState.current.has(motifs[i]) || motifs[i].uuid === motif.uuid) {
-        newSet.add(motifs[i].uuid);
+    for (let i = 0; i < motifs.current.length; i += 1) {
+      if (selectedMotifMeshState.current.has(motifs.current[i]) || motifs.current[i].uuid === motif.uuid) {
+        newSet.add(motifs.current[i].uuid);
       }
     }
     setSelectedmotifIds(newSet);
@@ -1122,7 +1152,7 @@ function Canvas({
     });
   };
   function updateGlow() {
-    motifs.forEach((motif) => {
+    motifs.current.forEach((motif) => {
       motif.children.forEach((residue) => {
         residue.children.forEach((childMesh) => {
           if (selectedMotifIds.has(motif.uuid)) {
@@ -1139,7 +1169,7 @@ function Canvas({
       return;
     }
     const { motif } = event;
-    if (!motif || selectedMotifMeshState.current.has(motif) || lockedMotifIdState.current.includes(motif.uuid) || hardLockedMotifIds.includes(motif.uuid)) {
+    if (!motif || selectedMotifMeshState.current.has(motif)) {
       return;
     }
     if (event.multiSelect && motif) {
@@ -1171,7 +1201,7 @@ function Canvas({
         const deltaX = rawDeltaX / renderWidth * canvasRef.current.width;
         const deltaY = rawDeltaY / renderHeight * canvasRef.current.height;
         selectedMotifMeshState.current.forEach((element) => {
-          if (!lockedMotifIdState.current.includes(element.uuid) && !hardLockedMotifIds.includes(element.uuid)) {
+          if (!lockedMotifIdState.current.has(element.uuid) && !hardLockedMotifIds.includes(element.uuid)) {
             element.translate(-deltaX, -deltaY, 0);
           }
         });
@@ -1184,11 +1214,11 @@ function Canvas({
       if (scene.current) {
         const angle = directionVec.length() / scene.current.renderWidth * (3 * Math.PI);
         selectedMotifMeshState.current.forEach((element) => {
-          if (!lockedMotifIdState.current.includes(element.uuid) && !hardLockedMotifIds.includes(element.uuid)) {
+          if (!lockedMotifIdState.current.has(element.uuid) && !hardLockedMotifIds.includes(element.uuid)) {
             element.rotate(axisVec, angle);
           }
         });
-        if (showRMSD) setScoreRMSD(calculateRMSD(Array.from(selectedMotifMeshState.current), motifs));
+        if (showRMSD) setScoreRMSD(calculateRMSD(Array.from(selectedMotifMeshState.current), motifs.current));
       }
     }
   }
@@ -1201,7 +1231,7 @@ function Canvas({
       const zoomSpeed = 0.1;
       const zoomDirection = event.originalEvent.deltaY > 0 ? -1 : 1;
       selectedMotifMeshState.current.forEach((element) => {
-        if (!lockedMotifIdState.current.includes(element.uuid) && !hardLockedMotifIds.includes(element.uuid) && !(element.scale <= 1 && zoomDirection === -1) && !(element.scale >= 30 && zoomDirection === 1)) {
+        if (!lockedMotifIdState.current.has(element.uuid) && !hardLockedMotifIds.includes(element.uuid) && !(element.scale <= 1 && zoomDirection === -1) && !(element.scale >= 30 && zoomDirection === 1)) {
           const scaleFactor = 1 + zoomDirection * zoomSpeed;
           element.multiplyScalar(scaleFactor);
         }
@@ -1229,19 +1259,19 @@ function Canvas({
     }
     const angle = event.rotationAxis.length() / 500 * (6 * Math.PI);
     selectedMotifMeshState.current.forEach((element) => {
-      if (!lockedMotifIdState.current.includes(element.uuid) && !hardLockedMotifIds.includes(element.uuid)) {
+      if (!lockedMotifIdState.current.has(element.uuid) && !hardLockedMotifIds.includes(element.uuid)) {
         element.rotate(event.rotationAxis, angle);
       }
     });
-    if (showRMSD) setScoreRMSD(calculateRMSD(Array.from(selectedMotifMeshState.current), motifs));
+    if (showRMSD) setScoreRMSD(calculateRMSD(Array.from(selectedMotifMeshState.current), motifs.current));
   }
   function onKeyboardTranslate(event) {
     if (event.translationDirection.equals(Vec3.Zero)) {
       return;
     }
-    event.translationDirection.multiplyScalar(0.5);
+    event.translationDirection.multiplyScalar(4.5);
     selectedMotifMeshState.current.forEach((element) => {
-      if (!lockedMotifIdState.current.includes(element.uuid) && !hardLockedMotifIds.includes(element.uuid)) {
+      if (!lockedMotifIdState.current.has(element.uuid) && !hardLockedMotifIds.includes(element.uuid)) {
         element.translate(
           event.translationDirection.x,
           event.translationDirection.y,
@@ -1254,10 +1284,10 @@ function Canvas({
     if (!event.rotationAxis.equals(Vec3.Zero) || !event.translationDirection.equals(Vec3.Zero)) {
       return;
     }
-    if (!/^[1-9]$/.test(event.key) || Number(event.key) > motifs.length) {
+    if (!/^[1-9]$/.test(event.key) || Number(event.key) > motifs.current.length) {
       return;
     }
-    const motif = motifs[Number(event.key) - 1];
+    const motif = motifs.current[Number(event.key) - 1];
     if (selectedMotifMeshState.current.has(motif)) {
       removeMotif(motif);
     } else {
@@ -1280,8 +1310,8 @@ function Canvas({
     return positions;
   };
   const updateMotifs = () => {
-    const positions = calculatePositions(motifs.length);
-    motifs.forEach((motifMesh, index) => {
+    const positions = calculatePositions(motifs.current.length);
+    motifs.current.forEach((motifMesh, index) => {
       if (!scene.current?.children.has(motifMesh.uuid)) return;
       if (motifProps[index].position) positions[index] = motifProps[index].position.clone();
       motifMesh.setPosition(positions[index].x, positions[index].y, positions[index].z);
@@ -1291,9 +1321,6 @@ function Canvas({
       motifMesh.setScale(scale);
     });
   };
-  useEffect(() => {
-    updateMotifs();
-  }, [motifProps]);
   useEffect(() => {
     const unsubscribe = CanvasDataManager.subscribe("selectedMotifs" /* SELECTED_MOTIFS */, () => {
       setSelectedmotifIds(CanvasDataManager.selectedMotifIds);
@@ -1305,13 +1332,13 @@ function Canvas({
       CanvasDataManager.setSelectedMotifIds(selectedMotifIds);
     }
     selectedMotifMeshState.current.clear();
-    motifs.forEach((motif) => {
+    motifs.current.forEach((motif) => {
       if (selectedMotifIds.has(motif.uuid)) {
         selectedMotifMeshState.current.add(motif);
       }
     });
     updateGlow();
-    if (showRMSD) setScoreRMSD(calculateRMSD(Array.from(selectedMotifMeshState.current), motifs));
+    if (showRMSD) setScoreRMSD(calculateRMSD(Array.from(selectedMotifMeshState.current), motifs.current));
   }, [selectedMotifIds]);
   useEffect(() => {
     const unsubscribe = CanvasDataManager.subscribe("lockedMotifIds" /* LOCKED_MOTIF_IDS */, () => {
@@ -1352,8 +1379,8 @@ function Canvas({
     if (!showRMSD) return;
     if (CanvasDataManager.kabschRMSD !== kabschRMSD) {
       CanvasDataManager.setKabschRMSD(kabschRMSD);
-    } else if (CanvasDataManager.kabschRMSD.length !== motifs.length) {
-      CanvasDataManager.setKabschRMSD(calculateAllKabschRMSD(motifs));
+    } else if (CanvasDataManager.kabschRMSD.length !== motifs.current.length) {
+      CanvasDataManager.setKabschRMSD(calculateAllKabschRMSD(motifs.current));
     }
   }, [kabschRMSD]);
   useEffect(() => {
@@ -1372,84 +1399,91 @@ function Canvas({
         rendererSizeIsWindow ? window.innerWidth : rendererWidth,
         rendererSizeIsWindow ? window.innerHeight : rendererHeight
       );
-    }
-    if (motifs.length > 0) {
-      if (showRMSD) setKabschRMSD(calculateAllKabschRMSD(motifs));
-      if (scene.current.children.size !== motifs.length) {
-        const positions = calculatePositions(motifs.length);
-        motifs.forEach((motifMesh, index) => {
-          scene.current?.add(motifMesh);
-          if (motifProps[index].position) positions[index] = motifProps[index].position.clone();
-          motifMesh.setPosition(positions[index].x, positions[index].y, positions[index].z);
-          if (motifProps[index].rotation) motifMesh.setQuaternion(motifProps[index].rotation);
-          let scale = canvasRef.current.width / 250;
-          if (motifProps[index].scale) scale = motifProps[index].scale;
-          motifMesh.multiplyScalar(scale);
+      const eventManager = scene.current?.eventManager;
+      eventManager.on(Events.EventType.OBJECT_SELECTED, onSelectMotif);
+      eventManager.on(Events.EventType.OBJECT_DESELECTED, onDeselectMotif);
+      eventManager.on(Events.EventType.POINTER_MOVE, onMouseMove);
+      eventManager.on(Events.EventType.POINTER_WHEEL, onMouseScroll);
+      eventManager.on(Events.EventType.POINTER_DOWN, onMouseDown);
+      eventManager.on(Events.EventType.POINTER_UP, onMouseUp);
+      eventManager.on(Events.EventType.KEY_DOWN, onKeyboardRotate);
+      eventManager.on(Events.EventType.KEY_DOWN, onKeyboardTranslate);
+      eventManager.on(Events.EventType.KEY_DOWN, onKeyboardSelect);
+      if (customEventProps) {
+        customEventProps.forEach((customEventProp) => {
+          switch (customEventProp.eventType) {
+            // Handle Pointer Events
+            case Events.EventType.POINTER_DOWN:
+            case Events.EventType.POINTER_UP:
+            case Events.EventType.POINTER_MOVE:
+            case Events.EventType.POINTER_WHEEL:
+            case Events.EventType.TOUCH_END:
+            case Events.EventType.TOUCH_MOVE:
+            case Events.EventType.TOUCH_START:
+              eventManager.on(
+                customEventProp.eventType,
+                customEventProp.callback
+              );
+              break;
+            // Handle Keyboard Events
+            case Events.EventType.KEY_DOWN:
+            case Events.EventType.KEY_UP:
+              eventManager.on(
+                customEventProp.eventType,
+                customEventProp.callback
+              );
+              break;
+            // Handle Pinch Events
+            case Events.EventType.PINCH:
+            case Events.EventType.PINCH_END:
+            case Events.EventType.PINCH_START:
+              eventManager.on(
+                customEventProp.eventType,
+                customEventProp.callback
+              );
+              break;
+            // Handle Selection Events
+            case Events.EventType.OBJECT_SELECTED:
+            case Events.EventType.OBJECT_DESELECTED:
+              eventManager.on(
+                customEventProp.eventType,
+                customEventProp.callback
+              );
+              break;
+            // Handle Events
+            default:
+              eventManager.on(
+                customEventProp.eventType,
+                customEventProp.callback
+              );
+              break;
+          }
         });
-        const eventManager = scene.current?.eventManager;
-        eventManager.on(Events.EventType.OBJECT_SELECTED, onSelectMotif);
-        eventManager.on(Events.EventType.OBJECT_DESELECTED, onDeselectMotif);
-        eventManager.on(Events.EventType.POINTER_MOVE, onMouseMove);
-        eventManager.on(Events.EventType.POINTER_WHEEL, onMouseScroll);
-        eventManager.on(Events.EventType.POINTER_DOWN, onMouseDown);
-        eventManager.on(Events.EventType.POINTER_UP, onMouseUp);
-        eventManager.on(Events.EventType.KEY_DOWN, onKeyboardRotate);
-        eventManager.on(Events.EventType.KEY_DOWN, onKeyboardTranslate);
-        eventManager.on(Events.EventType.KEY_DOWN, onKeyboardSelect);
-        if (customEventProps) {
-          customEventProps.forEach((customEventProp) => {
-            switch (customEventProp.eventType) {
-              // Handle Pointer Events
-              case Events.EventType.POINTER_DOWN:
-              case Events.EventType.POINTER_UP:
-              case Events.EventType.POINTER_MOVE:
-              case Events.EventType.POINTER_WHEEL:
-              case Events.EventType.TOUCH_END:
-              case Events.EventType.TOUCH_MOVE:
-              case Events.EventType.TOUCH_START:
-                eventManager.on(
-                  customEventProp.eventType,
-                  customEventProp.callback
-                );
-                break;
-              // Handle Keyboard Events
-              case Events.EventType.KEY_DOWN:
-              case Events.EventType.KEY_UP:
-                eventManager.on(
-                  customEventProp.eventType,
-                  customEventProp.callback
-                );
-                break;
-              // Handle Pinch Events
-              case Events.EventType.PINCH:
-              case Events.EventType.PINCH_END:
-              case Events.EventType.PINCH_START:
-                eventManager.on(
-                  customEventProp.eventType,
-                  customEventProp.callback
-                );
-                break;
-              // Handle Selection Events
-              case Events.EventType.OBJECT_SELECTED:
-              case Events.EventType.OBJECT_DESELECTED:
-                eventManager.on(
-                  customEventProp.eventType,
-                  customEventProp.callback
-                );
-                break;
-              // Handle Events
-              default:
-                eventManager.on(
-                  customEventProp.eventType,
-                  customEventProp.callback
-                );
-                break;
-            }
-          });
-        }
       }
+      scene.current.start();
+    }
+  }, []);
+  useEffect(() => {
+    if (!scene.current || !canvasRef.current) return;
+    motifs.current.length = 0;
+    motifProps.forEach((motifProp) => {
+      motifs.current.push(motifProp.motif);
+    });
+    if (motifs.current.length > 0) {
+      if (showRMSD) setKabschRMSD(calculateAllKabschRMSD(motifs.current));
+      scene.current.removeAll();
+      const positions = calculatePositions(motifs.current.length);
+      motifs.current.forEach((motifMesh, index) => {
+        scene.current?.add(motifMesh);
+        if (motifProps[index].position) positions[index] = motifProps[index].position.clone();
+        motifMesh.setPosition(positions[index].x, positions[index].y, positions[index].z);
+        if (motifProps[index].rotation) motifMesh.setQuaternion(motifProps[index].rotation);
+        let scale = canvasRef.current.width / 250;
+        if (motifProps[index].scale) scale = motifProps[index].scale;
+        motifMesh.setScale(scale);
+        if (motifProps[index].locked) lockedMotifIdState.current.add(motifMesh.uuid);
+      });
     }
-    scene.current?.start();
   }, [rendererWidth, rendererHeight, rendererSizeIsWindow, motifProps]);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("canvas", { ref: canvasRef }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@judah-silva/rnacanvas",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "A 3D Canvas for displaying and interacting with custom RNA models. Powered by BabylonJS.",
   "license": "MIT",
   "main": "./dist/index.js",