@inweb/viewer-visualize 27.4.6 → 27.5.0

package/lib/Viewer/Components/CameraComponent.d.ts

@@ -6,6 +6,6 @@ export declare class CameraComponent implements IComponent {
     dispose(): void;
     getCameraMode(view: any): CameraMode;
     switchCameraMode(mode: CameraMode): void;
-    optionsChange: () => void;
+    syncOptions: () => void;
     geometryEnd: () => void;
 }

package/lib/Viewer/Draggers/MeasureLineDragger/index.d.ts

@@ -23,6 +23,6 @@ export declare class MeasureLineDragger extends OdBaseDragger {
     end(): void;
     createNewMeasureIfNeed(): void;
     createMeasureLine(): MeasureLineItem;
-    optionsChange(event: any): void;
+    updateUnits(event: any): void;
     getKUnitByName(unitName: string): any;
 }

package/lib/Viewer/Viewer.d.ts

@@ -23,7 +23,6 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     private _crossOrigin;
     private _activeDragger;
     private _components;
-    private _updateDelay;
     private _renderNeeded;
     private _renderTime;
     private _enableAutoUpdate;
@@ -132,10 +131,11 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
      * - {@link UpdateEvent | update}
      * - {@link RenderEvent | render}
      *
-     * @param force - If `true` updates the viewer immidietly. Otherwise updates on next animation frame.
-     *   Default is `false`.
+     * @param force - If `true` updates the viewer immidietly. If a `number` is specified and more than the
+     *   given amount of milliseconds has elapsed since the last rendering, the update is performed
+     *   immediately as well. Otherwise updates on next animation frame. Default is `false`.
      */
-    update(force?: boolean): void;
+    update(force?: boolean | number): void;
     render(time?: DOMHighResTimeStamp): void;
     loadReferences(model: Model | File | Assembly): Promise<this>;
     applyModelTransformMatrix(model: Model | Assembly): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-visualize",
-  "version": "27.4.6",
+  "version": "27.5.0",
   "description": "JavaScript library for rendering CAD and BIM files in a browser using VisualizeJS",
   "homepage": "https://cloud.opendesign.com/docs/index.html",
   "license": "SEE LICENSE IN LICENSE",
@@ -29,10 +29,10 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~27.4.6",
-    "@inweb/eventemitter2": "~27.4.6",
-    "@inweb/markup": "~27.4.6",
-    "@inweb/viewer-core": "~27.4.6"
+    "@inweb/client": "~27.5.0",
+    "@inweb/eventemitter2": "~27.5.0",
+    "@inweb/markup": "~27.5.0",
+    "@inweb/viewer-core": "~27.5.0"
   },
   "visualizeJS": "https://public-fhemb7e3embacwec.z02.azurefd.net/libs/visualizejs/master/Visualize.js"
 }

package/src/Viewer/Commands/index.ts

@@ -106,18 +106,29 @@ commands.registerCommand("zoomToObjects", zoomToObjects);
 commands.registerCommand("zoomToSelected", zoomToSelected);
 commands.registerCommand("autoTransformAllModelsToCentralPoint", autoTransformAllModelsToCentralPoint);
 
-commands.registerCommand("k3DViewTop", (viewer) => setDefaultViewPosition(viewer, "k3DViewTop"));
-commands.registerCommand("k3DViewBottom", (viewer) => setDefaultViewPosition(viewer, "k3DViewBottom"));
-commands.registerCommand("k3DViewLeft", (viewer) => setDefaultViewPosition(viewer, "k3DViewLeft"));
-commands.registerCommand("k3DViewRight", (viewer) => setDefaultViewPosition(viewer, "k3DViewRight"));
-commands.registerCommand("k3DViewFront", (viewer) => setDefaultViewPosition(viewer, "k3DViewFront"));
-commands.registerCommand("k3DViewBack", (viewer) => setDefaultViewPosition(viewer, "k3DViewBack"));
-commands.registerCommand("k3DViewSE", (viewer) => setDefaultViewPosition(viewer, "k3DViewSE"));
-commands.registerCommand("k3DViewSW", (viewer) => setDefaultViewPosition(viewer, "k3DViewSW"));
-commands.registerCommand("k3DViewNE", (viewer) => setDefaultViewPosition(viewer, "k3DViewNE"));
-commands.registerCommand("k3DViewNW", (viewer) => setDefaultViewPosition(viewer, "k3DViewNW"));
+commands.registerCommand("top", (viewer) => setDefaultViewPosition(viewer, "k3DViewTop"));
+commands.registerCommand("bottom", (viewer) => setDefaultViewPosition(viewer, "k3DViewBottom"));
+commands.registerCommand("left", (viewer) => setDefaultViewPosition(viewer, "k3DViewLeft"));
+commands.registerCommand("right", (viewer) => setDefaultViewPosition(viewer, "k3DViewRight"));
+commands.registerCommand("front", (viewer) => setDefaultViewPosition(viewer, "k3DViewFront"));
+commands.registerCommand("back", (viewer) => setDefaultViewPosition(viewer, "k3DViewBack"));
+commands.registerCommand("se", (viewer) => setDefaultViewPosition(viewer, "k3DViewSE"));
+commands.registerCommand("sw", (viewer) => setDefaultViewPosition(viewer, "k3DViewSW"));
+commands.registerCommand("ne", (viewer) => setDefaultViewPosition(viewer, "k3DViewNE"));
+commands.registerCommand("nw", (viewer) => setDefaultViewPosition(viewer, "k3DViewNW"));
 
 commands.registerCommandAlias("clearMarkup", "clearOverlay");
 commands.registerCommandAlias("clearSelected", "unselect");
 commands.registerCommandAlias("getSnapshot", "createPreview");
 commands.registerCommandAlias("zoomToExtents", "zoomExtents");
+
+commands.registerCommandAlias("top", "k3DViewTop");
+commands.registerCommandAlias("bottom", "k3DViewBottom");
+commands.registerCommandAlias("left", "k3DViewLeft");
+commands.registerCommandAlias("right", "k3DViewRight");
+commands.registerCommandAlias("front", "k3DViewFront");
+commands.registerCommandAlias("back", "k3DViewBack");
+commands.registerCommandAlias("se", "k3DViewSE");
+commands.registerCommandAlias("sw", "k3DViewSW");
+commands.registerCommandAlias("ne", "k3DViewNE");
+commands.registerCommandAlias("nw", "k3DViewNW");

package/src/Viewer/Components/CameraComponent.ts

@@ -31,15 +31,15 @@ export class CameraComponent implements IComponent {
     this.viewer = viewer;
     this.viewer.addEventListener("databasechunk", this.geometryEnd);
     this.viewer.addEventListener("clear", this.geometryEnd);
-    this.viewer.addEventListener("optionschange", this.optionsChange);
-    this.viewer.addEventListener("initialize", this.optionsChange);
+    this.viewer.addEventListener("optionschange", this.syncOptions);
+    this.viewer.addEventListener("initialize", this.syncOptions);
   }
 
   dispose() {
     this.viewer.removeEventListener("databasechunk", this.geometryEnd);
     this.viewer.removeEventListener("clear", this.geometryEnd);
-    this.viewer.removeEventListener("optionschange", this.optionsChange);
-    this.viewer.removeEventListener("initialize", this.optionsChange);
+    this.viewer.removeEventListener("optionschange", this.syncOptions);
+    this.viewer.removeEventListener("initialize", this.syncOptions);
   }
 
   getCameraMode(view: any): CameraMode {
@@ -61,7 +61,7 @@ export class CameraComponent implements IComponent {
     activeView.delete();
   }
 
-  optionsChange = () => {
+  syncOptions = () => {
     this.switchCameraMode(this.viewer.options.cameraMode);
   };
 

package/src/Viewer/Draggers/MeasureLineDragger/index.ts

@@ -78,10 +78,10 @@ export class MeasureLineDragger extends OdBaseDragger {
     this.m_overlayElement.style.pointerEvents = "none";
     document.body.appendChild(this.m_overlayElement);
 
-    this.optionsChange = this.optionsChange.bind(this);
+    this.updateUnits = this.updateUnits.bind(this);
     this.updatePreview = this.updatePreview.bind(this);
 
-    this.subject.addEventListener("optionschange", this.optionsChange);
+    this.subject.addEventListener("optionschange", this.updateUnits);
     this.subject.addEventListener("render", this.updatePreview);
 
     this.resize();
@@ -92,7 +92,7 @@ export class MeasureLineDragger extends OdBaseDragger {
 
     this.m_overlayElement.remove();
 
-    this.subject.removeEventListener("optionschange", this.optionsChange);
+    this.subject.removeEventListener("optionschange", this.updateUnits);
     this.subject.removeEventListener("render", this.updatePreview);
   }
 
@@ -209,7 +209,7 @@ export class MeasureLineDragger extends OdBaseDragger {
     return item;
   }
 
-  optionsChange(event): void {
+  updateUnits(event): void {
     const options: IOptions = event.data;
     const toUnitName = options.rulerUnit ?? "Default";
     const toPrecision = options.rulerPrecision ?? "Default";

package/src/Viewer/Draggers/OdBaseCuttingPlaneDragger.ts

@@ -59,10 +59,9 @@ export class OdBaseCuttingPlaneDragger extends OdBaseDragger {
 
     avp.addCuttingPlane(plane);
     this.index = avp.numCuttingPlanes() - 1;
+    this.subject.syncOptions(); // <- sync cutting plane fill options
 
-    const { red, green, blue } = this.subject.options.cuttingPlaneFillColor;
-    avp.setEnableCuttingPlaneFill(true, red, green, blue);
-    avp.setCuttingPlaneFillPatternEnabled(true, this.m_module.CuttingPlaneFillStyle.kSlantRight, 0x0, 0x0, 0x0);
+    this.subject.emitEvent({ type: "changecuttingplanes" });
 
     this.m_model = this.getModel();
     this.createPreview();
@@ -115,6 +114,8 @@ export class OdBaseCuttingPlaneDragger extends OdBaseDragger {
       plane.set(this.toGePoint(this.m_center), this.m_normal);
       avp.updateCuttingPlane(this.index, plane);
 
+      this.subject.emitEvent({ type: "changecuttingplanes" });
+
       this.drawPreview();
 
       this.deleteAll([avp, plane, oldCenter, delta, oldLast]);
@@ -136,6 +137,8 @@ export class OdBaseCuttingPlaneDragger extends OdBaseDragger {
     plane.set(this.toGePoint(this.m_center), this.m_normal);
     avp.updateCuttingPlane(this.index, plane);
 
+    this.subject.emitEvent({ type: "changecuttingplanes" });
+
     this.deleteAll([avp, plane, this.m_last]);
 
     const device = this.getViewer().getActiveDevice();

package/src/Viewer/Draggers/OdCuttingPlaneZAxisDragger.ts

@@ -25,7 +25,7 @@ import { OdBaseCuttingPlaneDragger } from "./OdBaseCuttingPlaneDragger";
 
 export class OdCuttingPlaneZAxisDragger extends OdBaseCuttingPlaneDragger {
   override createNormal(): number[] {
-    return [0, 0, 1];
+    return [0, 0, -1];
   }
 
   override handleDelta(delta: Point3d): Point3d {

package/src/Viewer/Loaders/VSFXCloudPartialLoader.ts

@@ -90,7 +90,7 @@ export class VSFXCloudPartialLoader extends Loader {
         this.viewer.update(true);
       } else {
         this.viewer.emitEvent({ type: "geometrychunk", data: chunk, file: model.file, model });
-        this.viewer.update();
+        this.viewer.update(500);
       }
     };
 

package/src/Viewer/Loaders/VSFXCloudStreamingLoader.ts

@@ -88,7 +88,7 @@ export class VSFXCloudStreamingLoader extends Loader {
         this.viewer.update(true);
       } else {
         this.viewer.emitEvent({ type: "geometrychunk", data: chunk, file: model.file, model });
-        this.viewer.update();
+        this.viewer.update(500);
       }
     };
 

package/src/Viewer/Viewer.ts

@@ -85,7 +85,6 @@ export class Viewer
   private _activeDragger: IDragger | null;
   private _components: IComponent[];
 
-  private _updateDelay: number;
   private _renderNeeded: boolean;
   private _renderTime: DOMHighResTimeStamp;
   private _enableAutoUpdate: boolean;
@@ -131,7 +130,6 @@ export class Viewer
     this._activeDragger = null;
     this._components = [];
 
-    this._updateDelay = 1000;
     this._renderNeeded = false;
     this._renderTime = 0;
     this._enableAutoUpdate = params.enableAutoUpdate ?? true;
@@ -300,9 +298,12 @@ export class Viewer
     this.setActiveDragger();
 
     this._components.forEach((component: IComponent) => component.dispose());
-    this._components = [];
+    this._components.length = 0;
 
-    this._markup.dispose();
+    if (this._markup) {
+      this._markup.dispose();
+      this._markup = undefined;
+    }
 
     if (this.canvas) {
       this.canvasEvents.forEach((x) => this.canvas.removeEventListener(x, this.canvaseventlistener));
@@ -353,19 +354,20 @@ export class Viewer
    * - {@link UpdateEvent | update}
    * - {@link RenderEvent | render}
    *
-   * @param force - If `true` updates the viewer immidietly. Otherwise updates on next animation frame.
-   *   Default is `false`.
+   * @param force - If `true` updates the viewer immidietly. If a `number` is specified and more than the
+   *   given amount of milliseconds has elapsed since the last rendering, the update is performed
+   *   immediately as well. Otherwise updates on next animation frame. Default is `false`.
    */
-  update(force = false) {
+  update(force: boolean | number = false) {
     const time = performance.now();
-    force = force || time - this._renderTime >= this._updateDelay;
+    if (typeof force === "number" && time - this._renderTime >= force) force = true;
 
     if (this._enableAutoUpdate) {
       this._renderNeeded = true;
       if (force) this.render(time);
     }
 
-    this.emitEvent({ type: "update", force });
+    this.emitEvent({ type: "update", force: !!force });
   }
 
   // Internal render routines
@@ -577,10 +579,10 @@ export class Viewer
     this.clearSelected();
 
     this.loaders.forEach((loader) => loader.dispose());
-    this.loaders = [];
+    this.loaders.length = 0;
 
     this.models.forEach((model) => model.dispose());
-    this.models = [];
+    this.models.length = 0;
 
     visViewer.clear();
     visViewer.createLocalDatabase();
@@ -712,6 +714,23 @@ export class Viewer
       activeView.delete();
     }
 
+    // sync cutting plane fill options
+
+    view.setEnableCuttingPlaneFill(
+      options.enableSectionFill,
+      options.sectionFillColor.r,
+      options.sectionFillColor.g,
+      options.sectionFillColor.b
+    );
+
+    view.setCuttingPlaneFillPatternEnabled(
+      options.enableSectionHatch,
+      visLib.CuttingPlaneFillStyle.kSlantRight,
+      options.sectionHatchColor.r,
+      options.sectionHatchColor.g,
+      options.sectionHatchColor.b
+    );
+
     // sync highlighting options
 
     const params = options.enableCustomHighlight ? options : Options.defaults();
@@ -814,6 +833,7 @@ export class Viewer
     activeView.removeCuttingPlanes();
     activeView.delete();
 
+    this.emitEvent({ type: "changecuttingplanes" });
     this.emitEvent({ type: "clearslices" });
     this.update();
   }
@@ -973,6 +993,8 @@ export class Viewer
           activeView.addCuttingPlane(cuttingPlane);
           activeView.setEnableCuttingPlaneFill(true, 0x66, 0x66, 0x66);
         }
+
+        this.emitEvent({ type: "changecuttingplanes" });
       }
     };
 
@@ -985,8 +1007,8 @@ export class Viewer
     this.setActiveDragger();
     this.clearSlices();
     this.clearOverlay();
-
     this.clearSelected();
+
     this.showAll();
     this.explode();