aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/nodes/trails/PresBox.tsx261
-rw-r--r--src/client/views/pdf/GPTPopup/GPTPopup.tsx1
2 files changed, 124 insertions, 138 deletions
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 964b793bd..248de5f4b 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -421,20 +421,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
console.log('Parsed GPT Result ', resObj);
// this.activeItem
this.setGeneratedAnimations(resObj as AnimationSettings[]);
- // this.updateEffect(resObj.effect as PresEffect, false);
- // this.updateEffectTiming(this.activeItem, {
- // type: SpringType.CUSTOM,
- // stiffness: resObj.stiffness,
- // damping: resObj.damping,
- // mass: resObj.mass,
- // });
-
- // for (let key in resObj) {
- // if (resObj[key]) {
- // console.log('typeof property', typeof resObj[key]);
- // this.activeItem[key] = resObj[key];
- // }
- // }
}
} catch (err) {
console.error(err);
@@ -1862,7 +1848,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
</div>
{[DocumentType.AUDIO, DocumentType.VID].includes(targetType as any as DocumentType) ? null : (
<>
- <div className="ribbon-doubleButton">
+ <div className="ribbon-doubleButton presBox-ribbon">
<div className="presBox-subheading">Slide Duration</div>
<div className="ribbon-property" style={{ border: `solid 1px ${SettingsManager.userColor}` }}>
<input className="presBox-input" type="number" readOnly={true} value={duration} onKeyDown={e => e.stopPropagation()} onChange={e => this.updateDurationTime(e.target.value)} /> s
@@ -2035,6 +2021,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
return (
<>
{/* GPT Component */}
+ {/* This chatbox is for customizing the properties of trails, like transition time, movement type (zoom, pan) */}
<div className="presBox-gpt-chat">
<p>Customize with GPT</p>
<div className="pres-chat">
@@ -2081,6 +2068,112 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
/>
</div>
</div>
+
+ {/* Movement */}
+ <div
+ className={`presBox-ribbon ${this._transitionTools && this.layoutDoc.presentation_status === PresStatus.Edit ? 'active' : ''}`}
+ onPointerDown={StopEvent}
+ onPointerUp={StopEvent}
+ onClick={action(e => {
+ e.stopPropagation();
+ this._openMovementDropdown = false;
+ this._openEffectDropdown = false;
+ this._openBulletEffectDropdown = false;
+ })}>
+ <div className="presBox-option-block" style={{ padding: '16px' }}>
+ Movement
+ <Dropdown
+ color={StrCast(Doc.UserDoc().userColor)}
+ formLabel={'Movement'}
+ closeOnSelect={true}
+ items={movementItems}
+ selectedVal={this.movementName(activeItem)}
+ setSelectedVal={val => {
+ this.updateMovement(val as PresMovement);
+ }}
+ dropdownType={DropdownType.SELECT}
+ type={Type.TERT}
+ />
+ <div className="ribbon-doubleButton" style={{ display: activeItem.presentation_movement === PresMovement.Zoom ? 'inline-flex' : 'none' }}>
+ <div className="presBox-subheading">Zoom (% screen filled)</div>
+ <div className="ribbon-property" style={{ border: `solid 1px ${SettingsManager.userColor}` }}>
+ <input className="presBox-input" type="number" readOnly={true} value={zoom} onChange={e => this.updateZoom(e.target.value)} />%
+ </div>
+ {/* <div className="ribbon-propertyUpDown" style={{ color: SettingsManager.userBackgroundColor, background: SettingsManager.userColor }}>
+ <div className="ribbon-propertyUpDownItem" onClick={() => this.updateZoom(String(zoom), 0.1)}>
+ <FontAwesomeIcon icon={'caret-up'} />
+ </div>
+ <div className="ribbon-propertyUpDownItem" onClick={() => this.updateZoom(String(zoom), -0.1)}>
+ <FontAwesomeIcon icon={'caret-down'} />
+ </div>
+ </div> */}
+ </div>
+ {PresBox.inputter('0', '1', '100', zoom, activeItem.presentation_movement === PresMovement.Zoom, this.updateZoom)}
+ <div className="ribbon-doubleButton" style={{ display: 'inline-flex' }}>
+ <div className="presBox-subheading">Transition Time</div>
+ <div className="ribbon-property" style={{ border: `solid 1px ${SettingsManager.userColor}` }}>
+ <input className="presBox-input" type="number" readOnly={true} value={transitionSpeed} onKeyDown={e => e.stopPropagation()} onChange={action(e => this.updateTransitionTime(e.target.value))} /> s
+ </div>
+ {/* <div className="ribbon-propertyUpDown" style={{ color: SettingsManager.userBackgroundColor, background: SettingsManager.userColor }}>
+ <div className="ribbon-propertyUpDownItem" onClick={() => this.updateTransitionTime(String(transitionSpeed), 1000)}>
+ <FontAwesomeIcon icon={'caret-up'} />
+ </div>
+ <div className="ribbon-propertyUpDownItem" onClick={() => this.updateTransitionTime(String(transitionSpeed), -1000)}>
+ <FontAwesomeIcon icon={'caret-down'} />
+ </div>
+ </div> */}
+ </div>
+ {PresBox.inputter('0.1', '0.1', '10', transitionSpeed, true, this.updateTransitionTime)}
+ <div className={'slider-headers'}>
+ <div className="slider-text">Fast</div>
+ <div className="slider-text">Medium</div>
+ <div className="slider-text">Slow</div>
+ </div>
+ {/* Easing function */}
+ <div className="presBox-option-block presBox-option-center">
+ <Dropdown
+ color={StrCast(Doc.UserDoc().userColor)}
+ formLabel={'Easing Function'}
+ closeOnSelect={true}
+ items={easeItems}
+ selectedVal={this.activeItem.presEaseFunc ? (StrCast(this.activeItem.presEaseFunc).startsWith('cubic') ? 'custom' : StrCast(this.activeItem.presEaseFunc)) : 'ease'}
+ 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);
+ }
+ }
+ }}
+ dropdownType={DropdownType.SELECT}
+ type={Type.TERT}
+ />
+ {/* Custom */}
+ <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>
+
+ {/* This chatbox is for getting slide effect transition suggestions from gpt and visualizing them */}
<div className="presBox-gpt-chat">
<div className="pres-chat">
<div className="pres-chatbox-container">
@@ -2099,21 +2192,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
e.stopPropagation();
}}
/>
- {/* <ReactTextareaAutosize
- ref={r => (this._inputref2 = r)}
- minRows={1}
- placeholder="Get animation suggestions..."
- className="pres-chatbox"
- autoFocus={true}
- value={this.animationChat}
- onChange={e => {
- this.setAnimationChat(e.target.value);
- }}
- onKeyDown={e => {
- this.stopDictation(true);
- e.stopPropagation();
- }}
- /> */}
</div>
<Button
style={{ alignSelf: 'flex-end' }}
@@ -2140,22 +2218,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
})}>
<div className="presBox-option-block" style={{ padding: '16px' }}>
Effects
- {/* Effect dropdown */}
- <Dropdown
- color={StrCast(Doc.UserDoc().userColor)}
- formLabel={'Slide Effect'}
- closeOnSelect={true}
- items={effectItems}
- selectedVal={effect?.toString()}
- setSelectedVal={val => {
- this.updateEffect(val as PresEffect, false);
- // set default spring options for that effect
- this.updateEffectTiming(activeItem, presEffectDefaultTimings[val as keyof typeof presEffectDefaultTimings]);
- }}
- dropdownType={DropdownType.SELECT}
- type={Type.TERT}
- />
- {/* Effect generations */}
<div className="presBox-option-block presBox-option-center">
{/* Chat for idea generation */}
@@ -2181,6 +2243,21 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
))}
</div>
</div>
+ {/* Effect dropdown */}
+ <Dropdown
+ color={StrCast(Doc.UserDoc().userColor)}
+ formLabel={'Slide Effect'}
+ closeOnSelect={true}
+ items={effectItems}
+ selectedVal={effect?.toString()}
+ setSelectedVal={val => {
+ this.updateEffect(val as PresEffect, false);
+ // set default spring options for that effect
+ this.updateEffectTiming(activeItem, presEffectDefaultTimings[val as keyof typeof presEffectDefaultTimings]);
+ }}
+ dropdownType={DropdownType.SELECT}
+ type={Type.TERT}
+ />
{/* Effect direction */}
{/* Only applies to certain effects */}
{(effect === PresEffect.Flip || effect === PresEffect.Bounce || effect === PresEffect.Roll) && (
@@ -2326,98 +2403,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
</>
)}
</div>
- {/* Movement */}
- <div className="presBox-option-block" style={{ padding: '16px' }}>
- Movement
- <Dropdown
- color={StrCast(Doc.UserDoc().userColor)}
- formLabel={'Movement'}
- closeOnSelect={true}
- items={movementItems}
- selectedVal={this.movementName(activeItem)}
- setSelectedVal={val => {
- this.updateMovement(val as PresMovement);
- }}
- dropdownType={DropdownType.SELECT}
- type={Type.TERT}
- />
- <div className="ribbon-doubleButton" style={{ display: activeItem.presentation_movement === PresMovement.Zoom ? 'inline-flex' : 'none' }}>
- <div className="presBox-subheading">Zoom (% screen filled)</div>
- <div className="ribbon-property" style={{ border: `solid 1px ${SettingsManager.userColor}` }}>
- <input className="presBox-input" type="number" readOnly={true} value={zoom} onChange={e => this.updateZoom(e.target.value)} />%
- </div>
- {/* <div className="ribbon-propertyUpDown" style={{ color: SettingsManager.userBackgroundColor, background: SettingsManager.userColor }}>
- <div className="ribbon-propertyUpDownItem" onClick={() => this.updateZoom(String(zoom), 0.1)}>
- <FontAwesomeIcon icon={'caret-up'} />
- </div>
- <div className="ribbon-propertyUpDownItem" onClick={() => this.updateZoom(String(zoom), -0.1)}>
- <FontAwesomeIcon icon={'caret-down'} />
- </div>
- </div> */}
- </div>
- {PresBox.inputter('0', '1', '100', zoom, activeItem.presentation_movement === PresMovement.Zoom, this.updateZoom)}
- <div className="ribbon-doubleButton" style={{ display: 'inline-flex' }}>
- <div className="presBox-subheading">Transition Time</div>
- <div className="ribbon-property" style={{ border: `solid 1px ${SettingsManager.userColor}` }}>
- <input className="presBox-input" type="number" readOnly={true} value={transitionSpeed} onKeyDown={e => e.stopPropagation()} onChange={action(e => this.updateTransitionTime(e.target.value))} /> s
- </div>
- {/* <div className="ribbon-propertyUpDown" style={{ color: SettingsManager.userBackgroundColor, background: SettingsManager.userColor }}>
- <div className="ribbon-propertyUpDownItem" onClick={() => this.updateTransitionTime(String(transitionSpeed), 1000)}>
- <FontAwesomeIcon icon={'caret-up'} />
- </div>
- <div className="ribbon-propertyUpDownItem" onClick={() => this.updateTransitionTime(String(transitionSpeed), -1000)}>
- <FontAwesomeIcon icon={'caret-down'} />
- </div>
- </div> */}
- </div>
- {PresBox.inputter('0.1', '0.1', '10', transitionSpeed, true, this.updateTransitionTime)}
- <div className={'slider-headers'}>
- <div className="slider-text">Fast</div>
- <div className="slider-text">Medium</div>
- <div className="slider-text">Slow</div>
- </div>
- {/* Easing function */}
- <div className="presBox-option-block presBox-option-center">
- <Dropdown
- color={StrCast(Doc.UserDoc().userColor)}
- formLabel={'Easing Function'}
- closeOnSelect={true}
- items={easeItems}
- selectedVal={this.activeItem.presEaseFunc ? (StrCast(this.activeItem.presEaseFunc).startsWith('cubic') ? 'custom' : StrCast(this.activeItem.presEaseFunc)) : 'ease'}
- 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);
- }
- }
- }}
- dropdownType={DropdownType.SELECT}
- type={Type.TERT}
- />
- {/* Custom */}
- <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>
{/* Toggles */}
<Toggle
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index 42562986f..cb5137c83 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -143,6 +143,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
_layout_autoHeight: true,
});
this.addDoc(newDoc, this.sidebarId);
+ // newDoc.data = 'Hello world';
const anchor = AnchorMenu.Instance?.GetAnchor(undefined, false);
if (anchor) {
DocUtils.MakeLink(newDoc, anchor, {
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 04:18:04 +0000