feat(model3d): Adding animation clips flyout

box · May 4, 2021 · 240fc99 · 240fc99
1 parent 3164ac3
commit 240fc99
Show file tree

Hide file tree

Showing 7 changed files with 129 additions and 23 deletions.
diff --git a/src/lib/viewers/box3d/model3d/Model3DRenderer.js b/src/lib/viewers/box3d/model3d/Model3DRenderer.js
@@ -652,6 +652,20 @@ class Model3DRenderer extends Box3DRenderer {
     initVrGamepadControls() {
         this.vrControls = new Model3DVrControls(this.vrGamepads, this.box3d);
     }
+
+    /**
+     * Gets any selected animation clip
+     *
+     * @return {string} selected animation clip id
+     */
+    getAnimationClip() {
+        if (!this.instance) {
+            return '';
+        }
+
+        const component = this.instance.getComponentByScriptId('animation');
+        return component.clipId;
+    }
 }
 
 export default Model3DRenderer;
diff --git a/src/lib/viewers/box3d/model3d/Model3DViewer.js b/src/lib/viewers/box3d/model3d/Model3DViewer.js
@@ -146,6 +146,11 @@ class Model3DViewer extends Box3DViewer {
      */
     handleSelectAnimationClip(clipId) {
         this.renderer.setAnimationClip(clipId);
+
+        if (this.controls && this.getViewerOption('useReactControls')) {
+            this.setAnimationState(false);
+            this.renderUI();
+        }
     }
 
     /**
@@ -294,18 +299,18 @@ class Model3DViewer extends Box3DViewer {
      * @return {void}
      */
     handleToggleAnimation(play) {
-        if (this.getViewerOption('useReactControls')) {
-            this.isAnimationPlaying = !this.isAnimationPlaying;
-            this.renderer.toggleAnimation(this.isAnimationPlaying);
+        this.setAnimationState(play);
 
-            if (this.controls) {
-                this.renderUI();
-            }
-        } else {
-            this.renderer.toggleAnimation(play);
+        if (this.controls && this.getViewerOption('useReactControls')) {
+            this.renderUI();
         }
     }
 
+    setAnimationState(play) {
+        this.isAnimationPlaying = play;
+        this.renderer.toggleAnimation(this.isAnimationPlaying);
+    }
+
     /**
      * Handle canvas focus events.
      * @method handleCanvasClick
@@ -422,13 +427,14 @@ class Model3DViewer extends Box3DViewer {
     }
 
     renderUI() {
-        if (!this.controls) {
+        if (!this.controls || !this.renderer) {
             return;
         }
 
         this.controls.render(
             <Model3DControlsNew
                 animationClips={this.animationClips}
+                currentAnimationClipId={this.renderer.getAnimationClip()}
                 isPlaying={this.isAnimationPlaying}
                 onAnimationClipSelect={this.handleSelectAnimationClip}
                 onFullscreenToggle={this.toggleFullscreen}

diff --git a/src/lib/viewers/controls/model3d/AnimationClipsControl.scss b/src/lib/viewers/controls/model3d/AnimationClipsControl.scss
@@ -0,0 +1,23 @@
+.bp-AnimationClipsControl {
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    .bp-SettingsFlyout {
+        right: auto;
+        left: 0;
+        max-height: 200px;
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+}
+
+.bp-AnimationClipsControl-radioItem {
+    .bp-SettingsRadioItem-value {
+        max-width: 183px;
+        overflow-x: hidden;
+        font-size: 13px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+}
diff --git a/src/lib/viewers/controls/model3d/AnimationClipsControl.tsx b/src/lib/viewers/controls/model3d/AnimationClipsControl.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import AnimationClipsToggle from './AnimationClipsToggle';
+import Settings, { Menu } from '../settings';
+import './AnimationClipsControl.scss';
 
 type AnimationClip = {
     duration: number;
@@ -13,12 +15,47 @@ export type Props = {
     onAnimationClipSelect: () => void;
 };
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export default function AnimationClipsControl(props: Props): JSX.Element {
+export const padLeft = (x: number, width: number): string => {
+    return x.length >= width ? x : new Array(width - x.length + 1).join('0') + x;
+};
+
+export const formatDurationStr = (duration: number): string => {
+    let secondsLeft = Math.floor(duration);
+    const hours = Math.floor(secondsLeft / 3600);
+    const hoursStr = padLeft(hours.toString(), 2);
+
+    secondsLeft -= hours * 3600;
+    const minutes = Math.floor(secondsLeft / 60);
+    const minutesStr = padLeft(minutes.toString(), 2);
+
+    secondsLeft -= minutes * 60;
+    const secondsStr = padLeft(secondsLeft.toString(), 2);
+
+    return `${hoursStr}:${minutesStr}:${secondsStr}`;
+};
+
+export default function AnimationClipsControl({
+    animationClips,
+    currentAnimationClipId,
+    onAnimationClipSelect,
+}: Props): JSX.Element {
     return (
-        <>
-            <AnimationClipsToggle />
-            {/* TODO: AnimationClipsFlyout */}
-        </>
+        <Settings className="bp-AnimationClipsControl" disableTransitions={false} icon={AnimationClipsToggle}>
+            <Settings.Menu name={Menu.MAIN}>
+                {animationClips.map(({ duration, id, name }) => {
+                    const isSelected = id === currentAnimationClipId;
+                    return (
+                        <Settings.RadioItem
+                            key={id}
+                            className="bp-AnimationClipsControl-radioItem"
+                            isSelected={isSelected}
+                            label={`${formatDurationStr(duration)} ${name}`}
+                            onChange={onAnimationClipSelect}
+                            value={id}
+                        />
+                    );
+                })}
+            </Settings.Menu>
+        </Settings>
     );
 }
diff --git a/src/lib/viewers/controls/model3d/AnimationClipsToggle.tsx b/src/lib/viewers/controls/model3d/AnimationClipsToggle.tsx
@@ -6,10 +6,20 @@ export type Props = {
     onClick?: () => void;
 };
 
-export default function AnimationClipsToggle({ onClick }: Props): JSX.Element {
+function AnimationClipsToggle(props: Props, ref: React.Ref<HTMLButtonElement>): JSX.Element {
+    const { onClick } = props;
+
     return (
-        <button className="bp-AnimationClipsToggle" onClick={onClick} title={__('box3d_animation_clips')} type="button">
+        <button
+            ref={ref}
+            className="bp-AnimationClipsToggle"
+            onClick={onClick}
+            title={__('box3d_animation_clips')}
+            type="button"
+        >
             <IconAnimation24 />
         </button>
     );
 }
+
+export default React.forwardRef(AnimationClipsToggle);
diff --git a/src/lib/viewers/controls/settings/Settings.tsx b/src/lib/viewers/controls/settings/Settings.tsx
@@ -11,9 +11,17 @@ import { decodeKeydown } from '../../../util';
 
 export type Props = React.PropsWithChildren<{
     className?: string;
+    disableTransitions?: boolean;
+    icon?: React.ReactNode;
 }>;
 
-export default function Settings({ children, className, ...rest }: Props): JSX.Element | null {
+export default function Settings({
+    children,
+    className,
+    disableTransitions = false,
+    icon: ToggleIcon = SettingsToggle,
+    ...rest
+}: Props): JSX.Element | null {
     const [activeMenu, setActiveMenu] = React.useState(Menu.MAIN);
     const [activeRect, setActiveRect] = React.useState<Rect>();
     const [isFocused, setIsFocused] = React.useState(false);
@@ -79,8 +87,10 @@ export default function Settings({ children, className, ...rest }: Props): JSX.E
             {...rest}
         >
             <SettingsContext.Provider value={{ activeMenu, activeRect, setActiveMenu, setActiveRect }}>
-                <SettingsToggle ref={buttonElRef} isOpen={isOpen} onClick={handleClick} />
-                <SettingsFlyout isOpen={isOpen}>{children}</SettingsFlyout>
+                <ToggleIcon ref={buttonElRef} isOpen={isOpen} onClick={handleClick} />
+                <SettingsFlyout disableTransitions={disableTransitions} isOpen={isOpen}>
+                    {children}
+                </SettingsFlyout>
             </SettingsContext.Provider>
         </div>
     );

diff --git a/src/lib/viewers/controls/settings/SettingsFlyout.tsx b/src/lib/viewers/controls/settings/SettingsFlyout.tsx
@@ -5,14 +5,20 @@ import './SettingsFlyout.scss';
 
 export type Props = React.PropsWithChildren<{
     className?: string;
+    disableTransitions?: boolean;
     isOpen: boolean;
 }>;
 
-export default function SettingsFlyout({ children, className, isOpen }: Props): JSX.Element {
+export default function SettingsFlyout({
+    children,
+    className,
+    disableTransitions = false,
+    isOpen,
+}: Props): JSX.Element {
     const [isTransitioning, setIsTransitioning] = React.useState(false);
     const flyoutElRef = React.useRef<HTMLDivElement>(null);
-    const { activeRect } = React.useContext(SettingsContext);
-    const { height, width } = activeRect || { height: 'auto', width: 'auto' };
+    const { activeRect = { height: 'auto', width: 'auto' } } = React.useContext(SettingsContext);
+    const { height, width } = disableTransitions ? { height: 'auto', width: 'auto' } : activeRect;
 
     React.useEffect(() => {
         const { current: flyoutEl } = flyoutElRef;