From 400ee4e8ed1ed2b8b4b356731aae79aafe272e25 Mon Sep 17 00:00:00 2001
From: Sophie Zhang <sophie_zhang@brown.edu>
Date: Sun, 28 Apr 2024 13:26:52 -0400
Subject: click preview

---
 src/client/views/nodes/trails/PresBox.tsx     | 71 +++++++++++++++++----------
 src/client/views/nodes/trails/SlideEffect.tsx |  1 -
 2 files changed, 45 insertions(+), 27 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 67f787b1e..d6bfda54f 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -129,30 +129,30 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @observable isLoading: boolean = false;
 
     @observable generatedAnimations: AnimationSettings[] = [
-        {
-            effect: PresEffect.Bounce,
-            stiffness: 400,
-            damping: 15,
-            mass: 1,
-        },
-        {
-            effect: PresEffect.Fade,
-            stiffness: 100,
-            damping: 15,
-            mass: 1,
-        },
-        {
-            effect: PresEffect.Flip,
-            stiffness: 100,
-            damping: 15,
-            mass: 1,
-        },
-        {
-            effect: PresEffect.Roll,
-            stiffness: 100,
-            damping: 15,
-            mass: 1,
-        },
+        // {
+        //     effect: PresEffect.Bounce,
+        //     stiffness: 400,
+        //     damping: 15,
+        //     mass: 1,
+        // },
+        // {
+        //     effect: PresEffect.Fade,
+        //     stiffness: 100,
+        //     damping: 15,
+        //     mass: 1,
+        // },
+        // {
+        //     effect: PresEffect.Flip,
+        //     stiffness: 100,
+        //     damping: 15,
+        //     mass: 1,
+        // },
+        // {
+        //     effect: PresEffect.Roll,
+        //     stiffness: 100,
+        //     damping: 15,
+        //     mass: 1,
+        // },
     ];
 
     @action
@@ -2287,7 +2287,26 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 </div>
                                 {/* Preview Animations  */}
                                 <div>
-                                    <div className="presBox-effect-row">
+                                    {this.generatedAnimations.map((elem, i) => (
+                                        <div
+                                            key={i}
+                                            className="presBox-effect-container"
+                                            onClick={() => {
+                                                this.updateEffect(elem.effect, false);
+                                                this.updateEffectTiming(this.activeItem, {
+                                                    type: SpringType.CUSTOM,
+                                                    stiffness: elem.stiffness,
+                                                    damping: elem.damping,
+                                                    mass: elem.mass,
+                                                });
+                                            }}>
+                                            <SlideEffect dir={PresEffectDirection.Left as PresEffectDirection} presEffect={elem.effect as PresEffect} tension={elem.stiffness} friction={elem.damping} mass={elem.mass} infinite>
+                                                <div className="presBox-effect-demo-box" style={{ top: elem.effect === PresEffect.Flip ? 0 : '20px', left: elem.effect === PresEffect.Flip ? 0 : '20px', backgroundColor: '#ff2599' }}></div>
+                                            </SlideEffect>
+                                        </div>
+                                    ))}
+
+                                    {/* <div className="presBox-effect-row">
                                         <div className="presBox-effect-container">
                                             <SlideEffect
                                                 key={JSON.stringify(this.generatedAnimations[0])}
@@ -2346,7 +2365,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                                     style={{ top: this.generatedAnimations[3].effect === PresEffect.Flip ? 0 : '20px', left: this.generatedAnimations[3].effect === PresEffect.Flip ? 0 : '20px', backgroundColor: '#ff2599' }}></div>
                                             </SlideEffect>
                                         </div>
-                                    </div>
+                                    </div> */}
                                 </div>
                             </div>
                             {/* Effect direction */}
diff --git a/src/client/views/nodes/trails/SlideEffect.tsx b/src/client/views/nodes/trails/SlideEffect.tsx
index 251649d6a..5cb4da72c 100644
--- a/src/client/views/nodes/trails/SlideEffect.tsx
+++ b/src/client/views/nodes/trails/SlideEffect.tsx
@@ -166,7 +166,6 @@ export default function SpringAnimation({ doc, dir, friction, tension, mass, pre
                 },
             },
         ],
-        loop: true,
     };
 
     const flipConfig = {
-- 
cgit v1.2.3-70-g09d2