From 55053983adc5b1b29efa0b2f38df5a58dfb93d42 Mon Sep 17 00:00:00 2001 From: bobzel 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 { 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 { } _ref = React.createRef(); + _inputref = React.createRef(); renderEditor() { return this.props.autosuggestProps ? { onChange: this.props.autosuggestProps.onChange }} /> - : {
- { + { this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()}
; -- cgit v1.2.3-70-g09d2 From a4321991ae32044be01606f0f2635468edc3887e Mon Sep 17 00:00:00 2001 From: bobzel 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 { // } // } + @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 { } @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 { @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 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 { + 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 { + 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 { - 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 { 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} {miniView ? (null) :
- {isSelected ? StrCast(activeItem.title)} - SetValue={undoBatch(action((value: string) => { - this.onSetValue(value); - return true; - }))} - /> : - activeItem.title - } + SetValue={this.onSetValue} + />
{"Movement speed"}
}>
{this.transition}
{"Duration"}
}>
{this.duration}
 -- cgit v1.2.3-70-g09d2