aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/DocumentView.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/DocumentView.tsx')
-rw-r--r--src/client/views/nodes/DocumentView.tsx120
1 files changed, 25 insertions, 95 deletions
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 7514e782d..ab9cd2d53 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -15,24 +15,28 @@ import { DragManager } from "../../util/DragManager";
import { SelectionManager } from "../../util/SelectionManager";
import { Transform } from "../../util/Transform";
import { CollectionDockingView } from "../collections/CollectionDockingView";
-import { CollectionView, CollectionViewType } from "../collections/CollectionView";
+import { CollectionView } from "../collections/CollectionView";
import { ContextMenu } from "../ContextMenu";
import { DocumentContentsView } from "./DocumentContentsView";
import "./DocumentView.scss";
import React = require("react");
+
export interface DocumentViewProps {
ContainingCollectionView: Opt<CollectionView>;
Document: Document;
- AddDocument?: (doc: Document, allowDuplicates: boolean) => boolean;
- RemoveDocument?: (doc: Document) => boolean;
+ addDocument?: (doc: Document, allowDuplicates?: boolean) => boolean;
+ removeDocument?: (doc: Document) => boolean;
+ moveDocument?: (doc: Document, targetCollection: Document, addDocument: (document: Document) => boolean) => boolean;
ScreenToLocalTransform: () => Transform;
isTopMost: boolean;
ContentScaling: () => number;
PanelWidth: () => number;
PanelHeight: () => number;
focus: (doc: Document) => void;
- SelectOnLoad: boolean;
+ selectOnLoad: boolean;
+ parentActive: () => boolean;
+ onActiveChanged: (isActive: boolean) => void;
}
export interface JsxArgs extends DocumentViewProps {
Keys: { [name: string]: Key };
@@ -76,60 +80,20 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
return args;
}
-export interface JsxBindings {
- Document: Document;
- isSelected: () => boolean;
- select: (isCtrlPressed: boolean) => void;
- isTopMost: boolean;
- SelectOnLoad: boolean;
- [prop: string]: any;
-}
-
@observer
export class DocumentView extends React.Component<DocumentViewProps> {
private _mainCont = React.createRef<HTMLDivElement>();
+ public get ContentRef() {
+ return this._mainCont;
+ }
private _downX: number = 0;
private _downY: number = 0;
-
- private _reactionDisposer: Opt<IReactionDisposer>;
- @computed get active(): boolean {
- return (
- SelectionManager.IsSelected(this) ||
- !this.props.ContainingCollectionView ||
- this.props.ContainingCollectionView.active()
- );
- }
- @computed get topMost(): boolean {
- return (
- !this.props.ContainingCollectionView ||
- this.props.ContainingCollectionView.collectionViewType ==
- CollectionViewType.Docking
- );
- }
- @computed get layout(): string {
- return this.props.Document.GetText(
- KeyStore.Layout,
- "<p>Error loading layout data</p>"
- );
- }
- @computed get layoutKeys(): Key[] {
- return this.props.Document.GetData(
- KeyStore.LayoutKeys,
- ListField,
- new Array<Key>()
- );
- }
- @computed get layoutFields(): Key[] {
- return this.props.Document.GetData(
- KeyStore.LayoutFields,
- ListField,
- new Array<Key>()
- );
- }
- screenRect = (): ClientRect | DOMRect =>
- this._mainCont.current
- ? this._mainCont.current.getBoundingClientRect()
- : new DOMRect();
+ @computed get active(): boolean { return SelectionManager.IsSelected(this) || this.props.parentActive(); }
+ @computed get topMost(): boolean { return this.props.isTopMost; }
+ @computed get layout(): string { return this.props.Document.GetText(KeyStore.Layout, "<p>Error loading layout data</p>"); }
+ @computed get layoutKeys(): Key[] { return this.props.Document.GetData(KeyStore.LayoutKeys, ListField, new Array<Key>()); }
+ @computed get layoutFields(): Key[] { return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array<Key>()); }
+ screenRect = (): ClientRect | DOMRect => this._mainCont.current ? this._mainCont.current.getBoundingClientRect() : new DOMRect();
onPointerDown = (e: React.PointerEvent): void => {
this._downX = e.clientX;
this._downY = e.clientY;
@@ -159,20 +123,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
});
}
runInAction(() => DocumentManager.Instance.DocumentViews.push(this));
- this._reactionDisposer = reaction(
- () =>
- this.props.ContainingCollectionView &&
- this.props.ContainingCollectionView.SelectedDocs.slice(),
- () => {
- if (
- this.props.ContainingCollectionView &&
- this.props.ContainingCollectionView.SelectedDocs.indexOf(
- this.props.Document.Id
- ) != -1
- )
- SelectionManager.SelectDoc(this, true);
- }
- );
}
componentDidUpdate() {
@@ -190,15 +140,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
if (this.dropDisposer) {
this.dropDisposer();
}
- runInAction(() =>
- DocumentManager.Instance.DocumentViews.splice(
- DocumentManager.Instance.DocumentViews.indexOf(this),
- 1
- )
- );
- if (this._reactionDisposer) {
- this._reactionDisposer();
- }
+ runInAction(() => DocumentManager.Instance.DocumentViews.splice(DocumentManager.Instance.DocumentViews.indexOf(this), 1));
}
startDragging(x: number, y: number, dropAliasOfDraggedDoc: boolean) {
@@ -211,14 +153,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
dragData.aliasOnDrop = dropAliasOfDraggedDoc;
dragData.xOffset = x - left;
dragData.yOffset = y - top;
- dragData.removeDocument = (dropCollectionView: CollectionView) => {
- if (
- this.props.RemoveDocument &&
- this.props.ContainingCollectionView !== dropCollectionView
- ) {
- this.props.RemoveDocument(this.props.Document);
- }
- };
+ dragData.moveDocument = this.props.moveDocument;
DragManager.StartDocumentDrag([this._mainCont.current], dragData, x, y, {
handlers: {
dragComplete: action(() => { })
@@ -238,7 +173,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
) {
document.removeEventListener("pointermove", this.onPointerMove);
document.removeEventListener("pointerup", this.onPointerUp);
- if (!this.topMost || e.buttons == 2 || e.altKey) {
+ if (!this.topMost || e.buttons === 2 || e.altKey) {
this.startDragging(this._downX, this._downY, e.ctrlKey || e.altKey);
}
}
@@ -261,17 +196,14 @@ export class DocumentView extends React.Component<DocumentViewProps> {
};
deleteClicked = (): void => {
- if (this.props.RemoveDocument) {
- this.props.RemoveDocument(this.props.Document);
+ if (this.props.removeDocument) {
+ this.props.removeDocument(this.props.Document);
}
};
fieldsClicked = (e: React.MouseEvent): void => {
- if (this.props.AddDocument) {
- this.props.AddDocument(
- Documents.KVPDocument(this.props.Document, { width: 300, height: 300 }),
- false
- );
+ if (this.props.addDocument) {
+ this.props.addDocument(Documents.KVPDocument(this.props.Document, { width: 300, height: 300 }), false);
}
};
fullScreenClicked = (e: React.MouseEvent): void => {
@@ -438,9 +370,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
);
};
- isSelected = () => {
- return SelectionManager.IsSelected(this);
- };
+ isSelected = () => SelectionManager.IsSelected(this)
select = (ctrlPressed: boolean) => {
SelectionManager.SelectDoc(this, ctrlPressed);