aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/DocumentDecorations.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/DocumentDecorations.tsx')
-rw-r--r--src/client/views/DocumentDecorations.tsx114
1 files changed, 39 insertions, 75 deletions
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index c49fe157c..312acd5b2 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -3,12 +3,11 @@ import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faT
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { action, computed, observable, reaction, runInAction } from "mobx";
import { observer } from "mobx-react";
-import { Doc, DataSym } from "../../new_fields/Doc";
+import { Doc, DataSym, Field } from "../../new_fields/Doc";
import { PositionDocument } from '../../new_fields/documentSchemas';
import { ScriptField } from '../../new_fields/ScriptField';
import { Cast, StrCast, NumCast } from "../../new_fields/Types";
-import { CurrentUserUtils } from '../../server/authentication/models/current_user_utils';
-import { Utils, setupMoveUpEvents, emptyFunction, returnFalse } from "../../Utils";
+import { Utils, setupMoveUpEvents, emptyFunction, returnFalse, simulateMouseClick } from "../../Utils";
import { DocUtils } from "../documents/Documents";
import { DocumentType } from '../documents/DocumentTypes';
import { DragManager } from "../util/DragManager";
@@ -20,6 +19,7 @@ import { DocumentView } from "./nodes/DocumentView";
import React = require("react");
import { Id } from '../../new_fields/FieldSymbols';
import e = require('express');
+import { CollectionDockingView } from './collections/CollectionDockingView';
library.add(faCaretUp);
library.add(faObjectGroup);
@@ -37,8 +37,6 @@ library.add(faCloudUploadAlt);
library.add(faSyncAlt);
library.add(faShare);
-export type CloseCall = (toBeDeleted: DocumentView[]) => void;
-
@observer
export class DocumentDecorations extends React.Component<{}, { value: string }> {
static Instance: DocumentDecorations;
@@ -52,7 +50,6 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
@observable private _titleControlString: string = "#title";
@observable private _edtingTitle = false;
@observable private _hidden = false;
- @observable private _addedCloseCalls: CloseCall[] = [];
@observable public Interacting = false;
@observable public pushIcon: IconProp = "arrow-alt-circle-up";
@@ -69,7 +66,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
get Bounds(): { x: number, y: number, b: number, r: number } {
return SelectionManager.SelectedDocuments().reduce((bounds, documentView) => {
if (documentView.props.renderDepth === 0 ||
- Doc.AreProtosEqual(documentView.props.Document, CurrentUserUtils.UserDocument)) {
+ Doc.AreProtosEqual(documentView.props.Document, Doc.UserDoc())) {
return bounds;
}
const transform = (documentView.props.ScreenToLocalTransform().scale(documentView.props.ContentScaling())).inverse();
@@ -92,14 +89,6 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
}, { x: Number.MAX_VALUE, y: Number.MAX_VALUE, r: Number.MIN_VALUE, b: Number.MIN_VALUE });
}
- addCloseCall = (handler: CloseCall) => {
- const currentOffset = this._addedCloseCalls.length - 1;
- this._addedCloseCalls.push((toBeDeleted: DocumentView[]) => {
- this._addedCloseCalls.splice(currentOffset, 1);
- handler(toBeDeleted);
- });
- }
-
titleBlur = action((commit: boolean) => {
this._edtingTitle = false;
if (commit) {
@@ -142,40 +131,16 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
@action onSettingsDown = (e: React.PointerEvent): void => {
setupMoveUpEvents(this, e, () => false, (e) => { }, this.onSettingsClick);
}
-
- simulateMouseClick(element: Element, x: number, y: number, sx: number, sy: number) {
- ["pointerdown", "pointerup"].map(event => element.dispatchEvent(
- new PointerEvent(event, {
- view: window,
- bubbles: true,
- cancelable: true,
- button: 2,
- pointerType: "mouse",
- clientX: x,
- clientY: y,
- screenX: sx,
- screenY: sy,
- })));
-
- element.dispatchEvent(
- new MouseEvent("contextmenu", {
- view: window,
- bubbles: true,
- cancelable: true,
- button: 2,
- clientX: x,
- clientY: y,
- movementX: 0,
- movementY: 0,
- screenX: sx,
- screenY: sy,
- }));
- }
@action onSettingsClick = (e: PointerEvent): void => {
if (e.button === 0 && !e.altKey && !e.ctrlKey) {
let child = SelectionManager.SelectedDocuments()[0].ContentDiv!.children[0];
- while (child.children.length && child.className !== "jsx-parser") child = child.children[0];
- this.simulateMouseClick(child.children[0], e.clientX, e.clientY + 30, e.screenX, e.screenY + 30);
+ while (child.children.length) {
+ const next = Array.from(child.children).find(c => !c.className.includes("collectionViewChrome"));
+ if (next?.className.includes("documentView-node")) break;
+ if (next) child = next;
+ else break;
+ }
+ simulateMouseClick(child, e.clientX, e.clientY + 30, e.screenX, e.screenY + 30);
}
}
@@ -193,52 +158,51 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
dragData.isSelectionMove = true;
this.Interacting = true;
this._hidden = true;
- DragManager.StartDocumentDrag(SelectionManager.SelectedDocuments().map(documentView => documentView.ContentDiv!), dragData, e.x, e.y, {
+ DragManager.StartDocumentDrag(SelectionManager.SelectedDocuments().map(dv => dv.ContentDiv!), dragData, e.x, e.y, {
dragComplete: action(e => this._hidden = this.Interacting = false),
hideSource: true
});
return true;
}
- onCloseDown = (e: React.PointerEvent): void => {
- setupMoveUpEvents(this, e, (e, d) => false, (e) => { }, this.onCloseClick);
+ onIconifyDown = (e: React.PointerEvent): void => {
+ setupMoveUpEvents(this, e, (e, d) => false, (e) => { }, this.onIconifyClick);
}
@undoBatch
@action
onCloseClick = async (e: PointerEvent) => {
if (e.button === 0) {
- const recent = Cast(CurrentUserUtils.UserDocument.recentlyClosed, Doc) as Doc;
+ const recent = Cast(Doc.UserDoc().myRecentlyClosed, Doc) as Doc;
const selected = SelectionManager.SelectedDocuments().slice();
SelectionManager.DeselectAll();
- this._addedCloseCalls.forEach(handler => handler(selected));
selected.map(dv => {
recent && Doc.AddDocToList(recent, "data", dv.props.Document, undefined, true, true);
- dv.props.removeDocument && dv.props.removeDocument(dv.props.Document);
+ dv.props.removeDocument?.(dv.props.Document);
});
}
}
@action
- onMinimizeDown = (e: React.PointerEvent): void => {
- setupMoveUpEvents(this, e, (e, d) => false, (e) => { }, this.onMinimizeClick);
+ onMaximizeDown = (e: React.PointerEvent): void => {
+ setupMoveUpEvents(this, e, (e, d) => false, (e) => { }, this.onMaximizeClick);
}
@undoBatch
@action
- onMinimizeClick = (e: PointerEvent): void => {
+ onMaximizeClick = (e: PointerEvent): void => {
if (e.button === 0) {
- const selectedDocs = SelectionManager.SelectedDocuments().map(sd => sd);
- selectedDocs.map(dv => {
- const layoutKey = Cast(dv.props.Document.layoutKey, "string", null);
- const collapse = layoutKey !== "layout_icon";
- if (collapse) {
- dv.switchViews(collapse, "icon");
- if (layoutKey && layoutKey !== "layout") dv.props.Document.deiconifyLayout = layoutKey.replace("layout_", "");
- } else {
- const deiconifyLayout = Cast(dv.props.Document.deiconifyLayout, "string", null);
- dv.switchViews(deiconifyLayout ? true : false, deiconifyLayout);
- dv.props.Document.deiconifyLayout = undefined;
- }
- });
+ const selectedDocs = SelectionManager.SelectedDocuments();
+ if (selectedDocs.length) {
+ //CollectionDockingView.Instance?.OpenFullScreen(selectedDocs[0], selectedDocs[0].props.LibraryPath);
+ CollectionDockingView.AddRightSplit(Doc.MakeAlias(selectedDocs[0].props.Document), selectedDocs[0].props.LibraryPath);
+ }
+ }
+ SelectionManager.DeselectAll();
+ }
+ @undoBatch
+ @action
+ onIconifyClick = (e: PointerEvent): void => {
+ if (e.button === 0) {
+ SelectionManager.SelectedDocuments().forEach(dv => dv?.iconify());
}
SelectionManager.DeselectAll();
}
@@ -396,7 +360,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
return ScriptField.MakeFunction(this._titleControlString.substring(1), { doc: Doc.name })!.script.run({ self: selected.rootDoc, this: selected.layoutDoc }, console.log).result?.toString() || "";
}
if (this._titleControlString.startsWith("#")) {
- return selected.props.Document[this._titleControlString.substring(1)]?.toString() || "-unset-";
+ return Field.toString(selected.props.Document[this._titleControlString.substring(1)] as Field) || "-unset-";
}
return this._accumulatedTitle;
} else if (SelectionManager.SelectedDocuments().length > 1) {
@@ -428,13 +392,13 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
return (null);
}
const minimal = bounds.r - bounds.x < 100 ? true : false;
- const minimizeIcon = minimal ? (
+ const maximizeIcon = minimal ? (
<div className="documentDecorations-contextMenu" title="Show context menu" onPointerDown={this.onSettingsDown}>
<FontAwesomeIcon size="lg" icon="cog" />
</div>) : (
- <div className="documentDecorations-minimizeButton" title="Iconify" onPointerDown={this.onMinimizeDown}>
+ <div className="documentDecorations-minimizeButton" title="Iconify" onPointerDown={this.onIconifyDown}>
{/* Currently, this is set to be enabled if there is no ink selected. It might be interesting to think about minimizing ink if it's useful? -syip2*/}
- {SelectionManager.SelectedDocuments().length === 1 ? DocumentDecorations.DocumentIcon(StrCast(seldoc.props.Document.layout, "...")) : "..."}
+ <FontAwesomeIcon className="documentdecorations-times" icon={faTimes} size="lg" />
</div>);
const titleArea = this._edtingTitle ?
@@ -487,10 +451,10 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
left: bounds.x - this._resizeBorderWidth / 2,
top: bounds.y - this._resizeBorderWidth / 2 - this._titleHeight,
}}>
- {minimizeIcon}
+ {maximizeIcon}
{titleArea}
- <div className="documentDecorations-closeButton" title="Close Document" onPointerDown={this.onCloseDown}>
- <FontAwesomeIcon className="documentdecorations-times" icon={faTimes} size="lg" />
+ <div className="documentDecorations-closeButton" title="Open Document in Tab" onPointerDown={this.onMaximizeDown}>
+ {SelectionManager.SelectedDocuments().length === 1 ? DocumentDecorations.DocumentIcon(StrCast(seldoc.props.Document.layout, "...")) : "..."}
</div>
<div id="documentDecorations-topLeftResizer" className="documentDecorations-resizer"
onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-01 10:03:13 +0000