@inweb/viewer-three 27.4.7 → 27.6.0

package/src/Viewer/components/SectionsComponent.ts

@@ -0,0 +1,119 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2026, 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
+// private 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-2026 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 { IComponent, RGB, ResizeEvent } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+import { SectionsHelper } from "../helpers/SectionsHelper.js";
+import { Object3D } from "three";
+
+export class SectionsComponent implements IComponent {
+  private viewer: Viewer;
+  private sectionsHelper: SectionsHelper;
+  private updateTimerId = 0;
+  private updateDelay = 250;
+
+  constructor(viewer: Viewer) {
+    this.sectionsHelper = new SectionsHelper();
+
+    this.viewer = viewer;
+    this.viewer.addEventListener("initialize", this.syncHelper);
+    this.viewer.addEventListener("databasechunk", this.syncHelper);
+    this.viewer.addEventListener("drawviewpoint", this.syncHelper);
+    this.viewer.addEventListener("changecuttingplanes", this.syncSections);
+    this.viewer.addEventListener("explode", this.syncSections);
+    this.viewer.addEventListener("hide", this.syncSections);
+    this.viewer.addEventListener("isolate", this.syncSections);
+    this.viewer.addEventListener("show", this.syncSections);
+    this.viewer.addEventListener("showall", this.syncSections);
+    this.viewer.addEventListener("resize", this.viewerResize);
+    this.viewer.addEventListener("optionschange", this.syncOptions);
+
+    this.syncOptions();
+  }
+
+  dispose() {
+    clearTimeout(this.updateTimerId);
+
+    this.sectionsHelper.removeFromParent();
+    this.sectionsHelper.dispose();
+
+    this.viewer.removeEventListener("initialize", this.syncHelper);
+    this.viewer.removeEventListener("databasechunk", this.syncHelper);
+    this.viewer.removeEventListener("drawviewpoint", this.syncHelper);
+    this.viewer.removeEventListener("changecuttingplanes", this.syncSections);
+    this.viewer.removeEventListener("explode", this.syncSections);
+    this.viewer.removeEventListener("hide", this.syncSections);
+    this.viewer.removeEventListener("isolate", this.syncSections);
+    this.viewer.removeEventListener("show", this.syncSections);
+    this.viewer.removeEventListener("showall", this.syncSections);
+    this.viewer.removeEventListener("resize", this.viewerResize);
+    this.viewer.removeEventListener("optionschange", this.syncOptions);
+  }
+
+  syncOptions = () => {
+    function rgbToHex(c: any): string {
+      const hex = (v = 0) => v.toString(16).padStart(2, "0");
+      return "#" + hex(c.r) + hex(c.g) + hex(c.b);
+    }
+
+    const options = this.viewer.options;
+    const flags = this.sectionsHelper.flags;
+
+    flags.fillEnabled = options.enableSectionFill;
+    flags.fillColor = rgbToHex(options.sectionFillColor);
+    flags.useObjFillColor = options.sectionUseObjectColor;
+    flags.hatchEnabled = options.enableSectionHatch;
+    flags.hatchColor = rgbToHex(options.sectionHatchColor);
+    flags.hatchScale = options.sectionHatchScale;
+    flags.outlineEnabled = options.enableSectionOutline;
+    flags.outlineColor = rgbToHex(options.sectionOutlineColor);
+    flags.outlineWidth = options.sectionOutlineWidth;
+
+    this.syncSections();
+  };
+
+  syncHelper = () => {
+    this.sectionsHelper.removeFromParent();
+    this.viewer.helpers.add(this.sectionsHelper);
+  };
+
+  syncSections = () => {
+    this.sectionsHelper.visible = false;
+    clearTimeout(this.updateTimerId);
+    this.updateTimerId = window.setTimeout(this.updateSections, this.updateDelay);
+  };
+
+  viewerResize = (event: ResizeEvent) => {
+    this.sectionsHelper.setSize(event.width, event.height);
+  };
+
+  updateSections = () => {
+    const objects: Object3D[][] = [];
+    this.viewer.models.forEach((model) => objects.push(model.getVisibleObjects()));
+    const objects2 = objects.flat();
+
+    this.sectionsHelper.update(objects2, this.viewer.extents, this.viewer.clippingPlanes);
+    this.sectionsHelper.visible = true;
+    this.viewer.update();
+  };
+}

package/src/Viewer/components/SelectionComponent.ts

@@ -21,7 +21,7 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Object3D, Vector2, Vector3 } from "three";
+import { Intersection, Object3D, Vector2, Vector3 } from "three";
 
 import type { IComponent } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
@@ -65,10 +65,12 @@ export class SelectionComponent implements IComponent {
 
     const extentsSize = this.viewer.extents.getSize(new Vector3()).length() || 1;
 
-    const snapper = new Snapper(this.viewer.camera, this.viewer.renderer, this.viewer.canvas);
+    const snapper = new Snapper(this.viewer.camera, this.viewer.clippingPlanes, this.viewer.canvas);
     snapper.threshold = extentsSize / 10000;
 
-    let intersections = [];
+    type Intersection2 = Intersection<Object3D> & { model: IModelImpl };
+
+    let intersections: Intersection2[] = [];
     this.viewer.models.forEach((model) => {
       const objects = model.getVisibleObjects();
       const intersects = snapper.getPointerIntersects(upPosition, objects);

package/src/Viewer/components/WCSHelperComponent.ts

@@ -26,27 +26,29 @@ import type { Viewer } from "../Viewer";
 import { WCSHelper } from "../helpers/WCSHelper";
 
 export class WCSHelperComponent implements IComponent {
-  private wcsHelper: WCSHelper;
   private viewer: Viewer;
+  private wcsHelper: WCSHelper;
 
   constructor(viewer: Viewer) {
     this.wcsHelper = new WCSHelper(viewer.camera);
+
     this.viewer = viewer;
-    this.viewer.addEventListener("databasechunk", this.geometryEnd);
-    this.viewer.addEventListener("drawviewpoint", this.geometryEnd);
+    this.viewer.addEventListener("databasechunk", this.syncHelper);
+    this.viewer.addEventListener("drawviewpoint", this.syncHelper);
     this.viewer.addEventListener("render", this.viewerRender);
     this.viewer.addEventListener("changecameramode", this.updateHelperCamera);
   }
 
   dispose() {
-    this.viewer.removeEventListener("databasechunk", this.geometryEnd);
-    this.viewer.removeEventListener("drawviewpoint", this.geometryEnd);
+    this.viewer.removeEventListener("databasechunk", this.syncHelper);
+    this.viewer.removeEventListener("drawviewpoint", this.syncHelper);
     this.viewer.removeEventListener("render", this.viewerRender);
     this.viewer.removeEventListener("changecameramode", this.updateHelperCamera);
+
     this.wcsHelper.dispose();
   }
 
-  geometryEnd = () => {
+  syncHelper = () => {
     this.wcsHelper.dispose();
     this.wcsHelper = new WCSHelper(this.viewer.camera);
   };

package/src/Viewer/components/index.ts

@@ -33,6 +33,8 @@ import { CanvasRemoveComponent } from "./CanvasRemoveComponent";
 import { RenderLoopComponent } from "./RenderLoopComponent";
 import { HighlighterComponent } from "./HighlighterComponent";
 import { SelectionComponent } from "./SelectionComponent";
+import { ClippingPlaneComponent } from "./ClippingPlaneComponent";
+import { SectionsComponent } from "./SectionsComponent";
 import { WCSHelperComponent } from "./WCSHelperComponent";
 import { ResetComponent } from "./ResetComponent";
 
@@ -88,5 +90,7 @@ components.registerComponent("CanvasRemoveComponent", (viewer) => new CanvasRemo
 components.registerComponent("RenderLoopComponent", (viewer) => new RenderLoopComponent(viewer));
 components.registerComponent("HighlighterComponent", (viewer) => new HighlighterComponent(viewer));
 components.registerComponent("SelectionComponent", (viewer) => new SelectionComponent(viewer));
+components.registerComponent("ClippingPlaneComponent", (viewer) => new ClippingPlaneComponent(viewer));
+components.registerComponent("SectionsComponent", (viewer) => new SectionsComponent(viewer));
 components.registerComponent("WCSHelperComponent", (viewer) => new WCSHelperComponent(viewer));
 components.registerComponent("ResetComponent", (viewer) => new ResetComponent(viewer));

package/src/Viewer/draggers/CuttingPlaneDragger.ts

@@ -31,9 +31,8 @@ import { Snapper } from "../measurement/Snapper";
 import { OrbitDragger } from "./OrbitDragger";
 
 export class CuttingPlaneDragger extends OrbitDragger {
-  protected clippingPlanes: Plane[];
   protected helpers: PlaneHelper2[] = [];
-  protected activeHelper: PlaneHelper2 = null;
+  protected activeHelper: PlaneHelper2 | undefined = undefined;
   protected snapper: Snapper;
   protected downPosition: Vector2;
   protected position0: Vector3;
@@ -44,14 +43,11 @@ export class CuttingPlaneDragger extends OrbitDragger {
   constructor(viewer: Viewer) {
     super(viewer);
 
-    if (!viewer.renderer.clippingPlanes) viewer.renderer.clippingPlanes = [];
-
-    this.clippingPlanes = viewer.renderer.clippingPlanes;
-    this.clippingPlanes.forEach((plane) => this.addHelper(plane));
+    viewer.clippingPlanes.forEach((plane) => this.addHelper(plane));
 
     const extentsSize = viewer.extents.getSize(new Vector3()).length() || 1;
 
-    this.snapper = new Snapper(viewer.camera, viewer.renderer, viewer.canvas);
+    this.snapper = new Snapper(viewer.camera, viewer.clippingPlanes, viewer.canvas);
     this.snapper.threshold = extentsSize / 10000;
 
     this.downPosition = new Vector2();
@@ -64,7 +60,8 @@ export class CuttingPlaneDragger extends OrbitDragger {
     this.translate.showX = false;
     this.translate.showY = false;
     this.translate.showZ = true;
-    this.translate.addEventListener("change", this.transformChange);
+    this.translate.addEventListener("change", this.transformUpdate);
+    this.translate.addEventListener("objectChange", this.transformChange);
     this.translate.addEventListener("dragging-changed", this.translateDrag);
     this.viewer.helpers.add(this.translate.getHelper());
 
@@ -74,21 +71,26 @@ export class CuttingPlaneDragger extends OrbitDragger {
     this.rotate.showX = true;
     this.rotate.showY = true;
     this.rotate.showZ = false;
-    this.rotate.addEventListener("change", this.transformChange);
+    this.rotate.addEventListener("change", this.transformUpdate);
+    this.rotate.addEventListener("objectChange", this.transformChange);
     this.rotate.addEventListener("dragging-changed", this.rotateDrag);
     this.viewer.helpers.add(this.rotate.getHelper());
 
     this.setActiveHelper(this.helpers[this.helpers.length - 1]);
 
-    this.viewer.addEventListener("explode", this.updatePlaneSize);
-    this.viewer.addEventListener("show", this.updatePlaneSize);
-    this.viewer.addEventListener("showall", this.updatePlaneSize);
-    this.viewer.addEventListener("changecameramode", this.updateTransformCamera);
+    this.viewer.addEventListener("explode", this.syncHelpers);
+    this.viewer.addEventListener("hide", this.syncHelpers);
+    this.viewer.addEventListener("isolate", this.syncHelpers);
+    this.viewer.addEventListener("show", this.syncHelpers);
+    this.viewer.addEventListener("showall", this.syncHelpers);
     this.viewer.addEventListener("clearslices", this.clearHelpers);
+    this.viewer.addEventListener("changecameramode", this.updateTransformCamera);
+
     this.viewer.canvas.addEventListener("pointerdown", this.onPointerDown, true);
     this.viewer.canvas.addEventListener("pointerup", this.onPointerUp, true);
     this.viewer.canvas.addEventListener("pointercancel", this.onPointerCancel, true);
     this.viewer.canvas.addEventListener("dblclick", this.onDoubleClick, true);
+
     window.addEventListener("keydown", this.onKeyDown);
     window.addEventListener("keyup", this.onKeyUp);
 
@@ -96,25 +98,31 @@ export class CuttingPlaneDragger extends OrbitDragger {
   }
 
   override dispose() {
-    this.viewer.removeEventListener("explode", this.updatePlaneSize);
-    this.viewer.removeEventListener("show", this.updatePlaneSize);
-    this.viewer.removeEventListener("showall", this.updatePlaneSize);
-    this.viewer.removeEventListener("changecameramode", this.updateTransformCamera);
+    this.viewer.removeEventListener("explode", this.syncHelpers);
+    this.viewer.removeEventListener("hide", this.syncHelpers);
+    this.viewer.removeEventListener("isolate", this.syncHelpers);
+    this.viewer.removeEventListener("show", this.syncHelpers);
+    this.viewer.removeEventListener("showall", this.syncHelpers);
     this.viewer.removeEventListener("clearslices", this.clearHelpers);
+    this.viewer.removeEventListener("changecameramode", this.updateTransformCamera);
+
     this.viewer.canvas.removeEventListener("pointerdown", this.onPointerDown, true);
     this.viewer.canvas.removeEventListener("pointerup", this.onPointerUp, true);
     this.viewer.canvas.removeEventListener("pointercancel", this.onPointerCancel, true);
     this.viewer.canvas.removeEventListener("dblclick", this.onDoubleClick, true);
+
     window.removeEventListener("keydown", this.onKeyDown);
     window.removeEventListener("keyup", this.onKeyUp);
 
-    this.translate.removeEventListener("change", this.transformChange);
+    this.translate.removeEventListener("change", this.transformUpdate);
+    this.translate.removeEventListener("objectChange", this.transformChange);
     this.translate.removeEventListener("dragging-changed", this.translateDrag);
     this.translate.getHelper().removeFromParent();
     this.translate.detach();
     this.translate.dispose();
 
-    this.rotate.removeEventListener("change", this.transformChange);
+    this.rotate.removeEventListener("change", this.transformUpdate);
+    this.rotate.removeEventListener("objectChange", this.transformChange);
     this.rotate.removeEventListener("dragging-changed", this.rotateDrag);
     this.rotate.getHelper().removeFromParent();
     this.rotate.detach();
@@ -124,12 +132,16 @@ export class CuttingPlaneDragger extends OrbitDragger {
       helper.removeFromParent();
       helper.dispose();
     });
-    this.helpers = [];
-    this.activeHelper = null;
+    this.helpers.length = 0;
+    this.activeHelper = undefined;
 
     super.dispose();
   }
 
+  transformUpdate = () => {
+    this.viewer.update();
+  };
+
   transformChange = () => {
     if (!this.activeHelper) return;
 
@@ -137,6 +149,7 @@ export class CuttingPlaneDragger extends OrbitDragger {
     plane.normal.copy(new Vector3(0, 0, -1)).applyQuaternion(this.activeHelper.quaternion);
     plane.constant = -this.activeHelper.position.dot(plane.normal);
 
+    this.viewer.emitEvent({ type: "changecuttingplanes" });
     this.viewer.update();
 
     this.changed = true; // <- cancel context menu
@@ -152,16 +165,16 @@ export class CuttingPlaneDragger extends OrbitDragger {
     this.translate.enabled = !event.value;
   };
 
-  updatePlaneSize = () => {
+  syncHelpers = () => {
     const extentsSize = this.viewer.extents.getSize(new Vector3()).length() || 1;
-    this.helpers.forEach((planeHelper) => (planeHelper.size = extentsSize));
-    this.viewer.update();
-  };
+    const extentsCenter = this.viewer.extents.getCenter(new Vector3());
 
-  updateTransformCamera = () => {
-    this.translate.camera = this.viewer.camera;
-    this.rotate.camera = this.viewer.camera;
-    this.snapper.camera = this.viewer.camera;
+    this.helpers.forEach((planeHelper) => {
+      planeHelper.size = extentsSize;
+      planeHelper.position.copy(planeHelper.plane.projectPoint(extentsCenter, new Vector3()));
+    });
+
+    this.viewer.update();
   };
 
   clearHelpers = () => {
@@ -171,11 +184,17 @@ export class CuttingPlaneDragger extends OrbitDragger {
       helper.removeFromParent();
       helper.dispose();
     });
-    this.helpers = [];
+    this.helpers.length = 0;
 
     this.viewer.update();
   };
 
+  updateTransformCamera = () => {
+    this.translate.camera = this.viewer.camera;
+    this.rotate.camera = this.viewer.camera;
+    this.snapper.camera = this.viewer.camera;
+  };
+
   onKeyDown = (event: KeyboardEvent) => {
     if (event.key === "Shift") this.rotate.setRotationSnap(Math.PI / 4);
     if (event.key === "Delete" || event.key === "Backspace") this.deleteActivePlane();
@@ -209,7 +228,7 @@ export class CuttingPlaneDragger extends OrbitDragger {
     this.viewer.canvas.dispatchEvent(new PointerEvent("pointerup", event));
   };
 
-  onDoubleClick = (event: PointerEvent) => {
+  onDoubleClick = (event: MouseEvent) => {
     if (!this.activeHelper) return;
 
     const mousePosition = this.snapper.getMousePosition(event, new Vector2());
@@ -287,10 +306,12 @@ export class CuttingPlaneDragger extends OrbitDragger {
     const constant = -extentsCenter.dot(normal);
 
     const plane = new Plane(normal, constant);
-    this.clippingPlanes.push(plane);
+    this.viewer.clippingPlanes.push(plane);
 
     const helper = this.addHelper(plane);
     this.setActiveHelper(helper);
+
+    this.viewer.emitEvent({ type: "changecuttingplanes" });
   }
 
   addPlaneX() {
@@ -310,13 +331,15 @@ export class CuttingPlaneDragger extends OrbitDragger {
 
     const helper = this.activeHelper;
 
-    const index = this.clippingPlanes.indexOf(helper.plane);
-    if (index !== -1) this.clippingPlanes.splice(index, 1);
+    const index = this.viewer.clippingPlanes.indexOf(helper.plane);
+    if (index !== -1) this.viewer.clippingPlanes.splice(index, 1);
 
     this.helpers = this.helpers.filter((x) => x !== helper);
     helper.removeFromParent();
     helper.dispose();
 
     this.setActiveHelper(this.helpers[this.helpers.length - 1]);
+
+    this.viewer.emitEvent({ type: "changecuttingplanes" });
   }
 }

package/src/Viewer/draggers/MeasureLineDragger.ts

@@ -51,7 +51,7 @@ export class MeasureLineDragger extends OrbitDragger {
 
     const extentsSize = this.viewer.extents.getSize(new Vector3()).length() || 1;
 
-    this.snapper = new Snapper(viewer.camera, viewer.renderer, viewer.canvas);
+    this.snapper = new Snapper(viewer.camera, viewer.clippingPlanes, viewer.canvas);
     this.snapper.threshold = extentsSize / 10000;
 
     this.objects = [];

package/src/Viewer/draggers/OrbitDragger.ts

@@ -48,7 +48,7 @@ export class OrbitDragger implements IDragger {
     this.viewer.addEventListener("zoom", this.updateControls);
     this.viewer.addEventListener("drawviewpoint", this.updateControls);
     this.viewer.addEventListener("changecameramode", this.updateControlsCamera);
-    this.viewer.addEventListener("optionschange", this.optionsChange);
+    this.viewer.addEventListener("optionschange", this.updateZoomSpeed);
     this.viewer.addEventListener("contextmenu", this.stopContextMenu);
     this.updateControls();
     this.updateControlsCamera();
@@ -61,7 +61,7 @@ export class OrbitDragger implements IDragger {
     this.viewer.removeEventListener("zoom", this.updateControls);
     this.viewer.removeEventListener("drawviewpoint", this.updateControls);
     this.viewer.removeEventListener("changecameramode", this.updateControlsCamera);
-    this.viewer.removeEventListener("optionschange", this.optionsChange);
+    this.viewer.removeEventListener("optionschange", this.updateZoomSpeed);
     this.viewer.removeEventListener("contextmenu", this.stopContextMenu);
 
     this.orbit.removeEventListener("start", this.controlsStart);
@@ -81,7 +81,7 @@ export class OrbitDragger implements IDragger {
     this.orbit.update();
   };
 
-  optionsChange = ({ data: options }) => {
+  updateZoomSpeed = ({ data: options }) => {
     this.orbit.zoomSpeed = Math.abs(this.orbit.zoomSpeed) * (options.reverseZoomWheel ? -1 : 1);
   };