diff options
| -rw-r--r-- | src/client/views/nodes/trails/CubicBezierEditor.tsx | 6 | ||||
| -rw-r--r-- | src/client/views/nodes/trails/PresBox.tsx | 4 | ||||
| -rw-r--r-- | src/client/views/nodes/trails/SpringUtils.ts | 4 |
3 files changed, 11 insertions, 3 deletions
diff --git a/src/client/views/nodes/trails/CubicBezierEditor.tsx b/src/client/views/nodes/trails/CubicBezierEditor.tsx index 5f348ddd9..a5e21259a 100644 --- a/src/client/views/nodes/trails/CubicBezierEditor.tsx +++ b/src/client/views/nodes/trails/CubicBezierEditor.tsx @@ -7,7 +7,7 @@ type Props = { }; const ANIMATION_DURATION = 750; -const ANIMATION_TIMING_FUNC = 'cubic-bezier(0.3, .2, .2, 1.4)'; + const CONTAINER_WIDTH = 200; const EDITOR_WIDTH = 100; const OFFSET = (CONTAINER_WIDTH - EDITOR_WIDTH) / 2; @@ -21,8 +21,9 @@ export const TIMING_DEFAULT_MAPPINGS = { }; /** - * Visual editor for a bezier curve with draggable control points + * Visual editor for a bezier curve with draggable control points. * */ + const CubicBezierEditor = ({ setFunc, currPoints, easeFunc }: Props) => { const [animating, setAnimating] = useState(false); const [c1Down, setC1Down] = useState(false); @@ -96,6 +97,7 @@ const CubicBezierEditor = ({ setFunc, currPoints, easeFunc }: Props) => { return () => window.removeEventListener('pointermove', handlePointerMove); }, [c1Down, currPoints]); + // Sets up pointer events for moving the control points useEffect(() => { if (!c2Down) return; window.addEventListener('pointerup', () => { diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx index 2d4a25ff4..632636c85 100644 --- a/src/client/views/nodes/trails/PresBox.tsx +++ b/src/client/views/nodes/trails/PresBox.tsx @@ -1974,7 +1974,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { <div className="presBox-gpt-chat"> <span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}> Customize Slide Properties{' '} - <div className="propertiesView-info" onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/features/trails/#customizing-slide-transitions')}> + <div className="propertiesView-info" onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/features/trails/#transitions')}> <IconButton icon={<FontAwesomeIcon icon="info-circle" />} color={SettingsManager.userColor} /> </div> </span> @@ -2100,6 +2100,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { </div> </div> + {/* Cubic bezier editor */} {this.showBezierEditor && ( <div className="presBox-option-block" style={{ paddingTop: 0 }}> <p className="presBox-submenu-label" style={{ alignSelf: 'flex-start' }}> @@ -2140,6 +2141,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { /> </div> </div> + <div className={`presBox-ribbon ${this._transitionTools && this.layoutDoc.presentation_status === PresStatus.Edit ? 'active' : ''}`} onPointerDown={StopEvent} diff --git a/src/client/views/nodes/trails/SpringUtils.ts b/src/client/views/nodes/trails/SpringUtils.ts index 757f27e18..bfb22c46a 100644 --- a/src/client/views/nodes/trails/SpringUtils.ts +++ b/src/client/views/nodes/trails/SpringUtils.ts @@ -1,5 +1,9 @@ import { PresEffect, PresEffectDirection, PresMovement } from './PresEnums'; +/** + * Utilities like enums and interfaces for spring-based transitions. + */ + export const springPreviewColors = ['rgb(37, 161, 255)', 'rgb(99, 37, 255)', 'rgb(182, 37, 255)', 'rgb(255, 37, 168)']; // the type of slide effect timing (spring-driven) export enum SpringType { |