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/nodes/trails/PresBox.tsx | 466 ++++++++++++++---------------- 1 file changed, 219 insertions(+), 247 deletions(-) (limited to 'src/client/views/nodes/trails/PresBox.tsx') 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} - /> -
); -- cgit v1.2.3-70-g09d2