@inweb/viewer-three 26.6.1 → 26.6.2

package/lib/Viewer/Viewer.d.ts

@@ -151,6 +151,7 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     activeDragger(): IDragger | null;
     setActiveDragger(name?: string): IDragger | null;
     resetActiveDragger(): void;
+    getComponent(name: string): IComponent;
     is3D(): boolean;
     screenToWorld(position: {
         x: number;
@@ -174,7 +175,6 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
         z: number;
     };
     executeCommand(id: string, ...args: any[]): any;
-    getComponent(name: string): IComponent;
     drawViewpoint(viewpoint: IViewpoint): void;
     createViewpoint(): IViewpoint;
 }

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

@@ -0,0 +1,18 @@
+import { LineBasicMaterial, MeshBasicMaterial } from "three";
+import { LineMaterial } from "three/examples/jsm/lines/LineMaterial.js";
+import { IComponent, ResizeEvent } from "@inweb/viewer-core";
+import { Viewer } from "../Viewer";
+export declare class HighlighterComponent implements IComponent {
+    protected viewer: Viewer;
+    highlightMaterial: MeshBasicMaterial;
+    outlineMaterial: LineMaterial;
+    highlightLineMaterial: LineBasicMaterial;
+    highlightLineGlowMaterial: LineMaterial;
+    constructor(viewer: Viewer);
+    dispose(): void;
+    highlight(object: any): void;
+    unhighlight(object: any): void;
+    geometryEnd: () => void;
+    optionsChange: () => void;
+    viewerResize(event: ResizeEvent): void;
+}

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

@@ -0,0 +1,6 @@
+import { LineSegmentsGeometry } from "three/examples/jsm/lines/LineSegmentsGeometry.js";
+export declare class HighlighterUtils {
+    static isBreak(positions: Float32Array, i: number): boolean;
+    static fromIndexedLine(positions: Float32Array, indices: number[]): LineSegmentsGeometry;
+    static fromNonIndexedLine(positions: Float32Array, isLineSegments: boolean): LineSegmentsGeometry;
+}

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

@@ -1,11 +1,12 @@
-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 declare class SelectionComponent implements IComponent {
     protected viewer: Viewer;
     protected raycaster: Raycaster;
     protected downPosition: Vector2;
-    protected facesMaterial: MeshBasicMaterial;
+    protected highlighter: HighlighterComponent;
     constructor(viewer: Viewer);
     dispose(): void;
     onPointerDown: (event: PointerEvent) => void;
@@ -15,5 +16,5 @@ export declare class SelectionComponent implements IComponent {
     getPointerIntersects(mouse: Vector2): Array<Intersection<Object3D>>;
     select(object: any): void;
     clearSelection(): void;
-    optionsChange: () => void;
+    initHighlighter: () => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "26.6.1",
+  "version": "26.6.2",
   "description": "JavaScript library for rendering CAD and BIM files in a browser using Three.js",
   "homepage": "https://cloud.opendesign.com/docs/index.html",
   "license": "SEE LICENSE IN LICENSE",
@@ -31,10 +31,10 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~26.6.1",
-    "@inweb/eventemitter2": "~26.6.1",
-    "@inweb/markup": "~26.6.1",
-    "@inweb/viewer-core": "~26.6.1"
+    "@inweb/client": "~26.6.2",
+    "@inweb/eventemitter2": "~26.6.2",
+    "@inweb/markup": "~26.6.2",
+    "@inweb/viewer-core": "~26.6.2"
   },
   "devDependencies": {
     "@types/three": "^0.173.0",

package/src/Viewer/Viewer.ts

@@ -535,6 +535,10 @@ export class Viewer
     }
   }
 
+  getComponent(name: string): IComponent {
+    return this._components.find((component) => component.name === name);
+  }
+
   is3D(): boolean {
     return true;
   }
@@ -573,10 +577,6 @@ export class Viewer
     return commands.executeCommand(id, this, ...args);
   }
 
-  getComponent(name: string): IComponent {
-    return this._components.find((component) => component.name === name);
-  }
-
   drawViewpoint(viewpoint: IViewpoint): void {
     if (!this.renderer) return;
 

package/src/Viewer/components/HighlighterComponent.ts

@@ -0,0 +1,159 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
+import { Color, EdgesGeometry, LineBasicMaterial, MeshBasicMaterial, Vector2 } from "three";
+import { LineSegmentsGeometry } from "three/examples/jsm/lines/LineSegmentsGeometry.js";
+import { Wireframe } from "three/examples/jsm/lines/Wireframe.js";
+import { LineMaterial } from "three/examples/jsm/lines/LineMaterial.js";
+
+import { IComponent, ResizeEvent } from "@inweb/viewer-core";
+import { Viewer } from "../Viewer";
+import { HighlighterUtils } from "./HighlighterUtils";
+
+export class HighlighterComponent implements IComponent {
+  protected viewer: Viewer;
+  public highlightMaterial: MeshBasicMaterial;
+  public outlineMaterial: LineMaterial;
+  public highlightLineMaterial: LineBasicMaterial;
+  public highlightLineGlowMaterial: LineMaterial;
+
+  constructor(viewer: Viewer) {
+    this.viewer = viewer;
+
+    this.viewer.addEventListener("databasechunk", this.geometryEnd);
+    this.viewer.addEventListener("optionschange", this.optionsChange);
+    this.viewer.addEventListener("resize", this.viewerResize);
+
+    this.geometryEnd();
+  }
+
+  dispose() {
+    this.viewer.removeEventListener("databasechunk", this.geometryEnd);
+    this.viewer.removeEventListener("optionschange", this.optionsChange);
+    this.viewer.removeEventListener("resize", this.viewerResize);
+  }
+
+  highlight(object: any) {
+    if (object.isHighlighted) return;
+
+    if (object.isLine || object.isLineSegments) {
+      const positions = object.geometry.attributes.position.array;
+      const indices = object.geometry.index ? object.geometry.index.array : null;
+      const lineGeometry = indices
+        ? HighlighterUtils.fromIndexedLine(positions, indices)
+        : HighlighterUtils.fromNonIndexedLine(positions, object.isLineSegments);
+
+      const wireframe = new Wireframe(lineGeometry, this.highlightLineGlowMaterial);
+      wireframe.position.copy(object.position);
+      wireframe.rotation.copy(object.rotation);
+      wireframe.scale.copy(object.scale);
+
+      object.parent.add(wireframe);
+
+      object.userData.highlightwireframe = wireframe;
+      object.userData.originalMaterial = object.material;
+      object.material = this.highlightLineMaterial;
+      object.isHighlighted = true;
+    } else if (object.isMesh) {
+      const edgesGeometry = new EdgesGeometry(object.geometry, 30);
+      const lineGeometry = new LineSegmentsGeometry().fromEdgesGeometry(edgesGeometry);
+
+      const wireframe = new Wireframe(lineGeometry, this.outlineMaterial);
+      wireframe.position.copy(object.position);
+      wireframe.rotation.copy(object.rotation);
+      wireframe.scale.copy(object.scale);
+
+      object.parent.add(wireframe);
+
+      object.userData.highlightwireframe = wireframe;
+      object.userData.originalMaterial = object.material;
+      object.material = this.highlightMaterial;
+      object.isHighlighted = true;
+    }
+  }
+
+  unhighlight(object: any) {
+    if (!object.isHighlighted) return;
+
+    object.isHighlighted = false;
+    object.material = object.userData.originalMaterial;
+    object.userData.highlightwireframe.removeFromParent();
+
+    delete object.userData.originalMaterial;
+    delete object.userData.highlightwireframe;
+  }
+
+  geometryEnd = () => {
+    const { facesColor, facesTransparancy, edgesColor } = this.viewer.options;
+
+    this.highlightMaterial = new MeshBasicMaterial({
+      color: new Color(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255),
+      transparent: true,
+      opacity: (255 - facesTransparancy) / 255,
+      depthTest: false,
+      depthWrite: false,
+    });
+
+    this.outlineMaterial = new LineMaterial({
+      color: new Color(edgesColor.r / 255, edgesColor.g / 255, edgesColor.b / 255),
+      linewidth: 1.5,
+      depthTest: false,
+      depthWrite: false,
+      resolution: new Vector2(window.innerWidth, window.innerHeight),
+    });
+
+    this.highlightLineMaterial = new LineBasicMaterial({
+      color: new Color(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255),
+      depthTest: false,
+      depthWrite: false,
+    });
+
+    this.highlightLineGlowMaterial = new LineMaterial({
+      color: new Color(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255),
+      linewidth: 5,
+      transparent: true,
+      opacity: 0.8,
+      depthTest: true,
+      depthWrite: true,
+      resolution: new Vector2(window.innerWidth, window.innerHeight),
+    });
+  };
+
+  optionsChange = () => {
+    const { facesColor, facesTransparancy, edgesColor } = this.viewer.options;
+
+    this.highlightMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
+    this.highlightMaterial.opacity = (255 - facesTransparancy) / 255;
+    this.outlineMaterial.color.setRGB(edgesColor.r / 255, edgesColor.g / 255, edgesColor.b / 255);
+    this.highlightLineMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
+    this.highlightLineGlowMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
+
+    this.viewer.update();
+  };
+
+  viewerResize(event: ResizeEvent) {
+    if (!this.outlineMaterial) return;
+
+    this.outlineMaterial.resolution.set(event.width, event.height);
+  }
+}

package/src/Viewer/components/HighlighterUtils.ts

@@ -0,0 +1,116 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
+import { LineSegmentsGeometry } from "three/examples/jsm/lines/LineSegmentsGeometry.js";
+
+export class HighlighterUtils {
+  static isBreak(positions: Float32Array, i: number) {
+    return (
+      isNaN(positions[i]) ||
+      isNaN(positions[i + 1]) ||
+      isNaN(positions[i + 2]) ||
+      positions[i] === Infinity ||
+      positions[i] === -Infinity ||
+      positions[i + 1] === Infinity ||
+      positions[i + 1] === -Infinity ||
+      positions[i + 2] === Infinity ||
+      positions[i + 2] === -Infinity
+    );
+  }
+
+  static fromIndexedLine(positions: Float32Array, indices: number[]) {
+    const lineGeometry = new LineSegmentsGeometry();
+    const segments = [];
+
+    for (let i = 0; i < indices.length; i += 2) {
+      const idx1 = indices[i] * 3;
+      const idx2 = indices[i + 1] * 3;
+
+      if (indices[i] === -1 || indices[i + 1] === -1) {
+        continue;
+      }
+
+      segments.push(
+        positions[idx1],
+        positions[idx1 + 1],
+        positions[idx1 + 2],
+        positions[idx2],
+        positions[idx2 + 1],
+        positions[idx2 + 2]
+      );
+    }
+
+    if (segments.length === 0) return null;
+
+    lineGeometry.setPositions(segments);
+    return lineGeometry;
+  }
+
+  static fromNonIndexedLine(positions: Float32Array, isLineSegments: boolean) {
+    const lineGeometry = new LineSegmentsGeometry();
+    const segments = [];
+
+    if (isLineSegments) {
+      for (let i = 0; i < positions.length; i += 6) {
+        if (i + 5 >= positions.length) break;
+
+        if (HighlighterUtils.isBreak(positions, i) || HighlighterUtils.isBreak(positions, i + 3)) continue;
+
+        segments.push(
+          positions[i],
+          positions[i + 1],
+          positions[i + 2],
+          positions[i + 3],
+          positions[i + 4],
+          positions[i + 5]
+        );
+      }
+    } else {
+      let lastValidIndex = -1;
+
+      for (let i = 0; i < positions.length; i += 3) {
+        if (HighlighterUtils.isBreak(positions, i)) {
+          lastValidIndex = -1;
+          continue;
+        }
+
+        if (lastValidIndex !== -1) {
+          segments.push(
+            positions[lastValidIndex],
+            positions[lastValidIndex + 1],
+            positions[lastValidIndex + 2],
+            positions[i],
+            positions[i + 1],
+            positions[i + 2]
+          );
+        }
+        lastValidIndex = i;
+      }
+    }
+
+    if (segments.length === 0) return null;
+
+    lineGeometry.setPositions(segments);
+    return lineGeometry;
+  }
+}

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

@@ -29,6 +29,7 @@ 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";
 
@@ -80,6 +81,7 @@ components.registerComponent("BackgroundComponent", (viewer) => new BackgroundCo
 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));