state

3 files changed, 92 insertions, 15 deletions

diff --git a/src/client/views/nodes/trails/CubicBezierEditor.tsx b/src/client/views/nodes/trails/CubicBezierEditor.tsx
index 0744709aa..06a246675 100644
--- a/src/client/views/nodes/trails/CubicBezierEditor.tsx
+++ b/src/client/views/nodes/trails/CubicBezierEditor.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 
 type Props = {
     setFunc: (newPoints: { p1: number[]; p2: number[] }) => void;
+    currPoints: { p1: number[]; p2: number[] };
 };
 
 const ANIMATION_DURATION = 750;
@@ -11,9 +12,25 @@ const CONTAINER_WIDTH = 200;
 const EDITOR_WIDTH = 100;
 const OFFSET = (CONTAINER_WIDTH - EDITOR_WIDTH) / 2;
 
-const CubicBezierEditor = ({ setFunc }: Props) => {
+export const TIMING_DEFAULT_MAPPINGS = {
+    ease: 'cubic-bezier(0.25, 0.1, 0.25, 1.0)',
+    linear: 'cubic-bezier(0.0, 0.0, 1.0, 1.0)',
+    'ease-in': 'cubic-bezier(0.42, 0, 1.0, 1.0)',
+    'ease-out': 'cubic-bezier(0, 0, 0.58, 1.0)',
+    'ease-in-out': 'cubic-bezier(0.42, 0, 0.58, 1.0)',
+};
+
+const CubicBezierEditor = ({ setFunc, currPoints }: Props) => {
     const [animating, setAnimating] = useState(false);
-    const [cPoints, setCPoints] = useState({ p1: [0.67, 0.2], p2: [0.37, 0.88] });
+    // Should let parent control state
+    const [cPoints, setCPoints] = useState(
+        currPoints
+            ? currPoints
+            : {
+                  p1: [0.25, 0.1],
+                  p2: [0.25, 1.0],
+              }
+    );
     const [c1Down, setC1Down] = useState(false);
     const [c2Down, setC2Down] = useState(false);
 
@@ -72,7 +89,7 @@ const CubicBezierEditor = ({ setFunc }: Props) => {
             }));
             setFunc({
                 ...cPoints,
-                p1: [roundToHundredth(cPoints.p2[0] + e.movementX / EDITOR_WIDTH), roundToHundredth(cPoints.p2[1] - e.movementY / EDITOR_WIDTH)],
+                p2: [roundToHundredth(cPoints.p2[0] + e.movementX / EDITOR_WIDTH), roundToHundredth(cPoints.p2[1] - e.movementY / EDITOR_WIDTH)],
             });
         };
 
@@ -82,7 +99,17 @@ const CubicBezierEditor = ({ setFunc }: Props) => {
     }, [c2Down, cPoints]);
 
     return (
-        <div>
+        <div
+        // onPointerDown={e => {
+        //     e.stopPropagation;
+        // }}
+        // onPointerMove={e => {
+        //     e.stopPropagation;
+        // }}
+        // onPointerUp={e => {
+        //     e.stopPropagation;
+        // }}
+        >
             <svg className="presBox-bezier-editor" width={`${CONTAINER_WIDTH}`} height={`${CONTAINER_WIDTH}`} xmlns="http://www.w3.org/2000/svg">
                 {/* Outlines */}
                 <line x1={`${0 + OFFSET}`} y1={`${EDITOR_WIDTH + OFFSET}`} x2={`${EDITOR_WIDTH + OFFSET}`} y2={`${0 + OFFSET}`} stroke="#c1c1c1" strokeWidth="1" />
diff --git a/src/client/views/nodes/trails/PresBox.scss b/src/client/views/nodes/trails/PresBox.scss
index 0aceb1b28..7f687c2dc 100644
--- a/src/client/views/nodes/trails/PresBox.scss
+++ b/src/client/views/nodes/trails/PresBox.scss
@@ -1,5 +1,12 @@
 @import '../../global/globalCssVariables.module.scss';
 
+.presBox-gpt-chat {
+    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
 .pres-chat {
     // padding: 8px;
     display: flex;
@@ -40,6 +47,7 @@
     flex-direction: column;
     align-items: center;
     gap: 1rem;
+    padding: 8px;
 }
 
 .presBox-cont {
@@ -703,7 +711,7 @@
         grid-template-rows: max-content auto;
         justify-self: center;
         margin-top: 10px;
-        padding-right: 10px;
+        // padding-right: 10px;
         letter-spacing: normal;
         width: 100%;
         height: max-content;
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index cc05a5c5f..115e124df 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -43,7 +43,7 @@ import { BiMicrophone, BiX } from 'react-icons/bi';
 import { AiOutlineSend } from 'react-icons/ai';
 import { gptSlideProperties, gptTrailSlideCustomization } from '../../../apis/gpt/customization';
 import { DictationManager } from '../../../util/DictationManager';
-import CubicBezierEditor from './CubicBezierEditor';
+import CubicBezierEditor, { TIMING_DEFAULT_MAPPINGS } from './CubicBezierEditor';
 export interface pinDataTypes {
     scrollable?: boolean;
     dataviz?: number[];
@@ -92,10 +92,10 @@ const easeItems = [
         text: 'Linear',
         val: 'linear',
     },
-    // {
-    //     text: 'Custom',
-    //     val: 'custom',
-    // },
+    {
+        text: 'Custom',
+        val: 'custom',
+    },
 ];
 
 @observer
@@ -178,6 +178,42 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     };
 
     @computed
+    get currCPoints() {
+        console.log('getting curr c points');
+        let strPoints = StrCast(this.activeItem.presEaseFunc) ?? 'ease';
+        if (!strPoints.startsWith('cubic')) {
+            switch (StrCast(this.activeItem.presEaseFunc)) {
+                case 'linear':
+                    strPoints = 'cubic-bezier(0.0, 0.0, 1.0, 1.0)';
+                    break;
+                case 'ease':
+                    strPoints = 'cubic-bezier(0.25, 0.1, 0.25, 1.0)';
+                    break;
+                case 'ease-in':
+                    strPoints = 'cubic-bezier(0.42, 0, 1.0, 1.0)';
+                    break;
+                case 'ease-out':
+                    strPoints = 'cubic-bezier(0, 0, 0.58, 1.0)';
+                    break;
+                case 'ease-in-out':
+                    strPoints = 'cubic-bezier(0.42, 0, 0.58, 1.0)';
+                    break;
+            }
+        }
+        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]],
+        };
+    }
+
+    @computed
     get isTreeOrStack() {
         return [CollectionViewType.Tree, CollectionViewType.Stacking].includes(StrCast(this.layoutDoc._type_collection) as any);
     }
@@ -1889,8 +1925,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             return (
                 <>
                     {/* GPT Component */}
-                    <div style={{ padding: '8px' }}>
-                        Customize with GPT
+                    <div className="presBox-gpt-chat">
+                        <p>Customize with GPT</p>
                         <div className="pres-chat">
                             <div className="pres-chatbox-container">
                                 <ReactTextareaAutosize
@@ -2042,9 +2078,15 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                     formLabel={'Easing Function'}
                                     closeOnSelect={true}
                                     items={easeItems}
-                                    selectedVal={this.activeItem.presEaseFunc ? StrCast(this.activeItem.presEaseFunc) : 'ease'}
+                                    selectedVal={this.activeItem.presEaseFunc ? (StrCast(this.activeItem.presEaseFunc).startsWith('cubic') ? 'custom' : StrCast(this.activeItem.presEaseFunc)) : 'ease'}
                                     setSelectedVal={val => {
-                                        if (typeof val === 'string') this.setEaseFunc(this.activeItem, val);
+                                        if (typeof val === 'string') {
+                                            if (val !== 'custom') {
+                                                this.setEaseFunc(this.activeItem, val);
+                                            } else {
+                                                this.setEaseFunc(this.activeItem, TIMING_DEFAULT_MAPPINGS.ease);
+                                            }
+                                        }
                                     }}
                                     dropdownType={DropdownType.SELECT}
                                     type={Type.TERT}
@@ -2052,7 +2094,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 />
                                 {/* Custom */}
                                 <p className="presBox-submenu-label">Custom Timing Function</p>
-                                <CubicBezierEditor setFunc={this.setBezierControlPoints} />
+                                <CubicBezierEditor setFunc={this.setBezierControlPoints} currPoints={this.currCPoints} />
                             </div>
                         </div>
                         <div className="ribbon-box">