feat: added dropdown for ease function

1 files changed, 47 insertions, 2 deletions

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