@combeenation/3d-viewer 14.0.1-rc1 → 15.0.0

package/src/manager/debug-manager.ts

@@ -1,245 +1,245 @@
-import {
-  AxesViewer,
-  BoundingSphere,
-  Color3,
-  DynamicTexture,
-  IInspectorOptions,
-  MeshBuilder,
-  Scene,
-  StandardMaterial,
-  TransformNode,
-  UtilityLayerRenderer,
-  Vector3,
-  Viewer,
-  ViewerEvent,
-} from '../index';
-
-type DebugAxisKeys = 'X' | 'Y' | 'Z';
-type DebugAxisConfig = { color: Color3; position: Vector3 };
-
-/**
- * Manager for debugging functionalities
- */
-export class DebugManager {
-  protected static _DEBUG_AXIS_MAP: Record<DebugAxisKeys, DebugAxisConfig> = {
-    X: { color: Color3.Red().scale(0.5), position: new Vector3(1, 0, 0) },
-    Y: { color: Color3.Green().scale(0.5), position: new Vector3(0, 1, 0) },
-    Z: { color: Color3.Blue().scale(0.5), position: new Vector3(0, 0, 1) },
-  };
-  protected static _WORLD_COORD_ROOT_KEY = '__world_coordinates__';
-  protected static _BOUNDING_SPHERE_KEY = '__bounding_sphere__';
-
-  protected _axesViewer: AxesViewer | null = null;
-  protected _showBoundingSphereForAutofocus: boolean = false;
-
-  /** @internal */
-  public constructor(protected viewer: Viewer) {}
-
-  /**
-   * Assign callback for drawing bounding sphere on autofocusing
-   * @internal
-   */
-  public registerAutofocusStartListener(): void {
-    this.viewer.eventManager.addListener(ViewerEvent.AutofocusStart, boundingSphere =>
-      this._drawBoundingSphereForAutofocus(boundingSphere)
-    );
-  }
-
-  /**
-   * Enables the Babylon.js [Inspector](https://doc.babylonjs.com/toolsAndResources/tools/inspector).\
-   * Due to the additional size of the inspector, this function is only available in "development" builds!
-   *
-   * @returns Signalizes if inspector could be loaded
-   */
-  public async showInspector(options?: IInspectorOptions): Promise<boolean> {
-    if (process.env.NODE_ENV === 'development') {
-      const inspModule = await import(/* webpackChunkName: "inspector"*/ '@babylonjs/inspector');
-
-      if (!options && window.Cbn) {
-        // special case for usage in Combeenation configurator:
-        // if no options are set the inspector will be rendered into the parent element of the configurator
-        // in this way the configurator layout itself will not be affected by the inspector
-        const cfgrParentEl = window.Cbn.utils.Viewer3dHelper.getCfgrParentDomElementForInspector();
-        inspModule.Inspector.Show(this.viewer.scene, { globalRoot: cfgrParentEl });
-      } else {
-        inspModule.Inspector.Show(this.viewer.scene, options ?? {});
-      }
-
-      // load additional packages for certain inspector features like "node material editor"
-      // this is done after showing the debug layer to save time
-      await import(/* webpackChunkName: "node-material-editor" */ '@babylonjs/node-editor');
-      await import(/* webpackChunkName: "node-geometry-editor" */ '@babylonjs/node-geometry-editor');
-
-      return true;
-    } else {
-      // inspector not available, set according warning message in console
-      if (window.Cbn) {
-        console.warn(`Inspector not loaded. 
-The inspector can only be used in development builds (e.g. during development with watch mode, in the configurator preview, ...)
-but not in production (e.g. production build of Custom JS, published configurator, ...).`);
-      } else {
-        console.warn(`Inspector not loaded. 
-The inspector can only be used in development builds.`);
-      }
-
-      return false;
-    }
-  }
-
-  public hideInspector(): void {
-    this.viewer.scene.debugLayer?.hide();
-  }
-
-  /**
-   * Show world coordinate system with given dimension.\
-   * This is especially usefull when working on project with tricky positioning. (e.g. clones)
-   */
-  public showWorldCoordinates(dimension: number): void {
-    // make sure to remove already existing debug coordinate systems
-    this.hideWorldCoordinates();
-
-    // draw in utility layer, so that there is no interaction with the actually scene content
-    // (e.g. glb export, autofocus)
-    const utilityLayerScene = UtilityLayerRenderer.DefaultUtilityLayer.utilityLayerScene;
-
-    const worldCoordRoot = new TransformNode(DebugManager._WORLD_COORD_ROOT_KEY, utilityLayerScene);
-    // axes viewer coordinate system is a bit too large
-    // multiply with unify factor to create arrows which exactly match the length of the input dimension
-    const factor = DebugManager._getWorldCoordinatesAxesUnifyFactor();
-    this._axesViewer = new AxesViewer(utilityLayerScene, dimension * factor);
-
-    DebugManager._prepareWorldCoordinateAxis('X', this._axesViewer.xAxis, worldCoordRoot, dimension, utilityLayerScene);
-    DebugManager._prepareWorldCoordinateAxis('Y', this._axesViewer.yAxis, worldCoordRoot, dimension, utilityLayerScene);
-    DebugManager._prepareWorldCoordinateAxis('Z', this._axesViewer.zAxis, worldCoordRoot, dimension, utilityLayerScene);
-  }
-
-  public hideWorldCoordinates(): void {
-    const utilityLayerScene = UtilityLayerRenderer.DefaultUtilityLayer.utilityLayerScene;
-
-    this._axesViewer?.dispose();
-    this._axesViewer = null;
-
-    const worldCoordRoot = utilityLayerScene.getTransformNodeByName(DebugManager._WORLD_COORD_ROOT_KEY);
-    if (worldCoordRoot) {
-      worldCoordRoot.dispose(false, true);
-    }
-  }
-
-  /**
-   * Draws a wireframe bounding sphere on the next call of {@link CameraManager.autofocusActiveCamera}.\
-   * This is usefull for checking which parts of the scene get centered.
-   */
-  public showBoundingSphereForAutofocus(): void {
-    this._showBoundingSphereForAutofocus = true;
-  }
-
-  public hideBoundingSphereForAutofocus(): void {
-    this._showBoundingSphereForAutofocus = false;
-    this._removeBoundingSphereForAutofocus();
-  }
-
-  /**
-   * Adjust and enhance coordinate axes to fulfill our needs.
-   * - moves nodes into common root
-   * - adds text node
-   */
-  protected static _prepareWorldCoordinateAxis(
-    text: 'X' | 'Y' | 'Z',
-    axis: TransformNode,
-    root: TransformNode,
-    dimension: number,
-    utilityLayerScene: Scene
-  ): void {
-    // create unique names
-    axis.name = `${DebugManager._WORLD_COORD_ROOT_KEY}.${text}`;
-    axis.parent = root;
-
-    // create text mesh via dynamic texture
-    const dynamicTexture = new DynamicTexture(
-      `${DebugManager._WORLD_COORD_ROOT_KEY}.${text}`,
-      50,
-      utilityLayerScene,
-      true
-    );
-    dynamicTexture.hasAlpha = true;
-    // 42.5 is a magic offset, so that the text is vertically centered for font size 50px
-    // horizontal centering works well with the standard behaviour of Babylon.js (setting "null" as "width")
-    dynamicTexture.drawText(text, null, 42.5, 'bold 50px Arial', 'white', 'transparent', true);
-
-    const material = new StandardMaterial(`${DebugManager._WORLD_COORD_ROOT_KEY}.${text}`, utilityLayerScene);
-    material.disableLighting = true;
-    material.emissiveColor = DebugManager._DEBUG_AXIS_MAP[text].color;
-    material.diffuseTexture = dynamicTexture;
-
-    const plane = MeshBuilder.CreatePlane(
-      `${DebugManager._WORLD_COORD_ROOT_KEY}.${text}.TextPlane`,
-      { size: dimension / 10 },
-      utilityLayerScene
-    );
-    // make sure that text is located outside of arrow
-    plane.position = DebugManager._DEBUG_AXIS_MAP[text].position.multiplyByFloats(
-      dimension * 1.05,
-      dimension * 1.05,
-      dimension * 1.05
-    );
-    plane.parent = root;
-    plane.material = material;
-    // will be rendered on top of "default" meshes => taken from Babylon.js repo "AxesViewer" implementation
-    plane.renderingGroupId = 2;
-    // setting billboard mode ensures, that the text is always readable
-    plane.billboardMode = TransformNode.BILLBOARDMODE_ALL;
-  }
-
-  /**
-   * Calculate factor for creating world coordinate axes with exactly one unit in length
-   */
-  protected static _getWorldCoordinatesAxesUnifyFactor(): number {
-    // These constants are taken from the Babylon.js repository
-    const coneZPosOffset = 0.3;
-    const coneHeight = 0.075;
-    const baseScaling = 4;
-
-    // cone is moved 0.3 units away from the center
-    // the origin of the cone will be located on 1.2, if combined with the base scaling of 4
-    // invert that offset to get the origin to 1
-    // also consider the cone height to move the tip of the cone to 1 instead the center
-    const factor = 1 / ((coneZPosOffset + coneHeight / 2) * baseScaling);
-
-    return factor;
-  }
-
-  /**
-   * Visualize bounding sphere which is used to zoom in via `autofocusActiveCamera` function
-   */
-  protected _drawBoundingSphereForAutofocus(boundingSphere: BoundingSphere): void {
-    if (!this._showBoundingSphereForAutofocus) {
-      return;
-    }
-
-    this._removeBoundingSphereForAutofocus();
-
-    const utilityLayerScene = UtilityLayerRenderer.DefaultUtilityLayer.utilityLayerScene;
-    let boundingMaterial = utilityLayerScene.getMaterialByName(DebugManager._BOUNDING_SPHERE_KEY);
-    if (!boundingMaterial) {
-      boundingMaterial = new StandardMaterial(DebugManager._BOUNDING_SPHERE_KEY, utilityLayerScene);
-      boundingMaterial.wireframe = true;
-      boundingMaterial.alpha = 0.1;
-      (boundingMaterial as StandardMaterial).emissiveColor = new Color3(1, 1, 1);
-    }
-
-    const sphere = MeshBuilder.CreateSphere(
-      DebugManager._BOUNDING_SPHERE_KEY,
-      { diameter: boundingSphere.radius * 2 },
-      utilityLayerScene
-    );
-    sphere.position = boundingSphere.center;
-    sphere.material = boundingMaterial;
-    sphere.isPickable = false;
-  }
-
-  protected _removeBoundingSphereForAutofocus(): void {
-    const utilityLayerScene = UtilityLayerRenderer.DefaultUtilityLayer.utilityLayerScene;
-    const existingSphere = utilityLayerScene.getMeshByName(DebugManager._BOUNDING_SPHERE_KEY);
-    existingSphere?.dispose();
-  }
-}
+import {
+  AxesViewer,
+  BoundingSphere,
+  Color3,
+  DynamicTexture,
+  IInspectorOptions,
+  MeshBuilder,
+  Scene,
+  StandardMaterial,
+  TransformNode,
+  UtilityLayerRenderer,
+  Vector3,
+  Viewer,
+  ViewerEvent,
+} from '../index';
+
+type DebugAxisKeys = 'X' | 'Y' | 'Z';
+type DebugAxisConfig = { color: Color3; position: Vector3 };
+
+/**
+ * Manager for debugging functionalities
+ */
+export class DebugManager {
+  protected static _DEBUG_AXIS_MAP: Record<DebugAxisKeys, DebugAxisConfig> = {
+    X: { color: Color3.Red().scale(0.5), position: new Vector3(1, 0, 0) },
+    Y: { color: Color3.Green().scale(0.5), position: new Vector3(0, 1, 0) },
+    Z: { color: Color3.Blue().scale(0.5), position: new Vector3(0, 0, 1) },
+  };
+  protected static _WORLD_COORD_ROOT_KEY = '__world_coordinates__';
+  protected static _BOUNDING_SPHERE_KEY = '__bounding_sphere__';
+
+  protected _axesViewer: AxesViewer | null = null;
+  protected _showBoundingSphereForAutofocus: boolean = false;
+
+  /** @internal */
+  public constructor(protected viewer: Viewer) {}
+
+  /**
+   * Assign callback for drawing bounding sphere on autofocusing
+   * @internal
+   */
+  public registerAutofocusStartListener(): void {
+    this.viewer.eventManager.addListener(ViewerEvent.AutofocusStart, boundingSphere =>
+      this._drawBoundingSphereForAutofocus(boundingSphere)
+    );
+  }
+
+  /**
+   * Enables the Babylon.js [Inspector](https://doc.babylonjs.com/toolsAndResources/tools/inspector).\
+   * Due to the additional size of the inspector, this function is only available in "development" builds!
+   *
+   * @returns Signalizes if inspector could be loaded
+   */
+  public async showInspector(options?: IInspectorOptions): Promise<boolean> {
+    if (process.env.NODE_ENV === 'development') {
+      const inspModule = await import(/* webpackChunkName: "inspector"*/ '@babylonjs/inspector');
+
+      if (!options && window.Cbn) {
+        // special case for usage in Combeenation configurator:
+        // if no options are set the inspector will be rendered into the parent element of the configurator
+        // in this way the configurator layout itself will not be affected by the inspector
+        const cfgrParentEl = window.Cbn.utils.Viewer3dHelper.getCfgrParentDomElementForInspector();
+        inspModule.Inspector.Show(this.viewer.scene, { globalRoot: cfgrParentEl });
+      } else {
+        inspModule.Inspector.Show(this.viewer.scene, options ?? {});
+      }
+
+      // load additional packages for certain inspector features like "node material editor"
+      // this is done after showing the debug layer to save time
+      await import(/* webpackChunkName: "node-material-editor" */ '@babylonjs/node-editor');
+      await import(/* webpackChunkName: "node-geometry-editor" */ '@babylonjs/node-geometry-editor');
+
+      return true;
+    } else {
+      // inspector not available, set according warning message in console
+      if (window.Cbn) {
+        console.warn(`Inspector not loaded. 
+The inspector can only be used in development builds (e.g. during development with watch mode, in the configurator preview, ...)
+but not in production (e.g. production build of Custom JS, published configurator, ...).`);
+      } else {
+        console.warn(`Inspector not loaded. 
+The inspector can only be used in development builds.`);
+      }
+
+      return false;
+    }
+  }
+
+  public hideInspector(): void {
+    this.viewer.scene.debugLayer?.hide();
+  }
+
+  /**
+   * Show world coordinate system with given dimension.\
+   * This is especially usefull when working on project with tricky positioning. (e.g. clones)
+   */
+  public showWorldCoordinates(dimension: number): void {
+    // make sure to remove already existing debug coordinate systems
+    this.hideWorldCoordinates();
+
+    // draw in utility layer, so that there is no interaction with the actually scene content
+    // (e.g. glb export, autofocus)
+    const utilityLayerScene = UtilityLayerRenderer.DefaultUtilityLayer.utilityLayerScene;
+
+    const worldCoordRoot = new TransformNode(DebugManager._WORLD_COORD_ROOT_KEY, utilityLayerScene);
+    // axes viewer coordinate system is a bit too large
+    // multiply with unify factor to create arrows which exactly match the length of the input dimension
+    const factor = DebugManager._getWorldCoordinatesAxesUnifyFactor();
+    this._axesViewer = new AxesViewer(utilityLayerScene, dimension * factor);
+
+    DebugManager._prepareWorldCoordinateAxis('X', this._axesViewer.xAxis, worldCoordRoot, dimension, utilityLayerScene);
+    DebugManager._prepareWorldCoordinateAxis('Y', this._axesViewer.yAxis, worldCoordRoot, dimension, utilityLayerScene);
+    DebugManager._prepareWorldCoordinateAxis('Z', this._axesViewer.zAxis, worldCoordRoot, dimension, utilityLayerScene);
+  }
+
+  public hideWorldCoordinates(): void {
+    const utilityLayerScene = UtilityLayerRenderer.DefaultUtilityLayer.utilityLayerScene;
+
+    this._axesViewer?.dispose();
+    this._axesViewer = null;
+
+    const worldCoordRoot = utilityLayerScene.getTransformNodeByName(DebugManager._WORLD_COORD_ROOT_KEY);
+    if (worldCoordRoot) {
+      worldCoordRoot.dispose(false, true);
+    }
+  }
+
+  /**
+   * Draws a wireframe bounding sphere on the next call of {@link CameraManager.autofocusActiveCamera}.\
+   * This is usefull for checking which parts of the scene get centered.
+   */
+  public showBoundingSphereForAutofocus(): void {
+    this._showBoundingSphereForAutofocus = true;
+  }
+
+  public hideBoundingSphereForAutofocus(): void {
+    this._showBoundingSphereForAutofocus = false;
+    this._removeBoundingSphereForAutofocus();
+  }
+
+  /**
+   * Adjust and enhance coordinate axes to fulfill our needs.
+   * - moves nodes into common root
+   * - adds text node
+   */
+  protected static _prepareWorldCoordinateAxis(
+    text: 'X' | 'Y' | 'Z',
+    axis: TransformNode,
+    root: TransformNode,
+    dimension: number,
+    utilityLayerScene: Scene
+  ): void {
+    // create unique names
+    axis.name = `${DebugManager._WORLD_COORD_ROOT_KEY}.${text}`;
+    axis.parent = root;
+
+    // create text mesh via dynamic texture
+    const dynamicTexture = new DynamicTexture(
+      `${DebugManager._WORLD_COORD_ROOT_KEY}.${text}`,
+      50,
+      utilityLayerScene,
+      true
+    );
+    dynamicTexture.hasAlpha = true;
+    // 42.5 is a magic offset, so that the text is vertically centered for font size 50px
+    // horizontal centering works well with the standard behaviour of Babylon.js (setting "null" as "width")
+    dynamicTexture.drawText(text, null, 42.5, 'bold 50px Arial', 'white', 'transparent', true);
+
+    const material = new StandardMaterial(`${DebugManager._WORLD_COORD_ROOT_KEY}.${text}`, utilityLayerScene);
+    material.disableLighting = true;
+    material.emissiveColor = DebugManager._DEBUG_AXIS_MAP[text].color;
+    material.diffuseTexture = dynamicTexture;
+
+    const plane = MeshBuilder.CreatePlane(
+      `${DebugManager._WORLD_COORD_ROOT_KEY}.${text}.TextPlane`,
+      { size: dimension / 10 },
+      utilityLayerScene
+    );
+    // make sure that text is located outside of arrow
+    plane.position = DebugManager._DEBUG_AXIS_MAP[text].position.multiplyByFloats(
+      dimension * 1.05,
+      dimension * 1.05,
+      dimension * 1.05
+    );
+    plane.parent = root;
+    plane.material = material;
+    // will be rendered on top of "default" meshes => taken from Babylon.js repo "AxesViewer" implementation
+    plane.renderingGroupId = 2;
+    // setting billboard mode ensures, that the text is always readable
+    plane.billboardMode = TransformNode.BILLBOARDMODE_ALL;
+  }
+
+  /**
+   * Calculate factor for creating world coordinate axes with exactly one unit in length
+   */
+  protected static _getWorldCoordinatesAxesUnifyFactor(): number {
+    // These constants are taken from the Babylon.js repository
+    const coneZPosOffset = 0.3;
+    const coneHeight = 0.075;
+    const baseScaling = 4;
+
+    // cone is moved 0.3 units away from the center
+    // the origin of the cone will be located on 1.2, if combined with the base scaling of 4
+    // invert that offset to get the origin to 1
+    // also consider the cone height to move the tip of the cone to 1 instead the center
+    const factor = 1 / ((coneZPosOffset + coneHeight / 2) * baseScaling);
+
+    return factor;
+  }
+
+  /**
+   * Visualize bounding sphere which is used to zoom in via `autofocusActiveCamera` function
+   */
+  protected _drawBoundingSphereForAutofocus(boundingSphere: BoundingSphere): void {
+    if (!this._showBoundingSphereForAutofocus) {
+      return;
+    }
+
+    this._removeBoundingSphereForAutofocus();
+
+    const utilityLayerScene = UtilityLayerRenderer.DefaultUtilityLayer.utilityLayerScene;
+    let boundingMaterial = utilityLayerScene.getMaterialByName(DebugManager._BOUNDING_SPHERE_KEY);
+    if (!boundingMaterial) {
+      boundingMaterial = new StandardMaterial(DebugManager._BOUNDING_SPHERE_KEY, utilityLayerScene);
+      boundingMaterial.wireframe = true;
+      boundingMaterial.alpha = 0.1;
+      (boundingMaterial as StandardMaterial).emissiveColor = new Color3(1, 1, 1);
+    }
+
+    const sphere = MeshBuilder.CreateSphere(
+      DebugManager._BOUNDING_SPHERE_KEY,
+      { diameter: boundingSphere.radius * 2 },
+      utilityLayerScene
+    );
+    sphere.position = boundingSphere.center;
+    sphere.material = boundingMaterial;
+    sphere.isPickable = false;
+  }
+
+  protected _removeBoundingSphereForAutofocus(): void {
+    const utilityLayerScene = UtilityLayerRenderer.DefaultUtilityLayer.utilityLayerScene;
+    const existingSphere = utilityLayerScene.getMeshByName(DebugManager._BOUNDING_SPHERE_KEY);
+    existingSphere?.dispose();
+  }
+}

package/src/manager/event-manager.ts

@@ -1,72 +1,72 @@
-import { Viewer } from '../index';
-import EventEmitter from 'eventemitter3';
-
-// NOTE: ATM we expose only very few events, due to the following reasons:
-// - Code is generally asynchronous and can be awaited by consumer
-// - We don't want to bloat the code with events that are never used
-
-/**
- * Events that are fired by the viewer
- */
-export enum ViewerEvent {
-  /**
-   * Requested material is not available in the scene yet and is about to be created
-   * @param materialId
-   */
-  MaterialCreationStart = 'MaterialCreationStart',
-  /**
-   * Material creation has been finished, that includes:
-   *   - Load definition from Combeenation server
-   *   - Load all textures
-   *   - Compile shader
-   * @param materialId
-   * @param allMaterialsCreated signalizes that no more materials are currently being created
-   */
-  MaterialCreationEnd = 'MaterialCreationEnd',
-  /**
-   * Bounding sphere for autofocusing camera has been calculated.
-   * This is used internally for debugging purposes.
-   * @param boundingSphere
-   */
-  AutofocusStart = 'AutofocusStart',
-}
-
-/**
- * Manager for eventing system, which ATM is only a slim wrapper about the "eventemitter3" library
- */
-export class EventManager {
-  protected _eventEmitter: EventEmitter;
-
-  /** @internal */
-  public constructor(protected viewer: Viewer) {
-    this._eventEmitter = new EventEmitter();
-  }
-
-  /**
-   * Used @internal to fire a viewer event
-   */
-  public fireEvent(event: ViewerEvent, ...args: any[]): void {
-    this._eventEmitter.emit(event, ...args);
-  }
-
-  /**
-   * Add listener to certain viewer event
-   */
-  public addListener(event: ViewerEvent, fn: EventEmitter.ListenerFn): void {
-    this._eventEmitter.addListener(event, fn);
-  }
-
-  /**
-   * Remove listener to viewer event
-   */
-  public removeListener(event: ViewerEvent, fn: EventEmitter.ListenerFn): void {
-    this._eventEmitter.removeListener(event, fn);
-  }
-
-  /**
-   * Used @internal to clean eventing sytem before viewer destruction
-   */
-  public removeAllListeners(event?: ViewerEvent): void {
-    this._eventEmitter.removeAllListeners(event);
-  }
-}
+import { Viewer } from '../index';
+import EventEmitter from 'eventemitter3';
+
+// NOTE: ATM we expose only very few events, due to the following reasons:
+// - Code is generally asynchronous and can be awaited by consumer
+// - We don't want to bloat the code with events that are never used
+
+/**
+ * Events that are fired by the viewer
+ */
+export enum ViewerEvent {
+  /**
+   * Requested material is not available in the scene yet and is about to be created
+   * @param materialId
+   */
+  MaterialCreationStart = 'MaterialCreationStart',
+  /**
+   * Material creation has been finished, that includes:
+   *   - Load definition from Combeenation server
+   *   - Load all textures
+   *   - Compile shader
+   * @param materialId
+   * @param allMaterialsCreated signalizes that no more materials are currently being created
+   */
+  MaterialCreationEnd = 'MaterialCreationEnd',
+  /**
+   * Bounding sphere for autofocusing camera has been calculated.
+   * This is used internally for debugging purposes.
+   * @param boundingSphere
+   */
+  AutofocusStart = 'AutofocusStart',
+}
+
+/**
+ * Manager for eventing system, which ATM is only a slim wrapper about the "eventemitter3" library
+ */
+export class EventManager {
+  protected _eventEmitter: EventEmitter;
+
+  /** @internal */
+  public constructor(protected viewer: Viewer) {
+    this._eventEmitter = new EventEmitter();
+  }
+
+  /**
+   * Used @internal to fire a viewer event
+   */
+  public fireEvent(event: ViewerEvent, ...args: any[]): void {
+    this._eventEmitter.emit(event, ...args);
+  }
+
+  /**
+   * Add listener to certain viewer event
+   */
+  public addListener(event: ViewerEvent, fn: EventEmitter.ListenerFn): void {
+    this._eventEmitter.addListener(event, fn);
+  }
+
+  /**
+   * Remove listener to viewer event
+   */
+  public removeListener(event: ViewerEvent, fn: EventEmitter.ListenerFn): void {
+    this._eventEmitter.removeListener(event, fn);
+  }
+
+  /**
+   * Used @internal to clean eventing sytem before viewer destruction
+   */
+  public removeAllListeners(event?: ViewerEvent): void {
+    this._eventEmitter.removeAllListeners(event);
+  }
+}