@inweb/viewer-three 26.6.6 → 26.6.7

package/src/Viewer/commands/Explode.ts

@@ -21,56 +21,10 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Box3, Vector3 } from "three";
 import type { Viewer } from "../Viewer";
 
-function calcExplodeDepth(object, depth: number): number {
-  let res = depth;
-  object.children.forEach((x) => {
-    const objectDepth = calcExplodeDepth(x, depth + 1);
-    if (res < objectDepth) res = objectDepth;
-  });
-
-  object.originalPosition = object.position.clone();
-  object.originalCenter = new Box3().setFromObject(object).getCenter(new Vector3());
-  object.isExplodeLocked = depth > 2 && object.children.length === 0;
-
-  return res;
-}
-
-function explodeModel(scene, scale = 0, coeff = 4) {
-  scale /= 100;
-
-  if (!scene.explodeDepth) scene.explodeDepth = calcExplodeDepth(scene, 1);
-  const maxDepth = scene.explodeDepth;
-
-  const scaledExplodeDepth = scale * maxDepth + 1;
-  const explodeDepth = 0 | scaledExplodeDepth;
-  const currentSegmentFraction = scaledExplodeDepth - explodeDepth;
-
-  function explodeObject(object, depth: number) {
-    object.position.copy(object.originalPosition);
-
-    if (depth > 0 && depth <= explodeDepth && !object.isExplodeLocked) {
-      let objectScale = scale * coeff;
-      if (depth === explodeDepth) objectScale *= currentSegmentFraction;
-
-      const parentCenter = object.parent.originalCenter;
-      const objectCenter = object.originalCenter;
-      const objectOffset = objectCenter.clone().sub(parentCenter).multiplyScalar(objectScale);
-
-      object.position.add(objectOffset);
-    }
-
-    object.children.forEach((x) => explodeObject(x, depth + 1));
-  }
-
-  explodeObject(scene, 0);
-}
-
 export function explode(viewer: Viewer, index = 0): void {
-  viewer.models.forEach((model) => explodeModel(model, index));
-  viewer.scene.updateMatrixWorld();
+  viewer.models.forEach((model) => model.explode(index));
 
   viewer.update();
   viewer.emitEvent({ type: "explode", data: index });

package/src/Viewer/commands/GetModels.ts

@@ -24,5 +24,5 @@
 import type { Viewer } from "../Viewer";
 
 export function getModels(viewer: Viewer): string[] {
-  return viewer.models.map((model) => model.userData?.handle || "").filter((handle) => handle);
+  return viewer.models.map((model) => model.handle);
 }

package/src/Viewer/commands/GetSelected.ts

@@ -24,5 +24,7 @@
 import type { Viewer } from "../Viewer";
 
 export function getSelected(viewer: Viewer): string[] {
-  return viewer.selected.map((object) => object.userData?.handle).filter((handle) => handle);
+  const handles = [];
+  viewer.models.forEach((model) => handles.push(...model.getHandlesByObjects(viewer.selected)));
+  return handles;
 }

package/src/Viewer/commands/HideSelected.ts

@@ -22,14 +22,13 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 import type { Viewer } from "../Viewer";
-import { SelectionComponent } from "../components/SelectionComponent";
+import type { SelectionComponent } from "../components/SelectionComponent";
 
 export function hideSelected(viewer: Viewer): void {
-  viewer.selected.forEach((object) => (object.visible = false));
+  viewer.models.forEach((model) => model.hideObjects(viewer.selected));
 
-  const selection = new SelectionComponent(viewer);
+  const selection = viewer.getComponent("SelectionComponent") as SelectionComponent;
   selection.clearSelection();
-  selection.dispose();
 
   viewer.update();
   viewer.emitEvent({ type: "hide" });

package/src/Viewer/commands/IsolateSelected.ts

@@ -24,13 +24,7 @@
 import type { Viewer } from "../Viewer";
 
 export function isolateSelected(viewer: Viewer): void {
-  const visibleSet = new Set();
-  viewer.selected.forEach((object) => {
-    visibleSet.add(object);
-    object.traverseAncestors((object2) => visibleSet.add(object2));
-  });
-
-  viewer.scene.traverse((object) => (object.visible = visibleSet.has(object)));
+  viewer.models.forEach((model) => model.isolateObjects(viewer.selected));
 
   viewer.update();
   viewer.emitEvent({ type: "isolate" });

package/src/Viewer/commands/SelectModel.ts

@@ -22,8 +22,16 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 import type { Viewer } from "../Viewer";
+import type { SelectionComponent } from "../components/SelectionComponent";
 
 export function selectModel(viewer: Viewer, handle: string): void {
-  console.warn("selectModel not implemented");
+  const selection = viewer.getComponent("SelectionComponent") as SelectionComponent;
+  selection.clearSelection();
+
+  viewer.models
+    .filter((model) => model.handle === handle)
+    .forEach((model) => selection.select(model.getObjects(), model));
+
+  viewer.update();
   viewer.emit({ type: "select", data: [] });
 }

package/src/Viewer/commands/SetSelected.ts

@@ -22,20 +22,18 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 import type { Viewer } from "../Viewer";
+import type { SelectionComponent } from "../components/SelectionComponent";
 
 export function setSelected(viewer: Viewer, handles: string[] = []): void {
-  const handleSet = new Set(handles);
-  const objects = [];
-  viewer.scene.traverseVisible((child) => {
-    if (handleSet.has(child.userData?.handle)) objects.push(child);
-  });
-
-  const selection: any = viewer.getComponent("SelectionComponent");
-  if (!selection) return;
-
+  const selection = viewer.getComponent("SelectionComponent") as SelectionComponent;
   selection.clearSelection();
-  objects.forEach((object) => selection.select(object));
+
+  viewer.models.forEach((model) => {
+    const objects = model.getObjectsByHandles(handles);
+    selection.select(objects, model);
+  });
 
   viewer.update();
+  viewer.emitEvent({ type: "show" });
   viewer.emitEvent({ type: "select", data: undefined, handles });
 }

package/src/Viewer/commands/ShowAll.ts

@@ -24,7 +24,7 @@
 import type { Viewer } from "../Viewer";
 
 export function showAll(viewer: Viewer): void {
-  viewer.scene.traverse((object) => (object.visible = true));
+  viewer.models.forEach((model) => model.showAllObjects());
 
   viewer.update();
   viewer.emitEvent({ type: "showall" });

package/src/Viewer/components/BackgroundComponent.ts

@@ -47,5 +47,6 @@ export class BackgroundComponent implements IComponent {
 
   syncOptions = () => {
     this.backgroundColor.setHex(0xffffff);
+    this.viewer.renderer.setClearColor(this.backgroundColor);
   };
 }

package/src/Viewer/components/ExtentsComponent.ts

@@ -34,8 +34,9 @@ export class ExtentsComponent implements IComponent {
     this.viewer.addEventListener("databasechunk", this.syncExtents);
     this.viewer.addEventListener("clear", this.syncExtents);
     this.viewer.on("explode", this.syncExtents);
-    this.viewer.on("isolate", this.syncExtents);
     this.viewer.on("hide", this.syncExtents);
+    this.viewer.on("isolate", this.syncExtents);
+    this.viewer.on("show", this.syncExtents);
     this.viewer.on("showall", this.syncExtents);
   }
 
@@ -43,14 +44,15 @@ export class ExtentsComponent implements IComponent {
     this.viewer.removeEventListener("databasechunk", this.syncExtents);
     this.viewer.removeEventListener("clear", this.syncExtents);
     this.viewer.off("explode", this.syncExtents);
-    this.viewer.off("isolate", this.syncExtents);
     this.viewer.off("hide", this.syncExtents);
+    this.viewer.off("isolate", this.syncExtents);
+    this.viewer.off("show", this.syncExtents);
     this.viewer.off("showall", this.syncExtents);
   }
 
   syncExtents = () => {
     const extents = new Box3();
-    this.viewer.scene.traverseVisible((object) => !object.children.length && extents.expandByObject(object));
+    this.viewer.models.forEach((model) => model.getExtents(extents));
 
     this.viewer.extents.copy(extents);
   };

package/src/Viewer/components/HighlighterComponent.ts

@@ -21,7 +21,17 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Color, EdgesGeometry, LineBasicMaterial, MeshBasicMaterial, Vector2 } from "three";
+import {
+  Color,
+  EdgesGeometry,
+  LineBasicMaterial,
+  MeshBasicMaterial,
+  Object3D,
+  RGBAFormat,
+  UnsignedByteType,
+  Vector2,
+  WebGLRenderTarget,
+} 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";
@@ -32,6 +42,7 @@ import { HighlighterUtils } from "./HighlighterUtils";
 
 export class HighlighterComponent implements IComponent {
   protected viewer: Viewer;
+  public renderTarget: WebGLRenderTarget;
   public highlightMaterial: MeshBasicMaterial;
   public outlineMaterial: LineMaterial;
   public highlightLineMaterial: LineBasicMaterial;
@@ -40,6 +51,17 @@ export class HighlighterComponent implements IComponent {
   constructor(viewer: Viewer) {
     this.viewer = viewer;
 
+    const gl2 = viewer.canvas.getContext("webgl2");
+    if (gl2) {
+      const size = viewer.renderer.getSize(new Vector2());
+      this.renderTarget = new WebGLRenderTarget(size.x, size.y, {
+        format: RGBAFormat,
+        stencilBuffer: false,
+        samples: 4,
+        type: UnsignedByteType,
+      });
+    }
+
     this.viewer.addEventListener("databasechunk", this.geometryEnd);
     this.viewer.addEventListener("optionschange", this.optionsChange);
     this.viewer.addEventListener("resize", this.viewerResize);
@@ -53,54 +75,64 @@ export class HighlighterComponent implements IComponent {
     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;
-    }
+  highlight(objects: Object3D | Object3D[]) {
+    if (!Array.isArray(objects)) objects = [objects];
+    if (!objects.length) return;
+
+    objects.forEach((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;
+  unhighlight(objects: Object3D | Object3D[]) {
+    if (!Array.isArray(objects)) objects = [objects];
+    if (!objects.length) return;
 
-    object.isHighlighted = false;
-    object.material = object.userData.originalMaterial;
-    object.userData.highlightwireframe.removeFromParent();
+    objects.forEach((object: any) => {
+      if (!object.isHighlighted) return;
 
-    delete object.userData.originalMaterial;
-    delete object.userData.highlightwireframe;
+      object.isHighlighted = false;
+      object.material = object.userData.originalMaterial;
+      object.userData.highlightwireframe.removeFromParent();
+
+      delete object.userData.originalMaterial;
+      delete object.userData.highlightwireframe;
+    });
   }
 
   geometryEnd = () => {
@@ -152,8 +184,7 @@ export class HighlighterComponent implements IComponent {
   };
 
   viewerResize(event: ResizeEvent) {
-    if (!this.outlineMaterial) return;
-
-    this.outlineMaterial.resolution.set(event.width, event.height);
+    this.renderTarget?.setSize(event.width, event.height);
+    this.outlineMaterial?.resolution.set(event.width, event.height);
   }
 }

package/src/Viewer/components/SelectionComponent.ts

@@ -23,9 +23,10 @@
 
 import { Intersection, Object3D, Raycaster, Vector2 } from "three";
 
-import { IComponent } from "@inweb/viewer-core";
-import { Viewer } from "../Viewer";
-import { HighlighterComponent } from "./HighlighterComponent";
+import type { IComponent } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+import type { IModelImpl } from "../model";
+import type { HighlighterComponent } from "./HighlighterComponent";
 
 export class SelectionComponent implements IComponent {
   protected viewer: Viewer;
@@ -61,12 +62,26 @@ export class SelectionComponent implements IComponent {
     if (!event.isPrimary) return;
 
     const upPosition = this.getMousePosition(event, new Vector2());
-    if (this.downPosition.distanceTo(upPosition) !== 0) return;
+    if (upPosition.distanceTo(this.downPosition) !== 0) return;
 
-    const intersects = this.getPointerIntersects(upPosition);
+    let intersections = [];
+    this.viewer.models.forEach((model) => {
+      const objects = model.getVisibleObjects();
+      const intersects = this.getPointerIntersects(upPosition, objects);
+      intersections.push(...intersects.map((x) => ({ ...x, model })));
+    });
+    intersections = intersections.sort((a, b) => a.distance - b.distance);
+
+    if (!event.shiftKey) this.clearSelection();
 
-    this.clearSelection();
-    if (intersects.length > 0) this.select(intersects[0].object);
+    if (intersections.length > 0) {
+      const model = intersections[0].model;
+      const handles = model.getHandlesByObjects(intersections[0].object);
+      const objects = model.getObjectsByHandles(handles);
+
+      if (!event.shiftKey) this.select(objects, model);
+      else this.toggleSelection(objects, model);
+    }
 
     this.viewer.update();
     this.viewer.emitEvent({ type: "select", data: undefined, handles: this.viewer.getSelected() });
@@ -82,7 +97,7 @@ export class SelectionComponent implements IComponent {
     return target.set(event.clientX, event.clientY);
   }
 
-  getPointerIntersects(mouse: Vector2): Array<Intersection<Object3D>> {
+  getPointerIntersects(mouse: Vector2, objects: Object3D[]): Array<Intersection<Object3D>> {
     const rect = this.viewer.canvas.getBoundingClientRect();
     const x = ((mouse.x - rect.left) / rect.width) * 2 - 1;
     const y = (-(mouse.y - rect.top) / rect.height) * 2 + 1;
@@ -90,9 +105,6 @@ export class SelectionComponent implements IComponent {
     const coords = new Vector2(x, y);
     this.raycaster.setFromCamera(coords, this.viewer.camera);
 
-    const objects = [];
-    this.viewer.scene.traverseVisible((child) => objects.push(child));
-
     this.raycaster.params = this.raycaster.params = {
       Mesh: {},
       Line: { threshold: 0.25 },
@@ -105,24 +117,58 @@ export class SelectionComponent implements IComponent {
     return this.raycaster.intersectObjects(objects, false);
   }
 
-  select(object: any) {
-    if (object.isSelected) return;
+  select(objects: Object3D | Object3D[], model?: IModelImpl) {
+    if (!model) {
+      this.viewer.models.forEach((model) => this.select(objects, model));
+      return;
+    }
+
+    if (!Array.isArray(objects)) objects = [objects];
+    if (!objects.length) return;
+
+    model.showObjects(objects);
+    model.showOriginalObjects(objects);
+    this.highlighter.highlight(objects);
+
+    objects.forEach((object: any) => this.viewer.selected.push(object));
+    objects.forEach((object: any) => (object.isSelected = true));
+  }
+
+  deselect(objects: Object3D | Object3D[], model?: IModelImpl) {
+    if (!model) {
+      this.viewer.models.forEach((model) => this.select(objects, model));
+      return;
+    }
+
+    if (!Array.isArray(objects)) objects = [objects];
+    if (!objects.length) return;
+
+    this.highlighter.unhighlight(objects);
+    model.hideOriginalObjects(objects);
+
+    this.viewer.selected = this.viewer.selected.filter((x) => !objects.includes(x));
+    objects.forEach((object: any) => (object.isSelected = false));
+  }
 
-    object.isSelected = true;
-    this.highlighter.highlight(object);
+  toggleSelection(objects: Object3D | Object3D[], model?: IModelImpl) {
+    if (!Array.isArray(objects)) objects = [objects];
+    if (!objects.length) return;
 
-    this.viewer.selected.push(object);
+    if ((objects[0] as any).isSelected) this.deselect(objects, model);
+    else this.select(objects, model);
   }
 
   clearSelection() {
-    this.viewer.selected.forEach((object: any) => {
-      object.isSelected = false;
-      this.highlighter.unhighlight(object);
-    });
+    if (!this.viewer.selected.length) return;
+
+    this.highlighter.unhighlight(this.viewer.selected);
+    this.viewer.models.forEach((model) => model.hideOriginalObjects(this.viewer.selected));
+
+    this.viewer.selected.forEach((object: any) => (object.isSelected = false));
     this.viewer.selected.length = 0;
   }
 
   initHighlighter = () => {
-    this.highlighter = this.viewer.getComponent("HighlighterComponent") as any;
+    this.highlighter = this.viewer.getComponent("HighlighterComponent") as HighlighterComponent;
   };
 }

package/src/Viewer/draggers/CuttingPlaneDragger.ts

@@ -62,13 +62,17 @@ export class CuttingPlaneDragger extends OrbitDragger {
     this.transform.addEventListener("dragging-changed", this.transformDrag);
     this.viewer.helpers.add(this.transform.getHelper());
 
-    this.viewer.on("explode", this.viewerExplode);
+    this.viewer.on("explode", this.updatePlaneSize);
+    this.viewer.on("show", this.updatePlaneSize);
+    this.viewer.on("showall", this.updatePlaneSize);
     this.viewer.canvas.addEventListener("dblclick", this.onDoubleClick, true);
     this.viewer.update();
   }
 
   override dispose() {
-    this.viewer.off("explode", this.viewerExplode);
+    this.viewer.off("explode", this.updatePlaneSize);
+    this.viewer.off("show", this.updatePlaneSize);
+    this.viewer.off("showAll", this.updatePlaneSize);
     this.viewer.canvas.removeEventListener("dblclick", this.onDoubleClick, true);
 
     this.transform.removeEventListener("change", this.transformChange);
@@ -97,7 +101,7 @@ export class CuttingPlaneDragger extends OrbitDragger {
     this.orbit.enabled = !event.value;
   };
 
-  viewerExplode = () => {
+  updatePlaneSize = () => {
     this.planeHelper.size = this.viewer.extents.getSize(new Vector3()).length();
     this.viewer.update();
   };

package/src/Viewer/draggers/MeasureLineDragger.ts

@@ -54,6 +54,7 @@ export class MeasureLineDragger extends OrbitDragger {
     this.viewer.addEventListener("render", this.renderOverlay);
     this.viewer.addEventListener("hide", this.updateSnapper);
     this.viewer.addEventListener("isolate", this.updateSnapper);
+    this.viewer.addEventListener("show", this.updateSnapper);
     this.viewer.addEventListener("showall", this.updateSnapper);
   }
 
@@ -67,6 +68,7 @@ export class MeasureLineDragger extends OrbitDragger {
     this.viewer.removeEventListener("render", this.renderOverlay);
     this.viewer.removeEventListener("hide", this.updateSnapper);
     this.viewer.removeEventListener("isolate", this.updateSnapper);
+    this.viewer.removeEventListener("show", this.updateSnapper);
     this.viewer.removeEventListener("showall", this.updateSnapper);
 
     this.overlay.detach();