From 4ff13042cfcddfefc8c8ab531449a30eebab0822 Mon Sep 17 00:00:00 2001
From: Sophie Zhang <sophie_zhang@brown.edu>
Date: Wed, 10 Apr 2024 16:16:35 -0400
Subject: organizing

---
 .../views/nodes/trails/CubicBezierEditor.tsx       | 13 ++++--
 src/client/views/nodes/trails/SlideEffect.scss     |  3 ++
 src/client/views/nodes/trails/SlideEffect.tsx      | 51 +++++++++++++---------
 3 files changed, 44 insertions(+), 23 deletions(-)

(limited to 'src/client/views/nodes/trails')

diff --git a/src/client/views/nodes/trails/CubicBezierEditor.tsx b/src/client/views/nodes/trails/CubicBezierEditor.tsx
index d6ce9db1f..f1a0a16ec 100644
--- a/src/client/views/nodes/trails/CubicBezierEditor.tsx
+++ b/src/client/views/nodes/trails/CubicBezierEditor.tsx
@@ -198,14 +198,21 @@ const CubicBezierEditor = ({ setFunc, currPoints, easeFunc }: Props) => {
                     }}
                 />
                 {/* Top right */}
-                <line  onPointerDown={e => {
+                <line
+                    onPointerDown={e => {
                         e.stopPropagation();
                         setC2Down(true);
                     }}
                     onPointerUp={e => {
                         setC2Down(false);
-                    }} x1={`${EDITOR_WIDTH + OFFSET}`} y1={`${0 + OFFSET}`} x2={`${cPoints.p2[0] * EDITOR_WIDTH + OFFSET}`} y2={`${EDITOR_WIDTH - cPoints.p2[1] * EDITOR_WIDTH + OFFSET}`}  stroke="#00000000"
-                    strokeWidth="5" />
+                    }}
+                    x1={`${EDITOR_WIDTH + OFFSET}`}
+                    y1={`${0 + OFFSET}`}
+                    x2={`${cPoints.p2[0] * EDITOR_WIDTH + OFFSET}`}
+                    y2={`${EDITOR_WIDTH - cPoints.p2[1] * EDITOR_WIDTH + OFFSET}`}
+                    stroke="#00000000"
+                    strokeWidth="5"
+                />
                 <line x1={`${EDITOR_WIDTH + OFFSET}`} y1={`${0 + OFFSET}`} x2={`${cPoints.p2[0] * EDITOR_WIDTH + OFFSET}`} y2={`${EDITOR_WIDTH - cPoints.p2[1] * EDITOR_WIDTH + OFFSET}`} stroke="#ffffff" strokeWidth="1" />
                 <circle
                     cx={`${cPoints.p2[0] * EDITOR_WIDTH + OFFSET}`}
diff --git a/src/client/views/nodes/trails/SlideEffect.scss b/src/client/views/nodes/trails/SlideEffect.scss
index 7d2929225..5d8e3119b 100644
--- a/src/client/views/nodes/trails/SlideEffect.scss
+++ b/src/client/views/nodes/trails/SlideEffect.scss
@@ -14,5 +14,8 @@
     will-change: transform, opacity;
 }
 
+.flip-front {
+}
+
 .flip-back {
 }
diff --git a/src/client/views/nodes/trails/SlideEffect.tsx b/src/client/views/nodes/trails/SlideEffect.tsx
index ba997c62a..6221592a0 100644
--- a/src/client/views/nodes/trails/SlideEffect.tsx
+++ b/src/client/views/nodes/trails/SlideEffect.tsx
@@ -186,15 +186,30 @@ export default function SpringAnimation({ dir, friction, tension, mass, presEffe
         },
     };
 
+    // Switch animation depending on slide effect
     const startAnimation = () => {
-        if (presEffect === PresEffect.Bounce) {
-            api.start(bounceConfig);
-        } else if (presEffect === PresEffect.Zoom) {
-            api.start(zoomConfig);
-        } else if (presEffect === PresEffect.Rotate) {
-            api.start(rotateConfig);
-        } else if (presEffect === PresEffect.Fade) {
-            api.start(fadeConfig);
+        switch (presEffect) {
+            case PresEffect.Bounce:
+                api.start(bounceConfig);
+                break;
+            case PresEffect.Zoom:
+                api.start(zoomConfig);
+                break;
+            case PresEffect.Rotate:
+                api.start(rotateConfig);
+                break;
+            case PresEffect.Fade:
+                api.start(fadeConfig);
+                break;
+            case PresEffect.Flip:
+                api.start(flipConfig);
+                break;
+            case PresEffect.Roll:
+                break;
+            case PresEffect.Lightspeed:
+                break;
+            default:
+                break;
         }
     };
 
@@ -215,23 +230,19 @@ export default function SpringAnimation({ dir, friction, tension, mass, presEffe
     //     );
     // };
 
-    const flipRender = () => {
-        return (
-            <div className="flip-container">
-                <animated.div className={'flip-side flip-back'} style={{ transform: to(springs.x, val => `perspective(600px) rotateX(${val}deg)`) }} />
-                <animated.div className={'flip-side flip-front'} style={{ transform: to(springs.x, val => `perspective(600px) rotateX(${val}deg)`), rotateX: '180deg' }}>
-                    {children}
-                </animated.div>
-            </div>
-        );
-    };
-
     const getRenderDoc = () => {
         switch (presEffect) {
             case PresEffect.Rotate:
                 return <animated.div style={{ transform: to(springs.x, val => `rotate(${val}deg)`) }}>{children}</animated.div>;
             case PresEffect.Flip:
-                return flipRender();
+                return (
+                    <div className="flip-container">
+                        <animated.div className={'flip-side flip-back'} style={{ transform: to(springs.x, val => `perspective(600px) rotateX(${val}deg)`) }} />
+                        <animated.div className={'flip-side flip-front'} style={{ transform: to(springs.x, val => `perspective(600px) rotateX(${val}deg)`), rotateX: '180deg' }}>
+                            {children}
+                        </animated.div>
+                    </div>
+                );
             default:
                 return (
                     <animated.div
-- 
cgit v1.2.3-70-g09d2