Skip to content

Commit

Permalink
Add toggle and metadata for box3d grid
Browse files Browse the repository at this point in the history
  • Loading branch information
@MiiBond
MiiBond authored May 24, 2017
1 parent 22cd9b1 commit d139a15
Show file tree
Hide file tree
Showing 10 changed files with 155 additions and 36 deletions.
1 change: 0 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@
"fetch-mock": "^5.9.4",
"fetch-mock-forwarder": "^1.0.0",
"file-loader": "^0.10.1",
"husky": "^0.13.3",
"i18n-webpack-plugin": "^0.3.0",
"isomorphic-fetch": "^2.2.1",
"karma": "^1.5.0",
Expand Down
13 changes: 13 additions & 0 deletions src/lib/viewers/box3d/model3d/Model3DControls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
EVENT_SET_RENDER_MODE,
EVENT_SET_SKELETONS_VISIBLE,
EVENT_SET_WIREFRAMES_VISIBLE,
EVENT_SET_GRID_VISIBLE,
EVENT_TOGGLE_ANIMATION,
EVENT_TOGGLE_HELPERS,
RENDER_MODE_LIT
Expand Down Expand Up @@ -67,6 +68,7 @@ class Model3DControls extends Box3DControls {
this.settingsPullup.addListener(EVENT_SET_RENDER_MODE, this.handleSetRenderMode);
this.settingsPullup.addListener(EVENT_SET_SKELETONS_VISIBLE, this.handleSetSkeletonsVisible);
this.settingsPullup.addListener(EVENT_SET_WIREFRAMES_VISIBLE, this.handleSetWireframesVisible);
this.settingsPullup.addListener(EVENT_SET_GRID_VISIBLE, this.handleSetGridVisible);
this.settingsPullup.addListener(EVENT_SET_CAMERA_PROJECTION, this.handleSetCameraProjection);
this.settingsPullup.addListener(EVENT_SET_QUALITY_LEVEL, this.handleSetQualityLevel);
this.settingsPullup.addListener(EVENT_ROTATE_ON_AXIS, this.handleAxisRotation);
Expand Down Expand Up @@ -129,6 +131,16 @@ class Model3DControls extends Box3DControls {
this.emit(EVENT_SET_WIREFRAMES_VISIBLE, visible);
}

/**
* Handle a change in grid visibility
* @param {boolean} visible - Indicates whether or not the grid is visible
* @return {void}
*/
handleSetGridVisible(visible) {
this.emit(EVENT_SET_GRID_VISIBLE, visible);
this.settingsPullup.setGridVisible(visible);
}

/**
* Handle change of camera projection
* @param {string} mode - The projection mode to use
Expand Down Expand Up @@ -300,6 +312,7 @@ class Model3DControls extends Box3DControls {
this.settingsPullup.removeListener(EVENT_SET_RENDER_MODE, this.handleSetRenderMode);
this.settingsPullup.removeListener(EVENT_SET_SKELETONS_VISIBLE, this.handleSetSkeletonsVisible);
this.settingsPullup.removeListener(EVENT_SET_WIREFRAMES_VISIBLE, this.handleSetWireframesVisible);
this.settingsPullup.removeListener(EVENT_SET_GRID_VISIBLE, this.handleSetGridVisible);
this.settingsPullup.removeListener(EVENT_SET_CAMERA_PROJECTION, this.handleSetCameraProjection);
this.settingsPullup.removeListener(EVENT_SET_QUALITY_LEVEL, this.handleSetQualityLevel);
this.settingsPullup.removeListener(EVENT_ROTATE_ON_AXIS, this.handleAxisRotation);
Expand Down
14 changes: 14 additions & 0 deletions src/lib/viewers/box3d/model3d/Model3DRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -450,6 +450,7 @@ class Model3DRenderer extends Box3DRenderer {
this.grid.material.transparent = true;
this.grid.material.blending = THREE.MultiplyBlending;
scene.add(this.grid);
this.grid.visible = true;

this.axisDisplay = new THREE.AxisHelper(0.5);
scene.add(this.axisDisplay);
Expand Down Expand Up @@ -694,6 +695,19 @@ class Model3DRenderer extends Box3DRenderer {
}
}

/**
* Set the visibility of the grid.
*
* @private
* @param {boolean} visible - Indicates whether or not the grid is visible.
* @return {void}
*/
setGridVisible(visible) {
if (this.box3d) {
this.grid.visible = visible;
}
}

/** @inheritdoc */
enableVr() {
if (this.vrEnabled) {
Expand Down
48 changes: 48 additions & 0 deletions src/lib/viewers/box3d/model3d/Model3DSettingsPullup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
EVENT_SET_RENDER_MODE,
EVENT_SET_SKELETONS_VISIBLE,
EVENT_SET_WIREFRAMES_VISIBLE,
EVENT_SET_GRID_VISIBLE,
RENDER_MODE_LIT,
RENDER_MODE_UNLIT,
RENDER_MODE_NORMALS,
Expand Down Expand Up @@ -96,6 +97,7 @@ class Model3DSettingsPullup extends EventEmitter {
this.renderModeEl = null;
this.renderModeListEl = null;
this.showWireframesEl = null;
this.showGridEl = null;
this.showSkeletonsEl = null;
this.projectionEl = null;
this.projectionListEl = null;
Expand Down Expand Up @@ -146,6 +148,18 @@ class Model3DSettingsPullup extends EventEmitter {
this.renderModeEl = renderModeDropdownEl.querySelector('button');
this.pullupEl.appendChild(renderModeDropdownEl);

// Grid option
const gridRowEl = createRow();
this.showGridEl = createCheckbox();
const gridLabelEl = createLabel('Show grid');
gridRowEl.appendChild(this.showGridEl);
gridRowEl.appendChild(gridLabelEl);
this.pullupEl.appendChild(gridRowEl);

this.showGridEl.addEventListener('click', () => {
this.onShowGridToggled();
});

// Wireframe option
const wireframeRowEl = createRow();
this.showWireframesEl = createCheckbox();
Expand Down Expand Up @@ -356,6 +370,16 @@ class Model3DSettingsPullup extends EventEmitter {
this.emit(EVENT_SET_WIREFRAMES_VISIBLE, this.showWireframesEl.checked);
}

/**
* Notify listeners that the show grid checkbox was toggled.
* @method onShowGridToggled
* @private
* @return {void}
*/
onShowGridToggled() {
this.emit(EVENT_SET_GRID_VISIBLE, this.showGridEl.checked);
}

/**
* Hide wireframes and uncheck check box
* @method hideWireframes
Expand All @@ -367,6 +391,17 @@ class Model3DSettingsPullup extends EventEmitter {
this.onShowWireframesToggled();
}

/**
* Show grid and check check box
* @method showGrid
* @public
* @return {void}
*/
showGrid() {
this.showGridEl.checked = true;
this.onShowGridToggled();
}

/**
* Reset the pullup to its default state.
* @method reset
Expand All @@ -376,6 +411,7 @@ class Model3DSettingsPullup extends EventEmitter {
reset() {
this.hideWireframes();
this.hideSkeletons();
this.showGrid();
}

/**
Expand All @@ -400,6 +436,17 @@ class Model3DSettingsPullup extends EventEmitter {
this.projectionEl.textContent = mode;
}

/**
* 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}
*/
setGridVisible(visible) {
this.showGridEl.checked = visible;
}

/**
* Show the settings panel.
* @method show
Expand Down Expand Up @@ -447,6 +494,7 @@ class Model3DSettingsPullup extends EventEmitter {
this.uiRegistry = null;
this.renderModeEl = null;
this.showWireframesEl = null;
this.showGridEl = null;
this.showSkeletonsEl = null;
this.projectionEl = null;
this.qualityLevelEl = null;
Expand Down
22 changes: 22 additions & 0 deletions src/lib/viewers/box3d/model3d/Model3DViewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
EVENT_SET_RENDER_MODE,
EVENT_SET_SKELETONS_VISIBLE,
EVENT_SET_WIREFRAMES_VISIBLE,
EVENT_SET_GRID_VISIBLE,
EVENT_TOGGLE_ANIMATION,
EVENT_TOGGLE_HELPERS,
RENDER_MODE_LIT
Expand All @@ -21,6 +22,7 @@ import './Model3D.scss';

const DEFAULT_AXIS_UP = '+Y';
const DEFAULT_AXIS_FORWARD = '+Z';
const DEFAULT_RENDER_GRID = true;

/**
* Model3d
Expand Down Expand Up @@ -69,6 +71,7 @@ class Model3DViewer extends Box3DViewer {
this.controls.on(EVENT_SET_RENDER_MODE, this.handleSetRenderMode);
this.controls.on(EVENT_SET_SKELETONS_VISIBLE, this.handleShowSkeletons);
this.controls.on(EVENT_SET_WIREFRAMES_VISIBLE, this.handleShowWireframes);
this.controls.on(EVENT_SET_GRID_VISIBLE, this.handleShowGrid);
this.controls.on(EVENT_TOGGLE_ANIMATION, this.handleToggleAnimation);
this.controls.on(EVENT_TOGGLE_HELPERS, this.handleToggleHelpers);
}
Expand All @@ -92,6 +95,7 @@ class Model3DViewer extends Box3DViewer {
this.controls.removeListener(EVENT_SET_RENDER_MODE, this.handleSetRenderMode);
this.controls.removeListener(EVENT_SET_SKELETONS_VISIBLE, this.handleShowSkeletons);
this.controls.removeListener(EVENT_SET_WIREFRAMES_VISIBLE, this.handleShowWireframes);
this.controls.removeListener(EVENT_SET_GRID_VISIBLE, this.handleShowGrid);
this.controls.removeListener(EVENT_TOGGLE_ANIMATION, this.handleToggleAnimation);
this.controls.removeListener(EVENT_TOGGLE_HELPERS, this.handleToggleHelpers);
}
Expand Down Expand Up @@ -206,6 +210,13 @@ class Model3DViewer extends Box3DViewer {
this.axes.forward = defaults.forwardAxis || DEFAULT_AXIS_FORWARD;
this.renderMode = defaults.defaultRenderMode || RENDER_MODE_LIT;
this.projection = defaults.cameraProjection || CAMERA_PROJECTION_PERSPECTIVE;
if (defaults.renderGrid === 'true') {
this.renderGrid = true;
} else if (defaults.renderGrid === 'false') {
this.renderGrid = false;
} else {
this.renderGrid = DEFAULT_RENDER_GRID;
}

if (this.axes.up !== DEFAULT_AXIS_UP || this.axes.forward !== DEFAULT_AXIS_FORWARD) {
this.handleRotationAxisSet(this.axes.up, this.axes.forward, false);
Expand Down Expand Up @@ -308,6 +319,7 @@ class Model3DViewer extends Box3DViewer {
this.controls.setCurrentProjectionMode(this.projection);
this.controls.handleSetSkeletonsVisible(false);
this.controls.handleSetWireframesVisible(false);
this.controls.handleSetGridVisible(this.renderGrid);
}

if (this.renderer) {
Expand Down Expand Up @@ -374,6 +386,16 @@ class Model3DViewer extends Box3DViewer {
handleShowWireframes(visible) {
this.renderer.setWireframesVisible(visible);
}

/**
* Handle setting grid visibility.
* @private
* @param {boolean} visible - Indicates whether or not the grid is visible.
* @return {void}
*/
handleShowGrid(visible) {
this.renderer.setGridVisible(visible);
}
}

export default Model3DViewer;
17 changes: 17 additions & 0 deletions src/lib/viewers/box3d/model3d/__tests__/Model3DControls-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
EVENT_SET_RENDER_MODE,
EVENT_SET_SKELETONS_VISIBLE,
EVENT_SET_WIREFRAMES_VISIBLE,
EVENT_SET_GRID_VISIBLE,
EVENT_TOGGLE_ANIMATION,
EVENT_TOGGLE_HELPERS
} from '../model3DConstants';
Expand Down Expand Up @@ -122,6 +123,10 @@ describe('lib/viewers/box3d/model3d/Model3DControls', () => {
event: EVENT_SET_WIREFRAMES_VISIBLE,
callback: 'handleSetWireframesVisible'
},
{
event: EVENT_SET_GRID_VISIBLE,
callback: 'handleSetGridVisible'
},
{
event: EVENT_SET_CAMERA_PROJECTION,
callback: 'handleSetCameraProjection'
Expand Down Expand Up @@ -264,6 +269,18 @@ describe('lib/viewers/box3d/model3d/Model3DControls', () => {
});
});

describe('handleSetGridVisible()', () => {
it('should fire a "set grid visiblity" event', () => {
sandbox.mock(controls).expects('emit').withArgs(EVENT_SET_GRID_VISIBLE);
controls.handleSetGridVisible();
});

it('should fire a "set grid visiblity" event with a flag to turn them on and off explicitly', () => {
sandbox.mock(controls).expects('emit').withArgs(EVENT_SET_GRID_VISIBLE, true);
controls.handleSetGridVisible(true);
});
});

describe('handleSetCameraProjection()', () => {
it('should fire a "set camera visibility" event', () => {
sandbox.mock(controls).expects('emit').withArgs(EVENT_SET_CAMERA_PROJECTION);
Expand Down
22 changes: 20 additions & 2 deletions src/lib/viewers/box3d/model3d/__tests__/Model3DRenderer-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -983,7 +983,7 @@ describe('lib/viewers/box3d/model3d/Model3DRenderer', () => {

it('should set the axis display to flag passed in', () => {
renderer.axisDisplay = {
visibile: undefined
visible: undefined
};
renderer.toggleHelpers(true);
expect(renderer.axisDisplay.visible).to.be.true;
Expand All @@ -992,7 +992,7 @@ describe('lib/viewers/box3d/model3d/Model3DRenderer', () => {

it('should tell the runtime to re-render', () => {
renderer.axisDisplay = {
visibile: true
visible: true
};
renderer.toggleHelpers();
expect(renderer.box3d.needsRender).to.be.true;
Expand Down Expand Up @@ -1295,6 +1295,24 @@ describe('lib/viewers/box3d/model3d/Model3DRenderer', () => {
});
});

describe('setGridVisible()', () => {
it('should do nothing if no box3d reference', () => {
sandbox.mock(Box3D.globalEvents).expects('trigger').never();
renderer.box3d = undefined;
renderer.setGridVisible(false);
});

it('should cause a change in grid visibility', () => {
renderer.grid = {
visible: false
};
renderer.setGridVisible(true);
expect(renderer.grid.visible).to.equal(true);
// Get rid of grid to prevent dispose calls during shutdown.
renderer.grid = undefined;
});
});

describe('enableVr()', () => {
it('should do nothing if vr is already enabled', () => {
sandbox.mock(renderer.box3d).expects('getVrDisplay').never();
Expand Down
20 changes: 19 additions & 1 deletion src/lib/viewers/box3d/model3d/__tests__/Model3DViewer-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
EVENT_SET_RENDER_MODE,
EVENT_SET_SKELETONS_VISIBLE,
EVENT_SET_WIREFRAMES_VISIBLE,
EVENT_SET_GRID_VISIBLE,
EVENT_TOGGLE_ANIMATION,
EVENT_TOGGLE_HELPERS
} from '../model3DConstants';
Expand Down Expand Up @@ -59,6 +60,7 @@ describe('lib/viewers/box3d/model3d/Model3DViewer', () => {
handleSetRenderMode: () => {},
handleSetSkeletonsVisible: () => {},
handleSetWireframesVisible: () => {},
handleSetGridVisible: () => {},
on: () => {},
selectAnimationClip: () => {},
showAnimationControls: () => {},
Expand Down Expand Up @@ -87,7 +89,8 @@ describe('lib/viewers/box3d/model3d/Model3DViewer', () => {
setQualityLevel: () => {},
setCameraProjection: () => {},
toggleHelpers: () => {},
setWireframesVisible: () => {}
setWireframesVisible: () => {},
setGridVisible: () => {}
};

model3d.postLoad();
Expand Down Expand Up @@ -200,6 +203,10 @@ describe('lib/viewers/box3d/model3d/Model3DViewer', () => {
event: EVENT_SET_WIREFRAMES_VISIBLE,
callback: 'handleShowWireframes'
},
{
event: EVENT_SET_GRID_VISIBLE,
callback: 'handleShowGrid'
},
{
event: EVENT_TOGGLE_ANIMATION,
callback: 'handleToggleAnimation'
Expand Down Expand Up @@ -517,6 +524,16 @@ describe('lib/viewers/box3d/model3d/Model3DViewer', () => {
sandbox.mock(model3d.renderer).expects('setWireframesVisible').withArgs(true);
model3d.handleShowWireframes(true);
});

it('should invoke renderer.setGridVisible() when calling handleShowGrid()', () => {
sandbox.mock(model3d.renderer).expects('setGridVisible');
model3d.handleShowGrid();
});

it('should invoke renderer.setGridVisible() when calling handleShowGrid(), with parameter provided', () => {
sandbox.mock(model3d.renderer).expects('setGridVisible').withArgs(true);
model3d.handleShowGrid(true);
});
});

describe('scene load errors', () => {
Expand Down Expand Up @@ -581,6 +598,7 @@ describe('lib/viewers/box3d/model3d/Model3DViewer', () => {
sandbox.mock(model3d.controls).expects('setCurrentProjectionMode');
sandbox.mock(model3d.controls).expects('handleSetSkeletonsVisible');
sandbox.mock(model3d.controls).expects('handleSetWireframesVisible');
sandbox.mock(model3d.controls).expects('handleSetGridVisible');
const renderMock = sandbox.mock(model3d.renderer);
renderMock.expects('stopAnimation').once();
model3d.handleReset();
Expand Down
Loading

0 comments on commit d139a15

Please sign in to comment.