npm - @judah-silva/rnacanvas - Versions diffs - 0.0.8 → 0.0.10 - Mend

@judah-silva/rnacanvas 0.0.8 → 0.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.d.mts CHANGED Viewed

@@ -16,8 +16,9 @@ declare class Residue extends Group<MeshObject> {
     /**
      * Cretes a material with the given color and sets it to the mesh
      * @param color String in the format of #RRGGBB
+     * @param highlight Whether to apply a highlight effect to the residue
      */
-    colorResidue(color: string): void;
+    colorResidue(color: string, highlight?: boolean): void;
 }
 /**
@@ -34,10 +35,15 @@ declare class MeshObject {
     applyHighlight(): void;
     resetHighlight(): void;
     /**
-     * Cretes a material with the given color and sets it to the mesh
+     * Creates a material with the given color and sets it to the mesh
      * @param color String in the format of #RRGGBB
      */
     createAndSetMaterial(color: string): void;
+    /**
+     * Sets the material of the mesh object to the given color
+     * @param color String in the format of #RRGGBB
+     */
+    colorMaterial(color: string): void;
     setNewMesh(mesh: Mesh): MeshObject;
     get mesh(): Mesh;
     get uuid(): string;
@@ -300,12 +306,21 @@ declare class RenderScene {
     private _eventManager;
     private _isDisposed;
     isRunning: boolean;
+    /**
+     *
+     * @param canvas HTML Canvas Element
+     * @param hexColor Color in the format of #RRGGBB
+     * @param cameraPositionZ Z position of the camera
+     * @param renderWidth Width of the render window
+     * @param renderHeight Height of the render window
+     */
     constructor(canvas: HTMLCanvasElement, hexColor: string, cameraPositionZ: number, renderWidth: number, renderHeight: number);
     start(): void;
     stop(): void;
     dispose(): void;
     add(motif: Motif): void;
     remove(motif: Motif): void;
+    removeAll(): void;
     setBackgroundColor(hexColor: string): void;
     private _reattachToScene;
     private _handleResize;
@@ -469,8 +484,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 CHANGED Viewed

@@ -16,8 +16,9 @@ declare class Residue extends Group<MeshObject> {
     /**
      * Cretes a material with the given color and sets it to the mesh
      * @param color String in the format of #RRGGBB
+     * @param highlight Whether to apply a highlight effect to the residue
      */
-    colorResidue(color: string): void;
+    colorResidue(color: string, highlight?: boolean): void;
 }
 /**
@@ -34,10 +35,15 @@ declare class MeshObject {
     applyHighlight(): void;
     resetHighlight(): void;
     /**
-     * Cretes a material with the given color and sets it to the mesh
+     * Creates a material with the given color and sets it to the mesh
      * @param color String in the format of #RRGGBB
      */
     createAndSetMaterial(color: string): void;
+    /**
+     * Sets the material of the mesh object to the given color
+     * @param color String in the format of #RRGGBB
+     */
+    colorMaterial(color: string): void;
     setNewMesh(mesh: Mesh): MeshObject;
     get mesh(): Mesh;
     get uuid(): string;
@@ -300,12 +306,21 @@ declare class RenderScene {
     private _eventManager;
     private _isDisposed;
     isRunning: boolean;
+    /**
+     *
+     * @param canvas HTML Canvas Element
+     * @param hexColor Color in the format of #RRGGBB
+     * @param cameraPositionZ Z position of the camera
+     * @param renderWidth Width of the render window
+     * @param renderHeight Height of the render window
+     */
     constructor(canvas: HTMLCanvasElement, hexColor: string, cameraPositionZ: number, renderWidth: number, renderHeight: number);
     start(): void;
     stop(): void;
     dispose(): void;
     add(motif: Motif): void;
     remove(motif: Motif): void;
+    removeAll(): void;
     setBackgroundColor(hexColor: string): void;
     private _reattachToScene;
     private _handleResize;
@@ -469,8 +484,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 CHANGED Viewed

@@ -328,10 +328,14 @@ var Residue = class extends Group {
   /**
    * Cretes a material with the given color and sets it to the mesh
    * @param color String in the format of #RRGGBB
+   * @param highlight Whether to apply a highlight effect to the residue
    */
-  colorResidue(color) {
+  colorResidue(color, highlight = false) {
     this._children.forEach((child) => {
-      child.createAndSetMaterial(color);
+      child.colorMaterial(color);
+      if (highlight) {
+        child.applyHighlight();
+      }
     });
   }
 };
@@ -363,23 +367,34 @@ var MeshObject = class {
   }
   applyHighlight() {
     const mat = this._mesh.material;
-    mat.emissiveColor = mat.diffuseColor.scale(0.75);
+    mat.emissiveColor = mat.diffuseColor.scale(0.6);
   }
   resetHighlight() {
     const mat = this._mesh.material;
     mat.emissiveColor = import_core7.Color3.Black();
   }
   /**
-   * Cretes a material with the given color and sets it to the mesh
+   * Creates a material with the given color and sets it to the mesh
    * @param color String in the format of #RRGGBB
    */
   createAndSetMaterial(color) {
     const mat = new import_core7.StandardMaterial("mat");
-    const color3 = import_core7.Color3.FromHexString(`#${color.replace(/^0x/, "")}`);
+    const color3 = import_core7.Color3.FromHexString(`${color.replace(/^0x/i, "")}`);
     mat.diffuseColor = color3;
     mat.specularColor = color3;
+    mat.backFaceCulling = false;
     this._mesh.material = mat;
   }
+  /**
+   * Sets the material of the mesh object to the given color
+   * @param color String in the format of #RRGGBB
+   */
+  colorMaterial(color) {
+    const mat = this._mesh.material;
+    const color3 = import_core7.Color3.FromHexString(`${color.replace(/^0x/i, "")}`);
+    mat.diffuseColor = color3;
+    mat.specularColor = color3;
+  }
   setNewMesh(mesh) {
     this._mesh = mesh;
     return this;
@@ -603,9 +618,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));
@@ -667,12 +692,20 @@ var RenderScene = class {
   // State variables
   _isDisposed = false;
   isRunning = false;
+  /**
+   *
+   * @param canvas HTML Canvas Element
+   * @param hexColor Color in the format of #RRGGBB
+   * @param cameraPositionZ Z position of the camera
+   * @param renderWidth Width of the render window
+   * @param renderHeight Height of the render window
+   */
   constructor(canvas, hexColor, cameraPositionZ, renderWidth, renderHeight) {
     this._canvas = canvas;
     this._engine = new import_core9.Engine(this._canvas, true);
     this._engine.setSize(renderWidth, renderHeight);
     this._scene = new import_core9.Scene(this._engine);
-    this._scene.clearColor = import_core9.Color4.FromHexString(`${hexColor.replace(/^0x/, "")}`);
+    this._scene.clearColor = import_core9.Color4.FromHexString(`${hexColor.replace(/^0x/i, "")}`);
     this._camera = new import_core9.UniversalCamera("camera", new import_core9.Vector3(0, 0, cameraPositionZ));
     this._camera.setTarget(new import_core9.Vector3(0, 0, 0));
     this._camera.mode = import_core9.Camera.ORTHOGRAPHIC_CAMERA;
@@ -684,7 +717,6 @@ var RenderScene = class {
     const light = new import_core9.HemisphericLight("light", import_core9.Vector3.Up(), this._scene);
     light.intensity = 1.25;
     this._eventManager = new EventManager();
-    window.addEventListener("resize", this._handleResize.bind(this));
   }
   // Start the render loop
   start() {
@@ -725,7 +757,6 @@ var RenderScene = class {
   // Stop and dispose of all resources
   dispose() {
     this.stop();
-    window.removeEventListener("resize", this._handleResize);
     this._eventManager.dispose();
     this._scene.dispose();
     this._engine.dispose();
@@ -745,10 +776,18 @@ 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/, "")}`);
+    this._scene.clearColor = import_core9.Color4.FromHexString(`${hexColor.replace(/^0x/i, "")}`);
   }
   _reattachToScene(node, currObj) {
     node._scene = this._scene;
@@ -762,7 +801,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) => {
@@ -861,7 +900,7 @@ function getPoints(nucleotideData, includeAtoms) {
 }
 // src/3D/utils/GetMotif.ts
-async function getMotif(motifName, motifMesh, motifColorHex = "0xcc2900", includeAtoms = true) {
+async function getMotif(motifName, motifMesh, motifColorHex = "#cc2900", includeAtoms = true) {
   const motif = new Motif(`${motifName}_motif`);
   for (const [key] of Object.entries(motifMesh)) {
     const { vertices, indices } = getPoints(motifMesh[key], includeAtoms);
@@ -895,7 +934,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 = [];
@@ -1152,28 +1191,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);
@@ -1191,7 +1229,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)) {
@@ -1203,12 +1241,27 @@ function Canvas({
       });
     });
   }
+  function motifOutOfBounds(motif, deltaX, deltaY) {
+    if (!canvasRef.current) {
+      return false;
+    }
+    const canvasWidth = canvasRef.current.width;
+    const canvasHeight = canvasRef.current.height;
+    const left = -canvasWidth / 2;
+    const right = canvasWidth / 2;
+    const top = canvasHeight / 2;
+    const bottom = -canvasHeight / 2;
+    const newX = motif.position.x + deltaX;
+    const newY = motif.position.y + deltaY;
+    if (newX <= left || newX >= right || newY <= bottom || newY >= top) return true;
+    return false;
+  }
   function onSelectMotif(event) {
     if (event.type !== Events.EventType.OBJECT_SELECTED) {
       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) {
@@ -1240,7 +1293,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) && !motifOutOfBounds(element, -deltaX, -deltaY)) {
             element.translate(-deltaX, -deltaY, 0);
           }
         });
@@ -1253,11 +1306,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));
       }
     }
   }
@@ -1270,7 +1323,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);
         }
@@ -1298,19 +1351,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) && !motifOutOfBounds(element, event.translationDirection.x, event.translationDirection.y)) {
         element.translate(
           event.translationDirection.x,
           event.translationDirection.y,
@@ -1323,10 +1376,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 {
@@ -1349,8 +1402,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);
@@ -1360,9 +1413,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);
@@ -1374,13 +1424,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 */, () => {
@@ -1421,8 +1471,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)(() => {
@@ -1441,84 +1491,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 CHANGED Viewed

@@ -271,10 +271,14 @@ var Residue = class extends Group {
   /**
    * Cretes a material with the given color and sets it to the mesh
    * @param color String in the format of #RRGGBB
+   * @param highlight Whether to apply a highlight effect to the residue
    */
-  colorResidue(color) {
+  colorResidue(color, highlight = false) {
     this._children.forEach((child) => {
-      child.createAndSetMaterial(color);
+      child.colorMaterial(color);
+      if (highlight) {
+        child.applyHighlight();
+      }
     });
   }
 };
@@ -306,23 +310,34 @@ var MeshObject = class {
   }
   applyHighlight() {
     const mat = this._mesh.material;
-    mat.emissiveColor = mat.diffuseColor.scale(0.75);
+    mat.emissiveColor = mat.diffuseColor.scale(0.6);
   }
   resetHighlight() {
     const mat = this._mesh.material;
     mat.emissiveColor = Color3.Black();
   }
   /**
-   * Cretes a material with the given color and sets it to the mesh
+   * Creates a material with the given color and sets it to the mesh
    * @param color String in the format of #RRGGBB
    */
   createAndSetMaterial(color) {
     const mat = new StandardMaterial("mat");
-    const color3 = Color3.FromHexString(`#${color.replace(/^0x/, "")}`);
+    const color3 = Color3.FromHexString(`${color.replace(/^0x/i, "")}`);
     mat.diffuseColor = color3;
     mat.specularColor = color3;
+    mat.backFaceCulling = false;
     this._mesh.material = mat;
   }
+  /**
+   * Sets the material of the mesh object to the given color
+   * @param color String in the format of #RRGGBB
+   */
+  colorMaterial(color) {
+    const mat = this._mesh.material;
+    const color3 = Color3.FromHexString(`${color.replace(/^0x/i, "")}`);
+    mat.diffuseColor = color3;
+    mat.specularColor = color3;
+  }
   setNewMesh(mesh) {
     this._mesh = mesh;
     return this;
@@ -546,9 +561,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));
@@ -610,12 +635,20 @@ var RenderScene = class {
   // State variables
   _isDisposed = false;
   isRunning = false;
+  /**
+   *
+   * @param canvas HTML Canvas Element
+   * @param hexColor Color in the format of #RRGGBB
+   * @param cameraPositionZ Z position of the camera
+   * @param renderWidth Width of the render window
+   * @param renderHeight Height of the render window
+   */
   constructor(canvas, hexColor, cameraPositionZ, renderWidth, renderHeight) {
     this._canvas = canvas;
     this._engine = new Engine(this._canvas, true);
     this._engine.setSize(renderWidth, renderHeight);
     this._scene = new Scene5(this._engine);
-    this._scene.clearColor = Color4.FromHexString(`${hexColor.replace(/^0x/, "")}`);
+    this._scene.clearColor = Color4.FromHexString(`${hexColor.replace(/^0x/i, "")}`);
     this._camera = new UniversalCamera("camera", new Vector33(0, 0, cameraPositionZ));
     this._camera.setTarget(new Vector33(0, 0, 0));
     this._camera.mode = Camera.ORTHOGRAPHIC_CAMERA;
@@ -627,7 +660,6 @@ var RenderScene = class {
     const light = new HemisphericLight("light", Vector33.Up(), this._scene);
     light.intensity = 1.25;
     this._eventManager = new EventManager();
-    window.addEventListener("resize", this._handleResize.bind(this));
   }
   // Start the render loop
   start() {
@@ -668,7 +700,6 @@ var RenderScene = class {
   // Stop and dispose of all resources
   dispose() {
     this.stop();
-    window.removeEventListener("resize", this._handleResize);
     this._eventManager.dispose();
     this._scene.dispose();
     this._engine.dispose();
@@ -688,10 +719,18 @@ 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/, "")}`);
+    this._scene.clearColor = Color4.FromHexString(`${hexColor.replace(/^0x/i, "")}`);
   }
   _reattachToScene(node, currObj) {
     node._scene = this._scene;
@@ -705,7 +744,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) => {
@@ -804,7 +843,7 @@ function getPoints(nucleotideData, includeAtoms) {
 }
 // src/3D/utils/GetMotif.ts
-async function getMotif(motifName, motifMesh, motifColorHex = "0xcc2900", includeAtoms = true) {
+async function getMotif(motifName, motifMesh, motifColorHex = "#cc2900", includeAtoms = true) {
   const motif = new Motif(`${motifName}_motif`);
   for (const [key] of Object.entries(motifMesh)) {
     const { vertices, indices } = getPoints(motifMesh[key], includeAtoms);
@@ -838,7 +877,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 = [];
@@ -1095,28 +1134,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);
@@ -1134,7 +1172,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)) {
@@ -1146,12 +1184,27 @@ function Canvas({
       });
     });
   }
+  function motifOutOfBounds(motif, deltaX, deltaY) {
+    if (!canvasRef.current) {
+      return false;
+    }
+    const canvasWidth = canvasRef.current.width;
+    const canvasHeight = canvasRef.current.height;
+    const left = -canvasWidth / 2;
+    const right = canvasWidth / 2;
+    const top = canvasHeight / 2;
+    const bottom = -canvasHeight / 2;
+    const newX = motif.position.x + deltaX;
+    const newY = motif.position.y + deltaY;
+    if (newX <= left || newX >= right || newY <= bottom || newY >= top) return true;
+    return false;
+  }
   function onSelectMotif(event) {
     if (event.type !== Events.EventType.OBJECT_SELECTED) {
       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) {
@@ -1183,7 +1236,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) && !motifOutOfBounds(element, -deltaX, -deltaY)) {
             element.translate(-deltaX, -deltaY, 0);
           }
         });
@@ -1196,11 +1249,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));
       }
     }
   }
@@ -1213,7 +1266,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);
         }
@@ -1241,19 +1294,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) && !motifOutOfBounds(element, event.translationDirection.x, event.translationDirection.y)) {
         element.translate(
           event.translationDirection.x,
           event.translationDirection.y,
@@ -1266,10 +1319,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 {
@@ -1292,8 +1345,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);
@@ -1303,9 +1356,6 @@ function Canvas({
       motifMesh.setScale(scale);
     });
   };
-  useEffect(() => {
-    updateMotifs();
-  }, [motifProps]);
   useEffect(() => {
     const unsubscribe = CanvasDataManager.subscribe("selectedMotifs" /* SELECTED_MOTIFS */, () => {
       setSelectedmotifIds(CanvasDataManager.selectedMotifIds);
@@ -1317,13 +1367,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 */, () => {
@@ -1364,8 +1414,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(() => {
@@ -1384,84 +1434,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 CHANGED Viewed

@@ -1,12 +1,12 @@
 {
   "name": "@judah-silva/rnacanvas",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "A 3D Canvas for displaying and interacting with custom RNA models. Powered by BabylonJS.",
   "license": "MIT",
   "main": "./dist/index.js",
   "repository": {
     "type": "git",
-    "url": "https://github.com/RNAStructureAnalysisLab/RNACanvas"
+    "url": "git+https://github.com/RNAStructureAnalysisLab/RNACanvas.git"
   },
   "module": "./dist/index.mjs",
   "scripts": {