From 55053983adc5b1b29efa0b2f38df5a58dfb93d42 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 21 Oct 2020 10:24:07 -0400
Subject: fixed editableView to commit current text on unmount (allows slide
 titles to be committed when clicking on another slide's title)

---
 src/client/views/EditableView.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

(limited to 'src/client/views/EditableView.tsx')

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 8b1b12365..afdda2aff 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -87,6 +87,10 @@ export class EditableView extends React.Component<EditableProps> {
             DragManager.MakeDropTarget(this._ref.current, this.props.onDrop.bind(this));
         }
     }
+    @action
+    componentWillUnmount() {
+        this._inputref.current?.value && this.finalizeEdit(this._inputref.current.value, false, true, false)
+    }
 
     _didShow = false;
 
@@ -168,6 +172,7 @@ export class EditableView extends React.Component<EditableProps> {
     }
 
     _ref = React.createRef<HTMLDivElement>();
+    _inputref = React.createRef<HTMLInputElement>();
     renderEditor() {
         return this.props.autosuggestProps
             ? <Autosuggest
@@ -185,7 +190,7 @@ export class EditableView extends React.Component<EditableProps> {
                     onChange: this.props.autosuggestProps.onChange
                 }}
             />
-            : <input className="editableView-input"
+            : <input className="editableView-input" ref={this._inputref}
                 defaultValue={this.props.GetValue()}
                 onKeyDown={this.onKeyDown}
                 autoFocus={true}
@@ -213,7 +218,7 @@ export class EditableView extends React.Component<EditableProps> {
             <div className={`editableView-container-editing${this.props.oneLine ? "-oneLine" : ""}`} ref={this._ref}
                 style={{ display: this.props.display, minHeight: "17px", whiteSpace: "nowrap", height: this.props.height || "auto", maxHeight: this.props.maxHeight }}
                 onClick={this.onClick} placeholder={this.props.placeholder}>
-                <span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize }}>{
+                <span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize }} >{
                     this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()}
                 </span>
             </div>;
-- 
cgit v1.2.3-70-g09d2


From a4321991ae32044be01606f0f2635468edc3887e Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 21 Oct 2020 12:14:28 -0400
Subject: cleaned up title eidting/slide selection in
 PresElement/PresBox/EditableView

---
 src/client/views/EditableView.tsx                  | 27 ++++++---
 src/client/views/nodes/PresBox.tsx                 | 16 ++++++
 .../views/presentationview/PresElementBox.tsx      | 64 ++++++----------------
 3 files changed, 52 insertions(+), 55 deletions(-)

(limited to 'src/client/views/EditableView.tsx')

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index afdda2aff..9606b5a91 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -81,6 +81,15 @@ export class EditableView extends React.Component<EditableProps> {
     //     }
     // }
 
+    @action
+    componentDidUpdate() {
+        if (this._editing && this.props.editing === false) {
+            this._inputref.current?.value && this.finalizeEdit(this._inputref.current.value, false, true, false);
+        } else if (this.props.editing !== undefined) {
+            this._editing = this.props.editing;
+        }
+    }
+
     @action
     componentDidMount() {
         if (this._ref.current && this.props.onDrop) {
@@ -89,7 +98,7 @@ export class EditableView extends React.Component<EditableProps> {
     }
     @action
     componentWillUnmount() {
-        this._inputref.current?.value && this.finalizeEdit(this._inputref.current.value, false, true, false)
+        this._inputref.current?.value && this.finalizeEdit(this._inputref.current.value, false, true, false);
     }
 
     _didShow = false;
@@ -135,14 +144,16 @@ export class EditableView extends React.Component<EditableProps> {
 
     @action
     onClick = (e: React.MouseEvent) => {
-        e.nativeEvent.stopPropagation();
-        if (this._ref.current && this.props.showMenuOnLoad) {
-            this.props.menuCallback?.(this._ref.current.getBoundingClientRect().x, this._ref.current.getBoundingClientRect().y);
-        } else if (!this.props.onClick?.(e)) {
-            this._editing = true;
-            this.props.isEditingCallback?.(true);
+        if (this.props.editing !== false) {
+            e.nativeEvent.stopPropagation();
+            if (this._ref.current && this.props.showMenuOnLoad) {
+                this.props.menuCallback?.(this._ref.current.getBoundingClientRect().x, this._ref.current.getBoundingClientRect().y);
+            } else if (!this.props.onClick?.(e)) {
+                this._editing = true;
+                this.props.isEditingCallback?.(true);
+            }
+            e.stopPropagation();
         }
-        e.stopPropagation();
     }
 
     @action
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index 9723937a7..b19cba585 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -707,6 +707,22 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         this.selectPres();
     }
 
+    //regular click
+    @action
+    regularSelect = (doc: Doc, ref: HTMLElement, drag: HTMLElement, focus: boolean) => {
+        this._selectedArray.splice(0, this._selectedArray.length, doc);
+        this._eleArray.splice(0, this._eleArray.length, ref);
+        this._dragArray.splice(0, this._dragArray.length, drag);
+        focus && this.selectElement(doc);
+        this.selectPres();
+    }
+
+    modifierSelect = (doc: Doc, ref: HTMLElement, drag: HTMLElement, focus: boolean, cmdClick: boolean, shiftClick: boolean) => {
+        if (cmdClick) this.multiSelect(doc, ref, drag);
+        else if (shiftClick) this.shiftSelect(doc, ref, drag);
+        else this.regularSelect(doc, ref, drag, focus);
+    }
+
     // Key for when the presentaiton is active
     @undoBatch
     keyEvents = action((e: KeyboardEvent) => {
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index 6fde7c2ac..33b67ae69 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action, computed, IReactionDisposer, reaction, runInAction, observable } from "mobx";
+import { action, computed, IReactionDisposer, reaction, runInAction, observable, trace } from "mobx";
 import { observer } from "mobx-react";
 import { Doc, DataSym, DocListCast } from "../../../fields/Doc";
 import { documentSchema } from '../../../fields/documentSchemas';
@@ -20,8 +20,6 @@ import { DragManager } from "../../util/DragManager";
 import { CurrentUserUtils } from "../../util/CurrentUserUtils";
 import { undoBatch } from "../../util/UndoManager";
 import { EditableView } from "../EditableView";
-import { DocUtils } from "../../documents/Documents";
-import { DateField } from "../../../fields/DateField";
 import { DocumentManager } from "../../util/DocumentManager";
 
 export const presSchema = createSchema({
@@ -146,13 +144,10 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
             if (PresBox.Instance._selectedArray.includes(this.rootDoc)) {
                 setupMoveUpEvents(this, e, this.startDrag, emptyFunction, emptyFunction);
             } else {
-                PresBox.Instance._selectedArray = [];
-                PresBox.Instance._selectedArray.push(this.rootDoc);
-                PresBox.Instance._eleArray = [];
-                PresBox.Instance._eleArray.push(this._itemRef.current!);
-                PresBox.Instance._dragArray = [];
-                PresBox.Instance._dragArray.push(this._dragRef.current!);
-                setupMoveUpEvents(this, e, this.startDrag, emptyFunction, emptyFunction);
+                setupMoveUpEvents(this, e, ((e: PointerEvent) => {
+                    PresBox.Instance.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, false);
+                    return this.startDrag(e);
+                }), emptyFunction, emptyFunction);
             }
         }
     }
@@ -162,11 +157,11 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
         e.preventDefault();
     }
 
-    startDrag = (e: PointerEvent, down: number[], delta: number[]) => {
+    startDrag = (e: PointerEvent) => {
         const miniView: boolean = this.toolbarWidth <= 100;
         const activeItem = this.rootDoc;
         const dragArray = PresBox.Instance._dragArray;
-        const dragData = new DragManager.DocumentDragData(PresBox.Instance.sortArray().map(doc => doc));
+        const dragData = new DragManager.DocumentDragData(PresBox.Instance.sortArray());
         const dragItem: HTMLElement[] = [];
         if (dragArray.length === 1) {
             const doc = dragArray[0];
@@ -236,23 +231,13 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
         e.stopPropagation();
     });
 
+    @undoBatch
     @action
     onSetValue = (value: string) => {
-        const length: number = value.length;
-        const spaces: string = new Array(value.length + 1).join(" ");
-        if (length === 0 || value === spaces) this.rootDoc.title = "-untitled-";
-        else this.rootDoc.title = value;
+        this.rootDoc.title = !value.trim().length ? "-untitled-" : value;
         return true;
     }
 
-    @action
-    clearArrays = () => {
-        PresBox.Instance._eleArray = [];
-        PresBox.Instance._dragArray = [];
-        PresBox.Instance._eleArray.push(this._itemRef.current!);
-        PresBox.Instance._dragArray.push(this._dragRef.current!);
-    }
-
     /**
      * Method called for updating the view of the currently selected document
      * 
@@ -301,23 +286,12 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                 onClick={e => {
                     e.stopPropagation();
                     e.preventDefault();
-                    // Command/ control click
-                    if (e.ctrlKey || e.metaKey) {
-                        PresBox.Instance.multiSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!);
-                        // Shift click
-                    } else if (e.shiftKey) {
-                        PresBox.Instance.shiftSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!);
-                        // Regular click
-                    } else {
-                        this.props.focus(this.rootDoc);
-                        this.clearArrays();
-                    }
+                    PresBox.Instance.modifierSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, !e.shiftKey && !e.ctrlKey && !e.metaKey, e.ctrlKey || e.metaKey, e.shiftKey);
                 }}
-                onDoubleClick={e => {
+                onDoubleClick={action(e => {
                     this.toggleProperties();
-                    this.props.focus(this.rootDoc);
-                    this.clearArrays();
-                }}
+                    PresBox.Instance.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, true);
+                })}
                 onPointerOver={this.onPointerOver}
                 onPointerLeave={this.onPointerLeave}
                 onPointerDown={this.headerDown}
@@ -333,17 +307,13 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                     </div>}
                 {miniView ? (null) : <div ref={miniView ? null : this._dragRef} className={`presItem-slide ${isSelected ? "active" : ""}`}>
                     <div className="presItem-name" style={{ maxWidth: showMore ? (toolbarWidth - 175) : toolbarWidth - 85, cursor: isSelected ? 'text' : 'grab' }}>
-                        {isSelected ? <EditableView
+                        <EditableView
                             ref={this._titleRef}
+                            editing={!isSelected ? false : undefined}
                             contents={activeItem.title}
                             GetValue={() => StrCast(activeItem.title)}
-                            SetValue={undoBatch(action((value: string) => {
-                                this.onSetValue(value);
-                                return true;
-                            }))}
-                        /> :
-                            activeItem.title
-                        }
+                            SetValue={this.onSetValue}
+                        />
                     </div>
                     <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.transition}</div></Tooltip>
                     <Tooltip title={<><div className="dash-tooltip">{"Duration"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.duration}</div></Tooltip>
-- 
cgit v1.2.3-70-g09d2

