From 0201c8b4d52932760d87686424cdc0a4d39e60bd Mon Sep 17 00:00:00 2001 From: Sophie Zhang Date: Tue, 14 May 2024 13:37:58 -0400 Subject: cleaning, bug fixing --- src/client/views/PropertiesView.tsx | 3 + .../views/nodes/trails/CubicBezierEditor.tsx | 95 ++--- src/client/views/nodes/trails/PresBox.scss | 10 +- src/client/views/nodes/trails/PresBox.tsx | 466 ++++++++++----------- src/client/views/nodes/trails/PresElementBox.tsx | 3 +- src/client/views/nodes/trails/SlideEffect.scss | 5 - src/client/views/nodes/trails/SlideEffect.tsx | 5 +- .../views/nodes/trails/SlideEffectPreview.tsx | 94 ----- 8 files changed, 273 insertions(+), 408 deletions(-) delete mode 100644 src/client/views/nodes/trails/SlideEffectPreview.tsx (limited to 'src') diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 15974b9a7..a95477749 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -1675,6 +1675,9 @@ export class PropertiesView extends ObservableReactComponent
Presentation +
window.open('https://brown-dash.github.io/Dash-Documentation/features/trails/')}> + } color={SettingsManager.userColor} /> +
{this.editableTitle} diff --git a/src/client/views/nodes/trails/CubicBezierEditor.tsx b/src/client/views/nodes/trails/CubicBezierEditor.tsx index e12fca20c..aba777e55 100644 --- a/src/client/views/nodes/trails/CubicBezierEditor.tsx +++ b/src/client/views/nodes/trails/CubicBezierEditor.tsx @@ -1,5 +1,4 @@ import React, { useEffect, useState } from 'react'; -import { StrCast } from '../../../../fields/Types'; type Props = { setFunc: (newPoints: { p1: number[]; p2: number[] }) => void; @@ -23,15 +22,14 @@ export const TIMING_DEFAULT_MAPPINGS = { const CubicBezierEditor = ({ setFunc, currPoints, easeFunc }: Props) => { const [animating, setAnimating] = useState(false); - // Should let parent control state - const [cPoints, setCPoints] = useState( - currPoints - ? currPoints - : { - p1: [0.25, 0.1], - p2: [0.25, 1.0], - } - ); + // 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); @@ -73,11 +71,11 @@ const CubicBezierEditor = ({ setFunc, currPoints, easeFunc }: Props) => { }; }; - useEffect(() => { - if (!easeFunc.startsWith('cubic')) { - setCPoints(convertToPoints(easeFunc)); - } - }, [easeFunc]); + // useEffect(() => { + // if (!easeFunc.startsWith('cubic')) { + // setFunc(convertToPoints(easeFunc)); + // } + // }, [easeFunc]); useEffect(() => { if (animating) { @@ -93,25 +91,25 @@ const CubicBezierEditor = ({ setFunc, currPoints, easeFunc }: Props) => { setC1Down(false); }); const handlePointerMove = (e: PointerEvent) => { - const newX = cPoints.p1[0] + e.movementX / EDITOR_WIDTH; + const newX = currPoints.p1[0] + e.movementX / EDITOR_WIDTH; if (newX < 0 || newX > 1) { return; } - setCPoints(prev => ({ - ...prev, - p1: [roundToHundredth(prev.p1[0] + e.movementX / EDITOR_WIDTH), roundToHundredth(prev.p1[1] - e.movementY / EDITOR_WIDTH)], - })); + // setCPoints(prev => ({ + // ...prev, + // p1: [roundToHundredth(prev.p1[0] + e.movementX / EDITOR_WIDTH), roundToHundredth(prev.p1[1] - e.movementY / EDITOR_WIDTH)], + // })); setFunc({ - ...cPoints, - p1: [roundToHundredth(cPoints.p1[0] + e.movementX / EDITOR_WIDTH), roundToHundredth(cPoints.p1[1] - e.movementY / EDITOR_WIDTH)], + ...currPoints, + p1: [roundToHundredth(currPoints.p1[0] + e.movementX / EDITOR_WIDTH), roundToHundredth(currPoints.p1[1] - e.movementY / EDITOR_WIDTH)], }); }; window.addEventListener('pointermove', handlePointerMove); return () => window.removeEventListener('pointermove', handlePointerMove); - }, [c1Down, cPoints]); + }, [c1Down, currPoints]); useEffect(() => { if (!c2Down) return; @@ -119,38 +117,31 @@ const CubicBezierEditor = ({ setFunc, currPoints, easeFunc }: Props) => { setC2Down(false); }); const handlePointerMove = (e: PointerEvent) => { - const newX = cPoints.p2[0] + e.movementX / EDITOR_WIDTH; + const newX = currPoints.p2[0] + e.movementX / EDITOR_WIDTH; if (newX < 0 || newX > 1) { return; } - setCPoints(prev => ({ - ...prev, - p2: [roundToHundredth(prev.p2[0] + e.movementX / EDITOR_WIDTH), roundToHundredth(prev.p2[1] - e.movementY / EDITOR_WIDTH)], - })); + // setCPoints(prev => ({ + // ...prev, + // p2: [roundToHundredth(prev.p2[0] + e.movementX / EDITOR_WIDTH), roundToHundredth(prev.p2[1] - e.movementY / EDITOR_WIDTH)], + // })); setFunc({ - ...cPoints, - p2: [roundToHundredth(cPoints.p2[0] + e.movementX / EDITOR_WIDTH), roundToHundredth(cPoints.p2[1] - e.movementY / EDITOR_WIDTH)], + ...currPoints, + p2: [roundToHundredth(currPoints.p2[0] + e.movementX / EDITOR_WIDTH), roundToHundredth(currPoints.p2[1] - e.movementY / EDITOR_WIDTH)], }); }; window.addEventListener('pointermove', handlePointerMove); return () => window.removeEventListener('pointermove', handlePointerMove); - }, [c2Down, cPoints]); + }, [c2Down, currPoints]); return (
{ - // e.stopPropagation; - // }} onPointerMove={e => { e.stopPropagation; - }} - // onPointerUp={e => { - // e.stopPropagation; - // }} - > + }}> {/* Outlines */} @@ -158,9 +149,9 @@ const CubicBezierEditor = ({ setFunc, currPoints, easeFunc }: Props) => { {/* Editor */} @@ -174,15 +165,15 @@ const CubicBezierEditor = ({ setFunc, currPoints, easeFunc }: Props) => { }} x1={`${0 + OFFSET}`} y1={`${EDITOR_WIDTH + OFFSET}`} - x2={`${cPoints.p1[0] * EDITOR_WIDTH + OFFSET}`} - y2={`${EDITOR_WIDTH - cPoints.p1[1] * EDITOR_WIDTH + OFFSET}`} + x2={`${currPoints.p1[0] * EDITOR_WIDTH + OFFSET}`} + y2={`${EDITOR_WIDTH - currPoints.p1[1] * EDITOR_WIDTH + OFFSET}`} stroke="#00000000" strokeWidth="5" /> - + { @@ -204,15 +195,15 @@ const CubicBezierEditor = ({ setFunc, currPoints, easeFunc }: Props) => { }} x1={`${EDITOR_WIDTH + OFFSET}`} y1={`${0 + OFFSET}`} - x2={`${cPoints.p2[0] * EDITOR_WIDTH + OFFSET}`} - y2={`${EDITOR_WIDTH - cPoints.p2[1] * EDITOR_WIDTH + OFFSET}`} + x2={`${currPoints.p2[0] * EDITOR_WIDTH + OFFSET}`} + y2={`${EDITOR_WIDTH - currPoints.p2[1] * EDITOR_WIDTH + OFFSET}`} stroke="#00000000" strokeWidth="5" /> - + { diff --git a/src/client/views/nodes/trails/PresBox.scss b/src/client/views/nodes/trails/PresBox.scss index 58c9b0b42..60d4e580d 100644 --- a/src/client/views/nodes/trails/PresBox.scss +++ b/src/client/views/nodes/trails/PresBox.scss @@ -1,7 +1,7 @@ @import '../../global/globalCssVariables.module.scss'; .presBox-gpt-chat { - padding: 8px; + padding: 16px; display: flex; flex-direction: column; gap: 1rem; @@ -53,13 +53,11 @@ .presBox-effect-container { cursor: pointer; overflow: hidden; - // position: relative; width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; - /* background-color: #1f2028; */ border: 1px solid rgb(118, 118, 118); border-radius: 8px; } @@ -67,13 +65,9 @@ .presBox-effect-demo-box { width: 40px; height: 40px; - // position: absolute; - // top: 20px; - // left: 20px; border-radius: 4px; // default bg background-color: rgb(37, 161, 255); - // transform-origin: center; } // Bezier editor @@ -95,7 +89,7 @@ display: flex; flex-direction: column; gap: 1rem; - // padding: 8px; + padding: 16px; } .presBox-option-center { diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx index 4890c115b..02233d241 100644 --- a/src/client/views/nodes/trails/PresBox.tsx +++ b/src/client/views/nodes/trails/PresBox.tsx @@ -47,9 +47,9 @@ import { DictationManager } from '../../../util/DictationManager'; 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, springPreviewColors } from './SpringUtils'; import SlideEffect from './SlideEffect'; +import { IoMdInformationCircleOutline } from 'react-icons/io'; export interface pinDataTypes { scrollable?: boolean; @@ -387,24 +387,6 @@ export class PresBox extends ViewBoxBaseComponent() { setDictationContent = (value: string) => { console.log('Dictation value', value); this.setChatInput(value); - // // Get the current cursor position - // if (!this._inputref) return; - // const cursorPosition = this._inputref.selectionStart; - // const currentValue = this.chatInput; - - // // split before and after - // const textBeforeCursor = currentValue.slice(0, cursorPosition); - // const textAfterCursor = currentValue.slice(cursorPosition); - - // // insertion - // const updatedText = textBeforeCursor + value + textAfterCursor; - - // // Update the textarea value - // this.setChatInput(updatedText); - - // // set new cursor pos - // const newCursorPosition = cursorPosition + value.length; - // this._inputref.setSelectionRange(newCursorPosition, newCursorPosition); }; @action @@ -415,7 +397,6 @@ export class PresBox extends ViewBoxBaseComponent() { try { const res = await getSlideTransitionSuggestions(this.animationChat); - console.log('GPT Result:', res); if (typeof res === 'string') { const resObj = JSON.parse(res); console.log('Parsed GPT Result ', resObj); @@ -448,11 +429,10 @@ export class PresBox extends ViewBoxBaseComponent() { } } } - console.log('current slide props', currSlideProperties); + console.log('current slide props ', currSlideProperties); try { const res = await gptTrailSlideCustomization(input, currSlideProperties); - console.log('GPT Result:', res); if (typeof res === 'string') { const resObj = JSON.parse(res); console.log('Parsed GPT Result ', resObj); @@ -1798,46 +1778,51 @@ export class PresBox extends ViewBoxBaseComponent() { let duration = activeItem.presentation_duration ? NumCast(activeItem.presentation_duration) / 1000 : 0; if (activeItem.type === DocumentType.AUDIO) duration = NumCast(activeItem.duration); return ( -
-
- Hide before presented
}> -
this.updateHideBefore(activeItem)}> - Hide before -
- - {'Hide while presented'}
}> -
this.updateHide(activeItem)}> - Hide -
- - {'Hide after presented'}
}> -
this.updateHideAfter(activeItem)}> - Hide after -
- +
+
+
+ Hide before presented
}> +
this.updateHideBefore(activeItem)}> + Hide before +
+ + {'Hide while presented'}
}> +
this.updateHide(activeItem)}> + Hide +
+ + {'Hide after presented'}
}> +
this.updateHideAfter(activeItem)}> + Hide after +
+ - {'Open in lightbox view'}
}> -
this.updateOpenDoc(activeItem)}> - Lightbox -
- - {/* Transition movement style}> + {'Open in lightbox view'}}> +
this.updateOpenDoc(activeItem)}> + Lightbox +
+ + {/* Transition movement style}>
() { {`${StrCast(activeItem.presEaseFunc, 'ease')}`}
*/} - - {[DocumentType.AUDIO, DocumentType.VID].includes(targetType as any as DocumentType) ? null : ( - <> -
-
Slide Duration
-
- e.stopPropagation()} onChange={e => this.updateDurationTime(e.target.value)} /> s -
- {/*
+
+ {[DocumentType.AUDIO, DocumentType.VID].includes(targetType as any as DocumentType) ? null : ( + <> +
+
Slide Duration
+
+ e.stopPropagation()} onChange={e => this.updateDurationTime(e.target.value)} /> s +
+ {/*
this.updateDurationTime(String(duration), 1000)}>
@@ -1861,15 +1846,16 @@ export class PresBox extends ViewBoxBaseComponent() {
*/} -
- {PresBox.inputter('0.1', '0.1', '20', duration, targetType !== DocumentType.AUDIO, this.updateDurationTime)} -
-
Short
-
Medium
-
Long
-
- - )} + + {PresBox.inputter('0.1', '0.1', '20', duration, targetType !== DocumentType.AUDIO, this.updateDurationTime)} +
+
Short
+
Medium
+
Long
+
+ + )} + ); } @@ -1887,74 +1873,76 @@ export class PresBox extends ViewBoxBaseComponent() { ); return ( -
-
-
Progressivize Collection
- { - activeItem.presentation_indexed = activeItem.presentation_indexed === undefined ? 0 : undefined; - activeItem.presentation_hideBefore = activeItem.presentation_indexed !== undefined; - const tagDoc = PresBox.targetRenderedDoc(this.activeItem); - const type = DocCast(tagDoc?.annotationOn)?.type ?? tagDoc.type; - activeItem.presentation_indexedStart = type === DocumentType.COL ? 1 : 0; - // a progressivized slide doesn't have sub-slides, but rather iterates over the data list of the target being progressivized. - // to avoid creating a new slide to correspond to each of the target's data list, we create a computedField to refernce the target's data list. - let dataField = Doc.LayoutFieldKey(tagDoc); - if (Cast(tagDoc[dataField], listSpec(Doc), null)?.filter(d => d instanceof Doc) === undefined) dataField = dataField + '_annotations'; - - if (DocCast(activeItem.presentation_targetDoc).annotationOn) activeItem.data = ComputedField.MakeFunction(`this.presentation_targetDoc.annotationOn?.["${dataField}"]`); - else activeItem.data = ComputedField.MakeFunction(`this.presentation_targetDoc?.["${dataField}"]`); - }} - checked={Cast(activeItem.presentation_indexed, 'number', null) !== undefined ? true : false} - /> -
-
-
Progressivize First Bullet
- (activeItem.presentation_indexedStart = activeItem.presentation_indexedStart ? 0 : 1)} - checked={!NumCast(activeItem.presentation_indexedStart)} - /> -
-
-
Expand Current Bullet
- (activeItem.presBulletExpand = !activeItem.presBulletExpand)} - checked={BoolCast(activeItem.presBulletExpand)} - /> -
+
+
+
+
Progressivize Collection
+ { + activeItem.presentation_indexed = activeItem.presentation_indexed === undefined ? 0 : undefined; + activeItem.presentation_hideBefore = activeItem.presentation_indexed !== undefined; + const tagDoc = PresBox.targetRenderedDoc(this.activeItem); + const type = DocCast(tagDoc?.annotationOn)?.type ?? tagDoc.type; + activeItem.presentation_indexedStart = type === DocumentType.COL ? 1 : 0; + // a progressivized slide doesn't have sub-slides, but rather iterates over the data list of the target being progressivized. + // to avoid creating a new slide to correspond to each of the target's data list, we create a computedField to refernce the target's data list. + let dataField = Doc.LayoutFieldKey(tagDoc); + if (Cast(tagDoc[dataField], listSpec(Doc), null)?.filter(d => d instanceof Doc) === undefined) dataField = dataField + '_annotations'; + + if (DocCast(activeItem.presentation_targetDoc).annotationOn) activeItem.data = ComputedField.MakeFunction(`this.presentation_targetDoc.annotationOn?.["${dataField}"]`); + else activeItem.data = ComputedField.MakeFunction(`this.presentation_targetDoc?.["${dataField}"]`); + }} + checked={Cast(activeItem.presentation_indexed, 'number', null) !== undefined ? true : false} + /> +
+
+
Progressivize First Bullet
+ (activeItem.presentation_indexedStart = activeItem.presentation_indexedStart ? 0 : 1)} + checked={!NumCast(activeItem.presentation_indexedStart)} + /> +
+
+
Expand Current Bullet
+ (activeItem.presBulletExpand = !activeItem.presBulletExpand)} + checked={BoolCast(activeItem.presBulletExpand)} + /> +
-
- Bullet Effect -
{ - e.stopPropagation(); - this._openBulletEffectDropdown = !this._openBulletEffectDropdown; - })} - style={{ - color: SettingsManager.userColor, - background: SettingsManager.userVariantColor, - borderBottomLeftRadius: this._openBulletEffectDropdown ? 0 : 5, - border: this._openBulletEffectDropdown ? `solid 2px ${SettingsManager.userVariantColor}` : `solid 1px ${SettingsManager.userColor}`, - }}> - {effect?.toString()} - +
+ Bullet Effect
e.stopPropagation()}> - {Object.values(PresEffect) - .filter(v => isNaN(Number(v))) - .map(effect => bulletEffect(effect))} + className="presBox-dropdown" + onClick={action(e => { + e.stopPropagation(); + this._openBulletEffectDropdown = !this._openBulletEffectDropdown; + })} + style={{ + color: SettingsManager.userColor, + background: SettingsManager.userVariantColor, + borderBottomLeftRadius: this._openBulletEffectDropdown ? 0 : 5, + border: this._openBulletEffectDropdown ? `solid 2px ${SettingsManager.userVariantColor}` : `solid 1px ${SettingsManager.userColor}`, + }}> + {effect?.toString()} + +
e.stopPropagation()}> + {Object.values(PresEffect) + .filter(v => isNaN(Number(v))) + .map(effect => bulletEffect(effect))} +
@@ -2016,22 +2004,27 @@ export class PresBox extends ViewBoxBaseComponent() { if (activeItem && this.targetDoc) { const transitionSpeed = activeItem.presentation_transition ? NumCast(activeItem.presentation_transition) / 1000 : 0.5; const zoom = NumCast(activeItem.config_zoom, 1) * 100; - const effect = activeItem.presentation_effect ? activeItem.presentation_effect : PresEffect.None; + const effect = StrCast(activeItem.presentation_effect) ? StrCast(activeItem.presentation_effect) : PresEffect.None; + const direction = StrCast(activeItem.presentation_effectDirection); return ( <> - {/* GPT Component */} - {/* This chatbox is for customizing the properties of trails, like transition time, movement type (zoom, pan) */} + {/* This chatbox is for customizing the properties of trails, like transition time, movement type (zoom, pan) using GPT*/}
-

Customize with GPT

+ + Customize Slide Properties{' '} +
window.open('https://brown-dash.github.io/Dash-Documentation/features/trails/')}> + } color={SettingsManager.userColor} /> +
+
(this._inputref = r)} - minRows={1} - placeholder="Customize..." + // ref={r => (this._inputref = r)} + // minRows={1} + placeholder="Describe how you would like to modify the slide properties." className="pres-chatbox" - autoFocus={true} + // autoFocus={true} value={this.chatInput} onChange={e => { this.setChatInput(e.target.value); @@ -2079,7 +2072,10 @@ export class PresBox extends ViewBoxBaseComponent() { this._openEffectDropdown = false; this._openBulletEffectDropdown = false; })}> -
+
Movement () {
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)}
@@ -2113,14 +2101,6 @@ export class PresBox extends ViewBoxBaseComponent() {
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)}
@@ -2129,61 +2109,59 @@ export class PresBox extends ViewBoxBaseComponent() {
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); - } + { + 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`} - -
+ } + }} + dropdownType={DropdownType.SELECT} + type={Type.TERT} + /> + {/* Custom */} +
{ + e.stopPropagation(); + this.setBezierEditorVisibility(!this.showBezierEditor); + }}> + {`${this.showBezierEditor ? 'Hide' : 'Show'} Timing Editor`} +
-
- {this.showBezierEditor && ( - <> -

- Custom Timing Function -

- - - )} -
+ + {this.showBezierEditor && ( +
+

+ Custom Timing Function +

+ +
+ )} + {/* This chatbox is for getting slide effect transition suggestions from gpt and visualizing them */}
Effects
(this._inputref2 = r)} - minRows={1} - placeholder="Get effect suggestions..." + // ref={r => (this._inputref2 = r)} + // minRows={1} + placeholder="Customize prompt for effect suggestions. Leave blank for random results." className="pres-chatbox" - autoFocus={true} + // autoFocus={true} value={this.animationChat} onChange={e => { this.setAnimationChat(e.target.value); @@ -2217,10 +2195,9 @@ export class PresBox extends ViewBoxBaseComponent() { this._openEffectDropdown = false; this._openBulletEffectDropdown = false; })}> -
+
+ Click on a box to apply the effect.
- {/* Chat for idea generation */} - {/* Preview Animations */}
{this.generatedAnimations.map((elem, i) => ( @@ -2269,13 +2246,6 @@ export class PresBox extends ViewBoxBaseComponent() {
- {/* } - onClick={() => this.updateEffectDirection(PresEffectDirection.Center)} - /> */} () { valueLabelDisplay="auto" />
- -
- + Preview Effect +
+
+ +
+ +
+
)} @@ -2405,26 +2380,23 @@ export class PresBox extends ViewBoxBaseComponent() {
{/* Toggles */} - (activeItem.presPlayAudio = !BoolCast(activeItem.presPlayAudio))} - color={SettingsManager.userColor} - /> - (activeItem.presentation_zoomText = !BoolCast(activeItem.presentation_zoomText))} - color={SettingsManager.userColor} - /> -
); diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx index 268b1c803..1c6b38aeb 100644 --- a/src/client/views/nodes/trails/PresElementBox.tsx +++ b/src/client/views/nodes/trails/PresElementBox.tsx @@ -513,11 +513,12 @@ export class PresElementBox extends ViewBoxBaseComponent() { ); items.push( - Edit
}> + Customize Slide
}>
{ this.presBoxView?.regularSelect(this.slideDoc, this._itemRef.current!, this._dragRef.current!, true, false); + PresBox.Instance.navigateToActiveItem(); PresBox.Instance.openProperties(); PresBox.Instance.slideToModify = this.Document; }}> diff --git a/src/client/views/nodes/trails/SlideEffect.scss b/src/client/views/nodes/trails/SlideEffect.scss index cadda0ccc..cc851354e 100644 --- a/src/client/views/nodes/trails/SlideEffect.scss +++ b/src/client/views/nodes/trails/SlideEffect.scss @@ -7,10 +7,6 @@ .flip-side { position: absolute; - // max-width: 500px; - // max-height: 500px; - // width: 350px; - // height: 200px; will-change: transform, opacity; backface-visibility: hidden; } @@ -19,6 +15,5 @@ } .flip-back { - // Get the background color of node instead // background-color: rgb(223, 223, 223); } diff --git a/src/client/views/nodes/trails/SlideEffect.tsx b/src/client/views/nodes/trails/SlideEffect.tsx index e04f53f06..db2ac1ea0 100644 --- a/src/client/views/nodes/trails/SlideEffect.tsx +++ b/src/client/views/nodes/trails/SlideEffect.tsx @@ -27,7 +27,10 @@ const infiniteOptions = { delay: 500, }; -// TODO: add visibility detector when the slide comes into view +/** + * This component wraps around the doc to create an effect animation, and also wraps the preview animations + * for the effects as well. + */ export default function SpringAnimation({ doc, dir, friction, tension, mass, presEffect, children, infinite }: Props) { const [springs, api] = useSpring( () => ({ diff --git a/src/client/views/nodes/trails/SlideEffectPreview.tsx b/src/client/views/nodes/trails/SlideEffectPreview.tsx deleted file mode 100644 index d4c16586a..000000000 --- a/src/client/views/nodes/trails/SlideEffectPreview.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import { useSpring, animated, easings } from '@react-spring/web'; -import React, { useEffect, useState } from 'react'; - -interface Props { - friction: number; - tension: number; - mass: number; - children: React.ReactNode; -} - -export default function SpringAnimationPreview({ friction, tension, mass, children }: Props) { - const [springs, api] = useSpring( - () => ({ - from: { - x: 0, - y: 0, - opacity: 1, - scale: 1, - }, - config: { - tension: tension, - friction: friction, - mass: mass, - }, - onStart: () => { - // console.log('started'); - }, - onRest: () => { - // console.log('resting'); - }, - }), - [tension, friction, mass] - ); - - // Whether the animation is currently playing - const [animating, setAnimating] = useState(false); - - const bounceConfig = { - from: { - x: -50, - y: 0, - }, - to: [ - { - x: 50, - y: 0, - config: { - tension: tension, - friction: friction, - mass: mass, - }, - }, - { - x: -50, - y: 0, - config: { - duration: 500, - easing: easings.easeInOutCubic, - }, - }, - ], - }; - - const animate = () => { - api.start(bounceConfig); - }; - - useEffect(() => { - animate(); - }, []); - - return ( -
{ - animate(); - }}> - - {children} - -
- ); -} -- cgit v1.2.3-70-g09d2