aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/nodes/DocumentView.tsx6
-rw-r--r--src/client/views/nodes/trails/CubicBezierEditor.tsx13
-rw-r--r--src/client/views/nodes/trails/SlideEffect.scss3
-rw-r--r--src/client/views/nodes/trails/SlideEffect.tsx51
4 files changed, 47 insertions, 26 deletions
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 1e71e2a99..ede473078 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1028,12 +1028,12 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
case PresEffect.None: return renderDoc;
case PresEffect.Zoom: return <SlideEffect dir={dir as PresEffectDirection} presEffect={PresEffect.Zoom} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
case PresEffect.Fade: return <SlideEffect dir={dir as PresEffectDirection} presEffect={PresEffect.Fade} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
- case PresEffect.Flip: return <Flip {...effectProps}>{renderDoc}</Flip>;
+ case PresEffect.Flip: return <SlideEffect dir={dir as PresEffectDirection} presEffect={PresEffect.Flip} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
case PresEffect.Rotate: return <SlideEffect dir={dir as PresEffectDirection} presEffect={PresEffect.Rotate} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
// Potential change to move in since anything can be "bouncy"
case PresEffect.Bounce: return <SlideEffect dir={dir as PresEffectDirection} presEffect={PresEffect.Bounce} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
- case PresEffect.Roll: return <Roll {...effectProps}>{renderDoc}</Roll>;
- // case PresEffect.Lightspeed: return <JackInTheBox {...effectProps}>{renderDoc}</JackInTheBox>;
+ case PresEffect.Roll: return <SlideEffect dir={dir as PresEffectDirection} presEffect={PresEffect.Roll} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
+ case PresEffect.Lightspeed: return <SlideEffect dir={dir as PresEffectDirection} presEffect={PresEffect.Lightspeed} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>;
}
// switch (StrCast(presEffectDoc?.presentation_effect, StrCast(presEffectDoc?.followLinkAnimEffect))) {
// default:
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
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-17 12:04:54 +0000