@inweb/viewer-visualize 27.4.7 → 27.5.0

package/dist/viewer-visualize.js

@@ -235,6 +235,15 @@
             enablePartialMode: false,
             memoryLimit: 3294967296,
             cuttingPlaneFillColor: { red: 0xff, green: 0x98, blue: 0x00 },
+            enableSectionFill: true,
+            sectionFillColor: { r: 0xff, g: 0x98, b: 0x00 },
+            sectionUseObjectColor: false,
+            enableSectionHatch: true,
+            sectionHatchColor: { r: 0, g: 0, b: 0 },
+            sectionHatchScale: 8,
+            enableSectionOutline: true,
+            sectionOutlineColor: { r: 0, g: 0, b: 0 },
+            sectionOutlineWidth: 2,
             edgesColor: { r: 0xff, g: 0x98, b: 0x00 },
             facesColor: { r: 0xff, g: 0x98, b: 0x00 },
             edgesVisibility: true,
@@ -309,9 +318,17 @@
             return this._data;
         }
         set data(value) {
-            const enablePartialMode = value.enableStreamingMode ? value.enablePartialMode : false;
-            const sceneGraph = enablePartialMode ? false : value.sceneGraph;
-            this._data = { ...Options.defaults(), ...this._data, ...value, enablePartialMode, sceneGraph };
+            this._data = { ...Options.defaults(), ...this._data, ...value };
+            if (this._data.enablePartialMode) {
+                this._data.enableStreamingMode = true;
+                this._data.sceneGraph = false;
+            }
+            if (!value.sectionFillColor && value.cuttingPlaneFillColor)
+                this._data.sectionFillColor = {
+                    r: value.cuttingPlaneFillColor.red,
+                    g: value.cuttingPlaneFillColor.green,
+                    b: value.cuttingPlaneFillColor.blue,
+                };
             this.change();
         }
         get showWCS() {
@@ -398,10 +415,83 @@
             this.change();
         }
         get cuttingPlaneFillColor() {
-            return this._data.cuttingPlaneFillColor;
+            console.warn("Options.cuttingPlaneFillColor has been deprecated since 27.5 and will be removed in a future release, use sectionFillColor instead");
+            return {
+                red: this._data.sectionFillColor.r,
+                green: this._data.sectionFillColor.g,
+                blue: this._data.sectionFillColor.b,
+            };
         }
         set cuttingPlaneFillColor(value) {
-            this._data.cuttingPlaneFillColor = value;
+            console.warn("Options.cuttingPlaneFillColor has been deprecated since 27.5 and will be removed in a future release, use sectionFillColor instead");
+            this._data.sectionFillColor = {
+                r: value.red,
+                g: value.green,
+                b: value.blue,
+            };
+            this.change();
+        }
+        get enableSectionFill() {
+            return this._data.enableSectionFill;
+        }
+        set enableSectionFill(value) {
+            this._data.enableSectionFill = value;
+            this.change();
+        }
+        get sectionFillColor() {
+            return this._data.sectionFillColor;
+        }
+        set sectionFillColor(value) {
+            this._data.sectionFillColor = value;
+            this.change();
+        }
+        get sectionUseObjectColor() {
+            return this._data.sectionUseObjectColor;
+        }
+        set sectionUseObjectColor(value) {
+            this._data.sectionUseObjectColor = value;
+            this.change();
+        }
+        get enableSectionHatch() {
+            return this._data.enableSectionHatch;
+        }
+        set enableSectionHatch(value) {
+            this._data.enableSectionHatch = value;
+            this.change();
+        }
+        get sectionHatchColor() {
+            return this._data.sectionHatchColor;
+        }
+        set sectionHatchColor(value) {
+            this._data.sectionHatchColor = value;
+            this.change();
+        }
+        get sectionHatchScale() {
+            return this._data.sectionHatchScale;
+        }
+        set sectionHatchScale(value) {
+            this._data.sectionHatchScale = value;
+            this.change();
+        }
+        get enableSectionOutline() {
+            return this._data.enableSectionOutline;
+        }
+        set enableSectionOutline(value) {
+            this._data.enableSectionOutline = value;
+            this.change();
+        }
+        get sectionOutlineColor() {
+            return this._data.sectionOutlineColor;
+        }
+        set sectionOutlineColor(value) {
+            this._data.sectionOutlineColor = value;
+            this.change();
+        }
+        get sectionOutlineWidth() {
+            return this._data.sectionOutlineWidth;
+        }
+        set sectionOutlineWidth(value) {
+            this._data.sectionOutlineWidth = value;
             this.change();
         }
         get edgesColor() {
@@ -1209,16 +1299,16 @@
             this.m_overlayElement.style.zIndex = "1";
             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();
         }
         dispose() {
             super.dispose();
             this.m_overlayElement.remove();
-            this.subject.removeEventListener("optionschange", this.optionsChange);
+            this.subject.removeEventListener("optionschange", this.updateUnits);
             this.subject.removeEventListener("render", this.updatePreview);
         }
         updatePreview() {
@@ -1320,7 +1410,7 @@
             this.items.push(item);
             return item;
         }
-        optionsChange(event) {
+        updateUnits(event) {
             var _a, _b;
             const options = event.data;
             const toUnitName = (_a = options.rulerUnit) !== null && _a !== void 0 ? _a : "Default";
@@ -2103,9 +2193,8 @@
             plane.set(this.toGePoint(this.m_center), this.m_normal);
             avp.addCuttingPlane(plane);
             this.index = avp.numCuttingPlanes() - 1;
-            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.syncOptions();
+            this.subject.emitEvent({ type: "changecuttingplanes" });
             this.m_model = this.getModel();
             this.createPreview();
             this.deleteAll([ext, avp, plane]);
@@ -2145,6 +2234,7 @@
                 const plane = this.createPlane();
                 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]);
                 const device = this.getViewer().getActiveDevice();
@@ -2160,6 +2250,7 @@
             const plane = this.createPlane();
             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();
             device.invalidate(device.getSize());
@@ -2245,7 +2336,7 @@
 
     class OdCuttingPlaneZAxisDragger extends OdBaseCuttingPlaneDragger {
         createNormal() {
-            return [0, 0, 1];
+            return [0, 0, -1];
         }
         handleDelta(delta) {
             delta.x = 0.0;
@@ -3410,24 +3501,34 @@
     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");
 
     class CameraComponent {
         constructor(viewer) {
-            this.optionsChange = () => {
+            this.syncOptions = () => {
                 this.switchCameraMode(this.viewer.options.cameraMode);
             };
             this.geometryEnd = () => {
@@ -3440,14 +3541,14 @@
             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) {
             return view.perspective ? "perspective" : "orthographic";
@@ -4186,7 +4287,7 @@
                 }
                 else {
                     this.viewer.emitEvent({ type: "geometrychunk", data: chunk, file: model.file, model });
-                    this.viewer.update();
+                    this.viewer.update(500);
                 }
             };
             await model.downloadResource(model.database, chunkLoadHandler, this.abortController.signal);
@@ -4244,7 +4345,7 @@
                 }
                 else {
                     this.viewer.emitEvent({ type: "geometrychunk", data: chunk, file: model.file, model });
-                    this.viewer.update();
+                    this.viewer.update(500);
                 }
             };
             const downloadResourceRange = async (dataId, requestId, ranges) => {
@@ -18262,7 +18363,6 @@ js: import "konva/skia-backend";
             this.canvaseventlistener = (event) => this.emit(event);
             this._activeDragger = null;
             this._components = [];
-            this._updateDelay = 1000;
             this._renderNeeded = false;
             this._renderTime = 0;
             this._enableAutoUpdate = (_a = params.enableAutoUpdate) !== null && _a !== void 0 ? _a : true;
@@ -18287,7 +18387,7 @@ js: import "konva/skia-backend";
             return this._markup;
         }
         configure(params) {
-            this._visualizeJsUrl = params.visualizeJsUrl || "https://public-fhemb7e3embacwec.z02.azurefd.net/libs/visualizejs/27.4/Visualize.js";
+            this._visualizeJsUrl = params.visualizeJsUrl || "https://public-fhemb7e3embacwec.z02.azurefd.net/libs/visualizejs/master/Visualize.js";
             this._crossOrigin = params.crossOrigin;
             return this;
         }
@@ -18343,8 +18443,11 @@ js: import "konva/skia-backend";
             this.removeAllListeners();
             this.setActiveDragger();
             this._components.forEach((component) => component.dispose());
-            this._components = [];
-            this._markup.dispose();
+            this._components.length = 0;
+            if (this._markup) {
+                this._markup.dispose();
+                this._markup = undefined;
+            }
             if (this.canvas) {
                 this.canvasEvents.forEach((x) => this.canvas.removeEventListener(x, this.canvaseventlistener));
                 this.canvas = undefined;
@@ -18374,13 +18477,14 @@ js: import "konva/skia-backend";
         }
         update(force = 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 });
         }
         render(time) {
             if (!this.visualizeJs)
@@ -18494,9 +18598,9 @@ js: import "konva/skia-backend";
             this.clearOverlay();
             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();
             this.syncOptions();
@@ -18586,6 +18690,8 @@ js: import "konva/skia-backend";
                 visualStyleId.delete();
                 activeView.delete();
             }
+            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);
             const params = options.enableCustomHighlight ? options : Options.defaults();
             const { Entry, OdTvRGBColorDef } = visLib;
             const highlightStyleId = visViewer.findHighlightStyle("Web_Default");
@@ -18657,6 +18763,7 @@ js: import "konva/skia-backend";
             const activeView = visViewer.activeView;
             activeView.removeCuttingPlanes();
             activeView.delete();
+            this.emitEvent({ type: "changecuttingplanes" });
             this.emitEvent({ type: "clearslices" });
             this.update();
         }
@@ -18768,6 +18875,7 @@ js: import "konva/skia-backend";
                         activeView.addCuttingPlane(cuttingPlane);
                         activeView.setEnableCuttingPlaneFill(true, 0x66, 0x66, 0x66);
                     }
+                    this.emitEvent({ type: "changecuttingplanes" });
                 }
             };
             const setSelection = (selection) => {