feat: added dropdown for ease function

4 files changed, 72 insertions, 3 deletions

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index a38a330da..b0352f6e0 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -276,10 +276,13 @@ export class DocumentManager {
         docContextPath.shift();
         const childViewIterator = async (docView: DocumentView) => {
             const innerDoc = docContextPath.shift();
+
+            // point of interest?
             return { focused: false, viewSpec: innerDoc, childDocView: innerDoc && !innerDoc.layout_unrendered ? (await docView.ComponentView?.getView?.(innerDoc, options)) ?? this.getDocumentView(innerDoc) : undefined };
         };
 
         if (rootContextView) {
+            // try commenting out
             const target = await this.focusViewsInPath(rootContextView, options, childViewIterator);
             this.restoreDocView(target.viewSpec, target.docView, options, target.contextView ?? target.docView, targetDoc);
             finished?.(target.focused);
@@ -293,7 +296,9 @@ export class DocumentManager {
     ) => {
         let contextView: DocumentView | undefined; // view containing context that contains target
         let focused = false;
+        let count = 0;
         while (true) {
+            console.log('Count: ', count);
             if (docView.Document.layout_fieldKey === 'layout_icon') {
                 await new Promise<void>(res => docView.iconify(res));
                 options.didMove = true;
@@ -304,6 +309,7 @@ export class DocumentManager {
             if (!childDocView) return { viewSpec: options.anchorDoc ?? viewSpec ?? docView.Document, docView, contextView, focused };
             contextView = options.anchorDoc?.layout_unrendered && !childDocView.Document.layout_unrendered ? childDocView : docView;
             docView = childDocView;
+            count += 1;
         }
     };
 
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormPannableContents.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormPannableContents.tsx
index 69cbae86f..a140dd4b1 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormPannableContents.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormPannableContents.tsx
@@ -40,6 +40,8 @@ export class CollectionFreeFormPannableContents extends React.Component<Collecti
         );
 
     render() {
+        console.log('transofmr', this.props.transform());
+        console.log('transition', this.props.transition);
         return (
             <div
                 className={'collectionfreeformview' + (this.props.viewDefDivClick ? '-viewDef' : '-none')}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 19948b7eb..a62ea2eb9 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -111,6 +111,13 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     private _brushtimer: any;
     private _brushtimer1: any;
 
+    private _presEaseFunc: string = 'ease';
+
+    @action
+    setPresEaseFunc = (easeFunc: string) => {
+        this._presEaseFunc = easeFunc;
+    };
+
     public get isAnnotationOverlay() {
         return this._props.isAnnotationOverlay;
     }
@@ -312,6 +319,12 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     };
 
     focus = (anchor: Doc, options: FocusViewOptions) => {
+        // incorporate the easefunc here
+        if (options.easeFunc) {
+            this.setPresEaseFunc(options.easeFunc);
+            console.log('Ease func', options.easeFunc);
+        }
+
         if (this._lightboxDoc) return;
         if (anchor === this.Document) {
             // if (options.willZoomCentered && options.zoomScale) {
@@ -319,6 +332,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             //     options.didMove = true;
             // }
         }
+
         if (anchor.type !== DocumentType.CONFIG && !DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]).includes(anchor)) return;
         const xfToCollection = options?.docTransform ?? Transform.Identity();
         const savedState = { panX: NumCast(this.Document[this.panXFieldKey]), panY: NumCast(this.Document[this.panYFieldKey]), scale: options?.willZoomCentered ? this.Document[this.scaleFieldKey] : undefined };
@@ -1038,6 +1052,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 setTimeout(() => (this.layoutDoc.layout_scrollTop = relTop * maxScrollTop), 10);
                 newPanY = minPanY;
             }
+            // updating pan state
             !this.Document._verticalScroll && (this.Document[this.panXFieldKey] = this.isAnnotationOverlay ? newPanX : panX);
             !this.Document._horizontalScroll && (this.Document[this.panYFieldKey] = this.isAnnotationOverlay ? newPanY : panY);
         }
@@ -1870,7 +1885,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 brushedView={this.brushedView}
                 isAnnotationOverlay={this.isAnnotationOverlay}
                 transform={this.PanZoomCenterXf}
-                transition={this._panZoomTransition ? `transform ${this._panZoomTransition}ms` : Cast(this.layoutDoc._viewTransition, 'string', Cast(this.Document._viewTransition, 'string', null))}
+                // Inject timing function here
+                transition={this._panZoomTransition ? `transform ${this._panZoomTransition}ms ${this._presEaseFunc}` : Cast(this.layoutDoc._viewTransition, 'string', Cast(this.Document._viewTransition, 'string', null))}
                 viewDefDivClick={this._props.viewDefDivClick}>
                 {this.props.children ?? null} {/* most likely case of children is document content that's being annoated: eg., an image */}
                 {this.contentViews}
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 7d78d4648..cd3114940 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -38,7 +38,7 @@ import './PresBox.scss';
 import ReactLoading from 'react-loading';
 import { PresEffect, PresEffectDirection, PresMovement, PresStatus } from './PresEnums';
 import ReactTextareaAutosize from 'react-textarea-autosize';
-import { Button, Dropdown, IconButton, Type } from 'browndash-components';
+import { Button, Dropdown, DropdownType, IconButton, Type } from 'browndash-components';
 import { BiMicrophone, BiX } from 'react-icons/bi';
 import { AiOutlineSend } from 'react-icons/ai';
 import { gptSlideProperties, gptTrailSlideCustomization } from '../../../apis/gpt/customization';
@@ -70,6 +70,29 @@ export interface PinProps {
     pinData?: pinDataTypes;
 }
 
+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',
+    },
+];
+
 @observer
 export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     public static LayoutString(fieldKey: string) {
@@ -397,6 +420,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     // Called when the user activates 'next' - to move to the next part of the pres. trail
     @action
     next = () => {
+        console.log('next slide');
         const progressiveReveal = (first: boolean) => {
             const presIndexed = Cast(this.activeItem?.presentation_indexed, 'number', null);
             if (presIndexed !== undefined) {
@@ -854,7 +878,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
      */
     navigateToActiveItem = (afterNav?: () => void) => {
         const activeItem: Doc = this.activeItem;
-        console.log('active item', activeItem);
 
         const targetDoc: Doc = this.targetDoc;
         const finished = () => {
@@ -887,6 +910,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             return;
         }
         const effect = activeItem.presentation_effect && activeItem.presentation_effect !== PresEffect.None ? activeItem.presentation_effect : undefined;
+        // default with effect: 750ms else 500ms
         const presTime = NumCast(activeItem.presentation_transition, effect ? 750 : 500);
         const options: FocusViewOptions = {
             willPan: activeItem.presentation_movement !== PresMovement.None,
@@ -1582,6 +1606,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     };
 
     @undoBatch
+    setEaseFunc = (activeItem: Doc, easeFunc: string) => {
+        activeItem.presEaseFunc = easeFunc;
+        this.selectedArray.forEach(doc => (doc.presEaseFunc = activeItem.presEaseFunc));
+    };
+
+    @undoBatch
     updateEffectDirection = (effect: PresEffectDirection, all?: boolean) => (all ? this.childDocs : this.selectedArray).forEach(doc => (doc.presentation_effectDirection = effect));
 
     @undoBatch
@@ -1990,6 +2020,21 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 <div className="slider-text">Medium</div>
                                 <div className="slider-text">Slow</div>
                             </div>
+                            {/* Easing function */}
+                            <Dropdown
+                                color={StrCast(Doc.UserDoc().userColor)}
+                                formLabel={'Easing Function'}
+                                closeOnSelect={true}
+                                items={easeItems}
+                                selectedVal={this.activeItem.presEaseFunc ? StrCast(this.activeItem.presEaseFunc) : 'ease'}
+                                setSelectedVal={val => {
+                                    if (typeof val === 'string') this.setEaseFunc(this.activeItem, val);
+                                }}
+                                dropdownType={DropdownType.SELECT}
+                                type={Type.TERT}
+                                fillWidth
+                            />
+                            {/* Custom */}
                         </div>
                         <div className="ribbon-box">
                             Effects