Cleanup for 1.0 for 3D (#205)

box · Jul 7, 2017 · 78c11f2 · 78c11f2
1 parent 6acf8fa
commit 78c11f2
Show file tree

Hide file tree

Showing 21 changed files with 326 additions and 202 deletions.
diff --git a/src/lib/viewers/BaseViewer.js b/src/lib/viewers/BaseViewer.js
@@ -34,6 +34,15 @@ const LOAD_TIMEOUT_MS = 180000; // 3m
 const RESIZE_WAIT_TIME_IN_MILLIS = 300;
 
 @autobind class BaseViewer extends EventEmitter {
+    /** @property {Controls} - UI used to interact with the document in the viewer */
+    controls;
+
+    /** @property {boolean} - Flag for tracking whether or not this viewer has been destroyed */
+    destroyed = false;
+
+    /** @property {number} - Number of milliseconds to wait, while loading, until messaging that the viewer took too long to load */
+    loadTimeout;
+
     /** @property {number} - Rotation value in degrees, if rotated */
     rotationAngle = 0;
 

diff --git a/src/lib/viewers/box3d/Box3DControls.js b/src/lib/viewers/box3d/Box3DControls.js
@@ -8,6 +8,18 @@ import { CLASS_HIDDEN } from '../../constants';
 import { UIRegistry } from './Box3DUIUtils';
 
 @autobind class Box3DControls extends EventEmitter {
+    /** @property {HTMLElement} - Reference to the parent container to nest UI in */
+    el;
+
+    /** @property {Controls} - Control bar used to interact with the 3D scene */
+    controls;
+
+    /** @property {UIRegistry} - Used to track and cleanup UI components */
+    uiRegistry;
+
+    /** @property {HTMLElement} - Button used to enable/disable VR mode */
+    vrButtonEl;
+
     /**
      * Base class for building 3D previews on. Contains events for VR, Fullscreen,
      * Scene Reset, and Scene Loaded. Also, used for programmatic building of control

diff --git a/src/lib/viewers/box3d/Box3DRenderer.js b/src/lib/viewers/box3d/Box3DRenderer.js
@@ -34,6 +34,36 @@ function appendSharedLinkHeaders(xhr, sharedLink, sharedLinkPassword) {
 }
 
 class Box3DRenderer extends EventEmitter {
+    /** @property {HTMLElement} - Parent container element */
+    containerEl;
+
+    /** @property {boolean} - Flag for checking if VR mode is enabled */
+    vrEnabled = false;
+
+    /** @property {Box3D.NodeObject[]} - List of controller objects in the 3D scene */
+    vrGamepads = [];
+
+    /** @property {Box3D} - Box3D engine instance */
+    box3d;
+
+    /** @property {BoxSDK} - BoxSDK instance. Used for API calls to Box Metadata */
+    boxSdk;
+
+    /** @property {Object} - Default X, Y, Z position for the scene camera in 3D space */
+    defaultCameraPosition = PREVIEW_CAMERA_POSITION;
+
+    /** @property {Object} - Default X, Y, Z, W quaternion for the scene camera in 3D space */
+    defaultCameraQuaternion = PREVIEW_CAMERA_QUATERNION;
+
+    /** @property {Object} - Mapping of promises that each resolve when it's controller model file is loaded */
+    vrGamepadLoadPromises = {};
+
+    /** @property {Promise} - Promise that resolves IFF a common model file is loaded for left AND right controllers */
+    vrCommonLoadPromise;
+
+    /** @property {string} - Base URL for all static assets this file uses to be loaded from */
+    staticBaseURI;
+
     /**
      * Base class that handles creation of and communication with Box3DRuntime
      *
@@ -46,15 +76,9 @@ class Box3DRenderer extends EventEmitter {
         super();
 
         this.containerEl = containerEl;
-        this.vrEnabled = false;
-        this.vrGamepads = [];
-        this.box3d = null;
         this.boxSdk = boxSdk;
         this.on(EVENT_TRIGGER_RENDER, this.handleOnRender);
-        this.defaultCameraPosition = PREVIEW_CAMERA_POSITION;
-        this.defaultCameraQuaternion = PREVIEW_CAMERA_QUATERNION;
-        this.vrGamepadLoadPromises = {};
-        this.vrCommonLoadPromise = null;
+
         this.handleContextLost = this.handleContextLost.bind(this);
         this.handleContextRestored = this.handleContextRestored.bind(this);
     }
@@ -227,6 +251,7 @@ class Box3DRenderer extends EventEmitter {
             box3d.canvas.addEventListener('webglcontextlost', this.handleContextLost);
             box3d.canvas.addEventListener('webglcontextrestored', this.handleContextRestored);
         }
+
         return new Promise((resolve) => {
             box3d.addEntities(sceneEntities);
             const app = box3d.getAssetById('APP_ASSET_ID');

diff --git a/src/lib/viewers/box3d/Box3DUIUtils.js b/src/lib/viewers/box3d/Box3DUIUtils.js
@@ -146,13 +146,8 @@ function createDropdown(labelText = '', listText = '', listContent = []) {
  * Used to register HTMLElements and events for easy management and destruction later.
  */
 class UIRegistry {
-    /**
-     * @constructor
-     */
-    constructor() {
-        // List of registered elements and their events
-        this.registry = {};
-    }
+    /** @property {Object} - Collection of registered elements and their events */
+    registry = {};
 
     /**
      * Register an element for automatic event unbinding and cleanup.

diff --git a/src/lib/viewers/box3d/Box3DViewer.js b/src/lib/viewers/box3d/Box3DViewer.js
@@ -33,6 +33,15 @@ const CLASS_VR_ENABLED = 'vr-enabled';
  * @class
  */
 @autobind class Box3DViewer extends BaseViewer {
+    /** @property {Box3DRenderer} - Box3DRenderer instance. Renders the 3D scene */
+    renderer;
+
+    /** @property {HTMLElement} - Parent element for nesting the 3D scene and notifications in */
+    wrapperEl;
+
+    /** @property {Notification} - Used to notify users of WebGL context issues */
+    contextNotification;
+
     /**
      * @inheritdoc
      */
@@ -43,8 +52,6 @@ const CLASS_VR_ENABLED = 'vr-enabled';
         super.setup();
 
         this.renderer = null;
-        this.controls = null;
-        this.destroyed = false;
 
         this.wrapperEl = this.containerEl.appendChild(document.createElement('div'));
         this.wrapperEl.className = CSS_CLASS_BOX3D;

diff --git a/src/lib/viewers/box3d/image360/Image360Loader.js b/src/lib/viewers/box3d/image360/Image360Loader.js
@@ -15,6 +15,7 @@ const VIEWERS = [
 class Image360Loader extends Base360Loader {
     /**
      * Instantiates a loader for 360 degree image preview.
+     *
      * @constructor
      * @return {Image360Loader} The image360 loader instance
      */
@@ -23,9 +24,7 @@ class Image360Loader extends Base360Loader {
         this.viewers = VIEWERS;
     }
 
-    /**
-     * @inheritdoc
-     */
+    /** @inheritdoc */
     determineViewer(file, disabledViewers = []) {
         const viewer = super.determineViewer(file, disabledViewers);
         if (viewer && !Browser.hasWebGL()) {

diff --git a/src/lib/viewers/box3d/image360/Image360Renderer.js b/src/lib/viewers/box3d/image360/Image360Renderer.js
@@ -8,20 +8,14 @@ import sceneEntities from './SceneEntities';
  * Runtime library.
  */
 class Image360Renderer extends Box3DRenderer {
-    /**
-     * Handles creating and caching a Box3DRuntime, and creating a scene made for
-     * previewing 360 images
-     *
-     * @constructor
-     * @inheritdoc
-     * @return {Image360Renderer} Image360Renderer instance
-     */
-    constructor(containerEl, boxSdk) {
-        super(containerEl, boxSdk);
-        this.textureAsset = null;
-        this.imageAsset = null;
-        this.skybox = null;
-    }
+    /** @property {Box3D.Texture2DAsset} - Asset for the skybox texture */
+    textureAsset;
+
+    /** @property {Box3D.ImageAsset} - Asset for the image to apply to the texture */
+    imageAsset;
+
+    /** @property {Box3D.Components.SkyboxRenderer} - The component for rendering the image as 360 degree (on a skybox) */
+    skybox;
 
     /**
      * Called on preview destroy
@@ -69,11 +63,11 @@ class Image360Renderer extends Box3DRenderer {
     }
 
     /**
-     * Load a box3d json
+     * Load a box3d json.
      *
      * @inheritdoc
      * @param {string} assetUrl - The url to the box3d json
-     * @param {Object} options - Options
+     * @param {Object} [options] - Options to be applied on loading the scene
      * @return {Promise} a promise that resolves with the newly created runtime
      */
     load(assetUrl, options = {}) {
@@ -91,7 +85,6 @@ class Image360Renderer extends Box3DRenderer {
      *
      * @private
      * @param {string} assetUrl - The representation URL.
-     * @param {string} assetPath - The asset path needed to access file
      * @return {void}
      */
     loadPanoramaFile(assetUrl) {
@@ -118,17 +111,13 @@ class Image360Renderer extends Box3DRenderer {
         );
     }
 
-    /**
-     * @inheritdoc
-     */
+    /** @inheritdoc */
     enableVr() {
         super.enableVr();
         this.getSkyboxComponent().setAttribute('stereoEnabled', true);
     }
 
-    /**
-     * @inheritdoc
-     */
+    /** @inheritdoc */
     disableVr() {
         super.disableVr();
         this.getSkyboxComponent().setAttribute('stereoEnabled', false);

diff --git a/src/lib/viewers/box3d/image360/__tests__/Image360Renderer-test.js b/src/lib/viewers/box3d/image360/__tests__/Image360Renderer-test.js
@@ -29,20 +29,6 @@ describe('lib/viewers/box3d/image360/Image360Renderer', () => {
         renderer = null;
     });
 
-    describe('constructor()', () => {
-        it('should create a null variable called .textureAsset', () => {
-            expect(renderer.textureAsset).to.be.null;
-        });
-
-        it('should create a null variable called .imageAsset', () => {
-            expect(renderer.imageAsset).to.be.null;
-        });
-
-        it('should create a null variable called .skybox', () => {
-            expect(renderer.skybox).to.be.null;
-        });
-    });
-
     describe('destroy()', () => {
         it('should call cleanupTexture()', () => {
             const stub = sandbox.stub(renderer, 'cleanupTexture');

diff --git a/src/lib/viewers/box3d/model3d/Model3DAnimationClipsPullup.js b/src/lib/viewers/box3d/model3d/Model3DAnimationClipsPullup.js
@@ -13,6 +13,15 @@ const CLIP_TEMPLATE = `
     </div>`.trim();
 
 class Model3DAnimationClipsPullup extends EventEmitter {
+    /** @property {HTMLElement} - Pullup element that contains 3D scene configuration properties */
+    pullupEl;
+
+    /** @property {UIRegistry} - Used to track and cleanup UI elements */
+    uiRegistry;
+
+    /** @property {Object} - Dictionary of elements linked to animation clips */
+    clipEls;
+
     /** @constructor */
     constructor() {
         super();
@@ -25,7 +34,7 @@ class Model3DAnimationClipsPullup extends EventEmitter {
 
     /**
      * Add an animation clip to the pullup.
-     * @method addClip
+     *
      * @public
      * @param {string} id - The ID of the animation clip.
      * @param {string} name - The name of the animation clip.
@@ -48,7 +57,7 @@ class Model3DAnimationClipsPullup extends EventEmitter {
 
     /**
      * Cleanup resources used by this pullup.
-     * @method destroy
+     *
      * @public
      * @return {void}
      */
@@ -60,7 +69,7 @@ class Model3DAnimationClipsPullup extends EventEmitter {
 
     /**
      * Format a duration, in seconds, as a time code of the form: HH:MM:SS.
-     * @method formatDurationStr
+     *
      * @private
      * @param {number} duration - The duration, in seconds.
      * @return {string} The time code string.
@@ -82,7 +91,7 @@ class Model3DAnimationClipsPullup extends EventEmitter {
 
     /**
      * Get the number of clips in this pullup.
-     * @method getClipCount
+     * 
      * @public
      * @return {number} The number of clips in this pullup.
      */
@@ -92,7 +101,7 @@ class Model3DAnimationClipsPullup extends EventEmitter {
 
     /**
      * Get the clip ID for the clip at the specified index.
-     * @method getClipId
+     * 
      * @public
      * @param {number} index - The clip index.
      * @return {string} The clip ID.
@@ -103,7 +112,7 @@ class Model3DAnimationClipsPullup extends EventEmitter {
 
     /**
      * Handle clicks on clips.
-     * @method handleClipClick
+     * 
      * @private
      * @param {Event} event - The click event.
      * @return {void}
@@ -117,7 +126,7 @@ class Model3DAnimationClipsPullup extends EventEmitter {
 
     /**
      * Hide this pullup.
-     * @method hide
+     * 
      * @public
      * @return {void}
      */
@@ -127,7 +136,7 @@ class Model3DAnimationClipsPullup extends EventEmitter {
 
     /**
      * Left-pad the specified integer with zeroes.
-     * @method padLeft
+     * 
      * @private
      * @param {number} x - The integer to pad with zeroes.
      * @param {number} width - The total number of characters in the padded string.
@@ -139,7 +148,7 @@ class Model3DAnimationClipsPullup extends EventEmitter {
 
     /**
      * Reset this pullup to its default state.
-     * @method reset
+     * 
      * @public
      * @return {void}
      */
@@ -151,7 +160,7 @@ class Model3DAnimationClipsPullup extends EventEmitter {
 
     /**
      * Select the specified clip, firing EVENT_SELECT_ANIMATION_CLIP.
-     * @method selectClip
+     * 
      * @public
      * @param {string} selectedClipId - The ID of the clip to select.
      * @return {void}
@@ -168,7 +177,7 @@ class Model3DAnimationClipsPullup extends EventEmitter {
 
     /**
      * Show this pullup.
-     * @method show
+     * 
      * @public
      * @return {void}
      */
@@ -178,7 +187,7 @@ class Model3DAnimationClipsPullup extends EventEmitter {
 
     /**
      * Toggle the visibility of this pullup.
-     * @method toggle
+     * 
      * @public
      * @return {void}
      */