diff options
Diffstat (limited to 'src/client/views/nodes/trails/PresBox.tsx')
| -rw-r--r-- | src/client/views/nodes/trails/PresBox.tsx | 62 |
1 files changed, 52 insertions, 10 deletions
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"> |