aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/nodes/DocumentView.tsx22
-rw-r--r--src/client/views/nodes/trails/PresBox.tsx2
-rw-r--r--src/client/views/nodes/trails/SlideEffect.tsx44
-rw-r--r--src/client/views/nodes/trails/SlideEffectPreview.tsx44
-rw-r--r--src/client/views/nodes/trails/SpringUtils.ts9
5 files changed, 35 insertions, 86 deletions
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 01c1de137..1e71e2a99 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -50,8 +50,8 @@ import { KeyValueBox } from './KeyValueBox';
import { LinkAnchorBox } from './LinkAnchorBox';
import { FormattedTextBox } from './formattedText/FormattedTextBox';
import { PresEffect, PresEffectDirection } from './trails';
-import SlideEffect, { EffectType } from './trails/SlideEffect';
-import { SpringSettings, SpringType } from './trails/SpringUtils';
+import SlideEffect from './trails/SlideEffect';
+import { SpringSettings, SpringType, springMappings } from './trails/SpringUtils';
interface Window {
MediaRecorder: MediaRecorder;
}
@@ -1016,10 +1016,8 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
if (!timingConfig) {
timingConfig = {
- type: SpringType.DEFAULT,
- stiffness: 600,
- damping: 15,
- mass: 1,
+ type: SpringType.GENTLE,
+ ...springMappings['gentle'],
};
}
//prettier-ignore
@@ -1028,14 +1026,14 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
default:
// package used: react-awesome-reveal
case PresEffect.None: return renderDoc;
- case PresEffect.Zoom: return <SlideEffect dir={dir as PresEffectDirection} effectType={EffectType.ZOOM} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
- case PresEffect.Fade: return <SlideEffect dir={dir as PresEffectDirection} effectType={EffectType.FADE} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
+ 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.Rotate: return <SlideEffect dir={dir as PresEffectDirection} effectType={EffectType.ROTATE} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
- // Changed to move in since anything can be "bouncy"
- case PresEffect.Bounce: return <SlideEffect dir={dir as PresEffectDirection} effectType={EffectType.BOUNCE} 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.Lightspeed: return <JackInTheBox {...effectProps}>{renderDoc}</JackInTheBox>;
}
// 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 3f546cdd7..3b712a4af 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -1907,7 +1907,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
if (!timingConfig) {
timingConfig = {
- type: SpringType.DEFAULT,
+ type: SpringType.GENTLE,
// stiffness: 300,
// damping: 12,
// mass: 2,
diff --git a/src/client/views/nodes/trails/SlideEffect.tsx b/src/client/views/nodes/trails/SlideEffect.tsx
index 7e2985a6a..e3423069b 100644
--- a/src/client/views/nodes/trails/SlideEffect.tsx
+++ b/src/client/views/nodes/trails/SlideEffect.tsx
@@ -1,18 +1,10 @@
-import { Button } from '@mui/material';
import { useSpring, animated, easings, to } from '@react-spring/web';
import React, { useEffect, useState } from 'react';
-import { PresEffectDirection } from './PresEnums';
-
-export enum EffectType {
- ZOOM = 'zoom',
- FADE = 'fade',
- BOUNCE = 'bounce',
- ROTATE = 'rotate',
-}
+import { PresEffect, PresEffectDirection } from './PresEnums';
interface Props {
dir: PresEffectDirection;
- effectType: EffectType;
+ presEffect: PresEffect;
friction: number;
tension: number;
mass: number;
@@ -20,7 +12,7 @@ interface Props {
}
// TODO: add visibility detector when the slide comes into view
-export default function SpringAnimation({ dir, friction, tension, mass, effectType, children }: Props) {
+export default function SpringAnimation({ dir, friction, tension, mass, presEffect: presEffect, children }: Props) {
const [springs, api] = useSpring(
() => ({
from: {
@@ -53,14 +45,12 @@ export default function SpringAnimation({ dir, friction, tension, mass, effectTy
x: 0,
y: 0,
opacity: 1,
- // opacity: 0,
},
to: {
scale: 1,
x: 0,
y: 0,
opacity: 1,
- // opacity: 1,
config: {
tension: tension,
friction: friction,
@@ -164,36 +154,34 @@ export default function SpringAnimation({ dir, friction, tension, mass, effectTy
],
};
- const handleClick = () => {
- if (effectType === EffectType.BOUNCE) {
+ const flipConfig = {};
+
+ const startAnimation = () => {
+ if (presEffect === PresEffect.Bounce) {
api.start(bounceConfig);
- } else if (effectType === EffectType.ZOOM) {
+ } else if (presEffect === PresEffect.Zoom) {
api.start(zoomConfig);
- } else if (effectType === EffectType.ROTATE) {
+ } else if (presEffect === PresEffect.Rotate) {
api.start(rotateConfig);
- } else if (effectType === EffectType.FADE) {
+ } else if (presEffect === PresEffect.Fade) {
api.start(fadeConfig);
}
};
+ const flipRender = () => {};
+
useEffect(() => {
+ // TODO: Control start with slide visibility instead
setTimeout(() => {
- handleClick();
+ startAnimation();
}, 200);
}, []);
return (
- <div
- // className="demo"
- // onPointerEnter={() => {
- // handleClick();
- // }}
- >
- {effectType !== EffectType.ROTATE ? (
+ <div>
+ {presEffect !== PresEffect.Rotate ? (
<animated.div
style={{
- // display: 'inline-block',
- // transform: 'translate(50px, 50px)',
...springs,
}}>
{children}
diff --git a/src/client/views/nodes/trails/SlideEffectPreview.tsx b/src/client/views/nodes/trails/SlideEffectPreview.tsx
index aacb37b48..d4c16586a 100644
--- a/src/client/views/nodes/trails/SlideEffectPreview.tsx
+++ b/src/client/views/nodes/trails/SlideEffectPreview.tsx
@@ -1,4 +1,3 @@
-import { Button } from '@mui/material';
import { useSpring, animated, easings } from '@react-spring/web';
import React, { useEffect, useState } from 'react';
@@ -24,10 +23,10 @@ export default function SpringAnimationPreview({ friction, tension, mass, childr
mass: mass,
},
onStart: () => {
- console.log('started');
+ // console.log('started');
},
onRest: () => {
- console.log('resting');
+ // console.log('resting');
},
}),
[tension, friction, mass]
@@ -36,38 +35,6 @@ export default function SpringAnimationPreview({ friction, tension, mass, childr
// Whether the animation is currently playing
const [animating, setAnimating] = useState(false);
- const zoomConfig = {
- from: {
- x: 0,
- y: 0,
- opacity: 0,
- scale: 0,
- },
- to: [
- {
- x: 0,
- y: 0,
- opacity: 1,
- scale: 1,
- config: {
- tension: tension,
- friction: friction,
- mass: mass,
- },
- },
- {
- opacity: 0,
- scale: 0,
- x: 0,
- y: 0,
- config: {
- duration: 500,
- easing: easings.easeInOutCubic,
- },
- },
- ],
- };
-
const bounceConfig = {
from: {
x: -50,
@@ -116,13 +83,6 @@ export default function SpringAnimationPreview({ friction, tension, mass, childr
onPointerEnter={() => {
animate();
}}>
- {/* style={{
- width: "50px",
- height: "50px",
- backgroundColor: "#ff6d6d",
- borderRadius: "4px",
- ...springs,
- }} */}
<animated.div
style={{
...springs,
diff --git a/src/client/views/nodes/trails/SpringUtils.ts b/src/client/views/nodes/trails/SpringUtils.ts
index caadf4220..0518e0623 100644
--- a/src/client/views/nodes/trails/SpringUtils.ts
+++ b/src/client/views/nodes/trails/SpringUtils.ts
@@ -2,11 +2,10 @@ import { PresEffect, PresMovement } from './PresEnums';
// the type of slide effect timing (spring-driven)
export enum SpringType {
- DEFAULT = 'default',
GENTLE = 'gentle',
+ QUICK = 'quick',
BOUNCY = 'bouncy',
CUSTOM = 'custom',
- QUICK = 'quick',
}
// settings that control slide effect spring settings
@@ -17,6 +16,7 @@ export interface SpringSettings {
mass: number;
}
+// Options in the movement easing dropdown
export const easeItems = [
{
text: 'Ease',
@@ -44,6 +44,7 @@ export const easeItems = [
},
];
+// Options in the movement type dropdown
export const movementItems = [
{ text: 'None', val: PresMovement.None },
{ text: 'Center', val: PresMovement.Center },
@@ -52,6 +53,7 @@ export const movementItems = [
{ text: 'Jump', val: PresMovement.Jump },
];
+// Items in the slide effect dropdown
export const effectItems = Object.values(PresEffect)
.filter(v => isNaN(Number(v)))
.map(effect => ({
@@ -59,6 +61,7 @@ export const effectItems = Object.values(PresEffect)
val: effect,
}));
+// Maps each PresEffect to the default timing configuration
export const presEffectDefaultTimings: {
[key: string]: SpringSettings;
} = {
@@ -107,8 +110,8 @@ export const presEffectDefaultTimings: {
},
};
+// Dropdown items of timings for the effect
export const effectTimings = [
- { text: 'Default', val: SpringType.DEFAULT },
{
text: 'Gentle',
val: SpringType.GENTLE,
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 21:34:38 +0000