From d9570eb985afc20a440277c1debea89707ab52a1 Mon Sep 17 00:00:00 2001 From: Sophie Zhang Date: Thu, 7 Mar 2024 12:11:25 -0500 Subject: state --- .../views/nodes/trails/CubicBezierEditor.tsx | 35 ++++++++++-- src/client/views/nodes/trails/PresBox.scss | 10 +++- src/client/views/nodes/trails/PresBox.tsx | 62 ++++++++++++++++++---- 3 files changed, 92 insertions(+), 15 deletions(-) (limited to 'src') 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 ( -
+
{ + // e.stopPropagation; + // }} + // onPointerMove={e => { + // e.stopPropagation; + // }} + // onPointerUp={e => { + // e.stopPropagation; + // }} + > {/* Outlines */} 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 @@ -177,6 +177,42 @@ export class PresBox extends ViewBoxBaseComponent() { this.setEaseFunc(this.activeItem, `cubic-bezier(${newPoints.p1[0]}, ${newPoints.p1[1]}, ${newPoints.p2[0]}, ${newPoints.p2[1]})`); }; + @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() { return ( <> {/* GPT Component */} -
- Customize with GPT +
+

Customize with GPT

() { 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() { /> {/* Custom */}

Custom Timing Function

- +
-- cgit v1.2.3-70-g09d2