@judah-silva/rnacanvas 0.0.6 → 0.0.8

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;
 }
 
 /**
@@ -358,7 +367,7 @@ type MotifMesh = Record<string, any>;
  * @returns {Promise<Motif>}
  * @async
  */
-declare function getMotif(motifName: string, motifMesh: MotifMesh, motifColorHex?: string): Promise<Motif>;
+declare function getMotif(motifName: string, motifMesh: MotifMesh, motifColorHex?: string, includeAtoms?: boolean): Promise<Motif>;
 
 /**
  * Copyright (c) 2025 RNA3DS Lab CSUMB.
@@ -372,7 +381,7 @@ declare function getMotif(motifName: string, motifMesh: MotifMesh, motifColorHex
  * @param nucleotideData {number[][]}
  * @returns Object of { vertices: number[][], indices: number[][] }
  */
-declare function getPoints(nucleotideData: number[][]): {
+declare function getPoints(nucleotideData: number[][], includeAtoms: boolean): {
     vertices: number[][];
     indices: number[][];
 };
@@ -413,6 +422,7 @@ interface CanvasProps {
     rendererBackgroundColor?: string;
     rendererSizeIsWindow?: boolean;
     cameraPositionZ?: number;
+    showRMSD?: boolean;
     motifProps: MotifProps[];
     customEventProps?: AnyEventProps[];
 }
@@ -432,7 +442,7 @@ interface CanvasProps {
  * @function Canvas {JSX.Element}
  * @returns {JSX.Element}
  */
-declare function Canvas({ rendererHeight, rendererWidth, rendererBackgroundColor, rendererSizeIsWindow, cameraPositionZ, motifProps, customEventProps, }: CanvasProps): JSX.Element;
+declare function Canvas({ rendererHeight, rendererWidth, rendererBackgroundColor, rendererSizeIsWindow, cameraPositionZ, showRMSD, motifProps, customEventProps, }: CanvasProps): JSX.Element;
 
 /**
  * Copyright (c) 2025 RNA3DS Lab CSUMB.

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;
 }
 
 /**
@@ -358,7 +367,7 @@ type MotifMesh = Record<string, any>;
  * @returns {Promise<Motif>}
  * @async
  */
-declare function getMotif(motifName: string, motifMesh: MotifMesh, motifColorHex?: string): Promise<Motif>;
+declare function getMotif(motifName: string, motifMesh: MotifMesh, motifColorHex?: string, includeAtoms?: boolean): Promise<Motif>;
 
 /**
  * Copyright (c) 2025 RNA3DS Lab CSUMB.
@@ -372,7 +381,7 @@ declare function getMotif(motifName: string, motifMesh: MotifMesh, motifColorHex
  * @param nucleotideData {number[][]}
  * @returns Object of { vertices: number[][], indices: number[][] }
  */
-declare function getPoints(nucleotideData: number[][]): {
+declare function getPoints(nucleotideData: number[][], includeAtoms: boolean): {
     vertices: number[][];
     indices: number[][];
 };
@@ -413,6 +422,7 @@ interface CanvasProps {
     rendererBackgroundColor?: string;
     rendererSizeIsWindow?: boolean;
     cameraPositionZ?: number;
+    showRMSD?: boolean;
     motifProps: MotifProps[];
     customEventProps?: AnyEventProps[];
 }
@@ -432,7 +442,7 @@ interface CanvasProps {
  * @function Canvas {JSX.Element}
  * @returns {JSX.Element}
  */
-declare function Canvas({ rendererHeight, rendererWidth, rendererBackgroundColor, rendererSizeIsWindow, cameraPositionZ, motifProps, customEventProps, }: CanvasProps): JSX.Element;
+declare function Canvas({ rendererHeight, rendererWidth, rendererBackgroundColor, rendererSizeIsWindow, cameraPositionZ, showRMSD, motifProps, customEventProps, }: CanvasProps): JSX.Element;
 
 /**
  * Copyright (c) 2025 RNA3DS Lab CSUMB.

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
@@ -838,10 +850,10 @@ async function parseAtomCoords(meshObject) {
 }
 
 // src/3D/utils/GetPoints.ts
-function getPoints(nucleotideData) {
+function getPoints(nucleotideData, includeAtoms) {
   const vertices = [];
   const indices = [];
-  for (let i = 1; i < nucleotideData.length; i += 2) {
+  for (let i = includeAtoms ? 1 : 0; i < nucleotideData.length; i += 2) {
     vertices.push(nucleotideData[i]);
     indices.push(nucleotideData[i + 1]);
   }
@@ -849,10 +861,10 @@ function getPoints(nucleotideData) {
 }
 
 // src/3D/utils/GetMotif.ts
-async function getMotif(motifName, motifMesh, motifColorHex = "0xcc2900") {
+async function getMotif(motifName, motifMesh, motifColorHex = "0xcc2900", includeAtoms = true) {
   const motif = new Motif(`${motifName}_motif`);
   for (const [key] of Object.entries(motifMesh)) {
-    const { vertices, indices } = getPoints(motifMesh[key]);
+    const { vertices, indices } = getPoints(motifMesh[key], includeAtoms);
     const residue = new Residue("residue");
     const backboneMesh = new MeshObject(`backbone_${key}`);
     backboneMesh.applyVertexData(vertices[0], indices[0]);
@@ -865,7 +877,7 @@ async function getMotif(motifName, motifMesh, motifColorHex = "0xcc2900") {
     motif.addChild(residue);
   }
   motif.userData.fileName = motifName;
-  motif.userData.atomInfo = await parseAtomCoords(motifMesh);
+  if (includeAtoms) motif.userData.atomInfo = await parseAtomCoords(motifMesh);
   return motif;
 }
 
@@ -1134,6 +1146,7 @@ function Canvas({
   rendererBackgroundColor = "#040a20",
   rendererSizeIsWindow = false,
   cameraPositionZ = 1e3,
+  showRMSD = true,
   motifProps,
   customEventProps
 }) {
@@ -1244,7 +1257,7 @@ function Canvas({
             element.rotate(axisVec, angle);
           }
         });
-        setScoreRMSD(calculateRMSD(Array.from(selectedMotifMeshState.current), motifs));
+        if (showRMSD) setScoreRMSD(calculateRMSD(Array.from(selectedMotifMeshState.current), motifs));
       }
     }
   }
@@ -1289,7 +1302,7 @@ function Canvas({
         element.rotate(event.rotationAxis, angle);
       }
     });
-    setScoreRMSD(calculateRMSD(Array.from(selectedMotifMeshState.current), motifs));
+    if (showRMSD) setScoreRMSD(calculateRMSD(Array.from(selectedMotifMeshState.current), motifs));
   }
   function onKeyboardTranslate(event) {
     if (event.translationDirection.equals(Vec3.Zero)) {
@@ -1367,7 +1380,7 @@ function Canvas({
       }
     });
     updateGlow();
-    setScoreRMSD(calculateRMSD(Array.from(selectedMotifMeshState.current), motifs));
+    if (showRMSD) setScoreRMSD(calculateRMSD(Array.from(selectedMotifMeshState.current), motifs));
   }, [selectedMotifIds]);
   (0, import_react.useEffect)(() => {
     const unsubscribe = CanvasDataManager.subscribe("lockedMotifIds" /* LOCKED_MOTIF_IDS */, () => {
@@ -1385,23 +1398,27 @@ function Canvas({
     hardLockedMotifIds = CanvasDataManager.hardLockedMotifIds;
   }, [CanvasDataManager.hardLockedMotifIds]);
   (0, import_react.useEffect)(() => {
+    if (!showRMSD) return;
     const unsubscribe = CanvasDataManager.subscribe("scoreRMSD" /* SCORE_RMSD */, () => {
       setScoreRMSD(CanvasDataManager.scoreRMSD);
     });
     return () => unsubscribe();
   }, []);
   (0, import_react.useEffect)(() => {
+    if (!showRMSD) return;
     if (CanvasDataManager.scoreRMSD !== scoreRMSD) {
       CanvasDataManager.setScoreRMSD(scoreRMSD);
     }
   }, [scoreRMSD]);
   (0, import_react.useEffect)(() => {
+    if (!showRMSD) return;
     const unsubscribe = CanvasDataManager.subscribe("kabschRMSD" /* KABSCH_RMSD */, () => {
       setKabschRMSD(CanvasDataManager.kabschRMSD);
     });
     return () => unsubscribe();
   }, []);
   (0, import_react.useEffect)(() => {
+    if (!showRMSD) return;
     if (CanvasDataManager.kabschRMSD !== kabschRMSD) {
       CanvasDataManager.setKabschRMSD(kabschRMSD);
     } else if (CanvasDataManager.kabschRMSD.length !== motifs.length) {
@@ -1426,7 +1443,7 @@ function Canvas({
       );
     }
     if (motifs.length > 0) {
-      setKabschRMSD(calculateAllKabschRMSD(motifs));
+      if (showRMSD) setKabschRMSD(calculateAllKabschRMSD(motifs));
       if (scene.current.children.size !== motifs.length) {
         const positions = calculatePositions(motifs.length);
         motifs.forEach((motifMesh, index) => {

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
@@ -781,10 +793,10 @@ async function parseAtomCoords(meshObject) {
 }
 
 // src/3D/utils/GetPoints.ts
-function getPoints(nucleotideData) {
+function getPoints(nucleotideData, includeAtoms) {
   const vertices = [];
   const indices = [];
-  for (let i = 1; i < nucleotideData.length; i += 2) {
+  for (let i = includeAtoms ? 1 : 0; i < nucleotideData.length; i += 2) {
     vertices.push(nucleotideData[i]);
     indices.push(nucleotideData[i + 1]);
   }
@@ -792,10 +804,10 @@ function getPoints(nucleotideData) {
 }
 
 // src/3D/utils/GetMotif.ts
-async function getMotif(motifName, motifMesh, motifColorHex = "0xcc2900") {
+async function getMotif(motifName, motifMesh, motifColorHex = "0xcc2900", includeAtoms = true) {
   const motif = new Motif(`${motifName}_motif`);
   for (const [key] of Object.entries(motifMesh)) {
-    const { vertices, indices } = getPoints(motifMesh[key]);
+    const { vertices, indices } = getPoints(motifMesh[key], includeAtoms);
     const residue = new Residue("residue");
     const backboneMesh = new MeshObject(`backbone_${key}`);
     backboneMesh.applyVertexData(vertices[0], indices[0]);
@@ -808,7 +820,7 @@ async function getMotif(motifName, motifMesh, motifColorHex = "0xcc2900") {
     motif.addChild(residue);
   }
   motif.userData.fileName = motifName;
-  motif.userData.atomInfo = await parseAtomCoords(motifMesh);
+  if (includeAtoms) motif.userData.atomInfo = await parseAtomCoords(motifMesh);
   return motif;
 }
 
@@ -1077,6 +1089,7 @@ function Canvas({
   rendererBackgroundColor = "#040a20",
   rendererSizeIsWindow = false,
   cameraPositionZ = 1e3,
+  showRMSD = true,
   motifProps,
   customEventProps
 }) {
@@ -1187,7 +1200,7 @@ function Canvas({
             element.rotate(axisVec, angle);
           }
         });
-        setScoreRMSD(calculateRMSD(Array.from(selectedMotifMeshState.current), motifs));
+        if (showRMSD) setScoreRMSD(calculateRMSD(Array.from(selectedMotifMeshState.current), motifs));
       }
     }
   }
@@ -1232,7 +1245,7 @@ function Canvas({
         element.rotate(event.rotationAxis, angle);
       }
     });
-    setScoreRMSD(calculateRMSD(Array.from(selectedMotifMeshState.current), motifs));
+    if (showRMSD) setScoreRMSD(calculateRMSD(Array.from(selectedMotifMeshState.current), motifs));
   }
   function onKeyboardTranslate(event) {
     if (event.translationDirection.equals(Vec3.Zero)) {
@@ -1310,7 +1323,7 @@ function Canvas({
       }
     });
     updateGlow();
-    setScoreRMSD(calculateRMSD(Array.from(selectedMotifMeshState.current), motifs));
+    if (showRMSD) setScoreRMSD(calculateRMSD(Array.from(selectedMotifMeshState.current), motifs));
   }, [selectedMotifIds]);
   useEffect(() => {
     const unsubscribe = CanvasDataManager.subscribe("lockedMotifIds" /* LOCKED_MOTIF_IDS */, () => {
@@ -1328,23 +1341,27 @@ function Canvas({
     hardLockedMotifIds = CanvasDataManager.hardLockedMotifIds;
   }, [CanvasDataManager.hardLockedMotifIds]);
   useEffect(() => {
+    if (!showRMSD) return;
     const unsubscribe = CanvasDataManager.subscribe("scoreRMSD" /* SCORE_RMSD */, () => {
       setScoreRMSD(CanvasDataManager.scoreRMSD);
     });
     return () => unsubscribe();
   }, []);
   useEffect(() => {
+    if (!showRMSD) return;
     if (CanvasDataManager.scoreRMSD !== scoreRMSD) {
       CanvasDataManager.setScoreRMSD(scoreRMSD);
     }
   }, [scoreRMSD]);
   useEffect(() => {
+    if (!showRMSD) return;
     const unsubscribe = CanvasDataManager.subscribe("kabschRMSD" /* KABSCH_RMSD */, () => {
       setKabschRMSD(CanvasDataManager.kabschRMSD);
     });
     return () => unsubscribe();
   }, []);
   useEffect(() => {
+    if (!showRMSD) return;
     if (CanvasDataManager.kabschRMSD !== kabschRMSD) {
       CanvasDataManager.setKabschRMSD(kabschRMSD);
     } else if (CanvasDataManager.kabschRMSD.length !== motifs.length) {
@@ -1369,7 +1386,7 @@ function Canvas({
       );
     }
     if (motifs.length > 0) {
-      setKabschRMSD(calculateAllKabschRMSD(motifs));
+      if (showRMSD) setKabschRMSD(calculateAllKabschRMSD(motifs));
       if (scene.current.children.size !== motifs.length) {
         const positions = calculatePositions(motifs.length);
         motifs.forEach((motifMesh, index) => {

package/package.json

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