From b42ad09912393ec1ae5799100bdf7a5786055a55 Mon Sep 17 00:00:00 2001 From: Sophie Zhang Date: Thu, 2 May 2024 11:44:31 -0400 Subject: focus --- src/client/views/nodes/DocumentView.tsx | 12 +- .../views/nodes/trails/CubicBezierEditor.tsx | 21 +- src/client/views/nodes/trails/PresBox.tsx | 356 +++++++++++---------- src/client/views/nodes/trails/SlideEffect.tsx | 1 + src/client/views/nodes/trails/SpringUtils.ts | 1 + 5 files changed, 202 insertions(+), 189 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 8c9318743..b372c1927 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1031,12 +1031,12 @@ export class DocumentViewInternal extends DocComponent{renderDoc} - case PresEffect.Fade: return {renderDoc} - case PresEffect.Flip: return {renderDoc} - case PresEffect.Rotate: return {renderDoc} - case PresEffect.Bounce: return {renderDoc} - case PresEffect.Roll: return {renderDoc} + case PresEffect.Zoom: return {renderDoc} + case PresEffect.Fade: return {renderDoc} + case PresEffect.Flip: return {renderDoc} + case PresEffect.Rotate: return {renderDoc} + case PresEffect.Bounce: return {renderDoc} + case PresEffect.Roll: return {renderDoc} // keep as preset, doesn't really make sense with spring config case PresEffect.Lightspeed: return {renderDoc}; } diff --git a/src/client/views/nodes/trails/CubicBezierEditor.tsx b/src/client/views/nodes/trails/CubicBezierEditor.tsx index f1a0a16ec..db3eb2e26 100644 --- a/src/client/views/nodes/trails/CubicBezierEditor.tsx +++ b/src/client/views/nodes/trails/CubicBezierEditor.tsx @@ -41,7 +41,6 @@ const CubicBezierEditor = ({ setFunc, currPoints, easeFunc }: Props) => { }; const convertToPoints = (func: string) => { - console.log('getting curr c points'); let strPoints = func ? func : 'ease'; if (!strPoints.startsWith('cubic')) { switch (func) { @@ -64,13 +63,11 @@ const CubicBezierEditor = ({ setFunc, currPoints, easeFunc }: Props) => { strPoints = 'cubic-bezier(0.25, 0.1, 0.25, 1.0)'; } } - 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]], @@ -145,15 +142,15 @@ const CubicBezierEditor = ({ setFunc, currPoints, easeFunc }: Props) => { return (
{ - // e.stopPropagation; - // }} - // onPointerMove={e => { - // e.stopPropagation; - // }} - // onPointerUp={e => { - // e.stopPropagation; - // }} + // onPointerDown={e => { + // e.stopPropagation; + // }} + onPointerMove={e => { + e.stopPropagation; + }} + // onPointerUp={e => { + // e.stopPropagation; + // }} > {/* Outlines */} diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx index d03e2c41e..964b793bd 100644 --- a/src/client/views/nodes/trails/PresBox.tsx +++ b/src/client/views/nodes/trails/PresBox.tsx @@ -40,7 +40,7 @@ import ReactLoading from 'react-loading'; import { PresEffect, PresEffectDirection, PresMovement, PresStatus } from './PresEnums'; import ReactTextareaAutosize from 'react-textarea-autosize'; import { Button, Dropdown, DropdownType, IconButton, Toggle, ToggleType, Type } from 'browndash-components'; -import { BiMicrophone, BiX } from 'react-icons/bi'; +import { BiMicrophone } from 'react-icons/bi'; import { AiOutlineSend } from 'react-icons/ai'; import { getSlideTransitionSuggestions, gptSlideProperties, gptTrailSlideCustomization } from '../../../apis/gpt/customization'; import { DictationManager } from '../../../util/DictationManager'; @@ -48,7 +48,7 @@ import CubicBezierEditor, { TIMING_DEFAULT_MAPPINGS } from './CubicBezierEditor' import Slider from '@mui/material/Slider'; import { FaArrowDown, FaArrowLeft, FaArrowRight, FaArrowUp, FaCompressArrowsAlt } from 'react-icons/fa'; import SpringAnimationPreview from './SlideEffectPreview'; -import { effectTimings, SpringType, springMappings, effectItems, easeItems, movementItems, SpringSettings, presEffectDefaultTimings, AnimationSettings } from './SpringUtils'; +import { effectTimings, SpringType, springMappings, effectItems, easeItems, movementItems, SpringSettings, presEffectDefaultTimings, AnimationSettings, springPreviewColors } from './SpringUtils'; import SlideEffect from './SlideEffect'; export interface pinDataTypes { @@ -129,30 +129,31 @@ export class PresBox extends ViewBoxBaseComponent() { @observable isLoading: boolean = false; @observable generatedAnimations: AnimationSettings[] = [ - // { - // effect: PresEffect.Bounce, - // stiffness: 400, - // damping: 15, - // mass: 1, - // }, - // { - // effect: PresEffect.Fade, - // stiffness: 100, - // damping: 15, - // mass: 1, - // }, - // { - // effect: PresEffect.Flip, - // stiffness: 100, - // damping: 15, - // mass: 1, - // }, - // { - // effect: PresEffect.Roll, - // stiffness: 100, - // damping: 15, - // mass: 1, - // }, + // default presets + { + effect: PresEffect.Bounce, + stiffness: 400, + damping: 15, + mass: 1, + }, + { + effect: PresEffect.Fade, + stiffness: 100, + damping: 15, + mass: 1, + }, + { + effect: PresEffect.Flip, + stiffness: 100, + damping: 15, + mass: 1, + }, + { + effect: PresEffect.Roll, + stiffness: 100, + damping: 15, + mass: 1, + }, ]; @action @@ -2080,6 +2081,53 @@ export class PresBox extends ViewBoxBaseComponent() { />
+
+
+
+ (this._inputref2 = r)} + minRows={1} + placeholder="Get transition suggestions..." + className="pres-chatbox" + autoFocus={true} + value={this.animationChat} + onChange={e => { + this.setAnimationChat(e.target.value); + }} + onKeyDown={e => { + this.stopDictation(true); + e.stopPropagation(); + }} + /> + {/* (this._inputref2 = r)} + minRows={1} + placeholder="Get animation suggestions..." + className="pres-chatbox" + autoFocus={true} + value={this.animationChat} + onChange={e => { + this.setAnimationChat(e.target.value); + }} + onKeyDown={e => { + this.stopDictation(true); + e.stopPropagation(); + }} + /> */} +
+
+
() { this._openEffectDropdown = false; this._openBulletEffectDropdown = false; })}> -
- Movement - { - this.updateMovement(val as PresMovement); - }} - dropdownType={DropdownType.SELECT} - type={Type.TERT} - /> -
-
Zoom (% screen filled)
-
- this.updateZoom(e.target.value)} />% -
- {/*
-
this.updateZoom(String(zoom), 0.1)}> - -
-
this.updateZoom(String(zoom), -0.1)}> - -
-
*/} -
- {PresBox.inputter('0', '1', '100', zoom, activeItem.presentation_movement === PresMovement.Zoom, this.updateZoom)} -
-
Transition Time
-
- e.stopPropagation()} onChange={action(e => this.updateTransitionTime(e.target.value))} /> s -
- {/*
-
this.updateTransitionTime(String(transitionSpeed), 1000)}> - -
-
this.updateTransitionTime(String(transitionSpeed), -1000)}> - -
-
*/} -
- {PresBox.inputter('0.1', '0.1', '10', transitionSpeed, true, this.updateTransitionTime)} -
-
Fast
-
Medium
-
Slow
-
- {/* Easing function */} -
- { - if (typeof val === 'string') { - if (val !== 'custom') { - this.setBezierEditorVisibility(true); - this.setEaseFunc(this.activeItem, val); - } else { - this.setEaseFunc(this.activeItem, TIMING_DEFAULT_MAPPINGS.ease); - } - } - }} - dropdownType={DropdownType.SELECT} - type={Type.TERT} - /> - {/* Custom */} -
{ - e.stopPropagation(); - this.setBezierEditorVisibility(!this.showBezierEditor); - }}> - {`${this.showBezierEditor ? 'Hide' : 'Show'} Timing Editor`} - -
- {this.showBezierEditor && ( - <> -

- Custom Timing Function -

- - - )} -
-
Effects - (activeItem.presPlayAudio = !BoolCast(activeItem.presPlayAudio))} - color={SettingsManager.userColor} - /> - (activeItem.presentation_zoomText = !BoolCast(activeItem.presentation_zoomText))} - color={SettingsManager.userColor} - /> {/* Effect dropdown */} () { {/* Effect generations */}
{/* Chat for idea generation */} -
-

Customize with GPT

-
-
{ - StopEvent(e); - }}> - (this._inputref2 = r)} - minRows={1} - placeholder="Get animation suggestions..." - className="pres-chatbox" - autoFocus={true} - value={this.animationChat} - onChange={e => { - this.setAnimationChat(e.target.value); - }} - onKeyDown={e => { - this.stopDictation(true); - e.stopPropagation(); - }} - /> -
-
-
+ {/* Preview Animations */}
{this.generatedAnimations.map((elem, i) => ( @@ -2267,8 +2174,8 @@ export class PresBox extends ViewBoxBaseComponent() { mass: elem.mass, }); }}> - -
+ +
))} @@ -2418,8 +2325,115 @@ export class PresBox extends ViewBoxBaseComponent() { )} )} - {/* Effect spring settings */}
+ {/* Movement */} +
+ Movement + { + this.updateMovement(val as PresMovement); + }} + dropdownType={DropdownType.SELECT} + type={Type.TERT} + /> +
+
Zoom (% screen filled)
+
+ this.updateZoom(e.target.value)} />% +
+ {/*
+
this.updateZoom(String(zoom), 0.1)}> + +
+
this.updateZoom(String(zoom), -0.1)}> + +
+
*/} +
+ {PresBox.inputter('0', '1', '100', zoom, activeItem.presentation_movement === PresMovement.Zoom, this.updateZoom)} +
+
Transition Time
+
+ e.stopPropagation()} onChange={action(e => this.updateTransitionTime(e.target.value))} /> s +
+ {/*
+
this.updateTransitionTime(String(transitionSpeed), 1000)}> + +
+
this.updateTransitionTime(String(transitionSpeed), -1000)}> + +
+
*/} +
+ {PresBox.inputter('0.1', '0.1', '10', transitionSpeed, true, this.updateTransitionTime)} +
+
Fast
+
Medium
+
Slow
+
+ {/* Easing function */} +
+ { + if (typeof val === 'string') { + if (val !== 'custom') { + this.setBezierEditorVisibility(true); + this.setEaseFunc(this.activeItem, val); + } else { + this.setEaseFunc(this.activeItem, TIMING_DEFAULT_MAPPINGS.ease); + } + } + }} + dropdownType={DropdownType.SELECT} + type={Type.TERT} + /> + {/* Custom */} +
{ + e.stopPropagation(); + this.setBezierEditorVisibility(!this.showBezierEditor); + }}> + {`${this.showBezierEditor ? 'Hide' : 'Show'} Timing Editor`} + +
+ {this.showBezierEditor && ( + <> +

+ Custom Timing Function +

+ + + )} +
+
+ + {/* Toggles */} + (activeItem.presPlayAudio = !BoolCast(activeItem.presPlayAudio))} + color={SettingsManager.userColor} + /> + (activeItem.presentation_zoomText = !BoolCast(activeItem.presentation_zoomText))} + color={SettingsManager.userColor} + />