Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(model3d): Basic React controls #1368

Merged
merged 6 commits into from
May 4, 2021
Merged

feat(model3d): Basic React controls #1368

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
aa44851
feat(model3d): Basic React controls
Apr 29, 2021
fc21bac
chore: pr comments
May 3, 2021
181e6aa
chore: address pr comments
May 3, 2021
680e55b
chore: address pr comments
May 3, 2021
953ca35
chore: add unit tests
May 3, 2021
5851eaa
chore: pr comments
May 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions src/lib/viewers/box3d/Box3DViewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,8 @@ class Box3DViewer extends BaseViewer {
* @return {void}
*/
attachEventHandlers() {
if (this.controls) {
if (this.controls && !this.getViewerOption('useReactControls')) {
// TODO: This can be removed once Image360 and Video360 controls are migrated to React
this.controls.on(EVENT_TOGGLE_FULLSCREEN, this.toggleFullscreen);
this.controls.on(EVENT_TOGGLE_VR, this.handleToggleVr);
this.controls.on(EVENT_RESET, this.handleReset);
Expand All @@ -118,7 +119,7 @@ class Box3DViewer extends BaseViewer {
* @return {void}
*/
detachEventHandlers() {
if (this.controls) {
if (this.controls && !this.getViewerOption('useReactControls')) {
this.controls.removeListener(EVENT_TOGGLE_FULLSCREEN, this.toggleFullscreen);
this.controls.removeListener(EVENT_TOGGLE_VR, this.handleToggleVr);
this.controls.removeListener(EVENT_RESET, this.handleReset);
Expand Down Expand Up @@ -298,7 +299,7 @@ class Box3DViewer extends BaseViewer {
this.wrapperEl.classList.remove(CLASS_VR_ENABLED);
}

if (this.controls) {
if (this.controls && !this.getViewerOption('useReactControls')) {
this.controls.vrEnabled = vrDevice && vrDevice.isPresenting;
}
}
Expand Down
32 changes: 32 additions & 0 deletions src/lib/viewers/box3d/__tests__/Box3DViewer-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,13 @@ describe('lib/viewers/box3d/Box3DViewer', () => {

expect(onSpy).toBeCalledWith(EVENT_RESET, expect.any(Function));
});

test('should not invoke any box3d.controls.on() if using react controls', () => {
jest.spyOn(box3d, 'getViewerOption').mockImplementation(() => true);
box3d.controls = { destroy: jest.fn(), on: jest.fn() };
box3d.attachEventHandlers();
expect(box3d.controls.on).not.toBeCalled();
});
});

test("should not attach handlers to controls if controls instance doesn't exist", () => {
Expand Down Expand Up @@ -216,6 +223,13 @@ describe('lib/viewers/box3d/Box3DViewer', () => {

expect(detachSpy).toBeCalledWith(EVENT_RESET, expect.any(Function));
});

test('should not invoke any box3d.controls.removeListener() if using react controls', () => {
jest.spyOn(box3d, 'getViewerOption').mockImplementation(() => true);
box3d.controls = { destroy: jest.fn(), removeListener: jest.fn() };
box3d.detachEventHandlers();
expect(box3d.controls.removeListener).not.toBeCalled();
});
});

test('should not invoke controls.removeListener() when controls is undefined', () => {
Expand Down Expand Up @@ -311,6 +325,15 @@ describe('lib/viewers/box3d/Box3DViewer', () => {
expect(box3d.controls.destroy).toBeCalled();
});

test('should still call controls.destroy() if using react controls', () => {
jest.spyOn(box3d, 'getViewerOption').mockImplementation(() => true);
box3d.controls = { destroy: jest.fn(), on: jest.fn() };

box3d.destroy();

expect(box3d.controls.destroy).toBeCalled();
});

test('should call renderer.destroy() if it exists', () => {
jest.spyOn(box3d.renderer, 'destroy');

Expand Down Expand Up @@ -474,6 +497,15 @@ describe('lib/viewers/box3d/Box3DViewer', () => {
expect(box3d.wrapperEl).not.toHaveClass('vr-enabled');
expect(box3d.controls.vrEnabled).not.toBe(true);
});

test('should not add vr-enabled if use react controls is enabled', () => {
jest.spyOn(box3d, 'getViewerOption').mockImplementation(() => true);
jest.spyOn(Browser, 'isMobile').mockReturnValue(true);

box3d.onVrPresentChange();

expect(box3d.controls.vrEnabled).toBe(false);
});
});

describe('handleSceneLoaded()', () => {
Expand Down
38 changes: 38 additions & 0 deletions src/lib/viewers/box3d/model3d/Model3DControlsNew.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from 'react';
import AnimationControls, { Props as AnimationControlsProps } from '../../controls/model3d/AnimationControls';
import ControlsBar from '../../controls/controls-bar';
import FullscreenToggle, { Props as FullscreenToggleProps } from '../../controls/fullscreen';
import ResetControl, { Props as ResetControlProps } from '../../controls/model3d/ResetControl';

export type Props = AnimationControlsProps & FullscreenToggleProps & ResetControlProps;

export default function Model3DControls({
animationClips,
currentAnimationClipId,
isPlaying,
onAnimationClipSelect,
onFullscreenToggle,
onPlayPause,
onReset,
}: Props): JSX.Element {
const handleReset = (): void => {
// TODO: will need to reset the state to defaults
onReset();
};

return (
<ControlsBar>
<ResetControl onReset={handleReset} />
<AnimationControls
animationClips={animationClips}
currentAnimationClipId={currentAnimationClipId}
isPlaying={isPlaying}
onAnimationClipSelect={onAnimationClipSelect}
onPlayPause={onPlayPause}
/>
{/* TODO: VR button */}
{/* TODO: Settings button */}
<FullscreenToggle onFullscreenToggle={onFullscreenToggle} />
</ControlsBar>
);
}
162 changes: 115 additions & 47 deletions src/lib/viewers/box3d/model3d/Model3DViewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import React from 'react';
import Box3DViewer from '../Box3DViewer';
import ControlsRoot from '../../controls/controls-root';
import Model3DControls from './Model3DControls';
import Model3DControlsNew from './Model3DControlsNew';
import Model3DRenderer from './Model3DRenderer';
import {
CAMERA_PROJECTION_PERSPECTIVE,
Expand Down Expand Up @@ -28,15 +31,21 @@ const LOAD_TIMEOUT = 180000; // 3 minutes
* This is the entry point for the model3d preview.
*/
class Model3DViewer extends Box3DViewer {
/** @property {Object[]} - List of Box3D instances added to the scene */
instances = [];
/** @property {Object[]} - List of animation clips for the given Box3D file */
animationClips = [];

/** @property {Object} - Tracks up and forward axes for the model alignment in the scene */
axes = {
up: null,
forward: null,
};

/** @property {Object[]} - List of Box3D instances added to the scene */
instances = [];

/** @property {boolean} - Boolean indicating whether the animation is playihng */
isAnimationPlaying = false;

/** @inheritdoc */
constructor(option) {
super(option);
Expand All @@ -51,6 +60,7 @@ class Model3DViewer extends Box3DViewer {
this.handleToggleAnimation = this.handleToggleAnimation.bind(this);
this.handleToggleHelpers = this.handleToggleHelpers.bind(this);
this.handleCanvasClick = this.handleCanvasClick.bind(this);
this.initViewer = this.initViewer.bind(this);

this.onMetadataError = this.onMetadataError.bind(this);
}
Expand All @@ -75,7 +85,9 @@ class Model3DViewer extends Box3DViewer {
* @inheritdoc
*/
createSubModules() {
this.controls = new Model3DControls(this.wrapperEl);
this.controls = this.getViewerOption('useReactControls')
? new ControlsRoot({ containerEl: this.wrapperEl, fileId: this.options.file.id })
: new Model3DControls(this.wrapperEl);
this.renderer = new Model3DRenderer(this.wrapperEl, this.boxSdk, { api: this.api });
}

Expand All @@ -85,7 +97,7 @@ class Model3DViewer extends Box3DViewer {
attachEventHandlers() {
super.attachEventHandlers();

if (this.controls) {
if (this.controls && !this.getViewerOption('useReactControls')) {
this.controls.on(EVENT_ROTATE_ON_AXIS, this.handleRotateOnAxis);
this.controls.on(EVENT_SELECT_ANIMATION_CLIP, this.handleSelectAnimationClip);
this.controls.on(EVENT_SET_CAMERA_PROJECTION, this.handleSetCameraProjection);
Expand All @@ -108,7 +120,7 @@ class Model3DViewer extends Box3DViewer {
detachEventHandlers() {
super.detachEventHandlers();

if (this.controls) {
if (this.controls && !this.getViewerOption('useReactControls')) {
this.controls.removeListener(EVENT_ROTATE_ON_AXIS, this.handleRotateOnAxis);
this.controls.removeListener(EVENT_SELECT_ANIMATION_CLIP, this.handleSelectAnimationClip);
this.controls.removeListener(EVENT_SET_CAMERA_PROJECTION, this.handleSetCameraProjection);
Expand Down Expand Up @@ -174,39 +186,45 @@ class Model3DViewer extends Box3DViewer {
return response.response;
})
.catch(this.onMetadataError)
.then(defaults => {
if (this.controls) {
this.controls.addUi();
}
.then(this.initViewer);
}

this.axes.up = defaults.upAxis || DEFAULT_AXIS_UP;
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;
}
initViewer(defaults) {
if (this.controls) {
if (this.getViewerOption('useReactControls')) {
this.renderUI();
} else {
this.controls.addUi();
}
}

if (this.axes.up !== DEFAULT_AXIS_UP || this.axes.forward !== DEFAULT_AXIS_FORWARD) {
this.handleRotationAxisSet(this.axes.up, this.axes.forward, false);
}
this.axes.up = defaults.upAxis || DEFAULT_AXIS_UP;
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;
}

// Update controls ui
this.handleReset();
if (this.axes.up !== DEFAULT_AXIS_UP || this.axes.forward !== DEFAULT_AXIS_FORWARD) {
this.handleRotationAxisSet(this.axes.up, this.axes.forward, false);
}

// Update controls ui
this.handleReset();

// Initialize animation controls when animations are present.
this.populateAnimationControls();
// Initialize animation controls when animations are present.
this.populateAnimationControls();

this.showWrapper();
this.showWrapper();

this.emit(EVENT_LOAD);
this.emit(EVENT_LOAD);

return true;
});
return true;
}

/**
Expand Down Expand Up @@ -239,15 +257,31 @@ class Model3DViewer extends Box3DViewer {
if (animations.length > 0) {
const clipIds = animations[0].getClipIds();

clipIds.forEach(clipId => {
const clip = animations[0].getClip(clipId);
const duration = clip.stop - clip.start;
this.controls.addAnimationClip(clipId, clip.name, duration);
});

if (clipIds.length > 0) {
this.controls.showAnimationControls();
this.controls.selectAnimationClip(clipIds[0]);
if (this.getViewerOption('useReactControls')) {
this.animationClips = clipIds.map(clipId => {
const { name, start, stop } = animations[0].getClip(clipId);
const duration = stop - start;
return {
duration,
id: clipId,
name,
};
});

this.renderer.setAnimationClip(this.animationClips[0].id);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we be acting on renderer inside of a controls-specific method?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally not, but it was being done previously in a more roundabout way -- L282 sets the animation clip => Model3DControls would emit a EVENT_SELECT_ANIMATION_CLIP event => handleSelectAnimationClip which acts on the renderer


this.renderUI();
} else {
clipIds.forEach(clipId => {
const clip = animations[0].getClip(clipId);
const duration = clip.stop - clip.start;
this.controls.addAnimationClip(clipId, clip.name, duration);
});

if (clipIds.length > 0) {
this.controls.showAnimationControls();
this.controls.selectAnimationClip(clipIds[0]);
}
}
}
}
Expand All @@ -260,7 +294,16 @@ class Model3DViewer extends Box3DViewer {
* @return {void}
*/
handleToggleAnimation(play) {
this.renderer.toggleAnimation(play);
if (this.getViewerOption('useReactControls')) {
this.isAnimationPlaying = !this.isAnimationPlaying;
this.renderer.toggleAnimation(this.isAnimationPlaying);

if (this.controls) {
this.renderUI();
}
} else {
this.renderer.toggleAnimation(play);
}
}

/**
Expand All @@ -270,7 +313,9 @@ class Model3DViewer extends Box3DViewer {
* @return {void}
*/
handleCanvasClick() {
this.controls.hidePullups();
if (!this.getViewerOption('useReactControls')) {
this.controls.hidePullups();
}
}

/**
Expand All @@ -288,12 +333,18 @@ class Model3DViewer extends Box3DViewer {
handleReset() {
super.handleReset();

this.isAnimationPlaying = false;

if (this.controls) {
this.controls.handleSetRenderMode(this.renderMode);
this.controls.setCurrentProjectionMode(this.projection);
this.controls.handleSetSkeletonsVisible(false);
this.controls.handleSetWireframesVisible(false);
this.controls.handleSetGridVisible(this.renderGrid);
if (this.getViewerOption('useReactControls')) {
this.renderUI();
} else {
this.controls.handleSetRenderMode(this.renderMode);
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 @@ -369,6 +420,23 @@ class Model3DViewer extends Box3DViewer {
handleShowGrid(visible) {
this.renderer.setGridVisible(visible);
}

renderUI() {
if (!this.controls) {
return;
}

this.controls.render(
<Model3DControlsNew
animationClips={this.animationClips}
isPlaying={this.isAnimationPlaying}
onAnimationClipSelect={this.handleSelectAnimationClip}
onFullscreenToggle={this.toggleFullscreen}
onPlayPause={this.handleToggleAnimation}
onReset={this.handleReset}
/>,
);
}
}

export default Model3DViewer;
Loading