diff options
-rw-r--r-- | src/client/views/EditableView.tsx | 27 | ||||
-rw-r--r-- | src/client/views/nodes/PresBox.tsx | 16 | ||||
-rw-r--r-- | src/client/views/presentationview/PresElementBox.tsx | 64 |
3 files changed, 52 insertions, 55 deletions
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 @@ -82,6 +82,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) { DragManager.MakeDropTarget(this._ref.current, this.props.onDrop.bind(this)); @@ -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> |