@inweb/viewer-visualize 26.9.0 → 26.9.2

package/src/Viewer/Viewer.ts

@@ -67,14 +67,15 @@ export class Viewer
   private _activeDragger: IDragger | null;
   private _components: Array<IComponent>;
   private _enableAutoUpdate: boolean;
-  private _isNeedRender: boolean;
-  private _isRunAsyncUpdate: boolean;
+  private _renderNeeded: boolean;
   private _renderTime: DOMHighResTimeStamp;
+  private _isRunAsyncUpdate: boolean;
 
   protected _options: Options;
   protected _visualizeJsUrl = "";
   protected _visualizeJs: any;
   protected _visualizeTimestamp: number;
+  protected _viewer: any;
   protected _crossOrigin;
 
   private canvaseventlistener: (event: Event) => void;
@@ -126,7 +127,7 @@ export class Viewer
     this.canvaseventlistener = (event: Event) => this.emit(event);
 
     this._enableAutoUpdate = params.enableAutoUpdate ?? true;
-    this._isNeedRender = false;
+    this._renderNeeded = false;
     this._isRunAsyncUpdate = false;
 
     this.render = this.render.bind(this);
@@ -196,16 +197,19 @@ export class Viewer
   async initialize(canvas: HTMLCanvasElement, onProgress?: (event: ProgressEvent) => void): Promise<this> {
     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;
 
@@ -225,9 +229,10 @@ export class Viewer
       );
 
     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));
@@ -238,7 +243,6 @@ export class Viewer
       this._components.push(components.createComponent(name, this));
     }
 
-    this.syncOpenCloudVisualStyle(true);
     this.syncOptions();
     this.syncOverlay();
 
@@ -269,10 +273,11 @@ export class Viewer
       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;
   }
@@ -284,40 +289,57 @@ export class Viewer
     return !!this.visualizeJs;
   }
 
+  setSize(width: number, height: number, updateStyle = true): void {
+    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
 
-  public render(time: DOMHighResTimeStamp) {
+  public render(time?: DOMHighResTimeStamp) {
     if (!this.visualizeJs) return;
-
     if (this._isRunAsyncUpdate) return;
 
-    const visViewer = this.visualizeJs.getViewer();
-    if (visViewer.isRunningAnimation() || this._isNeedRender) {
-      visViewer.update();
-      this._activeDragger?.updatePreview?.();
-      this._isNeedRender = !visViewer.getActiveDevice().isValid();
+    const renderNeeded = this.visViewer().isRunningAnimation() || this._renderNeeded;
+    if (!renderNeeded) return;
 
-      const deltaTime = (time - this._renderTime) / 1000;
-      this._renderTime = time;
-      this.emitEvent({ type: "render", time, deltaTime });
-    }
+    if (!time) time = performance.now();
+    const deltaTime = (time - this._renderTime) / 1000;
+
+    this._renderTime = time;
+    this._renderNeeded = !this.visViewer().getActiveDevice().isValid();
+
+    this.visViewer().update();
+    this._activeDragger?.updatePreview?.();
+
+    this.emitEvent({ type: "render", time, deltaTime });
   }
 
   public resize(): this {
-    if (!this.visualizeJs) return this;
-
-    const { clientWidth, clientHeight } = this.canvas;
+    console.warn(
+      "Viewer.resize() has been deprecated since 26.9 and will be removed in a future release, use Viewer.setSize() instead."
+    );
 
-    if (!clientWidth || !clientHeight) return this; // <- invisible viewer, or viewer with parent removed
+    if (!this.visualizeJs) return this;
+    if (!this.canvas.parentElement) return this;
 
-    this.canvas.width = clientWidth * window.devicePixelRatio;
-    this.canvas.height = clientHeight * window.devicePixelRatio;
+    const { width, height } = this.canvas.parentElement.getBoundingClientRect();
 
-    const visViewer = this.visualizeJs.getViewer();
-    visViewer.resize(0, this.canvas.width, this.canvas.height, 0);
+    if (!width || !height) return this; // <- invisible viewer, or viewer with parent removed
 
-    this.update(true);
-    this.emitEvent({ type: "resize", width: clientWidth, height: clientHeight });
+    this.setSize(width, height);
 
     return this;
   }
@@ -337,12 +359,8 @@ export class Viewer
    */
   update(force = false) {
     if (this._enableAutoUpdate) {
-      if (force) {
-        this.visViewer()?.update();
-        this._activeDragger?.updatePreview?.();
-      } else {
-        this._isNeedRender = true;
-      }
+      this._renderNeeded = true;
+      if (force) this.render();
     }
     this.emitEvent({ type: "update", data: force });
   }
@@ -380,9 +398,11 @@ export class Viewer
    * @param maxScheduleUpdateCount - Maximum count of scheduled updates.
    */
   async updateAsync(maxScheduleUpdateTimeInMs = 50, maxScheduleUpdateCount = 50): Promise<void> {
+    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);
       }
@@ -407,7 +427,7 @@ export class Viewer
    * instance.
    */
   visLib(): any {
-    return this.visualizeJs;
+    return this._visualizeJs;
   }
 
   /**
@@ -415,16 +435,16 @@ export class Viewer
    * instance.
    */
   visViewer(): any {
-    return this.visualizeJs?.getViewer();
+    return this._viewer;
   }
 
   // update the VisualizeJS options
 
-  syncOpenCloudVisualStyle(isInitializing: boolean): this {
+  syncOpenCloudVisualStyle(): this {
     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;
@@ -474,8 +494,10 @@ export class Viewer
   syncOptions(options: IOptions = this.options): this {
     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;
@@ -497,7 +519,7 @@ export class Viewer
       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) {
@@ -550,7 +572,7 @@ export class Viewer
     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");
@@ -593,7 +615,7 @@ export class Viewer
     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();
     }
 
@@ -839,7 +861,7 @@ export class Viewer
     if (!this.visualizeJs) return;
 
     const visLib = this.visLib();
-    const visViewer = visLib.getViewer();
+    const visViewer = this.visViewer();
 
     const device = visViewer.getActiveDevice();
     if (isExist(options.sceneGraph)) {
@@ -982,18 +1004,16 @@ export class Viewer
 
     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 });
@@ -1023,18 +1043,16 @@ export class Viewer
 
     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 });
@@ -1060,24 +1078,22 @@ export class Viewer
   clear(): this {
     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" });