fix: naming, cleaning

5 files changed, 35 insertions, 86 deletions

diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 01c1de137..1e71e2a99 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -50,8 +50,8 @@ import { KeyValueBox } from './KeyValueBox';
 import { LinkAnchorBox } from './LinkAnchorBox';
 import { FormattedTextBox } from './formattedText/FormattedTextBox';
 import { PresEffect, PresEffectDirection } from './trails';
-import SlideEffect, { EffectType } from './trails/SlideEffect';
-import { SpringSettings, SpringType } from './trails/SpringUtils';
+import SlideEffect from './trails/SlideEffect';
+import { SpringSettings, SpringType, springMappings } from './trails/SpringUtils';
 interface Window {
     MediaRecorder: MediaRecorder;
 }
@@ -1016,10 +1016,8 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
 
         if (!timingConfig) {
             timingConfig = {
-                type: SpringType.DEFAULT,
-                stiffness: 600,
-                damping: 15,
-                mass: 1,
+                type: SpringType.GENTLE,
+                ...springMappings['gentle'],
             };
         }
         //prettier-ignore
@@ -1028,14 +1026,14 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
             default:
             // package used: react-awesome-reveal
             case PresEffect.None:       return renderDoc;
-            case PresEffect.Zoom:       return <SlideEffect dir={dir as PresEffectDirection} effectType={EffectType.ZOOM} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
-            case PresEffect.Fade:       return <SlideEffect dir={dir as PresEffectDirection} effectType={EffectType.FADE} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
+            case PresEffect.Zoom:       return <SlideEffect dir={dir as PresEffectDirection} presEffect={PresEffect.Zoom} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
+            case PresEffect.Fade:       return <SlideEffect dir={dir as PresEffectDirection} presEffect={PresEffect.Fade} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
             case PresEffect.Flip:       return <Flip {...effectProps}>{renderDoc}</Flip>;
-            case PresEffect.Rotate:       return <SlideEffect dir={dir as PresEffectDirection} effectType={EffectType.ROTATE} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
-            // Changed to move in since anything can be "bouncy"
-            case PresEffect.Bounce:     return <SlideEffect dir={dir as PresEffectDirection} effectType={EffectType.BOUNCE} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
+            case PresEffect.Rotate:       return <SlideEffect dir={dir as PresEffectDirection} presEffect={PresEffect.Rotate} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
+            // Potential change to move in since anything can be "bouncy"
+            case PresEffect.Bounce:     return <SlideEffect dir={dir as PresEffectDirection} presEffect={PresEffect.Bounce} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
             case PresEffect.Roll:       return <Roll {...effectProps}>{renderDoc}</Roll>;
-            case PresEffect.Lightspeed: return <JackInTheBox {...effectProps}>{renderDoc}</JackInTheBox>;
+            // case PresEffect.Lightspeed: return <JackInTheBox {...effectProps}>{renderDoc}</JackInTheBox>;
         }
         // switch (StrCast(presEffectDoc?.presentation_effect, StrCast(presEffectDoc?.followLinkAnimEffect))) {
         //     default:
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 3f546cdd7..3b712a4af 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -1907,7 +1907,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
         if (!timingConfig) {
             timingConfig = {
-                type: SpringType.DEFAULT,
+                type: SpringType.GENTLE,
                 // stiffness: 300,
                 // damping: 12,
                 // mass: 2,
diff --git a/src/client/views/nodes/trails/SlideEffect.tsx b/src/client/views/nodes/trails/SlideEffect.tsx
index 7e2985a6a..e3423069b 100644
--- a/src/client/views/nodes/trails/SlideEffect.tsx
+++ b/src/client/views/nodes/trails/SlideEffect.tsx
@@ -1,18 +1,10 @@
-import { Button } from '@mui/material';
 import { useSpring, animated, easings, to } from '@react-spring/web';
 import React, { useEffect, useState } from 'react';
-import { PresEffectDirection } from './PresEnums';
-
-export enum EffectType {
-    ZOOM = 'zoom',
-    FADE = 'fade',
-    BOUNCE = 'bounce',
-    ROTATE = 'rotate',
-}
+import { PresEffect, PresEffectDirection } from './PresEnums';
 
 interface Props {
     dir: PresEffectDirection;
-    effectType: EffectType;
+    presEffect: PresEffect;
     friction: number;
     tension: number;
     mass: number;
@@ -20,7 +12,7 @@ interface Props {
 }
 
 // TODO: add visibility detector when the slide comes into view
-export default function SpringAnimation({ dir, friction, tension, mass, effectType, children }: Props) {
+export default function SpringAnimation({ dir, friction, tension, mass, presEffect: presEffect, children }: Props) {
     const [springs, api] = useSpring(
         () => ({
             from: {
@@ -53,14 +45,12 @@ export default function SpringAnimation({ dir, friction, tension, mass, effectTy
             x: 0,
             y: 0,
             opacity: 1,
-            // opacity: 0,
         },
         to: {
             scale: 1,
             x: 0,
             y: 0,
             opacity: 1,
-            // opacity: 1,
             config: {
                 tension: tension,
                 friction: friction,
@@ -164,36 +154,34 @@ export default function SpringAnimation({ dir, friction, tension, mass, effectTy
         ],
     };
 
-    const handleClick = () => {
-        if (effectType === EffectType.BOUNCE) {
+    const flipConfig = {};
+
+    const startAnimation = () => {
+        if (presEffect === PresEffect.Bounce) {
             api.start(bounceConfig);
-        } else if (effectType === EffectType.ZOOM) {
+        } else if (presEffect === PresEffect.Zoom) {
             api.start(zoomConfig);
-        } else if (effectType === EffectType.ROTATE) {
+        } else if (presEffect === PresEffect.Rotate) {
             api.start(rotateConfig);
-        } else if (effectType === EffectType.FADE) {
+        } else if (presEffect === PresEffect.Fade) {
             api.start(fadeConfig);
         }
     };
 
+    const flipRender = () => {};
+
     useEffect(() => {
+        // TODO: Control start with slide visibility instead
         setTimeout(() => {
-            handleClick();
+            startAnimation();
         }, 200);
     }, []);
 
     return (
-        <div
-        // className="demo"
-        // onPointerEnter={() => {
-        //     handleClick();
-        // }}
-        >
-            {effectType !== EffectType.ROTATE ? (
+        <div>
+            {presEffect !== PresEffect.Rotate ? (
                 <animated.div
                     style={{
-                        // display: 'inline-block',
-                        // transform: 'translate(50px, 50px)',
                         ...springs,
                     }}>
                     {children}
diff --git a/src/client/views/nodes/trails/SlideEffectPreview.tsx b/src/client/views/nodes/trails/SlideEffectPreview.tsx
index aacb37b48..d4c16586a 100644
--- a/src/client/views/nodes/trails/SlideEffectPreview.tsx
+++ b/src/client/views/nodes/trails/SlideEffectPreview.tsx
@@ -1,4 +1,3 @@
-import { Button } from '@mui/material';
 import { useSpring, animated, easings } from '@react-spring/web';
 import React, { useEffect, useState } from 'react';
 
@@ -24,10 +23,10 @@ export default function SpringAnimationPreview({ friction, tension, mass, childr
                 mass: mass,
             },
             onStart: () => {
-                console.log('started');
+                // console.log('started');
             },
             onRest: () => {
-                console.log('resting');
+                // console.log('resting');
             },
         }),
         [tension, friction, mass]
@@ -36,38 +35,6 @@ export default function SpringAnimationPreview({ friction, tension, mass, childr
     //   Whether the animation is currently playing
     const [animating, setAnimating] = useState(false);
 
-    const zoomConfig = {
-        from: {
-            x: 0,
-            y: 0,
-            opacity: 0,
-            scale: 0,
-        },
-        to: [
-            {
-                x: 0,
-                y: 0,
-                opacity: 1,
-                scale: 1,
-                config: {
-                    tension: tension,
-                    friction: friction,
-                    mass: mass,
-                },
-            },
-            {
-                opacity: 0,
-                scale: 0,
-                x: 0,
-                y: 0,
-                config: {
-                    duration: 500,
-                    easing: easings.easeInOutCubic,
-                },
-            },
-        ],
-    };
-
     const bounceConfig = {
         from: {
             x: -50,
@@ -116,13 +83,6 @@ export default function SpringAnimationPreview({ friction, tension, mass, childr
             onPointerEnter={() => {
                 animate();
             }}>
-            {/* style={{
-          width: "50px",
-          height: "50px",
-          backgroundColor: "#ff6d6d",
-          borderRadius: "4px",
-          ...springs,
-        }} */}
             <animated.div
                 style={{
                     ...springs,
diff --git a/src/client/views/nodes/trails/SpringUtils.ts b/src/client/views/nodes/trails/SpringUtils.ts
index caadf4220..0518e0623 100644
--- a/src/client/views/nodes/trails/SpringUtils.ts
+++ b/src/client/views/nodes/trails/SpringUtils.ts
@@ -2,11 +2,10 @@ import { PresEffect, PresMovement } from './PresEnums';
 
 // the type of slide effect timing (spring-driven)
 export enum SpringType {
-    DEFAULT = 'default',
     GENTLE = 'gentle',
+    QUICK = 'quick',
     BOUNCY = 'bouncy',
     CUSTOM = 'custom',
-    QUICK = 'quick',
 }
 
 // settings that control slide effect spring settings
@@ -17,6 +16,7 @@ export interface SpringSettings {
     mass: number;
 }
 
+// Options in the movement easing dropdown
 export const easeItems = [
     {
         text: 'Ease',
@@ -44,6 +44,7 @@ export const easeItems = [
     },
 ];
 
+// Options in the movement type dropdown
 export const movementItems = [
     { text: 'None', val: PresMovement.None },
     { text: 'Center', val: PresMovement.Center },
@@ -52,6 +53,7 @@ export const movementItems = [
     { text: 'Jump', val: PresMovement.Jump },
 ];
 
+// Items in the slide effect dropdown
 export const effectItems = Object.values(PresEffect)
     .filter(v => isNaN(Number(v)))
     .map(effect => ({
@@ -59,6 +61,7 @@ export const effectItems = Object.values(PresEffect)
         val: effect,
     }));
 
+// Maps each PresEffect to the default timing configuration
 export const presEffectDefaultTimings: {
     [key: string]: SpringSettings;
 } = {
@@ -107,8 +110,8 @@ export const presEffectDefaultTimings: {
     },
 };
 
+// Dropdown items of timings for the effect
 export const effectTimings = [
-    { text: 'Default', val: SpringType.DEFAULT },
     {
         text: 'Gentle',
         val: SpringType.GENTLE,