From d8863c3188cf0c4647b70d3dc9ec5f2fffe5525c Mon Sep 17 00:00:00 2001 From: Sophie Zhang Date: Thu, 4 Apr 2024 11:21:28 -0400 Subject: zoom fade rotate --- src/client/views/nodes/DocumentView.tsx | 9 +- src/client/views/nodes/trails/PresBox.tsx | 122 +------------------------- src/client/views/nodes/trails/SlideEffect.tsx | 81 +++++++++++------ src/client/views/nodes/trails/SpringUtils.ts | 111 +++++++++++++++++++++++ 4 files changed, 176 insertions(+), 147 deletions(-) create mode 100644 src/client/views/nodes/trails/SpringUtils.ts (limited to 'src') diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 92f66f2cd..17ebc5b5e 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -47,8 +47,9 @@ import { FieldViewProps, FieldViewSharedProps } from './FieldView'; import { KeyValueBox } from './KeyValueBox'; import { LinkAnchorBox } from './LinkAnchorBox'; import { FormattedTextBox } from './formattedText/FormattedTextBox'; -import { PresEffect, PresEffectDirection, SpringSettings, SpringType } from './trails'; +import { PresEffect, PresEffectDirection } from './trails'; import SlideEffect, { EffectType } from './trails/SlideEffect'; +import { SpringSettings, SpringType } from './trails/SpringUtils'; interface Window { MediaRecorder: MediaRecorder; } @@ -996,7 +997,6 @@ export class DocumentViewInternal extends DocComponent, root: Doc) { const dir = presEffectDoc?.presentation_effectDirection ?? presEffectDoc?.followLinkAnimDirection; - console.log(dir); const effectProps = { left: dir === PresEffectDirection.Left, right: dir === PresEffectDirection.Right, @@ -1028,9 +1028,10 @@ export class DocumentViewInternal extends DocComponent{renderDoc} - case PresEffect.Fade: return {renderDoc}; + case PresEffect.Fade: return {renderDoc} case PresEffect.Flip: return {renderDoc}; - case PresEffect.Rotate: return {renderDoc}; + case PresEffect.Rotate: return {renderDoc} + // Changed to move in since anything can be "bouncy" case PresEffect.Bounce: return {renderDoc} case PresEffect.Roll: return {renderDoc}; case PresEffect.Lightspeed: return {renderDoc}; diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx index deb59d03f..8745bf1a4 100644 --- a/src/client/views/nodes/trails/PresBox.tsx +++ b/src/client/views/nodes/trails/PresBox.tsx @@ -28,7 +28,7 @@ import { CollectionFreeFormView, MarqueeViewBounds } from '../../collections/col import { CollectionStackedTimeline } from '../../collections/CollectionStackedTimeline'; import { CollectionView } from '../../collections/CollectionView'; import { TreeView } from '../../collections/TreeView'; -import { ViewBoxBaseComponent } from '../../DocComponent'; +import { ViewBoxBaseComponent, ViewBoxInterface } from '../../DocComponent'; import { Colors } from '../../global/globalEnums'; import { LightboxView } from '../../LightboxView'; import { DocumentView, OpenWhere, OpenWhereMod } from '../DocumentView'; @@ -47,6 +47,7 @@ import CubicBezierEditor, { TIMING_DEFAULT_MAPPINGS } from './CubicBezierEditor' import Slider from '@mui/material/Slider'; import { FaArrowDown, FaArrowLeft, FaArrowRight, FaArrowUp, FaCompressArrowsAlt } from 'react-icons/fa'; import SpringAnimationPreview from './SlideEffectPreview'; +import { effectTimings, SpringType, springMappings, effectItems, easeItems, movementItems, SpringSettings } from './SpringUtils'; export interface pinDataTypes { scrollable?: boolean; @@ -75,118 +76,6 @@ export interface PinProps { pinData?: pinDataTypes; } -// the type of slide effect timing (spring-driven) -export enum SpringType { - DEFAULT = 'default', - GENTLE = 'gentle', - BOUNCY = 'bouncy', - CUSTOM = 'custom', - QUICK = 'quick', -} - -// settings that control slide effect spring settings -export interface SpringSettings { - type: SpringType; - stiffness: number; - damping: number; - mass: number; -} - -const easeItems = [ - { - text: 'Ease', - val: 'ease', - }, - { - text: 'Ease In', - val: 'ease-in', - }, - { - text: 'Ease Out', - val: 'ease-out', - }, - { - text: 'Ease In Out', - val: 'ease-in-out', - }, - { - text: 'Linear', - val: 'linear', - }, - { - text: 'Custom', - val: 'custom', - }, -]; - -const movementItems = [ - { text: 'None', val: PresMovement.None }, - { text: 'Center', val: PresMovement.Center }, - { text: 'Zoom', val: PresMovement.Zoom }, - { text: 'Pan', val: PresMovement.Pan }, - { text: 'Jump', val: PresMovement.Jump }, -]; - -const effectItems = Object.values(PresEffect) - .filter(v => isNaN(Number(v))) - .map(effect => ({ - text: effect, - val: effect, - })); - -const effectTimings = [ - { text: 'Default', val: SpringType.DEFAULT }, - { - text: 'Gentle', - val: SpringType.GENTLE, - }, - { - text: 'Quick', - val: SpringType.QUICK, - }, - { - text: 'Bouncy', - val: SpringType.BOUNCY, - }, - { - text: 'Custom', - val: SpringType.CUSTOM, - }, -]; - -const springMappings: { - [key: string]: { stiffness: number; damping: number; mass: number }; -} = { - default: { - // stiffness: 300, - // damping: 12, - // mass: 2, - stiffness: 600, - damping: 15, - mass: 1, - }, - gentle: { - stiffness: 100, - damping: 15, - mass: 1, - }, - quick: { - stiffness: 300, - damping: 20, - mass: 1, - }, - bouncy: { - stiffness: 600, - damping: 15, - mass: 1, - }, - custom: { - stiffness: 100, - damping: 10, - mass: 1, - }, -}; - @observer export class PresBox extends ViewBoxBaseComponent() { public static LayoutString(fieldKey: string) { @@ -268,7 +157,6 @@ export class PresBox extends ViewBoxBaseComponent() { @computed get currCPoints() { - console.log('getting curr c points'); let strPoints = this.activeItem.presEaseFunc ? StrCast(this.activeItem.presEaseFunc) : 'ease'; if (!strPoints.startsWith('cubic')) { switch (StrCast(this.activeItem.presEaseFunc)) { @@ -291,13 +179,11 @@ export class PresBox extends ViewBoxBaseComponent() { strPoints = 'cubic-bezier(0.25, 0.1, 0.25, 1.0)'; } } - console.log('str points', strPoints); const components = strPoints .split('(')[1] .split(')')[0] .split(',') .map(elem => parseFloat(elem)); - console.log('bezier components', components); return { p1: [components[0], components[1]], p2: [components[2], components[3]], @@ -386,7 +272,8 @@ export class PresBox extends ViewBoxBaseComponent() { }, { fireImmediately: true } ); - this._props.setContentViewBox?.(this); + // Casted to viewboxinterface + this._props.setContentViewBox?.(this as ViewBoxInterface); this._unmounting = false; this.turnOffEdit(true); this._disposers.selection = reaction( @@ -1856,7 +1743,6 @@ export class PresBox extends ViewBoxBaseComponent() { Hide - {'Hide after presented'}}>
- {/* style={{ - width: "50px", - height: "50px", - backgroundColor: "#ff6d6d", - borderRadius: "4px", - ...springs, - }} */} - - {children} - - {/* */} + {effectType !== EffectType.ROTATE ? ( + + {children} + + ) : ( + `rotate(${val}deg)`) }}>{children} + )}
); } diff --git a/src/client/views/nodes/trails/SpringUtils.ts b/src/client/views/nodes/trails/SpringUtils.ts new file mode 100644 index 000000000..5feb1628a --- /dev/null +++ b/src/client/views/nodes/trails/SpringUtils.ts @@ -0,0 +1,111 @@ +import { PresEffect, PresMovement } from './PresEnums'; + +// the type of slide effect timing (spring-driven) +export enum SpringType { + DEFAULT = 'default', + GENTLE = 'gentle', + BOUNCY = 'bouncy', + CUSTOM = 'custom', + QUICK = 'quick', +} + +// settings that control slide effect spring settings +export interface SpringSettings { + type: SpringType; + stiffness: number; + damping: number; + mass: number; +} + +export const easeItems = [ + { + text: 'Ease', + val: 'ease', + }, + { + text: 'Ease In', + val: 'ease-in', + }, + { + text: 'Ease Out', + val: 'ease-out', + }, + { + text: 'Ease In Out', + val: 'ease-in-out', + }, + { + text: 'Linear', + val: 'linear', + }, + { + text: 'Custom', + val: 'custom', + }, +]; + +export const movementItems = [ + { text: 'None', val: PresMovement.None }, + { text: 'Center', val: PresMovement.Center }, + { text: 'Zoom', val: PresMovement.Zoom }, + { text: 'Pan', val: PresMovement.Pan }, + { text: 'Jump', val: PresMovement.Jump }, +]; + +export const effectItems = Object.values(PresEffect) + .filter(v => isNaN(Number(v))) + .map(effect => ({ + text: effect, + val: effect, + })); + +export const effectTimings = [ + { text: 'Default', val: SpringType.DEFAULT }, + { + text: 'Gentle', + val: SpringType.GENTLE, + }, + { + text: 'Quick', + val: SpringType.QUICK, + }, + { + text: 'Bouncy', + val: SpringType.BOUNCY, + }, + { + text: 'Custom', + val: SpringType.CUSTOM, + }, +]; + +// Maps spring names to spring parameters +export const springMappings: { + [key: string]: { stiffness: number; damping: number; mass: number }; +} = { + default: { + stiffness: 600, + damping: 15, + mass: 1, + }, + gentle: { + stiffness: 100, + damping: 15, + mass: 1, + }, + quick: { + stiffness: 300, + damping: 20, + mass: 1, + }, + bouncy: { + stiffness: 600, + damping: 15, + mass: 1, + }, + custom: { + stiffness: 100, + damping: 10, + mass: 1, + }, +}; -- cgit v1.2.3-70-g09d2