@inweb/viewer-visualize 26.9.1 → 26.9.2

package/dist/viewer-visualize.js

@@ -1446,6 +1446,7 @@
                     }
                 }
                 this.subject.update();
+                this.subject.emitEvent({ type: "changecamera" });
             }
             this.lastFrameTS = timestamp;
         }
@@ -1462,6 +1463,7 @@
                 if (dltY !== 0.0)
                     this.cameraWalker.turnDown(dltY * this.deltaAngle);
                 this.subject.update();
+                this.subject.emitEvent({ type: "changecamera" });
             }
         }
         turnLeft(angle) {
@@ -1769,6 +1771,12 @@
             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();
@@ -1971,6 +1979,9 @@
                 dX: absoluteX - this._deltaScreenPosition.x,
                 dY: absoluteY - this._deltaScreenPosition.y,
             });
+            this._subject.emitEvent({
+                type: "changecamera",
+            });
             this._deltaScreenPosition = { x: absoluteX, y: absoluteY };
         }
         endAction() {
@@ -2042,6 +2053,9 @@
                 x: absoluteX,
                 y: absoluteY,
             });
+            this._subject.emitEvent({
+                type: "changecamera",
+            });
         }
     }
 
@@ -2537,7 +2551,7 @@
         if (!model.getModelTransformMatrix)
             return; // Model.getModelTransformMatrix() since 24.3.14
         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();
@@ -3101,7 +3115,7 @@
         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 + "");
@@ -3288,7 +3302,7 @@
         if (!model.getModelTransformMatrix)
             return; // Model.getModelTransformMatrix() since 24.3.14
         const visLib = viewer.visLib();
-        const visViewer = visLib.getViewer();
+        const visViewer = viewer.visViewer();
         const viewExt = visViewer.getActiveExtents();
         const centralPoint = viewExt.center();
         const modelItr = visViewer.getModelIterator();
@@ -3484,8 +3498,11 @@
     ///////////////////////////////////////////////////////////////////////////////
     class ResizeCanvasComponent {
         constructor(viewer) {
-            this.resizeViewer = () => {
-                this.viewer.resize();
+            this.resizeViewer = (entries) => {
+                const { width, height } = entries[0].contentRect;
+                if (!width || !height)
+                    return; // <- invisible viewer, or viewer with parent removed
+                this.viewer.setSize(width, height);
             };
             this.viewer = viewer;
             this.resizeObserver = new ResizeObserver(this.resizeViewer);
@@ -3962,6 +3979,7 @@
         async load(file, format, params) {
             if (!this.viewer.visualizeJs)
                 return this;
+            const visViewer = this.viewer.visViewer();
             const progress = (event) => {
                 const { lengthComputable, loaded, total } = event;
                 const progress = lengthComputable ? loaded / total : 1;
@@ -3971,15 +3989,20 @@
             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, file });
             return this;
         }
@@ -4021,8 +4044,7 @@
         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++) {
@@ -4032,16 +4054,20 @@
                     this.viewer.emitEvent({ type: "geometryprogress", data, file: model.file, model });
                 };
                 const arrayBuffer = await model.downloadResource(dataId, progress, this.abortController.signal);
+                const data = new Uint8Array(arrayBuffer);
                 if (!this.viewer.visualizeJs)
                     return this;
-                const data = new Uint8Array(arrayBuffer);
-                visViewer.parseStream(data);
+                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, file: model.file, model });
                 }
                 else {
@@ -4088,6 +4114,7 @@
         async load(file, format, params) {
             if (!this.viewer.visualizeJs)
                 return this;
+            const visViewer = this.viewer.visViewer();
             const progress = (event) => {
                 const { lengthComputable, loaded, total } = event;
                 const progress = lengthComputable ? loaded / total : 1;
@@ -4097,15 +4124,20 @@
             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, file });
             return this;
         }
@@ -4148,16 +4180,15 @@
         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", data: progress, file: model.file, model });
             };
             console.time("File load time");
             const arrayBuffer = await model.downloadResource(model.database, progress, this.abortController.signal);
+            const data = new Uint8Array(arrayBuffer);
             if (!this.viewer.visualizeJs)
                 return this;
-            const data = new Uint8Array(arrayBuffer);
             try {
                 visViewer.parseVsfx(data);
             }
@@ -4165,10 +4196,9 @@
                 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, file: model.file, model });
             console.timeEnd("File load time");
             return this;
@@ -4265,7 +4295,7 @@
             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;
@@ -4280,23 +4310,21 @@
                     console.error("VSFX parse error.", error);
                     throw error;
                 }
-                updateController.update(UpdateType.kDelay);
                 this.viewer.emitEvent({ type: "geometryprogress", data: progress, file: model.file, 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, file: model.file, model });
                 }
                 else {
+                    updateController.update(UpdateType.kDelay);
                     this.viewer.emitEvent({ type: "geometrychunk", data: chunk, file: model.file, model });
                 }
             };
@@ -4349,8 +4377,7 @@
         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;
@@ -4363,25 +4390,23 @@
             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 });
-                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, file: model.file, model });
                 }
                 else {
+                    updateController.update(UpdateType.kDelay);
                     this.viewer.emitEvent({ type: "geometrychunk", data: chunk, file: model.file, model });
                 }
             };
@@ -4569,10 +4594,9 @@
      *
      *     this.viewer.visualizeJs.getViewer().parseVsfx(data);
      *
-     *     this.viewer.syncOpenCloudVisualStyle(false);
      *     this.viewer.syncOptions();
      *     this.viewer.syncOverlay();
-     *     this.viewer.resize();
+     *     this.viewer.update();
      *
      *     this.viewer.emitEvent({ type: "databasechunk", data, file });
      *
@@ -19276,7 +19300,7 @@
             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 || { r: 255, g: 0, b: 0 };
@@ -19320,7 +19344,7 @@
                 return { x: array[0], y: array[1], z: array[2] };
             }
             const visLib = this._viewer.visLib();
-            const visViewer = visLib.getViewer();
+            const visViewer = this._viewer.visViewer();
             if (!viewpoint)
                 viewpoint = {};
             viewpoint.lines = [];
@@ -19488,7 +19512,7 @@
             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);
@@ -19550,14 +19574,15 @@
          */
         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) => {
@@ -19569,16 +19594,15 @@
             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();
@@ -19599,10 +19623,11 @@
                 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;
         }
         /**
@@ -19611,6 +19636,19 @@
         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, height });
+        }
         // internal render/resize routines
         render(time) {
             var _a, _b;
@@ -19618,28 +19656,28 @@
                 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) / 1000;
-                this._renderTime = time;
-                this.emitEvent({ type: "render", time, deltaTime });
-            }
+            const renderNeeded = this.visViewer().isRunningAnimation() || this._renderNeeded;
+            if (!renderNeeded)
+                return;
+            if (!time)
+                time = performance.now();
+            const deltaTime = (time - this._renderTime) / 1000;
+            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, 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, clientHeight } = this.canvas;
-            if (!clientWidth || !clientHeight)
+            if (!this.canvas.parentElement)
+                return this;
+            const { width, height } = this.canvas.parentElement.getBoundingClientRect();
+            if (!width || !height)
                 return this; // <- invisible viewer, or viewer with parent removed
-            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 });
+            this.setSize(width, height);
             return this;
         }
         /**
@@ -19656,15 +19694,10 @@
          *   Default is `false`.
          */
         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", data: force });
         }
@@ -19702,9 +19735,11 @@
          * @param maxScheduleUpdateCount - Maximum count of scheduled updates.
          */
         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);
                 }
@@ -19729,22 +19764,21 @@
          * instance.
          */
         visLib() {
-            return this.visualizeJs;
+            return this._visualizeJs;
         }
         /**
          * Returns `VisualizeJS` {@link https://cloud.opendesign.com/docs/index.html#/vis/Viewer | Viewer}
          * instance.
          */
         visViewer() {
-            var _a;
-            return (_a = this.visualizeJs) === null || _a === undefined ? undefined : _a.getViewer();
+            return this._viewer;
         }
         // update the VisualizeJS options
-        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;
@@ -19781,8 +19815,9 @@
         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;
@@ -19800,7 +19835,7 @@
             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;
@@ -19836,7 +19871,7 @@
                 return this;
             const params = options.enableCustomHighlight ? options : Options.defaults();
             const visLib = this.visLib();
-            const visViewer = visLib.getViewer();
+            const visViewer = this.visViewer();
             const { Entry, OdTvRGBColorDef } = visLib;
             const highlightStyleId = visViewer.findHighlightStyle("Web_Default");
             const highlightStylePtr = highlightStyleId.openObject();
@@ -19866,7 +19901,7 @@
             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;
@@ -20065,7 +20100,7 @@
             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);
@@ -20190,16 +20225,14 @@
             this.cancel();
             this.clear();
             this.emitEvent({ type: "open", file: buffer });
-            const visLib = this.visLib();
-            const visViewer = visLib.getViewer();
+            const visViewer = this.visViewer();
             this.emitEvent({ type: "geometrystart", file: 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 });
                 this.emitEvent({ type: "databasechunk", data, file: buffer });
             }
@@ -20222,16 +20255,14 @@
             this.cancel();
             this.clear();
             this.emitEvent({ type: "open", file: buffer });
-            const visLib = this.visLib();
-            const visViewer = visLib.getViewer();
+            const visViewer = this.visViewer();
             this.emitEvent({ type: "geometrystart", file: 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 });
                 this.emitEvent({ type: "databasechunk", data, file: buffer });
             }
@@ -20253,20 +20284,18 @@
         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" });
             return this;
         }