From cd3176b1712ae23e41b2b428e23b39e6a4b32861 Mon Sep 17 00:00:00 2001 From: Sophie Zhang Date: Thu, 11 Apr 2024 11:11:58 -0400 Subject: fix: start effect when doc is in viewport --- src/client/views/nodes/DocumentView.tsx | 16 ++++++---- src/client/views/nodes/trails/PresBox.tsx | 8 ++--- src/client/views/nodes/trails/SlideEffect.scss | 8 ++--- src/client/views/nodes/trails/SlideEffect.tsx | 44 ++++++++++++++++++++------ 4 files changed, 51 insertions(+), 25 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index ede473078..eaa2c6abc 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1020,20 +1020,22 @@ export class DocumentViewInternal extends DocComponent{renderDoc} - case PresEffect.Fade: return {renderDoc} - case PresEffect.Flip: return {renderDoc} - case PresEffect.Rotate: return {renderDoc} + case PresEffect.Zoom: return {renderDoc} + case PresEffect.Fade: return {renderDoc} + case PresEffect.Flip: return {renderDoc} + case PresEffect.Rotate: return {renderDoc} // Potential change to move in since anything can be "bouncy" - case PresEffect.Bounce: return {renderDoc} - case PresEffect.Roll: return {renderDoc} - case PresEffect.Lightspeed: return {renderDoc}; + case PresEffect.Bounce: return {renderDoc} + case PresEffect.Roll: return {renderDoc} + case PresEffect.Lightspeed: return {renderDoc}; } // 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 3b712a4af..3d13f0dde 100644 --- a/src/client/views/nodes/trails/PresBox.tsx +++ b/src/client/views/nodes/trails/PresBox.tsx @@ -1946,7 +1946,7 @@ export class PresBox extends ViewBoxBaseComponent() { if (activeItem && this.targetDoc) { const transitionSpeed = activeItem.presentation_transition ? NumCast(activeItem.presentation_transition) / 1000 : 0.5; const zoom = NumCast(activeItem.config_zoom, 1) * 100; - const effect = activeItem.presentation_effect ? activeItem.presentation_effect : PresMovement.None; + const effect = activeItem.presentation_effect ? activeItem.presentation_effect : PresEffect.None; return ( <> @@ -2271,7 +2271,7 @@ export class PresBox extends ViewBoxBaseComponent() { value={timingConfig.stiffness} onChange={(e, val) => { if (!timingConfig) return; - this.updateEffectTiming(activeItem, { ...timingConfig, stiffness: val as number }); + this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, stiffness: val as number }); }} valueLabelDisplay="auto" /> @@ -2289,7 +2289,7 @@ export class PresBox extends ViewBoxBaseComponent() { value={timingConfig.damping} onChange={(e, val) => { if (!timingConfig) return; - this.updateEffectTiming(activeItem, { ...timingConfig, damping: val as number }); + this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, damping: val as number }); }} valueLabelDisplay="auto" /> @@ -2307,7 +2307,7 @@ export class PresBox extends ViewBoxBaseComponent() { value={timingConfig.mass} onChange={(e, val) => { if (!timingConfig) return; - this.updateEffectTiming(activeItem, { ...timingConfig, mass: val as number }); + this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, mass: val as number }); }} valueLabelDisplay="auto" /> diff --git a/src/client/views/nodes/trails/SlideEffect.scss b/src/client/views/nodes/trails/SlideEffect.scss index 6a9e93028..144052c1f 100644 --- a/src/client/views/nodes/trails/SlideEffect.scss +++ b/src/client/views/nodes/trails/SlideEffect.scss @@ -7,10 +7,10 @@ .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; } diff --git a/src/client/views/nodes/trails/SlideEffect.tsx b/src/client/views/nodes/trails/SlideEffect.tsx index 3e64cedd4..d4dfae059 100644 --- a/src/client/views/nodes/trails/SlideEffect.tsx +++ b/src/client/views/nodes/trails/SlideEffect.tsx @@ -1,9 +1,15 @@ -import { useSpring, animated, easings, to } from '@react-spring/web'; +import { useSpring, animated, easings, to, useInView } from '@react-spring/web'; import React, { useEffect, useState } from 'react'; import { PresEffect, PresEffectDirection } from './PresEnums'; import './SlideEffect.scss'; +import { Doc } from '../../../../fields/Doc'; +import { NumCast } from '../../../../fields/Types'; interface Props { + // pass in doc to extract width, height, bg + doc: Doc; + // wait for the transition movement to end before starting effect + delay: number; dir: PresEffectDirection; presEffect: PresEffect; friction: number; @@ -13,7 +19,8 @@ interface Props { } // TODO: add visibility detector when the slide comes into view -export default function SpringAnimation({ dir, friction, tension, mass, presEffect, children }: Props) { +export default function SpringAnimation({ doc, delay, dir, friction, tension, mass, presEffect, children }: Props) { + console.log('delay:', delay); const [springs, api] = useSpring( () => ({ from: { @@ -36,6 +43,9 @@ export default function SpringAnimation({ dir, friction, tension, mass, presEffe }), [tension, friction, mass] ); + const [ref, inView] = useInView({ + once: true, + }); // Whether the animation is currently playing const [animating, setAnimating] = useState(false); @@ -233,22 +243,26 @@ export default function SpringAnimation({ dir, friction, tension, mass, presEffe const getRenderDoc = () => { switch (presEffect) { case PresEffect.Rotate: - return `rotate(${val}deg)`) }}>{children}; + return ( + `rotate(${val}deg)`) }}> + {children} + + ); case PresEffect.Flip: return ( // Pass in doc dimensions -
+
{dir === PresEffectDirection.Bottom || dir === PresEffectDirection.Top ? ( <> - `perspective(600px) rotateX(${val}deg)`) }} /> - `perspective(600px) rotateX(${val}deg)`), rotateX: '180deg' }}> + `perspective(600px) rotateX(${val}deg)`), width: NumCast(doc.width), height: NumCast(doc.height) }} /> + `perspective(600px) rotateX(${val}deg)`), rotateX: '180deg', width: NumCast(doc.width), height: NumCast(doc.height) }}> {children} ) : ( <> - `perspective(600px) rotateY(${val}deg)`) }} /> - `perspective(600px) rotateY(${val}deg)`), rotateX: '180deg' }}> + `perspective(600px) rotateY(${val}deg)`), width: NumCast(doc.width), height: NumCast(doc.height) }} /> + `perspective(600px) rotateY(${val}deg)`), rotateY: '180deg', width: NumCast(doc.width), height: NumCast(doc.height) }}> {children} @@ -258,6 +272,7 @@ export default function SpringAnimation({ dir, friction, tension, mass, presEffe default: return ( @@ -267,12 +282,21 @@ export default function SpringAnimation({ dir, friction, tension, mass, presEffe } }; + // useEffect(() => { + // // TODO: Control start with slide visibility instead + // setTimeout(() => { + // startAnimation(); + // }, 200); + // }, []); + useEffect(() => { + if (!inView) return; + console.log('in view'); // TODO: Control start with slide visibility instead setTimeout(() => { startAnimation(); - }, 200); - }, []); + }, 100); + }, [inView]); return
{getRenderDoc()}
; } -- cgit v1.2.3-70-g09d2