@inweb/viewer-visualize 26.9.1 → 26.9.3

package/dist/viewer-visualize.module.js

@@ -14,7 +14,7 @@ class OdaGeAction {
             var _a;
             const extView = this.m_module.getViewer().getActiveTvExtendedView();
             extView.setView(params.position, params.target, params.upVector, params.viewFieldWidth, params.viewFieldHeight, params.perspective);
-            (_a = extView.delete) === null || _a === undefined ? undefined : _a.call(extView);
+            (_a = extView.delete) === null || _a === void 0 ? void 0 : _a.call(extView);
         };
         this.getViewParams = () => {
             var _a;
@@ -27,7 +27,7 @@ class OdaGeAction {
                 viewFieldHeight: view.viewFieldHeight,
                 perspective: view.perspective
             };
-            (_a = view.delete) === null || _a === undefined ? undefined : _a.call(view);
+            (_a = view.delete) === null || _a === void 0 ? void 0 : _a.call(view);
             return obj;
         };
         this.m_module = module;
@@ -132,13 +132,13 @@ class OdBaseDragger extends OdaGeAction {
         this.canvasEvents = CANVAS_EVENTS;
     }
     initialize() {
-        this.canvasEvents = this.canvasEvents.filter((x => typeof this[x] === "function"));
-        this.canvasEvents.forEach((x => this[x] = this[x].bind(this)));
-        this.canvasEvents.forEach((x => this.subject.on(x, this[x])));
+        this.canvasEvents = this.canvasEvents.filter(x => typeof this[x] === "function");
+        this.canvasEvents.forEach(x => this[x] = this[x].bind(this));
+        this.canvasEvents.forEach(x => this.subject.on(x, this[x]));
         this.getViewer().setEnableAutoSelect(!!this.autoSelect);
     }
     dispose() {
-        this.canvasEvents.forEach((x => this.subject.off(x, this[x])));
+        this.canvasEvents.forEach(x => this.subject.off(x, this[x]));
     }
     relativeCoords(event) {
         return {
@@ -249,7 +249,7 @@ class OdBaseDragger extends OdaGeAction {
     deleteAll(objects) {
         var _a;
         for (const obj of objects) {
-            (_a = obj === null || obj === undefined ? undefined : obj.delete) === null || _a === undefined ? undefined : _a.call(obj);
+            (_a = obj === null || obj === void 0 ? void 0 : obj.delete) === null || _a === void 0 ? void 0 : _a.call(obj);
         }
     }
     updatePreview() {}
@@ -618,7 +618,7 @@ class MeasureLineDragger extends OdBaseDragger {
         };
         this.items = [];
         this.canvasEvents.push("resize");
-        this.oldRulerUnit = (_a = subject.options.rulerUnit) !== null && _a !== undefined ? _a : "Default";
+        this.oldRulerUnit = (_a = subject.options.rulerUnit) !== null && _a !== void 0 ? _a : "Default";
         this.optionsChange = this.optionsChange.bind(this);
     }
     initialize() {
@@ -638,7 +638,7 @@ class MeasureLineDragger extends OdBaseDragger {
         this.subject.removeEventListener("optionschange", this.optionsChange);
     }
     updatePreview() {
-        this.items.forEach((item => item.update()));
+        this.items.forEach(item => item.update());
     }
     resize() {
         const rect = this.m_module.canvas.getBoundingClientRect();
@@ -727,13 +727,13 @@ class MeasureLineDragger extends OdBaseDragger {
     optionsChange(event) {
         var _a;
         const options = event.data;
-        const toUnitName = (_a = options.rulerUnit) !== null && _a !== undefined ? _a : "Default";
+        const toUnitName = (_a = options.rulerUnit) !== null && _a !== void 0 ? _a : "Default";
         if (this.oldRulerUnit === toUnitName) return;
         this.oldRulerUnit = toUnitName;
         const drawingUnit = this.m_module.getViewer().getUnit();
         const eToUnit = this.getKUnitByName(toUnitName);
         const eFromUnit = this.getKUnitByName(drawingUnit);
-        this.items.forEach((item => {
+        this.items.forEach(item => {
             if (toUnitName === "Default") {
                 item.setUnit(renameUnit(this.renameUnitTable, drawingUnit));
                 item.setConversionFactor(1);
@@ -743,7 +743,7 @@ class MeasureLineDragger extends OdBaseDragger {
                 this.conversionFactor = 1 / multiplier;
                 item.setConversionFactor(this.conversionFactor);
             }
-        }));
+        });
     }
     getKUnitByName(unitName) {
         let eUnit = this.m_module.Units.kUserDefined;
@@ -852,7 +852,7 @@ class OdaWalkDragger extends OdBaseDragger {
             const model = this.viewer.getActiveModel();
             model.removeEntity(this.cameraId);
             model.delete();
-            (_a = this.cameraWalker) === null || _a === undefined ? undefined : _a.delete();
+            (_a = this.cameraWalker) === null || _a === void 0 ? void 0 : _a.delete();
         }
         if (this.viewParams) {
             this.setViewParams(this.viewParams);
@@ -938,6 +938,9 @@ class OdaWalkDragger extends OdBaseDragger {
                 }
             }
             this.subject.update();
+            this.subject.emitEvent({
+                type: "changecamera"
+            });
         }
         this.lastFrameTS = timestamp;
     }
@@ -958,6 +961,9 @@ class OdaWalkDragger extends OdBaseDragger {
             if (dltX !== 0) this.turnLeft(-dltX * this.deltaAngle);
             if (dltY !== 0) this.cameraWalker.turnDown(dltY * this.deltaAngle);
             this.subject.update();
+            this.subject.emitEvent({
+                type: "changecamera"
+            });
         }
     }
     turnLeft(angle) {
@@ -1207,7 +1213,13 @@ class OrbitAction {
         const extView = this.getViewer().getActiveTvExtendedView();
         extView.setView(viewParams.position, viewParams.target, viewParams.upVector, viewParams.viewFieldWidth, viewParams.viewFieldHeight, viewParams.perspective);
         extView.delete();
-        (_b = (_a = this._subject.activeDragger()) === null || _a === undefined ? undefined : _a.updatePreview) === null || _b === undefined ? undefined : _b.call(_a);
+        (_b = (_a = this._subject.activeDragger()) === null || _a === void 0 ? void 0 : _a.updatePreview) === null || _b === void 0 ? void 0 : _b.call(_a);
+        this._subject.emitEvent({
+            type: "orbit"
+        });
+        this._subject.emitEvent({
+            type: "changecamera"
+        });
     }
     endAction() {
         this._endInteractivity();
@@ -1312,7 +1324,7 @@ class OrbitAction {
     deleteAll(objects) {
         var _a;
         for (const obj of objects) {
-            (_a = obj === null || obj === undefined ? undefined : obj.delete) === null || _a === undefined ? undefined : _a.call(obj);
+            (_a = obj === null || obj === void 0 ? void 0 : obj.delete) === null || _a === void 0 ? void 0 : _a.call(obj);
         }
     }
 }
@@ -1379,7 +1391,7 @@ class PanAction {
         targetWithDelta.delete();
         position.delete();
         positionWithDelta.delete();
-        (_b = (_a = this._subject.activeDragger()) === null || _a === undefined ? undefined : _a.updatePreview) === null || _b === undefined ? undefined : _b.call(_a);
+        (_b = (_a = this._subject.activeDragger()) === null || _a === void 0 ? void 0 : _a.updatePreview) === null || _b === void 0 ? void 0 : _b.call(_a);
         this._subject.emitEvent({
             type: "pan",
             x: absoluteX,
@@ -1387,6 +1399,9 @@ class PanAction {
             dX: absoluteX - this._deltaScreenPosition.x,
             dY: absoluteY - this._deltaScreenPosition.y
         });
+        this._subject.emitEvent({
+            type: "changecamera"
+        });
         this._deltaScreenPosition = {
             x: absoluteX,
             y: absoluteY
@@ -1432,13 +1447,16 @@ class ZoomAction {
         const viewer = this._m_module.getViewer();
         viewer.zoomAt(zoomFactor, x, y);
         this._subject.deviceAutoRegeneration();
-        (_b = (_a = this._subject.activeDragger()) === null || _a === undefined ? undefined : _a.updatePreview) === null || _b === undefined ? undefined : _b.call(_a);
+        (_b = (_a = this._subject.activeDragger()) === null || _a === void 0 ? void 0 : _a.updatePreview) === null || _b === void 0 ? void 0 : _b.call(_a);
         this._subject.emitEvent({
             type: "zoomat",
             data: zoomFactor,
             x: absoluteX,
             y: absoluteY
         });
+        this._subject.emitEvent({
+            type: "changecamera"
+        });
     }
 }
 
@@ -1510,11 +1528,11 @@ class OdZoomWheelDragger extends OdBaseDragger {
                 clearTimeout(this._endInteractivityTimeOutId);
             }
             this.subject.update(true);
-            this._endInteractivityTimeOutId = setTimeout((() => {
+            this._endInteractivityTimeOutId = setTimeout(() => {
                 this._endInteractivityTimeOutId = undefined;
                 this.endInteractivity();
                 this._isEnableInteractivityMode = false;
-            }), INTERACTIVITY_TIME_OUT);
+            }, INTERACTIVITY_TIME_OUT);
         }
     }
     dispose() {
@@ -1743,27 +1761,27 @@ class OrbitAroundBuildingDragger extends OdBaseDragger {
 
 const draggers = draggersRegistry("visualizejs");
 
-draggers.registerDragger("Pan", (viewer => new OdPanDragger(viewer)));
+draggers.registerDragger("Pan", viewer => new OdPanDragger(viewer));
 
-draggers.registerDragger("Orbit", (viewer => new OdOrbitDragger(viewer)));
+draggers.registerDragger("Orbit", viewer => new OdOrbitDragger(viewer));
 
-draggers.registerDragger("Zoom", (viewer => new OdZoomDragger(viewer)));
+draggers.registerDragger("Zoom", viewer => new OdZoomDragger(viewer));
 
-draggers.registerDragger("ZoomWindow", (viewer => new OdZoomWindowDragger(viewer)));
+draggers.registerDragger("ZoomWindow", viewer => new OdZoomWindowDragger(viewer));
 
-draggers.registerDragger("ZoomWheel", (viewer => new OdZoomWheelDragger(viewer)));
+draggers.registerDragger("ZoomWheel", viewer => new OdZoomWheelDragger(viewer));
 
-draggers.registerDragger("OrbitAroundBuilding", (viewer => new OrbitAroundBuildingDragger(viewer)));
+draggers.registerDragger("OrbitAroundBuilding", viewer => new OrbitAroundBuildingDragger(viewer));
 
-draggers.registerDragger("MeasureLine", (viewer => new MeasureLineDragger(viewer)));
+draggers.registerDragger("MeasureLine", viewer => new MeasureLineDragger(viewer));
 
-draggers.registerDragger("CuttingPlaneXAxis", (viewer => new OdCuttingPlaneXAxisDragger(viewer)));
+draggers.registerDragger("CuttingPlaneXAxis", viewer => new OdCuttingPlaneXAxisDragger(viewer));
 
-draggers.registerDragger("CuttingPlaneYAxis", (viewer => new OdCuttingPlaneYAxisDragger(viewer)));
+draggers.registerDragger("CuttingPlaneYAxis", viewer => new OdCuttingPlaneYAxisDragger(viewer));
 
-draggers.registerDragger("CuttingPlaneZAxis", (viewer => new OdCuttingPlaneZAxisDragger(viewer)));
+draggers.registerDragger("CuttingPlaneZAxis", viewer => new OdCuttingPlaneZAxisDragger(viewer));
 
-draggers.registerDragger("Walk", (viewer => new OdaWalkDragger(viewer)));
+draggers.registerDragger("Walk", viewer => new OdaWalkDragger(viewer));
 
 const composeMatrixFromTransform = (transform, modelCenter, visLib) => {
     const {translate: translate, scale: scale, rotation: rotation} = transform;
@@ -1781,7 +1799,7 @@ function applyModelTransform(viewer, model) {
     if (!viewer.visualizeJs) return;
     if (!model.getModelTransformMatrix) return;
     const visLib = viewer.visLib();
-    const visViewer = visLib.getViewer();
+    const visViewer = viewer.visViewer();
     const modelItr = visViewer.getModelIterator();
     for (;!modelItr.done(); modelItr.step()) {
         const modelPtr = modelItr.getModel();
@@ -1794,7 +1812,7 @@ function applyModelTransform(viewer, model) {
         }
     }
     modelItr.delete();
-    (_a = visViewer.clearViewExtentsCache) === null || _a === undefined ? undefined : _a.call(visViewer);
+    (_a = visViewer.clearViewExtentsCache) === null || _a === void 0 ? void 0 : _a.call(visViewer);
     viewer.update();
 }
 
@@ -1821,7 +1839,7 @@ function clearSlices(viewer) {
 function createPreview(viewer, type = "image/jpeg", encoderOptions = .25) {
     var _a;
     if (!viewer.visualizeJs) return "";
-    return ((_a = viewer.canvas) === null || _a === undefined ? undefined : _a.toDataURL(type, encoderOptions)) || "";
+    return ((_a = viewer.canvas) === null || _a === void 0 ? void 0 : _a.toDataURL(type, encoderOptions)) || "";
 }
 
 function explode(viewer, index = 0) {
@@ -1843,7 +1861,7 @@ function getDefaultViewPositions(viewer) {
     if (!viewer.visualizeJs) return [];
     const visLib = viewer.visLib();
     const defViewPos = visLib.DefaultViewPosition;
-    return Object.keys(defViewPos).filter((x => x !== "values"));
+    return Object.keys(defViewPos).filter(x => x !== "values");
 }
 
 function getModels(viewer) {
@@ -1979,12 +1997,12 @@ function setMarkupColor(viewer, r = 255, g = 0, b = 0) {
 function setSelected(viewer, handles = []) {
     if (!viewer.visualizeJs) return;
     const visLib = viewer.visLib();
-    const visViewer = visLib.getViewer();
+    const visViewer = viewer.visViewer();
     const selectionSet = new visLib.OdTvSelectionSet;
-    handles === null || handles === undefined ? undefined : handles.forEach((handle => {
+    handles === null || handles === void 0 ? void 0 : handles.forEach(handle => {
         const entityId = visViewer.getEntityByOriginalHandle(handle + "");
         if (!entityId.isNull()) selectionSet.appendEntity(entityId);
-    }));
+    });
     visViewer.setSelected(selectionSet);
     viewer.update();
     viewer.emitEvent({
@@ -2026,11 +2044,11 @@ function zoomToObjects(viewer, handles = []) {
     const visLib = viewer.visLib();
     const visViewer = viewer.visViewer();
     const selectionSet = new visLib.OdTvSelectionSet;
-    handles.forEach((handle => {
+    handles.forEach(handle => {
         const entityId = visViewer.getEntityByOriginalHandle(handle + "");
         if (!entityId.isNull()) selectionSet.appendEntity(entityId);
-    }));
-    (_a = visViewer.zoomToObjects) === null || _a === undefined ? undefined : _a.call(visViewer, selectionSet);
+    });
+    (_a = visViewer.zoomToObjects) === null || _a === void 0 ? void 0 : _a.call(visViewer, selectionSet);
     viewer.deviceAutoRegeneration();
     viewer.update();
     viewer.emitEvent({
@@ -2044,7 +2062,7 @@ function zoomToSelected(viewer) {
     if (!viewer.visualizeJs) return;
     const visViewer = viewer.visViewer();
     const selectionSet = visViewer.getSelected();
-    (_a = visViewer.zoomToObjects) === null || _a === undefined ? undefined : _a.call(visViewer, selectionSet);
+    (_a = visViewer.zoomToObjects) === null || _a === void 0 ? void 0 : _a.call(visViewer, selectionSet);
     viewer.deviceAutoRegeneration();
     viewer.update();
     viewer.emitEvent({
@@ -2061,7 +2079,7 @@ async function autoTransformAllModelsToCentralPoint(viewer, model) {
     if (!viewer.visualizeJs) return;
     if (!model.getModelTransformMatrix) return;
     const visLib = viewer.visLib();
-    const visViewer = visLib.getViewer();
+    const visViewer = viewer.visViewer();
     const viewExt = visViewer.getActiveExtents();
     const centralPoint = viewExt.center();
     const modelItr = visViewer.getModelIterator();
@@ -2102,7 +2120,7 @@ async function autoTransformAllModelsToCentralPoint(viewer, model) {
         modelPtr.delete();
     }
     modelItr.delete();
-    (_a = visViewer.clearViewExtentsCache) === null || _a === undefined ? undefined : _a.call(visViewer);
+    (_a = visViewer.clearViewExtentsCache) === null || _a === void 0 ? void 0 : _a.call(visViewer);
     viewer.update();
 }
 
@@ -2156,25 +2174,25 @@ commands.registerCommand("zoomToSelected", zoomToSelected);
 
 commands.registerCommand("autoTransformAllModelsToCentralPoint", autoTransformAllModelsToCentralPoint);
 
-commands.registerCommand("k3DViewTop", (viewer => setDefaultViewPosition(viewer, "k3DViewTop")));
+commands.registerCommand("k3DViewTop", viewer => setDefaultViewPosition(viewer, "k3DViewTop"));
 
-commands.registerCommand("k3DViewBottom", (viewer => setDefaultViewPosition(viewer, "k3DViewBottom")));
+commands.registerCommand("k3DViewBottom", viewer => setDefaultViewPosition(viewer, "k3DViewBottom"));
 
-commands.registerCommand("k3DViewLeft", (viewer => setDefaultViewPosition(viewer, "k3DViewLeft")));
+commands.registerCommand("k3DViewLeft", viewer => setDefaultViewPosition(viewer, "k3DViewLeft"));
 
-commands.registerCommand("k3DViewRight", (viewer => setDefaultViewPosition(viewer, "k3DViewRight")));
+commands.registerCommand("k3DViewRight", viewer => setDefaultViewPosition(viewer, "k3DViewRight"));
 
-commands.registerCommand("k3DViewFront", (viewer => setDefaultViewPosition(viewer, "k3DViewFront")));
+commands.registerCommand("k3DViewFront", viewer => setDefaultViewPosition(viewer, "k3DViewFront"));
 
-commands.registerCommand("k3DViewBack", (viewer => setDefaultViewPosition(viewer, "k3DViewBack")));
+commands.registerCommand("k3DViewBack", viewer => setDefaultViewPosition(viewer, "k3DViewBack"));
 
-commands.registerCommand("k3DViewSE", (viewer => setDefaultViewPosition(viewer, "k3DViewSE")));
+commands.registerCommand("k3DViewSE", viewer => setDefaultViewPosition(viewer, "k3DViewSE"));
 
-commands.registerCommand("k3DViewSW", (viewer => setDefaultViewPosition(viewer, "k3DViewSW")));
+commands.registerCommand("k3DViewSW", viewer => setDefaultViewPosition(viewer, "k3DViewSW"));
 
-commands.registerCommand("k3DViewNE", (viewer => setDefaultViewPosition(viewer, "k3DViewNE")));
+commands.registerCommand("k3DViewNE", viewer => setDefaultViewPosition(viewer, "k3DViewNE"));
 
-commands.registerCommand("k3DViewNW", (viewer => setDefaultViewPosition(viewer, "k3DViewNW")));
+commands.registerCommand("k3DViewNW", viewer => setDefaultViewPosition(viewer, "k3DViewNW"));
 
 commands.registerCommandAlias("clearMarkup", "clearOverlay");
 
@@ -2202,8 +2220,10 @@ class RenderLoopComponent {
 
 class ResizeCanvasComponent {
     constructor(viewer) {
-        this.resizeViewer = () => {
-            this.viewer.resize();
+        this.resizeViewer = entries => {
+            const {width: width, height: height} = entries[0].contentRect;
+            if (!width || !height) return;
+            this.viewer.setSize(width, height);
         };
         this.viewer = viewer;
         this.resizeObserver = new ResizeObserver(this.resizeViewer);
@@ -2417,13 +2437,13 @@ class GestureManagerComponent {
 
 const components = componentsRegistry("visualizejs");
 
-components.registerComponent("ResizeCanvasComponent", (viewer => new ResizeCanvasComponent(viewer)));
+components.registerComponent("ResizeCanvasComponent", viewer => new ResizeCanvasComponent(viewer));
 
-components.registerComponent("RenderLoopComponent", (viewer => new RenderLoopComponent(viewer)));
+components.registerComponent("RenderLoopComponent", viewer => new RenderLoopComponent(viewer));
 
-components.registerComponent("ZoomWheelComponent", (viewer => new ZoomWheelComponent(viewer)));
+components.registerComponent("ZoomWheelComponent", viewer => new ZoomWheelComponent(viewer));
 
-components.registerComponent("GestureManagerComponent", (viewer => new GestureManagerComponent(viewer)));
+components.registerComponent("GestureManagerComponent", viewer => new GestureManagerComponent(viewer));
 
 class FileLoader {
     constructor() {
@@ -2447,7 +2467,7 @@ class FileLoader {
                 credentials: this.withCredentials ? "include" : "same-origin",
                 signal: this.abortSignal
             });
-            return fetch(request).then((response => {
+            return fetch(request).then(response => {
                 if (!response.ok) throw new Error(`Failed to fetch "${response.url}", status ${response.status}`);
                 const contentLength = response.headers.get("X-File-Size") || response.headers.get("Content-Length");
                 const total = parseInt(contentLength || "", 10) || 0;
@@ -2477,16 +2497,16 @@ class FileLoader {
                     }
                 });
                 return new Response(stream);
-            })).then((response => response.arrayBuffer()));
+            }).then(response => response.arrayBuffer());
         }
         if (file instanceof globalThis.File) {
-            return new Promise(((resolve, reject) => {
+            return new Promise((resolve, reject) => {
                 const reader = new FileReader;
                 reader.onload = () => resolve(reader.result);
                 reader.onerror = () => reject(reader.error);
                 reader.onprogress = onProgress;
                 reader.readAsArrayBuffer(new Blob([ file ]));
-            }));
+            });
         }
         if (onProgress) {
             const total = file.byteLength;
@@ -2512,6 +2532,7 @@ class VSFFileLoader extends Loader {
     }
     async load(file, format, params) {
         if (!this.viewer.visualizeJs) return this;
+        const visViewer = this.viewer.visViewer();
         const progress = event => {
             const {lengthComputable: lengthComputable, loaded: loaded, total: total} = event;
             const progress = lengthComputable ? loaded / total : 1;
@@ -2525,15 +2546,18 @@ class VSFFileLoader extends Loader {
         loader.setRequestHeader(params.requestHeader);
         loader.setWithCredentials(params.withCredentials);
         loader.setAbortSignal(this.abortController.signal);
-        const buffer = await loader.load(file, progress);
-        const data = new Uint8Array(buffer);
-        const visLib = this.viewer.visLib();
-        const visViewer = visLib.getViewer();
-        visViewer.parseFile(data);
-        this.viewer.syncOpenCloudVisualStyle(false);
+        const arrayBuffer = await loader.load(file, progress);
+        const data = new Uint8Array(arrayBuffer);
+        if (!this.viewer.visualizeJs) return this;
+        try {
+            visViewer.parseFile(data);
+        } catch (error) {
+            console.error("VSF parse error.", error);
+            throw error;
+        }
         this.viewer.syncOptions();
         this.viewer.syncOverlay();
-        this.viewer.resize();
+        this.viewer.update(true);
         this.viewer.emitEvent({
             type: "databasechunk",
             data: data,
@@ -2553,8 +2577,7 @@ class VSFCloudLoader extends Loader {
     }
     async load(model, format) {
         if (!this.viewer.visualizeJs) return this;
-        const visLib = this.viewer.visLib();
-        const visViewer = visLib.getViewer();
+        const visViewer = this.viewer.visViewer();
         const filesToDownload = [ model.database, ...model.geometry ];
         console.time("File load time");
         for (let i = 0; i < filesToDownload.length; i++) {
@@ -2569,15 +2592,18 @@ class VSFCloudLoader extends Loader {
                 });
             };
             const arrayBuffer = await model.downloadResource(dataId, progress, this.abortController.signal);
-            if (!this.viewer.visualizeJs) return this;
             const data = new Uint8Array(arrayBuffer);
-            visViewer.parseStream(data);
+            if (!this.viewer.visualizeJs) return this;
+            try {
+                visViewer.parseStream(data);
+            } catch (error) {
+                console.error("VSF parse error.", error);
+                throw error;
+            }
             if (i === 0) {
-                this.viewer.update(true);
-                this.viewer.syncOpenCloudVisualStyle(false);
                 this.viewer.syncOptions();
                 this.viewer.syncOverlay();
-                this.viewer.resize();
+                this.viewer.update(true);
                 this.viewer.emitEvent({
                     type: "databasechunk",
                     data: data,
@@ -2609,6 +2635,7 @@ class VSFXFileLoader extends Loader {
     }
     async load(file, format, params) {
         if (!this.viewer.visualizeJs) return this;
+        const visViewer = this.viewer.visViewer();
         const progress = event => {
             const {lengthComputable: lengthComputable, loaded: loaded, total: total} = event;
             const progress = lengthComputable ? loaded / total : 1;
@@ -2622,15 +2649,18 @@ class VSFXFileLoader extends Loader {
         loader.setRequestHeader(params.requestHeader);
         loader.setWithCredentials(params.withCredentials);
         loader.setAbortSignal(this.abortController.signal);
-        const buffer = await loader.load(file, progress);
-        const data = new Uint8Array(buffer);
-        const visLib = this.viewer.visLib();
-        const visViewer = visLib.getViewer();
-        visViewer.parseVsfx(data);
-        this.viewer.syncOpenCloudVisualStyle(false);
+        const arrayBuffer = await loader.load(file, progress);
+        const data = new Uint8Array(arrayBuffer);
+        if (!this.viewer.visualizeJs) return this;
+        try {
+            visViewer.parseVsfx(data);
+        } catch (error) {
+            console.error("VSFX parse error.", error);
+            throw error;
+        }
         this.viewer.syncOptions();
         this.viewer.syncOverlay();
-        this.viewer.resize();
+        this.viewer.update(true);
         this.viewer.emitEvent({
             type: "databasechunk",
             data: data,
@@ -2650,8 +2680,7 @@ class VSFXCloudLoader extends Loader {
     }
     async load(model, format, params = {}) {
         if (!this.viewer.visualizeJs) return Promise.resolve(this);
-        const visLib = this.viewer.visLib();
-        const visViewer = visLib.getViewer();
+        const visViewer = this.viewer.visViewer();
         const progress = progress => {
             this.viewer.emitEvent({
                 type: "geometryprogress",
@@ -2662,18 +2691,17 @@ class VSFXCloudLoader extends Loader {
         };
         console.time("File load time");
         const arrayBuffer = await model.downloadResource(model.database, progress, this.abortController.signal);
-        if (!this.viewer.visualizeJs) return this;
         const data = new Uint8Array(arrayBuffer);
+        if (!this.viewer.visualizeJs) return this;
         try {
             visViewer.parseVsfx(data);
         } catch (error) {
             console.error("VSFX parse error.", error);
             throw error;
         }
-        this.viewer.syncOpenCloudVisualStyle(false);
         this.viewer.syncOptions();
         this.viewer.syncOverlay();
-        this.viewer.resize();
+        this.viewer.update(true);
         this.viewer.emitEvent({
             type: "databasechunk",
             data: data,
@@ -2728,7 +2756,7 @@ class VSFXCloudStreamingLoader extends Loader {
     async load(model) {
         if (!this.viewer.visualizeJs) return this;
         const visLib = this.viewer.visLib();
-        const visViewer = visLib.getViewer();
+        const visViewer = this.viewer.visViewer();
         const updateController = new UpdateController;
         updateController.initialize(this.viewer);
         let isFireDatabaseChunk = false;
@@ -2741,24 +2769,21 @@ class VSFXCloudStreamingLoader extends Loader {
                 console.error("VSFX parse error.", error);
                 throw error;
             }
-            updateController.update(UpdateType.kDelay);
             this.viewer.emitEvent({
                 type: "geometryprogress",
                 data: progress,
                 file: model.file,
                 model: model
             });
-            let state = false;
+            let isDatabaseChunk = false;
             if (status === visLib.DatabaseStreamStatus.ReadyServiceData || status === visLib.DatabaseStreamStatus.Complete && !isFireDatabaseChunk) {
                 isFireDatabaseChunk = true;
-                state = true;
+                isDatabaseChunk = true;
             }
-            if (state) {
-                updateController.update(UpdateType.kForce);
-                this.viewer.syncOpenCloudVisualStyle(false);
+            if (isDatabaseChunk) {
                 this.viewer.syncOptions();
                 this.viewer.syncOverlay();
-                this.viewer.resize();
+                updateController.update(UpdateType.kForce);
                 this.viewer.emitEvent({
                     type: "databasechunk",
                     data: chunk,
@@ -2766,6 +2791,7 @@ class VSFXCloudStreamingLoader extends Loader {
                     model: model
                 });
             } else {
+                updateController.update(UpdateType.kDelay);
                 this.viewer.emitEvent({
                     type: "geometrychunk",
                     data: chunk,
@@ -2797,8 +2823,7 @@ class VSFXCloudPartialLoader extends Loader {
     }
     async load(model, format) {
         if (!this.viewer.visualizeJs) return this;
-        const visLib = this.viewer.visLib();
-        const visViewer = visLib.getViewer();
+        const visViewer = this.viewer.visViewer();
         let servicePartAborted = false;
         const pendingRequestsMap = new Map;
         let pendingRequestsTimerId = 0;
@@ -2810,26 +2835,23 @@ class VSFXCloudPartialLoader extends Loader {
         visViewer.memoryLimit = this.viewer.options.memoryLimit;
         const chunkLoadHandler = (progress, chunk, requestId = 0) => {
             if (!this.viewer.visualizeJs) return;
-            let state;
+            let isDatabaseChunk;
             try {
-                state = visViewer.parseVsfxInPartialMode(requestId, chunk);
+                isDatabaseChunk = visViewer.parseVsfxInPartialMode(requestId, chunk);
             } catch (error) {
                 console.error("VSFX parse error.", error);
                 throw error;
             }
-            updateController.update(UpdateType.kDelay);
             this.viewer.emitEvent({
                 type: "geometryprogress",
                 data: progress,
                 file: model.file,
                 model: model
             });
-            if (state) {
-                updateController.update(UpdateType.kForce);
-                this.viewer.syncOpenCloudVisualStyle(false);
+            if (isDatabaseChunk) {
                 this.viewer.syncOptions();
                 this.viewer.syncOverlay();
-                this.viewer.resize();
+                updateController.update(UpdateType.kForce);
                 this.viewer.emitEvent({
                     type: "databasechunk",
                     data: chunk,
@@ -2837,6 +2859,7 @@ class VSFXCloudPartialLoader extends Loader {
                     model: model
                 });
             } else {
+                updateController.update(UpdateType.kDelay);
                 this.viewer.emitEvent({
                     type: "geometrychunk",
                     data: chunk,
@@ -2858,7 +2881,7 @@ class VSFXCloudPartialLoader extends Loader {
                     model: model
                 });
             } finally {
-                ranges.forEach((range => visViewer.onRequestResponseComplete(range.requestId)));
+                ranges.forEach(range => visViewer.onRequestResponseComplete(range.requestId));
                 this.abortControllerForRequestMap.delete(requestId);
                 updateController.update(UpdateType.kNormal);
             }
@@ -2934,10 +2957,10 @@ class VSFXCloudPartialLoader extends Loader {
                     number: requestNumber + 1
                 });
                 if (pendingRequestsTimerId === 0) {
-                    pendingRequestsTimerId = window.setTimeout((() => {
+                    pendingRequestsTimerId = window.setTimeout(() => {
                         pendingRequestsAbortController.signal.removeEventListener("abort", pendingRequestsAbortHandler);
                         pendingRequestsTimerId = 0;
-                        pendingRequestsMap.forEach(((request, dataId) => {
+                        pendingRequestsMap.forEach((request, dataId) => {
                             if (request.ranges.length > 0) {
                                 pendingRequestsMap.set(dataId, {
                                     ranges: [],
@@ -2945,8 +2968,8 @@ class VSFXCloudPartialLoader extends Loader {
                                 });
                                 downloadResourceRange(dataId, requestId, request.ranges);
                             }
-                        }));
-                    }), PENDING_REQUESTS_TIMEOUT);
+                        });
+                    }, PENDING_REQUESTS_TIMEOUT);
                     pendingRequestsAbortController.signal.addEventListener("abort", pendingRequestsAbortHandler, {
                         once: true
                     });
@@ -2964,26 +2987,26 @@ class VSFXCloudPartialLoader extends Loader {
     }
     cancel() {
         super.cancel();
-        this.abortControllerForRequestMap.forEach((controller => controller.abort()));
+        this.abortControllerForRequestMap.forEach(controller => controller.abort());
     }
 }
 
 const loaders = loadersRegistry("visualizejs");
 
-loaders.registerLoader("vsf-file", (viewer => new VSFFileLoader(viewer)));
+loaders.registerLoader("vsf-file", viewer => new VSFFileLoader(viewer));
 
-loaders.registerLoader("vsf-cloud", (viewer => new VSFCloudLoader(viewer)));
+loaders.registerLoader("vsf-cloud", viewer => new VSFCloudLoader(viewer));
 
-loaders.registerLoader("vsfx-file", (viewer => new VSFXFileLoader(viewer)));
+loaders.registerLoader("vsfx-file", viewer => new VSFXFileLoader(viewer));
 
-loaders.registerLoader("vsfx-cloud", (viewer => new VSFXCloudLoader(viewer)));
+loaders.registerLoader("vsfx-cloud", viewer => new VSFXCloudLoader(viewer));
 
-loaders.registerLoader("vsfx-cloud-streaming", (viewer => new VSFXCloudStreamingLoader(viewer)));
+loaders.registerLoader("vsfx-cloud-streaming", viewer => new VSFXCloudStreamingLoader(viewer));
 
-loaders.registerLoader("vsfx-cloud-partial", (viewer => new VSFXCloudPartialLoader(viewer)));
+loaders.registerLoader("vsfx-cloud-partial", viewer => new VSFXCloudPartialLoader(viewer));
 
 function loadScript(url, params = {}) {
-    return new Promise(((resolve, reject) => {
+    return new Promise((resolve, reject) => {
         const script = document.createElement("script");
         script.src = url;
         script.async = true;
@@ -2994,7 +3017,7 @@ function loadScript(url, params = {}) {
             reject(new Error(`GET ${url} failed to load script`));
         };
         document.body.appendChild(script);
-    }));
+    });
 }
 
 function loadVisuazlizeJsScript(url, params) {
@@ -3011,7 +3034,7 @@ function loadVisuazlizeJsScript(url, params) {
 
 const loadVisualizeJs = async (url, onprogress, params = {}) => {
     const script = await loadVisuazlizeJsScript(url, params);
-    return await new Promise(((resolve, reject) => {
+    return await new Promise((resolve, reject) => {
         const options = {
             urlMemFile: url + ".wasm",
             TOTAL_MEMORY: 134217728,
@@ -3019,11 +3042,11 @@ const loadVisualizeJs = async (url, onprogress, params = {}) => {
         };
         const instance = window["getVisualizeLibInst"](options);
         instance.loadWasmError = reject;
-        instance.postRun.push((() => {
+        instance.postRun.push(() => {
             window["getVisualizeLibInst"].script = script;
             resolve(instance);
-        }));
-    }));
+        });
+    });
 };
 
 const MARKUP_ENTITY_LINE = "$MarkupTempEntity_Line";
@@ -3082,7 +3105,7 @@ class OdaTextDragger extends OdBaseDragger {
     dispose() {
         var _a;
         super.dispose();
-        (_a = this.textRef) === null || _a === undefined ? undefined : _a.remove();
+        (_a = this.textRef) === null || _a === void 0 ? void 0 : _a.remove();
         this.textRef = null;
     }
     _finishInput() {
@@ -3090,7 +3113,7 @@ class OdaTextDragger extends OdBaseDragger {
         if (this.textRef && this.textRef.value.trimLeft()) {
             this._updateFrame();
         }
-        (_a = this.textRef) === null || _a === undefined ? undefined : _a.remove();
+        (_a = this.textRef) === null || _a === void 0 ? void 0 : _a.remove();
         this.textRef = null;
     }
     start(x, y, absoluteX, absoluteY) {
@@ -3134,7 +3157,7 @@ class OdaTextDragger extends OdBaseDragger {
         const projMtrx = view.projectionMatrix;
         const mtrxNumber = projMtrx.get(1, 1);
         const tol = 1e-6;
-        if (!(mtrxNumber < tol && mtrxNumber > -1e-6)) {
+        if (!(mtrxNumber < tol && mtrxNumber > -tol)) {
             textScale = 1 / mtrxNumber;
         }
         const geomData = entityPtr.appendText(this.toGePoint(this.m_center), this.textRef.value.trimLeft());
@@ -3216,7 +3239,7 @@ class VisualizeMarkup {
         }
         if (!this._viewer.visualizeJs) return;
         const visLib = this._viewer.visLib();
-        const visViewer = visLib.getViewer();
+        const visViewer = this._viewer.visViewer();
         const activeView = visViewer.activeView;
         this._viewer.syncOverlay();
         const markupColor = viewpoint.custom_fields.markup_color || {
@@ -3267,7 +3290,7 @@ class VisualizeMarkup {
             };
         }
         const visLib = this._viewer.visLib();
-        const visViewer = visLib.getViewer();
+        const visViewer = this._viewer.visViewer();
         if (!viewpoint) viewpoint = {};
         viewpoint.lines = [];
         viewpoint.texts = [];
@@ -3370,8 +3393,8 @@ class Viewer extends EventEmitter2 {
         this._renderTime = 0;
         this.canvasEvents = CANVAS_EVENTS.slice();
         this.canvaseventlistener = event => this.emit(event);
-        this._enableAutoUpdate = (_a = params.enableAutoUpdate) !== null && _a !== undefined ? _a : true;
-        this._isNeedRender = false;
+        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);
@@ -3392,18 +3415,19 @@ class Viewer extends EventEmitter2 {
         return this;
     }
     async initialize(canvas, onProgress) {
-        this.addEventListener("optionschange", (event => this.syncOptions(event.data)));
-        if (canvas.style.width === "" && canvas.style.height === "") {
-            canvas.style.width = "100%";
-            canvas.style.height = "100%";
-        }
+        this.addEventListener("optionschange", event => this.syncOptions(event.data));
+        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.style.width = width + "px";
+        canvas.style.height = height + "px";
         canvas.parentElement.style.touchAction = "none";
         canvas.style.touchAction = "none";
-        canvas.width = canvas.clientWidth * window.devicePixelRatio;
-        canvas.height = canvas.clientHeight * window.devicePixelRatio;
         this._visualizeTimestamp = Date.now();
         const visualizeTimestamp = this._visualizeTimestamp;
-        const visualizeJs = await loadVisualizeJs(this.visualizeJsUrl, (event => {
+        const visualizeJs = await loadVisualizeJs(this.visualizeJsUrl, event => {
             const {loaded: loaded, total: total} = event;
             if (onProgress) onProgress(new ProgressEvent("progress", {
                 lengthComputable: true,
@@ -3416,21 +3440,20 @@ class Viewer extends EventEmitter2 {
                 loaded: loaded,
                 total: total
             });
-        }), {
+        }, {
             crossOrigin: this._crossOrigin
         });
         if (visualizeTimestamp !== this._visualizeTimestamp) throw new Error("Viewer error: dispose() was called before initialize() completed. Are you using React strict mode?");
         this._visualizeJs = visualizeJs;
-        this.visualizeJs.canvas = canvas;
-        this.visualizeJs.Viewer.create();
-        this.visualizeJs.getViewer().resize(0, canvas.width, canvas.height, 0);
+        this._visualizeJs.canvas = canvas;
+        this._viewer = visualizeJs.Viewer.create();
+        this._viewer.resize(0, canvas.width, canvas.height, 0);
         this.canvas = canvas;
-        this.canvasEvents.forEach((x => canvas.addEventListener(x, this.canvaseventlistener)));
+        this.canvasEvents.forEach(x => canvas.addEventListener(x, this.canvaseventlistener));
         this._markup.initialize(this.canvas, this.canvasEvents, this, this);
         for (const name of components.getComponents().keys()) {
             this._components.push(components.createComponent(name, this));
         }
-        this.syncOpenCloudVisualStyle(true);
         this.syncOptions();
         this.syncOverlay();
         this._renderTime = performance.now();
@@ -3448,64 +3471,69 @@ class Viewer extends EventEmitter2 {
         });
         this.removeAllListeners();
         this.setActiveDragger();
-        this._components.forEach((component => component.dispose()));
+        this._components.forEach(component => component.dispose());
         this._components = [];
         this._markup.dispose();
         if (this.canvas) {
-            this.canvasEvents.forEach((x => this.canvas.removeEventListener(x, this.canvaseventlistener)));
+            this.canvasEvents.forEach(x => this.canvas.removeEventListener(x, this.canvaseventlistener));
             this.canvas = undefined;
         }
-        if (this._visualizeJs) this._visualizeJs.getViewer().clear();
+        if (this._viewer) this._viewer.clear();
         this._visualizeJs = undefined;
         this._visualizeTimestamp = undefined;
+        this._viewer = undefined;
         return this;
     }
     isInitialized() {
         return !!this.visualizeJs;
     }
+    setSize(width, height, updateStyle = true) {
+        if (!this.visualizeJs) return;
+        this.canvas.width = Math.round(width * window.devicePixelRatio);
+        this.canvas.height = Math.round(height * window.devicePixelRatio);
+        if (updateStyle) {
+            this.canvas.style.width = width + "px";
+            this.canvas.style.height = height + "px";
+        }
+        this._viewer.resize(0, this.canvas.width, this.canvas.height, 0);
+        this.update(true);
+        this.emitEvent({
+            type: "resize",
+            width: width,
+            height: height
+        });
+    }
     render(time) {
         var _a, _b;
         if (!this.visualizeJs) return;
         if (this._isRunAsyncUpdate) return;
-        const visViewer = this.visualizeJs.getViewer();
-        if (visViewer.isRunningAnimation() || this._isNeedRender) {
-            visViewer.update();
-            (_b = (_a = this._activeDragger) === null || _a === undefined ? undefined : _a.updatePreview) === null || _b === undefined ? undefined : _b.call(_a);
-            this._isNeedRender = !visViewer.getActiveDevice().isValid();
-            const deltaTime = (time - this._renderTime) / 1e3;
-            this._renderTime = time;
-            this.emitEvent({
-                type: "render",
-                time: time,
-                deltaTime: deltaTime
-            });
-        }
+        const renderNeeded = this.visViewer().isRunningAnimation() || this._renderNeeded;
+        if (!renderNeeded) return;
+        if (!time) time = performance.now();
+        const deltaTime = (time - this._renderTime) / 1e3;
+        this._renderTime = time;
+        this._renderNeeded = !this.visViewer().getActiveDevice().isValid();
+        this.visViewer().update();
+        (_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: time,
+            deltaTime: deltaTime
+        });
     }
     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;
-        const {clientWidth: clientWidth, clientHeight: clientHeight} = this.canvas;
-        if (!clientWidth || !clientHeight) return this;
-        this.canvas.width = clientWidth * window.devicePixelRatio;
-        this.canvas.height = clientHeight * window.devicePixelRatio;
-        const visViewer = this.visualizeJs.getViewer();
-        visViewer.resize(0, this.canvas.width, this.canvas.height, 0);
-        this.update(true);
-        this.emitEvent({
-            type: "resize",
-            width: clientWidth,
-            height: clientHeight
-        });
+        if (!this.canvas.parentElement) return this;
+        const {width: width, height: height} = this.canvas.parentElement.getBoundingClientRect();
+        if (!width || !height) return this;
+        this.setSize(width, height);
         return this;
     }
     update(force = false) {
-        var _a, _b, _c;
         if (this._enableAutoUpdate) {
-            if (force) {
-                (_a = this.visViewer()) === null || _a === undefined ? undefined : _a.update();
-                (_c = (_b = this._activeDragger) === null || _b === undefined ? undefined : _b.updatePreview) === null || _c === undefined ? undefined : _c.call(_b);
-            } else {
-                this._isNeedRender = true;
-            }
+            this._renderNeeded = true;
+            if (force) this.render();
         }
         this.emitEvent({
             type: "update",
@@ -3513,8 +3541,8 @@ class Viewer extends EventEmitter2 {
         });
     }
     scheduleUpdateAsync(maxScheduleUpdateTimeInMs = 50) {
-        return new Promise(((resolve, reject) => {
-            setTimeout((() => {
+        return new Promise((resolve, reject) => {
+            setTimeout(() => {
                 var _a, _b, _c;
                 try {
                     if (this._enableAutoUpdate) {
@@ -3530,13 +3558,14 @@ class Viewer extends EventEmitter2 {
                     console.error(e);
                     reject();
                 }
-            }), 0);
-        }));
+            }, 0);
+        });
     }
     async updateAsync(maxScheduleUpdateTimeInMs = 50, maxScheduleUpdateCount = 50) {
+        if (!this.visualizeJs) return;
         this._isRunAsyncUpdate = true;
-        const device = this.visViewer().getActiveDevice();
         try {
+            const device = this.visViewer().getActiveDevice();
             for (let iterationCount = 0; !device.isValid() && iterationCount < maxScheduleUpdateCount; iterationCount++) {
                 await this.scheduleUpdateAsync(maxScheduleUpdateTimeInMs);
             }
@@ -3551,16 +3580,15 @@ class Viewer extends EventEmitter2 {
         return this._visualizeJs;
     }
     visLib() {
-        return this.visualizeJs;
+        return this._visualizeJs;
     }
     visViewer() {
-        var _a;
-        return (_a = this.visualizeJs) === null || _a === undefined ? undefined : _a.getViewer();
+        return this._viewer;
     }
-    syncOpenCloudVisualStyle(isInitializing) {
+    syncOpenCloudVisualStyle() {
         if (!this.visualizeJs) return this;
         const visLib = this.visLib();
-        const visViewer = visLib.getViewer();
+        const visViewer = this.visViewer();
         const device = visViewer.getActiveDevice();
         if (device.isNull()) return this;
         const view = device.getActiveView();
@@ -3593,8 +3621,9 @@ class Viewer extends EventEmitter2 {
     }
     syncOptions(options = this.options) {
         if (!this.visualizeJs) return this;
+        this.syncOpenCloudVisualStyle();
         const visLib = this.visLib();
-        const visViewer = visLib.getViewer();
+        const visViewer = this.visViewer();
         const device = visViewer.getActiveDevice();
         if (device.isNull()) return this;
         if (options.showWCS !== visViewer.getEnableWCS()) {
@@ -3611,7 +3640,7 @@ class Viewer extends EventEmitter2 {
         if (options.shadows !== visViewer.shadows) {
             visViewer.shadows = options.shadows;
             const canvas = visLib.canvas;
-            device.invalidate([ 0, canvas.clientWidth, canvas.clientHeight, 0 ]);
+            device.invalidate([ 0, canvas.width, canvas.height, 0 ]);
         }
         if (options.groundShadow !== visViewer.groundShadow) {
             visViewer.groundShadow = options.groundShadow;
@@ -3646,7 +3675,7 @@ class Viewer extends EventEmitter2 {
         if (!this.visualizeJs) return this;
         const params = options.enableCustomHighlight ? options : Options.defaults();
         const visLib = this.visLib();
-        const visViewer = visLib.getViewer();
+        const visViewer = this.visViewer();
         const {Entry: Entry, OdTvRGBColorDef: OdTvRGBColorDef} = visLib;
         const highlightStyleId = visViewer.findHighlightStyle("Web_Default");
         const highlightStylePtr = highlightStyleId.openObject();
@@ -3676,7 +3705,7 @@ class Viewer extends EventEmitter2 {
         const device = visViewer.getActiveDevice();
         if (!device.isNull()) {
             const canvas = visLib.canvas;
-            device.invalidate([ 0, canvas.clientWidth, canvas.clientHeight, 0 ]);
+            device.invalidate([ 0, canvas.width, canvas.height, 0 ]);
             device.delete();
         }
         return this;
@@ -3689,7 +3718,7 @@ class Viewer extends EventEmitter2 {
     }
     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.");
-        draggers.registerDragger(name, (viewer => new dragger(viewer)));
+        draggers.registerDragger(name, viewer => new dragger(viewer));
     }
     activeDragger() {
         return this._activeDragger;
@@ -3707,7 +3736,7 @@ class Viewer extends EventEmitter2 {
                 newDragger = draggers.createDragger(name, this);
                 if (newDragger) {
                     this._activeDragger = newDragger;
-                    (_b = (_a = this._activeDragger).initialize) === null || _b === undefined ? undefined : _b.call(_a);
+                    (_b = (_a = this._activeDragger).initialize) === null || _b === void 0 ? void 0 : _b.call(_a);
                 }
             }
             const canvas = this.canvas;
@@ -3731,7 +3760,7 @@ class Viewer extends EventEmitter2 {
         }
     }
     getComponent(name) {
-        return this._components.find((component => component.name === name));
+        return this._components.find(component => component.name === name);
     }
     clearSlices() {
         if (!this.visualizeJs) return;
@@ -3818,11 +3847,11 @@ class Viewer extends EventEmitter2 {
         const projMatrix = this.visViewer().activeView.projectionMatrix;
         const tolerance = 1e-6;
         const x = projMatrix.get(0, 0);
-        if (x > tolerance || x < -1e-6) result.x = 1 / x;
+        if (x > tolerance || x < -tolerance) result.x = 1 / x;
         const y = projMatrix.get(1, 1);
-        if (y > tolerance || y < -1e-6) result.y = 1 / y;
+        if (y > tolerance || y < -tolerance) result.y = 1 / y;
         const z = projMatrix.get(2, 2);
-        if (z > tolerance || z < -1e-6) result.z = 1 / z;
+        if (z > tolerance || z < -tolerance) result.z = 1 / z;
         return result;
     }
     getSelected() {
@@ -3855,15 +3884,15 @@ class Viewer extends EventEmitter2 {
         if (!this.client) return this;
         if (!model.getReferences) return this;
         const abortController = new AbortController;
-        (_a = this._abortControllerForReferences) === null || _a === undefined ? undefined : _a.abort();
+        (_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)));
+        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 => {
+            await this.client.downloadFile(file.id, undefined, abortController.signal).then(arrayBuffer => {
                 var _a;
-                return (_a = this.visualizeJs) === null || _a === undefined ? undefined : _a.getViewer().addEmbeddedFile(file.name, new Uint8Array(arrayBuffer));
-            })).catch((e => console.error(`Cannot load reference file ${file.name}.`, e)));
+                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;
     }
@@ -3873,7 +3902,7 @@ class Viewer extends EventEmitter2 {
     applySceneGraphSettings(options = this.options) {
         if (!this.visualizeJs) return;
         const visLib = this.visLib();
-        const visViewer = visLib.getViewer();
+        const visViewer = this.visViewer();
         const device = visViewer.getActiveDevice();
         if (isExist(options.sceneGraph)) {
             device.setOptionBool(visLib.DeviceOptions.kDelaySceneGraphProc, !options.sceneGraph);
@@ -3892,7 +3921,7 @@ class Viewer extends EventEmitter2 {
         let model = file;
         if (model && typeof model.getModels === "function") {
             const models = await model.getModels();
-            model = models.find((model => model.default)) || models[0] || file;
+            model = models.find(model => model.default) || models[0] || file;
         }
         if (!model) throw new Error(`Format not supported`);
         let format = params.format;
@@ -3937,42 +3966,46 @@ class Viewer extends EventEmitter2 {
         this.clear();
         this.emitEvent({
             type: "open",
-            file: buffer
+            file: "",
+            buffer: buffer
         });
-        const visLib = this.visLib();
-        const visViewer = visLib.getViewer();
+        const visViewer = this.visViewer();
         this.emitEvent({
             type: "geometrystart",
-            file: buffer
+            file: "",
+            buffer: buffer
         });
         try {
             const data = buffer instanceof Uint8Array ? buffer : new Uint8Array(buffer);
             visViewer.parseFile(data);
-            this.syncOpenCloudVisualStyle(false);
             this.syncOptions();
             this.syncOverlay();
-            this.resize();
+            this.update(true);
             this.emitEvent({
                 type: "geometryprogress",
                 data: 1,
-                file: buffer
+                file: "",
+                buffer: buffer
             });
             this.emitEvent({
                 type: "databasechunk",
                 data: data,
-                file: buffer
+                file: "",
+                buffer: buffer
             });
         } catch (error) {
             this.emitEvent({
                 type: "geometryerror",
                 data: error,
-                file: buffer
+                file: "",
+                buffer: buffer
             });
             throw error;
         }
         this.emitEvent({
             type: "geometryend",
-            file: buffer
+            file: "",
+            buffer: buffer
         });
         return this;
     }
@@ -3983,50 +4016,54 @@ class Viewer extends EventEmitter2 {
         this.clear();
         this.emitEvent({
             type: "open",
-            file: buffer
+            file: "",
+            buffer: buffer
         });
-        const visLib = this.visLib();
-        const visViewer = visLib.getViewer();
+        const visViewer = this.visViewer();
         this.emitEvent({
             type: "geometrystart",
-            file: buffer
+            file: "",
+            buffer: buffer
         });
         try {
             const data = buffer instanceof Uint8Array ? buffer : new Uint8Array(buffer);
             visViewer.parseVsfx(data);
-            this.syncOpenCloudVisualStyle(false);
             this.syncOptions();
             this.syncOverlay();
-            this.resize();
+            this.update(true);
             this.emitEvent({
                 type: "geometryprogress",
                 data: 1,
-                file: buffer
+                file: "",
+                buffer: buffer
             });
             this.emitEvent({
                 type: "databasechunk",
                 data: data,
-                file: buffer
+                file: "",
+                buffer: buffer
             });
         } catch (error) {
             this.emitEvent({
                 type: "geometryerror",
                 data: error,
-                file: buffer
+                file: "",
+                buffer: buffer
             });
             throw error;
         }
         this.emitEvent({
             type: "geometryend",
-            file: buffer
+            file: "",
+            buffer: buffer
         });
         return this;
     }
     cancel() {
         var _a;
-        (_a = this._abortControllerForReferences) === null || _a === undefined ? undefined : _a.abort();
+        (_a = this._abortControllerForReferences) === null || _a === void 0 ? void 0 : _a.abort();
         this._abortControllerForReferences = undefined;
-        this.loaders.forEach((loader => loader.cancel()));
+        this.loaders.forEach(loader => loader.cancel());
         this.emitEvent({
             type: "cancel"
         });
@@ -4034,20 +4071,18 @@ class Viewer extends EventEmitter2 {
     }
     clear() {
         if (!this.visualizeJs) return this;
-        const visLib = this.visLib();
-        const visViewer = visLib.getViewer();
+        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.loaders.forEach((loader => loader.dispose()));
-        this.loaders = [];
-        this.syncOpenCloudVisualStyle(true);
         this.syncOptions();
         this.syncOverlay();
-        this.resize();
+        this.update(true);
         this.emitEvent({
             type: "clear"
         });
@@ -4085,7 +4120,7 @@ class Viewer extends EventEmitter2 {
     drawViewpoint(viewpoint) {
         var _a;
         if (!this.visualizeJs) return;
-        const draggerName = (_a = this._activeDragger) === null || _a === undefined ? undefined : _a.name;
+        const draggerName = (_a = this._activeDragger) === null || _a === void 0 ? void 0 : _a.name;
         this.setActiveDragger();
         this.clearSlices();
         this.clearOverlay();
@@ -4174,12 +4209,12 @@ class Viewer extends EventEmitter2 {
         }
     }
     getSelection() {
-        return this.getSelected().map((handle => ({
+        return this.getSelected().map(handle => ({
             handle: handle
-        })));
+        }));
     }
     setSelection(selection) {
-        this.setSelected(selection === null || selection === undefined ? undefined : selection.map((component => component.handle)));
+        this.setSelected(selection === null || selection === void 0 ? void 0 : selection.map(component => component.handle));
     }
     executeCommand(id, ...args) {
         return commands.executeCommand(id, this, ...args);