From 64dbcf06fdae7e5d0c8b69210e7b0e8ef169282d Mon Sep 17 00:00:00 2001
From: Sophie Zhang <sophie_zhang@brown.edu>
Date: Thu, 11 Apr 2024 10:31:10 -0400
Subject: flipping semi-working need to fix dimensions

---
 src/client/views/nodes/trails/SlideEffect.scss | 11 +++++++----
 src/client/views/nodes/trails/SlideEffect.tsx  | 20 ++++++++++++++++----
 2 files changed, 23 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/trails/SlideEffect.scss b/src/client/views/nodes/trails/SlideEffect.scss
index 5d8e3119b..6a9e93028 100644
--- a/src/client/views/nodes/trails/SlideEffect.scss
+++ b/src/client/views/nodes/trails/SlideEffect.scss
@@ -7,15 +7,18 @@
 
 .flip-side {
     position: absolute;
-    // max-width: 500px;
-    // max-height: 500px;
-    // width: 350px;
-    // height: 200px;
+    max-width: 500px;
+    max-height: 500px;
+    width: 350px;
+    height: 200px;
     will-change: transform, opacity;
+    backface-visibility: hidden;
 }
 
 .flip-front {
 }
 
 .flip-back {
+    // Get the background color of node instead
+    background-color: rgb(223, 223, 223);
 }
diff --git a/src/client/views/nodes/trails/SlideEffect.tsx b/src/client/views/nodes/trails/SlideEffect.tsx
index 6221592a0..3e64cedd4 100644
--- a/src/client/views/nodes/trails/SlideEffect.tsx
+++ b/src/client/views/nodes/trails/SlideEffect.tsx
@@ -236,11 +236,23 @@ export default function SpringAnimation({ dir, friction, tension, mass, presEffe
                 return <animated.div style={{ transform: to(springs.x, val => `rotate(${val}deg)`) }}>{children}</animated.div>;
             case PresEffect.Flip:
                 return (
+                    // Pass in doc dimensions
                     <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>
+                        {dir === PresEffectDirection.Bottom || dir === PresEffectDirection.Top ? (
+                            <>
+                                <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>
+                            </>
+                        ) : (
+                            <>
+                                <animated.div className={'flip-side flip-back'} style={{ transform: to(springs.x, val => `perspective(600px) rotateY(${val}deg)`) }} />
+                                <animated.div className={'flip-side flip-front'} style={{ transform: to(springs.x, val => `perspective(600px) rotateY(${val}deg)`), rotateX: '180deg' }}>
+                                    {children}
+                                </animated.div>
+                            </>
+                        )}
                     </div>
                 );
             default:
-- 
cgit v1.2.3-70-g09d2