From 78c11f2bfe5da6624a21cffe7b5db67b6545c3d4 Mon Sep 17 00:00:00 2001 From: Justin Holdstock Date: Fri, 7 Jul 2017 15:41:21 -0700 Subject: [PATCH] Cleanup for 1.0 for 3D (#205) --- src/lib/viewers/BaseViewer.js | 9 ++ src/lib/viewers/box3d/Box3DControls.js | 12 +++ src/lib/viewers/box3d/Box3DRenderer.js | 39 +++++++-- src/lib/viewers/box3d/Box3DUIUtils.js | 9 +- src/lib/viewers/box3d/Box3DViewer.js | 11 ++- .../viewers/box3d/image360/Image360Loader.js | 5 +- .../box3d/image360/Image360Renderer.js | 35 +++----- .../__tests__/Image360Renderer-test.js | 14 --- .../model3d/Model3DAnimationClipsPullup.js | 33 ++++--- .../viewers/box3d/model3d/Model3DControls.js | 82 +++++++++++------- .../viewers/box3d/model3d/Model3DLoader.js | 5 +- .../viewers/box3d/model3d/Model3DRenderer.js | 52 ++++++++---- .../box3d/model3d/Model3DSettingsPullup.js | 85 ++++++++++++------- .../viewers/box3d/model3d/Model3DViewer.js | 18 ++-- .../box3d/model3d/Model3DVrControls.js | 47 ++++++++-- .../box3d/video360/Video360Controls.js | 18 ++-- .../viewers/box3d/video360/Video360Loader.js | 5 +- .../box3d/video360/Video360Renderer.js | 10 +-- .../viewers/box3d/video360/Video360Viewer.js | 25 ++++-- .../__tests__/Video360Renderer-test.js | 6 -- .../video360/__tests__/Video360Viewer-test.js | 8 -- 21 files changed, 326 insertions(+), 202 deletions(-) diff --git a/src/lib/viewers/BaseViewer.js b/src/lib/viewers/BaseViewer.js index 40b94ed61..74c41a6ef 100644 --- 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 index 699d4d458..3eabc004d 100644 --- 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 index 9f76ed376..4202185fe 100644 --- 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 index 5304672c8..f7eba3cf0 100644 --- 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 index 65b3429d4..46289fc73 100644 --- 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 index e15e5e340..a23c3bb01 100644 --- 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 index 279c04a89..d9b4e43f3 100644 --- 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 index cd7f31f26..42e70a98c 100644 --- 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 index 8d72e2719..1a69c01b3 100644 --- a/src/lib/viewers/box3d/model3d/Model3DAnimationClipsPullup.js +++ b/src/lib/viewers/box3d/model3d/Model3DAnimationClipsPullup.js @@ -13,6 +13,15 @@ const CLIP_TEMPLATE = ` `.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} */ diff --git a/src/lib/viewers/box3d/model3d/Model3DControls.js b/src/lib/viewers/box3d/model3d/Model3DControls.js index 5983714f6..374450b78 100644 --- a/src/lib/viewers/box3d/model3d/Model3DControls.js +++ b/src/lib/viewers/box3d/model3d/Model3DControls.js @@ -28,8 +28,30 @@ import { ICON_3D_RESET, ICON_ANIMATION, ICON_GEAR, ICON_PAUSE, ICON_PLAY } from * @class */ @autobind class Model3DControls extends Box3DControls { + /** @property {Model3DAnimationClipsPullup} - UI Component for listing and interacting with animation clips */ + animationClipsPullup; + + /** @property {Model3DSettingsPullup} - UI component for displaying 3D settings. IE) skeleton, render modes */ + settingsPullup; + + /** @property {boolean} - True if the current animation is playing */ + isAnimationPlaying = false; + + /** @property {HTMLElement} - Element for reset button. Resets the whole scene to default values, when selected */ + resetButtonEl; + + /** @property {HTMLElement} - Element for toggling playback of current selected animation */ + animationToggleEl; + + /** @property {HTMLElement} - Element for toggling open/close of the settings pullup */ + settingsButtonEl; + + /** @property {HTMLElement} - Element for toggling open/close of the animationClipsPullup */ + animationClipButtonEl; + /** - * Creates UI and handles events for 3D Model Preview + * Creates UI and handles events for 3D Model Preview. + * * @constructor * @inheritdoc * @return {Model3DControls} Model3DControls instance @@ -38,7 +60,6 @@ import { ICON_3D_RESET, ICON_ANIMATION, ICON_GEAR, ICON_PAUSE, ICON_PLAY } from super(containerEl); this.animationClipsPullup = new Model3DAnimationClipsPullup(containerEl); this.settingsPullup = new Model3DSettingsPullup(); - this.isAnimationPlaying = false; } /** @inheritdoc */ @@ -86,7 +107,7 @@ import { ICON_3D_RESET, ICON_ANIMATION, ICON_GEAR, ICON_PAUSE, ICON_PLAY } from /** * Hide any open pullups. - * @method hidePullups + * * @public * @return {void} */ @@ -97,7 +118,8 @@ import { ICON_3D_RESET, ICON_ANIMATION, ICON_GEAR, ICON_PAUSE, ICON_PLAY } from } /** - * Handle toggle Settings ui event + * Handle toggle Settings ui event. + * * @return {void} */ handleToggleSettings() { @@ -107,7 +129,8 @@ import { ICON_3D_RESET, ICON_ANIMATION, ICON_GEAR, ICON_PAUSE, ICON_PLAY } from } /** - * Handle a change of render mode, from the settings panel + * Handle a change of render mode, from the settings panel. + * * @param {string} renderMode - The render mode name to notify listeners of * @return {void} */ @@ -117,7 +140,8 @@ import { ICON_3D_RESET, ICON_ANIMATION, ICON_GEAR, ICON_PAUSE, ICON_PLAY } from } /** - * Handle a change in skeleton visibility + * Handle a change in skeleton visibility. + * * @param {boolean} visible - Indicates whether or not skeletons are visible * @return {void} */ @@ -126,7 +150,8 @@ import { ICON_3D_RESET, ICON_ANIMATION, ICON_GEAR, ICON_PAUSE, ICON_PLAY } from } /** - * Handle a change in wireframe visibility + * Handle a change in wireframe visibility. + * * @param {boolean} visible - Indicates whether or not wireframes are visible * @return {void} */ @@ -135,7 +160,8 @@ import { ICON_3D_RESET, ICON_ANIMATION, ICON_GEAR, ICON_PAUSE, ICON_PLAY } from } /** - * Handle a change in grid visibility + * Handle a change in grid visibility. + * * @param {boolean} visible - Indicates whether or not the grid is visible * @return {void} */ @@ -145,7 +171,8 @@ import { ICON_3D_RESET, ICON_ANIMATION, ICON_GEAR, ICON_PAUSE, ICON_PLAY } from } /** - * Handle change of camera projection + * Handle change of camera projection. + * * @param {string} mode - The projection mode to use * @return {void} */ @@ -154,7 +181,8 @@ import { ICON_3D_RESET, ICON_ANIMATION, ICON_GEAR, ICON_PAUSE, ICON_PLAY } from } /** - * Handle change of render quality + * Handle change of render quality. + * * @param {string} level - The quality level to use * @return {void} */ @@ -163,7 +191,8 @@ import { ICON_3D_RESET, ICON_ANIMATION, ICON_GEAR, ICON_PAUSE, ICON_PLAY } from } /** - * Handle rotation on axis + * Handle rotation on axis. + * * @param {Object} rotation - Rotation axis description with axis and amount (in degrees) * @return {void} */ @@ -173,7 +202,7 @@ import { ICON_3D_RESET, ICON_ANIMATION, ICON_GEAR, ICON_PAUSE, ICON_PLAY } from /** * Show the animation controls. - * @method showAnimationControls + * * @public * @return {void} */ @@ -188,7 +217,7 @@ import { ICON_3D_RESET, ICON_ANIMATION, ICON_GEAR, ICON_PAUSE, ICON_PLAY } from /** * Hide the animation controls. - * @method hideAnimationControls + * * @public * @return {void} */ @@ -203,7 +232,7 @@ import { ICON_3D_RESET, ICON_ANIMATION, ICON_GEAR, ICON_PAUSE, ICON_PLAY } from /** * Handle animation clip selection. - * @method handleSelectAnimationClip + * * @private * @param {string} clipId - The ID of the clip that was selected. * @return {void} @@ -215,7 +244,7 @@ import { ICON_3D_RESET, ICON_ANIMATION, ICON_GEAR, ICON_PAUSE, ICON_PLAY } from /** * Handle clicks on the animation clip button. - * @method handleToggleAnimationClips + * * @private * @return {void} */ @@ -226,7 +255,7 @@ import { ICON_3D_RESET, ICON_ANIMATION, ICON_GEAR, ICON_PAUSE, ICON_PLAY } from /** * Handle clicks on the animation play / pause button. - * @method handleToggleAnimation + * * @private * @return {void} */ @@ -237,7 +266,7 @@ import { ICON_3D_RESET, ICON_ANIMATION, ICON_GEAR, ICON_PAUSE, ICON_PLAY } from /** * Set the animation playback state, firing event EVENT_TOGGLE_ANIMATION. - * @method setAnimationPlaying + * * @private * @param {boolean} playing - Whether or not the animation is playing. * @return {void} @@ -250,7 +279,7 @@ import { ICON_3D_RESET, ICON_ANIMATION, ICON_GEAR, ICON_PAUSE, ICON_PLAY } from /** * Add an animation clip to the clip pullup. - * @method addAnimationClip + * * @public * @param {string} id - The ID of the clip. * @param {string} name - The name of the clip. @@ -263,7 +292,7 @@ import { ICON_3D_RESET, ICON_ANIMATION, ICON_GEAR, ICON_PAUSE, ICON_PLAY } from /** * Select the animation clip with the specified ID. - * @method selectAnimationClip + * * @public * @param {string} clipId - The ID of the clip to select. * @return {void} @@ -272,16 +301,15 @@ import { ICON_3D_RESET, ICON_ANIMATION, ICON_GEAR, ICON_PAUSE, ICON_PLAY } from this.animationClipsPullup.selectClip(clipId); } - /** - * @inheritdoc - */ + /** @inheritdoc */ handleToggleFullscreen() { super.handleToggleFullscreen(); this.hidePullups(); } /** - * Set the current projection mode being used by the settings pullup + * Set the current projection mode being used by the settings pullup. + * * @param {string} mode - The projection mode to set on the pullup * @return {void} */ @@ -290,9 +318,7 @@ import { ICON_3D_RESET, ICON_ANIMATION, ICON_GEAR, ICON_PAUSE, ICON_PLAY } from this.settingsPullup.setCurrentProjectionMode(mode); } - /** - * @inheritdoc - */ + /** @inheritdoc */ handleReset() { super.handleReset(); this.hidePullups(); @@ -300,9 +326,7 @@ import { ICON_3D_RESET, ICON_ANIMATION, ICON_GEAR, ICON_PAUSE, ICON_PLAY } from this.setAnimationPlaying(false); } - /** - * @inheritdoc - */ + /** @inheritdoc */ destroy() { if (this.controls) { this.controls.controlsEl.removeEventListener('click', this.handleControlsClick); diff --git a/src/lib/viewers/box3d/model3d/Model3DLoader.js b/src/lib/viewers/box3d/model3d/Model3DLoader.js index ee5493a96..70e5d6551 100644 --- a/src/lib/viewers/box3d/model3d/Model3DLoader.js +++ b/src/lib/viewers/box3d/model3d/Model3DLoader.js @@ -15,6 +15,7 @@ const VIEWERS = [ class Model3DLoader extends AssetLoader { /** * Instantiates a loader for 3D model preview. + * * @constructor * @inheritdoc * @return {Model3DLoader} The model3d loader instance @@ -24,9 +25,7 @@ class Model3DLoader extends AssetLoader { this.viewers = VIEWERS; } - /** - * @inheritdoc - */ + /** @inheritdoc */ determineViewer(file, disabledViewers = []) { const viewer = super.determineViewer(file, disabledViewers); diff --git a/src/lib/viewers/box3d/model3d/Model3DRenderer.js b/src/lib/viewers/box3d/model3d/Model3DRenderer.js index fcc9a59d5..2fe3a7044 100644 --- a/src/lib/viewers/box3d/model3d/Model3DRenderer.js +++ b/src/lib/viewers/box3d/model3d/Model3DRenderer.js @@ -1,5 +1,4 @@ /* global Box3D, THREE */ -import autobind from 'autobind-decorator'; import Box3DRenderer from '../Box3DRenderer'; import Model3DVrControls from './Model3DVrControls'; import sceneEntities from './SceneEntities'; @@ -53,6 +52,39 @@ const DEFAULT_MODEL_SIZE = 1; * Runtime library. */ class Model3DRenderer extends Box3DRenderer { + /** @property {Box3D.BaseObject} - The instance that contains the model that is added to the scene */ + instance; + + /** @property {THREE.GridHelper} - The grid overlayed on the scene when opening the settings panel. Used to judge scale */ + grid; + + /** @property {THREE.AxisHelper} - Axis lines overlayed on the scene to help judge alignment */ + axisDisplay; + + /** @property {boolean} - If true, the model is currently rotating to a new rotation. Throttles rotation events */ + isRotating = false; + + /** @property {Object} - X, Y, Z scale of the instance added to the scene */ + modelSize = DEFAULT_MODEL_SIZE; + + /** @property {Object} - X, Y, Z position of the instance added to the scene*/ + modelAlignmentPosition = ORIGIN_VECTOR; + + /** @property {Object} - X, Y, Z the origin point for the instance to align relative to */ + modelAlignmentVector = FLOOR_VECTOR; + + /** @property {boolean} - If true, the dynamic optimizer component is enabled. Will render lower res, etc. for better framerate */ + dynamicOptimizerEnabled = true; + + /** @property {Object} - X, Y, Z default position of the camera, in the 3D scene */ + defaultCameraPosition = PREVIEW_CAMERA_POSITION; + + /** @property {Object} - X, Y, Z default rotation of the camera, in the 3D scene */ + defaultCameraQuaternion = PREVIEW_CAMERA_QUATERNION; + + /** A mapping of preview render mode names to Box3D render mode enum values */ + renderModeValues; + /** * Creates a 3D runtime and loads in a 3D model for rendering * @@ -65,18 +97,6 @@ class Model3DRenderer extends Box3DRenderer { constructor(containerEl, boxSdk) { super(containerEl, boxSdk); - this.instance = null; - this.grid = null; - this.axisDisplay = null; - this.isRotating = false; - this.modelSize = DEFAULT_MODEL_SIZE; - this.modelAlignmentPosition = ORIGIN_VECTOR; - this.modelAlignmentVector = FLOOR_VECTOR; - this.dynamicOptimizerEnabled = true; - this.defaultCameraPosition = PREVIEW_CAMERA_POSITION; - this.defaultCameraQuaternion = PREVIEW_CAMERA_QUATERNION; - - // A mapping of preview render mode names to Box3D render mode enum values. this.renderModeValues = { [RENDER_MODE_LIT]: Box3D.RenderMode.Lit, [RENDER_MODE_UNLIT]: Box3D.RenderMode.Unlit, @@ -84,6 +104,8 @@ class Model3DRenderer extends Box3DRenderer { [RENDER_MODE_SHAPE]: Box3D.RenderMode.Shape, [RENDER_MODE_UV]: Box3D.RenderMode.UVOverlay }; + + this.handleCanvasClick = this.handleCanvasClick.bind(this); } /** @inheritdoc */ @@ -119,7 +141,7 @@ class Model3DRenderer extends Box3DRenderer { * @param {Event} event - The click event. * @return {void} */ - @autobind handleCanvasClick(event) { + handleCanvasClick(event) { this.emit(EVENT_CANVAS_CLICK, event); } @@ -127,7 +149,7 @@ class Model3DRenderer extends Box3DRenderer { * Load a box3d representation and initialize the scene. * * @private - * @param {string} assetUrl - The representation URL + * @param {string} assetUrl - The representation URL. * @return {void} */ loadBox3dFile(assetUrl) { diff --git a/src/lib/viewers/box3d/model3d/Model3DSettingsPullup.js b/src/lib/viewers/box3d/model3d/Model3DSettingsPullup.js index b299c5778..1757df0b0 100644 --- a/src/lib/viewers/box3d/model3d/Model3DSettingsPullup.js +++ b/src/lib/viewers/box3d/model3d/Model3DSettingsPullup.js @@ -85,20 +85,41 @@ const QUALITY_LEVELS = [ * The UI and events system necessary to run the Settings Panel. */ class Model3DSettingsPullup extends EventEmitter { + /** @property {HTMLElement} - Element that contains UI to interact with render modes */ + renderModeEl; + + /** @property {HTMLElement} - Element containing list of render modes */ + renderModeListEl; + + /** @property {HTMLElement} - Element that toggles on and off wireframe rendering */ + showWireframesEl; + + /** @property {HTMLElement} - Element that toggles on and off the grid */ + showGridEl; + + /** @property {HTMLElement} - Element that toggles on and off skeleton rendering */ + showSkeletonsEl; + + /** @property {HTMLElement} - Element that contains UI to interact with projection modes */ + projectionEl; + + /** @property {HTMLElement} - Element containing list of projection modes */ + projectionListEl; + + /** @property {HTMLElement} - Element that contains UI to interact with render quality */ + qualityLevelEl; + + /** @property {HTMLElement} - Element containing list of render quality levels */ + qualityLevelListEl; + + /** @property {UIRegistry} - Used to track and cleanup UI pieces and event handlers */ + uiRegistry; + /** * @constructor */ constructor() { super(); - this.renderModeEl = null; - this.renderModeListEl = null; - this.showWireframesEl = null; - this.showGridEl = null; - this.showSkeletonsEl = null; - this.projectionEl = null; - this.projectionListEl = null; - this.qualityLevelEl = null; - this.qualityLevelListEl = null; this.uiRegistry = new UIRegistry(); this.createUi(); @@ -106,7 +127,7 @@ class Model3DSettingsPullup extends EventEmitter { /** * Convert the callback property of a config callback to a valid callback function. - * @method convertToValidCallback + * * @private * @param {Object} configEntry - A descriptor for the callback. * @param {Function} configEntry.callback - The callback function to search for and assign back to the entry. @@ -124,7 +145,7 @@ class Model3DSettingsPullup extends EventEmitter { /** * Create the UI necessary to run the Settings panel pullup. - * @method createUi + * * @private * @return {void} */ @@ -231,7 +252,7 @@ class Model3DSettingsPullup extends EventEmitter { /** * Create the axis rotation widget. - * @method createAxisWidget + * * @private * @return {HtmlElement} The newly created rotation axis widget element. */ @@ -267,7 +288,7 @@ class Model3DSettingsPullup extends EventEmitter { /** * Create a single axis rotation widget. - * @method createRotationAxis + * * @private * @param {string} axisLabel - The label for the axis. * @param {Function} minusIconCallback - Called when the "minus" icon is clicked. @@ -301,7 +322,7 @@ class Model3DSettingsPullup extends EventEmitter { /** * Emit a message with the render mode that has been selected. - * @method onRenderModeSelected + * * @private * @param {string} mode - The render mode to emit a message about. * @return {void} @@ -312,7 +333,7 @@ class Model3DSettingsPullup extends EventEmitter { /** * Emit an axis rotation event with the axis of rotation and direction to rotate. - * @method onAxisRotationSelected + * * @private * @param {string} rotationAxis - The axis to rotate on. * @param {number} direction - The direction to rotate: 1 is positive rotation and -1 is negative. @@ -326,7 +347,7 @@ class Model3DSettingsPullup extends EventEmitter { /** * Set the current projection mode being used. - * @method onProjectionSelected + * * @private * @param {string} mode - The projection mode to use. * @return {void} @@ -337,7 +358,7 @@ class Model3DSettingsPullup extends EventEmitter { /** * Set the current quality level used for rendering. - * @method onQualityLevelSelected + * * @private * @param {string} level - The quality level to use. * @return {void} @@ -348,7 +369,7 @@ class Model3DSettingsPullup extends EventEmitter { /** * Notify listeners that the show skeletons checkbox was toggled. - * @method onShowSkeletonsToggled + * * @private * @return {void} */ @@ -357,8 +378,8 @@ class Model3DSettingsPullup extends EventEmitter { } /** - * Hide skeletons and uncheck check box - * @method hideSkeletons + * Hide skeletons and uncheck check box. + * * @public * @return {void} */ @@ -369,7 +390,7 @@ class Model3DSettingsPullup extends EventEmitter { /** * Notify listeners that the show wireframes checkbox was toggled. - * @method onShowWireframesToggled + * * @private * @return {void} */ @@ -379,7 +400,7 @@ class Model3DSettingsPullup extends EventEmitter { /** * Notify listeners that the show grid checkbox was toggled. - * @method onShowGridToggled + * * @private * @return {void} */ @@ -389,7 +410,7 @@ class Model3DSettingsPullup extends EventEmitter { /** * Hide wireframes and uncheck check box - * @method hideWireframes + * * @public * @return {void} */ @@ -400,7 +421,7 @@ class Model3DSettingsPullup extends EventEmitter { /** * Show grid and check check box - * @method showGrid + * * @public * @return {void} */ @@ -411,7 +432,7 @@ class Model3DSettingsPullup extends EventEmitter { /** * Reset the pullup to its default state. - * @method reset + * * @public * @return {void} */ @@ -422,8 +443,8 @@ class Model3DSettingsPullup extends EventEmitter { } /** - * Set the current render mode being shown, in the dropdown label - * @method setCurrentRenderMode + * Set the current render mode being shown, in the dropdown label. + * * @public * @param {string} mode - The render mode name to display. * @return {void} @@ -434,7 +455,7 @@ class Model3DSettingsPullup extends EventEmitter { /** * Set the current projection mode being used, in the dropdown label. - * @method setCurrentProjectionMode + * * @public * @param {string} mode - The projection mode name to display * @return {void} @@ -445,7 +466,7 @@ class Model3DSettingsPullup extends EventEmitter { /** * Set the current state of the grid to the checkbox in the UI. - * @method setGridVisible + * * @public * @param {string} visible - Whether to check the box or not. * @return {void} @@ -456,7 +477,7 @@ class Model3DSettingsPullup extends EventEmitter { /** * Show the settings panel. - * @method show + * * @public * @return {void} */ @@ -466,7 +487,7 @@ class Model3DSettingsPullup extends EventEmitter { /** * Hide the settings panel, and close inner dropdowns. - * @method hide + * * @public * @return {void} */ @@ -479,7 +500,7 @@ class Model3DSettingsPullup extends EventEmitter { /** * Toggle display of settings panel, make sure dropdowns are closed. - * @method toggle + * * @public * @return {void} */ diff --git a/src/lib/viewers/box3d/model3d/Model3DViewer.js b/src/lib/viewers/box3d/model3d/Model3DViewer.js index 04ff95503..7df823fa4 100644 --- a/src/lib/viewers/box3d/model3d/Model3DViewer.js +++ b/src/lib/viewers/box3d/model3d/Model3DViewer.js @@ -23,6 +23,7 @@ import './Model3D.scss'; const DEFAULT_AXIS_UP = '+Y'; const DEFAULT_AXIS_FORWARD = '+Z'; const DEFAULT_RENDER_GRID = true; +const LOAD_TIMEOUT = 180000; // 3 minutes /** * Model3d @@ -30,6 +31,15 @@ const DEFAULT_RENDER_GRID = true; * @class */ @autobind class Model3DViewer extends Box3DViewer { + /** @property {Object[]} - List of Box3D instances added to the scene */ + instances = []; + + /** @property {Object} - Tracks up and forward axes for the model alignment in the scene */ + axes = { + up: null, + forward: null + }; + /** * @inheritdoc */ @@ -39,13 +49,7 @@ const DEFAULT_RENDER_GRID = true; this.wrapperEl.classList.add(CSS_CLASS_INVISIBLE); - this.loadTimeout = 180000; // 3 minutes - this.instances = []; - this.assets = []; - this.axes = { - up: null, - forward: null - }; + this.loadTimeout = LOAD_TIMEOUT; } /** diff --git a/src/lib/viewers/box3d/model3d/Model3DVrControls.js b/src/lib/viewers/box3d/model3d/Model3DVrControls.js index 65be43730..bdf61f1e5 100644 --- a/src/lib/viewers/box3d/model3d/Model3DVrControls.js +++ b/src/lib/viewers/box3d/model3d/Model3DVrControls.js @@ -18,6 +18,37 @@ const buttonMap = { * This class handles the gamepad input used my the Model3D viewer while in VR mode. */ class Model3DVrControls { + /** @property {Box3D.NodeObject[]} - List of vr gamepads that exist in the 3D scene */ + vrGamepads; + + /** @property {Box3D} - Instance of the Box3D runtime*/ + box3d; + + /** @property {Object} - Tracks the state of controller interaction */ + controllerState; + + /** @property {number} - Used to track the initial scale distance when entering scale mode */ + initialScaleDistance = 0; + + /** @property {THREE.Vector3} - Used to track the initial scale when entering scale mode */ + initialScale = new THREE.Vector3(); + + /** @property {THREE.Vector3} - Internal worker vector, for performing Math ops */ + vrWorkVector1 = new THREE.Vector3(); + + /** @property {THREE.Vector3} - Internal worker vector, for performing Math ops */ + vrWorkVector2 = new THREE.Vector3(); + + /** @property {THREE.Vector3} - Internal worker vector, for performing Math ops */ + vrWorkMatrix = new THREE.Matrix4(); + + /** + * This class handles the gamepad input used my the Model3D viewer while in VR mode. + * + * @constructor + * @param {Box3D.NodeObject[]} vrGamepads - List of vr gamepads that exist in the 3D scene + * @param {Box3D} box3dEngine - Instance of the Box3D runtime + */ constructor(vrGamepads, box3dEngine) { this.vrGamepads = vrGamepads; this.box3d = box3dEngine; @@ -32,19 +63,11 @@ class Model3DVrControls { previousParent: null, controlType: controlType.None }; - // Values to track information about the initial scale when the - // object scaling mode is entered. - this.initialScaleDistance = 0; - this.initialScale = new THREE.Vector3(); - - // Internal objects for calculations. - this.vrWorkVector1 = new THREE.Vector3(); - this.vrWorkVector2 = new THREE.Vector3(); - this.vrWorkMatrix = new THREE.Matrix4(); } /** * Unbind from all events on the gamepads and do any other needed cleanup. + * * @return {void} */ destroy() { @@ -54,6 +77,7 @@ class Model3DVrControls { /** * Move an object from one parent to another while maintaining the object's * world transform values. i.e. the size, position and scale that it appears. + * * @param {Box3D.NodeObject} object - The object whose parent will be changed. * @param {Box3D.NodeObject} newParent - The new parent for the object. * @return {void} @@ -81,6 +105,7 @@ class Model3DVrControls { /** * Start the object translation mode. + * * @return {void} */ startTranslation() { @@ -97,6 +122,7 @@ class Model3DVrControls { /** * Update the scale of the object each frame based on controller positions. + * * @return {void} */ @autobind onScaleUpdate() { @@ -122,6 +148,7 @@ class Model3DVrControls { /** * End the object scaling mode. + * * @return {void} */ endScale() { @@ -130,6 +157,7 @@ class Model3DVrControls { /** * When the controller trigger is released, transition control modes. + * * @param {Gamepad} gamepad - The Gamepad object whose button was released. * @param {number} buttonIdx - The ID of the button on the Gamepad. * @return {void} @@ -159,6 +187,7 @@ class Model3DVrControls { /** * When the controller trigger is pressed, transition control modes. + * * @param {Gamepad} gamepad - The Gamepad object whose button was pressed. * @param {number} buttonIdx - The ID of the button on the Gamepad. * @return {void} diff --git a/src/lib/viewers/box3d/video360/Video360Controls.js b/src/lib/viewers/box3d/video360/Video360Controls.js index 21a7153f3..856fbb380 100644 --- a/src/lib/viewers/box3d/video360/Video360Controls.js +++ b/src/lib/viewers/box3d/video360/Video360Controls.js @@ -7,6 +7,12 @@ const CSS_CLASS_MEDIA_CONTROLS_CONTAINER = 'bp-media-controls-container'; const CSS_CLASS_MEDIA_CONTROL_BUTTON = 'bp-media-controls-btn'; class Video360Controls extends EventEmitter { + /** @property {HTMLElement} - Parent container for the controls */ + el; + + /** @property {HTMLElement} - Container that provides enabling/disabling of 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 @@ -29,7 +35,7 @@ class Video360Controls extends EventEmitter { } /** - * Add and create any UI to the container element and control bar + * Add and create any UI to the container element and control bar. * * @return {void} */ @@ -48,7 +54,7 @@ class Video360Controls extends EventEmitter { } /** - * Attaches event handlers to buttons + * Attaches event handlers to buttons. * * @return {void} */ @@ -59,7 +65,7 @@ class Video360Controls extends EventEmitter { } /** - * Detach event handlers from buttons + * Detach event handlers from buttons. * * @return {void} */ @@ -70,7 +76,7 @@ class Video360Controls extends EventEmitter { } /** - * Handle a toggle of VR event, and emit a message + * Handle a toggle of VR event, and emit a message. * * @return {void} */ @@ -79,7 +85,7 @@ class Video360Controls extends EventEmitter { } /** - * Enables the VR button + * Enables the VR button. * * @return {void} */ @@ -90,7 +96,7 @@ class Video360Controls extends EventEmitter { } /** - * Destroy all controls, and this module + * Destroy all controls, and this module. * * @return {void} */ diff --git a/src/lib/viewers/box3d/video360/Video360Loader.js b/src/lib/viewers/box3d/video360/Video360Loader.js index b0c0cfc69..f868b475d 100644 --- a/src/lib/viewers/box3d/video360/Video360Loader.js +++ b/src/lib/viewers/box3d/video360/Video360Loader.js @@ -33,6 +33,7 @@ const VIEWERS = [ class Video360Loader extends Base360Loader { /** * Instantiates a loader for 360 degree video preview. + * * @return {Video360Loader} Video360Loader instance */ constructor() { @@ -40,9 +41,7 @@ class Video360Loader extends Base360Loader { this.viewers = VIEWERS; } - /** - * @inheritdoc - */ + /** @inheritdoc */ determineViewer(file, disabledViewers = []) { const viewer = super.determineViewer(file, disabledViewers); if (viewer) { diff --git a/src/lib/viewers/box3d/video360/Video360Renderer.js b/src/lib/viewers/box3d/video360/Video360Renderer.js index 34bc2e404..2edf8f5bf 100644 --- a/src/lib/viewers/box3d/video360/Video360Renderer.js +++ b/src/lib/viewers/box3d/video360/Video360Renderer.js @@ -1,14 +1,8 @@ import Box3DRenderer from '../Box3DRenderer'; class Video360Renderer extends Box3DRenderer { - /** - * @inheritdoc - */ - constructor(containerEl, boxSdk) { - super(containerEl, boxSdk); - - this.inputController = null; - } + /** @property {Box3D.Components.Input} - Component that handles device input events */ + inputController; /** * Get the input controller attached to the runtime diff --git a/src/lib/viewers/box3d/video360/Video360Viewer.js b/src/lib/viewers/box3d/video360/Video360Viewer.js index 11bff89bf..60b180b03 100644 --- a/src/lib/viewers/box3d/video360/Video360Viewer.js +++ b/src/lib/viewers/box3d/video360/Video360Viewer.js @@ -21,17 +21,28 @@ const VIDEO_TEXTURE_PROPS = { }; class Video360Viewer extends DashViewer { - /** - * @inheritdoc - */ + /** @property {Video360Renderer} - Instance of the Video360Renderer */ + renderer; + + /** @property {Video360Controls} - Instance of the Video360Controls */ + controls; + + /** @property {Box3D.Texture2DAsset} - Asset for the skybox texture */ + textureAsset; + + /** @property {Box3D.VideoAsset} - Asset for the video to apply to the texture */ + videoAsset; + + /** @property {Box3D.Components.SkyboxRenderer} - The component for rendering the video as 360 degree (on a skybox) */ + skybox; + + /** @inheritdoc */ setup() { this.fileLoadingIcon = ICON_FILE_MEDIA; // Call super() to set up common layout super.setup(); - this.renderer = null; - this.controls = null; this.destroyed = false; // Hide video element @@ -42,9 +53,7 @@ class Video360Viewer extends DashViewer { this.wrapperEl.classList.add(CSS_CLASS_VIDEO_360); } - /** - * @inheritdoc - */ + /** @inheritdoc */ destroy() { super.destroy(); if (this.skybox) { diff --git a/src/lib/viewers/box3d/video360/__tests__/Video360Renderer-test.js b/src/lib/viewers/box3d/video360/__tests__/Video360Renderer-test.js index 2cbdd13b6..0ab36bd3b 100644 --- a/src/lib/viewers/box3d/video360/__tests__/Video360Renderer-test.js +++ b/src/lib/viewers/box3d/video360/__tests__/Video360Renderer-test.js @@ -34,12 +34,6 @@ describe('lib/viewers/box3d/video360/Video360Renderer', () => { renderer = null; }); - describe('constructor()', () => { - it('should create an empty variable, .inputController, for storing Input Controller component reference', () => { - expect(renderer.inputController).to.be.null; - }); - }); - describe('getInputController()', () => { beforeEach(() => { renderer.box3d = { diff --git a/src/lib/viewers/box3d/video360/__tests__/Video360Viewer-test.js b/src/lib/viewers/box3d/video360/__tests__/Video360Viewer-test.js index 94b6428cb..c1d3114ea 100644 --- a/src/lib/viewers/box3d/video360/__tests__/Video360Viewer-test.js +++ b/src/lib/viewers/box3d/video360/__tests__/Video360Viewer-test.js @@ -62,14 +62,6 @@ describe('lib/viewers/box3d/video360/Video360Viewer', () => { viewer.setup(); }); - it('should create an empty .renderer property', () => { - expect(viewer.renderer).to.be.null; - }); - - it('should create an empty .controls property', () => { - expect(viewer.controls).to.be.null; - }); - it('should create .destroyed property of false', () => { expect(viewer.destroyed).to.be.false; });