aboutsummaryrefslogtreecommitdiff
path: root/src/views/nodes
diff options
context:
space:
mode:
Diffstat (limited to 'src/views/nodes')
-rw-r--r--src/views/nodes/DocumentView.tsx188
-rw-r--r--src/views/nodes/FieldTextBox.tsx3
-rw-r--r--src/views/nodes/FieldView.tsx4
-rw-r--r--src/views/nodes/ImageBox.tsx5
4 files changed, 102 insertions, 98 deletions
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index dd47d4455..3cc0f3bf6 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -6,29 +6,33 @@ import { Key, KeyStore } from "../../fields/Key";
import { ListField } from "../../fields/ListField";
import { NumberField } from "../../fields/NumberField";
import { TextField } from "../../fields/TextField";
-import { CollectionSchemaView } from "../collections/CollectionSchemaView"
-import "./NodeView.scss"
import { DragManager } from "../../util/DragManager";
import { SelectionManager } from "../../util/SelectionManager";
import { Utils } from "../../Utils";
-import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "../collections/CollectionViewBase";
import { CollectionDockingView } from "../collections/CollectionDockingView";
import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
+import { CollectionSchemaView } from "../collections/CollectionSchemaView";
+import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "../collections/CollectionViewBase";
import { ContextMenu } from "../ContextMenu";
import { FieldTextBox } from "../nodes/FieldTextBox";
import { ImageBox } from "../nodes/ImageBox";
import "./NodeView.scss";
import React = require("react");
+import { baseKeymap } from "prosemirror-commands";
const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
interface DocumentViewProps {
Document: Document;
ContainingCollectionView: Opt<CollectionViewBase>;
- ContainingDocumentView: Opt<DocumentView>;
+ ContainingDocumentContentsView: Opt<DocumentContentsView>;
}
@observer
-export class DocumentContents extends React.Component<DocumentViewProps> {
+export class DocumentContentsView extends React.Component<DocumentViewProps> {
+ protected _mainCont = React.createRef<any>();
+ get MainContent() {
+ return this._mainCont;
+ }
@computed
get layout(): string {
return this.props.Document.GetFieldValue(KeyStore.Layout, TextField, String("<p>Error loading layout data</p>"));
@@ -43,12 +47,92 @@ export class DocumentContents extends React.Component<DocumentViewProps> {
get layoutFields(): Key[] {
return this.props.Document.GetFieldValue(KeyStore.LayoutFields, ListField, new Array<Key>());
}
+
+ //
+ // returns the cumulative scaling between the document and the screen
+ //
+ @computed
+ public get ScalingToScreenSpace(): number {
+ if (this.props.ContainingDocumentContentsView != undefined) {
+ let ss = this.props.ContainingDocumentContentsView.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1));
+ return this.props.ContainingDocumentContentsView.ScalingToScreenSpace * ss;
+ }
+ return 1;
+ }
+
+ //
+ // Converts a coordinate in the screen space of the app into a local document coordinate.
+ //
+ public TransformToLocalPoint(screenX: number, screenY: number) {
+ // if this collection view is nested within another collection view, then
+ // first transform the screen point into the parent collection's coordinate space.
+ let { LocalX: parentX, LocalY: parentY } = this.props.ContainingDocumentContentsView != undefined ?
+ this.props.ContainingDocumentContentsView!.TransformToLocalPoint(screenX, screenY) :
+ { LocalX: screenX, LocalY: screenY };
+ let ContainerX: number = parentX - COLLECTION_BORDER_WIDTH;
+ let ContainerY: number = parentY - COLLECTION_BORDER_WIDTH;
+
+ var Xx = this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0));
+ var Yy = this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0));
+ // CollectionDockingViews change the location of their children frames without using a Dash transformation.
+ // They also ignore any transformation that may have been applied to their content document.
+ // NOTE: this currently assumes CollectionDockingViews aren't nested.
+ if (this.props.ContainingCollectionView instanceof CollectionDockingView) {
+ var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this.MainContent.current!);
+ Xx = rx - COLLECTION_BORDER_WIDTH;
+ Yy = ry - COLLECTION_BORDER_WIDTH;
+ }
+
+ let Ss = this.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1));
+ let Panxx = this.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0));
+ let Panyy = this.props.Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0));
+ let LocalX = (ContainerX - (Xx + Panxx)) / Ss;
+ let LocalY = (ContainerY - (Yy + Panyy)) / Ss;
+
+ return { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY };
+ }
+
+ //
+ // Converts a point in the coordinate space of a document to a screen space coordinate.
+ //
+ public TransformToScreenPoint(localX: number, localY: number, Ss: number = 1, Panxx: number = 0, Panyy: number = 0): { ScreenX: number, ScreenY: number } {
+
+ var Xx = this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0));
+ var Yy = this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0));
+ // CollectionDockingViews change the location of their children frames without using a Dash transformation.
+ // They also ignore any transformation that may have been applied to their content document.
+ // NOTE: this currently assumes CollectionDockingViews aren't nested.
+ if (this.props.ContainingCollectionView instanceof CollectionDockingView) {
+ var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this.MainContent.current!);
+ Xx = rx - COLLECTION_BORDER_WIDTH;
+ Yy = ry - COLLECTION_BORDER_WIDTH;
+ }
+
+ let W = COLLECTION_BORDER_WIDTH;
+ let H = COLLECTION_BORDER_WIDTH;
+ let parentX = (localX - W) * Ss + (Xx + Panxx) + W;
+ let parentY = (localY - H) * Ss + (Yy + Panyy) + H;
+
+ // if this collection view is nested within another collection view, then
+ // first transform the local point into the parent collection's coordinate space.
+ let containingDocView = this.props.ContainingDocumentContentsView;
+ if (containingDocView != undefined) {
+ let ss = containingDocView.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1));
+ let panxx = containingDocView.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
+ let panyy = containingDocView.props.Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
+ let { ScreenX, ScreenY } = containingDocView.TransformToScreenPoint(parentX, parentY, ss, panxx, panyy);
+ parentX = ScreenX;
+ parentY = ScreenY;
+ }
+ return { ScreenX: parentX, ScreenY: parentY };
+ }
render() {
let doc = this.props.Document;
let bindings = { ...this.props } as any;
for (const key of this.layoutKeys) {
bindings[key.Name + "Key"] = key;
}
+ bindings.ContainingDocumentContentsView = this;
for (const key of this.layoutFields) {
let field = doc.GetField(key);
if (field) {
@@ -56,20 +140,21 @@ export class DocumentContents extends React.Component<DocumentViewProps> {
}
}
return (
- <JsxParser
+ //<div ref={this._mainCont}>
+ <JsxParser ref={this._mainCont}
components={{ FieldTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
bindings={bindings}
jsx={this.layout}
showWarnings={true}
onError={(test: any) => { console.log(test) }}
/>
+ //</div>
)
}
}
@observer
-export class DocumentView extends React.Component<DocumentViewProps> {
- private _mainCont = React.createRef<HTMLDivElement>();
+export class DocumentView extends DocumentContentsView {
private _contextMenuCanOpen = false;
private _downX: number = 0;
private _downY: number = 0;
@@ -84,10 +169,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
return new DOMRect();
}
- get MainContent() {
- return this._mainCont;
- }
-
@computed
get x(): number {
return this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0));
@@ -152,86 +233,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
return this.props.ContainingCollectionView == undefined || this.props.ContainingCollectionView instanceof CollectionDockingView;
}
-
- //
- // returns the cumulative scaling between the document and the screen
- //
- @computed
- public get ScalingToScreenSpace(): number {
- if (this.props.ContainingDocumentView != undefined) {
- let ss = this.props.ContainingDocumentView.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1));
- return this.props.ContainingDocumentView.ScalingToScreenSpace * ss;
- }
- return 1;
- }
-
- //
- // Converts a coordinate in the screen space of the app into a local document coordinate.
- //
- public TransformToLocalPoint(screenX: number, screenY: number) {
- // if this collection view is nested within another collection view, then
- // first transform the screen point into the parent collection's coordinate space.
- let { LocalX: parentX, LocalY: parentY } = this.props.ContainingDocumentView != undefined ?
- this.props.ContainingDocumentView!.TransformToLocalPoint(screenX, screenY) :
- { LocalX: screenX, LocalY: screenY };
- let ContainerX: number = parentX - COLLECTION_BORDER_WIDTH;
- let ContainerY: number = parentY - COLLECTION_BORDER_WIDTH;
-
- var Xx = this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0));
- var Yy = this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0));
- // CollectionDockingViews change the location of their children frames without using a Dash transformation.
- // They also ignore any transformation that may have been applied to their content document.
- // NOTE: this currently assumes CollectionDockingViews aren't nested.
- if (this.props.ContainingCollectionView instanceof CollectionDockingView) {
- var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this._mainCont.current!);
- Xx = rx - COLLECTION_BORDER_WIDTH;
- Yy = ry - COLLECTION_BORDER_WIDTH;
- }
-
- let Ss = this.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1));
- let Panxx = this.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0));
- let Panyy = this.props.Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0));
- let LocalX = (ContainerX - (Xx + Panxx)) / Ss;
- let LocalY = (ContainerY - (Yy + Panyy)) / Ss;
-
- return { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY };
- }
-
- //
- // Converts a point in the coordinate space of a document to a screen space coordinate.
- //
- public TransformToScreenPoint(localX: number, localY: number, Ss: number = 1, Panxx: number = 0, Panyy: number = 0): { ScreenX: number, ScreenY: number } {
-
- var Xx = this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0));
- var Yy = this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0));
- // CollectionDockingViews change the location of their children frames without using a Dash transformation.
- // They also ignore any transformation that may have been applied to their content document.
- // NOTE: this currently assumes CollectionDockingViews aren't nested.
- if (this.props.ContainingCollectionView instanceof CollectionDockingView) {
- var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this._mainCont.current!);
- Xx = rx - COLLECTION_BORDER_WIDTH;
- Yy = ry - COLLECTION_BORDER_WIDTH;
- }
-
- let W = COLLECTION_BORDER_WIDTH;
- let H = COLLECTION_BORDER_WIDTH;
- let parentX = (localX - W) * Ss + (Xx + Panxx) + W;
- let parentY = (localY - H) * Ss + (Yy + Panyy) + H;
-
- // if this collection view is nested within another collection view, then
- // first transform the local point into the parent collection's coordinate space.
- let containingDocView = this.props.ContainingDocumentView;
- if (containingDocView != undefined) {
- let ss = containingDocView.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1));
- let panxx = containingDocView.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
- let panyy = containingDocView.props.Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
- let { ScreenX, ScreenY } = containingDocView.TransformToScreenPoint(parentX, parentY, ss, panxx, panyy);
- parentX = ScreenX;
- parentY = ScreenY;
- }
- return { ScreenX: parentX, ScreenY: parentY };
- }
-
onPointerDown = (e: React.PointerEvent): void => {
this._downX = e.clientX;
this._downY = e.clientY;
@@ -354,7 +355,8 @@ export class DocumentView extends React.Component<DocumentViewProps> {
}}
onContextMenu={this.onContextMenu}
onPointerDown={this.onPointerDown}>
- <DocumentContents {...this.props} ContainingDocumentView={this} />
+
+ <DocumentContentsView {...this.props} />
</div>
);
}
diff --git a/src/views/nodes/FieldTextBox.tsx b/src/views/nodes/FieldTextBox.tsx
index 188b39a17..0a8706517 100644
--- a/src/views/nodes/FieldTextBox.tsx
+++ b/src/views/nodes/FieldTextBox.tsx
@@ -13,6 +13,7 @@ import "./FieldTextBox.scss";
import React = require("react")
import { RichTextField } from "../../fields/RichTextField";
import { FieldViewProps } from "./FieldView";
+import { DocumentView } from "./DocumentView";
// FieldTextBox: Displays an editable plain text node that maps to a specified Key of a Document
@@ -110,7 +111,7 @@ export class FieldTextBox extends React.Component<FieldViewProps> {
}
onPointerDown = (e: React.PointerEvent): void => {
let me = this;
- if (e.buttons === 1 && SelectionManager.IsSelected(me.props.documentViewContainer)) {
+ if (e.buttons === 1 && me.props.documentViewContainer instanceof DocumentView && SelectionManager.IsSelected(me.props.documentViewContainer)) {
e.stopPropagation();
}
}
diff --git a/src/views/nodes/FieldView.tsx b/src/views/nodes/FieldView.tsx
index 6c1cd956b..b7a1d0526 100644
--- a/src/views/nodes/FieldView.tsx
+++ b/src/views/nodes/FieldView.tsx
@@ -1,5 +1,5 @@
import React = require("react")
-import { DocumentView } from "./DocumentView";
+import { DocumentView, DocumentContentsView } from "./DocumentView";
import { Document } from "../../fields/Document";
import { observer } from "mobx-react";
import { computed } from "mobx";
@@ -20,7 +20,7 @@ import { Key } from "../../fields/Key";
export interface FieldViewProps {
fieldKey: Key;
doc: Document;
- documentViewContainer: DocumentView
+ documentViewContainer: DocumentContentsView
}
@observer
diff --git a/src/views/nodes/ImageBox.tsx b/src/views/nodes/ImageBox.tsx
index 5137dbf38..d2f567423 100644
--- a/src/views/nodes/ImageBox.tsx
+++ b/src/views/nodes/ImageBox.tsx
@@ -6,6 +6,7 @@ import "./ImageBox.scss";
import React = require("react")
import { ImageField } from '../../fields/ImageField';
import { FieldViewProps } from './FieldView';
+import { DocumentView } from './DocumentView';
interface ImageBoxState {
photoIndex: number,
@@ -38,7 +39,7 @@ export class ImageBox extends React.Component<FieldViewProps, ImageBoxState> {
onPointerDown = (e: React.PointerEvent): void => {
if (Date.now() - this._lastTap < 300) {
- if (e.buttons === 1 && SelectionManager.IsSelected(this.props.documentViewContainer)) {
+ if (e.buttons === 1 && this.props.documentViewContainer instanceof DocumentView && SelectionManager.IsSelected(this.props.documentViewContainer)) {
e.stopPropagation();
this._downX = e.clientX;
this._downY = e.clientY;
@@ -66,7 +67,7 @@ export class ImageBox extends React.Component<FieldViewProps, ImageBoxState> {
const images = [path,];
var lightbox = () => {
const { photoIndex } = this.state;
- if (this.state.isOpen && SelectionManager.IsSelected(this.props.documentViewContainer)) {
+ if (this.state.isOpen && this.props.documentViewContainer instanceof DocumentView && SelectionManager.IsSelected(this.props.documentViewContainer)) {
return (<Lightbox
mainSrc={images[photoIndex]}
nextSrc={photoIndex + 1 < images.length ? images[(photoIndex + 1) % images.length] : undefined}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-03-03 11:08:25 +0000