From 70b582db9a8cecc742be3c2b5f043a70a15c7991 Mon Sep 17 00:00:00 2001 From: Sophie Zhang Date: Thu, 18 Apr 2024 11:13:52 -0400 Subject: dropdowns, ui, roll --- src/client/views/nodes/DocumentView.tsx | 11 +- src/client/views/nodes/trails/PresBox.scss | 9 + src/client/views/nodes/trails/PresBox.tsx | 201 ++++++++++++++--------- src/client/views/nodes/trails/PresElementBox.tsx | 9 +- src/client/views/nodes/trails/SlideEffect.tsx | 51 ++++-- 5 files changed, 174 insertions(+), 107 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index eaa2c6abc..801d96b35 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -997,7 +997,7 @@ export class DocumentViewInternal extends DocComponent, root: Doc) { - const dir = presEffectDoc?.presentation_effectDirection ?? presEffectDoc?.followLinkAnimDirection; + let dir = presEffectDoc?.presentation_effectDirection ?? presEffectDoc?.followLinkAnimDirection; const effectProps = { left: dir === PresEffectDirection.Left, right: dir === PresEffectDirection.Right, @@ -1021,21 +1021,24 @@ export class DocumentViewInternal extends DocComponent{renderDoc} case PresEffect.Fade: return {renderDoc} case PresEffect.Flip: return {renderDoc} case PresEffect.Rotate: return {renderDoc} - // Potential change to move in since anything can be "bouncy" case PresEffect.Bounce: return {renderDoc} case PresEffect.Roll: return {renderDoc} - case PresEffect.Lightspeed: return {renderDoc}; + // keep as preset, doesn't really make sense with spring config + case PresEffect.Lightspeed: return {renderDoc}; } // switch (StrCast(presEffectDoc?.presentation_effect, StrCast(presEffectDoc?.followLinkAnimEffect))) { // default: diff --git a/src/client/views/nodes/trails/PresBox.scss b/src/client/views/nodes/trails/PresBox.scss index c937730ab..adc59d812 100644 --- a/src/client/views/nodes/trails/PresBox.scss +++ b/src/client/views/nodes/trails/PresBox.scss @@ -17,6 +17,7 @@ display: flex; gap: 8px; } + .pres-chatbox-container { padding: 16px; outline: 1px solid #999999; @@ -37,6 +38,14 @@ // Bezier editor +.presBox-show-hide-dropdown { + cursor: pointer; + padding: 8px 0; + display: flex; + align-items: center; + gap: 4px; +} + .presBox-bezier-editor { border: 1px solid rgb(221, 221, 221); border-radius: 4px; diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx index b192dc3db..62458acfe 100644 --- a/src/client/views/nodes/trails/PresBox.tsx +++ b/src/client/views/nodes/trails/PresBox.tsx @@ -137,15 +137,22 @@ export class PresBox extends ViewBoxBaseComponent() { }; @action - public setChatActive = (active: boolean) => { - this.toggleProperties(); - }; + public setChatActive = (active: boolean) => {}; @action public setIsRecording = (isRecording: boolean) => { this.isRecording = isRecording; }; + @observable showBezierEditor = false; + @action setBezierEditorVisibility = (visible: boolean) => { + this.showBezierEditor = visible; + }; + @observable showSpringEditor = true; + @action setSpringEditorVisibility = (visible: boolean) => { + this.showSpringEditor = visible; + }; + // Easing function variables @observable easeDropdownVal = 'ease'; @@ -2098,6 +2105,7 @@ export class PresBox extends ViewBoxBaseComponent() { setSelectedVal={val => { if (typeof val === 'string') { if (val !== 'custom') { + this.setBezierEditorVisibility(true); this.setEaseFunc(this.activeItem, val); } else { this.setEaseFunc(this.activeItem, TIMING_DEFAULT_MAPPINGS.ease); @@ -2108,8 +2116,24 @@ export class PresBox extends ViewBoxBaseComponent() { type={Type.TERT} /> {/* Custom */} -

Custom Timing Function

- +
{ + e.stopPropagation(); + this.setBezierEditorVisibility(!this.showBezierEditor); + }}> + {`${this.showBezierEditor ? 'Hide' : 'Show'} Timing Editor`} + +
+ {this.showBezierEditor && ( + <> +

+ Custom Timing Function +

+ + + )}
@@ -2235,87 +2259,94 @@ export class PresBox extends ViewBoxBaseComponent() { onClick={() => this.updateEffectDirection(PresEffectDirection.Bottom)} />
- {/*
- {presDirection(PresEffectDirection.Left, 'angle-right', 1, 2, {})} - {presDirection(PresEffectDirection.Right, 'angle-left', 3, 2, {})} - {presDirection(PresEffectDirection.Top, 'angle-down', 2, 1, {})} - {presDirection(PresEffectDirection.Bottom, 'angle-up', 2, 3, {})} - {presDirection(PresEffectDirection.Center, '', 2, 2, { width: 10, height: 10, alignSelf: 'center' })} -
*/} - {/* Effect spring settings */} - { - console.log('effect timing', val); - this.updateEffectTiming(activeItem, { - type: val as SpringType, - ...springMappings[val], - }); - }} - dropdownType={DropdownType.SELECT} - type={Type.TERT} - /> -
Tension
+ {/* Spring settings */} + {/* No spring settings for jackinthebox (lightspeed) */}
{ + className="presBox-show-hide-dropdown" + onClick={e => { e.stopPropagation(); + this.setSpringEditorVisibility(!this.showSpringEditor); }}> - { - if (!timingConfig) return; - this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, stiffness: val as number }); - }} - valueLabelDisplay="auto" - /> + {`${this.showSpringEditor ? 'Hide' : 'Show'} Spring Settings`} +
-
Damping
-
{ - e.stopPropagation(); - }}> - { - if (!timingConfig) return; - this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, damping: val as number }); - }} - valueLabelDisplay="auto" - /> -
-
Mass
-
{ - e.stopPropagation(); - }}> - { - if (!timingConfig) return; - this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, mass: val as number }); - }} - valueLabelDisplay="auto" - /> -
- -
- + {effect !== PresEffect.Lightspeed && this.showSpringEditor && ( + <> + { + this.updateEffectTiming(activeItem, { + type: val as SpringType, + ...springMappings[val], + }); + }} + dropdownType={DropdownType.SELECT} + type={Type.TERT} + /> +
Tension
+
{ + e.stopPropagation(); + }}> + { + if (!timingConfig) return; + this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, stiffness: val as number }); + }} + valueLabelDisplay="auto" + /> +
+
Damping
+
{ + e.stopPropagation(); + }}> + { + if (!timingConfig) return; + this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, damping: val as number }); + }} + valueLabelDisplay="auto" + /> +
+
Mass
+
{ + e.stopPropagation(); + }}> + { + if (!timingConfig) return; + this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, mass: val as number }); + }} + valueLabelDisplay="auto" + /> +
+ +
+ + + )} + {/* Effect spring settings */}
this.applyTo(this.childDocs)}> @@ -2734,6 +2765,12 @@ export class PresBox extends ViewBoxBaseComponent() { @action toggleProperties = () => (SettingsManager.Instance.propertiesWidth = SettingsManager.Instance.propertiesWidth > 0 ? 0 : 250); + @action + openProperties = () => { + // need to also focus slide + SettingsManager.Instance.propertiesWidth = 250; + }; + @computed get toolbar() { const propIcon = SettingsManager.Instance.propertiesWidth > 0 ? 'angle-double-right' : 'angle-double-left'; const propTitle = SettingsManager.Instance.propertiesWidth > 0 ? 'Close Presentation Panel' : 'Open Presentation Panel'; diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx index 4abfc5a94..449b8e07f 100644 --- a/src/client/views/nodes/trails/PresElementBox.tsx +++ b/src/client/views/nodes/trails/PresElementBox.tsx @@ -513,15 +513,16 @@ export class PresElementBox extends ViewBoxBaseComponent() { ); items.push( - Customize
}> + Edit
}>
{ - PresBox.Instance.setChatActive(true); + PresBox.Instance.navigateToActiveItem(); + PresBox.Instance.openProperties(); PresBox.Instance.slideToModify = this.Document; - PresBox.Instance.recordDictation(); + // PresBox.Instance.recordDictation(); }}> - e.stopPropagation()} /> + e.stopPropagation()} />
); diff --git a/src/client/views/nodes/trails/SlideEffect.tsx b/src/client/views/nodes/trails/SlideEffect.tsx index d4dfae059..20ff4b0b9 100644 --- a/src/client/views/nodes/trails/SlideEffect.tsx +++ b/src/client/views/nodes/trails/SlideEffect.tsx @@ -139,6 +139,7 @@ export default function SpringAnimation({ doc, delay, dir, friction, tension, ma }, }; default: + // no movement for center return { from: { opacity: 0, @@ -165,23 +166,6 @@ export default function SpringAnimation({ doc, delay, dir, friction, tension, ma ], }; - // Flip - // const flipConfig = { - // from: { - // // opacity: 0, - // transform: `perspective(600px) rotateX(0deg)`, - // }, - // to: { - // // opacity: 1, - // transform: `perspective(600px) rotateX(180deg)`, - // config: { - // tension: tension, - // friction: friction, - // mass: mass, - // }, - // }, - // }; - const flipConfig = { from: { x: 0, @@ -196,6 +180,32 @@ export default function SpringAnimation({ doc, delay, dir, friction, tension, ma }, }; + const rollConfig = { + from: { + opacity: 0, + x: -100, + y: -120, + }, + to: { + opacity: 1, + x: 0, + y: 0, + config: { + tension: tension, + friction: friction, + mass: mass, + }, + }, + }; + + const lightspeedConfig = { + from: { + opacity: 0, + }, + to: [], + loop: true, + }; + // Switch animation depending on slide effect const startAnimation = () => { switch (presEffect) { @@ -215,6 +225,7 @@ export default function SpringAnimation({ doc, delay, dir, friction, tension, ma api.start(flipConfig); break; case PresEffect.Roll: + api.start(rollConfig); break; case PresEffect.Lightspeed: break; @@ -269,6 +280,12 @@ export default function SpringAnimation({ doc, delay, dir, friction, tension, ma )} ); + case PresEffect.Roll: + return ( + `translate3d(${val}%, 0, 0) rotate3d(0, 0, 1, ${val2}deg)`) }}> + {children} + + ); default: return (