@inweb/viewer-visualize 27.5.0 → 27.6.0

package/dist/viewer-visualize.js

@@ -159,8 +159,7 @@
             this.abortController = new AbortController();
         }
         dispose() {
-            this.abortController.abort();
-            this.abortController = undefined;
+            this.cancel();
         }
         isSupport(file, format) {
             return false;
@@ -179,10 +178,10 @@
         extractFileName(file) {
             const regex = /[^/\\?#:]+(?=\?|#|$)/;
             if (typeof file === "string")
-                return (file.match(regex) || [])[0];
+                return (file.match(regex) || [])[0] || "";
             else if (file instanceof globalThis.File)
-                return (file.name.match(regex) || [])[0];
-            return undefined;
+                return (file.name.match(regex) || [])[0] || "";
+            return "";
         }
     }
     class Loaders {
@@ -302,23 +301,36 @@
                 }
         }
         resetToDefaults(fields) {
+            const defaults = Options.defaults();
             if (fields !== undefined) {
-                const defaults = Options.defaults();
-                const resetData = fields.reduce((acc, field) => {
-                    acc[field] = defaults[field];
-                    return acc;
-                }, {});
-                this.data = { ...this.data, ...resetData };
+                const resetData = {};
+                for (const field of fields) {
+                    if (field in defaults)
+                        resetData[field] = defaults[field];
+                }
+                this.data = resetData;
             }
             else {
-                this.data = { ...this.data, ...Options.defaults() };
+                this.data = defaults;
+            }
+        }
+        setProperty(key, value = Options.defaults()[key]) {
+            if (this._data[key] !== value) {
+                this._data[key] = value;
+                this.change();
             }
         }
         get data() {
             return this._data;
         }
         set data(value) {
-            this._data = { ...Options.defaults(), ...this._data, ...value };
+            const defaults = Options.defaults();
+            const merged = { ...defaults, ...this._data, ...value };
+            for (const key of Object.keys(defaults)) {
+                if (merged[key] === undefined)
+                    merged[key] = defaults[key];
+            }
+            this._data = merged;
             if (this._data.enablePartialMode) {
                 this._data.enableStreamingMode = true;
                 this._data.sceneGraph = false;
@@ -335,84 +347,74 @@
             return this._data.showWCS;
         }
         set showWCS(value) {
-            this._data.showWCS = value;
-            this.change();
+            this.setProperty("showWCS", value);
         }
         get cameraAnimation() {
             return this._data.cameraAnimation;
         }
         set cameraAnimation(value) {
-            this._data.cameraAnimation = value;
-            this.change();
+            this.setProperty("cameraAnimation", value);
         }
         get antialiasing() {
             return this._data.antialiasing;
         }
         set antialiasing(value) {
-            this._data.antialiasing = value;
-            this.change();
+            this.setProperty("antialiasing", value);
         }
         get groundShadow() {
             return this._data.groundShadow;
         }
         set groundShadow(value) {
-            this._data.groundShadow = value;
-            this.change();
+            this.setProperty("groundShadow", value);
         }
         get shadows() {
             return this._data.shadows;
         }
         set shadows(value) {
-            this._data.shadows = value;
-            this.change();
+            this.setProperty("shadows", value);
         }
         get cameraAxisXSpeed() {
             return this._data.cameraAxisXSpeed;
         }
         set cameraAxisXSpeed(value) {
-            this._data.cameraAxisXSpeed = value;
-            this.change();
+            this.setProperty("cameraAxisXSpeed", value);
         }
         get cameraAxisYSpeed() {
             return this._data.cameraAxisYSpeed;
         }
         set cameraAxisYSpeed(value) {
-            this.cameraAxisYSpeed = value;
-            this.change();
+            this.setProperty("cameraAxisYSpeed", value);
         }
         get ambientOcclusion() {
             return this._data.ambientOcclusion;
         }
         set ambientOcclusion(value) {
-            this._data.ambientOcclusion = value;
-            this.change();
+            this.setProperty("ambientOcclusion", value);
         }
         get enableStreamingMode() {
             return this._data.enableStreamingMode;
         }
         set enableStreamingMode(value) {
-            this._data.enableStreamingMode = value;
-            if (!value)
-                this._data.enablePartialMode = false;
-            this.change();
+            this.setProperty("enableStreamingMode", value);
+            if (!value) {
+                this.setProperty("enablePartialMode", false);
+            }
         }
         get enablePartialMode() {
             return this._data.enablePartialMode;
         }
         set enablePartialMode(value) {
-            this._data.enablePartialMode = value;
+            this.setProperty("enablePartialMode", value);
             if (value) {
-                this._data.enableStreamingMode = true;
-                this._data.sceneGraph = false;
+                this.setProperty("enableStreamingMode", true);
+                this.setProperty("sceneGraph", false);
             }
-            this.change();
         }
         get memoryLimit() {
             return this._data.memoryLimit;
         }
         set memoryLimit(value) {
-            this._data.memoryLimit = value;
-            this.change();
+            this.setProperty("memoryLimit", value);
         }
         get cuttingPlaneFillColor() {
             console.warn("Options.cuttingPlaneFillColor has been deprecated since 27.5 and will be removed in a future release, use sectionFillColor instead");
@@ -424,189 +426,176 @@
         }
         set 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 = {
+            this.setProperty("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();
+            this.setProperty("enableSectionFill", value);
         }
         get sectionFillColor() {
             return this._data.sectionFillColor;
         }
         set sectionFillColor(value) {
-            this._data.sectionFillColor = value;
-            this.change();
+            this.setProperty("sectionFillColor", value);
         }
         get sectionUseObjectColor() {
             return this._data.sectionUseObjectColor;
         }
         set sectionUseObjectColor(value) {
-            this._data.sectionUseObjectColor = value;
-            this.change();
+            this.setProperty("sectionUseObjectColor", value);
         }
         get enableSectionHatch() {
             return this._data.enableSectionHatch;
         }
         set enableSectionHatch(value) {
-            this._data.enableSectionHatch = value;
-            this.change();
+            this.setProperty("enableSectionHatch", value);
         }
         get sectionHatchColor() {
             return this._data.sectionHatchColor;
         }
         set sectionHatchColor(value) {
-            this._data.sectionHatchColor = value;
-            this.change();
+            this.setProperty("sectionHatchColor", value);
         }
         get sectionHatchScale() {
             return this._data.sectionHatchScale;
         }
         set sectionHatchScale(value) {
-            this._data.sectionHatchScale = value;
-            this.change();
+            this.setProperty("sectionHatchScale", value);
         }
         get enableSectionOutline() {
             return this._data.enableSectionOutline;
         }
         set enableSectionOutline(value) {
-            this._data.enableSectionOutline = value;
-            this.change();
+            this.setProperty("enableSectionOutline", value);
         }
         get sectionOutlineColor() {
             return this._data.sectionOutlineColor;
         }
         set sectionOutlineColor(value) {
-            this._data.sectionOutlineColor = value;
-            this.change();
+            this.setProperty("sectionOutlineColor", value);
         }
         get sectionOutlineWidth() {
             return this._data.sectionOutlineWidth;
         }
         set sectionOutlineWidth(value) {
-            this._data.sectionOutlineWidth = value;
-            this.change();
+            this.setProperty("sectionOutlineWidth", value);
         }
         get edgesColor() {
             return this._data.edgesColor;
         }
         set edgesColor(value) {
-            this._data.edgesColor = value;
-            this.change();
+            this.setProperty("edgesColor", value);
         }
         get facesColor() {
             return this._data.facesColor;
         }
         set facesColor(value) {
-            this._data.facesColor = value;
-            this.change();
+            this.setProperty("facesColor", value);
         }
         get edgesVisibility() {
             return this._data.edgesVisibility;
         }
         set edgesVisibility(value) {
-            this._data.edgesVisibility = value;
-            this.change();
+            this.setProperty("edgesVisibility", value);
         }
         get edgesOverlap() {
             return this._data.edgesOverlap;
         }
         set edgesOverlap(value) {
-            this._data.edgesOverlap = value;
-            this.change();
+            this.setProperty("edgesOverlap", value);
         }
         get facesOverlap() {
             return this._data.facesOverlap;
         }
         set facesOverlap(value) {
-            this._data.facesOverlap = value;
-            this.change();
+            this.setProperty("facesOverlap", value);
         }
         get facesTransparancy() {
             return this._data.facesTransparancy;
         }
         set facesTransparancy(value) {
-            this._data.facesTransparancy = value;
-            this.change();
+            this.setProperty("facesTransparancy", value);
         }
         get enableCustomHighlight() {
             return this._data.enableCustomHighlight;
         }
         set enableCustomHighlight(value) {
-            this._data.enableCustomHighlight = value;
-            this.change();
+            this.setProperty("enableCustomHighlight", value);
         }
         get sceneGraph() {
             return this._data.sceneGraph;
         }
         set sceneGraph(value) {
-            this._data.sceneGraph = value;
-            if (value)
-                this._data.enablePartialMode = false;
-            this.change();
+            this.setProperty("sceneGraph", value);
+            if (value) {
+                this.setProperty("enablePartialMode", false);
+            }
         }
         get edgeModel() {
             return Boolean(this._data.edgeModel);
         }
         set edgeModel(value) {
-            this._data.edgeModel = Boolean(value);
-            this.change();
+            this.setProperty("edgeModel", value);
         }
         get reverseZoomWheel() {
             return this._data.reverseZoomWheel;
         }
         set reverseZoomWheel(value) {
-            this._data.reverseZoomWheel = !!value;
-            this.change();
+            this.setProperty("reverseZoomWheel", value);
         }
         get enableZoomWheel() {
             return this._data.enableZoomWheel;
         }
         set enableZoomWheel(value) {
-            this._data.enableZoomWheel = !!value;
-            this.change();
+            this.setProperty("enableZoomWheel", value);
         }
         get enableGestures() {
             return this._data.enableGestures;
         }
         set enableGestures(value) {
-            this._data.enableGestures = !!value;
-            this.change();
+            this.setProperty("enableGestures", value);
         }
         get geometryType() {
             return this._data.geometryType;
         }
         set geometryType(value) {
-            this._data.geometryType = value;
-            this.change();
+            this.setProperty("geometryType", value);
         }
         get rulerUnit() {
             return this._data.rulerUnit;
         }
         set rulerUnit(value) {
-            this._data.rulerUnit = value;
-            this.change();
+            this.setProperty("rulerUnit", value);
         }
         get rulerPrecision() {
             return this._data.rulerPrecision;
         }
         set rulerPrecision(value) {
-            this._data.rulerPrecision = value;
-            this.change();
+            this.setProperty("rulerPrecision", value);
         }
         get cameraMode() {
             return this._data.cameraMode || "perspective";
         }
         set cameraMode(value) {
-            this._data.cameraMode = value;
-            this.change();
+            this.setProperty("cameraMode", value);
+        }
+        get snapshotMimeType() {
+            return this._data.snapshotMimeType;
+        }
+        set snapshotMimeType(value) {
+            this.setProperty("snapshotMimeType", value);
+        }
+        get snapshotQuality() {
+            return this._data.snapshotQuality;
+        }
+        set snapshotQuality(value) {
+            this.setProperty("snapshotQuality", value);
         }
     }
     const CanvasEvents = [
@@ -770,6 +759,7 @@
     class OdBaseDragger extends OdaGeAction {
         constructor(subject) {
             super(subject.visualizeJs);
+            this.name = "";
             this.beginInteractivity = () => {
                 const viewer = this.getViewer();
                 const view = viewer.activeView;
@@ -796,6 +786,8 @@
             this.needInputText = false;
             this.mouseDownPosition = { x: 0, y: 0 };
             this.autoSelect = false;
+            this.isDragging = false;
+            this.press = false;
             this.pointerdown = this.pointerdown.bind(this);
             this.pointerup = this.pointerup.bind(this);
             this.pointercancel = this.pointercancel.bind(this);
@@ -2981,16 +2973,16 @@
         constructor(subject) {
             super(subject);
             this.press = false;
+            this.drawPoints = [];
         }
         dispose() {
             super.dispose();
             this.end();
-            this.points = null;
-            this.drawPoints = null;
+            this.drawPoints.length = 0;
         }
         start(x, y) {
             const point = this.getViewer().screenToWorld(x, y);
-            this.drawPoints = [point[0], point[1], point[2]];
+            this.drawPoints.push(point[0], point[1], point[2]);
         }
         drag(x, y) {
             if (this.isDragging) {
@@ -3002,7 +2994,7 @@
         end() {
             if (this.entity) {
                 this.entity.delete();
-                this.drawPoints = null;
+                this.drawPoints.length = 0;
                 this.entity = null;
             }
         }
@@ -3698,7 +3690,6 @@
         }
         dispose() {
             this.mutationObserver.disconnect();
-            this.mutationObserver = undefined;
         }
     }
 
@@ -3724,7 +3715,6 @@
         }
         dispose() {
             this.zoomWheelDragger.dispose();
-            this.zoomWheelDragger = undefined;
         }
     }
 
@@ -3918,7 +3908,6 @@
         }
         dispose() {
             this.gestureManager.dispose();
-            this.gestureManager = undefined;
         }
     }
 
@@ -3981,6 +3970,9 @@
     components.registerComponent("ResetComponent", (viewer) => new ResetComponent(viewer));
 
     class ModelImpl {
+        constructor() {
+            this.id = "";
+        }
         dispose() { }
     }
 
@@ -3988,7 +3980,6 @@
         constructor() {
             this.requestHeader = {};
             this.withCredentials = false;
-            this.abortSignal = undefined;
         }
         setRequestHeader(requestHeader) {
             this.requestHeader = requestHeader;
@@ -4010,12 +4001,15 @@
                     .then((response) => {
                     if (!response.ok)
                         throw new Error(`Failed to fetch "${response.url}", status ${response.status}`);
+                    const body = response.body;
+                    if (!body)
+                        return response;
                     const contentLength = response.headers.get("X-File-Size") || response.headers.get("Content-Length");
                     const total = parseInt(contentLength || "", 10) || 0;
                     const lengthComputable = total > 0;
                     const stream = new ReadableStream({
                         async start(controller) {
-                            const reader = response.body.getReader();
+                            const reader = body.getReader();
                             let loaded = 0;
                             try {
                                 while (true) {
@@ -4044,7 +4038,7 @@
                     const reader = new FileReader();
                     reader.onload = () => resolve(reader.result);
                     reader.onerror = () => reject(reader.error);
-                    reader.onprogress = onProgress;
+                    reader.onprogress = onProgress || null;
                     reader.readAsArrayBuffer(new Blob([file]));
                 });
             }
@@ -4063,7 +4057,7 @@
             super();
             this.viewer = viewer;
         }
-        isSupport(file, format) {
+        isSupport(file, format = "") {
             return ((typeof file === "string" || file instanceof globalThis.File || file instanceof ArrayBuffer) &&
                 /vsf$/i.test(format));
         }
@@ -4158,7 +4152,7 @@
             super();
             this.viewer = viewer;
         }
-        isSupport(file, format) {
+        isSupport(file, format = "") {
             return ((typeof file === "string" || file instanceof globalThis.File || file instanceof ArrayBuffer) &&
                 /vsfx$/i.test(format));
         }
@@ -4518,7 +4512,7 @@
             const script = document.createElement("script");
             script.src = url;
             script.async = true;
-            script.crossOrigin = params.crossOrigin;
+            script.crossOrigin = params.crossOrigin || null;
             script.onload = () => resolve(script);
             script.onerror = () => {
                 script.remove();
@@ -17316,8 +17310,8 @@ js: import "konva/skia-backend";
             this.lineWidth = 4;
             this.lineType = "solid";
             this.fontSize = 34;
-            this.changeActiveDragger = (event) => {
-                const draggerName = event.data;
+            this.changeActiveDragger = ({ data }) => {
+                const draggerName = data || "";
                 this._markupContainer.className = this._container.className
                     .split(" ")
                     .filter((x) => !x.startsWith("oda-cursor-"))
@@ -17378,19 +17372,19 @@ js: import "konva/skia-backend";
             this._resizeObserver = new ResizeObserver(this.resizeContainer);
             this._resizeObserver.observe(container);
             if (this._viewer) {
-                this._viewer.addEventListener("changeactivedragger", this.changeActiveDragger);
-                this._viewer.addEventListener("pan", this.pan);
-                this._viewer.addEventListener("zoomat", this.zoomAt);
-                this._viewer.addEventListener("changecameramode", this.changeCameraMode);
+                this._viewer.on("changeactivedragger", this.changeActiveDragger);
+                this._viewer.on("pan", this.pan);
+                this._viewer.on("zoomat", this.zoomAt);
+                this._viewer.on("changecameramode", this.changeCameraMode);
             }
         }
         dispose() {
             var _a, _b;
             if (this._viewer) {
-                this._viewer.removeEventListener("changecameramode", this.changeCameraMode);
-                this._viewer.removeEventListener("zoomat", this.zoomAt);
-                this._viewer.removeEventListener("pan", this.pan);
-                this._viewer.removeEventListener("changeactivedragger", this.changeActiveDragger);
+                this._viewer.off("changecameramode", this.changeCameraMode);
+                this._viewer.off("zoomat", this.zoomAt);
+                this._viewer.off("pan", this.pan);
+                this._viewer.off("changeactivedragger", this.changeActiveDragger);
             }
             (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
             this._resizeObserver = undefined;
@@ -18153,6 +18147,7 @@ js: import "konva/skia-backend";
         constructor() {
             this._markupColor = { r: 255, g: 0, b: 0 };
             this.lineWidth = 4;
+            this.lineType = "solid";
             this.fontSize = 34;
         }
         initialize(container, containerEvents, viewer, worldTransformer) {
@@ -18361,6 +18356,7 @@ js: import "konva/skia-backend";
             this.info = new Info();
             this.canvasEvents = CANVAS_EVENTS.slice();
             this.canvaseventlistener = (event) => this.emit(event);
+            this._visualizeTimestamp = 0;
             this._activeDragger = null;
             this._components = [];
             this._renderNeeded = false;
@@ -18427,7 +18423,9 @@ js: import "konva/skia-backend";
             this.canvasEvents.forEach((x) => canvas.addEventListener(x, this.canvaseventlistener));
             this._markup.initialize(this.canvas, this.canvasEvents, this, this);
             for (const name of components.getComponents().keys()) {
-                this._components.push(components.createComponent(name, this));
+                const component = components.createComponent(name, this);
+                if (component)
+                    this._components.push(component);
             }
             this.syncOptions();
             this.syncOverlay();
@@ -18444,10 +18442,7 @@ js: import "konva/skia-backend";
             this.setActiveDragger();
             this._components.forEach((component) => component.dispose());
             this._components.length = 0;
-            if (this._markup) {
-                this._markup.dispose();
-                this._markup = undefined;
-            }
+            this._markup.dispose();
             if (this.canvas) {
                 this.canvasEvents.forEach((x) => this.canvas.removeEventListener(x, this.canvaseventlistener));
                 this.canvas = undefined;
@@ -18455,7 +18450,7 @@ js: import "konva/skia-backend";
             if (this._viewer)
                 this._viewer.clear();
             this._visualizeJs = undefined;
-            this._visualizeTimestamp = undefined;
+            this._visualizeTimestamp = 0;
             this._viewer = undefined;
             return this;
         }
@@ -18832,7 +18827,7 @@ js: import "konva/skia-backend";
             }
         }
         getComponent(name) {
-            return this._components.find((component) => component.name === name);
+            return this._components.find((component) => component.name === name) || null;
         }
         drawViewpoint(viewpoint) {
             var _a, _b;