@judah-silva/rnacanvas 0.0.1

package/dist/index.mjs

@@ -0,0 +1,1408 @@
+// src/3D/Group.ts
+import { TransformNode } from "@babylonjs/core";
+var Group = class {
+  _node;
+  _children;
+  constructor(name, scene) {
+    this._node = new TransformNode(name, scene);
+    this._children = /* @__PURE__ */ new Set();
+    this._node.rotationQuaternion = this._node.rotation.toQuaternion();
+  }
+  setParent(parent) {
+    this._node.parent = parent ? parent.node : null;
+  }
+  removeChild(child) {
+    if (!this._children.has(child)) {
+      return;
+    }
+    this._children.delete(child);
+    child.setParent(null);
+  }
+  get node() {
+    return this._node;
+  }
+  get children() {
+    return this._children;
+  }
+};
+
+// src/3D/Motif.ts
+import { NullEngine, Quaternion as Quaternion3, Scene as Scene2, Space, Vector3 as Vector32 } from "@babylonjs/core";
+
+// src/Math/Vec3.ts
+import { Quaternion, Vector3 } from "@babylonjs/core";
+var Vec3 = class _Vec3 {
+  _vector3;
+  static Zero = new _Vec3(0, 0, 0);
+  constructor(x, y, z) {
+    this._vector3 = new Vector3(x, y, z);
+  }
+  clone() {
+    return new _Vec3(this.x, this.y, this.z);
+  }
+  normalize() {
+    this._vector3.normalize();
+  }
+  applyAxisAngle(axis, angle) {
+    const rotationQuat = Quaternion.RotationAxis(axis._vector3, angle);
+    this._vector3.rotateByQuaternionAroundPointToRef(rotationQuat, Vector3.Zero(), this._vector3);
+    return this;
+  }
+  applyQuaternion(quat) {
+    this._vector3.applyRotationQuaternionInPlace(quat.quaternion);
+  }
+  multiplyScalar(scalar) {
+    this._vector3.scaleInPlace(scalar);
+  }
+  add(vec) {
+    this._vector3.addInPlace(vec._vector3);
+  }
+  length() {
+    return this._vector3.length();
+  }
+  equals(other) {
+    return this.x === other.x && this.y === other.y && this.z === other.z;
+  }
+  get x() {
+    return this._vector3.x;
+  }
+  get y() {
+    return this._vector3.y;
+  }
+  get z() {
+    return this._vector3.z;
+  }
+};
+
+// src/Math/Quat.ts
+import { Quaternion as Quaternion2 } from "@babylonjs/core";
+var Quat = class {
+  _quaternion;
+  constructor() {
+    this._quaternion = new Quaternion2();
+  }
+  rotateByQuaternion(quaternion) {
+    quaternion.quaternion.multiplyToRef(this._quaternion, this._quaternion);
+  }
+  setToQuaternion(quaternion) {
+    if (quaternion === null) {
+      throw new Error("Cannot set to null quaternion");
+    }
+    this._quaternion = quaternion;
+  }
+  setFromMatrix(matrix) {
+    this._quaternion = Quaternion2.FromRotationMatrix(matrix.matrix);
+    return this;
+  }
+  setFromEuler(eulerAngle) {
+    this._quaternion = Quaternion2.FromEulerAngles(eulerAngle.x, eulerAngle.y, eulerAngle.z);
+    return this;
+  }
+  get quaternion() {
+    return this._quaternion;
+  }
+};
+
+// src/Math/Matrix4.ts
+import { Matrix } from "@babylonjs/core";
+var Matrix4 = class {
+  _matrix;
+  constructor() {
+    this._matrix = Matrix.Identity();
+  }
+  fromArray(array) {
+    let matArray = array;
+    if (array.length === 9) {
+      matArray = [
+        array[0],
+        array[1],
+        array[2],
+        0,
+        array[3],
+        array[4],
+        array[5],
+        0,
+        array[6],
+        array[7],
+        array[8],
+        1
+      ];
+    }
+    this._matrix = Matrix.FromArray(matArray);
+    return this;
+  }
+  get matrix() {
+    return this._matrix;
+  }
+};
+
+// src/3D/Motif.ts
+var Motif = class extends Group {
+  userData;
+  _quat;
+  constructor(name) {
+    const tempEngine = new NullEngine();
+    const tempScene = new Scene2(tempEngine);
+    super(name, tempScene);
+    this._quat = new Quat();
+    this.userData = {
+      atomInfo: [],
+      fileName: ""
+    };
+  }
+  addChild(child) {
+    if (this._children.has(child)) {
+      return;
+    }
+    child.setParent(this);
+    this._children.add(child);
+  }
+  setPosition(x, y, z) {
+    this._node.setAbsolutePosition(new Vector32(x, y, z));
+  }
+  translate(x, y, z) {
+    const newX = this.position.x + x;
+    const newY = this.position.y + y;
+    const newZ = this.position.z + z;
+    this.setPosition(newX, newY, newZ);
+  }
+  rotate(axis, angle) {
+    this._node.rotate(new Vector32(
+      axis.x,
+      axis.y,
+      axis.z
+    ), angle, Space.WORLD);
+    this._nanCheck();
+  }
+  rotateByQuaternion(quat) {
+    if (this._node.rotationQuaternion === null) {
+      this._node.rotationQuaternion = this._node.rotation.toQuaternion();
+    }
+    quat.quaternion.multiplyToRef(this._node.rotationQuaternion, this._node.rotationQuaternion);
+    this._nanCheck();
+  }
+  setQuaternion(quat) {
+    if (this._node.rotationQuaternion === null) {
+      this._node.rotationQuaternion = this._node.rotation.toQuaternion();
+    }
+    this._quat.setToQuaternion(quat.quaternion);
+  }
+  multiplyScalar(scalar) {
+    this._node.scaling = new Vector32(
+      this._node.scaling.x * scalar,
+      this._node.scaling.y * scalar,
+      this._node.scaling.z * scalar
+    );
+  }
+  _nanCheck() {
+    if (Number.isNaN(this._quat.quaternion.w) || Number.isNaN(this._quat.quaternion.x) || Number.isNaN(this._quat.quaternion.y) || Number.isNaN(this._quat.quaternion.z)) {
+      this._quat.setToQuaternion(Quaternion3.Identity());
+      throw new Error(`Quaternion is NaN for motif ${this._node.name}`);
+    }
+  }
+  get uuid() {
+    return this._node.uniqueId.toString();
+  }
+  get quat() {
+    this._quat.setToQuaternion(this._node.rotationQuaternion);
+    return this._quat;
+  }
+  get position() {
+    return new Vec3(
+      this._node.absolutePosition.x,
+      this._node.absolutePosition.y,
+      this._node.absolutePosition.z
+    );
+  }
+};
+
+// src/3D/Residue.ts
+import { NullEngine as NullEngine2, Scene as Scene3 } from "@babylonjs/core";
+var Residue = class extends Group {
+  constructor(name) {
+    const tempEngine = new NullEngine2();
+    const tempScene = new Scene3(tempEngine);
+    super(name, tempScene);
+  }
+  addChild(child) {
+    if (this._children.has(child)) {
+      return;
+    }
+    child.setParent(this);
+    this._children.add(child);
+  }
+  // Temporary function to find if Residue contains mesh with uuid
+  hasMesh(uuid) {
+    let found = false;
+    this._children.forEach((child) => {
+      if (child.uuid === uuid) {
+        found = true;
+      }
+    });
+    return found;
+  }
+};
+
+// src/3D/MeshObject.ts
+import { Color3, Mesh, StandardMaterial, VertexData } from "@babylonjs/core";
+var MeshObject = class {
+  _mesh;
+  userData;
+  constructor(name) {
+    this._mesh = new Mesh(name);
+    this.userData = {};
+  }
+  setParent(parent) {
+    if (parent === null) {
+      this._mesh.parent = null;
+      return;
+    }
+    this._mesh.parent = parent.node;
+  }
+  applyVertexData(positions, indices) {
+    const normals = [];
+    VertexData.ComputeNormals(positions, indices, normals);
+    const vertexData = new VertexData();
+    vertexData.positions = positions;
+    vertexData.indices = indices;
+    vertexData.normals = normals;
+    vertexData.applyToMesh(this._mesh);
+  }
+  applyHighlight() {
+    const mat = this._mesh.material;
+    mat.emissiveColor = mat.diffuseColor.scale(0.75);
+  }
+  resetHighlight() {
+    const mat = this._mesh.material;
+    mat.emissiveColor = Color3.Black();
+  }
+  /**
+   * Cretes 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/, "")}`);
+    mat.diffuseColor = color3;
+    mat.specularColor = color3;
+    this._mesh.material = mat;
+  }
+  setNewMesh(mesh) {
+    this._mesh = mesh;
+    return this;
+  }
+  get mesh() {
+    return this._mesh;
+  }
+  get uuid() {
+    return this._mesh.uniqueId.toString();
+  }
+};
+
+// src/3D/RenderScene.ts
+import { Camera, Color4, Engine, Geometry, HemisphericLight, Material, Mesh as Mesh2, Scene as Scene5, UniversalCamera, Vector3 as Vector33 } from "@babylonjs/core";
+
+// src/Events/EventTypes.ts
+var Events;
+((Events2) => {
+  let EventType;
+  ((EventType2) => {
+    EventType2["POINTER_DOWN"] = "pointerDown";
+    EventType2["POINTER_UP"] = "pointerUp";
+    EventType2["POINTER_MOVE"] = "pointerMove";
+    EventType2["POINTER_WHEEL"] = "pointerWheel";
+    EventType2["KEY_DOWN"] = "keyDown";
+    EventType2["KEY_UP"] = "keyUp";
+    EventType2["TOUCH_START"] = "touchStart";
+    EventType2["TOUCH_END"] = "touchEnd";
+    EventType2["TOUCH_MOVE"] = "touchMove";
+    EventType2["PINCH_START"] = "pinchStart";
+    EventType2["PINCH"] = "pinch";
+    EventType2["PINCH_END"] = "pinchEnd";
+    EventType2["OBJECT_SELECTED"] = "objectSelected";
+    EventType2["OBJECT_DESELECTED"] = "objectDeselected";
+    EventType2["RESIZE"] = "resize";
+    EventType2["RENDER"] = "render";
+    EventType2["ENGINE_STARTED"] = "engineStarted";
+    EventType2["ENGINE_STOPPED"] = "engineStopped";
+  })(EventType = Events2.EventType || (Events2.EventType = {}));
+})(Events || (Events = {}));
+
+// src/Events/EventManager.ts
+import { KeyboardEventTypes, Observable, PointerEventTypes } from "@babylonjs/core";
+var EventManager = class {
+  // Custom observables for each event type
+  _eventObservables = /* @__PURE__ */ new Map();
+  // Babylon.js observer references for cleanup
+  _pointerObserver = null;
+  _keyboardObserver = null;
+  _renderObserver = null;
+  _activeKeys = /* @__PURE__ */ new Set();
+  // Event state variables
+  _pendingDeselect = false;
+  // private _listeningForEvents: boolean = true;
+  constructor() {
+    this._initializeObservables();
+  }
+  /**
+   * Dispose of the event listeners and triggers
+   */
+  dispose() {
+    this._eventObservables.forEach((observable) => observable.clear());
+    this._eventObservables.clear();
+    this._pointerObserver?.remove();
+    this._pointerObserver = null;
+    this._keyboardObserver?.remove();
+    this._keyboardObserver = null;
+    this._renderObserver?.remove();
+    this._renderObserver = null;
+  }
+  /**
+   * Register an event of a certain type
+   * @param eventType String event type. Can be custom or standard.
+   * @param callback Callback function to run when the event is triggered
+   * @returns Babylon Observer instance for later removal
+   */
+  on(eventType, callback) {
+    if (!this._eventObservables.has(eventType)) {
+      this._eventObservables.set(eventType, new Observable());
+    }
+    return this._eventObservables.get(eventType).add(callback);
+  }
+  /**
+   * Remove a registered event observer
+   * @param observer Babylon Observer with the registered callback
+   */
+  off(observer) {
+    observer.remove();
+  }
+  /**
+   * Emit a custom event, triggering listeners registered with that event type.
+   * @param eventType A string event type. Can be custom or standard.
+   * @param eventData Event info object partial.
+   */
+  emit(eventType, eventData) {
+    const event = {
+      type: eventType,
+      canceled: false,
+      timestamp: performance.now(),
+      ...eventData
+    };
+    try {
+      this.notifyObservers(eventType, event);
+    } catch (err) {
+      throw new Error(`Error emitting event ${eventType}:`);
+    }
+  }
+  /**
+   * Method to notify listeners of a type of event
+   * @param eventType A string event type. Can be custom or standard.
+   * @param event Event info object
+   */
+  notifyObservers(eventType, event) {
+    if (this._eventObservables.has(eventType)) {
+      this._eventObservables.get(eventType).notifyObservers(event);
+    }
+  }
+  /**
+   * Method to set up pointer and keyboard events on the scene.
+   * Comes preset with POINTER_DOWN, POINTER_UP, POINTER_MOVE, KEYBOARD_DOWN, and KEYBOARD_UP event triggering.
+   * @param scene A RenderScene object
+   */
+  setupEventHandling(scene) {
+    if (scene.isRunning) {
+      throw new Error("Cannot setup event handling on running scene.\n");
+    }
+    const babylonScene = scene.scene;
+    this._pointerObserver = babylonScene.onPointerObservable.add((pointerInfo) => {
+      const event = pointerInfo.event;
+      const pointerEvent = {
+        type: Events.EventType.POINTER_DOWN,
+        // will be overwritten below
+        position: { x: event.clientX, y: event.clientY },
+        button: event.button,
+        buttons: event.buttons,
+        ctrlKey: event.ctrlKey,
+        altKey: event.altKey,
+        shiftKey: event.shiftKey,
+        metaKey: event.metaKey,
+        originalEvent: event,
+        canceled: false,
+        timestamp: performance.now()
+      };
+      let motifNode = null;
+      let pickedMesh = null;
+      if (pointerInfo.pickInfo?.hit && pointerInfo.pickInfo?.pickedMesh) {
+        pickedMesh = pointerInfo.pickInfo.pickedMesh;
+        motifNode = pointerInfo.pickInfo.pickedMesh.parent?.parent;
+      }
+      let motifObj = null;
+      let residue = null;
+      if (motifNode && pickedMesh) {
+        motifObj = scene.children.get(motifNode.uniqueId.toString());
+        residue = this._getResidueFromMotifNode(
+          motifNode,
+          pickedMesh?.uniqueId.toString(),
+          scene.children
+        );
+      }
+      if (motifNode && residue) {
+        pointerEvent.pickedResidue = residue;
+      }
+      switch (pointerInfo.type) {
+        case PointerEventTypes.POINTERDOWN:
+          pointerEvent.type = Events.EventType.POINTER_DOWN;
+          this.notifyObservers(Events.EventType.POINTER_DOWN, pointerEvent);
+          if (motifObj && residue) {
+            const selectionEvent = {
+              type: Events.EventType.OBJECT_SELECTED,
+              residue,
+              motif: motifObj,
+              multiSelect: event.ctrlKey,
+              canceled: false,
+              timestamp: performance.now()
+            };
+            this.notifyObservers(Events.EventType.OBJECT_SELECTED, selectionEvent);
+          } else {
+            this._pendingDeselect = true;
+          }
+          break;
+        case PointerEventTypes.POINTERUP:
+          pointerEvent.type = Events.EventType.POINTER_UP;
+          this.notifyObservers(Events.EventType.POINTER_UP, pointerEvent);
+          if (this._pendingDeselect) {
+            const deselectionEvent = {
+              type: Events.EventType.OBJECT_DESELECTED,
+              canceled: false,
+              timestamp: performance.now()
+            };
+            this.notifyObservers(Events.EventType.OBJECT_DESELECTED, deselectionEvent);
+            this._pendingDeselect = false;
+          }
+          break;
+        case PointerEventTypes.POINTERMOVE:
+          pointerEvent.type = Events.EventType.POINTER_MOVE;
+          pointerEvent.deltaX = event.movementX;
+          pointerEvent.deltaY = event.movementY;
+          this.notifyObservers(Events.EventType.POINTER_MOVE, pointerEvent);
+          this._pendingDeselect = false;
+          break;
+        case PointerEventTypes.POINTERWHEEL:
+          pointerEvent.type = Events.EventType.POINTER_WHEEL;
+          this.notifyObservers(Events.EventType.POINTER_WHEEL, pointerEvent);
+          break;
+      }
+    });
+    this._keyboardObserver = babylonScene.onKeyboardObservable.add((keyboardInfo) => {
+      const event = keyboardInfo.event;
+      const keyboardEvent = {
+        type: keyboardInfo.type === KeyboardEventTypes.KEYDOWN ? Events.EventType.KEY_DOWN : Events.EventType.KEY_UP,
+        key: event.key,
+        code: event.code,
+        ctrlKey: event.ctrlKey,
+        altKey: event.altKey,
+        shiftKey: event.shiftKey,
+        metaKey: event.metaKey,
+        repeat: event.repeat,
+        rotationAxis: new Vec3(0, 0, 0),
+        translationDirection: new Vec3(0, 0, 0),
+        originalEvent: event,
+        canceled: false,
+        timestamp: performance.now()
+      };
+      if (keyboardInfo.type === KeyboardEventTypes.KEYDOWN) {
+        this._activeKeys.add(event.key);
+      } else if (keyboardInfo.type === KeyboardEventTypes.KEYUP) {
+        this._activeKeys.delete(event.key);
+      }
+      if (this._activeKeys.has("w")) keyboardEvent.rotationAxis.add(new Vec3(-1, 0, 0));
+      if (this._activeKeys.has("a")) keyboardEvent.rotationAxis.add(new Vec3(0, 1, 0));
+      if (this._activeKeys.has("s")) keyboardEvent.rotationAxis.add(new Vec3(1, 0, 0));
+      if (this._activeKeys.has("d")) keyboardEvent.rotationAxis.add(new Vec3(0, -1, 0));
+      if (this._activeKeys.has("q")) keyboardEvent.rotationAxis.add(new Vec3(0, 0, -1));
+      if (this._activeKeys.has("e")) keyboardEvent.rotationAxis.add(new Vec3(0, 0, 1));
+      if (this._activeKeys.has("W")) keyboardEvent.translationDirection.add(new Vec3(0, 1, 0));
+      if (this._activeKeys.has("A")) keyboardEvent.translationDirection.add(new Vec3(1, 0, 0));
+      if (this._activeKeys.has("S")) keyboardEvent.translationDirection.add(new Vec3(0, -1, 0));
+      if (this._activeKeys.has("D")) keyboardEvent.translationDirection.add(new Vec3(-1, 0, 0));
+      if (keyboardInfo.type === KeyboardEventTypes.KEYDOWN) {
+        this.notifyObservers(Events.EventType.KEY_DOWN, keyboardEvent);
+      } else if (keyboardInfo.type === KeyboardEventTypes.KEYUP) {
+        this.notifyObservers(Events.EventType.KEY_UP, keyboardEvent);
+      }
+    });
+  }
+  /**
+   * Initialize observables for all standard event types
+   */
+  _initializeObservables() {
+    Object.values(Events.EventType).forEach((eventType) => {
+      this._eventObservables.set(eventType, new Observable());
+    });
+  }
+  /**
+   * Helper function to get the residue that contains a picked mesh using the transform node of a motif
+   * @param node {TransformNode} Motif's TransformNode
+   * @param meshUUID Stringified uniqueId of the picked mesh
+   * @param sceneChildren Map of Motifs that exist in the scene
+   * @returns The Residue that contains the picked mesh, or null if it does not exist
+   */
+  _getResidueFromMotifNode(node, meshUUID, sceneChildren) {
+    const motifUUID = node.uniqueId.toString();
+    if (!sceneChildren.has(motifUUID)) {
+      return null;
+    }
+    const motif = sceneChildren.get(motifUUID);
+    let residue = null;
+    motif.children.forEach((child) => {
+      if (child.hasMesh(meshUUID)) residue = child;
+    });
+    return residue;
+  }
+};
+
+// src/3D/RenderScene.ts
+var RenderScene = class {
+  _canvas;
+  _scene;
+  _engine;
+  _camera;
+  // For access to motif objects in the scene
+  _children = /* @__PURE__ */ new Map();
+  // Event variables
+  _eventManager;
+  // State variables
+  _isDisposed = false;
+  isRunning = false;
+  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._camera = new UniversalCamera("camera", new Vector33(0, 0, cameraPositionZ));
+    this._camera.setTarget(new Vector33(0, 0, 0));
+    this._camera.mode = Camera.ORTHOGRAPHIC_CAMERA;
+    this._camera.orthoTop = this._engine.getRenderHeight() / 2;
+    this._camera.orthoBottom = this._engine.getRenderHeight() / -2;
+    this._camera.orthoLeft = this._engine.getRenderWidth() / -2;
+    this._camera.orthoRight = this._engine.getRenderWidth() / 2;
+    this._camera.minZ = 10;
+    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() {
+    if (this._isDisposed) {
+      throw new Error("Cannot start a disposed RenderScene.");
+    }
+    if (this.isRunning) {
+      return;
+    }
+    this._eventManager.setupEventHandling(this);
+    this._engine.runRenderLoop(() => {
+      this._scene.render();
+      this._eventManager.notifyObservers(Events.EventType.RENDER, {
+        type: Events.EventType.RENDER,
+        canceled: false,
+        timestamp: performance.now()
+      });
+    });
+    this._eventManager.notifyObservers(Events.EventType.ENGINE_STARTED, {
+      type: Events.EventType.ENGINE_STARTED,
+      canceled: false,
+      timestamp: performance.now()
+    });
+    this.isRunning = true;
+  }
+  // Stop the render loop without disposing resources
+  stop() {
+    if (this.isRunning) {
+      this._engine.stopRenderLoop();
+      this._eventManager.notifyObservers(Events.EventType.ENGINE_STOPPED, {
+        type: Events.EventType.ENGINE_STOPPED,
+        canceled: false,
+        timestamp: performance.now()
+      });
+      this.isRunning = false;
+    }
+  }
+  // Stop and dispose of all resources
+  dispose() {
+    this.stop();
+    window.removeEventListener("resize", this._handleResize);
+    this._eventManager.dispose();
+    this._scene.dispose();
+    this._engine.dispose();
+    this.isRunning = false;
+    this._isDisposed = true;
+  }
+  add(motif) {
+    if (this._children.has(motif.uuid)) {
+      return;
+    }
+    this._reattachToScene(motif.node, motif);
+    this._children.set(motif.uuid, motif);
+    this._scene.addTransformNode(motif.node);
+  }
+  remove(motif) {
+    if (!this._children.has(motif.uuid)) {
+      return;
+    }
+    this._children.delete(motif.uuid);
+    this._scene.removeTransformNode(motif.node);
+  }
+  setBackgroundColor(hexColor) {
+    this._scene.clearColor = Color4.FromHexString(`${hexColor.replace(/^0x/, "")}`);
+  }
+  _reattachToScene(node, currObj) {
+    node._scene = this._scene;
+    if (node instanceof Mesh2 && currObj instanceof MeshObject) {
+      const meshSerialized = node.serialize();
+      const verticeData = node.geometry?.serializeVerticeData();
+      const materialData = node.material?.serialize();
+      const mesh = Mesh2.Parse(meshSerialized, this._scene, "");
+      const geo = Geometry.Parse(verticeData, this._scene, "");
+      const mat = Material.Parse(materialData, this._scene, "");
+      geo?.applyToMesh(mesh);
+      mesh.material = mat;
+      currObj.setNewMesh(mesh);
+      node.dispose();
+    }
+    if (!(currObj instanceof MeshObject)) {
+      currObj.children.forEach((childObj) => {
+        if (childObj instanceof Residue) {
+          this._reattachToScene(childObj.node, childObj);
+        } else if (currObj instanceof Residue) {
+          this._reattachToScene(childObj.mesh, childObj);
+          childObj.setParent(currObj);
+        }
+      });
+    }
+  }
+  _handleResize = () => {
+    this._engine.setSize(window.innerWidth, window.innerHeight);
+    this._camera.orthoTop = this._engine.getRenderHeight() / 2;
+    this._camera.orthoBottom = this._engine.getRenderHeight() / -2;
+    this._camera.orthoLeft = this._engine.getRenderWidth() / -2;
+    this._camera.orthoRight = this._engine.getRenderWidth() / 2;
+    this._eventManager.notifyObservers(Events.EventType.RESIZE, {
+      type: Events.EventType.RESIZE,
+      canceled: false,
+      timestamp: performance.now()
+    });
+  };
+  /**
+  * Returns the Babylon.js Scene object.
+  */
+  get scene() {
+    return this._scene;
+  }
+  /**
+   * Returns the engine.
+   */
+  get engine() {
+    return this._engine;
+  }
+  /**
+   * Returns the camera.
+   */
+  get camera() {
+    return this._camera;
+  }
+  /**
+   * Returns the event manager
+   */
+  get eventManager() {
+    return this._eventManager;
+  }
+  /**
+   * Returns the set of children.
+   */
+  get children() {
+    return this._children;
+  }
+  /**
+   * Returns the current render width
+   */
+  get renderWidth() {
+    return this._engine.getRenderWidth();
+  }
+  /**
+   * Returns the current render height
+   */
+  get renderHeight() {
+    return this._engine.getRenderHeight();
+  }
+};
+
+// src/3D/utils/GetAtomInfo.ts
+async function parseAtomCoords(fileName) {
+  const response = await fetch(`/${fileName}`);
+  const jsonData = await response.json();
+  const coordinates = [];
+  for (const [key] of Object.entries(jsonData)) {
+    const atomMap = jsonData[key][0];
+    if (atomMap[`"C1'"`]) {
+      coordinates.push(
+        new Vec3(
+          parseFloat(atomMap[`"C1'"`][0]),
+          parseFloat(atomMap[`"C1'"`][1]),
+          parseFloat(atomMap[`"C1'"`][2])
+        )
+      );
+    }
+  }
+  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) {
+  const vertices = [];
+  const indices = [];
+  for (let i = 1; i < nucleotideData.length; i += 2) {
+    vertices.push(nucleotideData[i]);
+    indices.push(nucleotideData[i + 1]);
+  }
+  return { vertices, indices };
+}
+
+// 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]);
+    const residue = new Residue("residue");
+    const backboneMesh = new MeshObject(`backbone_${key}`);
+    backboneMesh.applyVertexData(vertices[0], indices[0]);
+    backboneMesh.createAndSetMaterial(motifColorHex);
+    const ringMesh = new MeshObject(`ring_${key}`);
+    ringMesh.applyVertexData(vertices[1], indices[1]);
+    ringMesh.createAndSetMaterial(motifColorHex);
+    residue.addChild(backboneMesh);
+    residue.addChild(ringMesh);
+    motif.addChild(residue);
+  }
+  motif.userData.fileName = motifJSONFileName;
+  return motif;
+}
+
+// src/Canvas/Canvas.tsx
+import React, { useRef, useEffect, useState } from "react";
+
+// src/Canvas/CanvasDataManager.ts
+var CanvasAttributeTypes = /* @__PURE__ */ ((CanvasAttributeTypes2) => {
+  CanvasAttributeTypes2["SELECTED_MOTIFS"] = "selectedMotifs";
+  CanvasAttributeTypes2["LOCKED_MOTIF_IDS"] = "lockedMotifIds";
+  CanvasAttributeTypes2["HLOCKED_MOTIF_IDS"] = "hardLockedMotifIds";
+  CanvasAttributeTypes2["SCORE_RMSD"] = "scoreRMSD";
+  CanvasAttributeTypes2["KABSCH_RMSD"] = "kabschRMSD";
+  return CanvasAttributeTypes2;
+})(CanvasAttributeTypes || {});
+var CanvasDataManager = class {
+  static _selectedMotifIds = /* @__PURE__ */ new Set();
+  static _lockedMotifIds = [];
+  static _hardLockedMotifIds = [];
+  static _scoreRMSD = [];
+  static _kabschRMSD = [];
+  static _listeners = /* @__PURE__ */ new Map();
+  // private static _backgroundColor: string = '#040a20';
+  static get selectedMotifIds() {
+    return this._selectedMotifIds;
+  }
+  static setSelectedMotifIds(selectedMotifIds) {
+    this._selectedMotifIds = selectedMotifIds;
+    this._listeners.get("selectedMotifs" /* SELECTED_MOTIFS */)?.forEach((fn) => fn());
+  }
+  static get lockedMotifIds() {
+    return this._lockedMotifIds;
+  }
+  static setLockedMotifIds(lockedMotifIds) {
+    this._lockedMotifIds = lockedMotifIds;
+    this._listeners.get("lockedMotifIds" /* LOCKED_MOTIF_IDS */)?.forEach((fn) => fn());
+  }
+  static get hardLockedMotifIds() {
+    return this._hardLockedMotifIds;
+  }
+  static setHardLockedMotifIds(hardLockedMotifIds) {
+    this._hardLockedMotifIds = hardLockedMotifIds;
+    this._listeners.get("hardLockedMotifIds" /* HLOCKED_MOTIF_IDS */)?.forEach((fn) => fn());
+  }
+  static get scoreRMSD() {
+    return this._scoreRMSD;
+  }
+  static setScoreRMSD(scoreRMSD) {
+    this._scoreRMSD = scoreRMSD;
+    this._listeners.get("scoreRMSD" /* SCORE_RMSD */)?.forEach((fn) => fn());
+  }
+  static get kabschRMSD() {
+    return this._kabschRMSD;
+  }
+  static setKabschRMSD(kabschRMSD) {
+    this._kabschRMSD = kabschRMSD;
+    this._listeners.get("kabschRMSD" /* KABSCH_RMSD */)?.forEach((fn) => fn());
+  }
+  static subscribe(canvasAttributeType, callback) {
+    if (!this._listeners.has(canvasAttributeType)) {
+      this._listeners.set(canvasAttributeType, /* @__PURE__ */ new Set());
+    }
+    this._listeners.get(canvasAttributeType).add(callback);
+    return () => this._listeners.get(canvasAttributeType).delete(callback);
+  }
+  // static get backgroundColor(): string {
+  //   return this._backgroundColor;
+  // }
+  // static setBackgroundColor(backgroundColor: string): void {
+  //   this._backgroundColor = backgroundColor;
+  // }
+};
+
+// src/Kabsch/Kabsch.ts
+import numeric from "numeric";
+
+// src/RMSD/RotateAtoms.ts
+function rotateAllPoints(atomCoords, quat) {
+  const newCoordinates = [];
+  for (let i = 0; i < atomCoords.length; i += 1) {
+    newCoordinates.push(atomCoords[i].clone());
+    newCoordinates[i].applyQuaternion(quat);
+  }
+  return newCoordinates;
+}
+
+// src/RMSD/RMSDSlidingWindow.ts
+function getRMSD(a, b) {
+  let newCoords1;
+  let newCoords2;
+  if (!(Array.isArray(a) || Array.isArray(b))) {
+    if (a instanceof Motif && b instanceof Motif) {
+      newCoords1 = rotateAllPoints(a.userData.atomInfo, a.quat);
+      newCoords2 = rotateAllPoints(b.userData.atomInfo, b.quat);
+    } else {
+      return -1;
+    }
+  } else if (a.every((item) => item instanceof Vec3)) {
+    newCoords1 = a;
+    newCoords2 = b;
+  } else {
+    return -1;
+  }
+  const squaredDistances = newCoords1.reduce((sum, coord1, index) => {
+    const coord2 = newCoords2[index];
+    const distanceSquared = (coord1.x - coord2.x) ** 2 + (coord1.y - coord2.y) ** 2 + (coord1.z - coord2.z) ** 2;
+    return sum + distanceSquared;
+  }, 0);
+  const minLength = newCoords1.length;
+  const meanSquaredDistance = squaredDistances / minLength;
+  return Math.sqrt(meanSquaredDistance);
+}
+function calculateRMSDSlide(coordinates1, coordinates2) {
+  try {
+    const minLength = Math.min(coordinates1.length, coordinates2.length);
+    const smallObj = minLength === coordinates1.length ? coordinates1 : coordinates2;
+    const largeObj = minLength === coordinates1.length ? coordinates2 : coordinates1;
+    const iterations = largeObj.length - smallObj.length + 1;
+    const trimmedCoordinates1 = smallObj.slice(0, minLength);
+    let minRMSD = 1e3;
+    for (let startPosition = 0; startPosition < iterations; startPosition += 1) {
+      const trimmedCoordinates2 = largeObj.slice(startPosition, startPosition + minLength);
+      const rmsd = getRMSD(trimmedCoordinates1, trimmedCoordinates2);
+      if (rmsd < minRMSD) {
+        minRMSD = rmsd;
+      }
+    }
+    return minRMSD;
+  } catch (error) {
+    throw new Error("Error in RMSD calculation");
+  }
+}
+
+// src/RMSD/GetRMSD.ts
+function calculateRMSD(selectedMotifMeshArray, motifMeshArray) {
+  const idToIdx = {};
+  const rotatedCoordinates = [];
+  for (let i = 0; i < motifMeshArray.length; i += 1) {
+    rotatedCoordinates.push(rotateAllPoints(
+      motifMeshArray[i].userData.atomInfo,
+      motifMeshArray[i].quat
+    ));
+    idToIdx[motifMeshArray[i].uuid] = i;
+  }
+  const scores = [];
+  for (let i = 0; i < selectedMotifMeshArray.length; i += 1) {
+    const currScores = [];
+    for (let j = 0; j < motifMeshArray.length; j += 1) {
+      if (selectedMotifMeshArray[i].uuid !== motifMeshArray[j].uuid) {
+        const score = calculateRMSDSlide(
+          rotatedCoordinates[idToIdx[selectedMotifMeshArray[i].uuid]],
+          rotatedCoordinates[idToIdx[motifMeshArray[j].uuid]]
+        );
+        currScores.push({
+          score,
+          selId: selectedMotifMeshArray[i].uuid,
+          refId: motifMeshArray[j].uuid
+        });
+      }
+    }
+    if (currScores.length !== 0) {
+      scores.push(currScores);
+    }
+  }
+  return scores;
+}
+
+// src/Kabsch/Kabsch.ts
+function dot(matrix1, matrix2) {
+  const result = [];
+  for (let i = 0; i < matrix1.length; i += 1) {
+    result[i] = [];
+    for (let j = 0; j < 3; j += 1) {
+      result[i][j] = 0;
+      for (let k = 0; k < matrix1[0].length; k += 1) {
+        result[i][j] += matrix1[i][k] * matrix2[k][j];
+      }
+    }
+  }
+  return result;
+}
+function calculateKabsch(coordinates1, coordinates2) {
+  try {
+    const convertedCoordinates1 = [];
+    for (let i = 0; i < coordinates1.length; i += 1) {
+      convertedCoordinates1.push([coordinates1[i].x, coordinates1[i].y, coordinates1[i].z]);
+    }
+    const convertedCoordinates2 = [];
+    for (let i = 0; i < coordinates2.length; i += 1) {
+      convertedCoordinates2.push([coordinates2[i].x, coordinates2[i].y, coordinates2[i].z]);
+    }
+    const covarianceMatrix = dot(numeric.transpose(convertedCoordinates1), convertedCoordinates2);
+    const { U, V } = numeric.svd(covarianceMatrix);
+    let rotationMatrix = numeric.dot(V, numeric.transpose(U));
+    if (numeric.det(rotationMatrix) < 0) {
+      V[2] = V[2].map((val) => -val);
+      rotationMatrix = dot(V, numeric.transpose(U));
+    }
+    return rotationMatrix;
+  } catch (error) {
+    throw new Error("error");
+  }
+}
+function getKabschCoords(coordinates2, mat) {
+  const flatMatrix = mat.flat();
+  const newMat4 = new Matrix4().fromArray(flatMatrix);
+  const quat = new Quat().setFromMatrix(newMat4);
+  return rotateAllPoints(coordinates2, quat);
+}
+function updateCoords(motif1, motif2) {
+  const rotatedCoords = [];
+  rotatedCoords.push(rotateAllPoints(motif1.userData.atomInfo, motif1.quat));
+  rotatedCoords.push(rotateAllPoints(motif2.userData.atomInfo, motif2.quat));
+  return rotatedCoords;
+}
+function kabschSlidingWindow(motif1, motif2) {
+  try {
+    const rotatedCoords = updateCoords(motif1, motif2);
+    const coordinates1 = rotatedCoords[0].slice();
+    const coordinates2 = rotatedCoords[1].slice();
+    const minLength = Math.min(coordinates1.length, coordinates2.length);
+    const smallObj = minLength === coordinates1.length ? coordinates1 : coordinates2;
+    const largeObj = minLength === coordinates1.length ? coordinates2 : coordinates1;
+    const iterations = largeObj.length - smallObj.length + 1;
+    const trimmedCoordinates1 = smallObj.slice(0, minLength);
+    let minRMSD = 1e3;
+    let bestRotation = [];
+    for (let startPosition = 0; startPosition < iterations; startPosition += 1) {
+      const trimmedCoordinates2 = largeObj.slice(startPosition, startPosition + minLength);
+      const optimalRotation = calculateKabsch(trimmedCoordinates1, trimmedCoordinates2);
+      const kabschPoints = getKabschCoords(trimmedCoordinates2, optimalRotation);
+      const rmsd = getRMSD(trimmedCoordinates1, kabschPoints);
+      if (rmsd < minRMSD) {
+        minRMSD = rmsd;
+        bestRotation = optimalRotation;
+      }
+    }
+    return { matrix: bestRotation, rmsd: minRMSD };
+  } catch (error) {
+    throw new Error(`Error in Kabsch calculation between motifs ${motif1.uuid} and ${motif2.uuid}.`);
+  }
+}
+function calculateAllKabschRMSD(motifMeshArray) {
+  const res = [];
+  for (let i = 0; i < motifMeshArray.length; i += 1) {
+    res.push([]);
+    for (let j = 0; j < motifMeshArray.length; j += 1) {
+      res[i].push(0);
+    }
+  }
+  for (let i = 0; i < motifMeshArray.length - 1; i += 1) {
+    for (let j = i + 1; j < motifMeshArray.length; j += 1) {
+      const { rmsd } = kabschSlidingWindow(motifMeshArray[i], motifMeshArray[j]);
+      res[i][j] = rmsd;
+      res[j][i] = rmsd;
+    }
+  }
+  return res;
+}
+
+// src/Canvas/Canvas.tsx
+function Canvas({
+  rendererHeight = 500,
+  rendererWidth = 500,
+  rendererBackgroundColor = "#040a20",
+  rendererSizeIsWindow = false,
+  cameraPositionZ = 1e3,
+  motifProps,
+  customEventProps
+}) {
+  const canvasRef = useRef(null);
+  const scene = useRef(null);
+  const motifs = [];
+  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 [cursorStyle, setCursorStyle] = useState("auto");
+  const [selectedMotifIds, setSelectedmotifIds] = useState(/* @__PURE__ */ new Set());
+  const [scoreRMSD, setScoreRMSD] = useState([]);
+  const [kabschRMSD, setKabschRMSD] = useState([]);
+  const [lockedMotifIds, setLockedMotifIds] = useState([]);
+  const addMotif = (motif) => {
+    if (selectedMotifIds.has(motif.uuid)) {
+      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);
+      }
+    }
+    setSelectedmotifIds(newSet);
+    selectedMotifMeshState.current.add(motif);
+  };
+  const removeMotif = (motif) => {
+    if (!selectedMotifIds.has(motif.uuid)) {
+      return;
+    }
+    selectedMotifMeshState.current.delete(motif);
+    setSelectedmotifIds((prevState) => {
+      const newState = prevState;
+      newState.delete(motif.uuid);
+      return newState;
+    });
+  };
+  function updateGlow() {
+    motifs.forEach((motif) => {
+      motif.children.forEach((residue) => {
+        residue.children.forEach((childMesh) => {
+          if (selectedMotifIds.has(motif.uuid)) {
+            childMesh.applyHighlight();
+          } else {
+            childMesh.resetHighlight();
+          }
+        });
+      });
+    });
+  }
+  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)) {
+      return;
+    }
+    if (event.multiSelect && motif) {
+      addMotif(motif);
+    } else if (motif) {
+      setSelectedmotifIds(/* @__PURE__ */ new Set([motif.uuid]));
+      selectedMotifMeshState.current = /* @__PURE__ */ new Set([motif]);
+    }
+  }
+  function onDeselectMotif(event) {
+    if (event.type !== Events.EventType.OBJECT_DESELECTED) {
+      return;
+    }
+    if (selectedMotifMeshState.current.size === 0) {
+      return;
+    }
+    setSelectedmotifIds(/* @__PURE__ */ new Set());
+    selectedMotifMeshState.current.clear();
+  }
+  function onMouseMove(event) {
+    if (event.deltaX === 0 && event.deltaY === 0) {
+      return;
+    }
+    if (event.buttons === 2 && selectedMotifMeshState.current.size > 0) {
+      if (scene.current) {
+        const { renderWidth, renderHeight } = scene.current;
+        const rawDeltaX = event.deltaX;
+        const rawDeltaY = event.deltaY;
+        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)) {
+            element.translate(-deltaX, -deltaY, 0);
+          }
+        });
+      }
+    } else if (event.buttons === 1 && selectedMotifMeshState.current.size > 0) {
+      const { deltaX, deltaY } = event;
+      const directionVec = new Vec3(-deltaX, -deltaY, 0);
+      const axisVec = directionVec.clone().applyAxisAngle(new Vec3(0, 0, 1), Math.PI / 2);
+      axisVec.normalize();
+      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)) {
+            element.rotate(axisVec, angle);
+          }
+        });
+        setScoreRMSD(calculateRMSD(Array.from(selectedMotifMeshState.current), motifs));
+      }
+    }
+  }
+  function onMouseScroll(event) {
+    if (!event.originalEvent || !(event.originalEvent instanceof WheelEvent)) {
+      throw new Error("Tried to trigger Wheel event, but the event info was not present or not of the correct type");
+    }
+    event.originalEvent.preventDefault();
+    if (selectedMotifMeshState.current.size > 0) {
+      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)) {
+          const scaleFactor = 1 + zoomDirection * zoomSpeed;
+          element.multiplyScalar(scaleFactor);
+        }
+      });
+    }
+  }
+  function onMouseUp(event) {
+    if (event.type !== Events.EventType.POINTER_UP) {
+      return;
+    }
+    setCursorStyle("auto");
+  }
+  function onMouseDown(event) {
+    if (event.button === 2 && selectedMotifMeshState.current.size > 0) {
+      setCursorStyle("move");
+    } else if (event.button === 1 && event.ctrlKey) {
+      setCursorStyle("crosshair");
+    }
+  }
+  function onKeyboardRotate(event) {
+    if (event.rotationAxis.equals(Vec3.Zero)) {
+      return;
+    }
+    const angle = event.rotationAxis.length() / 500 * (6 * Math.PI);
+    selectedMotifMeshState.current.forEach((element) => {
+      if (!lockedMotifIdState.current.includes(element.uuid) && !hardLockedMotifIds.includes(element.uuid)) {
+        element.rotate(event.rotationAxis, angle);
+      }
+    });
+    setScoreRMSD(calculateRMSD(Array.from(selectedMotifMeshState.current), motifs));
+  }
+  function onKeyboardTranslate(event) {
+    if (event.translationDirection.equals(Vec3.Zero)) {
+      return;
+    }
+    event.translationDirection.multiplyScalar(0.5);
+    selectedMotifMeshState.current.forEach((element) => {
+      if (!lockedMotifIdState.current.includes(element.uuid) && !hardLockedMotifIds.includes(element.uuid)) {
+        element.translate(
+          event.translationDirection.x,
+          event.translationDirection.y,
+          event.translationDirection.z
+        );
+      }
+    });
+  }
+  function onKeyboardSelect(event) {
+    if (!event.rotationAxis.equals(Vec3.Zero) || !event.translationDirection.equals(Vec3.Zero)) {
+      return;
+    }
+    if (!/^[0-9]$/.test(event.key)) {
+      return;
+    }
+    const motif = motifs[Number(event.key) - 1];
+    if (selectedMotifMeshState.current.has(motif)) {
+      removeMotif(motif);
+    } else {
+      addMotif(motif);
+    }
+  }
+  const calculatePositions = (numMotifs) => {
+    if (!canvasRef.current) {
+      return [];
+    }
+    const totalWidth = canvasRef.current.width;
+    const subdividedWidth = totalWidth / numMotifs;
+    const halfWidth = subdividedWidth / 2;
+    const totalHeight = canvasRef.current.height;
+    const subdividedHeight = totalHeight * (numMotifs > 3 ? 1 : 0) / 5;
+    const positions = [];
+    for (let i = 0, x = totalWidth / 2; i < numMotifs; i += 1, x -= subdividedWidth) {
+      positions.push(new Vec3(x - halfWidth, subdividedHeight * (i % 2 ? 1 : -1), -100));
+    }
+    return positions;
+  };
+  useEffect(() => {
+    const unsubscribe = CanvasDataManager.subscribe("selectedMotifs" /* SELECTED_MOTIFS */, () => {
+      setSelectedmotifIds(CanvasDataManager.selectedMotifIds);
+    });
+    return () => unsubscribe();
+  }, []);
+  useEffect(() => {
+    if (CanvasDataManager.selectedMotifIds !== selectedMotifIds) {
+      CanvasDataManager.setSelectedMotifIds(selectedMotifIds);
+    }
+    selectedMotifMeshState.current.clear();
+    motifs.forEach((motif) => {
+      if (selectedMotifIds.has(motif.uuid)) {
+        selectedMotifMeshState.current.add(motif);
+      }
+    });
+    updateGlow();
+    setScoreRMSD(calculateRMSD(Array.from(selectedMotifMeshState.current), motifs));
+  }, [selectedMotifIds]);
+  useEffect(() => {
+    const unsubscribe = CanvasDataManager.subscribe("lockedMotifIds" /* LOCKED_MOTIF_IDS */, () => {
+      setLockedMotifIds(CanvasDataManager.lockedMotifIds);
+    });
+    return () => unsubscribe();
+  }, []);
+  useEffect(() => {
+    lockedMotifIdState.current = lockedMotifIds;
+    if (CanvasDataManager.lockedMotifIds !== lockedMotifIds) {
+      CanvasDataManager.setLockedMotifIds(lockedMotifIds);
+    }
+  }, [lockedMotifIds]);
+  useEffect(() => {
+    hardLockedMotifIds = CanvasDataManager.hardLockedMotifIds;
+  }, [CanvasDataManager.hardLockedMotifIds]);
+  useEffect(() => {
+    const unsubscribe = CanvasDataManager.subscribe("scoreRMSD" /* SCORE_RMSD */, () => {
+      setScoreRMSD(CanvasDataManager.scoreRMSD);
+    });
+    return () => unsubscribe();
+  }, []);
+  useEffect(() => {
+    if (CanvasDataManager.scoreRMSD !== scoreRMSD) {
+      CanvasDataManager.setScoreRMSD(scoreRMSD);
+    }
+  }, [scoreRMSD]);
+  useEffect(() => {
+    const unsubscribe = CanvasDataManager.subscribe("kabschRMSD" /* KABSCH_RMSD */, () => {
+      setKabschRMSD(CanvasDataManager.kabschRMSD);
+    });
+    return () => unsubscribe();
+  }, []);
+  useEffect(() => {
+    if (CanvasDataManager.kabschRMSD !== kabschRMSD) {
+      CanvasDataManager.setKabschRMSD(kabschRMSD);
+    }
+  }, [kabschRMSD]);
+  useEffect(() => {
+    document.body.style.cursor = cursorStyle;
+  }, [cursorStyle]);
+  useEffect(() => {
+    scene.current?.setBackgroundColor(rendererBackgroundColor);
+  }, [rendererBackgroundColor]);
+  useEffect(() => {
+    if (!canvasRef.current) return;
+    if (!scene.current) {
+      scene.current = new RenderScene(
+        canvasRef.current,
+        rendererBackgroundColor,
+        cameraPositionZ,
+        rendererSizeIsWindow ? window.innerWidth : rendererWidth,
+        rendererSizeIsWindow ? window.innerHeight : rendererHeight
+      );
+    }
+    const positions = calculatePositions(motifs.length);
+    if (motifs.length > 0) {
+      updateAllMotifs(motifs).then(() => {
+        setKabschRMSD(calculateAllKabschRMSD(motifs));
+      });
+      if (scene.current.children.size !== motifs.length) {
+        motifs.forEach((motifMesh, index) => {
+          if (motifProps[index].position) positions[index] = motifProps[index].position;
+          motifMesh.setPosition(positions[index].x, positions[index].y, positions[index].z);
+          if (motifProps[index].rotation) motifMesh.setQuaternion(motifProps[index].rotation);
+          motifMesh.multiplyScalar(canvasRef.current.width / 250);
+          scene.current?.add(motifMesh);
+        });
+        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) => {
+            eventManager.on(
+              customEventProp.eventType,
+              customEventProp.callback
+            );
+          });
+        }
+      } else {
+        motifs.forEach((motifMesh) => {
+          scene.current?.add(motifMesh);
+        });
+      }
+    }
+    scene.current?.start();
+  }, [rendererWidth, rendererHeight, rendererSizeIsWindow, motifProps]);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("canvas", { ref: canvasRef }));
+}
+export {
+  Canvas,
+  CanvasAttributeTypes,
+  CanvasDataManager,
+  EventManager,
+  Events,
+  Group,
+  Matrix4,
+  MeshObject,
+  Motif,
+  Quat,
+  RenderScene,
+  Residue,
+  Vec3,
+  calculateAllKabschRMSD,
+  calculateRMSD,
+  calculateRMSDSlide,
+  getMotif,
+  getPoints,
+  getRMSD,
+  kabschSlidingWindow,
+  rotateAllPoints,
+  updateAllMotifs
+};