From 43569b25466aa9bcf19f0f78c6ccd0928c98ab05 Mon Sep 17 00:00:00 2001 From: Sophie Zhang Date: Wed, 10 Apr 2024 15:26:32 -0400 Subject: fix: naming, cleaning --- src/client/views/nodes/DocumentView.tsx | 22 +++++------ src/client/views/nodes/trails/PresBox.tsx | 2 +- src/client/views/nodes/trails/SlideEffect.tsx | 44 ++++++++-------------- .../views/nodes/trails/SlideEffectPreview.tsx | 44 +--------------------- src/client/views/nodes/trails/SpringUtils.ts | 9 +++-- 5 files changed, 35 insertions(+), 86 deletions(-) (limited to 'src') 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{renderDoc} - case PresEffect.Fade: return {renderDoc} + case PresEffect.Zoom: return {renderDoc} + case PresEffect.Fade: return {renderDoc} case PresEffect.Flip: return {renderDoc}; - case PresEffect.Rotate: return {renderDoc} - // Changed to move in since anything can be "bouncy" - case PresEffect.Bounce: 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.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 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() { 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 ( -
{ - // handleClick(); - // }} - > - {effectType !== EffectType.ROTATE ? ( +
+ {presEffect !== PresEffect.Rotate ? ( {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, - }} */} 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, -- cgit v1.2.3-70-g09d2