@inweb/viewer-three 26.6.0 → 26.6.2

package/src/Viewer/components/SelectionComponent.ts

@@ -21,41 +21,34 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Intersection, MeshBasicMaterial, Object3D, Raycaster, Vector2 } from "three";
+import { Intersection, Object3D, Raycaster, Vector2 } from "three";
 
 import { IComponent } from "@inweb/viewer-core";
-import type { Viewer } from "../Viewer";
+import { Viewer } from "../Viewer";
+import { HighlighterComponent } from "./HighlighterComponent";
 
 export class SelectionComponent implements IComponent {
   protected viewer: Viewer;
   protected raycaster: Raycaster;
   protected downPosition: Vector2;
-  protected facesMaterial: MeshBasicMaterial;
+  protected highlighter: HighlighterComponent;
 
   constructor(viewer: Viewer) {
     this.viewer = viewer;
     this.raycaster = new Raycaster();
     this.downPosition = new Vector2();
 
-    const { facesColor, facesTransparancy } = this.viewer.options;
-    this.facesMaterial = new MeshBasicMaterial();
-    this.facesMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
-    this.facesMaterial.opacity = (255 - facesTransparancy) / 255;
-    this.facesMaterial.transparent = true;
-
     this.viewer.addEventListener("pointerdown", this.onPointerDown);
     this.viewer.addEventListener("pointerup", this.onPointerUp);
     this.viewer.addEventListener("dblclick", this.onDoubleClick);
-    this.viewer.addEventListener("optionschange", this.optionsChange);
+    this.viewer.addEventListener("initialize", this.initHighlighter);
   }
 
   dispose() {
-    this.facesMaterial.dispose();
-
     this.viewer.removeEventListener("pointerdown", this.onPointerDown);
     this.viewer.removeEventListener("pointerup", this.onPointerUp);
     this.viewer.removeEventListener("dblclick", this.onDoubleClick);
-    this.viewer.removeEventListener("optionschange", this.optionsChange);
+    this.viewer.removeEventListener("initialize", this.initHighlighter);
   }
 
   onPointerDown = (event: PointerEvent) => {
@@ -116,8 +109,7 @@ export class SelectionComponent implements IComponent {
     if (object.isSelected) return;
 
     object.isSelected = true;
-    object.originalMaterial = object.material;
-    object.material = this.facesMaterial;
+    this.highlighter.highlight(object);
 
     this.viewer.selected.push(object);
   }
@@ -125,16 +117,12 @@ export class SelectionComponent implements IComponent {
   clearSelection() {
     this.viewer.selected.forEach((object: any) => {
       object.isSelected = false;
-      object.material = object.originalMaterial;
+      this.highlighter.unhighlight(object);
     });
     this.viewer.selected.length = 0;
   }
 
-  optionsChange = () => {
-    const { facesColor, facesTransparancy } = this.viewer.options;
-    this.facesMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
-    this.facesMaterial.opacity = (255 - facesTransparancy) / 255;
-
-    this.viewer.update();
+  initHighlighter = () => {
+    this.highlighter = this.viewer.getComponent("HighlighterComponent") as any;
   };
 }

package/src/Viewer/components/index.ts

@@ -24,12 +24,12 @@
 import { IComponentsRegistry, componentsRegistry } from "@inweb/viewer-core";
 
 import { BackgroundComponent } from "./BackgroundComponent";
-import { RoomEnvironmentComponent } from "./RoomEnvironmentComponent";
 import { CameraComponent } from "./CameraComponent";
 import { ExtentsComponent } from "./ExtentsComponent";
 import { LightComponent } from "./LightComponent";
 import { RenderLoopComponent } from "./RenderLoopComponent";
 import { ResizeCanvasComponent } from "./ResizeCanvasComponent";
+import { HighlighterComponent } from "./HighlighterComponent";
 import { SelectionComponent } from "./SelectionComponent";
 import { WCSHelperComponent } from "./WCSHelperComponent";
 
@@ -78,10 +78,10 @@ export const components: IComponentsRegistry = componentsRegistry("threejs");
 components.registerComponent("ExtentsComponent", (viewer) => new ExtentsComponent(viewer));
 components.registerComponent("CameraComponent", (viewer) => new CameraComponent(viewer));
 components.registerComponent("BackgroundComponent", (viewer) => new BackgroundComponent(viewer));
-components.registerComponent("RoomEnvironmentComponent", (viewer) => new RoomEnvironmentComponent(viewer));
 components.registerComponent("LightComponent", (viewer) => new LightComponent(viewer));
 components.registerComponent("ResizeCanvasComponent", (viewer) => new ResizeCanvasComponent(viewer));
 components.registerComponent("RenderLoopComponent", (viewer) => new RenderLoopComponent(viewer));
+components.registerComponent("HighlighterComponent", (viewer) => new HighlighterComponent(viewer));
 components.registerComponent("SelectionComponent", (viewer) => new SelectionComponent(viewer));
 
 components.registerComponent("WCSHelperComponent", (viewer) => new WCSHelperComponent(viewer));

package/lib/Viewer/components/RoomEnvironmentComponent.d.ts

@@ -1,7 +0,0 @@
-import { IComponent } from "@inweb/viewer-core";
-import type { Viewer } from "../Viewer";
-export declare class RoomEnvironmentComponent implements IComponent {
-    protected viewer: Viewer;
-    constructor(viewer: Viewer);
-    dispose(): void;
-}