From e2b4502f87cf5707a77736267a1d96261024874c Mon Sep 17 00:00:00 2001
From: Sophie Zhang <sophie_zhang@brown.edu>
Date: Thu, 9 May 2024 11:49:33 -0400
Subject: started cleanup

---
 src/client/views/nodes/trails/PresBox.tsx  | 261 ++++++++++++++---------------
 src/client/views/pdf/GPTPopup/GPTPopup.tsx |   1 +
 2 files changed, 124 insertions(+), 138 deletions(-)

(limited to 'src')

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, {
-- 
cgit v1.2.3-70-g09d2