@inweb/viewer-visualize 26.2.0 → 26.2.2

package/lib/Viewer/Viewer.d.ts

@@ -18,6 +18,7 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     protected _visualizeJsUrl: string;
     protected _visualizeJs: any;
     protected _visualizeTimestamp: number;
+    protected _crossOrigin: any;
     private canvaseventlistener;
     canvasEvents: string[];
     private _markup;
@@ -34,6 +35,10 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
      * @param params.visualizeJsUrl - `VisualizeJS` library URL. Set this URL to use your own library
      *   instance, or specify `undefined` or blank to use the default URL defined by `Viewer.visualize`
      *   library you are using.
+     * @param params.crossOrigin - The
+     *   {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/crossorigin | crossorigin} content
+     *   attribute on `Visalize.js` script element. One of the following values: `""`, `anonymous` or
+     *   `use-credentials`.
      * @param params.enableAutoUpdate - Enable auto-update of the viewer after any changes. If the
      *   auto-update is disabled, you need to register an `update` event handler and update the
      *   `VisualizeJS` viewer and active dragger manually. Default is `true`.
@@ -42,6 +47,7 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
      */
     constructor(client?: Client, params?: {
         visualizeJsUrl?: string;
+        crossOrigin?: string;
         enableAutoUpdate?: boolean;
         markupType?: MarkupType;
     });
@@ -68,9 +74,14 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
      * @param params.visualizeJsUrl - `VisualizeJS` library URL. Set this URL to use your own library
      *   instance or specify `undefined` or blank to use the default URL defined by `Viewer.visualize`
      *   library you are using.
+     * @param params.crossOrigin - The
+     *   {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/crossorigin | crossorigin} content
+     *   attribute on `Visalize.js` script element. One of the following values: `""`, `anonymous` or
+     *   `use-credentials`.
      */
     configure(params: {
         visualizeJsUrl?: string;
+        crossOrigin?: string;
     }): this;
     /**
      * Loads the `VisualizeJS` module and initializes it with the specified canvas. Call

package/lib/Viewer/utils.d.ts

@@ -1,2 +1,6 @@
-export declare function loadScript(url: string): Promise<HTMLScriptElement>;
-export declare const loadVisualizeJs: (url: string, onprogress: any) => Promise<any>;
+interface LoadParams {
+    crossOrigin?: string;
+}
+export declare function loadScript(url: string, params?: LoadParams): Promise<HTMLScriptElement>;
+export declare const loadVisualizeJs: (url: string, onprogress: any, params?: LoadParams) => Promise<any>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-visualize",
-  "version": "26.2.0",
+  "version": "26.2.2",
   "description": "JavaScript library for rendering CAD and BIM files in a browser using VisualizeJS",
   "homepage": "https://cloud.opendesign.com/docs/index.html",
   "license": "SEE LICENSE IN LICENSE",
@@ -29,10 +29,10 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~26.2.0",
-    "@inweb/eventemitter2": "~26.2.0",
-    "@inweb/markup": "~26.2.0",
-    "@inweb/viewer-core": "~26.2.0"
+    "@inweb/client": "~26.2.2",
+    "@inweb/eventemitter2": "~26.2.2",
+    "@inweb/markup": "~26.2.2",
+    "@inweb/viewer-core": "~26.2.2"
   },
   "visualizeJS": "https://public-fhemb7e3embacwec.z02.azurefd.net/libs/visualizejs/master/Visualize.js"
 }

package/src/Viewer/Viewer.ts

@@ -73,6 +73,7 @@ export class Viewer
   protected _visualizeJsUrl = "";
   protected _visualizeJs: any;
   protected _visualizeTimestamp: number;
+  protected _crossOrigin;
 
   private canvaseventlistener: (event: Event) => void;
 
@@ -93,6 +94,10 @@ export class Viewer
    * @param params.visualizeJsUrl - `VisualizeJS` library URL. Set this URL to use your own library
    *   instance, or specify `undefined` or blank to use the default URL defined by `Viewer.visualize`
    *   library you are using.
+   * @param params.crossOrigin - The
+   *   {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/crossorigin | crossorigin} content
+   *   attribute on `Visalize.js` script element. One of the following values: `""`, `anonymous` or
+   *   `use-credentials`.
    * @param params.enableAutoUpdate - Enable auto-update of the viewer after any changes. If the
    *   auto-update is disabled, you need to register an `update` event handler and update the
    *   `VisualizeJS` viewer and active dragger manually. Default is `true`.
@@ -101,7 +106,7 @@ export class Viewer
    */
   constructor(
     client?: Client,
-    params: { visualizeJsUrl?: string; enableAutoUpdate?: boolean; markupType?: MarkupType } = {}
+    params: { visualizeJsUrl?: string; crossOrigin?: string; enableAutoUpdate?: boolean; markupType?: MarkupType } = {}
   ) {
     super();
     this.configure(params);
@@ -160,9 +165,14 @@ export class Viewer
    * @param params.visualizeJsUrl - `VisualizeJS` library URL. Set this URL to use your own library
    *   instance or specify `undefined` or blank to use the default URL defined by `Viewer.visualize`
    *   library you are using.
+   * @param params.crossOrigin - The
+   *   {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/crossorigin | crossorigin} content
+   *   attribute on `Visalize.js` script element. One of the following values: `""`, `anonymous` or
+   *   `use-credentials`.
    */
-  configure(params: { visualizeJsUrl?: string }): this {
+  configure(params: { visualizeJsUrl?: string; crossOrigin?: string }): this {
     this._visualizeJsUrl = params.visualizeJsUrl || "VISUALIZE_JS_URL";
+    this._crossOrigin = params.crossOrigin;
     return this;
   }
 
@@ -197,11 +207,15 @@ export class Viewer
     this._visualizeTimestamp = Date.now();
     const visualizeTimestamp = this._visualizeTimestamp;
 
-    const visualizeJs: any = await loadVisualizeJs(this.visualizeJsUrl, (event) => {
-      const { loaded, total } = event;
-      if (onProgress) onProgress(new ProgressEvent("progress", { lengthComputable: true, loaded, total }));
-      this.emitEvent({ type: "initializeprogress", data: loaded / total, loaded, total });
-    });
+    const visualizeJs: any = await loadVisualizeJs(
+      this.visualizeJsUrl,
+      (event: ProgressEvent) => {
+        const { loaded, total } = event;
+        if (onProgress) onProgress(new ProgressEvent("progress", { lengthComputable: true, loaded, total }));
+        this.emitEvent({ type: "initializeprogress", data: loaded / total, loaded, total });
+      },
+      { crossOrigin: this._crossOrigin }
+    );
 
     if (visualizeTimestamp !== this._visualizeTimestamp)
       throw new Error(

package/src/Viewer/utils.ts

@@ -21,11 +21,16 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-export function loadScript(url: string): Promise<HTMLScriptElement> {
+interface LoadParams {
+  crossOrigin?: string;
+}
+
+export function loadScript(url: string, params: LoadParams = {}): Promise<HTMLScriptElement> {
   return new Promise((resolve, reject) => {
     const script = document.createElement("script");
     script.src = url;
     script.async = true;
+    script.crossOrigin = params.crossOrigin;
     script.onload = () => resolve(script);
     script.onerror = () => {
       script.remove();
@@ -35,7 +40,7 @@ export function loadScript(url: string): Promise<HTMLScriptElement> {
   });
 }
 
-function loadVisuazlizeJsScript(url: string): Promise<HTMLScriptElement> {
+function loadVisuazlizeJsScript(url: string, params: LoadParams): Promise<HTMLScriptElement> {
   if (window["getVisualizeLibInst"]) {
     const script = window["getVisualizeLibInst"].script;
     if (script) {
@@ -44,22 +49,22 @@ function loadVisuazlizeJsScript(url: string): Promise<HTMLScriptElement> {
     }
     delete window["getVisualizeLibInst"];
   }
-  return loadScript(url);
+  return loadScript(url, params);
 }
 
-export const loadVisualizeJs = (url: string, onprogress): Promise<any> => {
-  return loadVisuazlizeJsScript(url).then((script) => {
-    return new Promise((resolve, reject) => {
-      const instance = window["getVisualizeLibInst"]({
-        urlMemFile: url + ".wasm",
-        TOTAL_MEMORY: 134217728,
-        onprogress,
-      });
-      instance["loadWasmError"] = reject;
-      instance.postRun.push(() => {
-        window["getVisualizeLibInst"].script = script;
-        resolve(instance);
-      });
+export const loadVisualizeJs = async (url: string, onprogress, params: LoadParams = {}): Promise<any> => {
+  const script = await loadVisuazlizeJsScript(url, params);
+  return await new Promise((resolve, reject) => {
+    const options = {
+      urlMemFile: url + ".wasm",
+      TOTAL_MEMORY: 134217728,
+      onprogress,
+    };
+    const instance = window["getVisualizeLibInst"](options);
+    instance.loadWasmError = reject;
+    instance.postRun.push(() => {
+      window["getVisualizeLibInst"].script = script;
+      resolve(instance);
     });
   });
 };