From 1e6d483091131db07b30e96d0910c858eb4f37c4 Mon Sep 17 00:00:00 2001
From: Sophie Zhang <sophie_zhang@brown.edu>
Date: Tue, 14 May 2024 14:17:44 -0400
Subject: add fields to customization

---
 src/client/views/nodes/trails/PresBox.tsx | 77 ++++---------------------------
 1 file changed, 8 insertions(+), 69 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 02233d241..a7a4e08e0 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -132,24 +132,28 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         // default presets
         {
             effect: PresEffect.Bounce,
+            direction: PresEffectDirection.Left,
             stiffness: 400,
             damping: 15,
             mass: 1,
         },
         {
             effect: PresEffect.Fade,
+            direction: PresEffectDirection.Left,
             stiffness: 100,
             damping: 15,
             mass: 1,
         },
         {
             effect: PresEffect.Flip,
+            direction: PresEffectDirection.Left,
             stiffness: 100,
             damping: 15,
             mass: 1,
         },
         {
-            effect: PresEffect.Roll,
+            effect: PresEffect.Rotate,
+            direction: PresEffectDirection.Left,
             stiffness: 100,
             damping: 15,
             mass: 1,
@@ -199,9 +203,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     @observable easeDropdownVal = 'ease';
 
-    // @observable bezierControlPoints: { p1: number[]; p2: number[] } = { p1: [0.67, 0.2], p2: [0.37, 0.88] };
     @action setBezierControlPoints = (newPoints: { p1: number[]; p2: number[] }) => {
-        // this.bezierControlPoints = newPoints;
         this.setEaseFunc(this.activeItem, `cubic-bezier(${newPoints.p1[0]}, ${newPoints.p1[1]}, ${newPoints.p2[0]}, ${newPoints.p2[1]})`);
     };
 
@@ -391,16 +393,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     @action
     customizeAnimations = async (input: string) => {
-        // const testInput = 'change title to Customized Slide, transition for 2.3s with fade in effect';
-        // if (!this.slideToModify) return;
         this.setIsLoading(true);
-
         try {
             const res = await getSlideTransitionSuggestions(this.animationChat);
             if (typeof res === 'string') {
                 const resObj = JSON.parse(res);
                 console.log('Parsed GPT Result ', resObj);
-                // this.activeItem
                 this.setGeneratedAnimations(resObj as AnimationSettings[]);
             }
         } catch (err) {
@@ -412,7 +410,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @action
     customizeWithGPT = async (input: string) => {
         // const testInput = 'change title to Customized Slide, transition for 2.3s with fade in effect';
-        // if (!this.slideToModify) return;
         this.setIsRecording(false);
         this.setIsLoading(true);
 
@@ -436,7 +433,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             if (typeof res === 'string') {
                 const resObj = JSON.parse(res);
                 console.log('Parsed GPT Result ', resObj);
-                // this.activeItem
                 for (let key in resObj) {
                     if (resObj[key]) {
                         console.log('typeof property', typeof resObj[key]);
@@ -1733,25 +1729,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     valueLabelDisplay="auto"
                 />
             </div>
-            // <input
-            //     type="range"
-            //     step={step}
-            //     min={min}
-            //     max={max}
-            //     value={value}
-            //     readOnly={true}
-            //     style={{ marginLeft: hmargin, marginRight: hmargin, width: `calc(100% - ${2 * (hmargin ?? 0)}px)`, background: SettingsManager.userColor, color: SettingsManager.userVariantColor }}
-            //     className={`toolbar-slider ${active ? '' : 'none'}`}
-            //     onPointerDown={e => {
-            //         PresBox._sliderBatch = UndoManager.StartBatch('pres slider');
-            //         document.addEventListener('pointerup', PresBox.endBatch, true);
-            //         e.stopPropagation();
-            //     }}
-            //     onChange={e => {
-            //         e.stopPropagation();
-            //         change(e.target.value);
-            //     }}
-            // />
         );
     };
 
@@ -1822,14 +1799,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                     Lightbox
                                 </div>
                             </Tooltip>
-                            {/* <Tooltip title={<div className="dash-tooltip">Transition movement style</div>}>
-                            <div
-                                className="ribbon-toggle"
-                                style={{ border: `solid 1px ${SettingsManager.userColor}`, color: SettingsManager.userColor, background: activeItem.presEaseFunc === 'ease' ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor }}
-                                onClick={() => this.updateEaseFunc(activeItem)}>
-                                {`${StrCast(activeItem.presEaseFunc, 'ease')}`}
-                            </div>
-                        </Tooltip> */}
                         </div>
                         {[DocumentType.AUDIO, DocumentType.VID].includes(targetType as any as DocumentType) ? null : (
                             <>
@@ -1838,14 +1807,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                     <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
                                     </div>
-                                    {/* <div className="ribbon-propertyUpDown" style={{ color: SettingsManager.userBackgroundColor, background: SettingsManager.userColor }}>
-                                    <div className="ribbon-propertyUpDownItem" onClick={() => this.updateDurationTime(String(duration), 1000)}>
-                                        <FontAwesomeIcon icon={'caret-up'} />
-                                    </div>
-                                    <div className="ribbon-propertyUpDownItem" onClick={() => this.updateDurationTime(String(duration), -1000)}>
-                                        <FontAwesomeIcon icon={'caret-down'} />
-                                    </div>
-                                </div> */}
                                 </div>
                                 {PresBox.inputter('0.1', '0.1', '20', duration, targetType !== DocumentType.AUDIO, this.updateDurationTime)}
                                 <div className={'slider-headers'} style={{ display: targetType === DocumentType.AUDIO ? 'none' : 'grid' }}>
@@ -2020,11 +1981,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         <div className="pres-chat">
                             <div className="pres-chatbox-container">
                                 <ReactTextareaAutosize
-                                    // ref={r => (this._inputref = r)}
-                                    // minRows={1}
                                     placeholder="Describe how you would like to modify the slide properties."
                                     className="pres-chatbox"
-                                    // autoFocus={true}
                                     value={this.chatInput}
                                     onChange={e => {
                                         this.setChatInput(e.target.value);
@@ -2118,9 +2076,9 @@ 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.setBezierEditorVisibility(true);
                                             this.setEaseFunc(this.activeItem, TIMING_DEFAULT_MAPPINGS.ease);
                                         }
                                     }
@@ -2157,11 +2115,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         <div className="pres-chat">
                             <div className="pres-chatbox-container">
                                 <ReactTextareaAutosize
-                                    // ref={r => (this._inputref2 = r)}
-                                    // minRows={1}
                                     placeholder="Customize prompt for effect suggestions. Leave blank for random results."
                                     className="pres-chatbox"
-                                    // autoFocus={true}
                                     value={this.animationChat}
                                     onChange={e => {
                                         this.setAnimationChat(e.target.value);
@@ -2206,6 +2161,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                             className="presBox-effect-container"
                                             onClick={() => {
                                                 this.updateEffect(elem.effect, false);
+                                                this.updateEffectDirection(elem.direction);
                                                 this.updateEffectTiming(this.activeItem, {
                                                     type: SpringType.CUSTOM,
                                                     stiffness: elem.stiffness,
@@ -2213,7 +2169,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                                     mass: elem.mass,
                                                 });
                                             }}>
-                                            <SlideEffect dir={PresEffectDirection.Left as PresEffectDirection} presEffect={elem.effect as PresEffect} tension={elem.stiffness} friction={elem.damping} mass={elem.mass} infinite>
+                                            <SlideEffect dir={elem.direction as PresEffectDirection} presEffect={elem.effect as PresEffect} tension={elem.stiffness} friction={elem.damping} mass={elem.mass} infinite>
                                                 <div className="presBox-effect-demo-box" style={{ backgroundColor: springPreviewColors[i] }}></div>
                                             </SlideEffect>
                                         </div>
@@ -2569,23 +2525,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                     />
                                     <div>On slide change</div>
                                 </div>
-                                {/* <div className="checkbox-container">
-                                    <input className="presBox-checkbox"
-                                        type="checkbox"
-                                        onChange={() => activeItem.mediaStop = "afterSlide"}
-                                        checked={activeItem.mediaStop === "afterSlide"}
-                                    />
-                                    <div className="checkbox-dropdown">
-                                        After chosen slide
-                                        <select className="presBox-viewPicker"
-                                            style={{ opacity: activeItem.mediaStop === "afterSlide" && this.itemIndex !== this.childDocs.length - 1 ? 1 : 0.3 }}
-                                            onPointerDown={e => e.stopPropagation()}
-                                            onChange={this.mediaStopChanged}
-                                            value={mediaStopDocStr}>
-                                            {this.mediaStopSlides}
-                                        </select>
-                                    </div>
-                                </div> */}
                             </div>
                         </div>
                     </div>
-- 
cgit v1.2.3-70-g09d2