aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/nodes/DocumentView.tsx11
-rw-r--r--src/client/views/nodes/trails/PresBox.scss9
-rw-r--r--src/client/views/nodes/trails/PresBox.tsx201
-rw-r--r--src/client/views/nodes/trails/PresElementBox.tsx9
-rw-r--r--src/client/views/nodes/trails/SlideEffect.tsx51
5 files changed, 174 insertions, 107 deletions
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<FieldViewProps & Document
* @returns a function that will wrap a JSX animation element wrapping any JSX element
*/
public static AnimationEffect(renderDoc: JSX.Element, presEffectDoc: Opt<Doc>, 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<FieldViewProps & Document
};
}
+ if (!dir) {
+ dir = PresEffectDirection.Center;
+ }
+
const transitionTime = presEffectDoc?.presentation_transition ? NumCast(presEffectDoc?.presentation_transition) : 500;
//prettier-ignore
switch (StrCast(presEffectDoc?.presentation_effect, StrCast(presEffectDoc?.followLinkAnimEffect))) {
default:
- // package used: react-awesome-reveal
case PresEffect.None: return renderDoc;
case PresEffect.Zoom: return <SlideEffect doc={root} delay={transitionTime} dir={dir as PresEffectDirection} presEffect={PresEffect.Zoom} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
case PresEffect.Fade: return <SlideEffect doc={root} delay={transitionTime} dir={dir as PresEffectDirection} presEffect={PresEffect.Fade} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
case PresEffect.Flip: return <SlideEffect doc={root} delay={transitionTime} dir={dir as PresEffectDirection} presEffect={PresEffect.Flip} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
case PresEffect.Rotate: return <SlideEffect doc={root} delay={transitionTime} dir={dir as PresEffectDirection} presEffect={PresEffect.Rotate} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
- // Potential change to move in since anything can be "bouncy"
case PresEffect.Bounce: return <SlideEffect doc={root} delay={transitionTime} dir={dir as PresEffectDirection} presEffect={PresEffect.Bounce} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
case PresEffect.Roll: return <SlideEffect doc={root} delay={transitionTime} dir={dir as PresEffectDirection} presEffect={PresEffect.Roll} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
- case PresEffect.Lightspeed: return <SlideEffect doc={root} delay={transitionTime} dir={dir as PresEffectDirection} presEffect={PresEffect.Lightspeed} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>;
+ // keep as preset, doesn't really make sense with spring config
+ case PresEffect.Lightspeed: return <JackInTheBox {...effectProps}>{renderDoc}</JackInTheBox>;
}
// 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<FieldViewProps>() {
};
@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<FieldViewProps>() {
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<FieldViewProps>() {
type={Type.TERT}
/>
{/* Custom */}
- <p className="presBox-submenu-label">Custom Timing Function</p>
- <CubicBezierEditor setFunc={this.setBezierControlPoints} currPoints={this.currCPoints} easeFunc={StrCast(this.activeItem.presEaseFunc)} />
+ <div
+ className="presBox-show-hide-dropdown"
+ style={{ alignSelf: 'flex-start' }}
+ onClick={e => {
+ e.stopPropagation();
+ this.setBezierEditorVisibility(!this.showBezierEditor);
+ }}>
+ {`${this.showBezierEditor ? 'Hide' : 'Show'} Timing Editor`}
+ <FontAwesomeIcon icon={this.showBezierEditor ? 'chevron-up' : 'chevron-down'} />
+ </div>
+ {this.showBezierEditor && (
+ <>
+ <p className="presBox-submenu-label" style={{ alignSelf: 'flex-start' }}>
+ Custom Timing Function
+ </p>
+ <CubicBezierEditor setFunc={this.setBezierControlPoints} currPoints={this.currCPoints} easeFunc={StrCast(this.activeItem.presEaseFunc)} />
+ </>
+ )}
</div>
</div>
<div className="presBox-option-block" style={{ padding: '16px' }}>
@@ -2235,87 +2259,94 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
onClick={() => this.updateEffectDirection(PresEffectDirection.Bottom)}
/>
</div>
- {/* <div className="effectDirection" style={{ display: effect === PresEffectDirection.None ? 'none' : 'grid', width: 40 }}>
- {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' })}
- </div> */}
- {/* Effect spring settings */}
- <Dropdown
- color={StrCast(Doc.UserDoc().userColor)}
- formLabel={'Effect Timing'}
- closeOnSelect={true}
- items={effectTimings}
- selectedVal={timingConfig.type}
- setSelectedVal={val => {
- console.log('effect timing', val);
- this.updateEffectTiming(activeItem, {
- type: val as SpringType,
- ...springMappings[val],
- });
- }}
- dropdownType={DropdownType.SELECT}
- type={Type.TERT}
- />
- <div>Tension</div>
+ {/* Spring settings */}
+ {/* No spring settings for jackinthebox (lightspeed) */}
<div
- onPointerDown={e => {
+ className="presBox-show-hide-dropdown"
+ onClick={e => {
e.stopPropagation();
+ this.setSpringEditorVisibility(!this.showSpringEditor);
}}>
- <Slider
- min={1}
- max={1000}
- step={5}
- size="small"
- value={timingConfig.stiffness}
- onChange={(e, val) => {
- if (!timingConfig) return;
- this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, stiffness: val as number });
- }}
- valueLabelDisplay="auto"
- />
+ {`${this.showSpringEditor ? 'Hide' : 'Show'} Spring Settings`}
+ <FontAwesomeIcon icon={this.showSpringEditor ? 'chevron-up' : 'chevron-down'} />
</div>
- <div>Damping</div>
- <div
- onPointerDown={e => {
- e.stopPropagation();
- }}>
- <Slider
- min={1}
- max={100}
- step={1}
- size="small"
- value={timingConfig.damping}
- onChange={(e, val) => {
- if (!timingConfig) return;
- this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, damping: val as number });
- }}
- valueLabelDisplay="auto"
- />
- </div>
- <div>Mass</div>
- <div
- onPointerDown={e => {
- e.stopPropagation();
- }}>
- <Slider
- min={1}
- max={10}
- step={1}
- size="small"
- value={timingConfig.mass}
- onChange={(e, val) => {
- if (!timingConfig) return;
- this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, mass: val as number });
- }}
- valueLabelDisplay="auto"
- />
- </div>
- <SpringAnimationPreview tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>
- <div style={{ width: '40px', height: '40px', backgroundColor: '#2e96ff', borderRadius: '4px' }}></div>
- </SpringAnimationPreview>
+ {effect !== PresEffect.Lightspeed && this.showSpringEditor && (
+ <>
+ <Dropdown
+ color={StrCast(Doc.UserDoc().userColor)}
+ formLabel={'Effect Timing'}
+ closeOnSelect={true}
+ items={effectTimings}
+ selectedVal={timingConfig.type}
+ setSelectedVal={val => {
+ this.updateEffectTiming(activeItem, {
+ type: val as SpringType,
+ ...springMappings[val],
+ });
+ }}
+ dropdownType={DropdownType.SELECT}
+ type={Type.TERT}
+ />
+ <div>Tension</div>
+ <div
+ onPointerDown={e => {
+ e.stopPropagation();
+ }}>
+ <Slider
+ min={1}
+ max={1000}
+ step={5}
+ size="small"
+ value={timingConfig.stiffness}
+ onChange={(e, val) => {
+ if (!timingConfig) return;
+ this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, stiffness: val as number });
+ }}
+ valueLabelDisplay="auto"
+ />
+ </div>
+ <div>Damping</div>
+ <div
+ onPointerDown={e => {
+ e.stopPropagation();
+ }}>
+ <Slider
+ min={1}
+ max={100}
+ step={1}
+ size="small"
+ value={timingConfig.damping}
+ onChange={(e, val) => {
+ if (!timingConfig) return;
+ this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, damping: val as number });
+ }}
+ valueLabelDisplay="auto"
+ />
+ </div>
+ <div>Mass</div>
+ <div
+ onPointerDown={e => {
+ e.stopPropagation();
+ }}>
+ <Slider
+ min={1}
+ max={10}
+ step={1}
+ size="small"
+ value={timingConfig.mass}
+ onChange={(e, val) => {
+ if (!timingConfig) return;
+ this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, mass: val as number });
+ }}
+ valueLabelDisplay="auto"
+ />
+ </div>
+ <SpringAnimationPreview tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>
+ <div style={{ width: '40px', height: '40px', backgroundColor: '#2e96ff', borderRadius: '4px' }}></div>
+ </SpringAnimationPreview>
+ </>
+ )}
+ {/* Effect spring settings */}
</div>
<div className="ribbon-final-box">
<div className="ribbon-final-button-hidden" onClick={() => this.applyTo(this.childDocs)}>
@@ -2734,6 +2765,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
@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<FieldViewProps>() {
</Tooltip>
);
items.push(
- <Tooltip key="customize" title={<div className="dash-tooltip">Customize</div>}>
+ <Tooltip key="edit" title={<div className="dash-tooltip">Edit</div>}>
<div
className={'slideButton'}
onClick={() => {
- PresBox.Instance.setChatActive(true);
+ PresBox.Instance.navigateToActiveItem();
+ PresBox.Instance.openProperties();
PresBox.Instance.slideToModify = this.Document;
- PresBox.Instance.recordDictation();
+ // PresBox.Instance.recordDictation();
}}>
- <FontAwesomeIcon icon={'message'} onPointerDown={e => e.stopPropagation()} />
+ <FontAwesomeIcon icon={'edit'} onPointerDown={e => e.stopPropagation()} />
</div>
</Tooltip>
);
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
)}
</div>
);
+ case PresEffect.Roll:
+ return (
+ <animated.div ref={ref} style={{ opacity: springs.opacity, transform: to([springs.x, springs.y], (val, val2) => `translate3d(${val}%, 0, 0) rotate3d(0, 0, 1, ${val2}deg)`) }}>
+ {children}
+ </animated.div>
+ );
default:
return (
<animated.div
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 22:10:22 +0000