@judah-silva/rnacanvas 0.0.9 → 0.0.10

package/README.md

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

package/dist/index.d.mts

@@ -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,6 +306,14 @@ 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;

package/dist/index.d.ts

@@ -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,6 +306,14 @@ 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;

package/dist/index.js

@@ -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,24 +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;
@@ -678,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;
@@ -695,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() {
@@ -736,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();
@@ -767,7 +787,7 @@ var RenderScene = class {
     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;
@@ -880,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);
@@ -1221,6 +1241,21 @@ 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;
@@ -1258,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.has(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);
           }
         });
@@ -1328,7 +1363,7 @@ function Canvas({
     }
     event.translationDirection.multiplyScalar(4.5);
     selectedMotifMeshState.current.forEach((element) => {
-      if (!lockedMotifIdState.current.has(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,

package/dist/index.mjs

@@ -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,24 +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;
@@ -621,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;
@@ -638,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() {
@@ -679,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();
@@ -710,7 +730,7 @@ var RenderScene = class {
     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;
@@ -823,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);
@@ -1164,6 +1184,21 @@ 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;
@@ -1201,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.has(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);
           }
         });
@@ -1271,7 +1306,7 @@ function Canvas({
     }
     event.translationDirection.multiplyScalar(4.5);
     selectedMotifMeshState.current.forEach((element) => {
-      if (!lockedMotifIdState.current.has(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,

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@judah-silva/rnacanvas",
-  "version": "0.0.9",
+  "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": {