aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/client/views/EditableView.tsx27
-rw-r--r--src/client/views/nodes/PresBox.tsx16
-rw-r--r--src/client/views/presentationview/PresElementBox.tsx64
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>