@inweb/viewer-visualize 26.10.6 → 26.11.0

package/dist/viewer-visualize.module.js

@@ -213,8 +213,8 @@ class OdBaseDragger extends OdaGeAction {
             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) {
@@ -402,8 +402,9 @@ class MeasureLineItem {
         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 = {
@@ -488,10 +489,9 @@ class MeasureLineItem {
                 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";
@@ -499,9 +499,8 @@ class MeasureLineItem {
                 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";
@@ -509,7 +508,7 @@ class MeasureLineItem {
                 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";
@@ -519,11 +518,43 @@ class MeasureLineItem {
     }
     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();
@@ -556,6 +587,10 @@ class MeasureLineItem {
         this.scale = scale;
         this.drawMeasureLine();
     }
+    setPrecision(precision) {
+        this.precision = precision;
+        this.drawMeasureLine();
+    }
     setStyle(style) {
         this.style = style;
         this.drawMeasureLine();
@@ -578,14 +613,14 @@ function renameUnit(table, unit) {
 }
 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",
@@ -595,13 +630,14 @@ class MeasureLineDragger extends OdBaseDragger {
             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();
@@ -696,8 +732,9 @@ class MeasureLineDragger extends OdBaseDragger {
         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);
@@ -708,29 +745,49 @@ class MeasureLineDragger extends OdBaseDragger {
         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);
+                }
             }
         });
     }
@@ -764,6 +821,9 @@ class MeasureLineDragger extends OdBaseDragger {
             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;
@@ -819,7 +879,7 @@ class OdJoyStickDragger {
                 callback({
                     x: 100 * ((movedX - centerX) / maxMoveStick),
                     y: 100 * ((movedY - centerY) / maxMoveStick) * -1,
-                    global: global,
+                    global,
                 });
             }
         };
@@ -834,7 +894,7 @@ class OdJoyStickDragger {
             callback({
                 x: 100 * ((movedX - centerX) / maxMoveStick),
                 y: 100 * ((movedY - centerY) / maxMoveStick) * -1,
-                global: global,
+                global,
             });
         };
         this.drawExternal = () => {
@@ -2325,7 +2385,8 @@ function clearSelected(viewer) {
     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) {
@@ -2401,6 +2462,13 @@ function getSelected(viewer) {
     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;
@@ -2408,7 +2476,8 @@ function hideSelected(viewer) {
     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) {
@@ -2456,9 +2525,9 @@ function selectModel(viewer, handle) {
         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;
         }
@@ -2485,13 +2554,14 @@ function setMarkupColor(viewer, r = 255, g = 0, b = 0) {
     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);
@@ -2499,9 +2569,25 @@ function setSelected(viewer, handles = []) {
     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;
@@ -2624,6 +2710,7 @@ commands.registerCommand("collect", collect);
 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);
@@ -2633,6 +2720,7 @@ commands.registerCommand("setActiveDragger", setActiveDragger);
 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);
@@ -2981,6 +3069,10 @@ components.registerComponent("ZoomWheelComponent", (viewer) => new ZoomWheelComp
 components.registerComponent("GestureManagerComponent", (viewer) => new GestureManagerComponent(viewer));
 components.registerComponent("ResetComponent", (viewer) => new ResetComponent(viewer));
 
+class ModelImpl {
+    dispose() { }
+}
+
 class FileLoader {
     constructor() {
         this.requestHeader = {};
@@ -3064,7 +3156,7 @@ class VSFFileLoader extends Loader {
         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();
@@ -3088,6 +3180,9 @@ class VSFFileLoader extends Loader {
             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);
@@ -3131,6 +3226,9 @@ class VSFCloudLoader extends Loader {
                 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);
@@ -3155,7 +3253,7 @@ class VSFXFileLoader extends Loader {
         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();
@@ -3179,6 +3277,9 @@ class VSFXFileLoader extends Loader {
             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);
@@ -3199,7 +3300,7 @@ class VSFXCloudLoader extends Loader {
             /.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();
@@ -3218,6 +3319,9 @@ class VSFXCloudLoader extends Loader {
             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);
@@ -3296,6 +3400,9 @@ class VSFXCloudStreamingLoader extends Loader {
                 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);
@@ -3330,7 +3437,7 @@ class VSFXCloudPartialLoader extends Loader {
             /.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();
@@ -3356,6 +3463,9 @@ class VSFXCloudPartialLoader extends Loader {
             }
             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);
@@ -3844,27 +3954,34 @@ class Viewer extends EventEmitter2 {
         super();
         this._visualizeJsUrl = "";
         this.configure(params);
-        this._options = new Options(this);
         this.client = client;
+        this.options = new Options(this);
         this.loaders = [];
+        this.models = [];
+        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;
     }
@@ -3873,13 +3990,20 @@ class Viewer extends EventEmitter2 {
         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";
@@ -3947,6 +4071,26 @@ class Viewer extends EventEmitter2 {
         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)
@@ -3965,133 +4109,222 @@ class Viewer extends EventEmitter2 {
         (_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;
+        const visLib = this.visLib();
+        const visViewer = this.visViewer();
+        const device = visViewer.getActiveDevice();
+        if (isExist(options.sceneGraph)) {
+            device.setOptionBool(visLib.DeviceOptions.kDelaySceneGraphProc, !options.sceneGraph);
+        }
+        device.delete();
+        this.update();
+    }
+    async open(file, params = {}) {
+        if (!this.visualizeJs)
+            return this;
+        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 (model && typeof model.database === "string") {
+            file = model.file;
+        }
+        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 {
-            const device = this.visViewer().getActiveDevice();
-            for (let iterationCount = 0; !device.isValid() && iterationCount < maxScheduleUpdateCount; iterationCount++) {
-                await this.scheduleUpdateAsync(maxScheduleUpdateTimeInMs);
-            }
-            await this.scheduleUpdateAsync(maxScheduleUpdateTimeInMs);
+            await this.loadReferences(model);
+            await loader.load(model, format, params);
         }
-        catch (e) {
-            console.error(e);
+        catch (error) {
+            this.emitEvent({ type: "geometryerror", data: error, file, model });
+            throw error;
         }
-        finally {
-            this._isRunAsyncUpdate = false;
+        this.emitEvent({ type: "geometryend", file, model });
+        if (this.visualizeJs) {
+            this.applyModelTransformMatrix(model);
+            this.applySceneGraphSettings();
         }
+        return this;
     }
-    get visualizeJs() {
-        return this._visualizeJs;
-    }
-    visLib() {
-        return this._visualizeJs;
-    }
-    visViewer() {
-        return this._viewer;
-    }
-    syncOpenCloudVisualStyle() {
+    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;
-        const visLib = this.visLib();
+        this.cancel();
+        this.clear();
+        this.emitEvent({ type: "open", mode: "file", file: "", buffer });
         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;
+        this.emitEvent({ type: "geometrystart", file: "", buffer });
         try {
-            visualStyleId = visViewer.findVisualStyle("OpenCloud");
-        }
-        catch {
-            visualStyleId = undefined;
+            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 });
         }
-        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();
+        catch (error) {
+            this.emitEvent({ type: "geometryerror", data: error, file: "", buffer });
+            throw error;
         }
-        view.visualStyle = visualStyleId;
-        view.delete();
-        device.delete();
+        this.emitEvent({ type: "geometryend", file: "", buffer });
         return this;
     }
-    syncOptions(options = this.options) {
+    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.syncOpenCloudVisualStyle();
-        const visLib = this.visLib();
+        this.cancel();
+        this.clear();
+        this.emitEvent({ type: "open", mode: "file", file: "", buffer });
         const visViewer = this.visViewer();
-        const device = visViewer.getActiveDevice();
-        if (device.isNull())
-            return this;
-        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;
+        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;
-            const canvas = visLib.canvas;
-            device.invalidate([0, canvas.width, canvas.height, 0]);
         }
         if (options.groundShadow !== visViewer.groundShadow) {
             visViewer.groundShadow = options.groundShadow;
@@ -4117,17 +4350,7 @@ class Viewer extends EventEmitter2 {
             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();
@@ -4154,19 +4377,80 @@ class Viewer extends EventEmitter2 {
             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.");
@@ -4213,55 +4497,102 @@ class Viewer extends EventEmitter2 {
     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)
@@ -4296,184 +4627,23 @@ class Viewer extends EventEmitter2 {
             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.");
@@ -4490,113 +4660,43 @@ class Viewer extends EventEmitter2 {
     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();