@inweb/viewer-three 27.5.0 → 27.6.1

package/dist/viewer-three.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 {
@@ -264,21 +263,44 @@
             snapshotQuality: 0.25,
         };
     }
+    function isColorRGB(value) {
+        return (typeof value === "object" &&
+            value !== null &&
+            typeof value.r === "number" &&
+            typeof value.g === "number" &&
+            typeof value.b === "number");
+    }
+    function isLegacyRGB(value) {
+        return (typeof value === "object" &&
+            value !== null &&
+            typeof value.red === "number" &&
+            typeof value.green === "number" &&
+            typeof value.blue === "number");
+    }
     class Options {
         constructor(emitter) {
+            this._updateCount = 0;
             this._emitter = emitter;
-            this._data = defaultOptions();
+            this._data = Options.defaults();
+            this._defaults = Options.defaults();
             this.loadFromStorage();
         }
         static defaults() {
             return defaultOptions();
         }
         change() {
-            if (this._emitter !== undefined) {
+            if (this._emitter !== undefined && this._updateCount === 0) {
                 this.saveToStorage();
                 this._emitter.emit({ type: "optionschange", data: this });
             }
         }
+        beginUpdate() {
+            this._updateCount++;
+        }
+        endUpdate() {
+            this._updateCount--;
+            this.change();
+        }
         saveToStorage() {
             if (typeof window !== "undefined")
                 try {
@@ -292,321 +314,312 @@
             if (typeof window !== "undefined")
                 try {
                     const item = localStorage.getItem("od-client-settings");
-                    if (item) {
-                        const data = JSON.parse(item);
-                        this.data = { ...data };
-                    }
+                    if (item)
+                        this.data = JSON.parse(item);
                 }
                 catch (error) {
                     console.error("Cannot load client settings.", error);
                 }
         }
-        resetToDefaults(fields) {
-            if (fields !== undefined) {
-                const defaults = Options.defaults();
-                const resetData = fields.reduce((acc, field) => {
-                    acc[field] = defaults[field];
-                    return acc;
-                }, {});
-                this.data = { ...this.data, ...resetData };
+        resetToDefaults(fields, defaults = this._defaults) {
+            if (Array.isArray(fields)) {
+                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 = this._defaults[key], accept = this.isValidValue(key, value)) {
+            if (!accept) {
+                console.warn(`Options.${key}: Invalid value`, value);
+                return;
+            }
+            if (this._data[key] !== value) {
+                this._data[key] = value;
+                this.change();
+            }
+        }
+        isValidValue(key, value) {
+            return typeof value === typeof this._defaults[key];
+        }
         get data() {
             return this._data;
         }
         set data(value) {
-            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();
+            this.beginUpdate();
+            try {
+                for (const key of Object.keys(value)) {
+                    if (key in this._defaults)
+                        this[key] = value[key];
+                    else
+                        this._data[key] = value[key];
+                }
+                if ("enablePartialMode" in value) {
+                    this.enablePartialMode = value.enablePartialMode;
+                }
+                if ("sectionFillColor" in value) {
+                    this.sectionFillColor = value.sectionFillColor;
+                }
+            }
+            finally {
+                this.endUpdate();
+            }
         }
         get showWCS() {
             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, typeof value === "boolean" || typeof value === "string");
         }
         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);
+            this.setProperty("enablePartialMode", this.enablePartialMode && this.enableStreamingMode);
         }
         get enablePartialMode() {
             return this._data.enablePartialMode;
         }
         set enablePartialMode(value) {
-            this._data.enablePartialMode = value;
-            if (value) {
-                this._data.enableStreamingMode = true;
-                this._data.sceneGraph = false;
-            }
-            this.change();
+            this.setProperty("enablePartialMode", value);
+            this.setProperty("enableStreamingMode", this.enableStreamingMode || this.enablePartialMode);
+            this.setProperty("sceneGraph", this.sceneGraph && !this.enablePartialMode);
         }
         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");
-            return {
-                red: this._data.sectionFillColor.r,
-                green: this._data.sectionFillColor.g,
-                blue: this._data.sectionFillColor.b,
-            };
+            return this._data.cuttingPlaneFillColor;
         }
         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 = {
-                r: value.red,
-                g: value.green,
-                b: value.blue,
-            };
-            this.change();
+            if (this._updateCount === 0) {
+                console.warn("Options.cuttingPlaneFillColor has been deprecated since 27.5 and will be removed in a future release, use sectionFillColor instead");
+            }
+            this.setProperty("cuttingPlaneFillColor", value, isLegacyRGB(value));
+            this.setProperty("sectionFillColor", {
+                r: this._data.cuttingPlaneFillColor.red,
+                g: this._data.cuttingPlaneFillColor.green,
+                b: this._data.cuttingPlaneFillColor.blue,
+            }, true);
         }
         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, isColorRGB(value));
+            this.setProperty("cuttingPlaneFillColor", {
+                red: this._data.sectionFillColor.r,
+                green: this._data.sectionFillColor.g,
+                blue: this._data.sectionFillColor.b,
+            }, true);
         }
         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, isColorRGB(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, isColorRGB(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, isColorRGB(value));
         }
         get facesColor() {
             return this._data.facesColor;
         }
         set facesColor(value) {
-            this._data.facesColor = value;
-            this.change();
+            this.setProperty("facesColor", value, isColorRGB(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);
+            this.setProperty("enablePartialMode", this.enablePartialMode && !this.sceneGraph);
         }
         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, typeof value === "number" || value === "Default" || value === "Auto");
         }
         get cameraMode() {
-            return this._data.cameraMode || "perspective";
+            return this._data.cameraMode;
         }
         set cameraMode(value) {
-            this._data.cameraMode = value;
-            this.change();
+            this.setProperty("cameraMode", value, value === "perspective" || value === "orthographic");
+        }
+        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 = [
@@ -34508,7 +34521,7 @@ void main() {
             const object = intersections[0].object;
             const intersectionPoint = intersections[0].point;
             const localPoint = object.worldToLocal(intersectionPoint.clone());
-            let snapPoint;
+            let snapPoint = undefined;
             let snapDistance = this.getDetectRadius(intersectionPoint);
             const geometry = object.geometry;
             const positions = geometry.attributes.position.array;
@@ -36393,7 +36406,7 @@ void main() {
         }
         dispose() {
             this.viewer.removeEventListener("optionschange", this.syncOptions);
-            this.viewer.scene.background = undefined;
+            this.viewer.scene.background = null;
         }
     }
 
@@ -36469,7 +36482,7 @@ void main() {
             if (mode === this.getCameraMode(currentCamera))
                 return;
             const target = this.viewer.target.clone();
-            let camera;
+            let camera = null;
             if (currentCamera.isOrthographicCamera) {
                 const fov = currentCamera.userData.fov || 45;
                 const fieldHeight = (currentCamera.top - currentCamera.bottom) / currentCamera.zoom;
@@ -36760,7 +36773,6 @@ void main() {
         }
         dispose() {
             this.mutationObserver.disconnect();
-            this.mutationObserver = undefined;
         }
     }
 
@@ -38816,11 +38828,13 @@ void main() {
             canvas.width = 64;
             canvas.height = 64;
             const context = canvas.getContext("2d");
-            context.clearRect(0, 0, 64, 64);
-            context.font = "24px Arial";
-            context.textAlign = "center";
-            context.fillStyle = color.getStyle();
-            context.fillText(text, 32, 41);
+            if (context) {
+                context.clearRect(0, 0, 64, 64);
+                context.font = "24px Arial";
+                context.textAlign = "center";
+                context.fillStyle = color.getStyle();
+                context.fillText(text, 32, 41);
+            }
             const texture = new CanvasTexture(canvas);
             texture.colorSpace = SRGBColorSpace;
             return new SpriteMaterial({ map: texture, toneMapped: false });
@@ -38949,8 +38963,8 @@ void main() {
                 if (object.material)
                     disposeMaterials(object.material);
             }
-            this.handleToObjects = undefined;
-            this.originalObjects = undefined;
+            this.handleToObjects.clear();
+            this.originalObjects.clear();
             this.scene.traverse(disposeObject);
             this.scene.clear();
         }
@@ -39216,44 +39230,54 @@ void main() {
                 centersCache.set(handle, target.clone());
                 return target;
             };
-            function calcExplodeDepth(object, depth) {
-                let result = depth;
-                object.children.forEach((x) => {
-                    const objectDepth = calcExplodeDepth(x, depth + 1);
-                    if (result < objectDepth)
-                        result = objectDepth;
-                });
+            const calcObjectOffset = (object, target) => {
+                const parent = object.parent;
+                if (!parent || parent.userData.originalCenter === undefined)
+                    return target;
+                return target.subVectors(object.userData.originalCenter, parent.userData.originalCenter);
+            };
+            const calcObjectDepth = (object) => {
+                if (object.userData.depth !== undefined)
+                    return object.userData.depth;
+                const parent = object.parent;
+                const depth = parent && object !== explodeRoot ? calcObjectDepth(parent) + 1 : 0;
+                object.userData.depth = depth;
                 object.userData.originalPosition = object.position.clone();
                 object.userData.originalCenter = calcObjectCenter(object, new Vector3());
-                return result;
-            }
+                object.userData.originalOffset = calcObjectOffset(object, new Vector3());
+                return depth;
+            };
             const explodeScale = scale / 100;
             const explodeRoot = this.scene;
-            if (!explodeRoot.userData.explodeDepth) {
-                explodeRoot.userData.explodeDepth = calcExplodeDepth(explodeRoot, 1);
+            const explodeObjects = this.getObjects();
+            if (explodeRoot.userData.explodeDepth === undefined) {
+                let maxDepth = 0;
+                explodeObjects.forEach((object) => {
+                    const depth = calcObjectDepth(object);
+                    if (depth > maxDepth)
+                        maxDepth = depth;
+                });
+                explodeRoot.userData.explodeDepth = maxDepth;
             }
             const maxDepth = explodeRoot.userData.explodeDepth;
             const scaledExplodeDepth = explodeScale * maxDepth + 1;
             const explodeDepth = 0 | scaledExplodeDepth;
             const currentSegmentFraction = scaledExplodeDepth - explodeDepth;
-            function explodeObject(object, depth) {
+            const explodeObject = (object) => {
                 if (object.isCamera)
                     return;
-                if (object.userData.isHighlightWireframe)
-                    return;
                 object.position.copy(object.userData.originalPosition);
+                const depth = object.userData.depth;
                 if (depth > 0 && depth <= explodeDepth) {
                     let objectScale = explodeScale * coeff;
                     if (depth === explodeDepth)
                         objectScale *= currentSegmentFraction;
-                    const parentCenter = object.parent.userData.originalCenter;
-                    const objectCenter = object.userData.originalCenter;
-                    const localOffset = objectCenter.clone().sub(parentCenter).multiplyScalar(objectScale);
-                    object.position.add(localOffset);
+                    object.position.addScaledVector(object.userData.originalOffset, objectScale);
                 }
-                object.children.forEach((x) => explodeObject(x, depth + 1));
-            }
-            explodeObject(explodeRoot, 0);
+            };
+            explodeObjects.forEach((object) => {
+                explodeObject(object);
+            });
             this.scene.updateMatrixWorld();
             return this;
         }
@@ -39356,6 +39380,12 @@ void main() {
                 centersCache.set(handle, target.clone());
                 return target;
             };
+            const calcObjectOffset = (object, target) => {
+                const parent = object.parent;
+                if (!parent || parent.userData.originalCenter === undefined)
+                    return target;
+                return target.subVectors(object.userData.originalCenter, parent.userData.originalCenter);
+            };
             const calcObjectDepth = (object) => {
                 if (object.userData.depth !== undefined)
                     return object.userData.depth;
@@ -39364,13 +39394,15 @@ void main() {
                 object.userData.depth = depth;
                 object.userData.originalPosition = object.position.clone();
                 object.userData.originalCenter = calcObjectCenter(object, new Vector3());
+                object.userData.originalOffset = calcObjectOffset(object, new Vector3());
                 return depth;
             };
             const explodeScale = scale / 100;
             const explodeRoot = this.scene.children[0];
-            if (!explodeRoot.userData.explodeDepth) {
+            const explodeObjects = this.getObjects();
+            if (explodeRoot.userData.explodeDepth === undefined) {
                 let maxDepth = 0;
-                this.gltfLoader.originalObjects.forEach((object) => {
+                explodeObjects.forEach((object) => {
                     const depth = calcObjectDepth(object);
                     if (depth > maxDepth)
                         maxDepth = depth;
@@ -39382,29 +39414,26 @@ void main() {
             const explodeDepth = 0 | scaledExplodeDepth;
             const currentSegmentFraction = scaledExplodeDepth - explodeDepth;
             const offsetCache = new Map();
-            const calcObjectOffset = (object, target) => {
+            const calcExplodeOffset = (object, target) => {
                 if (offsetCache.has(object))
                     return target.copy(offsetCache.get(object));
                 const parent = object.parent;
                 if (parent && object !== explodeRoot)
-                    calcObjectOffset(parent, target);
+                    calcExplodeOffset(parent, target);
                 const depth = object.userData.depth;
                 if (depth > 0 && depth <= explodeDepth) {
                     let objectScale = explodeScale * coeff;
                     if (depth === explodeDepth)
                         objectScale *= currentSegmentFraction;
-                    const parentCenter = parent.userData.originalCenter;
-                    const objectCenter = object.userData.originalCenter;
-                    const localOffset = objectCenter.clone().sub(parentCenter).multiplyScalar(objectScale);
-                    target.add(localOffset);
+                    target.addScaledVector(object.userData.originalOffset, objectScale);
                 }
                 offsetCache.set(object, target.clone());
                 return target;
             };
             const transformMap = new Map();
-            this.gltfLoader.originalObjects.forEach((object) => {
-                const globalOffset = calcObjectOffset(object, new Vector3());
-                transformMap.set(object, new Matrix4().makeTranslation(globalOffset));
+            explodeObjects.forEach((object) => {
+                const offset = calcExplodeOffset(object, new Vector3());
+                transformMap.set(object, new Matrix4().makeTranslation(offset));
             });
             this.gltfLoader.applyObjectTransforms(transformMap);
             this.scene.updateMatrixWorld();
@@ -42763,10 +42792,10 @@ void main() {
                 }
                 offset += chunkLength;
             }
-            if (typeof this.content === "undefined") {
+            if (this.content === undefined) {
                 throw new Error("GLTFBinaryParser: JSON content not found.");
             }
-            if (typeof this.body === "undefined") {
+            if (this.body === undefined) {
                 throw new Error("GLTFBinaryParser: Binary buffer chunk not found or type not supported.");
             }
         }
@@ -44092,11 +44121,11 @@ void main() {
             if (this.manager)
                 this.manager.dispose();
         }
-        isSupport(file, format) {
+        isSupport(file, format = "") {
             return ((typeof file === "string" || file instanceof globalThis.File || file instanceof ArrayBuffer) &&
                 /(gltf|glb)$/i.test(format));
         }
-        async load(file, format, params) {
+        async load(file, format, params = {}) {
             this.manager = new GLTFLoadingManager(file, params);
             const scene = new Group$1();
             this.gltfLoader = new DynamicGltfLoader(this.viewer.camera, scene, this.viewer.renderer);
@@ -58476,8 +58505,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-"))
@@ -58538,19 +58567,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;
@@ -59387,7 +59416,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();
@@ -59409,10 +59440,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;
@@ -59665,7 +59693,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, _c, _d;