@inweb/viewer-visualize 26.9.0 → 26.9.2

package/dist/viewer-visualize.module.js

@@ -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) {
@@ -1208,6 +1214,12 @@ class OrbitAction {
         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);
+        this._subject.emitEvent({
+            type: "orbit"
+        });
+        this._subject.emitEvent({
+            type: "changecamera"
+        });
     }
     endAction() {
         this._endInteractivity();
@@ -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
@@ -1439,6 +1454,9 @@ class ZoomAction {
             x: absoluteX,
             y: absoluteY
         });
+        this._subject.emitEvent({
+            type: "changecamera"
+        });
     }
 }
 
@@ -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();
@@ -1979,7 +1997,7 @@ 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 => {
         const entityId = visViewer.getEntityByOriginalHandle(handle + "");
@@ -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();
@@ -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);
@@ -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,
@@ -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 = [];
@@ -3371,7 +3394,7 @@ class Viewer extends EventEmitter2 {
         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._renderNeeded = false;
         this._isRunAsyncUpdate = false;
         this.render = this.render.bind(this);
         this.update = this.update.bind(this);
@@ -3393,14 +3416,15 @@ class Viewer extends EventEmitter2 {
     }
     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%";
-        }
+        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 => {
@@ -3421,16 +3445,15 @@ class Viewer extends EventEmitter2 {
         });
         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._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();
@@ -3455,57 +3478,62 @@ class Viewer extends EventEmitter2 {
             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 === undefined ? undefined : _a.updatePreview) === null || _b === undefined ? undefined : _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",
@@ -3534,9 +3562,10 @@ class Viewer extends EventEmitter2 {
         }));
     }
     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;
@@ -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);
@@ -3939,8 +3968,7 @@ class Viewer extends EventEmitter2 {
             type: "open",
             file: buffer
         });
-        const visLib = this.visLib();
-        const visViewer = visLib.getViewer();
+        const visViewer = this.visViewer();
         this.emitEvent({
             type: "geometrystart",
             file: buffer
@@ -3948,10 +3976,9 @@ class Viewer extends EventEmitter2 {
         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,
@@ -3985,8 +4012,7 @@ class Viewer extends EventEmitter2 {
             type: "open",
             file: buffer
         });
-        const visLib = this.visLib();
-        const visViewer = visLib.getViewer();
+        const visViewer = this.visViewer();
         this.emitEvent({
             type: "geometrystart",
             file: buffer
@@ -3994,10 +4020,9 @@ class Viewer extends EventEmitter2 {
         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,
@@ -4034,20 +4059,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();
-        visViewer.clear();
-        visViewer.createLocalDatabase();
         this.loaders.forEach((loader => loader.dispose()));
         this.loaders = [];
-        this.syncOpenCloudVisualStyle(true);
+        visViewer.clear();
+        visViewer.createLocalDatabase();
         this.syncOptions();
         this.syncOverlay();
-        this.resize();
+        this.update(true);
         this.emitEvent({
             type: "clear"
         });