bug fiixng

3 files changed, 16 insertions, 134 deletions

diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index b372c1927..8c9318743 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1031,12 +1031,12 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
         switch (StrCast(presEffectDoc?.presentation_effect, StrCast(presEffectDoc?.followLinkAnimEffect))) {
             default:
             case PresEffect.None:       return renderDoc;
-            case PresEffect.Zoom:       return <SlideEffect doc={root} dir={dir as PresEffectDirection} presEffect={PresEffect.Zoom} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
-            case PresEffect.Fade:       return <SlideEffect  doc={root} dir={dir as PresEffectDirection} presEffect={PresEffect.Fade} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
-            case PresEffect.Flip:       return <SlideEffect doc={root} dir={dir as PresEffectDirection} presEffect={PresEffect.Flip} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
-            case PresEffect.Rotate:       return <SlideEffect  doc={root}  dir={dir as PresEffectDirection} presEffect={PresEffect.Rotate} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
-            case PresEffect.Bounce:     return <SlideEffect doc={root} dir={dir as PresEffectDirection} presEffect={PresEffect.Bounce} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
-            case PresEffect.Roll:       return <SlideEffect doc={root}  dir={dir as PresEffectDirection} presEffect={PresEffect.Roll} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
+            case PresEffect.Zoom:       return <SlideEffect doc={root} dir={dir as PresEffectDirection} presEffect={PresEffect.Zoom} stiffness={timingConfig.stiffness} damping={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
+            case PresEffect.Fade:       return <SlideEffect  doc={root} dir={dir as PresEffectDirection} presEffect={PresEffect.Fade} stiffness={timingConfig.stiffness} damping={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
+            case PresEffect.Flip:       return <SlideEffect doc={root} dir={dir as PresEffectDirection} presEffect={PresEffect.Flip} stiffness={timingConfig.stiffness} damping={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
+            case PresEffect.Rotate:       return <SlideEffect  doc={root}  dir={dir as PresEffectDirection} presEffect={PresEffect.Rotate} stiffness={timingConfig.stiffness} damping={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
+            case PresEffect.Bounce:     return <SlideEffect doc={root} dir={dir as PresEffectDirection} presEffect={PresEffect.Bounce} stiffness={timingConfig.stiffness} damping={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
+            case PresEffect.Roll:       return <SlideEffect doc={root}  dir={dir as PresEffectDirection} presEffect={PresEffect.Roll} stiffness={timingConfig.stiffness} damping={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
             // keep as preset, doesn't really make sense with spring config
             case PresEffect.Lightspeed: return <JackInTheBox {...effectProps}>{renderDoc}</JackInTheBox>;
         }
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index cf97dee1a..d03e2c41e 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -1994,16 +1994,13 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         if (!timingConfig) {
             timingConfig = {
                 type: SpringType.GENTLE,
-                // stiffness: 300,
-                // damping: 12,
-                // mass: 2,
-                stiffness: 600,
+                stiffness: 100,
                 damping: 15,
                 mass: 1,
             };
         }
 
-        const preseEffect = (effect: PresEffect) => (
+        const presEffect = (effect: PresEffect) => (
             <div
                 className={`presBox-dropdownOption ${activeItem.presentation_effect === effect || (effect === PresEffect.None && !activeItem.presentation_effect) ? 'active' : ''}`}
                 onPointerDown={StopEvent}
@@ -2095,36 +2092,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         })}>
                         <div className="presBox-option-block" style={{ padding: '16px' }}>
                             Movement
-                            {/* <div
-                                className="presBox-dropdown"
-                                onClick={action(e => {
-                                    e.stopPropagation();
-                                    this._openMovementDropdown = !this._openMovementDropdown;
-                                })}
-                                style={{
-                                    color: SettingsManager.userColor,
-                                    background: SettingsManager.userVariantColor,
-                                    borderBottomLeftRadius: this._openMovementDropdown ? 0 : 5,
-                                    border: this._openMovementDropdown ? `solid 2px ${SettingsManager.userVariantColor}` : `solid 1px ${SettingsManager.userColor}`,
-                                }}>
-                                {this.movementName(activeItem)}
-                                <FontAwesomeIcon className="presBox-dropdownIcon" style={{ gridColumn: 2, color: this._openMovementDropdown ? Colors.MEDIUM_BLUE : 'black' }} icon={'angle-down'} />
-                                <div
-                                    className="presBox-dropdownOptions"
-                                    id={'presBoxMovementDropdown'}
-                                    onPointerDown={StopEvent}
-                                    style={{
-                                        color: SettingsManager.userColor,
-                                        background: SettingsManager.userBackgroundColor,
-                                        display: this._openMovementDropdown ? 'grid' : 'none',
-                                    }}>
-                                    {presMovement(PresMovement.None)}
-                                    {presMovement(PresMovement.Center)}
-                                    {presMovement(PresMovement.Zoom)}
-                                    {presMovement(PresMovement.Pan)}
-                                    {presMovement(PresMovement.Jump)}
-                                </div>
-                            </div> */}
                             <Dropdown
                                 color={StrCast(Doc.UserDoc().userColor)}
                                 formLabel={'Movement'}
@@ -2253,11 +2220,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                     <div className="pres-chat">
                                         <div
                                             className="pres-chatbox-container"
-                                            onClick={e => {
-                                                e.stopPropagation();
+                                            onPointerDown={e => {
+                                                StopEvent(e);
                                             }}>
                                             <ReactTextareaAutosize
-                                                ref={r => (this._inputref = r)}
+                                                ref={r => (this._inputref2 = r)}
                                                 minRows={1}
                                                 placeholder="Get animation suggestions..."
                                                 className="pres-chatbox"
@@ -2300,72 +2267,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                                     mass: elem.mass,
                                                 });
                                             }}>
-                                            <SlideEffect dir={PresEffectDirection.Left as PresEffectDirection} presEffect={elem.effect as PresEffect} tension={elem.stiffness} friction={elem.damping} mass={elem.mass} infinite>
+                                            <SlideEffect dir={PresEffectDirection.Left as PresEffectDirection} presEffect={elem.effect as PresEffect} stiffness={elem.stiffness} damping={elem.damping} mass={elem.mass} infinite>
                                                 <div className="presBox-effect-demo-box"></div>
                                             </SlideEffect>
                                         </div>
                                     ))}
-
-                                    {/* <div className="presBox-effect-row">
-                                        <div className="presBox-effect-container">
-                                            <SlideEffect
-                                                key={JSON.stringify(this.generatedAnimations[0])}
-                                                dir={PresEffectDirection.Left as PresEffectDirection}
-                                                presEffect={this.generatedAnimations[0].effect as PresEffect}
-                                                tension={this.generatedAnimations[0].stiffness}
-                                                friction={this.generatedAnimations[0].damping}
-                                                mass={this.generatedAnimations[0].mass}
-                                                infinite>
-                                                <div
-                                                    className="presBox-effect-demo-box"
-                                                    style={{ top: this.generatedAnimations[0].effect === PresEffect.Flip ? 0 : '20px', left: this.generatedAnimations[0].effect === PresEffect.Flip ? 0 : '20px' }}></div>
-                                            </SlideEffect>
-                                        </div>
-                                        <div className="presBox-effect-container">
-                                            <SlideEffect
-                                                key={JSON.stringify(this.generatedAnimations[1])}
-                                                dir={PresEffectDirection.Left as PresEffectDirection}
-                                                presEffect={this.generatedAnimations[1].effect as PresEffect}
-                                                tension={this.generatedAnimations[1].stiffness}
-                                                friction={this.generatedAnimations[1].damping}
-                                                mass={this.generatedAnimations[1].mass}
-                                                infinite>
-                                                <div
-                                                    className="presBox-effect-demo-box"
-                                                    style={{ top: this.generatedAnimations[1].effect === PresEffect.Flip ? 0 : '20px', left: this.generatedAnimations[1].effect === PresEffect.Flip ? 0 : '20px', backgroundColor: '#4925ff' }}></div>
-                                            </SlideEffect>
-                                        </div>
-                                    </div>
-                                    <div className="presBox-effect-row">
-                                        <div className="presBox-effect-container">
-                                            <SlideEffect
-                                                key={JSON.stringify(this.generatedAnimations[2])}
-                                                dir={PresEffectDirection.Left as PresEffectDirection}
-                                                presEffect={this.generatedAnimations[2].effect as PresEffect}
-                                                tension={this.generatedAnimations[2].stiffness}
-                                                friction={this.generatedAnimations[2].damping}
-                                                mass={this.generatedAnimations[2].mass}
-                                                infinite>
-                                                <div
-                                                    className="presBox-effect-demo-box"
-                                                    style={{ top: this.generatedAnimations[2].effect === PresEffect.Flip ? 0 : '20px', left: this.generatedAnimations[2].effect === PresEffect.Flip ? 0 : '20px', backgroundColor: '#a825ff' }}></div>
-                                            </SlideEffect>
-                                        </div>
-                                        <div className="presBox-effect-container">
-                                            <SlideEffect
-                                                key={JSON.stringify(this.generatedAnimations[3])}
-                                                dir={PresEffectDirection.Left as PresEffectDirection}
-                                                presEffect={this.generatedAnimations[3].effect as PresEffect}
-                                                tension={this.generatedAnimations[3].stiffness}
-                                                friction={this.generatedAnimations[3].damping}
-                                                mass={this.generatedAnimations[3].mass}
-                                                infinite>
-                                                <div
-                                                    className="presBox-effect-demo-box"
-                                                    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>
                             {/* Effect direction */}
diff --git a/src/client/views/nodes/trails/SlideEffect.tsx b/src/client/views/nodes/trails/SlideEffect.tsx
index 5cb4da72c..cf31b565e 100644
--- a/src/client/views/nodes/trails/SlideEffect.tsx
+++ b/src/client/views/nodes/trails/SlideEffect.tsx
@@ -10,8 +10,10 @@ interface Props {
     doc?: Doc;
     dir: PresEffectDirection;
     presEffect: PresEffect;
-    friction: number;
+    // stiffness (figma) = tension (react-spring)
     tension: number;
+    // damping (figma) = friction (react-spring)
+    friction: number;
     mass: number;
     children: React.ReactNode;
     infinite?: boolean;
@@ -285,23 +287,6 @@ export default function SpringAnimation({ doc, dir, friction, tension, mass, pre
         api.start(config);
     };
 
-    // const flipRender = () => {
-    //     return (
-    //         <div className="flip-container">
-    //             <animated.div className={'flip-side flip-back'} style={{ opacity: opacity.to(o => 1 - o), transform }} />
-    //             <animated.div
-    //                 className={'flip-side flip-front'}
-    //                 style={{
-    //                     opacity,
-    //                     transform,
-    //                     rotateX: '180deg',
-    //                 }}>
-    //                 {children}
-    //             </animated.div>
-    //         </div>
-    //     );
-    // };
-
     const getRenderDoc = () => {
         switch (presEffect) {
             case PresEffect.Rotate:
@@ -365,17 +350,8 @@ export default function SpringAnimation({ doc, dir, friction, tension, mass, pre
         }
     };
 
-    // useEffect(() => {
-    //     // TODO: Control start with slide visibility instead
-    //     setTimeout(() => {
-    //         startAnimation();
-    //     }, 200);
-    // }, []);
-
     useEffect(() => {
         if (infinite || !inView) return;
-        console.log('in view');
-        // TODO: Control start with slide visibility instead
         setTimeout(() => {
             startAnimation();
         }, 100);
@@ -385,7 +361,7 @@ export default function SpringAnimation({ doc, dir, friction, tension, mass, pre
         if (infinite) {
             startAnimation();
         }
-    }, []);
+    }, [presEffect, tension, friction, mass]);
 
     return <div>{getRenderDoc()}</div>;
 }