@judah-silva/rnacanvas 0.0.5 → 0.0.6

package/README.md

@@ -129,8 +129,3 @@ const props: MotifProps = {
   locked: false,
 };
 ```
-
-TALK ABOUT THE DATAMANAGER NEXT, AND THEN THAT SHOULD BE GOOD
-
-ACTUALLY, I NEED TO TALK ABOUT RMSD AND ITS INTERFACES AND STUFF TOO :(
-

package/dist/index.d.mts

@@ -112,6 +112,7 @@ declare class Motif extends Group<Residue> {
     rotateByQuaternion(quat: Quat): void;
     setQuaternion(quat: Quat): void;
     multiplyScalar(scalar: number): void;
+    setScale(scale: number): void;
     get uuid(): string;
     get quat(): Quat;
     get scale(): number;
@@ -334,7 +335,7 @@ declare class RenderScene {
  * @author Judah Silva <jusilva@csumb.edu>
  */
 
-declare function updateAllMotifs(motifMeshArray: Motif[]): Promise<void>;
+declare function parseAtomCoords(meshObject: MotifMesh): Promise<Vec3[]>;
 
 /**
  * Copyright (c) 2025 RNA3DS Lab CSUMB.
@@ -342,6 +343,7 @@ declare function updateAllMotifs(motifMeshArray: Motif[]): Promise<void>;
  * @author Judah Silva
  */
 
+type MotifMesh = Record<string, any>;
 /**
  * ________________________________________________________________________________________________
  */
@@ -356,7 +358,7 @@ declare function updateAllMotifs(motifMeshArray: Motif[]): Promise<void>;
  * @returns {Promise<Motif>}
  * @async
  */
-declare function getMotif(motifJSONFileName: string, motifColorHex?: string): Promise<Motif>;
+declare function getMotif(motifName: string, motifMesh: MotifMesh, motifColorHex?: string): Promise<Motif>;
 
 /**
  * Copyright (c) 2025 RNA3DS Lab CSUMB.
@@ -521,4 +523,4 @@ declare function calculateRMSDSlide(coordinates1: Vec3[], coordinates2: Vec3[]):
 
 declare function rotateAllPoints(atomCoords: Vec3[], quat: Quat): Vec3[];
 
-export { Canvas, CanvasAttributeTypes, CanvasDataManager, type CanvasProps, type CustomEventProps, EventManager, Events, Group, Matrix4, MeshObject, Motif, type MotifProps, Quat, RenderScene, Residue, type ScoreInfo, Vec3, calculateAllKabschRMSD, calculateRMSD, calculateRMSDSlide, getMotif, getPoints, getRMSD, kabschSlidingWindow, rotateAllPoints, updateAllMotifs };
+export { Canvas, CanvasAttributeTypes, CanvasDataManager, type CanvasProps, type CustomEventProps, EventManager, Events, Group, Matrix4, MeshObject, Motif, type MotifMesh, type MotifProps, Quat, RenderScene, Residue, type ScoreInfo, Vec3, calculateAllKabschRMSD, calculateRMSD, calculateRMSDSlide, getMotif, getPoints, getRMSD, kabschSlidingWindow, parseAtomCoords, rotateAllPoints };

package/dist/index.d.ts

@@ -112,6 +112,7 @@ declare class Motif extends Group<Residue> {
     rotateByQuaternion(quat: Quat): void;
     setQuaternion(quat: Quat): void;
     multiplyScalar(scalar: number): void;
+    setScale(scale: number): void;
     get uuid(): string;
     get quat(): Quat;
     get scale(): number;
@@ -334,7 +335,7 @@ declare class RenderScene {
  * @author Judah Silva <jusilva@csumb.edu>
  */
 
-declare function updateAllMotifs(motifMeshArray: Motif[]): Promise<void>;
+declare function parseAtomCoords(meshObject: MotifMesh): Promise<Vec3[]>;
 
 /**
  * Copyright (c) 2025 RNA3DS Lab CSUMB.
@@ -342,6 +343,7 @@ declare function updateAllMotifs(motifMeshArray: Motif[]): Promise<void>;
  * @author Judah Silva
  */
 
+type MotifMesh = Record<string, any>;
 /**
  * ________________________________________________________________________________________________
  */
@@ -356,7 +358,7 @@ declare function updateAllMotifs(motifMeshArray: Motif[]): Promise<void>;
  * @returns {Promise<Motif>}
  * @async
  */
-declare function getMotif(motifJSONFileName: string, motifColorHex?: string): Promise<Motif>;
+declare function getMotif(motifName: string, motifMesh: MotifMesh, motifColorHex?: string): Promise<Motif>;
 
 /**
  * Copyright (c) 2025 RNA3DS Lab CSUMB.
@@ -521,4 +523,4 @@ declare function calculateRMSDSlide(coordinates1: Vec3[], coordinates2: Vec3[]):
 
 declare function rotateAllPoints(atomCoords: Vec3[], quat: Quat): Vec3[];
 
-export { Canvas, CanvasAttributeTypes, CanvasDataManager, type CanvasProps, type CustomEventProps, EventManager, Events, Group, Matrix4, MeshObject, Motif, type MotifProps, Quat, RenderScene, Residue, type ScoreInfo, Vec3, calculateAllKabschRMSD, calculateRMSD, calculateRMSDSlide, getMotif, getPoints, getRMSD, kabschSlidingWindow, rotateAllPoints, updateAllMotifs };
+export { Canvas, CanvasAttributeTypes, CanvasDataManager, type CanvasProps, type CustomEventProps, EventManager, Events, Group, Matrix4, MeshObject, Motif, type MotifMesh, type MotifProps, Quat, RenderScene, Residue, type ScoreInfo, Vec3, calculateAllKabschRMSD, calculateRMSD, calculateRMSDSlide, getMotif, getPoints, getRMSD, kabschSlidingWindow, parseAtomCoords, rotateAllPoints };

package/dist/index.js

@@ -50,8 +50,8 @@ __export(index_exports, {
   getPoints: () => getPoints,
   getRMSD: () => getRMSD,
   kabschSlidingWindow: () => kabschSlidingWindow,
-  rotateAllPoints: () => rotateAllPoints,
-  updateAllMotifs: () => updateAllMotifs
+  parseAtomCoords: () => parseAtomCoords,
+  rotateAllPoints: () => rotateAllPoints
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -269,6 +269,13 @@ var Motif = class extends Group {
       this._node.scaling.z * scalar
     );
   }
+  setScale(scale) {
+    this._node.scaling = new import_core5.Vector3(
+      scale,
+      scale,
+      scale
+    );
+  }
   get uuid() {
     return this._node.uniqueId.toString();
   }
@@ -813,12 +820,10 @@ var RenderScene = class {
 };
 
 // src/3D/utils/GetAtomInfo.ts
-async function parseAtomCoords(fileName) {
-  const response = await fetch(`/${fileName}`);
-  const jsonData = await response.json();
+async function parseAtomCoords(meshObject) {
   const coordinates = [];
-  for (const [key] of Object.entries(jsonData)) {
-    const atomMap = jsonData[key][0];
+  for (const [key] of Object.entries(meshObject)) {
+    const atomMap = meshObject[key][0];
     if (atomMap[`"C1'"`]) {
       coordinates.push(
         new Vec3(
@@ -831,20 +836,6 @@ async function parseAtomCoords(fileName) {
   }
   return coordinates;
 }
-async function getAtomCoords(fileName) {
-  const coordinates = await parseAtomCoords(fileName);
-  return coordinates;
-}
-async function updateAllMotifs(motifMeshArray) {
-  const fileNames = [];
-  for (const motif of motifMeshArray) {
-    fileNames.push(motif.userData.fileName);
-  }
-  const atomInfoLists = await Promise.all(fileNames.map((o) => getAtomCoords(o)));
-  for (let i = 0; i < motifMeshArray.length; i += 1) {
-    motifMeshArray[i].userData.atomInfo = atomInfoLists[i];
-  }
-}
 
 // src/3D/utils/GetPoints.ts
 function getPoints(nucleotideData) {
@@ -858,12 +849,10 @@ function getPoints(nucleotideData) {
 }
 
 // src/3D/utils/GetMotif.ts
-async function getMotif(motifJSONFileName, motifColorHex = "0xcc2900") {
-  const motif = new Motif(`${motifJSONFileName}_motif`);
-  const motifJSONFileData = await fetch(`/${motifJSONFileName}`);
-  const jsonObject = await motifJSONFileData.json();
-  for (const [key] of Object.entries(jsonObject)) {
-    const { vertices, indices } = getPoints(jsonObject[key]);
+async function getMotif(motifName, motifMesh, motifColorHex = "0xcc2900") {
+  const motif = new Motif(`${motifName}_motif`);
+  for (const [key] of Object.entries(motifMesh)) {
+    const { vertices, indices } = getPoints(motifMesh[key]);
     const residue = new Residue("residue");
     const backboneMesh = new MeshObject(`backbone_${key}`);
     backboneMesh.applyVertexData(vertices[0], indices[0]);
@@ -875,7 +864,8 @@ async function getMotif(motifJSONFileName, motifColorHex = "0xcc2900") {
     residue.addChild(ringMesh);
     motif.addChild(residue);
   }
-  motif.userData.fileName = motifJSONFileName;
+  motif.userData.fileName = motifName;
+  motif.userData.atomInfo = await parseAtomCoords(motifMesh);
   return motif;
 }
 
@@ -970,6 +960,7 @@ function getRMSD(a, b) {
     if (a instanceof Motif && b instanceof Motif) {
       newCoords1 = rotateAllPoints(a.userData.atomInfo, a.quat);
       newCoords2 = rotateAllPoints(b.userData.atomInfo, b.quat);
+      return calculateRMSDSlide(newCoords1, newCoords2);
     } else {
       return -1;
     }
@@ -1179,7 +1170,6 @@ function Canvas({
     if (!selectedMotifMeshState.current.has(motif)) {
       return;
     }
-    console.log("removing motif: ", motif);
     selectedMotifMeshState.current.delete(motif);
     setSelectedmotifIds((prevState) => {
       const newState = new Set(prevState);
@@ -1267,10 +1257,12 @@ 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)) {
+        if (!lockedMotifIdState.current.includes(element.uuid) && !hardLockedMotifIds.includes(element.uuid) && !(element.scale <= 1 && zoomDirection === -1) && !(element.scale >= 30 && zoomDirection === 1)) {
           const scaleFactor = 1 + zoomDirection * zoomSpeed;
           element.multiplyScalar(scaleFactor);
         }
+        if (element.scale < 1) element.setScale(1);
+        if (element.scale > 30) element.setScale(30);
       });
     }
   }
@@ -1323,10 +1315,8 @@ function Canvas({
     }
     const motif = motifs[Number(event.key) - 1];
     if (selectedMotifMeshState.current.has(motif)) {
-      console.log("removing motif");
       removeMotif(motif);
     } else {
-      console.log("adding motif");
       addMotif(motif);
     }
   }
@@ -1345,6 +1335,21 @@ function Canvas({
     }
     return positions;
   };
+  const updateMotifs = () => {
+    const positions = calculatePositions(motifs.length);
+    motifs.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);
+      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);
+    });
+  };
+  (0, import_react.useEffect)(() => {
+    updateMotifs();
+  }, [motifProps]);
   (0, import_react.useEffect)(() => {
     const unsubscribe = CanvasDataManager.subscribe("selectedMotifs" /* SELECTED_MOTIFS */, () => {
       setSelectedmotifIds(CanvasDataManager.selectedMotifIds);
@@ -1399,6 +1404,8 @@ function Canvas({
   (0, import_react.useEffect)(() => {
     if (CanvasDataManager.kabschRMSD !== kabschRMSD) {
       CanvasDataManager.setKabschRMSD(kabschRMSD);
+    } else if (CanvasDataManager.kabschRMSD.length !== motifs.length) {
+      CanvasDataManager.setKabschRMSD(calculateAllKabschRMSD(motifs));
     }
   }, [kabschRMSD]);
   (0, import_react.useEffect)(() => {
@@ -1418,12 +1425,10 @@ function Canvas({
         rendererSizeIsWindow ? window.innerHeight : rendererHeight
       );
     }
-    const positions = calculatePositions(motifs.length);
     if (motifs.length > 0) {
-      updateAllMotifs(motifs).then(() => {
-        setKabschRMSD(calculateAllKabschRMSD(motifs));
-      });
+      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();
@@ -1494,10 +1499,6 @@ function Canvas({
             }
           });
         }
-      } else {
-        motifs.forEach((motifMesh) => {
-          scene.current?.add(motifMesh);
-        });
       }
     }
     scene.current?.start();
@@ -1526,6 +1527,6 @@ function Canvas({
   getPoints,
   getRMSD,
   kabschSlidingWindow,
-  rotateAllPoints,
-  updateAllMotifs
+  parseAtomCoords,
+  rotateAllPoints
 });

package/dist/index.mjs

@@ -212,6 +212,13 @@ var Motif = class extends Group {
       this._node.scaling.z * scalar
     );
   }
+  setScale(scale) {
+    this._node.scaling = new Vector32(
+      scale,
+      scale,
+      scale
+    );
+  }
   get uuid() {
     return this._node.uniqueId.toString();
   }
@@ -756,12 +763,10 @@ var RenderScene = class {
 };
 
 // src/3D/utils/GetAtomInfo.ts
-async function parseAtomCoords(fileName) {
-  const response = await fetch(`/${fileName}`);
-  const jsonData = await response.json();
+async function parseAtomCoords(meshObject) {
   const coordinates = [];
-  for (const [key] of Object.entries(jsonData)) {
-    const atomMap = jsonData[key][0];
+  for (const [key] of Object.entries(meshObject)) {
+    const atomMap = meshObject[key][0];
     if (atomMap[`"C1'"`]) {
       coordinates.push(
         new Vec3(
@@ -774,20 +779,6 @@ async function parseAtomCoords(fileName) {
   }
   return coordinates;
 }
-async function getAtomCoords(fileName) {
-  const coordinates = await parseAtomCoords(fileName);
-  return coordinates;
-}
-async function updateAllMotifs(motifMeshArray) {
-  const fileNames = [];
-  for (const motif of motifMeshArray) {
-    fileNames.push(motif.userData.fileName);
-  }
-  const atomInfoLists = await Promise.all(fileNames.map((o) => getAtomCoords(o)));
-  for (let i = 0; i < motifMeshArray.length; i += 1) {
-    motifMeshArray[i].userData.atomInfo = atomInfoLists[i];
-  }
-}
 
 // src/3D/utils/GetPoints.ts
 function getPoints(nucleotideData) {
@@ -801,12 +792,10 @@ function getPoints(nucleotideData) {
 }
 
 // src/3D/utils/GetMotif.ts
-async function getMotif(motifJSONFileName, motifColorHex = "0xcc2900") {
-  const motif = new Motif(`${motifJSONFileName}_motif`);
-  const motifJSONFileData = await fetch(`/${motifJSONFileName}`);
-  const jsonObject = await motifJSONFileData.json();
-  for (const [key] of Object.entries(jsonObject)) {
-    const { vertices, indices } = getPoints(jsonObject[key]);
+async function getMotif(motifName, motifMesh, motifColorHex = "0xcc2900") {
+  const motif = new Motif(`${motifName}_motif`);
+  for (const [key] of Object.entries(motifMesh)) {
+    const { vertices, indices } = getPoints(motifMesh[key]);
     const residue = new Residue("residue");
     const backboneMesh = new MeshObject(`backbone_${key}`);
     backboneMesh.applyVertexData(vertices[0], indices[0]);
@@ -818,7 +807,8 @@ async function getMotif(motifJSONFileName, motifColorHex = "0xcc2900") {
     residue.addChild(ringMesh);
     motif.addChild(residue);
   }
-  motif.userData.fileName = motifJSONFileName;
+  motif.userData.fileName = motifName;
+  motif.userData.atomInfo = await parseAtomCoords(motifMesh);
   return motif;
 }
 
@@ -913,6 +903,7 @@ function getRMSD(a, b) {
     if (a instanceof Motif && b instanceof Motif) {
       newCoords1 = rotateAllPoints(a.userData.atomInfo, a.quat);
       newCoords2 = rotateAllPoints(b.userData.atomInfo, b.quat);
+      return calculateRMSDSlide(newCoords1, newCoords2);
     } else {
       return -1;
     }
@@ -1122,7 +1113,6 @@ function Canvas({
     if (!selectedMotifMeshState.current.has(motif)) {
       return;
     }
-    console.log("removing motif: ", motif);
     selectedMotifMeshState.current.delete(motif);
     setSelectedmotifIds((prevState) => {
       const newState = new Set(prevState);
@@ -1210,10 +1200,12 @@ 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)) {
+        if (!lockedMotifIdState.current.includes(element.uuid) && !hardLockedMotifIds.includes(element.uuid) && !(element.scale <= 1 && zoomDirection === -1) && !(element.scale >= 30 && zoomDirection === 1)) {
           const scaleFactor = 1 + zoomDirection * zoomSpeed;
           element.multiplyScalar(scaleFactor);
         }
+        if (element.scale < 1) element.setScale(1);
+        if (element.scale > 30) element.setScale(30);
       });
     }
   }
@@ -1266,10 +1258,8 @@ function Canvas({
     }
     const motif = motifs[Number(event.key) - 1];
     if (selectedMotifMeshState.current.has(motif)) {
-      console.log("removing motif");
       removeMotif(motif);
     } else {
-      console.log("adding motif");
       addMotif(motif);
     }
   }
@@ -1288,6 +1278,21 @@ function Canvas({
     }
     return positions;
   };
+  const updateMotifs = () => {
+    const positions = calculatePositions(motifs.length);
+    motifs.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);
+      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);
+    });
+  };
+  useEffect(() => {
+    updateMotifs();
+  }, [motifProps]);
   useEffect(() => {
     const unsubscribe = CanvasDataManager.subscribe("selectedMotifs" /* SELECTED_MOTIFS */, () => {
       setSelectedmotifIds(CanvasDataManager.selectedMotifIds);
@@ -1342,6 +1347,8 @@ function Canvas({
   useEffect(() => {
     if (CanvasDataManager.kabschRMSD !== kabschRMSD) {
       CanvasDataManager.setKabschRMSD(kabschRMSD);
+    } else if (CanvasDataManager.kabschRMSD.length !== motifs.length) {
+      CanvasDataManager.setKabschRMSD(calculateAllKabschRMSD(motifs));
     }
   }, [kabschRMSD]);
   useEffect(() => {
@@ -1361,12 +1368,10 @@ function Canvas({
         rendererSizeIsWindow ? window.innerHeight : rendererHeight
       );
     }
-    const positions = calculatePositions(motifs.length);
     if (motifs.length > 0) {
-      updateAllMotifs(motifs).then(() => {
-        setKabschRMSD(calculateAllKabschRMSD(motifs));
-      });
+      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();
@@ -1437,10 +1442,6 @@ function Canvas({
             }
           });
         }
-      } else {
-        motifs.forEach((motifMesh) => {
-          scene.current?.add(motifMesh);
-        });
       }
     }
     scene.current?.start();
@@ -1468,6 +1469,6 @@ export {
   getPoints,
   getRMSD,
   kabschSlidingWindow,
-  rotateAllPoints,
-  updateAllMotifs
+  parseAtomCoords,
+  rotateAllPoints
 };

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "@judah-silva/rnacanvas",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "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"
+  },
   "module": "./dist/index.mjs",
   "scripts": {
     "build": "tsup"
@@ -14,7 +19,6 @@
     "test"
   ],
   "author": "Judah Silva",
-  "license": "MIT",
   "dependencies": {
     "@babylonjs/core": "^7.50.0",
     "numeric": "^1.2.6",