@inweb/viewer-visualize 26.10.6 → 26.12.0

package/dist/viewer-visualize.js

@@ -171,6 +171,14 @@
         cancel() {
             this.abortController.abort();
         }
+        extractFileName(file) {
+            const regex = /[^/\\?#:]+(?=\?|#|$)/;
+            if (typeof file === "string")
+                return (file.match(regex) || [])[0];
+            else if (file instanceof globalThis.File)
+                return (file.name.match(regex) || [])[0];
+            return undefined;
+        }
     }
     class Loaders {
         constructor() {
@@ -236,6 +244,7 @@
             enableGestures: true,
             geometryType: "vsfx",
             rulerUnit: "Default",
+            rulerPrecision: 2,
             cameraMode: "perspective",
         };
     }
@@ -492,6 +501,13 @@
             this._data.rulerUnit = value;
             this.change();
         }
+        get rulerPrecision() {
+            return this._data.rulerPrecision;
+        }
+        set rulerPrecision(value) {
+            this._data.rulerPrecision = value;
+            this.change();
+        }
         get cameraMode() {
             return this._data.cameraMode || "perspective";
         }
@@ -520,6 +536,51 @@
         "wheel",
     ];
     const CANVAS_EVENTS = CanvasEvents;
+    class Info {
+        constructor() {
+            this.performance = {
+                fps: 0,
+                frameTime: 0,
+                timeToFirstRender: 0,
+                loadTime: 0,
+            };
+            this.render = {
+                viewport: { width: 0, height: 0 },
+                antialiasing: "",
+                drawCalls: 0,
+                triangles: 0,
+                points: 0,
+                lines: 0,
+            };
+            this.scene = {
+                objects: 0,
+                triangles: 0,
+                points: 0,
+                lines: 0,
+                edges: 0,
+            };
+            this.optimizedScene = {
+                objects: 0,
+                triangles: 0,
+                points: 0,
+                lines: 0,
+                edges: 0,
+            };
+            this.memory = {
+                geometries: 0,
+                geometryBytes: 0,
+                textures: 0,
+                textureBytes: 0,
+                materials: 0,
+                totalEstimatedGpuBytes: 0,
+                usedJSHeapSize: 0,
+            };
+            this.system = {
+                webglRenderer: "",
+                webglVendor: "",
+            };
+        }
+    }
 
     class OdaGeAction {
         constructor(module) {
@@ -707,8 +768,8 @@
                 viewer.select(x, y, x, y);
                 this.subject.update();
                 const selectionSet = viewer.getSelected();
-                const handles = this.subject.getSelected();
-                this.onmessage({ type: "select", data: selectionSet, handles });
+                this.onmessage({ type: "select", data: selectionSet, handles: this.subject.getSelected() });
+                this.onmessage({ type: "select2", data: selectionSet, handles: this.subject.getSelected2() });
             }
         }
         dblclick(ev) {
@@ -896,8 +957,9 @@
             this.htmlElemTitle = null;
             this.startPoint = null;
             this.endPoint = null;
-            this.unit = "";
             this.scale = 1.0;
+            this.unit = "";
+            this.precision = 2;
             this.size = 10.0;
             this.lineThickness = 2;
             this.style = {
@@ -982,10 +1044,9 @@
                     this.htmlElemLine.style.background = this.style.background;
                     this.htmlElemLine.style.zIndex = "1";
                     this.htmlElemLine.style.height = `${height}px`;
-                    const distance = `${this.getDistance()} ${this.unit}`;
+                    const distance = this.getDistance();
                     const pX = p1.x + dx / 2;
                     const pY = p1.y + dy / 2;
-                    const widthTitle = distance.length * 10;
                     this.htmlElemTitle = createHtmlElementIfNeed(this.htmlElemTitle, this.targetElement, "ruler-value");
                     this.htmlElemTitle.style.display = "block";
                     this.htmlElemTitle.style.cursor = "pointer";
@@ -993,9 +1054,8 @@
                     this.htmlElemTitle.style.color = "white";
                     this.htmlElemTitle.style.position = "Absolute";
                     this.htmlElemTitle.style.top = `${pY}px`;
-                    this.htmlElemTitle.style.left = `${pX - widthTitle / 2}px`;
-                    this.htmlElemTitle.style.width = `${widthTitle}px`;
-                    this.htmlElemTitle.style.transformOrigin = "0px 0px";
+                    this.htmlElemTitle.style.left = `${pX}px`;
+                    this.htmlElemTitle.style.transform = "translate(-50%, -50%)";
                     this.htmlElemTitle.style.borderRadius = "5px";
                     this.htmlElemTitle.style.boxShadow = this.style.boxShadow;
                     this.htmlElemTitle.style.border = "none";
@@ -1003,7 +1063,7 @@
                     this.htmlElemTitle.style.zIndex = "3";
                     this.htmlElemTitle.style.padding = "2px";
                     this.htmlElemTitle.style.textAlign = "center";
-                    this.htmlElemTitle.innerHTML = `${distance}`;
+                    this.htmlElemTitle.innerHTML = this.formatDistance(distance);
                 }
                 else {
                     this.htmlElemLine.style.display = "none";
@@ -1013,11 +1073,43 @@
         }
         getDistance() {
             let distance = getDistance(this.startPoint, this.endPoint, this.moduleInstance);
-            if (Math.abs(this.scale - 1.0) > 10e-5) {
-                distance = (distance / this.scale).toFixed(2);
-            }
+            if (Math.abs(this.scale) > 1e-10)
+                distance /= this.scale;
             return distance;
         }
+        calculatePrecision(value) {
+            const distance = Math.abs(value);
+            if (distance >= 1000)
+                return 0;
+            if (distance >= 10)
+                return 1;
+            if (distance >= 0.1)
+                return 2;
+            if (distance >= 0.001)
+                return 3;
+            return distance > 0 ? Math.floor(-Math.log10(distance)) + 1 : 2;
+        }
+        formatDistance(distance) {
+            let digits;
+            if (this.precision === "Auto")
+                digits = this.calculatePrecision(distance);
+            else if (Number.isFinite(this.precision))
+                digits = this.precision;
+            else
+                digits = parseFloat(this.precision);
+            if (!Number.isFinite(digits))
+                digits = 2;
+            else if (digits < 0)
+                digits = 0;
+            else if (digits > 10)
+                digits = 10;
+            let result = distance.toFixed(digits);
+            if (this.precision === "Auto")
+                result = result.replace(/\.0+$/, "").replace(/\.$/, "");
+            if (+result !== distance)
+                result = "~ " + result;
+            return `${result} ${this.unit}`;
+        }
         setStartPoint(gePoint) {
             this.startPoint = gePoint;
             this.drawMeasureLine();
@@ -1050,6 +1142,10 @@
             this.scale = scale;
             this.drawMeasureLine();
         }
+        setPrecision(precision) {
+            this.precision = precision;
+            this.drawMeasureLine();
+        }
         setStyle(style) {
             this.style = style;
             this.drawMeasureLine();
@@ -1072,14 +1168,14 @@
     }
     class MeasureLineDragger extends OdBaseDragger {
         constructor(subject) {
-            var _a;
+            var _a, _b;
             super(subject);
             this.lineThickness = 2;
             this.press = false;
             this.gripingRadius = 5.0;
             this.firstPoint = null;
             this.secondPoint = null;
-            this.renameUnitTable = {
+            this.rulerUnitTable = {
                 Millimeters: "mm",
                 Centimeters: "cm",
                 Meters: "m",
@@ -1089,13 +1185,14 @@
                 Kilometers: "km",
                 Miles: "mi",
                 Micrometers: "µm",
+                Mils: "mil",
                 MicroInches: "µin",
                 Default: "unit",
             };
+            this.rulerUnit = (_a = subject.options.rulerUnit) !== null && _a !== void 0 ? _a : "Default";
+            this.rulerPrecision = (_b = subject.options.rulerPrecision) !== null && _b !== void 0 ? _b : "Default";
             this.items = [];
-            this.canvasEvents.push("resize");
-            this.oldRulerUnit = (_a = subject.options.rulerUnit) !== null && _a !== void 0 ? _a : "Default";
-            this.optionsChange = this.optionsChange.bind(this);
+            this.canvasEvents.push("resize", "optionsChange");
         }
         initialize() {
             super.initialize();
@@ -1190,8 +1287,9 @@
             const viewer = this.m_module.getViewer();
             const item = new MeasureLineItem(this.m_overlayElement, viewer, this.m_module);
             item.lineThickness = this.lineThickness || item.lineThickness;
-            const isDefaultUnit = !this.subject.options.rulerUnit || this.subject.options.rulerUnit === "Default";
-            item.setUnit(renameUnit(this.renameUnitTable, isDefaultUnit ? viewer.getUnit() : this.subject.options.rulerUnit));
+            const isDefaultUnit = this.rulerUnit === "Default";
+            const isDefaultPrecision = this.rulerPrecision === "Default";
+            item.setUnit(renameUnit(this.rulerUnitTable, isDefaultUnit ? viewer.getUnit() : this.rulerUnit));
             if (!isDefaultUnit) {
                 const fromUnit = this.getKUnitByName(viewer.getUnit());
                 const toUnit = this.getKUnitByName(this.subject.options.rulerUnit);
@@ -1202,29 +1300,49 @@
             else {
                 item.setConversionFactor(1.0);
             }
+            if (!isDefaultPrecision) {
+                item.setPrecision(this.rulerPrecision);
+            }
+            else {
+                item.setPrecision(2);
+            }
             this.items.push(item);
             return item;
         }
         optionsChange(event) {
-            var _a;
+            var _a, _b;
             const options = event.data;
             const toUnitName = (_a = options.rulerUnit) !== null && _a !== void 0 ? _a : "Default";
-            if (this.oldRulerUnit === toUnitName)
+            const toPrecision = (_b = options.rulerPrecision) !== null && _b !== void 0 ? _b : "Default";
+            const unitChanged = this.rulerUnit !== toUnitName;
+            const precisionChanged = this.rulerPrecision !== toPrecision;
+            if (!unitChanged && !precisionChanged)
                 return;
-            this.oldRulerUnit = toUnitName;
+            this.rulerUnit = toUnitName;
+            this.rulerPrecision = toPrecision;
             const drawingUnit = this.m_module.getViewer().getUnit();
             const eToUnit = this.getKUnitByName(toUnitName);
             const eFromUnit = this.getKUnitByName(drawingUnit);
             this.items.forEach((item) => {
-                if (toUnitName === "Default") {
-                    item.setUnit(renameUnit(this.renameUnitTable, drawingUnit));
-                    item.setConversionFactor(1.0);
+                if (unitChanged) {
+                    if (toUnitName === "Default") {
+                        item.setUnit(renameUnit(this.rulerUnitTable, drawingUnit));
+                        item.setConversionFactor(1.0);
+                    }
+                    else {
+                        item.setUnit(renameUnit(this.rulerUnitTable, toUnitName));
+                        const multiplier = this.m_module.getViewer().getUnitsConversionCoef(eFromUnit, eToUnit);
+                        this.conversionFactor = 1 / multiplier;
+                        item.setConversionFactor(this.conversionFactor);
+                    }
                 }
-                else {
-                    item.setUnit(renameUnit(this.renameUnitTable, toUnitName));
-                    const multiplier = this.m_module.getViewer().getUnitsConversionCoef(eFromUnit, eToUnit);
-                    this.conversionFactor = 1 / multiplier;
-                    item.setConversionFactor(this.conversionFactor);
+                if (precisionChanged) {
+                    if (toPrecision === "Default") {
+                        item.setPrecision(2);
+                    }
+                    else {
+                        item.setPrecision(toPrecision);
+                    }
                 }
             });
         }
@@ -1258,6 +1376,9 @@
                 case "Micrometers":
                     eUnit = this.m_module.Units.kMicrometers;
                     break;
+                case "Mils":
+                    eUnit = this.m_module.Units.kMils;
+                    break;
                 case "MicroInches":
                     eUnit = this.m_module.Units.kMicroInches;
                     break;
@@ -1313,7 +1434,7 @@
                     callback({
                         x: 100 * ((movedX - centerX) / maxMoveStick),
                         y: 100 * ((movedY - centerY) / maxMoveStick) * -1,
-                        global: global,
+                        global,
                     });
                 }
             };
@@ -1328,7 +1449,7 @@
                 callback({
                     x: 100 * ((movedX - centerX) / maxMoveStick),
                     y: 100 * ((movedY - centerY) / maxMoveStick) * -1,
-                    global: global,
+                    global,
                 });
             };
             this.drawExternal = () => {
@@ -2819,7 +2940,8 @@
         const visViewer = viewer.visViewer();
         visViewer.unselect();
         viewer.update();
-        viewer.emitEvent({ type: "select", data: undefined, handles: [] });
+        viewer.emitEvent({ type: "select", handles: [] });
+        viewer.emitEvent({ type: "select2", handles: [] });
     }
 
     function clearSlices(viewer) {
@@ -2895,6 +3017,13 @@
         return handles;
     }
 
+    function getSelected2(viewer) {
+        const handles = viewer.executeCommand("getSelected");
+        const model = viewer.models[0];
+        const handles2 = handles.map((handle) => `${model.id}:${handle}`);
+        return handles2;
+    }
+
     function hideSelected(viewer) {
         if (!viewer.visualizeJs)
             return;
@@ -2902,7 +3031,8 @@
         visViewer.hideSelectedObjects(false);
         viewer.update();
         viewer.emitEvent({ type: "hide" });
-        viewer.emitEvent({ type: "select", data: undefined, handles: [] });
+        viewer.emitEvent({ type: "select", handles: [] });
+        viewer.emitEvent({ type: "select2", handles: [] });
     }
 
     function isolateSelected(viewer) {
@@ -2950,9 +3080,9 @@
             if (modelPtr.getDatabaseHandle() === handle) {
                 const selectionSet = activeView.selectCrossing([0, 9999, 9999, 0], modelPtr);
                 visViewer.setSelected(selectionSet);
-                const handles = viewer.getSelected();
                 viewer.update();
-                viewer.emitEvent({ type: "select", data: selectionSet, handles });
+                viewer.emitEvent({ type: "select", handles: viewer.getSelected() });
+                viewer.emitEvent({ type: "select2", handles: viewer.getSelected2() });
                 selectionSet.delete();
                 break;
             }
@@ -2979,13 +3109,14 @@
         viewer.markup.setMarkupColor(r, g, b);
     }
 
-    function setSelected(viewer, handles = []) {
+    function setSelected(viewer, handles2 = []) {
         if (!viewer.visualizeJs)
             return;
+        const handles = handles2.map((handle) => handle.slice(handle.indexOf(":") + 1));
         const visLib = viewer.visLib();
         const visViewer = viewer.visViewer();
         const selectionSet = new visLib.OdTvSelectionSet();
-        handles === null || handles === void 0 ? void 0 : handles.forEach((handle) => {
+        handles.forEach((handle) => {
             const entityId = visViewer.getEntityByOriginalHandle(handle + "");
             if (!entityId.isNull())
                 selectionSet.appendEntity(entityId);
@@ -2993,9 +3124,25 @@
         visViewer.setSelected(selectionSet);
         viewer.update();
         viewer.emitEvent({ type: "select", data: selectionSet, handles });
+        viewer.emitEvent({ type: "select2", data: selectionSet, handles: handles2 });
         selectionSet.delete();
     }
 
+    function setSelected2(viewer, handles2 = []) {
+        const handles = [];
+        handles2.forEach((handle) => {
+            if (!handle.includes(":")) {
+                handles.push(handle);
+            }
+            else
+                viewer.models.forEach((model) => {
+                    if (handle.split(":", 1)[0] === model.id + "")
+                        handles.push(handle);
+                });
+        });
+        return viewer.executeCommand("setSelected", handles);
+    }
+
     function showAll(viewer) {
         if (!viewer.visualizeJs)
             return;
@@ -3118,6 +3265,7 @@
     commands.registerCommand("getDefaultViewPositions", getDefaultViewPositions);
     commands.registerCommand("getModels", getModels);
     commands.registerCommand("getSelected", getSelected);
+    commands.registerCommand("getSelected2", getSelected2);
     commands.registerCommand("hideSelected", hideSelected);
     commands.registerCommand("isolateSelected", isolateSelected);
     commands.registerCommand("regenerateAll", regenerateAll);
@@ -3127,6 +3275,7 @@
     commands.registerCommand("setDefaultViewPosition", setDefaultViewPosition);
     commands.registerCommand("setMarkupColor", setMarkupColor);
     commands.registerCommand("setSelected", setSelected);
+    commands.registerCommand("setSelected2", setSelected2);
     commands.registerCommand("showAll", showAll);
     commands.registerCommand("zoomToExtents", zoomToExtents);
     commands.registerCommand("zoomToObjects", zoomToObjects);
@@ -3475,6 +3624,10 @@
     components.registerComponent("GestureManagerComponent", (viewer) => new GestureManagerComponent(viewer));
     components.registerComponent("ResetComponent", (viewer) => new ResetComponent(viewer));
 
+    class ModelImpl {
+        dispose() { }
+    }
+
     class FileLoader {
         constructor() {
             this.requestHeader = {};
@@ -3558,7 +3711,7 @@
             return ((typeof file === "string" || file instanceof globalThis.File || file instanceof ArrayBuffer) &&
                 /vsf$/i.test(format));
         }
-        async load(file, format, params) {
+        async load(file, format, params = {}) {
             if (!this.viewer.visualizeJs)
                 return this;
             const visViewer = this.viewer.visViewer();
@@ -3582,6 +3735,9 @@
                 console.error("VSF parse error.", error);
                 throw error;
             }
+            const modelImpl = new ModelImpl();
+            modelImpl.id = params.modelId || this.extractFileName(file);
+            this.viewer.models.push(modelImpl);
             this.viewer.syncOptions();
             this.viewer.syncOverlay();
             this.viewer.update(true);
@@ -3625,6 +3781,9 @@
                     throw error;
                 }
                 if (i === 0) {
+                    const modelImpl = new ModelImpl();
+                    modelImpl.id = model.file.id;
+                    this.viewer.models.push(modelImpl);
                     this.viewer.syncOptions();
                     this.viewer.syncOverlay();
                     this.viewer.update(true);
@@ -3649,7 +3808,7 @@
             return ((typeof file === "string" || file instanceof globalThis.File || file instanceof ArrayBuffer) &&
                 /vsfx$/i.test(format));
         }
-        async load(file, format, params) {
+        async load(file, format, params = {}) {
             if (!this.viewer.visualizeJs)
                 return this;
             const visViewer = this.viewer.visViewer();
@@ -3673,6 +3832,9 @@
                 console.error("VSFX parse error.", error);
                 throw error;
             }
+            const modelImpl = new ModelImpl();
+            modelImpl.id = params.modelId || this.extractFileName(file);
+            this.viewer.models.push(modelImpl);
             this.viewer.syncOptions();
             this.viewer.syncOverlay();
             this.viewer.update(true);
@@ -3693,7 +3855,7 @@
                 /.vsfx$/i.test(file.database) &&
                 this.viewer.options.enableStreamingMode === false);
         }
-        async load(model, format, params = {}) {
+        async load(model) {
             if (!this.viewer.visualizeJs)
                 return Promise.resolve(this);
             const visViewer = this.viewer.visViewer();
@@ -3712,6 +3874,9 @@
                 console.error("VSFX parse error.", error);
                 throw error;
             }
+            const modelImpl = new ModelImpl();
+            modelImpl.id = model.file.id;
+            this.viewer.models.push(modelImpl);
             this.viewer.syncOptions();
             this.viewer.syncOverlay();
             this.viewer.update(true);
@@ -3790,6 +3955,9 @@
                     isDatabaseChunk = true;
                 }
                 if (isDatabaseChunk) {
+                    const modelImpl = new ModelImpl();
+                    modelImpl.id = model.file.id;
+                    this.viewer.models.push(modelImpl);
                     this.viewer.syncOptions();
                     this.viewer.syncOverlay();
                     updateController.update(UpdateType.kForce);
@@ -3824,7 +3992,7 @@
                 /.vsfx$/i.test(file.database) &&
                 (this.viewer.options.enablePartialMode === true || /.rcs$/i.test(file.name)));
         }
-        async load(model, format) {
+        async load(model) {
             if (!this.viewer.visualizeJs)
                 return this;
             const visViewer = this.viewer.visViewer();
@@ -3850,6 +4018,9 @@
                 }
                 this.viewer.emitEvent({ type: "geometryprogress", data: progress, file: model.file, model });
                 if (isDatabaseChunk) {
+                    const modelImpl = new ModelImpl();
+                    modelImpl.id = model.file.id;
+                    this.viewer.models.push(modelImpl);
                     this.viewer.syncOptions();
                     this.viewer.syncOverlay();
                     updateController.update(UpdateType.kForce);
@@ -17811,27 +17982,35 @@ js: import "konva/skia-backend";
             super();
             this._visualizeJsUrl = "";
             this.configure(params);
-            this._options = new Options(this);
             this.client = client;
+            this.options = new Options(this);
             this.loaders = [];
+            this.models = [];
+            this.info = new Info();
+            this.canvasEvents = CANVAS_EVENTS.slice();
+            this.canvaseventlistener = (event) => this.emit(event);
             this._activeDragger = null;
             this._components = [];
+            this._renderNeeded = false;
             this._renderTime = 0;
-            this.canvasEvents = CANVAS_EVENTS.slice();
-            this.canvaseventlistener = (event) => this.emit(event);
             this._enableAutoUpdate = (_a = params.enableAutoUpdate) !== null && _a !== void 0 ? _a : true;
-            this._renderNeeded = false;
             this._isRunAsyncUpdate = false;
             this.render = this.render.bind(this);
             this.update = this.update.bind(this);
             this._markup = MarkupFactory.createMarkup(params.markupType);
         }
-        get options() {
-            return this._options;
-        }
         get visualizeJsUrl() {
             return this._visualizeJsUrl;
         }
+        get visualizeJs() {
+            return this._visualizeJs;
+        }
+        visLib() {
+            return this._visualizeJs;
+        }
+        visViewer() {
+            return this._viewer;
+        }
         get markup() {
             return this._markup;
         }
@@ -17840,13 +18019,20 @@ js: import "konva/skia-backend";
             this._crossOrigin = params.crossOrigin;
             return this;
         }
+        get draggers() {
+            return [...draggers.getDraggers().keys()];
+        }
+        get components() {
+            return [...components.getComponents().keys()];
+        }
         async initialize(canvas, onProgress) {
             this.addEventListener("optionschange", (event) => this.syncOptions(event.data));
+            const pixelRatio = window.devicePixelRatio;
             const rect = canvas.parentElement.getBoundingClientRect();
             const width = rect.width || 1;
             const height = rect.height || 1;
-            canvas.width = Math.round(width * window.devicePixelRatio);
-            canvas.height = Math.round(height * window.devicePixelRatio);
+            canvas.width = Math.round(width * pixelRatio);
+            canvas.height = Math.round(height * pixelRatio);
             canvas.style.width = width + "px";
             canvas.style.height = height + "px";
             canvas.parentElement.style.touchAction = "none";
@@ -17914,6 +18100,26 @@ js: import "konva/skia-backend";
             this.update(true);
             this.emitEvent({ type: "resize", width, height });
         }
+        resize() {
+            console.warn("Viewer.resize() has been deprecated since 26.9 and will be removed in a future release, use Viewer.setSize() instead.");
+            if (!this.visualizeJs)
+                return this;
+            if (!this.canvas.parentElement)
+                return this;
+            const { width, height } = this.canvas.parentElement.getBoundingClientRect();
+            if (!width || !height)
+                return this;
+            this.setSize(width, height);
+            return this;
+        }
+        update(force = false) {
+            if (this._enableAutoUpdate) {
+                this._renderNeeded = true;
+                if (force)
+                    this.render();
+            }
+            this.emitEvent({ type: "update", data: force });
+        }
         render(time) {
             var _a, _b;
             if (!this.visualizeJs)
@@ -17932,139 +18138,228 @@ js: import "konva/skia-backend";
             (_b = (_a = this._activeDragger) === null || _a === void 0 ? void 0 : _a.updatePreview) === null || _b === void 0 ? void 0 : _b.call(_a);
             this.emitEvent({ type: "render", time, deltaTime });
         }
-        resize() {
-            console.warn("Viewer.resize() has been deprecated since 26.9 and will be removed in a future release, use Viewer.setSize() instead.");
+        async loadReferences(model) {
+            var _a;
             if (!this.visualizeJs)
                 return this;
-            if (!this.canvas.parentElement)
+            if (!this.client)
                 return this;
-            const { width, height } = this.canvas.parentElement.getBoundingClientRect();
-            if (!width || !height)
+            if (!model.getReferences)
                 return this;
-            this.setSize(width, height);
-            return this;
-        }
-        update(force = false) {
-            if (this._enableAutoUpdate) {
-                this._renderNeeded = true;
-                if (force)
-                    this.render();
+            const abortController = new AbortController();
+            (_a = this._abortControllerForReferences) === null || _a === void 0 ? void 0 : _a.abort();
+            this._abortControllerForReferences = abortController;
+            let references = [];
+            await model
+                .getReferences(abortController.signal)
+                .then((data) => (references = data.references))
+                .catch((e) => console.error("Cannot load model references.", e));
+            for (const file of references) {
+                await this.client
+                    .downloadFile(file.id, undefined, abortController.signal)
+                    .then((arrayBuffer) => { var _a; return (_a = this.visualizeJs) === null || _a === void 0 ? void 0 : _a.getViewer().addEmbeddedFile(file.name, new Uint8Array(arrayBuffer)); })
+                    .catch((e) => console.error(`Cannot load reference file ${file.name}.`, e));
             }
-            this.emitEvent({ type: "update", data: force });
+            return this;
         }
-        scheduleUpdateAsync(maxScheduleUpdateTimeInMs = 50) {
-            return new Promise((resolve, reject) => {
-                setTimeout(() => {
-                    var _a, _b, _c;
-                    try {
-                        if (this._enableAutoUpdate) {
-                            (_a = this.visViewer()) === null || _a === void 0 ? void 0 : _a.update(maxScheduleUpdateTimeInMs);
-                            (_c = (_b = this._activeDragger) === null || _b === void 0 ? void 0 : _b.updatePreview) === null || _c === void 0 ? void 0 : _c.call(_b);
-                        }
-                        this.emitEvent({ type: "update", data: false });
-                        resolve();
-                    }
-                    catch (e) {
-                        console.error(e);
-                        reject();
-                    }
-                }, 0);
-            });
+        applyModelTransformMatrix(model) {
+            this.executeCommand("applyModelTransform", model);
         }
-        async updateAsync(maxScheduleUpdateTimeInMs = 50, maxScheduleUpdateCount = 50) {
+        applySceneGraphSettings(options = this.options) {
             if (!this.visualizeJs)
                 return;
-            this._isRunAsyncUpdate = true;
-            try {
-                const device = this.visViewer().getActiveDevice();
-                for (let iterationCount = 0; !device.isValid() && iterationCount < maxScheduleUpdateCount; iterationCount++) {
-                    await this.scheduleUpdateAsync(maxScheduleUpdateTimeInMs);
-                }
-                await this.scheduleUpdateAsync(maxScheduleUpdateTimeInMs);
-            }
-            catch (e) {
-                console.error(e);
-            }
-            finally {
-                this._isRunAsyncUpdate = false;
-            }
-        }
-        get visualizeJs() {
-            return this._visualizeJs;
-        }
-        visLib() {
-            return this._visualizeJs;
-        }
-        visViewer() {
-            return this._viewer;
-        }
-        syncOpenCloudVisualStyle() {
-            if (!this.visualizeJs)
-                return this;
             const visLib = this.visLib();
             const visViewer = this.visViewer();
             const device = visViewer.getActiveDevice();
-            if (device.isNull())
-                return this;
-            const view = device.getActiveView();
-            view.enableDefaultLighting(true, visLib.DefaultLightingType.kTwoLights);
-            view.setDefaultLightingIntensity(1.25);
-            let visualStyleId;
-            try {
-                visualStyleId = visViewer.findVisualStyle("OpenCloud");
-            }
-            catch {
-                visualStyleId = undefined;
-            }
-            if (!visualStyleId || visualStyleId.isNull()) {
-                visualStyleId = visViewer.createVisualStyle("OpenCloud");
-                const colorDef = new visLib.OdTvColorDef(66, 66, 66);
-                const shadedVsId = visViewer.findVisualStyle("Realistic");
-                const visualStylePtr = visualStyleId.openObject();
-                visualStylePtr.copyFrom(shadedVsId);
-                visualStylePtr.setOptionInt32(visLib.VisualStyleOptions.kFaceModifiers, 0, visLib.VisualStyleOperations.kSet);
-                visualStylePtr.setOptionInt32(visLib.VisualStyleOptions.kEdgeModel, 2, visLib.VisualStyleOperations.kSet);
-                visualStylePtr.setOptionDouble(visLib.VisualStyleOptions.kEdgeCreaseAngle, 60, visLib.VisualStyleOperations.kSet);
-                visualStylePtr.setOptionInt32(visLib.VisualStyleOptions.kEdgeStyles, 0, visLib.VisualStyleOperations.kSet);
-                visualStylePtr.setOptionInt32(visLib.VisualStyleOptions.kEdgeModifiers, 8, visLib.VisualStyleOperations.kSet);
-                visualStylePtr.setOptionColor(visLib.VisualStyleOptions.kEdgeColorValue, colorDef, visLib.VisualStyleOperations.kSet);
-                visualStylePtr.delete();
+            if (isExist(options.sceneGraph)) {
+                device.setOptionBool(visLib.DeviceOptions.kDelaySceneGraphProc, !options.sceneGraph);
             }
-            view.visualStyle = visualStyleId;
-            view.delete();
             device.delete();
-            return this;
+            this.update();
         }
-        syncOptions(options = this.options) {
+        async open(file, params = {}) {
             if (!this.visualizeJs)
                 return this;
-            this.syncOpenCloudVisualStyle();
-            const visLib = this.visLib();
-            const visViewer = this.visViewer();
-            const device = visViewer.getActiveDevice();
-            if (device.isNull())
-                return this;
-            if (options.showWCS !== visViewer.getEnableWCS()) {
-                visViewer.setEnableWCS(options.showWCS);
+            this.cancel();
+            this.clear();
+            this.emitEvent({ type: "open", mode: "file", file });
+            let model = file;
+            if (model && typeof model.getModels === "function") {
+                const models = await model.getModels();
+                model = models.find((model) => model.default) || models[0] || file;
             }
-            if (options.cameraAnimation !== visViewer.getEnableAnimation()) {
-                visViewer.setEnableAnimation(options.cameraAnimation);
+            if (model && typeof model.database === "string") {
+                file = model.file;
             }
-            const antialiasing = options.antialiasing === true || options.antialiasing === "fxaa";
-            if (antialiasing !== visViewer.fxaaAntiAliasing3d) {
-                visViewer.fxaaAntiAliasing3d = antialiasing;
-                visViewer.fxaaQuality = 5;
+            if (!model)
+                throw new Error(`Format not supported`);
+            let format = params.format;
+            if (!format && typeof file["type"] === "string")
+                format = file["type"].split(".").pop();
+            if (!format && typeof file === "string")
+                format = file.split(".").pop();
+            if (!format && file instanceof globalThis.File)
+                format = file.name.split(".").pop();
+            const loader = loaders.createLoader(this, model, format);
+            if (!loader)
+                throw new Error(`Format not supported`);
+            this.loaders.push(loader);
+            this.emitEvent({ type: "geometrystart", file, model });
+            try {
+                await this.loadReferences(model);
+                await loader.load(model, format, params);
             }
-            if (options.shadows !== visViewer.shadows) {
-                visViewer.shadows = options.shadows;
-                const canvas = visLib.canvas;
-                device.invalidate([0, canvas.width, canvas.height, 0]);
+            catch (error) {
+                this.emitEvent({ type: "geometryerror", data: error, file, model });
+                throw error;
             }
-            if (options.groundShadow !== visViewer.groundShadow) {
-                visViewer.groundShadow = options.groundShadow;
+            this.emitEvent({ type: "geometryend", file, model });
+            if (this.visualizeJs) {
+                this.applyModelTransformMatrix(model);
+                this.applySceneGraphSettings();
             }
-            if (options.ambientOcclusion !== device.getOptionBool(visLib.DeviceOptions.kSSAOEnable)) {
-                device.setOptionBool(visLib.DeviceOptions.kSSAOEnable, options.ambientOcclusion);
+            return this;
+        }
+        openVsfFile(buffer) {
+            console.warn("Viewer.openVsfFile() has been deprecated since 26.4 and will be removed in a future release, use Viewer.open() instead.");
+            if (!this.visualizeJs)
+                return this;
+            this.cancel();
+            this.clear();
+            this.emitEvent({ type: "open", mode: "file", file: "", buffer });
+            const visViewer = this.visViewer();
+            this.emitEvent({ type: "geometrystart", file: "", buffer });
+            try {
+                const data = buffer instanceof Uint8Array ? buffer : new Uint8Array(buffer);
+                visViewer.parseFile(data);
+                this.syncOptions();
+                this.syncOverlay();
+                this.update(true);
+                this.emitEvent({ type: "geometryprogress", data: 1, file: "", buffer });
+                this.emitEvent({ type: "databasechunk", data, file: "", buffer });
+            }
+            catch (error) {
+                this.emitEvent({ type: "geometryerror", data: error, file: "", buffer });
+                throw error;
+            }
+            this.emitEvent({ type: "geometryend", file: "", buffer });
+            return this;
+        }
+        openVsfxFile(buffer) {
+            console.warn("Viewer.openVsfxFile() has been deprecated since 26.4 and will be removed in a future release, use Viewer.open() instead.");
+            if (!this.visualizeJs)
+                return this;
+            this.cancel();
+            this.clear();
+            this.emitEvent({ type: "open", mode: "file", file: "", buffer });
+            const visViewer = this.visViewer();
+            this.emitEvent({ type: "geometrystart", file: "", buffer });
+            try {
+                const data = buffer instanceof Uint8Array ? buffer : new Uint8Array(buffer);
+                visViewer.parseVsfx(data);
+                this.syncOptions();
+                this.syncOverlay();
+                this.update(true);
+                this.emitEvent({ type: "geometryprogress", data: 1, file: "", buffer });
+                this.emitEvent({ type: "databasechunk", data, file: "", buffer });
+            }
+            catch (error) {
+                this.emitEvent({ type: "geometryerror", data: error, file: "", buffer });
+                throw error;
+            }
+            this.emitEvent({ type: "geometryend", file: "", buffer });
+            return this;
+        }
+        cancel() {
+            var _a;
+            (_a = this._abortControllerForReferences) === null || _a === void 0 ? void 0 : _a.abort();
+            this._abortControllerForReferences = undefined;
+            this.loaders.forEach((loader) => loader.cancel());
+            this.emitEvent({ type: "cancel" });
+            return this;
+        }
+        clear() {
+            if (!this.visualizeJs)
+                return this;
+            const visViewer = this.visViewer();
+            this.setActiveDragger();
+            this.clearSlices();
+            this.clearOverlay();
+            this.clearSelected();
+            this.loaders.forEach((loader) => loader.dispose());
+            this.loaders = [];
+            this.models.forEach((model) => model.dispose());
+            this.models = [];
+            visViewer.clear();
+            visViewer.createLocalDatabase();
+            this.syncOptions();
+            this.syncOverlay();
+            this.update(true);
+            this.emitEvent({ type: "clear" });
+            return this;
+        }
+        is3D() {
+            if (!this.visualizeJs)
+                return false;
+            const visViewer = this.visViewer();
+            const ext = visViewer.getActiveExtents();
+            const min = ext.min();
+            const max = ext.max();
+            const extHeight = max[2] - min[2];
+            return extHeight !== 0;
+        }
+        syncOptions(options = this.options) {
+            if (!this.visualizeJs)
+                return this;
+            const visLib = this.visLib();
+            const visViewer = this.visViewer();
+            const device = visViewer.getActiveDevice();
+            if (device.isNull())
+                return this;
+            const view = device.getActiveView();
+            view.enableDefaultLighting(true, visLib.DefaultLightingType.kTwoLights);
+            view.setDefaultLightingIntensity(1.25);
+            let visualStyleId;
+            try {
+                visualStyleId = visViewer.findVisualStyle("OpenCloud");
+            }
+            catch {
+                visualStyleId = undefined;
+            }
+            if (!visualStyleId || visualStyleId.isNull()) {
+                visualStyleId = visViewer.createVisualStyle("OpenCloud");
+                const colorDef = new visLib.OdTvColorDef(66, 66, 66);
+                const shadedVsId = visViewer.findVisualStyle("Realistic");
+                const visualStylePtr = visualStyleId.openObject();
+                visualStylePtr.copyFrom(shadedVsId);
+                visualStylePtr.setOptionInt32(visLib.VisualStyleOptions.kFaceModifiers, 0, visLib.VisualStyleOperations.kSet);
+                visualStylePtr.setOptionInt32(visLib.VisualStyleOptions.kEdgeModel, 2, visLib.VisualStyleOperations.kSet);
+                visualStylePtr.setOptionDouble(visLib.VisualStyleOptions.kEdgeCreaseAngle, 60, visLib.VisualStyleOperations.kSet);
+                visualStylePtr.setOptionInt32(visLib.VisualStyleOptions.kEdgeStyles, 0, visLib.VisualStyleOperations.kSet);
+                visualStylePtr.setOptionInt32(visLib.VisualStyleOptions.kEdgeModifiers, 8, visLib.VisualStyleOperations.kSet);
+                visualStylePtr.setOptionColor(visLib.VisualStyleOptions.kEdgeColorValue, colorDef, visLib.VisualStyleOperations.kSet);
+                visualStylePtr.delete();
+            }
+            view.visualStyle = visualStyleId;
+            if (options.showWCS !== visViewer.getEnableWCS()) {
+                visViewer.setEnableWCS(options.showWCS);
+            }
+            if (options.cameraAnimation !== visViewer.getEnableAnimation()) {
+                visViewer.setEnableAnimation(options.cameraAnimation);
+            }
+            const antialiasing = options.antialiasing === true || options.antialiasing === "fxaa";
+            if (antialiasing !== visViewer.fxaaAntiAliasing3d) {
+                visViewer.fxaaAntiAliasing3d = antialiasing;
+                visViewer.fxaaQuality = 5;
+            }
+            if (options.shadows !== visViewer.shadows) {
+                visViewer.shadows = options.shadows;
+            }
+            if (options.groundShadow !== visViewer.groundShadow) {
+                visViewer.groundShadow = options.groundShadow;
+            }
+            if (options.ambientOcclusion !== device.getOptionBool(visLib.DeviceOptions.kSSAOEnable)) {
+                device.setOptionBool(visLib.DeviceOptions.kSSAOEnable, options.ambientOcclusion);
                 device.setOptionBool(visLib.DeviceOptions.kSSAODynamicRadius, true);
                 device.setOptionDouble(visLib.DeviceOptions.kSSAORadius, 1);
                 device.setOptionInt32(visLib.DeviceOptions.kSSAOLoops, 32);
@@ -18084,17 +18379,7 @@ js: import "konva/skia-backend";
                 visualStyleId.delete();
                 activeView.delete();
             }
-            device.delete();
-            this.syncHighlightingOptions(options);
-            this.update();
-            return this;
-        }
-        syncHighlightingOptions(options = this.options) {
-            if (!this.visualizeJs)
-                return this;
             const params = options.enableCustomHighlight ? options : Options.defaults();
-            const visLib = this.visLib();
-            const visViewer = this.visViewer();
             const { Entry, OdTvRGBColorDef } = visLib;
             const highlightStyleId = visViewer.findHighlightStyle("Web_Default");
             const highlightStylePtr = highlightStyleId.openObject();
@@ -18121,19 +18406,80 @@ js: import "konva/skia-backend";
                 const visibility = !isExist(params.edgesVisibility) ? true : params.edgesVisibility;
                 highlightStylePtr.setEdgesVisibility(Entry.k2DTop.value | Entry.k3DTop.value, params.edgesOverlap && visibility);
             }
-            const device = visViewer.getActiveDevice();
-            if (!device.isNull()) {
-                const canvas = visLib.canvas;
-                device.invalidate([0, canvas.width, canvas.height, 0]);
-                device.delete();
-            }
+            view.delete();
+            device.delete();
+            this.update();
             return this;
         }
-        get draggers() {
-            return [...draggers.getDraggers().keys()];
+        syncOverlay() {
+            if (!this.visualizeJs)
+                return;
+            const visViewer = this.visViewer();
+            const activeView = visViewer.activeView;
+            let overlayView = visViewer.getViewByName(OVERLAY_VIEW_NAME);
+            if (!overlayView) {
+                const markupModel = visViewer.getMarkupModel();
+                const pDevice = visViewer.getActiveDevice();
+                overlayView = pDevice.createView(OVERLAY_VIEW_NAME, false);
+                overlayView.addModel(markupModel);
+                activeView.addSibling(overlayView);
+                pDevice.addView(overlayView);
+            }
+            overlayView.viewPosition = activeView.viewPosition;
+            overlayView.viewTarget = activeView.viewTarget;
+            overlayView.upVector = activeView.upVector;
+            overlayView.viewFieldWidth = activeView.viewFieldWidth;
+            overlayView.viewFieldHeight = activeView.viewFieldHeight;
+            const viewPort = overlayView.getViewport();
+            overlayView.setViewport(viewPort.lowerLeft, viewPort.upperRight);
+            overlayView.vportRect = activeView.vportRect;
+            this._markup.syncOverlay();
+            this.update();
         }
-        get components() {
-            return [...components.getComponents().keys()];
+        clearOverlay() {
+            if (!this.visualizeJs)
+                return;
+            this._markup.clearOverlay();
+            this.update();
+        }
+        clearSlices() {
+            if (!this.visualizeJs)
+                return;
+            const visViewer = this.visViewer();
+            const activeView = visViewer.activeView;
+            activeView.removeCuttingPlanes();
+            activeView.delete();
+            this.update();
+        }
+        getSelected() {
+            return this.executeCommand("getSelected");
+        }
+        setSelected(handles) {
+            this.executeCommand("setSelected", handles);
+        }
+        getSelected2() {
+            return this.executeCommand("getSelected2");
+        }
+        setSelected2(handles) {
+            this.executeCommand("setSelected2", handles);
+        }
+        clearSelected() {
+            this.executeCommand("clearSelected");
+        }
+        hideSelected() {
+            this.executeCommand("hideSelected");
+        }
+        isolateSelected() {
+            this.executeCommand("isolateSelected");
+        }
+        showAll() {
+            this.executeCommand("showAll");
+        }
+        explode(index = 0) {
+            this.executeCommand("explode", index);
+        }
+        collect() {
+            this.executeCommand("collect");
         }
         registerDragger(name, dragger) {
             console.warn("Viewer.registerDragger() has been deprecated since 25.12 and will be removed in a future release, use draggers('visualizejs').registerDragger() instead.");
@@ -18180,55 +18526,102 @@ js: import "konva/skia-backend";
         getComponent(name) {
             return this._components.find((component) => component.name === name);
         }
-        clearSlices() {
+        drawViewpoint(viewpoint) {
+            var _a, _b;
             if (!this.visualizeJs)
                 return;
             const visViewer = this.visViewer();
             const activeView = visViewer.activeView;
-            activeView.removeCuttingPlanes();
-            activeView.delete();
-            this.update();
-        }
-        clearOverlay() {
-            if (!this.visualizeJs)
-                return;
-            this._markup.clearOverlay();
+            const getPoint3dAsArray = (point3d) => {
+                return [point3d.x, point3d.y, point3d.z];
+            };
+            const setOrthogonalCamera = (orthogonal_camera) => {
+                if (orthogonal_camera) {
+                    activeView.setView(getPoint3dAsArray(orthogonal_camera.view_point), getPoint3dAsArray(orthogonal_camera.direction), getPoint3dAsArray(orthogonal_camera.up_vector), orthogonal_camera.field_width, orthogonal_camera.field_height, true);
+                    this.syncOverlay();
+                    this.emitEvent({ type: "changecameramode", mode: "orthographic" });
+                }
+            };
+            const setPerspectiveCamera = (perspective_camera) => { };
+            const setClippingPlanes = (clipping_planes) => {
+                if (clipping_planes) {
+                    for (const clipping_plane of clipping_planes) {
+                        const cuttingPlane = new (this.visLib().OdTvPlane)();
+                        cuttingPlane.set(getPoint3dAsArray(clipping_plane.location), getPoint3dAsArray(clipping_plane.direction));
+                        activeView.addCuttingPlane(cuttingPlane);
+                        activeView.setEnableCuttingPlaneFill(true, 0x66, 0x66, 0x66);
+                    }
+                }
+            };
+            const setSelection = (selection) => {
+                if (selection)
+                    this.setSelected(selection.map((component) => component.handle));
+            };
+            const draggerName = (_a = this._activeDragger) === null || _a === void 0 ? void 0 : _a.name;
+            this.setActiveDragger();
+            this.clearSlices();
+            this.clearOverlay();
+            this.clearSelected();
+            this.showAll();
+            this.explode();
+            setOrthogonalCamera(viewpoint.orthogonal_camera);
+            setPerspectiveCamera(viewpoint.perspective_camera);
+            setClippingPlanes(viewpoint.clipping_planes);
+            setSelection(((_b = viewpoint.custom_fields) === null || _b === void 0 ? void 0 : _b.selection2) || viewpoint.selection);
+            this._markup.setViewpoint(viewpoint);
+            this.setActiveDragger(draggerName);
+            this.emitEvent({ type: "drawviewpoint", data: viewpoint });
             this.update();
         }
-        syncOverlay() {
+        createViewpoint() {
             if (!this.visualizeJs)
-                return;
+                return {};
             const visViewer = this.visViewer();
             const activeView = visViewer.activeView;
-            let overlayView = visViewer.getViewByName(OVERLAY_VIEW_NAME);
-            if (!overlayView) {
-                const markupModel = visViewer.getMarkupModel();
-                const pDevice = visViewer.getActiveDevice();
-                overlayView = pDevice.createView(OVERLAY_VIEW_NAME, false);
-                overlayView.addModel(markupModel);
-                activeView.addSibling(overlayView);
-                pDevice.addView(overlayView);
-            }
-            overlayView.viewPosition = activeView.viewPosition;
-            overlayView.viewTarget = activeView.viewTarget;
-            overlayView.upVector = activeView.upVector;
-            overlayView.viewFieldWidth = activeView.viewFieldWidth;
-            overlayView.viewFieldHeight = activeView.viewFieldHeight;
-            const viewPort = overlayView.getViewport();
-            overlayView.setViewport(viewPort.lowerLeft, viewPort.upperRight);
-            overlayView.vportRect = activeView.vportRect;
-            this._markup.syncOverlay();
-            this.update();
-        }
-        is3D() {
-            if (!this.visualizeJs)
-                return false;
-            const visViewer = this.visViewer();
-            const ext = visViewer.getActiveExtents();
-            const min = ext.min();
-            const max = ext.max();
-            const extHeight = max[2] - min[2];
-            return extHeight !== 0;
+            const getPoint3dFromArray = (array) => {
+                return { x: array[0], y: array[1], z: array[2] };
+            };
+            const getOrthogonalCamera = () => {
+                return {
+                    view_point: getPoint3dFromArray(activeView.viewPosition),
+                    direction: getPoint3dFromArray(activeView.viewTarget),
+                    up_vector: getPoint3dFromArray(activeView.upVector),
+                    field_width: activeView.viewFieldWidth,
+                    field_height: activeView.viewFieldHeight,
+                    view_to_world_scale: 1,
+                };
+            };
+            const getPerspectiveCamera = () => {
+                return undefined;
+            };
+            const getClippingPlanes = () => {
+                const clipping_planes = [];
+                for (let i = 0; i < activeView.numCuttingPlanes(); i++) {
+                    const cuttingPlane = activeView.getCuttingPlane(i);
+                    const clipping_plane = {
+                        location: getPoint3dFromArray(cuttingPlane.getOrigin()),
+                        direction: getPoint3dFromArray(cuttingPlane.normal()),
+                    };
+                    clipping_planes.push(clipping_plane);
+                }
+                return clipping_planes;
+            };
+            const getSelection = () => {
+                return this.getSelected().map((handle) => ({ handle }));
+            };
+            const getSelection2 = () => {
+                return this.getSelected2().map((handle) => ({ handle }));
+            };
+            const viewpoint = { custom_fields: {} };
+            viewpoint.orthogonal_camera = getOrthogonalCamera();
+            viewpoint.perspective_camera = getPerspectiveCamera();
+            viewpoint.clipping_planes = getClippingPlanes();
+            viewpoint.selection = getSelection();
+            viewpoint.description = new Date().toDateString();
+            this._markup.getViewpoint(viewpoint);
+            viewpoint.custom_fields.selection2 = getSelection2();
+            this.emitEvent({ type: "createviewpoint", data: viewpoint });
+            return viewpoint;
         }
         screenToWorld(position) {
             if (!this.visualizeJs)
@@ -18263,184 +18656,23 @@ js: import "konva/skia-backend";
                 result.z = 1 / z;
             return result;
         }
-        getSelected() {
-            return this.executeCommand("getSelected");
-        }
-        setSelected(handles) {
-            this.executeCommand("setSelected", handles);
-        }
-        clearSelected() {
-            this.executeCommand("clearSelected");
-        }
-        hideSelected() {
-            this.executeCommand("hideSelected");
-        }
-        isolateSelected() {
-            this.executeCommand("isolateSelected");
-        }
-        showAll() {
-            this.executeCommand("showAll");
-        }
-        explode(index = 0) {
-            this.executeCommand("explode", index);
-        }
-        collect() {
-            this.executeCommand("collect");
-        }
-        async loadReferences(model) {
-            var _a;
-            if (!this.visualizeJs)
-                return this;
-            if (!this.client)
-                return this;
-            if (!model.getReferences)
-                return this;
-            const abortController = new AbortController();
-            (_a = this._abortControllerForReferences) === null || _a === void 0 ? void 0 : _a.abort();
-            this._abortControllerForReferences = abortController;
-            let references = [];
-            await model
-                .getReferences(abortController.signal)
-                .then((data) => (references = data.references))
-                .catch((e) => console.error("Cannot load model references.", e));
-            for (const file of references) {
-                await this.client
-                    .downloadFile(file.id, undefined, abortController.signal)
-                    .then((arrayBuffer) => { var _a; return (_a = this.visualizeJs) === null || _a === void 0 ? void 0 : _a.getViewer().addEmbeddedFile(file.name, new Uint8Array(arrayBuffer)); })
-                    .catch((e) => console.error(`Cannot load reference file ${file.name}.`, e));
-            }
-            return this;
-        }
-        applyModelTransformMatrix(model) {
-            this.executeCommand("applyModelTransform", model);
+        executeCommand(id, ...args) {
+            return commands.executeCommand(id, this, ...args);
         }
-        applySceneGraphSettings(options = this.options) {
+        addMarkupEntity(entityName) {
             if (!this.visualizeJs)
-                return;
-            const visLib = this.visLib();
+                return null;
+            this.syncOverlay();
             const visViewer = this.visViewer();
-            const device = visViewer.getActiveDevice();
-            if (isExist(options.sceneGraph)) {
-                device.setOptionBool(visLib.DeviceOptions.kDelaySceneGraphProc, !options.sceneGraph);
-            }
-            device.delete();
+            const model = visViewer.getMarkupModel();
+            const entityId = model.appendEntity(entityName);
+            const entityPtr = entityId.openObject();
+            const color = this.getMarkupColor();
+            entityPtr.setColor(color.r, color.g, color.b);
+            entityPtr.setLineWeight(2);
+            entityPtr.delete();
             this.update();
-        }
-        async open(file, params = {}) {
-            if (!this.visualizeJs)
-                return this;
-            this.cancel();
-            this.clear();
-            this.emitEvent({ type: "open", file });
-            let model = file;
-            if (model && typeof model.getModels === "function") {
-                const models = await model.getModels();
-                model = models.find((model) => model.default) || models[0] || file;
-            }
-            if (!model)
-                throw new Error(`Format not supported`);
-            let format = params.format;
-            if (!format && typeof model.type === "string")
-                format = model.type.split(".").pop();
-            if (!format && typeof file === "string")
-                format = file.split(".").pop();
-            if (!format && file instanceof globalThis.File)
-                format = file.name.split(".").pop();
-            const loader = loaders.createLoader(this, model, format);
-            if (!loader)
-                throw new Error(`Format not supported`);
-            this.loaders.push(loader);
-            this.emitEvent({ type: "geometrystart", file, model });
-            try {
-                await this.loadReferences(model);
-                await loader.load(model, format, params);
-            }
-            catch (error) {
-                this.emitEvent({ type: "geometryerror", data: error, file, model });
-                throw error;
-            }
-            this.emitEvent({ type: "geometryend", file, model });
-            if (this.visualizeJs) {
-                this.applyModelTransformMatrix(model);
-                this.applySceneGraphSettings();
-            }
-            return this;
-        }
-        openVsfFile(buffer) {
-            console.warn("Viewer.openVsfFile() has been deprecated since 26.4 and will be removed in a future release, use Viewer.open() instead.");
-            if (!this.visualizeJs)
-                return this;
-            this.cancel();
-            this.clear();
-            this.emitEvent({ type: "open", file: "", buffer });
-            const visViewer = this.visViewer();
-            this.emitEvent({ type: "geometrystart", file: "", buffer });
-            try {
-                const data = buffer instanceof Uint8Array ? buffer : new Uint8Array(buffer);
-                visViewer.parseFile(data);
-                this.syncOptions();
-                this.syncOverlay();
-                this.update(true);
-                this.emitEvent({ type: "geometryprogress", data: 1, file: "", buffer });
-                this.emitEvent({ type: "databasechunk", data, file: "", buffer });
-            }
-            catch (error) {
-                this.emitEvent({ type: "geometryerror", data: error, file: "", buffer });
-                throw error;
-            }
-            this.emitEvent({ type: "geometryend", file: "", buffer });
-            return this;
-        }
-        openVsfxFile(buffer) {
-            console.warn("Viewer.openVsfxFile() has been deprecated since 26.4 and will be removed in a future release, use Viewer.open() instead.");
-            if (!this.visualizeJs)
-                return this;
-            this.cancel();
-            this.clear();
-            this.emitEvent({ type: "open", file: "", buffer });
-            const visViewer = this.visViewer();
-            this.emitEvent({ type: "geometrystart", file: "", buffer });
-            try {
-                const data = buffer instanceof Uint8Array ? buffer : new Uint8Array(buffer);
-                visViewer.parseVsfx(data);
-                this.syncOptions();
-                this.syncOverlay();
-                this.update(true);
-                this.emitEvent({ type: "geometryprogress", data: 1, file: "", buffer });
-                this.emitEvent({ type: "databasechunk", data, file: "", buffer });
-            }
-            catch (error) {
-                this.emitEvent({ type: "geometryerror", data: error, file: "", buffer });
-                throw error;
-            }
-            this.emitEvent({ type: "geometryend", file: "", buffer });
-            return this;
-        }
-        cancel() {
-            var _a;
-            (_a = this._abortControllerForReferences) === null || _a === void 0 ? void 0 : _a.abort();
-            this._abortControllerForReferences = undefined;
-            this.loaders.forEach((loader) => loader.cancel());
-            this.emitEvent({ type: "cancel" });
-            return this;
-        }
-        clear() {
-            if (!this.visualizeJs)
-                return this;
-            const visViewer = this.visViewer();
-            this.setActiveDragger();
-            this.clearSlices();
-            this.clearOverlay();
-            this.clearSelected();
-            this.loaders.forEach((loader) => loader.dispose());
-            this.loaders = [];
-            visViewer.clear();
-            visViewer.createLocalDatabase();
-            this.syncOptions();
-            this.syncOverlay();
-            this.update(true);
-            this.emitEvent({ type: "clear" });
-            return this;
+            return entityId;
         }
         getMarkupColor() {
             console.warn("Viewer.getMarkupColor() has been deprecated since 25.11 and will be removed in a future release, use Viewer.markup.getMarkupColor() instead.");
@@ -18457,113 +18689,43 @@ js: import "konva/skia-backend";
         colorizeSelectedMarkups(r = 255, g = 0, b = 0) {
             this._markup.colorizeSelectedMarkups(r, g, b);
         }
-        addMarkupEntity(entityName) {
-            if (!this.visualizeJs)
-                return null;
-            this.syncOverlay();
-            const visViewer = this.visViewer();
-            const model = visViewer.getMarkupModel();
-            const entityId = model.appendEntity(entityName);
-            const entityPtr = entityId.openObject();
-            const color = this.getMarkupColor();
-            entityPtr.setColor(color.r, color.g, color.b);
-            entityPtr.setLineWeight(2);
-            entityPtr.delete();
-            this.update();
-            return entityId;
+        scheduleUpdateAsync(maxScheduleUpdateTimeInMs = 50) {
+            return new Promise((resolve, reject) => {
+                setTimeout(() => {
+                    var _a, _b, _c;
+                    try {
+                        if (this._enableAutoUpdate) {
+                            (_a = this.visViewer()) === null || _a === void 0 ? void 0 : _a.update(maxScheduleUpdateTimeInMs);
+                            (_c = (_b = this._activeDragger) === null || _b === void 0 ? void 0 : _b.updatePreview) === null || _c === void 0 ? void 0 : _c.call(_b);
+                        }
+                        this.emitEvent({ type: "update", data: false });
+                        resolve();
+                    }
+                    catch (e) {
+                        console.error(e);
+                        reject();
+                    }
+                }, 0);
+            });
         }
-        drawViewpoint(viewpoint) {
-            var _a;
+        async updateAsync(maxScheduleUpdateTimeInMs = 50, maxScheduleUpdateCount = 50) {
             if (!this.visualizeJs)
                 return;
-            const draggerName = (_a = this._activeDragger) === null || _a === void 0 ? void 0 : _a.name;
-            this.setActiveDragger();
-            this.clearSlices();
-            this.clearOverlay();
-            this.clearSelected();
-            this.showAll();
-            this.explode();
-            this.setOrthogonalCameraSettings(viewpoint.orthogonal_camera);
-            this.setClippingPlanes(viewpoint.clipping_planes);
-            this.setSelection(viewpoint.selection);
-            this._markup.setViewpoint(viewpoint);
-            this.setActiveDragger(draggerName);
-            this.emitEvent({ type: "drawviewpoint", data: viewpoint });
-            this.update();
-        }
-        createViewpoint() {
-            if (!this.visualizeJs)
-                return {};
-            const viewpoint = {};
-            viewpoint.orthogonal_camera = this.getOrthogonalCameraSettings();
-            viewpoint.clipping_planes = this.getClippingPlanes();
-            viewpoint.selection = this.getSelection();
-            viewpoint.description = new Date().toDateString();
-            this._markup.getViewpoint(viewpoint);
-            this.emitEvent({ type: "createviewpoint", data: viewpoint });
-            return viewpoint;
-        }
-        getPoint3dFromArray(array) {
-            return { x: array[0], y: array[1], z: array[2] };
-        }
-        getLogicalPoint3dAsArray(point3d) {
-            return [point3d.x, point3d.y, point3d.z];
-        }
-        getOrthogonalCameraSettings() {
-            const visViewer = this.visViewer();
-            const activeView = visViewer.activeView;
-            return {
-                view_point: this.getPoint3dFromArray(activeView.viewPosition),
-                direction: this.getPoint3dFromArray(activeView.viewTarget),
-                up_vector: this.getPoint3dFromArray(activeView.upVector),
-                field_width: activeView.viewFieldWidth,
-                field_height: activeView.viewFieldHeight,
-                view_to_world_scale: 1,
-            };
-        }
-        setOrthogonalCameraSettings(settings) {
-            const visViewer = this.visViewer();
-            const activeView = visViewer.activeView;
-            if (settings) {
-                activeView.setView(this.getLogicalPoint3dAsArray(settings.view_point), this.getLogicalPoint3dAsArray(settings.direction), this.getLogicalPoint3dAsArray(settings.up_vector), settings.field_width, settings.field_height, true);
-                this.syncOverlay();
+            this._isRunAsyncUpdate = true;
+            try {
+                const device = this.visViewer().getActiveDevice();
+                for (let iterationCount = 0; !device.isValid() && iterationCount < maxScheduleUpdateCount; iterationCount++) {
+                    await this.scheduleUpdateAsync(maxScheduleUpdateTimeInMs);
+                }
+                await this.scheduleUpdateAsync(maxScheduleUpdateTimeInMs);
             }
-        }
-        getClippingPlanes() {
-            const visViewer = this.visViewer();
-            const activeView = visViewer.activeView;
-            const clipping_planes = [];
-            for (let i = 0; i < activeView.numCuttingPlanes(); i++) {
-                const cuttingPlane = activeView.getCuttingPlane(i);
-                const clipping_plane = {
-                    location: this.getPoint3dFromArray(cuttingPlane.getOrigin()),
-                    direction: this.getPoint3dFromArray(cuttingPlane.normal()),
-                };
-                clipping_planes.push(clipping_plane);
+            catch (e) {
+                console.error(e);
             }
-            return clipping_planes;
-        }
-        setClippingPlanes(clipping_planes) {
-            if (clipping_planes) {
-                const visViewer = this.visViewer();
-                const activeView = visViewer.activeView;
-                for (const clipping_plane of clipping_planes) {
-                    const cuttingPlane = new (this.visLib().OdTvPlane)();
-                    cuttingPlane.set(this.getLogicalPoint3dAsArray(clipping_plane.location), this.getLogicalPoint3dAsArray(clipping_plane.direction));
-                    activeView.addCuttingPlane(cuttingPlane);
-                    activeView.setEnableCuttingPlaneFill(true, 0x66, 0x66, 0x66);
-                }
+            finally {
+                this._isRunAsyncUpdate = false;
             }
         }
-        getSelection() {
-            return this.getSelected().map((handle) => ({ handle }));
-        }
-        setSelection(selection) {
-            this.setSelected(selection === null || selection === void 0 ? void 0 : selection.map((component) => component.handle));
-        }
-        executeCommand(id, ...args) {
-            return commands.executeCommand(id, this, ...args);
-        }
         deviceAutoRegeneration() {
             const visViewer = this.visViewer();
             const device = visViewer.getActiveDevice();
@@ -18580,6 +18742,7 @@ js: import "konva/skia-backend";
     exports.Component = Component;
     exports.Dragger = Dragger;
     exports.FileLoader = FileLoader;
+    exports.Info = Info;
     exports.Loader = Loader;
     exports.Markup = KonvaMarkup;
     exports.OdBaseDragger = OdBaseDragger;