Skip to content

Commit

Permalink
Cleanup for 1.0 for 3D (#205)
Browse files Browse the repository at this point in the history
  • Loading branch information
JustinHoldstock authored Jul 7, 2017
1 parent 6acf8fa commit 78c11f2
Show file tree
Hide file tree
Showing 21 changed files with 326 additions and 202 deletions.
9 changes: 9 additions & 0 deletions src/lib/viewers/BaseViewer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
12 changes: 12 additions & 0 deletions src/lib/viewers/box3d/Box3DControls.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
39 changes: 32 additions & 7 deletions src/lib/viewers/box3d/Box3DRenderer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
*
Expand All @@ -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);
}
Expand Down Expand Up @@ -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');
Expand Down
9 changes: 2 additions & 7 deletions src/lib/viewers/box3d/Box3DUIUtils.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
11 changes: 9 additions & 2 deletions src/lib/viewers/box3d/Box3DViewer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand All @@ -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;
Expand Down
5 changes: 2 additions & 3 deletions src/lib/viewers/box3d/image360/Image360Loader.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand All @@ -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()) {
Expand Down
35 changes: 12 additions & 23 deletions src/lib/viewers/box3d/image360/Image360Renderer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 = {}) {
Expand All @@ -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) {
Expand All @@ -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);
Expand Down
14 changes: 0 additions & 14 deletions src/lib/viewers/box3d/image360/__tests__/Image360Renderer-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
33 changes: 21 additions & 12 deletions src/lib/viewers/box3d/model3d/Model3DAnimationClipsPullup.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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.
Expand All @@ -48,7 +57,7 @@ class Model3DAnimationClipsPullup extends EventEmitter {

/**
* Cleanup resources used by this pullup.
* @method destroy
*
* @public
* @return {void}
*/
Expand All @@ -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.
Expand All @@ -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.
*/
Expand All @@ -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.
Expand All @@ -103,7 +112,7 @@ class Model3DAnimationClipsPullup extends EventEmitter {

/**
* Handle clicks on clips.
* @method handleClipClick
*
* @private
* @param {Event} event - The click event.
* @return {void}
Expand All @@ -117,7 +126,7 @@ class Model3DAnimationClipsPullup extends EventEmitter {

/**
* Hide this pullup.
* @method hide
*
* @public
* @return {void}
*/
Expand All @@ -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.
Expand All @@ -139,7 +148,7 @@ class Model3DAnimationClipsPullup extends EventEmitter {

/**
* Reset this pullup to its default state.
* @method reset
*
* @public
* @return {void}
*/
Expand All @@ -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}
Expand All @@ -168,7 +177,7 @@ class Model3DAnimationClipsPullup extends EventEmitter {

/**
* Show this pullup.
* @method show
*
* @public
* @return {void}
*/
Expand All @@ -178,7 +187,7 @@ class Model3DAnimationClipsPullup extends EventEmitter {

/**
* Toggle the visibility of this pullup.
* @method toggle
*
* @public
* @return {void}
*/
Expand Down
Loading

0 comments on commit 78c11f2

Please sign in to comment.