aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/util/CurrentUserUtils.ts1
-rw-r--r--src/client/views/EditableView.tsx34
-rw-r--r--src/client/views/OverlayView.tsx9
-rw-r--r--src/client/views/collections/CollectionDockingView.tsx12
-rw-r--r--src/client/views/collections/TabDocView.tsx4
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx5
-rw-r--r--src/client/views/nodes/DocumentView.tsx8
-rw-r--r--src/client/views/nodes/PresBox.tsx35
-rw-r--r--src/client/views/nodes/VideoBox.scss3
-rw-r--r--src/client/views/nodes/VideoBox.tsx10
-rw-r--r--src/client/views/presentationview/PresElementBox.tsx64
-rw-r--r--src/fields/documentSchemas.ts1
12 files changed, 100 insertions, 86 deletions
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index f43b6df44..38bfe3fb6 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -1190,6 +1190,7 @@ export class CurrentUserUtils {
public static get MyRecentlyClosed() { return Cast(Doc.UserDoc().myRecentlyClosedDocs, Doc, null); }
public static get MyDashboards() { return Cast(Doc.UserDoc().myDashboards, Doc, null); }
public static get EmptyPane() { return Cast(Doc.UserDoc().emptyPane, Doc, null); }
+ public static get OverlayDocs() { return DocListCast((Doc.UserDoc().myOverlayDocs as Doc)?.data); }
}
Scripting.addGlobal(function openDragFactory(dragFactory: Doc) {
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 8b1b12365..9606b5a91 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -82,11 +82,24 @@ 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));
}
}
+ @action
+ componentWillUnmount() {
+ this._inputref.current?.value && this.finalizeEdit(this._inputref.current.value, false, true, false);
+ }
_didShow = false;
@@ -131,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
@@ -168,6 +183,7 @@ export class EditableView extends React.Component<EditableProps> {
}
_ref = React.createRef<HTMLDivElement>();
+ _inputref = React.createRef<HTMLInputElement>();
renderEditor() {
return this.props.autosuggestProps
? <Autosuggest
@@ -185,7 +201,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 +229,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>;
diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx
index b40c9edfb..7d47abdce 100644
--- a/src/client/views/OverlayView.tsx
+++ b/src/client/views/OverlayView.tsx
@@ -14,6 +14,7 @@ import { Scripting } from "../util/Scripting";
import { ScriptingRepl } from './ScriptingRepl';
import { DragManager } from "../util/DragManager";
import { List } from "../../fields/List";
+import { CurrentUserUtils } from "../util/CurrentUserUtils";
export type OverlayDisposer = () => void;
@@ -146,12 +147,7 @@ export class OverlayView extends React.Component {
@computed get overlayDocs() {
- const userDocOverlays = Doc.UserDoc().myOverlayDocs;
- if (!userDocOverlays) {
- return null;
- }
- return userDocOverlays instanceof Doc && DocListCast(userDocOverlays.data).map(d => {
- setTimeout(() => d.inOverlay = true, 0);
+ return CurrentUserUtils.OverlayDocs?.map(d => {
let offsetx = 0, offsety = 0;
const dref = React.createRef<HTMLDivElement>();
const onPointerMove = action((e: PointerEvent, down: number[]) => {
@@ -161,7 +157,6 @@ export class OverlayView extends React.Component {
}
if (e.metaKey) {
const dragData = new DragManager.DocumentDragData([d]);
- d.removeDropProperties = new List<string>(["inOverlay"]);
dragData.offset = [-offsetx, -offsety];
dragData.dropAction = "move";
dragData.removeDocument = (doc: Doc | Doc[]) => {
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 2eaa284cc..39a52fb6d 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -308,9 +308,15 @@ export class CollectionDockingView extends CollectionSubView(doc => doc) {
@action
onPointerDown = (e: React.PointerEvent): void => {
- window.addEventListener("mouseup", this.onPointerUp);
- if (!(e.target as HTMLElement).closest("*.lm_content") && ((e.target as HTMLElement).closest("*.lm_tab") || (e.target as HTMLElement).closest("*.lm_stack"))) {
- this._flush = UndoManager.StartBatch("golden layout edit");
+ let hitFlyout = false;
+ for (let par = e.target as any; !hitFlyout && par; par = par.parentElement) {
+ hitFlyout = (par.className === "dockingViewButtonSelector");
+ }
+ if (!hitFlyout) {
+ window.addEventListener("mouseup", this.onPointerUp);
+ if (!(e.target as HTMLElement).closest("*.lm_content") && ((e.target as HTMLElement).closest("*.lm_tab") || (e.target as HTMLElement).closest("*.lm_stack"))) {
+ this._flush = UndoManager.StartBatch("golden layout edit");
+ }
}
if (!e.nativeEvent.cancelBubble && !InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE) && !InteractionUtils.IsType(e, InteractionUtils.PENTYPE) &&
Doc.GetSelectedTool() !== InkTool.Highlighter && Doc.GetSelectedTool() !== InkTool.Pen) {
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 9e25bb607..338b1d590 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -124,7 +124,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
**/
@undoBatch
@action
- public static PinDoc(doc: Doc, unpin = false, audioRange?: boolean) {
+ public static async PinDoc(doc: Doc, unpin = false, audioRange?: boolean) {
if (unpin) console.log('TODO: Remove UNPIN from this location');
//add this new doc to props.Document
const curPres = CurrentUserUtils.ActivePresentation;
@@ -144,7 +144,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
if (!curPresDocView) {
CollectionDockingView.AddSplit(curPres, "right");
}
- DocumentManager.Instance.jumpToDocument(doc, false, undefined);
+ await DocumentManager.Instance.jumpToDocument(doc, false, undefined);
}
}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 56624f42d..fdcfb00d8 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -46,6 +46,7 @@ import "./CollectionFreeFormView.scss";
import { MarqueeOptionsMenu } from "./MarqueeOptionsMenu";
import { MarqueeView } from "./MarqueeView";
import React = require("react");
+import { CurrentUserUtils } from "../../../util/CurrentUserUtils";
export const panZoomSchema = createSchema({
_panX: "number",
@@ -803,7 +804,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
@action
onPointerWheel = (e: React.WheelEvent): void => {
- if (this.layoutDoc._lockedTransform || this.props.Document.inOverlay || this.props.Document.treeViewOutlineMode) return;
+ if (this.layoutDoc._lockedTransform || CurrentUserUtils.OverlayDocs.includes(this.props.Document) || this.props.Document.treeViewOutlineMode) return;
if (!e.ctrlKey && this.props.Document.scrollHeight !== undefined) { // things that can scroll vertically should do that instead of zooming
e.stopPropagation();
}
@@ -839,7 +840,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
else if (ranges.yrange.max <= (panY - panelDim[1] / 2)) panY = ranges.yrange.min - panelDim[1] / 2;
}
}
- if (!this.layoutDoc._lockedTransform || this.Document.inOverlay) {
+ if (!this.layoutDoc._lockedTransform || CurrentUserUtils.OverlayDocs.includes(this.Document)) {
this.Document._viewTransition = panType;
const scale = this.getLocalTransform().inverse().Scale;
const newPanX = Math.min((1 - 1 / scale) * this.nativeWidth, Math.max(0, panX));
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index d227d3a8e..08a4a7e23 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -423,7 +423,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
this._downX = touch.clientX;
this._downY = touch.clientY;
if (!e.nativeEvent.cancelBubble) {
- if ((this.active || this.layoutDoc.onDragStart || this.onClickHandler) && !e.ctrlKey && !this.layoutDoc.lockedPosition && !this.layoutDoc.inOverlay) e.stopPropagation();
+ if ((this.active || this.layoutDoc.onDragStart || this.onClickHandler) && !e.ctrlKey && !this.layoutDoc.lockedPosition && !CurrentUserUtils.OverlayDocs.includes(this.layoutDoc)) e.stopPropagation();
this.removeMoveListeners();
this.addMoveListeners();
this.removeEndListeners();
@@ -438,7 +438,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
if (e.cancelBubble && this.active) {
this.removeMoveListeners();
}
- else if (!e.cancelBubble && (SelectionManager.IsSelected(this, true) || this.props.parentActive(true) || this.layoutDoc.onDragStart || this.onClickHandler) && !this.layoutDoc.lockedPosition && !this.layoutDoc.inOverlay) {
+ else if (!e.cancelBubble && (SelectionManager.IsSelected(this, true) || this.props.parentActive(true) || this.layoutDoc.onDragStart || this.onClickHandler) && !this.layoutDoc.lockedPosition && !CurrentUserUtils.OverlayDocs.includes(this.layoutDoc)) {
const touch = me.touchEvent.changedTouches.item(0);
if (touch && (Math.abs(this._downX - touch.clientX) > 3 || Math.abs(this._downY - touch.clientY) > 3)) {
@@ -554,7 +554,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
if ((this.active || this.layoutDoc.onDragStart) &&
!e.ctrlKey &&
(e.button === 0 || InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE)) &&
- !this.layoutDoc.inOverlay) {
+ !CurrentUserUtils.OverlayDocs.includes(this.layoutDoc)) {
e.stopPropagation();
if (SelectionManager.IsSelected(this, true) && this.layoutDoc._viewType !== CollectionViewType.Docking) e.preventDefault(); // goldenlayout needs to be able to move its tabs, so can't preventDefault for it
}
@@ -573,7 +573,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
if (e.cancelBubble && this.active) {
document.removeEventListener("pointermove", this.onPointerMove); // stop listening to pointerMove if something else has stopPropagated it (e.g., the MarqueeView)
}
- else if (!e.cancelBubble && (SelectionManager.IsSelected(this, true) || this.props.parentActive(true) || this.layoutDoc.onDragStart) && !this.layoutDoc.lockedPosition && !this.layoutDoc.inOverlay) {
+ else if (!e.cancelBubble && (SelectionManager.IsSelected(this, true) || this.props.parentActive(true) || this.layoutDoc.onDragStart) && !this.layoutDoc.lockedPosition && !CurrentUserUtils.OverlayDocs.includes(this.layoutDoc)) {
if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
if (!e.altKey && (!this.topMost || this.layoutDoc.onDragStart || this.onClickHandler) && (e.buttons === 1 || InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE))) {
document.removeEventListener("pointermove", this.onPointerMove);
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index eabd57632..1b8f01d81 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -519,11 +519,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
@action
updateMinimize = () => {
const docView = DocumentManager.Instance.getDocumentView(this.layoutDoc);
- if (this.layoutDoc.inOverlay) {
+ if (CurrentUserUtils.OverlayDocs.includes(this.layoutDoc)) {
this.layoutDoc.presStatus = PresStatus.Edit;
Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocs as Doc), undefined, this.rootDoc);
CollectionDockingView.AddSplit(this.rootDoc, "right");
- this.layoutDoc.inOverlay = false;
} else if (this.layoutDoc.context && docView) {
this.layoutDoc.presStatus = PresStatus.Edit;
clearTimeout(this._presTimer);
@@ -707,6 +706,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) => {
@@ -715,7 +730,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
const anchorNode = document.activeElement as HTMLDivElement;
if (anchorNode && anchorNode.className?.includes("lm_title")) return;
if (e.keyCode === 27) { // Escape key
- if (this.layoutDoc.inOverlay) { this.updateMinimize(); }
+ if (CurrentUserUtils.OverlayDocs.includes(this.layoutDoc)) { this.updateMinimize(); }
else if (this.layoutDoc.presStatus === "edit") { this._selectedArray = []; this._eleArray = []; this._dragArray = []; }
else this.layoutDoc.presStatus = "edit";
if (this._presTimer) clearTimeout(this._presTimer);
@@ -1357,10 +1372,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
@computed get presentDropdown() {
return (
<div className={`dropdown-play ${this.presentTools ? "active" : ""}`} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
- <div className="dropdown-play-button" onClick={(action(() => { this.updateMinimize(); this.turnOffEdit(true); }))}>
+ <div className="dropdown-play-button" onClick={(undoBatch(action(() => { this.updateMinimize(); this.turnOffEdit(true); })))}>
Minimize
</div>
- <div className="dropdown-play-button" onClick={(action(() => { this.layoutDoc.presStatus = "manual"; this.turnOffEdit(true); }))}>
+ <div className="dropdown-play-button" onClick={(undoBatch(action(() => { this.layoutDoc.presStatus = "manual"; this.turnOffEdit(true); })))}>
Sidebar view
</div>
</div>
@@ -1946,8 +1961,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
{this.playButtonFrames}
</div>
<div className="presPanel-divider"></div>
- {this.props.PanelWidth() > 250 ? <div className="presPanel-button-text" onClick={() => { this.layoutDoc.presStatus = "edit"; clearTimeout(this._presTimer); }}>EXIT</div>
- : <div className="presPanel-button" onClick={() => this.layoutDoc.presStatus = "edit"}>
+ {this.props.PanelWidth() > 250 ? <div className="presPanel-button-text" onClick={undoBatch(action(() => { this.layoutDoc.presStatus = "edit"; clearTimeout(this._presTimer); }))}>EXIT</div>
+ : <div className="presPanel-button" onClick={undoBatch(action(() => this.layoutDoc.presStatus = "edit"))}>
<FontAwesomeIcon icon={"times"} />
</div>}
</div>);
@@ -1965,7 +1980,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
// needed to ensure that the childDocs are loaded for looking up fields
this.childDocs.slice();
const mode = StrCast(this.rootDoc._viewType) as CollectionViewType;
- return this.layoutDoc.inOverlay ?
+ return CurrentUserUtils.OverlayDocs.includes(this.rootDoc) ?
<div className="miniPres">
<div className="presPanelOverlay" style={{ display: "inline-flex", height: 35, background: '#323232', top: 0, zIndex: 3000000 }}>
<Tooltip title={<><div className="dash-tooltip">{"Loop"}</div></>}><div className="presPanel-button" style={{ color: this.layoutDoc.presLoop ? '#AEDDF8' : undefined }} onClick={() => this.layoutDoc.presLoop = !this.layoutDoc.presLoop}><FontAwesomeIcon icon={"redo-alt"} /></div></Tooltip>
@@ -1979,11 +1994,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
{this.playButtonFrames}
</div>
<div className="presPanel-divider"></div>
- <div className="presPanel-button-text" onClick={() => { this.updateMinimize(); this.layoutDoc.presStatus = "edit"; clearTimeout(this._presTimer); }}>EXIT</div>
+ <div className="presPanel-button-text" onClick={undoBatch(action(() => { this.updateMinimize(); this.layoutDoc.presStatus = "edit"; clearTimeout(this._presTimer); }))}>EXIT</div>
</div>
</div>
:
- <div className="presBox-cont" style={{ minWidth: this.layoutDoc.inOverlay ? 240 : undefined }} >
+ <div className="presBox-cont" style={{ minWidth: CurrentUserUtils.OverlayDocs.includes(this.layoutDoc) ? 240 : undefined }} >
{this.topPanel}
{this.toolbar}
{this.newDocumentToolbarDropdown}
diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss
index 0c0854ac2..05714f665 100644
--- a/src/client/views/nodes/VideoBox.scss
+++ b/src/client/views/nodes/VideoBox.scss
@@ -1,5 +1,8 @@
.videoBox {
transform-origin: top left;
+ width: 100%;
+ height: 100%;
+ position: relative;
.videoBox-viewer {
opacity: 0.99; // hack! overcomes some kind of Chrome weirdness where buttons (e.g., snapshot) disappear at some point as the video is resized larger
}
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 168c87764..30e8db645 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -358,12 +358,20 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps, VideoD
return this.addDocument(doc);
}
+ @computed get contentScaling() { return this.props.ContentScaling(); }
contentFunc = () => [this.youtubeVideoId ? this.youtubeContent : this.content];
render() {
return (<div className="videoBox" onContextMenu={this.specificContextMenu}
- style={{ transform: `scale(${this.props.ContentScaling()})`, width: `${100 / this.props.ContentScaling()}%`, height: `${100 / this.props.ContentScaling()}%` }} >
+ style={{
+ transform: this.props.PanelWidth() ? undefined : `scale(${this.contentScaling})`,
+ width: this.props.PanelWidth() ? undefined : `${100 / this.contentScaling}%`,
+ height: this.props.PanelWidth() ? undefined : `${100 / this.contentScaling}%`,
+ pointerEvents: this.layoutDoc._isBackground ? "none" : undefined,
+ borderRadius: `${Number(StrCast(this.layoutDoc.borderRounding).replace("px", "")) / this.contentScaling}px`
+ }} >
<div className="videoBox-viewer" >
<CollectionFreeFormView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
+ forceScaling={true}
PanelHeight={this.props.PanelHeight}
PanelWidth={this.props.PanelWidth}
annotationsKey={this.annotationKey}
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>
diff --git a/src/fields/documentSchemas.ts b/src/fields/documentSchemas.ts
index 71294c59c..311aaa769 100644
--- a/src/fields/documentSchemas.ts
+++ b/src/fields/documentSchemas.ts
@@ -19,7 +19,6 @@ export const documentSchema = createSchema({
activeFrame: "number", // the active frame of a frame based animated document
_currentTimecode: "number", // current play back time of a temporal document (video / audio)
displayTimecode: "number", // the time that a document should be displayed (e.g., time an annotation should be displayed on a video)
- inOverlay: "boolean", // whether the document is rendered in an OverlayView which handles selection/dragging differently
isLabel: "boolean", // whether the document is a label or not (video / audio)
audioStart: "number", // the time frame where the audio should begin playing
audioEnd: "number", // the time frame where the audio should stop playing
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-13 12:29:44 +0000