context dependent preseffect

2 files changed, 164 insertions, 106 deletions

diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 62458acfe..5ce010cf7 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -2216,49 +2216,60 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 </div>
                             </div> */}
                             {/* Effect direction */}
-                            <div className="ribbon-doubleButton" style={{ display: effect === PresEffectDirection.None ? 'none' : 'inline-flex' }}>
-                                <div className="presBox-subheading">Effect direction</div>
-                                <div className="ribbon-property" style={{ border: `solid 1px ${SettingsManager.userColor}` }}>
-                                    {StrCast(this.activeItem.presentation_effectDirection)}
-                                </div>
-                            </div>
-                            <div className="presBox-icon-list">
-                                <IconButton
-                                    type={Type.TERT}
-                                    color={activeItem.presentation_effectDirection === PresEffectDirection.Center ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
-                                    tooltip="Center"
-                                    icon={<FaCompressArrowsAlt size={'16px'} />}
-                                    onClick={() => this.updateEffectDirection(PresEffectDirection.Center)}
-                                />
-                                <IconButton
-                                    type={Type.TERT}
-                                    color={activeItem.presentation_effectDirection === PresEffectDirection.Left ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
-                                    tooltip="Left"
-                                    icon={<FaArrowRight size={'16px'} />}
-                                    onClick={() => this.updateEffectDirection(PresEffectDirection.Left)}
-                                />
-                                <IconButton
-                                    type={Type.TERT}
-                                    color={activeItem.presentation_effectDirection === PresEffectDirection.Right ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
-                                    tooltip="Right"
-                                    icon={<FaArrowLeft size={'16px'} />}
-                                    onClick={() => this.updateEffectDirection(PresEffectDirection.Right)}
-                                />
-                                <IconButton
-                                    type={Type.TERT}
-                                    color={activeItem.presentation_effectDirection === PresEffectDirection.Top ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
-                                    tooltip="Top"
-                                    icon={<FaArrowDown size={'16px'} />}
-                                    onClick={() => this.updateEffectDirection(PresEffectDirection.Top)}
-                                />
-                                <IconButton
-                                    type={Type.TERT}
-                                    color={activeItem.presentation_effectDirection === PresEffectDirection.Bottom ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
-                                    tooltip="Bottom"
-                                    icon={<FaArrowUp size={'16px'} />}
-                                    onClick={() => this.updateEffectDirection(PresEffectDirection.Bottom)}
-                                />
-                            </div>
+                            {/* Only applies to certain effects */}
+                            {effect === PresEffect.Flip ||
+                                effect === PresEffect.Bounce ||
+                                (effect === PresEffect.Roll && (
+                                    <>
+                                        <div className="ribbon-doubleButton" style={{ display: 'inline-flex' }}>
+                                            <div className="presBox-subheading">Effect direction</div>
+                                            <div className="ribbon-property" style={{ border: `solid 1px ${SettingsManager.userColor}` }}>
+                                                {StrCast(this.activeItem.presentation_effectDirection)}
+                                            </div>
+                                        </div>
+                                        <div className="presBox-icon-list">
+                                            <IconButton
+                                                type={Type.TERT}
+                                                color={activeItem.presentation_effectDirection === PresEffectDirection.Center ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
+                                                tooltip="Center"
+                                                icon={<FaCompressArrowsAlt size={'16px'} />}
+                                                onClick={() => this.updateEffectDirection(PresEffectDirection.Center)}
+                                            />
+                                            <IconButton
+                                                type={Type.TERT}
+                                                color={activeItem.presentation_effectDirection === PresEffectDirection.Left ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
+                                                tooltip="Left"
+                                                icon={<FaArrowRight size={'16px'} />}
+                                                onClick={() => this.updateEffectDirection(PresEffectDirection.Left)}
+                                            />
+                                            <IconButton
+                                                type={Type.TERT}
+                                                color={activeItem.presentation_effectDirection === PresEffectDirection.Right ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
+                                                tooltip="Right"
+                                                icon={<FaArrowLeft size={'16px'} />}
+                                                onClick={() => this.updateEffectDirection(PresEffectDirection.Right)}
+                                            />
+                                            {effect !== PresEffect.Roll && (
+                                                <>
+                                                    <IconButton
+                                                        type={Type.TERT}
+                                                        color={activeItem.presentation_effectDirection === PresEffectDirection.Top ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
+                                                        tooltip="Top"
+                                                        icon={<FaArrowDown size={'16px'} />}
+                                                        onClick={() => this.updateEffectDirection(PresEffectDirection.Top)}
+                                                    />
+                                                    <IconButton
+                                                        type={Type.TERT}
+                                                        color={activeItem.presentation_effectDirection === PresEffectDirection.Bottom ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
+                                                        tooltip="Bottom"
+                                                        icon={<FaArrowUp size={'16px'} />}
+                                                        onClick={() => this.updateEffectDirection(PresEffectDirection.Bottom)}
+                                                    />
+                                                </>
+                                            )}
+                                        </div>
+                                    </>
+                                ))}
                             {/* Spring settings */}
                             {/* No spring settings for jackinthebox (lightspeed) */}
                             <div
@@ -2270,7 +2281,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 {`${this.showSpringEditor ? 'Hide' : 'Show'} Spring Settings`}
                                 <FontAwesomeIcon icon={this.showSpringEditor ? 'chevron-up' : 'chevron-down'} />
                             </div>
-                            {effect !== PresEffect.Lightspeed && this.showSpringEditor && (
+                            {effect !== PresEffect.Lightspeed && (
                                 <>
                                     <Dropdown
                                         color={StrCast(Doc.UserDoc().userColor)}
@@ -2287,63 +2298,67 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                         dropdownType={DropdownType.SELECT}
                                         type={Type.TERT}
                                     />
-                                    <div>Tension</div>
-                                    <div
-                                        onPointerDown={e => {
-                                            e.stopPropagation();
-                                        }}>
-                                        <Slider
-                                            min={1}
-                                            max={1000}
-                                            step={5}
-                                            size="small"
-                                            value={timingConfig.stiffness}
-                                            onChange={(e, val) => {
-                                                if (!timingConfig) return;
-                                                this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, stiffness: val as number });
-                                            }}
-                                            valueLabelDisplay="auto"
-                                        />
-                                    </div>
-                                    <div>Damping</div>
-                                    <div
-                                        onPointerDown={e => {
-                                            e.stopPropagation();
-                                        }}>
-                                        <Slider
-                                            min={1}
-                                            max={100}
-                                            step={1}
-                                            size="small"
-                                            value={timingConfig.damping}
-                                            onChange={(e, val) => {
-                                                if (!timingConfig) return;
-                                                this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, damping: val as number });
-                                            }}
-                                            valueLabelDisplay="auto"
-                                        />
-                                    </div>
-                                    <div>Mass</div>
-                                    <div
-                                        onPointerDown={e => {
-                                            e.stopPropagation();
-                                        }}>
-                                        <Slider
-                                            min={1}
-                                            max={10}
-                                            step={1}
-                                            size="small"
-                                            value={timingConfig.mass}
-                                            onChange={(e, val) => {
-                                                if (!timingConfig) return;
-                                                this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, mass: val as number });
-                                            }}
-                                            valueLabelDisplay="auto"
-                                        />
-                                    </div>
-                                    <SpringAnimationPreview tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>
-                                        <div style={{ width: '40px', height: '40px', backgroundColor: '#2e96ff', borderRadius: '4px' }}></div>
-                                    </SpringAnimationPreview>
+                                    {this.showSpringEditor && (
+                                        <>
+                                            <div>Tension</div>
+                                            <div
+                                                onPointerDown={e => {
+                                                    e.stopPropagation();
+                                                }}>
+                                                <Slider
+                                                    min={1}
+                                                    max={1000}
+                                                    step={5}
+                                                    size="small"
+                                                    value={timingConfig.stiffness}
+                                                    onChange={(e, val) => {
+                                                        if (!timingConfig) return;
+                                                        this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, stiffness: val as number });
+                                                    }}
+                                                    valueLabelDisplay="auto"
+                                                />
+                                            </div>
+                                            <div>Damping</div>
+                                            <div
+                                                onPointerDown={e => {
+                                                    e.stopPropagation();
+                                                }}>
+                                                <Slider
+                                                    min={1}
+                                                    max={100}
+                                                    step={1}
+                                                    size="small"
+                                                    value={timingConfig.damping}
+                                                    onChange={(e, val) => {
+                                                        if (!timingConfig) return;
+                                                        this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, damping: val as number });
+                                                    }}
+                                                    valueLabelDisplay="auto"
+                                                />
+                                            </div>
+                                            <div>Mass</div>
+                                            <div
+                                                onPointerDown={e => {
+                                                    e.stopPropagation();
+                                                }}>
+                                                <Slider
+                                                    min={1}
+                                                    max={10}
+                                                    step={1}
+                                                    size="small"
+                                                    value={timingConfig.mass}
+                                                    onChange={(e, val) => {
+                                                        if (!timingConfig) return;
+                                                        this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, mass: val as number });
+                                                    }}
+                                                    valueLabelDisplay="auto"
+                                                />
+                                            </div>
+                                            <SpringAnimationPreview tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>
+                                                <div style={{ width: '40px', height: '40px', backgroundColor: '#2e96ff', borderRadius: '4px' }}></div>
+                                            </SpringAnimationPreview>
+                                        </>
+                                    )}
                                 </>
                             )}
                             {/* Effect spring settings */}
diff --git a/src/client/views/nodes/trails/SlideEffect.tsx b/src/client/views/nodes/trails/SlideEffect.tsx
index 20ff4b0b9..bd667b925 100644
--- a/src/client/views/nodes/trails/SlideEffect.tsx
+++ b/src/client/views/nodes/trails/SlideEffect.tsx
@@ -180,12 +180,55 @@ export default function SpringAnimation({ doc, delay, dir, friction, tension, ma
         },
     };
 
+    // only left and right for now
+    const getRollConfigFrom = () => {
+        switch (dir) {
+            case PresEffectDirection.Left:
+                return {
+                    from: {
+                        opacity: 0,
+                        x: -100,
+                        y: -120,
+                    },
+                };
+            case PresEffectDirection.Right:
+                return {
+                    from: {
+                        opacity: 0,
+                        x: 100,
+                        y: -120,
+                    },
+                };
+            case PresEffectDirection.Top:
+                return {
+                    from: {
+                        opacity: 0,
+                        x: -100,
+                        y: -120,
+                    },
+                };
+            case PresEffectDirection.Bottom:
+                return {
+                    from: {
+                        opacity: 0,
+                        x: -100,
+                        y: -120,
+                    },
+                };
+            default:
+                // no movement for center
+                return {
+                    from: {
+                        opacity: 0,
+                        x: 0,
+                        y: 0,
+                    },
+                };
+        }
+    };
+
     const rollConfig = {
-        from: {
-            opacity: 0,
-            x: -100,
-            y: -120,
-        },
+        ...getRollConfigFrom(),
         to: {
             opacity: 1,
             x: 0,