Remove openbim-components dependency

package.json

@@ -1,7 +1,7 @@
 {
   "name": "openbim-clay",
   "main": "index.js",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "author": "antonio gonzalez viegas, quim moya",
   "license": "MIT",
   "packageManager": "yarn@3.2.1",
@@ -29,7 +29,6 @@
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-prettier": "^3.4.0",
     "jest": "27.0.4",
-    "openbim-components": "^1.1.2",
     "prettier": "^2.3.1",
     "rollup": "3.2.3",
     "ts-jest": "^27.0.3",
@@ -39,8 +38,5 @@
   "dependencies": {
     "earcut": "^2.2.4",
     "three": "0.152.2"
-  },
-  "peerDependencies": {
-    "openbim-components": "^1.1.2"
   }
 }

src/editors/Planes/index.html

@@ -38,7 +38,8 @@
 
 	const scene = components.scene.get();
 
-	const planes = new OBC.Planes(components);
+    // TODO: Check if works, raycaster might be missing camera
+	const planes = new OBC.Planes(scene);
 	planes.enabled = true;
 
     // Vertex snapping

src/editors/Planes/index.ts

@@ -1,6 +1,6 @@
 import * as THREE from "three";
-import * as OBC from "openbim-components";
 import { Faces, Lines } from "../../primitives";
+import { Raycaster } from "../../utils";
 
 export type PlaneTransformMode = "TRANSLATE" | "ROTATE" | "SCALE";
 
@@ -13,11 +13,11 @@ type TransformState =
 export class Planes {
   faces = new Faces();
 
+  private _cameraGetter: () => THREE.Camera;
+  private _caster = new Raycaster();
   private _enabled = false;
   private transformMode: PlaneTransformMode = "TRANSLATE";
 
-  private _components: OBC.Components;
-
   private _lines = new Lines();
   private readonly _helperLine1: { id: number; start: number; end: number };
   private readonly _helperLine2: { id: number; start: number; end: number };
@@ -33,6 +33,7 @@ export class Planes {
 
   private _q = new THREE.Quaternion();
 
+  private _scene: THREE.Scene;
   private _transformActive = false;
   private _previousTransform = new THREE.Matrix4();
   private _newTransform = new THREE.Matrix4();
@@ -53,8 +54,9 @@ export class Planes {
     }
   }
 
-  constructor(components: OBC.Components) {
-    this._components = components;
+  constructor(scene: THREE.Scene, cameraGetter: () => THREE.Camera) {
+    this._cameraGetter = cameraGetter;
+    this._scene = scene;
     const material = this.faces.mesh.material as THREE.Material;
     material.transparent = true;
     material.opacity = 0.2;
@@ -83,7 +85,6 @@ export class Planes {
     const [helperAngleLineID] = this._lines.add([c, d]);
     this._helperLine2 = this._lines.list[helperAngleLineID];
 
-    const scene = components.scene.get();
     scene.add(this.faces.mesh);
     scene.add(this._helperPlane);
   }
@@ -127,13 +128,13 @@ export class Planes {
     const [cx, cy, cz] = center;
     this._helperPlane.position.set(cx, cy, cz);
 
-    const camera = this._components.camera.get();
+    const camera = this._cameraGetter();
     this._helperPlane.rotation.copy(camera.rotation);
     this._helperPlane.updateMatrix();
     this._helperPlane.updateMatrixWorld();
 
-    const result = this._components.raycaster.castRay([this._helperPlane]);
-    if (result === null) {
+    const result = this._caster.cast([this._helperPlane])[0];
+    if (!result) {
       this.transform(false);
       return;
     }
@@ -159,7 +160,7 @@ export class Planes {
   }
 
   private updateTransform = () => {
-    const result = this._components.raycaster.castRay([this._helperPlane]);
+    const result = this._caster.cast([this._helperPlane])[0];
     if (result === null) return;
     this.updateAxis(result);
     this.getTransformData();
@@ -232,7 +233,7 @@ export class Planes {
 
     const axis = new THREE.Vector3();
     axis.set(0, 0, 1);
-    const camera = this._components.camera.get();
+    const camera = this._cameraGetter();
     axis.applyEuler(camera.rotation);
     this._q.setFromAxisAngle(axis, angle);
 
@@ -301,8 +302,8 @@ export class Planes {
     if (this._transformActive) return;
     this.faces.select(false);
     this._selected = null;
-    const result = this._components.raycaster.castRay([this.faces.mesh]);
-    if (result === null || result.faceIndex === undefined) return;
+    const result = this._caster.cast([this.faces.mesh])[0];
+    if (!result || result.faceIndex === undefined) return;
     const faceID = this.faces.getFromIndex(result.faceIndex);
     if (faceID !== undefined) {
       this._selected = faceID;
@@ -311,11 +312,10 @@ export class Planes {
   };
 
   private setHelperLineVisible(active: boolean) {
-    const scene = this._components.scene.get();
     if (active) {
-      scene.add(this._lines.mesh, this._lines.vertices.mesh);
+      this._scene.add(this._lines.mesh, this._lines.vertices.mesh);
     } else {
-      scene.remove(this._lines.mesh, this._lines.vertices.mesh);
+      this._scene.remove(this._lines.mesh, this._lines.vertices.mesh);
     }
   }
 }

src/editors/Snapper/index.html

@@ -38,7 +38,8 @@
 
     const scene = components.scene.get();
 
-    const snapper = new OBC.Snapper(components);
+    // TODO: Check if works, raycaster might be missing camera
+    const snapper = new OBC.Snapper(scene);
 
     const lines = new OBC.Lines();
     scene.add(lines.mesh);

src/editors/Snapper/index.ts

@@ -1,7 +1,8 @@
 import * as THREE from "three";
-import * as OBC from "openbim-components";
 import { CSS2DObject } from "three/examples/jsm/renderers/CSS2DRenderer";
 import { Lines, Vertices } from "../../primitives";
+import { Event } from "../../utils/event";
+import { Raycaster } from "../../utils";
 
 export type FoundItem = {
   id: number;
@@ -13,10 +14,11 @@ export class Snapper {
   vertices: Vertices[] = [];
   lines: Lines[] = [];
 
-  snap = new OBC.Event<FoundItem>();
+  snap = new Event<FoundItem>();
 
   mode: "LINE" | "VERTEX" | "ALL" = "ALL";
 
+  private _caster = new Raycaster();
   private _helper = new Lines();
   private _helperLinesIDs = new Set<number>();
   private _helperPointsIDs = new Set<number>();
@@ -26,31 +28,29 @@ export class Snapper {
 
   private _lastSelectedLine: FoundItem | null = null;
 
-  private readonly _components: OBC.Components;
   private readonly _vertexIcon: CSS2DObject;
+  private _scene: THREE.Scene;
 
   set vertexThreshold(threshold: number) {
     // TODO: Add the get() method to the raycaster definition in components
-    const rayCaster = this.getRaycaster();
-    rayCaster.params.Points = { threshold };
+    this._caster.core.params.Points = { threshold };
   }
 
   set lineThreshold(threshold: number) {
-    const rayCaster = this.getRaycaster();
-    rayCaster.params.Line = { threshold };
+    this._caster.core.params.Line = { threshold };
   }
 
-  constructor(components: OBC.Components) {
-    this._components = components;
+  constructor(scene: THREE.Scene) {
+    this._scene = scene;
+
     this.vertexThreshold = 0.5;
     this.lineThreshold = 0.2;
 
     const element = document.createElement("div");
     element.className = "clay-snap-vertex";
     this._vertexIcon = new CSS2DObject(element);
 
-    const scene = components.scene.get();
-    scene.add(this._helper.mesh);
+    this._scene.add(this._helper.mesh);
     const helperMat = this._helper.mesh.material as THREE.Material;
     helperMat.transparent = true;
     helperMat.opacity = 0.2;
@@ -68,7 +68,7 @@ export class Snapper {
 
   find() {
     const result = this.raycastMeshes();
-    if (result !== null && result.index !== undefined) {
+    if (result && result.index !== undefined) {
       const item = this.getFoundItem(result.object);
       if (!item) return;
       if (item instanceof Lines) result.index /= 2;
@@ -100,16 +100,15 @@ export class Snapper {
   }
 
   private previewSnap = (found?: FoundItem) => {
-    const scene = this._components.scene.get();
     if (!found) {
-      scene.remove(this._vertexIcon);
+      this._scene.remove(this._vertexIcon);
       return;
     }
 
     const { coordinates } = found;
     const [x, y, z] = coordinates;
     this._vertexIcon.position.set(x, y, z);
-    scene.add(this._vertexIcon);
+    this._scene.add(this._vertexIcon);
   };
 
   private updateLastSelection = (found?: FoundItem) => {
@@ -298,7 +297,7 @@ export class Snapper {
       }
     }
 
-    return this._components.raycaster.castRay(meshes);
+    return this._caster.cast(meshes)[0];
   }
 
   private getSnapCoordinates(
@@ -312,9 +311,4 @@ export class Snapper {
     const { x, y, z } = result.point;
     return [x, y, z];
   }
-
-  private getRaycaster() {
-    const casterComponent = this._components.raycaster as OBC.SimpleRaycaster;
-    return casterComponent.get();
-  }
 }

src/utils/event.ts

@@ -0,0 +1,42 @@
+/**
+ * Simple event handler by
+ * [Jason Kleban](https://gist.github.com/JasonKleban/50cee44960c225ac1993c922563aa540).
+ * Keep in mind that:
+ * - If you want to remove it later, you might want to declare the callback as
+ * an object.
+ * - If you want to maintain the reference to `this`, you will need to declare
+ * the callback as an arrow function.
+ */
+export class Event<T> {
+  /**
+   * Add a callback to this event instance.
+   * @param handler - the callback to be added to this event.
+   */
+  add(handler: T extends void ? { (): void } : { (data: T): void }): void {
+    this.handlers.push(handler);
+  }
+
+  /**
+   * Removes a callback from this event instance.
+   * @param handler - the callback to be removed from this event.
+   */
+  remove(handler: T extends void ? { (): void } : { (data: T): void }): void {
+    this.handlers = this.handlers.filter((h) => h !== handler);
+  }
+
+  /** Triggers all the callbacks assigned to this event. */
+  trigger = async (data?: T) => {
+    const handlers = this.handlers.slice(0);
+    for (const handler of handlers) {
+      await handler(data as any);
+    }
+  };
+
+  /** Gets rid of all the suscribed events. */
+  reset() {
+    this.handlers.length = 0;
+  }
+
+  private handlers: (T extends void ? { (): void } : { (data: T): void })[] =
+    [];
+}

src/utils/raycaster.ts

@@ -1,7 +1,7 @@
 import * as THREE from "three";
 
 export class Raycaster {
-  private _caster: THREE.Raycaster;
+  core: THREE.Raycaster;
   private _mouse = new THREE.Vector2();
 
   domElement?: HTMLCanvasElement;
@@ -24,12 +24,12 @@ export class Raycaster {
   }
 
   constructor() {
-    this._caster = new THREE.Raycaster();
-    if (!this._caster.params.Points) {
+    this.core = new THREE.Raycaster();
+    if (!this.core.params.Points) {
       throw new Error("Raycaster has undefined Points");
     }
 
-    this._caster.params.Points.threshold = 0.2;
+    this.core.params.Points.threshold = 0.2;
   }
 
   cast(items: THREE.Object3D[]) {
@@ -43,8 +43,8 @@ export class Raycaster {
     this._mouse.x = ((x - b.left) / (b.right - b.left)) * 2 - 1;
     this._mouse.y = -((y - b.top) / (b.bottom - b.top)) * 2 + 1;
 
-    this._caster.setFromCamera(this._mouse, this.camera);
-    return this._caster.intersectObjects(items);
+    this.core.setFromCamera(this._mouse, this.camera);
+    return this.core.intersectObjects(items);
   }
 
   private getMousePosition = (event: MouseEvent) => {

src/utils/transform-controls.ts

@@ -1,12 +1,12 @@
 import * as THREE from "three";
-import * as OBC from "openbim-components";
 import { TransformControls } from "three/examples/jsm/controls/TransformControls";
+import { Event } from "./event";
 
 export class Control {
   core: TransformControls;
   helper: THREE.Object3D;
-  transformed = new OBC.Event<THREE.Matrix4>();
-  controlsActivated = new OBC.Event();
+  transformed = new Event<THREE.Matrix4>();
+  controlsActivated = new Event();
 
   get items() {
     return [this.helper, this.core];