diff --git a/src/i18n/en-US.properties b/src/i18n/en-US.properties index 7ae81f135..a25a2fad5 100644 --- a/src/i18n/en-US.properties +++ b/src/i18n/en-US.properties @@ -154,14 +154,40 @@ auto_generated=Auto-Generated # 3D Preview # Button tooltip for showing/hiding the list of animation clips box3d_animation_clips=Animation clips +# Settings camera projection listbox item value: Perspective +box3d_camera_projection_perspective=Perspective +# Settings camera projection listbox item value: Orthographic +box3d_camera_projection_orthographic=Orthographic # Button tooltip for resetting all user modified settings in the control bar and Settings panel, to their defaults. This includes render mode, rotation, camera position box3d_reset=Reset # Button tooltip for playing and pausing animations box3d_toggle_animation=Play/pause animation # Button tooltip for toggling VR display mode in any 3D preview box3d_toggle_vr=Toggle VR display +# Settings render mode listbox item value: Lit +box3d_render_mode_lit=Lit +# Settings render mode listbox item value: Unlit +box3d_render_mode_unlit=Unlit +# Settings render mode listbox item value: Normals +box3d_render_mode_normals=Normals +# Settings render mode listbox item value: Shape +box3d_render_mode_shape=Shape +# Settings render mode listbox item value: UV Overlay +box3d_render_mode_uv_overlay=UV Overlay # Settings box3d_settings=Settings +# Settings render mode label +box3d_settings_render_label=Render mode +# Settings show grid label +box3d_settings_grid_label=Show grid +# Settings show wireframes label +box3d_settings_wireframes_label=Show wireframes +# Settings show skeletons label +box3d_settings_skeletons_label=Show skeletons +# Settings camera projection label +box3d_settings_projection_label=Camera Projection +# Settings rotate model label +box3d_settings_rotate_label=Rotate Model # Annotations # Placeholder text for create textarea in annotation dialog diff --git a/src/lib/viewers/box3d/model3d/Model3DControlsNew.tsx b/src/lib/viewers/box3d/model3d/Model3DControlsNew.tsx index c728b6500..e9fceadb6 100644 --- a/src/lib/viewers/box3d/model3d/Model3DControlsNew.tsx +++ b/src/lib/viewers/box3d/model3d/Model3DControlsNew.tsx @@ -2,27 +2,42 @@ 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 Model3DSettings, { Props as Model3DSettingsProps } from '../../controls/model3d/Model3DSettings'; import ResetControl, { Props as ResetControlProps } from '../../controls/model3d/ResetControl'; -export type Props = AnimationControlsProps & FullscreenToggleProps & ResetControlProps; +export type Props = AnimationControlsProps & + FullscreenToggleProps & + Model3DSettingsProps & + ResetControlProps & { + onSettingsClose: () => void; + onSettingsOpen: () => void; + }; export default function Model3DControls({ animationClips, + cameraProjection, currentAnimationClipId, isPlaying, onAnimationClipSelect, + onCameraProjectionChange, onFullscreenToggle, onPlayPause, + onRenderModeChange, + onRotateOnAxisChange, onReset, + onSettingsClose, + onSettingsOpen, + onShowGridToggle, + onShowSkeletonsToggle, + onShowWireframesToggle, + renderMode, + showGrid, + showSkeletons, + showWireframes, }: Props): JSX.Element { - const handleReset = (): void => { - // TODO: will need to reset the state to defaults - onReset(); - }; - return ( - + {/* TODO: VR button */} - {/* TODO: Settings button */} + ); diff --git a/src/lib/viewers/box3d/model3d/Model3DViewer.js b/src/lib/viewers/box3d/model3d/Model3DViewer.js index 2532b291e..466c16203 100644 --- a/src/lib/viewers/box3d/model3d/Model3DViewer.js +++ b/src/lib/viewers/box3d/model3d/Model3DViewer.js @@ -43,9 +43,24 @@ class Model3DViewer extends Box3DViewer { /** @property {Object[]} - List of Box3D instances added to the scene */ instances = []; - /** @property {boolean} - Boolean indicating whether the animation is playihng */ + /** @property {boolean} - Boolean indicating whether the animation is playing */ isAnimationPlaying = false; + /** @property {string} - string indicating what the camera projection is */ + projection = CAMERA_PROJECTION_PERSPECTIVE; + + /** @property {string} - string indicating what the render mode is */ + renderMode = RENDER_MODE_LIT; + + /** @property {boolean} - Boolean indicating whether the grid is showing */ + showGrid = DEFAULT_RENDER_GRID; + + /** @property {boolean} - Boolean indicating whether the skeletons are showing */ + showSkeletons = false; + + /** @property {boolean} - Boolean indicating whether the wireframes are showing */ + showWireframes = false; + /** @inheritdoc */ constructor(option) { super(option); @@ -204,11 +219,11 @@ class Model3DViewer extends Box3DViewer { this.renderMode = defaults.defaultRenderMode || RENDER_MODE_LIT; this.projection = defaults.cameraProjection || CAMERA_PROJECTION_PERSPECTIVE; if (defaults.renderGrid === 'true') { - this.renderGrid = true; + this.showGrid = true; } else if (defaults.renderGrid === 'false') { - this.renderGrid = false; + this.showGrid = false; } else { - this.renderGrid = DEFAULT_RENDER_GRID; + this.showGrid = DEFAULT_RENDER_GRID; } if (this.axes.up !== DEFAULT_AXIS_UP || this.axes.forward !== DEFAULT_AXIS_FORWARD) { @@ -334,7 +349,12 @@ class Model3DViewer extends Box3DViewer { handleReset() { super.handleReset(); - this.isAnimationPlaying = false; + this.setAnimationState(false); + this.handleSetCameraProjection(this.projection); + this.handleSetRenderMode(this.renderMode); + this.handleShowGrid(true); + this.handleShowSkeletons(false); + this.handleShowWireframes(false); if (this.controls) { if (this.getViewerOption('useReactControls')) { @@ -344,7 +364,7 @@ class Model3DViewer extends Box3DViewer { this.controls.setCurrentProjectionMode(this.projection); this.controls.handleSetSkeletonsVisible(false); this.controls.handleSetWireframesVisible(false); - this.controls.handleSetGridVisible(this.renderGrid); + this.controls.handleSetGridVisible(this.showGrid); } } @@ -363,6 +383,11 @@ class Model3DViewer extends Box3DViewer { */ handleSetRenderMode(mode = 'Lit') { this.renderer.setRenderMode(mode); + + if (this.controls && this.getViewerOption('useReactControls')) { + this.renderMode = mode; + this.renderUI(); + } } /** @@ -387,6 +412,11 @@ class Model3DViewer extends Box3DViewer { */ handleSetCameraProjection(projection) { this.renderer.setCameraProjection(projection); + + if (this.controls && this.getViewerOption('useReactControls')) { + this.projection = projection; + this.renderUI(); + } } /** @@ -398,6 +428,11 @@ class Model3DViewer extends Box3DViewer { */ handleShowSkeletons(visible) { this.renderer.setSkeletonsVisible(visible); + + if (this.controls && this.getViewerOption('useReactControls')) { + this.showSkeletons = visible; + this.renderUI(); + } } /** @@ -409,6 +444,11 @@ class Model3DViewer extends Box3DViewer { */ handleShowWireframes(visible) { this.renderer.setWireframesVisible(visible); + + if (this.controls && this.getViewerOption('useReactControls')) { + this.showWireframes = visible; + this.renderUI(); + } } /** @@ -420,6 +460,11 @@ class Model3DViewer extends Box3DViewer { */ handleShowGrid(visible) { this.renderer.setGridVisible(visible); + + if (this.controls && this.getViewerOption('useReactControls')) { + this.showGrid = visible; + this.renderUI(); + } } renderUI() { @@ -430,12 +475,25 @@ class Model3DViewer extends Box3DViewer { this.controls.render( this.handleToggleHelpers(false)} + onSettingsOpen={() => this.handleToggleHelpers(true)} + onShowGridToggle={this.handleShowGrid} + onShowSkeletonsToggle={this.handleShowSkeletons} + onShowWireframesToggle={this.handleShowWireframes} + renderMode={this.renderMode} + showGrid={this.showGrid} + showSkeletons={this.showSkeletons} + showWireframes={this.showWireframes} />, ); } diff --git a/src/lib/viewers/box3d/model3d/__tests__/Model3DControlsNew-test.tsx b/src/lib/viewers/box3d/model3d/__tests__/Model3DControlsNew-test.tsx index bcfdbe1c0..36ccb1d47 100644 --- a/src/lib/viewers/box3d/model3d/__tests__/Model3DControlsNew-test.tsx +++ b/src/lib/viewers/box3d/model3d/__tests__/Model3DControlsNew-test.tsx @@ -1,31 +1,71 @@ import React from 'react'; import { shallow, ShallowWrapper } from 'enzyme'; -import Model3DControls, { Props } from '../Model3DControlsNew'; -import ResetControl from '../../../controls/model3d/ResetControl'; import AnimationControls from '../../../controls/model3d/AnimationControls'; import FullscreenToggle from '../../../controls/fullscreen'; +import Model3DControls, { Props } from '../Model3DControlsNew'; +import ResetControl from '../../../controls/model3d/ResetControl'; +import Model3DSettings, { CameraProjection, RenderMode } from '../../../controls/model3d/Model3DSettings'; describe('lib/viewers/box3d/model3d/Model3DControlsNew', () => { const getDefaults = (): Props => ({ animationClips: [], + cameraProjection: CameraProjection.PERSPECTIVE, currentAnimationClipId: '123', isPlaying: false, onAnimationClipSelect: jest.fn(), + onCameraProjectionChange: jest.fn(), onFullscreenToggle: jest.fn(), onPlayPause: jest.fn(), + onRenderModeChange: jest.fn(), + onRotateOnAxisChange: jest.fn(), onReset: jest.fn(), + onSettingsClose: jest.fn(), + onSettingsOpen: jest.fn(), + onShowGridToggle: jest.fn(), + onShowSkeletonsToggle: jest.fn(), + onShowWireframesToggle: jest.fn(), + renderMode: RenderMode.LIT, + showGrid: true, + showSkeletons: false, + showWireframes: false, }); const getWrapper = (props: Partial): ShallowWrapper => shallow(); + describe('render()', () => { test('should return a valid wrapper', () => { const onAnimationClipSelect = jest.fn(); + const onCameraProjectionChange = jest.fn(); const onFullscreenToggle = jest.fn(); const onPlayPause = jest.fn(); + const onRenderModeChange = jest.fn(); + const onRotateOnAxisChange = jest.fn(); + const onReset = jest.fn(); + const onSettingsClose = jest.fn(); + const onSettingsOpen = jest.fn(); + const onShowGridToggle = jest.fn(); + const onShowSkeletonsToggle = jest.fn(); + const onShowWireframesToggle = jest.fn(); - const wrapper = getWrapper({ onAnimationClipSelect, onFullscreenToggle, onPlayPause }); + const wrapper = getWrapper({ + onAnimationClipSelect, + onCameraProjectionChange, + onFullscreenToggle, + onPlayPause, + onRenderModeChange, + onRotateOnAxisChange, + onReset, + onSettingsClose, + onSettingsOpen, + onShowGridToggle, + onShowSkeletonsToggle, + onShowWireframesToggle, + }); + expect(wrapper.find(ResetControl).props()).toMatchObject({ + onReset, + }); expect(wrapper.find(AnimationControls).props()).toMatchObject({ animationClips: [], currentAnimationClipId: '123', @@ -33,6 +73,21 @@ describe('lib/viewers/box3d/model3d/Model3DControlsNew', () => { onAnimationClipSelect, onPlayPause, }); + expect(wrapper.find(Model3DSettings).props()).toMatchObject({ + cameraProjection: CameraProjection.PERSPECTIVE, + onCameraProjectionChange, + onClose: onSettingsClose, + onOpen: onSettingsOpen, + onRenderModeChange, + onRotateOnAxisChange, + onShowGridToggle, + onShowSkeletonsToggle, + onShowWireframesToggle, + renderMode: RenderMode.LIT, + showGrid: true, + showSkeletons: false, + showWireframes: false, + }); expect(wrapper.find(FullscreenToggle).prop('onFullscreenToggle')).toEqual(onFullscreenToggle); }); }); diff --git a/src/lib/viewers/box3d/model3d/__tests__/Model3DViewer-test.js b/src/lib/viewers/box3d/model3d/__tests__/Model3DViewer-test.js index 8feb54ff1..1c826d0cb 100644 --- a/src/lib/viewers/box3d/model3d/__tests__/Model3DViewer-test.js +++ b/src/lib/viewers/box3d/model3d/__tests__/Model3DViewer-test.js @@ -675,6 +675,48 @@ describe('lib/viewers/box3d/model3d/Model3DViewer', () => { .withArgs(true); model3d.handleShowGrid(true); }); + + describe('with react controls', () => { + beforeEach(() => { + jest.spyOn(model3d, 'getViewerOption').mockImplementation(() => true); + jest.spyOn(model3d, 'renderUI').mockImplementation(() => {}); + }); + + test('should update renderMode and invoke renderUI when calling handleSetRenderMode()', () => { + model3d.handleSetRenderMode('Unlit'); + + expect(model3d.renderMode).toBe('Unlit'); + expect(model3d.renderUI).toBeCalled(); + }); + + test('should update cameraProjection and invoke renderUI when calling handleSetCameraProjection()', () => { + model3d.handleSetCameraProjection('Orthographic'); + + expect(model3d.projection).toBe('Orthographic'); + expect(model3d.renderUI).toBeCalled(); + }); + + test('should update showSkeletons and invoke renderUI when calling handleShowSkeletons()', () => { + model3d.handleShowSkeletons(true); + + expect(model3d.showSkeletons).toBe(true); + expect(model3d.renderUI).toBeCalled(); + }); + + test('should update showWireframes and invoke renderUI when calling handleShowWireframes()', () => { + model3d.handleShowWireframes(true); + + expect(model3d.showWireframes).toBe(true); + expect(model3d.renderUI).toBeCalled(); + }); + + test('should update showGrid and invoke renderUI when calling handleShowGrid()', () => { + model3d.handleShowGrid(false); + + expect(model3d.showGrid).toBe(false); + expect(model3d.renderUI).toBeCalled(); + }); + }); }); describe('scene load errors', () => { @@ -782,6 +824,11 @@ describe('lib/viewers/box3d/model3d/Model3DViewer', () => { model3d.handleReset(); expect(model3d.isAnimationPlaying).toBe(false); + expect(model3d.projection).toBe('Perspective'); + expect(model3d.renderMode).toBe('Lit'); + expect(model3d.showGrid).toBe(true); + expect(model3d.showSkeletons).toBe(false); + expect(model3d.showWireframes).toBe(false); expect(model3d.renderUI).toBeCalled(); }); }); @@ -813,7 +860,7 @@ describe('lib/viewers/box3d/model3d/Model3DViewer', () => { expect(model3d.axes.forward).toBe('+Z'); expect(model3d.renderMode).toBe('Lit'); expect(model3d.projection).toBe('Perspective'); - expect(model3d.renderGrid).toBe(true); + expect(model3d.showGrid).toBe(true); expect(model3d.handleRotationAxisSet).not.toBeCalled(); }); @@ -831,7 +878,7 @@ describe('lib/viewers/box3d/model3d/Model3DViewer', () => { expect(model3d.axes.forward).toBe(defaults.forwardAxis); expect(model3d.renderMode).toBe(defaults.defaultRenderMode); expect(model3d.projection).toBe(defaults.cameraProjection); - expect(model3d.renderGrid).toBe(false); + expect(model3d.showGrid).toBe(false); expect(model3d.handleRotationAxisSet).toBeCalledWith(defaults.upAxis, defaults.forwardAxis, false); }); @@ -921,12 +968,25 @@ describe('lib/viewers/box3d/model3d/Model3DViewer', () => { expect(getProps(model3d)).toMatchObject({ animationClips: [], + cameraProjection: 'Perspective', currentAnimationClipId: '123', isPlaying: false, onAnimationClipSelect: model3d.handleSelectAnimationClip, + onCameraProjectionChange: model3d.handleSetCameraProjection, onFullscreenToggle: model3d.toggleFullscreen, onPlayPause: model3d.handleToggleAnimation, + onRenderModeChange: model3d.handleSetRenderMode, onReset: model3d.handleReset, + onRotateOnAxisChange: model3d.handleRotateOnAxis, + onSettingsClose: expect.any(Function), + onSettingsOpen: expect.any(Function), + onShowGridToggle: model3d.handleShowGrid, + onShowSkeletonsToggle: model3d.handleShowSkeletons, + onShowWireframesToggle: model3d.handleShowWireframes, + renderMode: 'Lit', + showGrid: true, + showSkeletons: false, + showWireframes: false, }); }); }); diff --git a/src/lib/viewers/controls/model3d/Model3DSettings.scss b/src/lib/viewers/controls/model3d/Model3DSettings.scss new file mode 100644 index 000000000..fdca82aab --- /dev/null +++ b/src/lib/viewers/controls/model3d/Model3DSettings.scss @@ -0,0 +1,26 @@ +.bp-Model3DSettings { + position: relative; + + .bp-Settings-flyout { + right: auto; + left: 0; + flex-direction: column; + max-height: none; + + &.bp-is-open { + display: flex; + } + } + + .bp-RotateAxisControls { + margin-bottom: 10px; + } +} + +.bp-Model3DSettings-menu { + .bp-SettingsCheckboxItem, + .bp-SettingsDropdown, + .bp-RotateAxisControls { + margin-top: 10px; + } +} diff --git a/src/lib/viewers/controls/model3d/Model3DSettings.tsx b/src/lib/viewers/controls/model3d/Model3DSettings.tsx new file mode 100644 index 000000000..cb424326f --- /dev/null +++ b/src/lib/viewers/controls/model3d/Model3DSettings.tsx @@ -0,0 +1,96 @@ +import React from 'react'; +import RotateAxisControls from './RotateAxisControls'; +import Settings, { Menu, Props as SettingsProps } from '../settings'; +import { AxisChange } from './RotateAxisControl'; +import './Model3DSettings.scss'; + +export enum CameraProjection { + PERSPECTIVE = 'Perspective', + ORTHOGRAPHIC = 'Orthographic', +} + +export enum RenderMode { + LIT = 'Lit', + UNLIT = 'Unlit', + NORMALS = 'Normals', + SHAPE = 'Shape', + UV_OVERLAY = 'UV Overlay', +} + +export type Props = Pick & { + cameraProjection: CameraProjection; + onCameraProjectionChange: (projection: CameraProjection) => void; + onRenderModeChange: (mode: RenderMode) => void; + onRotateOnAxisChange: (change: AxisChange) => void; + onShowGridToggle: () => void; + onShowSkeletonsToggle: () => void; + onShowWireframesToggle: () => void; + renderMode: RenderMode; + showGrid: boolean; + showSkeletons: boolean; + showWireframes: boolean; +}; + +const cameraProjectionOptions = [ + { label: __('box3d_camera_projection_perspective'), value: CameraProjection.PERSPECTIVE }, + { label: __('box3d_camera_projection_orthographic'), value: CameraProjection.ORTHOGRAPHIC }, +]; + +const renderModeOptions = [ + { label: __('box3d_render_mode_lit'), value: RenderMode.LIT }, + { label: __('box3d_render_mode_unlit'), value: RenderMode.UNLIT }, + { label: __('box3d_render_mode_normals'), value: RenderMode.NORMALS }, + { label: __('box3d_render_mode_shape'), value: RenderMode.SHAPE }, + { label: __('box3d_render_mode_uv_overlay'), value: RenderMode.UV_OVERLAY }, +]; + +export default function Model3DSettings({ + cameraProjection, + onCameraProjectionChange, + onClose, + onOpen, + onRenderModeChange, + onRotateOnAxisChange, + onShowGridToggle, + onShowSkeletonsToggle, + onShowWireframesToggle, + renderMode, + showGrid, + showSkeletons, + showWireframes, +}: Props): JSX.Element { + return ( + + + + label={__('box3d_settings_render_label')} + listItems={renderModeOptions} + onSelect={onRenderModeChange} + value={renderMode} + /> + + + + + label={__('box3d_settings_projection_label')} + listItems={cameraProjectionOptions} + onSelect={onCameraProjectionChange} + value={cameraProjection} + /> + + + + ); +} diff --git a/src/lib/viewers/controls/model3d/RotateAxisControl.scss b/src/lib/viewers/controls/model3d/RotateAxisControl.scss new file mode 100644 index 000000000..ae9f1674b --- /dev/null +++ b/src/lib/viewers/controls/model3d/RotateAxisControl.scss @@ -0,0 +1,53 @@ +@import '../styles'; + +@mixin bp-RotateAxisControl-button($direction) { + position: relative; + width: 24px; + height: 25px; + background-color: transparent; + border: none; + outline: none; + cursor: pointer; + + &::after { + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + border-top: 4px solid transparent; + border-bottom: 4px solid transparent; + border-#{$direction}: 5px solid $fours; + transform: translateX(-50%) translateY(-50%); + content: ''; + } + + &:focus, + &:hover { + &::after { + border-#{$direction}: 5px solid $eights; + } + } +} + +.bp-RotateAxisControl { + display: flex; + color: $bdl-gray-62; + border: 1px solid $sf-fog; + border-bottom-width: 2px; + border-radius: 2px; +} + +.bp-RotateAxisControl-label { + display: flex; + align-items: center; + text-transform: uppercase; +} + +.bp-RotateAxisControl-left { + @include bp-RotateAxisControl-button('right'); +} + +.bp-RotateAxisControl-right { + @include bp-RotateAxisControl-button('left'); +} diff --git a/src/lib/viewers/controls/model3d/RotateAxisControl.tsx b/src/lib/viewers/controls/model3d/RotateAxisControl.tsx new file mode 100644 index 000000000..b43ddaec7 --- /dev/null +++ b/src/lib/viewers/controls/model3d/RotateAxisControl.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import classNames from 'classnames'; +import './RotateAxisControl.scss'; + +export type Axis = 'x' | 'y' | 'z'; + +export type AxisChange = { + [key in Axis]?: number; +}; + +export type Props = { + axis: Axis; + className?: string; + onRotateOnAxisChange: (change: AxisChange) => void; +}; + +const ROTATION_STEP = 90; + +export default function RotateAxisControl({ axis, className, onRotateOnAxisChange }: Props): JSX.Element { + const handleClickLeft = (): void => onRotateOnAxisChange({ [axis]: -ROTATION_STEP }); + const handleClickRight = (): void => onRotateOnAxisChange({ [axis]: ROTATION_STEP }); + + return ( +
+
+ ); +} diff --git a/src/lib/viewers/controls/model3d/RotateAxisControls.scss b/src/lib/viewers/controls/model3d/RotateAxisControls.scss new file mode 100644 index 000000000..b8d6fc25e --- /dev/null +++ b/src/lib/viewers/controls/model3d/RotateAxisControls.scss @@ -0,0 +1,36 @@ +@import '../styles'; + +$bp-RotateAxisControls-spacing: 4px; + +.bp-RotateAxisControls { + display: flex; + flex-direction: column; + color: $bdl-gray-62; +} + +.bp-RotateAxisControl + .bp-RotateAxisControl { + margin-left: $bp-RotateAxisControls-spacing; +} + +.bp-RotateAxisControls-label { + display: flex; + align-items: center; + margin: $bp-RotateAxisControls-spacing 0; +} + +.bp-RotateAxisControls-controls { + display: flex; + margin: $bp-RotateAxisControls-spacing 0; +} + +.bp-RotateAxisControls-rotateX { + border-bottom-color: #e33d55; +} + +.bp-RotateAxisControls-rotateY { + border-bottom-color: #26c281; +} + +.bp-RotateAxisControls-rotateZ { + border-bottom-color: #22a7f0; +} diff --git a/src/lib/viewers/controls/model3d/RotateAxisControls.tsx b/src/lib/viewers/controls/model3d/RotateAxisControls.tsx new file mode 100644 index 000000000..c096cbcf8 --- /dev/null +++ b/src/lib/viewers/controls/model3d/RotateAxisControls.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import RotateAxisControl, { AxisChange } from './RotateAxisControl'; +import './RotateAxisControls.scss'; + +export type Props = { + onRotateOnAxisChange: (change: AxisChange) => void; +}; + +export default function RotateAxisControls({ onRotateOnAxisChange }: Props): JSX.Element { + return ( +
+
+ {__('box3d_settings_rotate_label')} +
+
+ + + +
+
+ ); +} diff --git a/src/lib/viewers/controls/model3d/__tests__/Model3DSettings-test.tsx b/src/lib/viewers/controls/model3d/__tests__/Model3DSettings-test.tsx new file mode 100644 index 000000000..817d760db --- /dev/null +++ b/src/lib/viewers/controls/model3d/__tests__/Model3DSettings-test.tsx @@ -0,0 +1,91 @@ +import React from 'react'; +import { shallow, ShallowWrapper } from 'enzyme'; +import Model3DSettings, { CameraProjection, Props, RenderMode } from '../Model3DSettings'; +import Settings, { Menu } from '../../settings'; +import RotateAxisControls from '../RotateAxisControls'; + +describe('Model3DSettings', () => { + const getDefaults = (): Props => ({ + cameraProjection: CameraProjection.PERSPECTIVE, + onCameraProjectionChange: jest.fn(), + onClose: jest.fn(), + onOpen: jest.fn(), + onRenderModeChange: jest.fn(), + onRotateOnAxisChange: jest.fn(), + onShowGridToggle: jest.fn(), + onShowSkeletonsToggle: jest.fn(), + onShowWireframesToggle: jest.fn(), + renderMode: RenderMode.LIT, + showGrid: true, + showSkeletons: false, + showWireframes: false, + }); + const getWrapper = (props = {}): ShallowWrapper => shallow(); + + describe('render()', () => { + test('should return a valid wrapper', () => { + const onCameraProjectionChange = jest.fn(); + const onClose = jest.fn(); + const onOpen = jest.fn(); + const onRenderModeChange = jest.fn(); + const onRotateOnAxisChange = jest.fn(); + const onShowGridToggle = jest.fn(); + const onShowSkeletonsToggle = jest.fn(); + const onShowWireframesToggle = jest.fn(); + + const wrapper = getWrapper({ + onCameraProjectionChange, + onClose, + onOpen, + onRenderModeChange, + onRotateOnAxisChange, + onShowGridToggle, + onShowSkeletonsToggle, + onShowWireframesToggle, + }); + const checkboxItems = wrapper.find(Settings.CheckboxItem); + const dropdowns = wrapper.find(Settings.Dropdown); + + expect(wrapper.find(Settings).props()).toMatchObject({ + className: 'bp-Model3DSettings', + onClose, + onOpen, + }); + expect(wrapper.find(Settings.Menu).props()).toMatchObject({ + className: 'bp-Model3DSettings-menu', + name: Menu.MAIN, + }); + + // CheckboxItems + expect(checkboxItems.at(0).props()).toMatchObject({ + isChecked: true, + label: __('box3d_settings_grid_label'), + onChange: onShowGridToggle, + }); + expect(checkboxItems.at(1).props()).toMatchObject({ + isChecked: false, + label: __('box3d_settings_wireframes_label'), + onChange: onShowWireframesToggle, + }); + expect(checkboxItems.at(2).props()).toMatchObject({ + isChecked: false, + label: __('box3d_settings_skeletons_label'), + onChange: onShowSkeletonsToggle, + }); + + // Dropdowns + expect(dropdowns.at(0).props()).toMatchObject({ + label: __('box3d_settings_render_label'), + onSelect: onRenderModeChange, + value: RenderMode.LIT, + }); + expect(dropdowns.at(1).props()).toMatchObject({ + label: __('box3d_settings_projection_label'), + onSelect: onCameraProjectionChange, + value: CameraProjection.PERSPECTIVE, + }); + + expect(wrapper.find(RotateAxisControls).props()).toMatchObject({ onRotateOnAxisChange }); + }); + }); +}); diff --git a/src/lib/viewers/controls/model3d/__tests__/RotateAxisControl-test.tsx b/src/lib/viewers/controls/model3d/__tests__/RotateAxisControl-test.tsx new file mode 100644 index 000000000..fb2d460dc --- /dev/null +++ b/src/lib/viewers/controls/model3d/__tests__/RotateAxisControl-test.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import { shallow, ShallowWrapper } from 'enzyme'; +import RotateAxisControl, { Props } from '../RotateAxisControl'; + +describe('RotateAxisControl', () => { + const getDefaults = (): Props => ({ + axis: 'x', + onRotateOnAxisChange: jest.fn(), + }); + const getWrapper = (props = {}): ShallowWrapper => shallow(); + + describe('onRotateOnAxisChange()', () => { + test('should indicate a negative rotation when the left button is clicked', () => { + const onRotateOnAxisChange = jest.fn(); + const wrapper = getWrapper({ onRotateOnAxisChange }); + + wrapper.find('[data-testid="bp-RotateAxisControl-left"]').simulate('click'); + + expect(onRotateOnAxisChange).toBeCalledWith({ x: -90 }); + }); + + test('should indicate a positive rotation when the right button is clicked', () => { + const onRotateOnAxisChange = jest.fn(); + const wrapper = getWrapper({ onRotateOnAxisChange }); + + wrapper.find('[data-testid="bp-RotateAxisControl-right"]').simulate('click'); + + expect(onRotateOnAxisChange).toBeCalledWith({ x: 90 }); + }); + }); + + describe('render()', () => { + test('should return a valid wrapper', () => { + const wrapper = getWrapper(); + + expect(wrapper.hasClass('bp-RotateAxisControl')).toBe(true); + expect(wrapper.find('[data-testid="bp-RotateAxisControl-left"]').props()).toMatchObject({ + className: 'bp-RotateAxisControl-left', + onClick: expect.any(Function), + type: 'button', + }); + expect(wrapper.find('[data-testid="bp-RotateAxisControl-label"]').text()).toBe('x'); + expect(wrapper.find('[data-testid="bp-RotateAxisControl-right"]').props()).toMatchObject({ + className: 'bp-RotateAxisControl-right', + onClick: expect.any(Function), + type: 'button', + }); + }); + }); +}); diff --git a/src/lib/viewers/controls/model3d/__tests__/RotateAxisControls-test.tsx b/src/lib/viewers/controls/model3d/__tests__/RotateAxisControls-test.tsx new file mode 100644 index 000000000..64caefee7 --- /dev/null +++ b/src/lib/viewers/controls/model3d/__tests__/RotateAxisControls-test.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { shallow, ShallowWrapper } from 'enzyme'; +import RotateAxisControls, { Props } from '../RotateAxisControls'; +import RotateAxisControl from '../RotateAxisControl'; + +describe('RotateAxisControls', () => { + const getDefaults = (): Props => ({ + onRotateOnAxisChange: jest.fn(), + }); + const getWrapper = (props = {}): ShallowWrapper => shallow(); + + describe('render()', () => { + test('should return a valid wrapper', () => { + const onRotateOnAxisChange = jest.fn(); + const wrapper = getWrapper({ onRotateOnAxisChange }); + const controls = wrapper.find(RotateAxisControl); + + expect(wrapper.hasClass('bp-RotateAxisControls')).toBe(true); + expect(wrapper.find('[data-testid="bp-RotateAxisControls-label"]').text()).toBe( + __('box3d_settings_rotate_label'), + ); + ['x', 'y', 'z'].forEach((axis, index) => { + expect(controls.at(index).props()).toMatchObject({ + axis, + onRotateOnAxisChange, + }); + }); + }); + }); +}); diff --git a/src/lib/viewers/controls/settings/Settings.tsx b/src/lib/viewers/controls/settings/Settings.tsx index 2557c0759..6a5267c96 100644 --- a/src/lib/viewers/controls/settings/Settings.tsx +++ b/src/lib/viewers/controls/settings/Settings.tsx @@ -1,5 +1,6 @@ import React from 'react'; import classNames from 'classnames'; +import noop from 'lodash/noop'; import SettingsCheckboxItem from './SettingsCheckboxItem'; import SettingsContext, { Menu, Rect } from './SettingsContext'; import SettingsDropdown from './SettingsDropdown'; @@ -14,12 +15,16 @@ import { decodeKeydown } from '../../../util'; export type Props = React.PropsWithChildren<{ className?: string; + onClose?: () => void; + onOpen?: () => void; toggle?: React.ElementType; }>; export default function Settings({ children, className, + onClose = noop, + onOpen = noop, toggle: SettingsToggle = SettingsGearToggle, ...rest }: Props): JSX.Element | null { @@ -34,7 +39,9 @@ export default function Settings({ setActiveRect(undefined); setIsFocused(false); setIsOpen(false); - }, []); + + onClose(); + }, [onClose]); const { height, width } = activeRect || { height: 'auto', width: 'auto' }; const handleClick = (): void => { @@ -42,6 +49,12 @@ export default function Settings({ setActiveRect(undefined); setIsFocused(false); setIsOpen(!isOpen); + + if (!isOpen) { + onOpen(); + } else { + onClose(); + } }; const handleKeyDown = (event: React.KeyboardEvent): void => { diff --git a/src/lib/viewers/controls/settings/SettingsDropdown.scss b/src/lib/viewers/controls/settings/SettingsDropdown.scss index 5b34e6741..4b81c45f3 100644 --- a/src/lib/viewers/controls/settings/SettingsDropdown.scss +++ b/src/lib/viewers/controls/settings/SettingsDropdown.scss @@ -11,7 +11,7 @@ $bp-SettingsDropdown-spacing: 5px; } .bp-SettingsDropdown-flyout { - top: initial; + top: auto; right: 0; bottom: 0; left: 0; diff --git a/src/lib/viewers/controls/settings/SettingsDropdown.tsx b/src/lib/viewers/controls/settings/SettingsDropdown.tsx index 42ce9b087..7593b3726 100644 --- a/src/lib/viewers/controls/settings/SettingsDropdown.tsx +++ b/src/lib/viewers/controls/settings/SettingsDropdown.tsx @@ -7,20 +7,28 @@ import useClickOutside from '../hooks/useClickOutside'; import { decodeKeydown } from '../../../util'; import './SettingsDropdown.scss'; -export type ListItem = { +export type Value = boolean | number | string; + +export type ListItem = { label: string; - value: string; + value: V; }; -export type Props = { +export type Props = { className?: string; label: string; - listItems: Array; - onSelect: (value: string) => void; - value?: string; + listItems: Array>; + onSelect: (value: V) => void; + value?: V; }; -export default function SettingsDropdown({ className, label, listItems, onSelect, value }: Props): JSX.Element { +export default function SettingsDropdown({ + className, + label, + listItems, + onSelect, + value, +}: Props): JSX.Element { const { current: id } = React.useRef(uniqueId('bp-SettingsDropdown_')); const buttonElRef = React.useRef(null); const dropdownElRef = React.useRef(null); @@ -43,18 +51,18 @@ export default function SettingsDropdown({ className, label, listItems, onSelect event.stopPropagation(); } }; - const handleSelect = (selectedOption: string): void => { + const handleSelect = (selectedOption: V): void => { setIsOpen(false); onSelect(selectedOption); }; - const createClickHandler = (selectedOption: string) => (event: React.MouseEvent): void => { + const createClickHandler = (selectedOption: V) => (event: React.MouseEvent): void => { handleSelect(selectedOption); // Prevent the event from bubbling up and triggering any upstream click handling logic, // i.e. if the dropdown is nested inside a menu flyout event.stopPropagation(); }; - const createKeyDownHandler = (selectedOption: string) => (event: React.KeyboardEvent): void => { + const createKeyDownHandler = (selectedOption: V) => (event: React.KeyboardEvent): void => { const key = decodeKeydown(event); if (key !== 'Space' && key !== 'Enter') { @@ -94,12 +102,13 @@ export default function SettingsDropdown({ className, label, listItems, onSelect tabIndex={-1} > {listItems.map(({ label: itemLabel, value: itemValue }) => { + const itemValueString = itemValue.toString(); return (
{ }); }); + describe('open/close callbacks', () => { + test('should call the onOpen callback when the flyout opens', () => { + const onClose = jest.fn(); + const onOpen = jest.fn(); + const wrapper = getWrapper({ onClose, onOpen }); + + expect(wrapper.find(SettingsFlyout).prop('isOpen')).toBe(false); + expect(wrapper.find(SettingsGearToggle).prop('isOpen')).toBe(false); + + wrapper.find(SettingsGearToggle).simulate('click'); + + expect(wrapper.find(SettingsFlyout).prop('isOpen')).toBe(true); + expect(onOpen).toBeCalledTimes(1); + expect(onClose).not.toBeCalled(); + }); + + test('should call the onClose callback when the flyout closes', () => { + const onClose = jest.fn(); + const onOpen = jest.fn(); + const wrapper = getWrapper({ onClose, onOpen }); + + expect(wrapper.find(SettingsFlyout).prop('isOpen')).toBe(false); + expect(wrapper.find(SettingsGearToggle).prop('isOpen')).toBe(false); + + wrapper.find(SettingsGearToggle).simulate('click'); + + expect(wrapper.find(SettingsFlyout).prop('isOpen')).toBe(true); + expect(onOpen).toBeCalledTimes(1); + expect(onClose).not.toBeCalled(); + + wrapper.find(SettingsGearToggle).simulate('click'); + + expect(wrapper.find(SettingsFlyout).prop('isOpen')).toBe(false); + expect(onOpen).toBeCalledTimes(1); + expect(onClose).toBeCalledTimes(1); + }); + + test('should call the onClose callback when the flyout is closed by clicking outside', () => { + const onClose = jest.fn(); + const onOpen = jest.fn(); + const wrapper = getWrapper({ onClose, onOpen }); + const getEvent = (target: HTMLElement): MouseEvent => { + const event = new MouseEvent('click'); + Object.defineProperty(event, 'target', { enumerable: true, value: target }); + return event; + }; + + wrapper.find(SettingsGearToggle).simulate('click'); // Open the controls + expect(wrapper.find(SettingsGearToggle).prop('isOpen')).toBe(true); + + act(() => { + document.dispatchEvent(getEvent(document.body)); // Click outside the controls + }); + wrapper.update(); + + expect(onOpen).toBeCalledTimes(1); + expect(onClose).toBeCalledTimes(1); + }); + }); + describe('render', () => { test('should return a valid wrapper', () => { const wrapper = getWrapper();