zoom fade rotate

1 files changed, 4 insertions, 118 deletions

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<FieldViewProps>() {
     public static LayoutString(fieldKey: string) {
@@ -268,7 +157,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     @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<FieldViewProps>() {
                     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<FieldViewProps>() {
             },
             { 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<FieldViewProps>() {
                                 Hide
                             </div>
                         </Tooltip>
-
                         <Tooltip title={<div className="dash-tooltip">{'Hide after presented'}</div>}>
                             <div
                                 className={`ribbon-toggle ${activeItem.presentation_hideAfter ? 'active' : ''}`}