aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/Main.tsx99
-rw-r--r--src/documents/Documents.ts7
-rw-r--r--src/util/DragManager.ts2
-rw-r--r--src/util/Scripting.ts3
-rw-r--r--src/util/SelectionManager.ts12
-rw-r--r--src/views/collections/CollectionDockingView.tsx16
-rw-r--r--src/views/collections/CollectionFreeFormView.tsx54
-rw-r--r--src/views/collections/CollectionSchemaView.tsx15
-rw-r--r--src/views/collections/CollectionViewBase.tsx14
-rw-r--r--src/views/nodes/CollectionFreeFormDocumentView.tsx222
-rw-r--r--src/views/nodes/DocumentView.tsx286
-rw-r--r--src/views/nodes/FieldView.tsx11
-rw-r--r--src/views/nodes/FormattedTextBox.scss (renamed from src/views/nodes/FieldTextBox.scss)2
-rw-r--r--src/views/nodes/FormattedTextBox.tsx (renamed from src/views/nodes/FieldTextBox.tsx)21
-rw-r--r--src/views/nodes/ImageBox.tsx9
15 files changed, 401 insertions, 372 deletions
diff --git a/src/Main.tsx b/src/Main.tsx
index d4d397125..1fc0ffe7f 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -1,20 +1,20 @@
+import { action, configure } from 'mobx';
+import "normalize.css";
import * as React from 'react';
import * as ReactDOM from 'react-dom';
-import "./Main.scss";
-import "normalize.css"
-import { Key, KeyStore as KS, KeyStore } from './fields/Key';
-import { NumberField } from './fields/NumberField';
-import { Document } from './fields/Document';
-import { configure, runInAction, action } from 'mobx';
-import { Documents } from './documents/Documents';
import { DocumentDecorations } from './DocumentDecorations';
-import { CollectionFreeFormView } from './views/collections/CollectionFreeFormView';
+import { Documents } from './documents/Documents';
+import { Document } from './fields/Document';
+import { KeyStore, KeyStore as KS } from './fields/Key';
import { ListField } from './fields/ListField';
-import { DocumentView } from './views/nodes/DocumentView';
-import { ContextMenu } from './views/ContextMenu';
+import { NumberField } from './fields/NumberField';
import { TextField } from './fields/TextField';
+import "./Main.scss";
+import { ContextMenu } from './views/ContextMenu';
+import { DocumentView } from './views/nodes/DocumentView';
import { CompileScript } from './util/Scripting';
+
configure({
enforceActions: "observed"
});
@@ -38,51 +38,52 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
//runInAction(() =>
-//{
-let doc1 = Documents.TextDocument({ title: "hello" });
-let doc2 = doc1.MakeDelegate();
-doc2.SetField(KS.X, new NumberField(150));
-doc2.SetField(KS.Y, new NumberField(20));
-let doc3 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
- x: 450, y: 500, title: "cat 1"
-});
-const schemaDocs = Array.from(Array(5).keys()).map(v => Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
- x: 50 + 100 * v, y: 50, width: 100, height: 100, title: "cat" + v
-}));
-schemaDocs[0].SetFieldValue(KS.Author, "Tyler", TextField);
-schemaDocs[4].SetFieldValue(KS.Author, "Bob", TextField);
-schemaDocs.push(doc2);
-const doc7 = Documents.SchemaDocument(schemaDocs)
-const docset = [doc1, doc2, doc3, doc7];
-let doc4 = Documents.CollectionDocument(docset, {
- x: 0, y: 400, title: "mini collection"
-});
-let doc5 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
- x: 650, y: 500, width: 600, height: 600, title: "cat 2"
-});
-let docset2 = new Array<Document>(doc4, doc1, doc3);
-let doc6 = Documents.CollectionDocument(docset2, {
- x: 350, y: 100, width: 600, height: 600, title: "docking collection"
-});
-let mainNodes = null;// mainContainer.GetFieldT(KeyStore.Data, ListField);
-if (!mainNodes) {
- mainNodes = new ListField<Document>();
+{
+ let doc1 = Documents.TextDocument({ title: "hello" });
+ let doc2 = doc1.MakeDelegate();
+ doc2.SetField(KS.X, new NumberField(150));
+ doc2.SetField(KS.Y, new NumberField(20));
+ let doc3 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
+ x: 450, y: 500, title: "cat 1"
+ });
+ const schemaDocs = Array.from(Array(5).keys()).map(v => Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
+ x: 50 + 100 * v, y: 50, width: 100, height: 100, title: "cat" + v
+ }));
+ schemaDocs[0].SetFieldValue(KS.Author, "Tyler", TextField);
+ schemaDocs[4].SetFieldValue(KS.Author, "Bob", TextField);
+ schemaDocs.push(doc2);
+ const doc7 = Documents.SchemaDocument(schemaDocs)
+ const docset = [doc1, doc2, doc3, doc7];
+ let doc4 = Documents.CollectionDocument(docset, {
+ x: 0, y: 400, title: "mini collection"
+ });
+ let doc5 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
+ x: 650, y: 500, width: 600, height: 600, title: "cat 2"
+ });
+ let docset2 = new Array<Document>(doc4);//, doc1, doc3);
+ let doc6 = Documents.CollectionDocument(docset2, {
+ x: 350, y: 100, width: 600, height: 600, title: "docking collection"
+ });
+ let mainNodes = null;// mainContainer.GetFieldT(KeyStore.Data, ListField);
+ if (!mainNodes) {
+ mainNodes = new ListField<Document>();
+ }
+ // mainNodes.Data.push(doc6);
+ // mainNodes.Data.push(doc2);
+ mainNodes.Data.push(doc4);
+ // mainNodes.Data.push(doc3);
+ // mainNodes.Data.push(doc5);
+ // mainNodes.Data.push(doc1);
+ //mainNodes.Data.push(doc2);
+ mainNodes.Data.push(doc6);
+ mainContainer.SetField(KeyStore.Data, mainNodes);
}
-// mainNodes.Data.push(doc1);
-// mainNodes.Data.push(doc2);
-mainNodes.Data.push(doc4);
-// mainNodes.Data.push(doc3);
-mainNodes.Data.push(doc5);
-// mainNodes.Data.push(doc1);
-//mainNodes.Data.push(doc2);
-mainNodes.Data.push(doc6);
-mainContainer.SetField(KeyStore.Data, mainNodes);
//}
//);
ReactDOM.render((
<div style={{ position: "absolute", width: "100%", height: "100%" }}>
- <DocumentView Document={mainContainer} ContainingCollectionView={undefined} ContainingDocumentView={undefined} />
+ <DocumentView Document={mainContainer} ContainingCollectionView={undefined} DocumentView={undefined} />
<DocumentDecorations />
<ContextMenu />
</div>),
diff --git a/src/documents/Documents.ts b/src/documents/Documents.ts
index 932abf7bc..b69b79dd3 100644
--- a/src/documents/Documents.ts
+++ b/src/documents/Documents.ts
@@ -3,12 +3,13 @@ import { KeyStore } from "../fields/Key";
import { TextField } from "../fields/TextField";
import { NumberField } from "../fields/NumberField";
import { ListField } from "../fields/ListField";
-import { FieldTextBox } from "../views/nodes/FieldTextBox";
+import { FormattedTextBox } from "../views/nodes/FormattedTextBox";
import { CollectionDockingView } from "../views/collections/CollectionDockingView";
import { CollectionSchemaView } from "../views/collections/CollectionSchemaView";
import { ImageField } from "../fields/ImageField";
import { RichTextField } from "../fields/RichTextField";
import { ImageBox } from "../views/nodes/ImageBox";
+import { CollectionFreeFormView } from "../views/collections/CollectionFreeFormView";
interface DocumentOptions {
x?: number;
@@ -48,7 +49,7 @@ export namespace Documents {
textProto.SetField(KeyStore.Y, new NumberField(0));
textProto.SetField(KeyStore.Width, new NumberField(300));
textProto.SetField(KeyStore.Height, new NumberField(150));
- textProto.SetField(KeyStore.Layout, new TextField(FieldTextBox.LayoutString()));
+ textProto.SetField(KeyStore.Layout, new TextField(FormattedTextBox.LayoutString()));
textProto.SetField(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
}
return textProto;
@@ -138,7 +139,7 @@ export namespace Documents {
collectionProto.SetField(KeyStore.PanY, new NumberField(0));
collectionProto.SetField(KeyStore.Width, new NumberField(300));
collectionProto.SetField(KeyStore.Height, new NumberField(300));
- collectionProto.SetField(KeyStore.Layout, new TextField('<CollectionFreeFormView Document={Document} fieldKey={DataKey} ContainingDocumentView={ContainingDocumentView}/>'));
+ collectionProto.SetField(KeyStore.Layout, new TextField(CollectionFreeFormView.LayoutString()));
collectionProto.SetField(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
}
return collectionProto;
diff --git a/src/util/DragManager.ts b/src/util/DragManager.ts
index b4132a222..63d6a88f8 100644
--- a/src/util/DragManager.ts
+++ b/src/util/DragManager.ts
@@ -1,5 +1,5 @@
import { Opt } from "../fields/Field";
-import { DocumentView } from "../views/nodes/DocumentView";
+import { CollectionFreeFormDocumentView } from "../views/nodes/CollectionFreeFormDocumentView";
import { DocumentDecorations } from "../DocumentDecorations";
import { SelectionManager } from "./SelectionManager";
import { CollectionDockingView } from "../views/collections/CollectionDockingView";
diff --git a/src/util/Scripting.ts b/src/util/Scripting.ts
index e8c036c43..94339e7fe 100644
--- a/src/util/Scripting.ts
+++ b/src/util/Scripting.ts
@@ -1,4 +1,5 @@
// import * as ts from "typescript"
+let ts = (window as any).ts;
import { Opt, Field } from "../fields/Field";
import { Document as DocumentImport } from "../fields/Document";
import { NumberField as NumberFieldImport } from "../fields/NumberField";
@@ -13,7 +14,7 @@ export interface ExecutableScript {
}
function ExecScript(script: string, diagnostics: Opt<any[]>): ExecutableScript {
- const compiled = !(diagnostics && diagnostics.some(diag => diag.category == 1));
+ const compiled = !(diagnostics && diagnostics.some(diag => diag.category == ts.DiagnosticCategory.Error));
let func: () => Opt<Field>;
if (compiled) {
diff --git a/src/util/SelectionManager.ts b/src/util/SelectionManager.ts
index 2a63248c4..0759ae110 100644
--- a/src/util/SelectionManager.ts
+++ b/src/util/SelectionManager.ts
@@ -1,13 +1,13 @@
-import { DocumentView } from "../views/nodes/DocumentView";
+import { CollectionFreeFormDocumentView } from "../views/nodes/CollectionFreeFormDocumentView";
import { observable, action } from "mobx";
export namespace SelectionManager {
class Manager {
@observable
- SelectedDocuments: Array<DocumentView> = [];
+ SelectedDocuments: Array<CollectionFreeFormDocumentView> = [];
@action
- SelectDoc(doc: DocumentView, ctrlPressed: boolean): void {
+ SelectDoc(doc: CollectionFreeFormDocumentView, ctrlPressed: boolean): void {
// if doc is not in SelectedDocuments, add it
if (!ctrlPressed) {
manager.SelectedDocuments = [];
@@ -21,11 +21,11 @@ export namespace SelectionManager {
const manager = new Manager;
- export function SelectDoc(doc: DocumentView, ctrlPressed: boolean): void {
+ export function SelectDoc(doc: CollectionFreeFormDocumentView, ctrlPressed: boolean): void {
manager.SelectDoc(doc, ctrlPressed)
}
- export function IsSelected(doc: DocumentView): boolean {
+ export function IsSelected(doc: CollectionFreeFormDocumentView): boolean {
return manager.SelectedDocuments.indexOf(doc) !== -1;
}
@@ -33,7 +33,7 @@ export namespace SelectionManager {
manager.SelectedDocuments = []
}
- export function SelectedDocuments(): Array<DocumentView> {
+ export function SelectedDocuments(): Array<CollectionFreeFormDocumentView> {
return manager.SelectedDocuments;
}
} \ No newline at end of file
diff --git a/src/views/collections/CollectionDockingView.tsx b/src/views/collections/CollectionDockingView.tsx
index 177e3510a..92b5e563c 100644
--- a/src/views/collections/CollectionDockingView.tsx
+++ b/src/views/collections/CollectionDockingView.tsx
@@ -20,11 +20,11 @@ import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from
export class CollectionDockingView extends CollectionViewBase {
private static UseGoldenLayout = true;
- public static LayoutString() { return '<CollectionDockingView Document={Document} fieldKey={DataKey} ContainingDocumentView={ContainingDocumentView}/>'; }
+ public static LayoutString() { return CollectionViewBase.LayoutString("CollectionDockingView"); }
private _containerRef = React.createRef<HTMLDivElement>();
@computed
private get modelForFlexLayout() {
- const { fieldKey, Document: Document } = this.props;
+ const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []);
var docs = value.map(doc => {
return { type: 'tabset', weight: 50, selected: 0, children: [{ type: "tab", name: doc.Title, component: doc.Id }] };
@@ -40,7 +40,7 @@ export class CollectionDockingView extends CollectionViewBase {
}
@computed
private get modelForGoldenLayout(): any {
- const { fieldKey, Document: Document } = this.props;
+ const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []);
var docs = value.map(doc => {
return { type: 'component', componentName: 'documentViewComponent', componentState: { doc: doc } };
@@ -92,11 +92,11 @@ export class CollectionDockingView extends CollectionViewBase {
if (component === "button") {
return <button>{node.getName()}</button>;
}
- const { fieldKey, Document: Document } = this.props;
+ const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []);
for (var i: number = 0; i < value.length; i++) {
if (value[i].Id === component) {
- return (<DocumentView key={value[i].Id} ContainingCollectionView={this} Document={value[i]} ContainingDocumentView={this.props.ContainingDocumentView} />);
+ return (<DocumentView key={value[i].Id} ContainingCollectionView={this} Document={value[i]} DocumentView={undefined} />);
}
}
if (component === "text") {
@@ -237,7 +237,7 @@ export class CollectionDockingView extends CollectionViewBase {
container.getElement().html("<div id='" + containingDiv + "'></div>");
setTimeout(function () {
ReactDOM.render((
- <DocumentView key={state.doc.Id} Document={state.doc} ContainingCollectionView={me} ContainingDocumentView={me.props.ContainingDocumentView} />
+ <DocumentView key={state.doc.Id} Document={state.doc} ContainingCollectionView={me} DocumentView={undefined} />
),
document.getElementById(containingDiv)
);
@@ -252,10 +252,10 @@ export class CollectionDockingView extends CollectionViewBase {
render() {
- const { fieldKey, Document: Document } = this.props;
+ const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []);
// bcz: not sure why, but I need these to force the flexlayout to update when the collection size changes.
- var s = this.props.ContainingDocumentView!.ScalingToScreenSpace;
+ var s = this.props.ContainingDocumentView != undefined ? this.props.ContainingDocumentView!.ScalingToScreenSpace : 1;
var w = Document.GetFieldValue(KeyStore.Width, NumberField, Number(0)) / s;
var h = Document.GetFieldValue(KeyStore.Height, NumberField, Number(0)) / s;
diff --git a/src/views/collections/CollectionFreeFormView.tsx b/src/views/collections/CollectionFreeFormView.tsx
index ab2aeee64..cc907b2cc 100644
--- a/src/views/collections/CollectionFreeFormView.tsx
+++ b/src/views/collections/CollectionFreeFormView.tsx
@@ -3,7 +3,7 @@ import { Key, KeyStore } from "../../fields/Key";
import React = require("react");
import { action, observable, computed } from "mobx";
import { Document } from "../../fields/Document";
-import { DocumentView } from "../nodes/DocumentView";
+import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
import { ListField } from "../../fields/ListField";
import { NumberField } from "../../fields/NumberField";
import { SSL_OP_SINGLE_DH_USE } from "constants";
@@ -12,9 +12,11 @@ import { DragManager } from "../../util/DragManager";
import "./CollectionFreeFormView.scss";
import { Utils } from "../../Utils";
import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
+import { SelectionManager } from "../../util/SelectionManager";
@observer
export class CollectionFreeFormView extends CollectionViewBase {
+ public static LayoutString() { return CollectionViewBase.LayoutString("CollectionFreeFormView"); }
private _containerRef = React.createRef<HTMLDivElement>();
private _canvasRef = React.createRef<HTMLDivElement>();
private _nodeContainerRef = React.createRef<HTMLDivElement>();
@@ -28,7 +30,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
@action
drop = (e: Event, de: DragManager.DropEvent) => {
const doc = de.data["document"];
- if (doc instanceof DocumentView) {
+ var me = this;
+ if (doc instanceof CollectionFreeFormDocumentView) {
if (doc.props.ContainingCollectionView && doc.props.ContainingCollectionView !== this) {
doc.props.ContainingCollectionView.removeDocument(doc.props.Document);
this.addDocument(doc.props.Document);
@@ -58,9 +61,14 @@ export class CollectionFreeFormView extends CollectionViewBase {
}
}
+ downactive: boolean = false;
@action
onPointerDown = (e: React.PointerEvent): void => {
- if (e.button === 2 && this.active) {
+ var me = this;
+ me.downactive = this.active;
+ var title = this.props.DocumentForCollection.Title;
+ if ((e.button === 2 && this.active) ||
+ !e.defaultPrevented) {
document.removeEventListener("pointermove", this.onPointerMove);
document.addEventListener("pointermove", this.onPointerMove);
document.removeEventListener("pointerup", this.onPointerUp);
@@ -75,21 +83,25 @@ export class CollectionFreeFormView extends CollectionViewBase {
document.removeEventListener("pointermove", this.onPointerMove);
document.removeEventListener("pointerup", this.onPointerUp);
e.stopPropagation();
+ SelectionManager.DeselectAll();
}
@action
onPointerMove = (e: PointerEvent): void => {
- if (!e.cancelBubble) {
+ var me = this;
+ var act = me.active;
+ var title = me.props.DocumentForCollection.Title;
+ if (!e.cancelBubble && this.active) {
e.preventDefault();
e.stopPropagation();
let currScale: number = this.props.ContainingDocumentView!.ScalingToScreenSpace;
- let x = this.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0));
- let y = this.props.Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0));
- this.props.Document.SetFieldValue(KeyStore.PanX, x + (e.pageX - this._lastX) / currScale, NumberField);
- this.props.Document.SetFieldValue(KeyStore.PanY, y + (e.pageY - this._lastY) / currScale, NumberField);
- this._lastX = e.pageX;
- this._lastY = e.pageY;
+ let x = this.props.DocumentForCollection.GetFieldValue(KeyStore.PanX, NumberField, Number(0));
+ let y = this.props.DocumentForCollection.GetFieldValue(KeyStore.PanY, NumberField, Number(0));
+ this.props.DocumentForCollection.SetFieldValue(KeyStore.PanX, x + (e.pageX - this._lastX) / currScale, NumberField);
+ this.props.DocumentForCollection.SetFieldValue(KeyStore.PanY, y + (e.pageY - this._lastY) / currScale, NumberField);
}
+ this._lastX = e.pageX;
+ this._lastY = e.pageY;
}
@action
@@ -106,9 +118,9 @@ export class CollectionFreeFormView extends CollectionViewBase {
let dx = ContainerX - newContainerX;
let dy = ContainerY - newContainerY;
- this.props.Document.SetField(KeyStore.Scale, new NumberField(deltaScale));
- this.props.Document.SetFieldValue(KeyStore.PanX, Panxx + dx, NumberField);
- this.props.Document.SetFieldValue(KeyStore.PanY, Panyy + dy, NumberField);
+ this.props.DocumentForCollection.SetField(KeyStore.Scale, new NumberField(deltaScale));
+ this.props.DocumentForCollection.SetFieldValue(KeyStore.PanX, Panxx + dx, NumberField);
+ this.props.DocumentForCollection.SetFieldValue(KeyStore.PanY, Panyy + dy, NumberField);
}
@action
@@ -118,8 +130,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
let fReader = new FileReader()
let file = e.dataTransfer.items[0].getAsFile();
let that = this;
- const panx: number = this.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0));
- const pany: number = this.props.Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0));
+ const panx: number = this.props.DocumentForCollection.GetFieldValue(KeyStore.PanX, NumberField, Number(0));
+ const pany: number = this.props.DocumentForCollection.GetFieldValue(KeyStore.PanY, NumberField, Number(0));
let x = e.pageX - panx
let y = e.pageY - pany
@@ -129,10 +141,10 @@ export class CollectionFreeFormView extends CollectionViewBase {
let doc = Documents.ImageDocument(url, {
x: x, y: y
})
- let docs = that.props.Document.GetFieldT(KeyStore.Data, ListField);
+ let docs = that.props.DocumentForCollection.GetFieldT(KeyStore.Data, ListField);
if (!docs) {
docs = new ListField<Document>();
- that.props.Document.SetField(KeyStore.Data, docs)
+ that.props.DocumentForCollection.SetField(KeyStore.Data, docs)
}
docs.Data.push(doc);
}
@@ -147,8 +159,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
}
@action
- bringToFront(doc: DocumentView) {
- const { fieldKey, Document: Document } = this.props;
+ bringToFront(doc: CollectionFreeFormDocumentView) {
+ const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
const value: Document[] = Document.GetListField<Document>(fieldKey, []);
var topmost = value.reduce((topmost, d) => Math.max(d.GetNumberField(KeyStore.ZIndex, 0), topmost), -1000);
@@ -165,7 +177,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
}
render() {
- const { fieldKey, Document: Document } = this.props;
+ const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
const value: Document[] = Document.GetListField<Document>(fieldKey, []);
const panx: number = Document.GetNumberField(KeyStore.PanX, 0);
const pany: number = Document.GetNumberField(KeyStore.PanY, 0);
@@ -186,7 +198,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
<div className="node-container" ref={this._nodeContainerRef}>
{value.map(doc => {
- return (<DocumentView key={doc.Id} ContainingCollectionView={this} Document={doc} ContainingDocumentView={this.props.ContainingDocumentView} />);
+ return (<CollectionFreeFormDocumentView key={doc.Id} ContainingCollectionView={this} Document={doc} DocumentView={undefined} />);
})}
</div>
</div>
diff --git a/src/views/collections/CollectionSchemaView.tsx b/src/views/collections/CollectionSchemaView.tsx
index 420a68cc9..8503aaf1e 100644
--- a/src/views/collections/CollectionSchemaView.tsx
+++ b/src/views/collections/CollectionSchemaView.tsx
@@ -1,4 +1,3 @@
-import { DocumentContents } from "../nodes/DocumentView";
import React = require("react")
import ReactTable, { ReactTableDefaults, CellInfo, ComponentPropsGetterRC, ComponentPropsGetterR } from "react-table";
import { observer } from "mobx-react";
@@ -11,22 +10,20 @@ import SplitPane from "react-split-pane"
import "./CollectionSchemaView.scss"
import { ScrollBox } from "../../util/ScrollBox";
import { CollectionViewBase } from "./CollectionViewBase";
+import { DocumentView } from "../nodes/DocumentView";
@observer
export class CollectionSchemaView extends CollectionViewBase {
- public static LayoutString() { return '<CollectionSchemaView Document={Document} fieldKey={DataKey} ContainingDocumentView={ContainingDocumentView}/>'; }
+ public static LayoutString() { return CollectionViewBase.LayoutString("CollectionSchemaView"); }
@observable
selectedIndex = 0;
renderCell = (rowProps: CellInfo) => {
- if (!this.props.ContainingDocumentView) {
- return <div></div>
- }
let props: FieldViewProps = {
doc: rowProps.value[0],
fieldKey: rowProps.value[1],
- documentViewContainer: this.props.ContainingDocumentView
+ DocumentViewForField: undefined
}
return (
<FieldView {...props} />
@@ -71,15 +68,13 @@ export class CollectionSchemaView extends CollectionViewBase {
}
render() {
- const { Document, fieldKey } = this.props;
+ const { DocumentForCollection: Document, CollectionFieldKey: fieldKey } = this.props;
const children = Document.GetListField<Document>(fieldKey, []);
const columns = Document.GetListField(KS.ColumnsKey,
[KS.Title, KS.Data, KS.Author])
let content;
if (this.selectedIndex != -1) {
- content = (<DocumentContents Document={children[this.selectedIndex]}
- ContainingDocumentView={this.props.ContainingDocumentView}
- ContainingCollectionView={undefined} />)
+ content = (<DocumentView Document={children[this.selectedIndex]} DocumentView={undefined} ContainingCollectionView={this} />)
} else {
content = <div />
}
diff --git a/src/views/collections/CollectionViewBase.tsx b/src/views/collections/CollectionViewBase.tsx
index bfded71d9..76145f12b 100644
--- a/src/views/collections/CollectionViewBase.tsx
+++ b/src/views/collections/CollectionViewBase.tsx
@@ -9,11 +9,12 @@ import { ContextMenu } from "../ContextMenu";
import React = require("react");
import { DocumentView } from "../nodes/DocumentView";
import { CollectionDockingView } from "./CollectionDockingView";
+import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
export interface CollectionViewProps {
- fieldKey: Key;
- Document: Document;
+ CollectionFieldKey: Key;
+ DocumentForCollection: Document;
ContainingDocumentView: Opt<DocumentView>;
}
@@ -22,9 +23,12 @@ export const COLLECTION_BORDER_WIDTH = 2;
@observer
export class CollectionViewBase extends React.Component<CollectionViewProps> {
+ public static LayoutString(collectionType: string) {
+ return `<${collectionType} DocumentForCollection={Document} CollectionFieldKey={DataKey} ContainingDocumentView={DocumentView}/>`;
+ }
@computed
public get active(): boolean {
- var isSelected = (this.props.ContainingDocumentView != undefined && SelectionManager.IsSelected(this.props.ContainingDocumentView));
+ var isSelected = (this.props.ContainingDocumentView instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.ContainingDocumentView));
var childSelected = SelectionManager.SelectedDocuments().some(view => view.props.ContainingCollectionView == this);
var topMost = this.props.ContainingDocumentView != undefined && (
this.props.ContainingDocumentView.props.ContainingCollectionView == undefined ||
@@ -34,14 +38,14 @@ export class CollectionViewBase extends React.Component<CollectionViewProps> {
@action
addDocument = (doc: Document): void => {
//TODO This won't create the field if it doesn't already exist
- const value = this.props.Document.GetFieldValue(this.props.fieldKey, ListField, new Array<Document>())
+ const value = this.props.DocumentForCollection.GetFieldValue(this.props.CollectionFieldKey, ListField, new Array<Document>())
value.push(doc);
}
@action
removeDocument = (doc: Document): void => {
//TODO This won't create the field if it doesn't already exist
- const value = this.props.Document.GetFieldValue(this.props.fieldKey, ListField, new Array<Document>())
+ const value = this.props.DocumentForCollection.GetFieldValue(this.props.CollectionFieldKey, ListField, new Array<Document>())
if (value.indexOf(doc) !== -1) {
value.splice(value.indexOf(doc), 1)
diff --git a/src/views/nodes/CollectionFreeFormDocumentView.tsx b/src/views/nodes/CollectionFreeFormDocumentView.tsx
new file mode 100644
index 000000000..ebe6d411c
--- /dev/null
+++ b/src/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -0,0 +1,222 @@
+import { action, computed } from "mobx";
+import { observer } from "mobx-react";
+import { Key, KeyStore } from "../../fields/Key";
+import { NumberField } from "../../fields/NumberField";
+import { DragManager } from "../../util/DragManager";
+import { SelectionManager } from "../../util/SelectionManager";
+import { CollectionDockingView } from "../collections/CollectionDockingView";
+import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
+import { ContextMenu } from "../ContextMenu";
+import "./NodeView.scss";
+import React = require("react");
+import { DocumentView, DocumentViewProps } from "./DocumentView";
+
+
+@observer
+export class CollectionFreeFormDocumentView extends DocumentView {
+ private _contextMenuCanOpen = false;
+ private _downX: number = 0;
+ private _downY: number = 0;
+
+ constructor(props: DocumentViewProps) {
+ super(props);
+ }
+ get screenRect(): ClientRect | DOMRect {
+ if (this._mainCont.current) {
+ return this._mainCont.current.getBoundingClientRect();
+ }
+ return new DOMRect();
+ }
+
+ @computed
+ get x(): number {
+ return this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0));
+ }
+
+ @computed
+ get y(): number {
+ return this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0));
+ }
+
+ set x(x: number) {
+ this.props.Document.SetFieldValue(KeyStore.X, x, NumberField)
+ }
+
+ set y(y: number) {
+ this.props.Document.SetFieldValue(KeyStore.Y, y, NumberField)
+ }
+
+ @computed
+ get transform(): string {
+ return `translate(${this.x}px, ${this.y}px)`;
+ }
+
+ @computed
+ get width(): number {
+ return this.props.Document.GetFieldValue(KeyStore.Width, NumberField, Number(0));
+ }
+
+ set width(w: number) {
+ this.props.Document.SetFieldValue(KeyStore.Width, w, NumberField)
+ }
+
+ @computed
+ get height(): number {
+ return this.props.Document.GetFieldValue(KeyStore.Height, NumberField, Number(0));
+ }
+
+ set height(h: number) {
+ this.props.Document.SetFieldValue(KeyStore.Height, h, NumberField)
+ }
+
+ @computed
+ get zIndex(): number {
+ return this.props.Document.GetFieldValue(KeyStore.ZIndex, NumberField, Number(0));
+ }
+
+ set zIndex(h: number) {
+ this.props.Document.SetFieldValue(KeyStore.ZIndex, h, NumberField)
+ }
+
+ @action
+ dragComplete = (e: DragManager.DragCompleteEvent) => {
+ }
+
+ @computed
+ get active(): boolean {
+ return SelectionManager.IsSelected(this) || this.props.ContainingCollectionView === undefined || this.props.ContainingCollectionView!.active;
+ }
+
+ @computed
+ get topMost(): boolean {
+ return this.props.ContainingCollectionView == undefined || this.props.ContainingCollectionView instanceof CollectionDockingView;
+ }
+
+ onPointerDown = (e: React.PointerEvent): void => {
+ this._downX = e.clientX;
+ this._downY = e.clientY;
+ var me = this;
+ if (e.shiftKey && e.buttons === 1) {
+ CollectionDockingView.StartOtherDrag(this._mainCont.current!, this.props.Document);
+ e.stopPropagation();
+ return;
+ }
+ this._contextMenuCanOpen = e.button == 2;
+ if (this.active && !e.isDefaultPrevented()) {
+ e.stopPropagation();
+ if (e.buttons === 2) {
+ e.preventDefault();
+ }
+ document.removeEventListener("pointermove", this.onPointerMove)
+ document.addEventListener("pointermove", this.onPointerMove);
+ document.removeEventListener("pointerup", this.onPointerUp)
+ document.addEventListener("pointerup", this.onPointerUp);
+ }
+ }
+
+ onPointerMove = (e: PointerEvent): void => {
+ if (e.cancelBubble) {
+ this._contextMenuCanOpen = false;
+ return;
+ }
+ if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
+ this._contextMenuCanOpen = false;
+ if (this._mainCont.current != null && !this.topMost) {
+ this._contextMenuCanOpen = false;
+ const rect = this.screenRect;
+ let dragData: { [id: string]: any } = {};
+ dragData["document"] = this;
+ dragData["xOffset"] = e.x - rect.left;
+ dragData["yOffset"] = e.y - rect.top;
+ DragManager.StartDrag(this._mainCont.current, dragData, {
+ handlers: {
+ dragComplete: this.dragComplete,
+ },
+ hideSource: true
+ })
+ }
+ }
+ e.stopPropagation();
+ e.preventDefault();
+ }
+
+ onPointerUp = (e: PointerEvent): void => {
+ document.removeEventListener("pointermove", this.onPointerMove)
+ document.removeEventListener("pointerup", this.onPointerUp)
+ e.stopPropagation();
+ if (Math.abs(e.clientX - this._downX) < 4 && Math.abs(e.clientY - this._downY) < 4) {
+ SelectionManager.SelectDoc(this, e.ctrlKey);
+ }
+ }
+
+ openRight = (e: React.MouseEvent): void => {
+ CollectionDockingView.AddRightSplit(this.props.Document);
+ }
+
+ deleteClicked = (e: React.MouseEvent): void => {
+ if (this.props.ContainingCollectionView instanceof CollectionFreeFormView) {
+ this.props.ContainingCollectionView.removeDocument(this.props.Document)
+ }
+ }
+ @action
+ fullScreenClicked = (e: React.MouseEvent): void => {
+ CollectionDockingView.OpenFullScreen(this.props.Document);
+ ContextMenu.Instance.clearItems();
+ ContextMenu.Instance.addItem({ description: "Close Full Screen", event: this.closeFullScreenClicked });
+ ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+ }
+ @action
+ closeFullScreenClicked = (e: React.MouseEvent): void => {
+ CollectionDockingView.CloseFullScreen();
+ ContextMenu.Instance.clearItems();
+ ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
+ ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+ }
+
+ @action
+ onContextMenu = (e: React.MouseEvent): void => {
+ if (!SelectionManager.IsSelected(this)) {
+ return;
+ }
+ e.preventDefault()
+
+ if (!this._contextMenuCanOpen) {
+ return;
+ }
+
+ if (this.topMost) {
+ ContextMenu.Instance.clearItems()
+ ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
+ ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+ }
+ else {
+ // DocumentViews should stop propogation of this event
+ e.stopPropagation();
+
+ ContextMenu.Instance.clearItems();
+ ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
+ ContextMenu.Instance.addItem({ description: "Open Right", event: this.openRight })
+ ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked })
+ ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+ SelectionManager.SelectDoc(this, e.ctrlKey);
+ }
+ }
+
+ render() {
+ var freestyling = this.props.ContainingCollectionView instanceof CollectionFreeFormView;
+ return (
+ <div className="node" ref={this._mainCont} style={{
+ transform: freestyling ? this.transform : "",
+ width: freestyling ? this.width : "100%",
+ height: freestyling ? this.height : "100%",
+ position: freestyling ? "absolute" : "relative",
+ zIndex: freestyling ? this.zIndex : 0,
+ }}
+ onContextMenu={this.onContextMenu}
+ onPointerDown={this.onPointerDown}>
+
+ <DocumentView {...this.props} DocumentView={this} />
+ </div>
+ );
+ }
+} \ No newline at end of file
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index dd47d4455..a1262e2ba 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -6,29 +6,29 @@ 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 { ContextMenu } from "../ContextMenu";
-import { FieldTextBox } from "../nodes/FieldTextBox";
+import { CollectionSchemaView } from "../collections/CollectionSchemaView";
+import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "../collections/CollectionViewBase";
+import { FormattedTextBox } from "../nodes/FormattedTextBox";
import { ImageBox } from "../nodes/ImageBox";
import "./NodeView.scss";
import React = require("react");
const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
-interface DocumentViewProps {
+export interface DocumentViewProps {
Document: Document;
+ DocumentView: Opt<DocumentView> // needed only to set ContainingDocumentView on CollectionViewProps when invoked from JsxParser -- is there a better way?
ContainingCollectionView: Opt<CollectionViewBase>;
- ContainingDocumentView: Opt<DocumentView>;
}
@observer
-export class DocumentContents extends React.Component<DocumentViewProps> {
+export class DocumentView 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,124 +43,15 @@ export class DocumentContents extends React.Component<DocumentViewProps> {
get layoutFields(): Key[] {
return this.props.Document.GetFieldValue(KeyStore.LayoutFields, ListField, new Array<Key>());
}
- render() {
- let doc = this.props.Document;
- let bindings = { ...this.props } as any;
- for (const key of this.layoutKeys) {
- bindings[key.Name + "Key"] = key;
- }
- for (const key of this.layoutFields) {
- let field = doc.GetField(key);
- if (field) {
- bindings[key.Name] = field.GetValue();
- }
- }
- return (
- <JsxParser
- components={{ FieldTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
- bindings={bindings}
- jsx={this.layout}
- showWarnings={true}
- onError={(test: any) => { console.log(test) }}
- />
- )
- }
-}
-
-@observer
-export class DocumentView extends React.Component<DocumentViewProps> {
- private _mainCont = React.createRef<HTMLDivElement>();
- private _contextMenuCanOpen = false;
- private _downX: number = 0;
- private _downY: number = 0;
-
- constructor(props: DocumentViewProps) {
- super(props);
- }
- get screenRect(): ClientRect | DOMRect {
- if (this._mainCont.current) {
- return this._mainCont.current.getBoundingClientRect();
- }
- return new DOMRect();
- }
-
- get MainContent() {
- return this._mainCont;
- }
-
- @computed
- get x(): number {
- return this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0));
- }
-
- @computed
- get y(): number {
- return this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0));
- }
-
- set x(x: number) {
- this.props.Document.SetFieldValue(KeyStore.X, x, NumberField)
- }
-
- set y(y: number) {
- this.props.Document.SetFieldValue(KeyStore.Y, y, NumberField)
- }
-
- @computed
- get transform(): string {
- return `translate(${this.x}px, ${this.y}px)`;
- }
-
- @computed
- get width(): number {
- return this.props.Document.GetFieldValue(KeyStore.Width, NumberField, Number(0));
- }
-
- set width(w: number) {
- this.props.Document.SetFieldValue(KeyStore.Width, w, NumberField)
- }
-
- @computed
- get height(): number {
- return this.props.Document.GetFieldValue(KeyStore.Height, NumberField, Number(0));
- }
-
- set height(h: number) {
- this.props.Document.SetFieldValue(KeyStore.Height, h, NumberField)
- }
-
- @computed
- get zIndex(): number {
- return this.props.Document.GetFieldValue(KeyStore.ZIndex, NumberField, Number(0));
- }
-
- set zIndex(h: number) {
- this.props.Document.SetFieldValue(KeyStore.ZIndex, h, NumberField)
- }
-
- @action
- dragComplete = (e: DragManager.DragCompleteEvent) => {
- }
-
- @computed
- get active(): boolean {
- return SelectionManager.IsSelected(this) || this.props.ContainingCollectionView === undefined || this.props.ContainingCollectionView!.active;
- }
-
- @computed
- get topMost(): boolean {
- 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;
+ if (this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView.props.ContainingDocumentView != undefined) {
+ let ss = this.props.ContainingCollectionView.props.DocumentForCollection.GetFieldValue(KeyStore.Scale, NumberField, Number(1));
+ return this.props.ContainingCollectionView.props.ContainingDocumentView.ScalingToScreenSpace * ss;
}
return 1;
}
@@ -171,8 +62,8 @@ export class DocumentView extends React.Component<DocumentViewProps> {
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) :
+ let { LocalX: parentX, LocalY: parentY } = this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView.props.ContainingDocumentView != undefined ?
+ this.props.ContainingCollectionView.props.ContainingDocumentView.TransformToLocalPoint(screenX, screenY) :
{ LocalX: screenX, LocalY: screenY };
let ContainerX: number = parentX - COLLECTION_BORDER_WIDTH;
let ContainerY: number = parentY - COLLECTION_BORDER_WIDTH;
@@ -183,7 +74,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
// 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!);
+ var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this.MainContent.current!);
Xx = rx - COLLECTION_BORDER_WIDTH;
Yy = ry - COLLECTION_BORDER_WIDTH;
}
@@ -208,7 +99,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
// 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!);
+ var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this.MainContent.current!);
Xx = rx - COLLECTION_BORDER_WIDTH;
Yy = ry - COLLECTION_BORDER_WIDTH;
}
@@ -220,7 +111,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
// 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;
+ let containingDocView = this.props.ContainingCollectionView != undefined ? this.props.ContainingCollectionView.props.ContainingDocumentView : undefined;
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;
@@ -232,130 +123,31 @@ export class DocumentView extends React.Component<DocumentViewProps> {
return { ScreenX: parentX, ScreenY: parentY };
}
- onPointerDown = (e: React.PointerEvent): void => {
- this._downX = e.clientX;
- this._downY = e.clientY;
- var me = this;
- if (e.shiftKey && e.buttons === 1) {
- CollectionDockingView.StartOtherDrag(this._mainCont.current!, this.props.Document);
- e.stopPropagation();
- return;
- }
- this._contextMenuCanOpen = e.button == 2;
- if (this.active && !e.isDefaultPrevented()) {
- e.stopPropagation();
- if (e.buttons === 2) {
- e.preventDefault();
- }
- document.removeEventListener("pointermove", this.onPointerMove)
- document.addEventListener("pointermove", this.onPointerMove);
- document.removeEventListener("pointerup", this.onPointerUp)
- document.addEventListener("pointerup", this.onPointerUp);
- }
- }
- onPointerMove = (e: PointerEvent): void => {
- if (e.cancelBubble) {
- this._contextMenuCanOpen = false;
- return;
+ render() {
+ let doc = this.props.Document;
+ let bindings = { ...this.props } as any;
+ for (const key of this.layoutKeys) {
+ bindings[key.Name + "Key"] = key;
}
- if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
- this._contextMenuCanOpen = false;
- if (this._mainCont.current != null && !this.topMost) {
- this._contextMenuCanOpen = false;
- const rect = this.screenRect;
- let dragData: { [id: string]: any } = {};
- dragData["document"] = this;
- dragData["xOffset"] = e.x - rect.left;
- dragData["yOffset"] = e.y - rect.top;
- DragManager.StartDrag(this._mainCont.current, dragData, {
- handlers: {
- dragComplete: this.dragComplete,
- },
- hideSource: true
- })
+ if (bindings.DocumentView === undefined)
+ bindings.DocumentView = this;
+ for (const key of this.layoutFields) {
+ let field = doc.GetField(key);
+ if (field) {
+ bindings[key.Name] = field.GetValue();
}
}
- e.stopPropagation();
- e.preventDefault();
- }
-
- onPointerUp = (e: PointerEvent): void => {
- document.removeEventListener("pointermove", this.onPointerMove)
- document.removeEventListener("pointerup", this.onPointerUp)
- e.stopPropagation();
- if (Math.abs(e.clientX - this._downX) < 4 && Math.abs(e.clientY - this._downY) < 4) {
- SelectionManager.SelectDoc(this, e.ctrlKey);
- }
- }
-
- openRight = (e: React.MouseEvent): void => {
- CollectionDockingView.AddRightSplit(this.props.Document);
- }
-
- deleteClicked = (e: React.MouseEvent): void => {
- if (this.props.ContainingCollectionView instanceof CollectionFreeFormView) {
- this.props.ContainingCollectionView.removeDocument(this.props.Document)
- }
- }
- @action
- fullScreenClicked = (e: React.MouseEvent): void => {
- CollectionDockingView.OpenFullScreen(this.props.Document);
- ContextMenu.Instance.clearItems();
- ContextMenu.Instance.addItem({ description: "Close Full Screen", event: this.closeFullScreenClicked });
- ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
- }
- @action
- closeFullScreenClicked = (e: React.MouseEvent): void => {
- CollectionDockingView.CloseFullScreen();
- ContextMenu.Instance.clearItems();
- ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
- ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
- }
-
- @action
- onContextMenu = (e: React.MouseEvent): void => {
- if (!SelectionManager.IsSelected(this)) {
- return;
- }
- e.preventDefault()
-
- if (!this._contextMenuCanOpen) {
- return;
- }
-
- if (this.topMost) {
- ContextMenu.Instance.clearItems()
- ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
- ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
- }
- else {
- // DocumentViews should stop propogation of this event
- e.stopPropagation();
-
- ContextMenu.Instance.clearItems();
- ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
- ContextMenu.Instance.addItem({ description: "Open Right", event: this.openRight })
- ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked })
- ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
- SelectionManager.SelectDoc(this, e.ctrlKey);
- }
- }
-
- render() {
- var freestyling = this.props.ContainingCollectionView instanceof CollectionFreeFormView;
return (
- <div className="node" ref={this._mainCont} style={{
- transform: freestyling ? this.transform : "",
- width: freestyling ? this.width : "100%",
- height: freestyling ? this.height : "100%",
- position: freestyling ? "absolute" : "relative",
- zIndex: freestyling ? this.zIndex : 0,
- }}
- onContextMenu={this.onContextMenu}
- onPointerDown={this.onPointerDown}>
- <DocumentContents {...this.props} ContainingDocumentView={this} />
+ <div className="node" ref={this._mainCont} style={{ width: "100%", height: "100%", }}>
+ <JsxParser
+ components={{ FormattedTextBox: FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
+ bindings={bindings}
+ jsx={this.layout}
+ showWarnings={true}
+ onError={(test: any) => { console.log(test) }}
+ />
</div>
- );
+ )
}
-} \ No newline at end of file
+}
diff --git a/src/views/nodes/FieldView.tsx b/src/views/nodes/FieldView.tsx
index 6c1cd956b..2a2355a23 100644
--- a/src/views/nodes/FieldView.tsx
+++ b/src/views/nodes/FieldView.tsx
@@ -1,5 +1,4 @@
import React = require("react")
-import { DocumentView } from "./DocumentView";
import { Document } from "../../fields/Document";
import { observer } from "mobx-react";
import { computed } from "mobx";
@@ -7,24 +6,26 @@ import { Field, Opt } from "../../fields/Field";
import { TextField } from "../../fields/TextField";
import { NumberField } from "../../fields/NumberField";
import { RichTextField } from "../../fields/RichTextField";
-import { FieldTextBox } from "./FieldTextBox";
+import { FormattedTextBox } from "./FormattedTextBox";
import { ImageField } from "../../fields/ImageField";
import { ImageBox } from "./ImageBox";
import { Key } from "../../fields/Key";
+import { DocumentView } from "./DocumentView";
//
// these properties get assigned through the render() method of the DocumentView when it creates this node.
// However, that only happens because the properties are "defined" in the markup for the field view.
-// See the LayoutString method on each field view : ImageBox, FieldTextBox, etc.
+// See the LayoutString method on each field view : ImageBox, FormattedTextBox, etc.
//
export interface FieldViewProps {
fieldKey: Key;
doc: Document;
- documentViewContainer: DocumentView
+ DocumentViewForField: Opt<DocumentView>
}
@observer
export class FieldView extends React.Component<FieldViewProps> {
+ public static LayoutString(fieldType: string) { return `<${fieldType} doc={Document} DocumentViewForField={DocumentView} fieldKey={DataKey} />`; }
@computed
get field(): Opt<Field> {
const { doc, fieldKey } = this.props;
@@ -39,7 +40,7 @@ export class FieldView extends React.Component<FieldViewProps> {
return <p>{field.Data}</p>
}
else if (field instanceof RichTextField) {
- return <FieldTextBox {...this.props} />
+ return <FormattedTextBox {...this.props} />
}
else if (field instanceof ImageField) {
return <ImageBox {...this.props} />
diff --git a/src/views/nodes/FieldTextBox.scss b/src/views/nodes/FormattedTextBox.scss
index b6ce2fabc..492367fce 100644
--- a/src/views/nodes/FieldTextBox.scss
+++ b/src/views/nodes/FormattedTextBox.scss
@@ -8,7 +8,7 @@
outline: none !important
}
-.fieldTextBox-cont {
+.formattedTextBox-cont {
background: white;
padding: 1vw;
} \ No newline at end of file
diff --git a/src/views/nodes/FieldTextBox.tsx b/src/views/nodes/FormattedTextBox.tsx
index 188b39a17..9c4b24226 100644
--- a/src/views/nodes/FieldTextBox.tsx
+++ b/src/views/nodes/FormattedTextBox.tsx
@@ -5,22 +5,21 @@ import { keymap } from "prosemirror-keymap";
import { schema } from "prosemirror-schema-basic";
import { EditorState, Transaction } from "prosemirror-state";
import { EditorView } from "prosemirror-view";
-import { Document } from "../../fields/Document";
import { Opt } from "../../fields/Field";
-import { Key } from "../../fields/Key";
import { SelectionManager } from "../../util/SelectionManager";
-import "./FieldTextBox.scss";
+import "./FormattedTextBox.scss";
import React = require("react")
import { RichTextField } from "../../fields/RichTextField";
-import { FieldViewProps } from "./FieldView";
+import { FieldViewProps, FieldView } from "./FieldView";
+import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView";
-// FieldTextBox: Displays an editable plain text node that maps to a specified Key of a Document
+// FormattedTextBox: Displays an editable plain text node that maps to a specified Key of a Document
//
-// HTML Markup: <FieldTextBox Doc={Document's ID} FieldKey={Key's name + "Key"}
+// HTML Markup: <FormattedTextBox Doc={Document's ID} FieldKey={Key's name + "Key"}
//
// In Code, the node's HTML is specified in the document's parameterized structure as:
-// document.SetField(KeyStore.Layout, "<FieldTextBox doc={doc} fieldKey={<KEYNAME>Key} />");
+// document.SetField(KeyStore.Layout, "<FormattedTextBox doc={doc} fieldKey={<KEYNAME>Key} />");
// and the node's binding to the specified document KEYNAME as:
// document.SetField(KeyStore.LayoutKeys, new ListField([KeyStore.<KEYNAME>]));
// The Jsx parser at run time will bind:
@@ -31,9 +30,9 @@ import { FieldViewProps } from "./FieldView";
// specified Key and assigns it to an HTML input node. When changes are made tot his node,
// this will edit the document and assign the new value to that field.
//
-export class FieldTextBox extends React.Component<FieldViewProps> {
+export class FormattedTextBox extends React.Component<FieldViewProps> {
- public static LayoutString() { return "<FieldTextBox doc={Document} documentViewContainer={ContainingDocumentView} fieldKey={DataKey} />"; }
+ public static LayoutString() { return FieldView.LayoutString("FormattedTextBox"); }
private _ref: React.RefObject<HTMLDivElement>;
private _editorView: Opt<EditorView>;
private _reactionDisposer: Opt<IReactionDisposer>;
@@ -110,12 +109,12 @@ 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.DocumentViewForField instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(me.props.DocumentViewForField)) {
e.stopPropagation();
}
}
render() {
- return (<div className="fieldTextBox-cont"
+ return (<div className="formattedTextBox-cont"
style={{
color: "initial",
whiteSpace: "initial"
diff --git a/src/views/nodes/ImageBox.tsx b/src/views/nodes/ImageBox.tsx
index 5137dbf38..dd201f20f 100644
--- a/src/views/nodes/ImageBox.tsx
+++ b/src/views/nodes/ImageBox.tsx
@@ -5,7 +5,8 @@ import { SelectionManager } from "../../util/SelectionManager";
import "./ImageBox.scss";
import React = require("react")
import { ImageField } from '../../fields/ImageField';
-import { FieldViewProps } from './FieldView';
+import { FieldViewProps, FieldView } from './FieldView';
+import { CollectionFreeFormDocumentView } from './CollectionFreeFormDocumentView';
interface ImageBoxState {
photoIndex: number,
@@ -14,7 +15,7 @@ interface ImageBoxState {
export class ImageBox extends React.Component<FieldViewProps, ImageBoxState> {
- public static LayoutString() { return "<ImageBox doc={Document} documentViewContainer={ContainingDocumentView} fieldKey={DataKey} />"; }
+ public static LayoutString() { return FieldView.LayoutString("ImageBox"); }
private _ref: React.RefObject<HTMLDivElement>;
private _downX: number = 0;
private _downY: number = 0;
@@ -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.DocumentViewForField instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.DocumentViewForField)) {
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.DocumentViewForField instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.DocumentViewForField)) {
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 2025-10-06 22:52:53 +0000