@inweb/viewer-visualize 25.3.13

package/lib/Viewer/Markup/Impl/Visualize/VisualizeMarkup.d.ts

@@ -0,0 +1,33 @@
+import { IViewpoint } from "@inweb/viewer-core";
+import { IMarkup } from "../../IMarkup";
+import { Viewer } from "../../../Viewer";
+import { OdBaseDragger } from "../../../Draggers/Common/OdBaseDragger";
+import { IMarkupObject } from "../../Api/IMarkupObject";
+export declare class VisualizeMarkup implements IMarkup {
+    private _viewer;
+    protected _markupColor: {
+        r: number;
+        g: number;
+        b: number;
+    };
+    lineWidth: number;
+    initialize(viewer: Viewer, canvas: HTMLCanvasElement, canvasEvents: string[]): void;
+    dispose(): void;
+    getDraggers(): Map<string, typeof OdBaseDragger>;
+    clearOverlay(): void;
+    getMarkupColor(): {
+        r: number;
+        g: number;
+        b: number;
+    };
+    setMarkupColor(r: number, g: number, b: number): void;
+    colorizeAllMarkup(r?: number, g?: number, b?: number): void;
+    setViewpoint(viewpoint: IViewpoint): void;
+    getViewpoint(): IViewpoint;
+    getLayer(): any;
+    createObject(type: string, params: any): IMarkupObject;
+    getObjects(): IMarkupObject[];
+    getSelectedObjects(): IMarkupObject[];
+    selectObjects(objects: IMarkupObject[]): void;
+    clearSelected(): void;
+}

package/lib/Viewer/Markup/MarkupFactory.d.ts

@@ -0,0 +1,6 @@
+import { IMarkup, MarkupType } from "./IMarkup";
+export declare class MarkupFactory {
+    static createMarkup(markupType: MarkupType): IMarkup;
+    private static createKonva;
+    private static createVisualize;
+}

package/lib/Viewer/Viewer.d.ts

@@ -0,0 +1,346 @@
+import { EventEmitter2 } from "@inweb/eventemitter2";
+import { Assembly, Client, File, Model } from "@inweb/client";
+import { IViewpoint, IViewer, Options, OptionsData, OptionsEventMap, ViewerEventMap } from "@inweb/viewer-core";
+import { OdBaseDragger } from "./Draggers/Common/OdBaseDragger";
+import { IMarkup, MarkupType } from "./Markup/IMarkup";
+/**
+ * The `Client.js` library class that provides methods to integrate with the
+ * [VisualizeJS](https://cloud.opendesign.com/docs/index.html#/visualizejs) library.
+ */
+export declare class Viewer extends EventEmitter2<ViewerEventMap & OptionsEventMap> implements IViewer {
+    private _activeDragger;
+    private _zoomWheelDragger;
+    private _gestureManager;
+    private _enableAutoUpdate;
+    private _isNeedRender;
+    private _isRunAsyncUpdate;
+    private _renderTime;
+    protected _options: Options;
+    protected _visualizeJsUrl: string;
+    protected _abortControllerForReferences: AbortController | undefined;
+    private canvaseventlistener;
+    draggerFactory: Map<string, typeof OdBaseDragger>;
+    canvasEvents: string[];
+    private frameId;
+    private _resizeObserver;
+    canvas: HTMLCanvasElement | undefined;
+    markup: IMarkup;
+    visualizeJs: any;
+    _abortController: AbortController | undefined;
+    _abortControllerForRequestMap: Map<string, AbortController> | undefined;
+    client: Client;
+    /**
+     * @param client - The `Client` instance that provides access to a server. Do not specify
+     *   `Client` if you need a standalone viewer instance without access to server models.
+     * @param params - An object containing viewer configuration parameters.
+     * @param params.visualizeJsUrl - `VisualizeJS` library URL. Set this URL to use your own
+     *   library instance, or leave it undefined or blank to use the default URL defined by
+     *   `Client.js` you are using.
+     *
+     *   _Note: Your own `VisualizeJS` library version must match the version of the `Client.js`
+     *   you are using._
+     * @param params.enableAutoUpdate - Enable auto-update of the viewer after any changes. If
+     *   the auto-update is disabled, you need to update the `VisualizeJS` viewer and the active
+     *   dragger manually using the `update` event. Default is `true`.
+     */
+    constructor(client?: Client, params?: {
+        visualizeJsUrl?: string;
+        enableAutoUpdate?: boolean;
+        markupType?: MarkupType;
+    });
+    /**
+     * `VisualizeJS` parameters.
+     */
+    get options(): Options;
+    /**
+     * `VisualizeJS` library URL. Use {@link Viewer#configure | configure()} to change library URL.
+     *
+     * @readonly
+     */
+    get visualizeJsUrl(): string;
+    /**
+     * Change the viewer configuration parameters.
+     *
+     * @param params - An object containing new configuration parameters.
+     * @param params.visualizeJsUrl - `VisualizeJS` library URL. Set this URL to use your own
+     *   library instance or leave it blank to use the default URL defined by `Client.js`.
+     */
+    configure(params: {
+        visualizeJsUrl?: string;
+    }): this;
+    /**
+     * A [Viewer]{@link Viewer} event measuring progress of loading a `VisualizeJS` library.
+     *
+     * @property {string} type - `visualizeprogress`
+     * @property {number} loaded - A 64-bit unsigned integer value indicating the amount of work
+     *   already performed by the underlying process. The ratio of work done can be calculated by
+     *   dividing total by the value of this property.
+     * @property {number} total - A 64-bit unsigned integer representing the total amount of work
+     *   that the underlying process is in the progress of performing.
+     * @event visualizeprogress
+     */
+    /**
+     * Load `VisualizeJS` module and initialize it with the specified canvas. Call
+     * {@link Viewer#dispose | dispose()} to release allocated resources.
+     *
+     * @async
+     * @param canvas - HTML `<canvas>` element for `VisualizeJS`.
+     * @param onProgress - A callback function that handles events measuring progress of loading
+     *   of the `VisualizeJS` library. Retrieves {@link event:visualizeprogress | visualizeprogress} event.
+     */
+    initialize(canvas: HTMLCanvasElement, onProgress?: (event: ProgressEvent) => void): Promise<this>;
+    /**
+     * Releases all resources allocated by this `Viewer` instance. Call this method before
+     * release the `Viewer` instance.
+     */
+    dispose(): this;
+    /**
+     * Returns `true` if `VisualizeJS` module has been loaded andinitialized.
+     */
+    isInitialized(): boolean;
+    private render;
+    resize(): this;
+    /**
+     * Updates the viewer. Do nothing if the auto-update mode is disabled in the constructor (use
+     * the `update` event to update viewer manually).
+     *
+     * Fires:
+     *
+     * - {@link UpdateEvent | update}
+     *
+     * @param force - If `true` updates the viewer immidietly. Otherwise updates on next
+     *   animation frame. Default is `false`.
+     */
+    update(force?: boolean): void;
+    /**
+     * Update with internal schedule, need after change operation when have long update for
+     * update without lock UI
+     *
+     * @param maxScheduleUpdateTimeInMs - Maximum time for one update, by default 30 ms
+     * @param maxScheduleUpdateCount - Maximum count of schedule update
+     * @returns return void Promise
+     */
+    private scheduleUpdateAsync;
+    updateAsync(maxScheduleUpdateTimeInMs?: number, maxScheduleUpdateCount?: number): Promise<void>;
+    /**
+     * Returns `VisualizeJS`
+     * {@link https://cloud.opendesign.com/docs/index.html#/visualizejs_api | module} instance.
+     */
+    visLib(): any;
+    /**
+     * Returns `VisualizeJS`
+     * {@link https://cloud.opendesign.com/docs/index.html#/vis/Viewer | Viewer} instance.
+     */
+    visViewer(): any;
+    syncOpenCloudVisualStyle(isInitializing: boolean): this;
+    syncOptions(options?: OptionsData): this;
+    syncHighlightingOptions(options?: OptionsData): this;
+    /**
+     * List of names of available draggers:
+     *
+     * - `Line`
+     * - `Text`
+     * - `Pan`
+     * - `Orbit`
+     * - `Zoom`
+     * - `ZoomWindow`
+     * - `OrbitAroundBuilding`
+     * - `MeasureLine`
+     * - `CuttingPlaneXAxis`
+     * - `CuttingPlaneYAxis`
+     * - `CuttingPlaneZAxis`
+     * - `Walk`
+     *
+     * @readonly
+     */
+    get draggers(): string[];
+    /**
+     * Register dragger on draggerFactory.
+     *
+     * @param name - Dragger name.
+     * @param dragger - Dragger class.
+     */
+    registerDragger(name: string, dragger: typeof OdBaseDragger): void;
+    /**
+     * Returns active dragger instance or `null` if there is no active dragger.
+     */
+    activeDragger(): any | null;
+    /**
+     * Set active dragger. `Viewer` must be {@link Viewer#initialize | initialized} before enable
+     * dragger or exception is thrown.
+     *
+     * Fires:
+     *
+     * - {@link ChangeActiveDragger | changeactivedragger}
+     *
+     * @param name - Dragger name. Can be one of the {@link Viewer#draggers | draggers} list.
+     * @returns Returns active dragger instance or `null` if there is no dragger with the given name.
+     */
+    setActiveDragger(name: string): OdBaseDragger | null;
+    /**
+     * Reset the state of the active dragger.
+     */
+    resetActiveDragger(): void;
+    /**
+     * Remove all cutting planes.
+     */
+    clearSlices(): void;
+    /**
+     * Remove markup overlay.
+     */
+    clearOverlay(): void;
+    /**
+     * Synchronize markup overlay.
+     */
+    syncOverlay(): any;
+    /**
+     * Returns `true` if current drawing is 3D drawing.
+     */
+    is3D(): boolean;
+    /**
+     * Returns a list of original handles for the selected entities.
+     */
+    getSelected(): string[];
+    /**
+     * Select model entities by original handles that are obtained using
+     * {@link File.getProperties | File.getProperties()} or
+     * {@link File.searchProperties | File.searchProperties()} methods.
+     *
+     * Fires:
+     *
+     * - {@link SelectEvent | select}
+     *
+     * @param handles - The list of original handles.
+     */
+    setSelected(handles?: string[]): void;
+    /**
+     * Load model references into the viewer. References are images, fonts, or any other files to
+     * correct rendering of the model.
+     *
+     * @async
+     * @param model - Instance of model with references. If a `File` instance is specified
+     *   instead of a model, the file references will be loaded.
+     */
+    loadReferences(model: Model | File | Assembly): Promise<this>;
+    applyModelTransformMatrix(model: Model | Assembly): void;
+    applySceneGraphSettings(options?: Options): void;
+    /**
+     * Loads a model of a file or assembly into the viewer.
+     *
+     * This method requires a [Client]{@link Client | Client} instance to work. For standalone
+     * viewer instance use {@link Viewer#openVsfFile | openVsfFile()} or
+     * {@link Viewer#openVsfxFile | openVsfxFile()}.
+     *
+     * Fires:
+     *
+     * - {@link OpenEvent | open}
+     * - {@link GeometryStartEvent | geometrystart}
+     * - {@link GeometryProgressEvent | geometryprogress}
+     * - {@link DatabaseChunkEvent | databasechunk}
+     * - {@link GeometryChunkEvent | geometrychunk}
+     * - {@link GeometryEndEvent | geometryend}
+     * - {@link GeometryErrorEvent | geometryerror}
+     *
+     * @async
+     * @param file - File or Assembly or Model instance to load. If a `File` instance with
+     *   multiple models is specified, the default model will be loaded. If there is no default
+     *   model, first availiable model will be loaded.
+     */
+    open(file: File | Assembly | Model): Promise<this>;
+    /**
+     * Loads a VSF file into the viewer.
+     *
+     * Fires:
+     *
+     * - {@link OpenEvent | open}
+     * - {@link GeometryStartEvent | geometrystart}
+     * - {@link GeometryProgressEvent | geometryprogress}
+     * - {@link DatabaseChunkEvent | databasechunk}
+     * - {@link GeometryEndEvent | geometryend}
+     * - {@link GeometryErrorEvent | geometryerror}
+     *
+     * @param buffer - Binary data buffer to load.
+     */
+    openVsfFile(buffer: Uint8Array | ArrayBuffer): this;
+    /**
+     * Loads a VSFX file into the viewer.
+     *
+     * Fires:
+     *
+     * - {@link OpenEvent | open}
+     * - {@link GeometryStartEvent | geometrystart}
+     * - {@link GeometryProgressEvent | geometryprogress}
+     * - {@link DatabaseChunkEvent | databasechunk}
+     * - {@link GeometryEndEvent | geometryend}
+     * - {@link GeometryErrorEvent | geometryerror}
+     *
+     * @param buffer - Binary data buffer to load.
+     */
+    openVsfxFile(buffer: Uint8Array | ArrayBuffer): this;
+    /**
+     * Cancels asynchronous model loading started by {@link Viewer#open | open()}.
+     */
+    cancel(): this;
+    /**
+     * Unloads the model and clears the viewer.
+     */
+    clear(): this;
+    /**
+     * Get markup color.
+     *
+     * @returns Color with `RGB` values.
+     */
+    getMarkupColor(): {
+        r: number;
+        g: number;
+        b: number;
+    };
+    /**
+     * Set markup color.
+     *
+     * @param r - `Red` part of color.
+     * @param g - `Green` part of color.
+     * @param b - `Blue` part of color.
+     */
+    setMarkupColor(r?: number, g?: number, b?: number): void;
+    /**
+     * Colorize all markup entities with the specified color.
+     *
+     * @param r - `Red` part of color.
+     * @param g - `Green` part of color.
+     * @param b - `Blue` part of color.
+     */
+    colorizeAllMarkup(r?: number, g?: number, b?: number): void;
+    /**
+     * Add an empty markup entity to the overlay.
+     */
+    addMarkupEntity(entityName: string): any;
+    /**
+     * Draw a viewpoint. To get a list of available model viewpoints, use the
+     * {@link Model#getViewpoints | Model.getViewpoints()} or
+     * {@link File#getViewpoints | File.getViewpoints()}.
+     *
+     * @param viewpoint - Viewpoint.
+     */
+    drawViewpoint(viewpoint: IViewpoint): void;
+    /**
+     * Create a viewpoint. To add a viewpoint to the list of model viewpoints, use the
+     * {@link Model#saveViewpoint | Model.saveViewpoint()} or
+     * {@link File#saveViewpoint | File.saveViewpoint()}.
+     */
+    createViewpoint(): IViewpoint;
+    private getPoint3dFromArray;
+    private getLogicalPoint3dAsArray;
+    private getOrthogonalCameraSettings;
+    private setOrthogonalCameraSettings;
+    private getClippingPlanes;
+    private setClippingPlanes;
+    /**
+     * Executes the command denoted by the given command identifier.
+     *
+     * @param id - Identifier of the command to execute.
+     * @param args - Parameters passed to the command function.
+     * @returns A returned value of the given command. Returns `undefined` when the command doesn't exists.
+     */
+    executeCommand(id: string, ...args: any[]): any;
+}

package/lib/Viewer/utils.d.ts

@@ -0,0 +1,3 @@
+export declare function loadScript(url: string): Promise<unknown>;
+export declare const memoize: (f: any) => (...args: any[]) => any;
+export declare const loadVisualizeJs: (url: string, onprogress: any) => Promise<unknown>;

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+export { commands } from "@inweb/viewer-core";
+export { Viewer } from "./Viewer/Viewer";
+export { OdBaseDragger } from "./Viewer/Draggers/Common/OdBaseDragger";

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@inweb/viewer-visualize",
+  "version": "25.3.13",
+  "description": "Visualize.js based 3D CAD and BIM data Viewer for the inWEB Open Cloud platform.",
+  "homepage": "https://cloud.opendesign.com/docs/index.html",
+  "license": "SEE LICENSE IN LICENSE",
+  "author": "Open Design Alliance",
+  "keywords": [
+    "opendesign",
+    "opencloud",
+    "inweb",
+    "viewer",
+    "visualize",
+    "visualizejs",
+    "visualize.js"
+  ],
+  "sideEffects": false,
+  "main": "dist/viewer-visualize.js",
+  "module": "dist/viewer-visualize.module.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "dist",
+    "lib/**/*.d.ts",
+    "src"
+  ],
+  "scripts": {
+    "build": "rollup -c rollup.config.js",
+    "test": "karma start karma.conf.js"
+  },
+  "dependencies": {
+    "@inweb/client": "^25.3.12",
+    "@inweb/eventemitter2": "^25.3.12",
+    "@inweb/viewer-core": "^25.3.12"
+  },
+  "devDependencies": {
+    "canvas": "^2.11.2",
+    "konva": "^9.2.0"
+  },
+  "peerDependencies": {
+    "canvas": "^2.11.2",
+    "konva": "^9.2.0"
+  },
+  "visualizeJS": "https://opencloud.azureedge.net/libs/visualizejs/master/Visualize.js"
+}

package/src/Viewer/Commands/ApplyModelTransform.ts

@@ -0,0 +1,69 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2023, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2021 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
+import { Model, File, Assembly } from "@inweb/client";
+import { commands } from "@inweb/viewer-core";
+import { Viewer } from "../Viewer";
+
+export const composeMatrixFromTransform = (translate, rotate, scale, modelCenter, matrix) => {
+  const translateMatrix = matrix.setTranslation([translate.x, translate.y, translate.z]);
+  const rotateMatrix = matrix.setToRotation(rotate.angle, [rotate.x, rotate.y, rotate.z], modelCenter);
+  const scaleMatrix = matrix.setToScaling(scale, modelCenter);
+  return translateMatrix.postMultBy(rotateMatrix).postMultBy(scaleMatrix);
+};
+
+function applyModelTransform(viewer: Viewer, model: Model | File | Assembly) {
+  if (!viewer.visualizeJs) return;
+
+  const assembly = model instanceof Model ? model.assembly : model;
+  if (!(assembly instanceof Assembly)) return;
+
+  const visLib = viewer.visLib();
+  const visViewer = visLib.getViewer();
+
+  const modelItr = visViewer.getModelIterator();
+  for (; !modelItr.done(); modelItr.step()) {
+    const modelPtr = modelItr.getModel();
+
+    const transform = assembly.getModelTransformMatrix(modelPtr.getDatabaseHandle());
+    if (transform) {
+      const extents = modelPtr.getExtents();
+      const matrix = composeMatrixFromTransform(
+        transform.translate,
+        transform.rotation,
+        transform.scale,
+        extents.center(),
+        new visLib.Matrix3d()
+      );
+
+      modelPtr.setModelingMatrix(matrix, true);
+    }
+  }
+  modelItr.delete();
+
+  visViewer.clearViewExtentsCache?.();
+
+  viewer.update();
+}
+
+commands("VisualizeJS").registerCommand("applyModelTransform", applyModelTransform);

package/src/Viewer/Commands/ClearMarkup.ts

@@ -0,0 +1,28 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2023, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2021 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
+import { commands } from "@inweb/viewer-core";
+import { Viewer } from "../Viewer";
+
+commands("VisualizeJS").registerCommand("clearMarkup", (viewer: Viewer) => viewer.clearOverlay());
+commands("VisualizeJS").registerCommandAlias("clearMarkup", "clearOverlay");

package/src/Viewer/Commands/ClearSlices.ts

@@ -0,0 +1,27 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2023, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2021 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
+import { commands } from "@inweb/viewer-core";
+import { Viewer } from "../Viewer";
+
+commands("VisualizeJS").registerCommand("clearSlices", (viewer: Viewer) => viewer.clearSlices());

package/src/Viewer/Commands/CreatePreview.ts

@@ -0,0 +1,33 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2023, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2021 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
+import { commands } from "@inweb/viewer-core";
+import { Viewer } from "../Viewer";
+
+function createPreview(viewer: Viewer, type = "image/jpeg", encoderOptions = 0.25): string {
+  if (!viewer.visualizeJs) return "";
+
+  return viewer.canvas?.toDataURL(type, encoderOptions) || "";
+}
+
+commands("VisualizeJS").registerCommand("createPreview", createPreview);

package/src/Viewer/Commands/Explode.ts

@@ -0,0 +1,38 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2023, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2021 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
+import { commands } from "@inweb/viewer-core";
+import { Viewer } from "../Viewer";
+
+function explode(viewer: Viewer, index = 0): void {
+  if (!viewer.visualizeJs) return;
+
+  const visViewer = viewer.visViewer();
+  visViewer.explode(index);
+
+  viewer.update();
+  viewer.emit({ type: "explode", data: index });
+}
+
+commands("VisualizeJS").registerCommand("explode", explode);
+commands("VisualizeJS").registerCommand("collect", (viewer: any) => explode(viewer, 0));