aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/Main.tsx10
-rw-r--r--src/documents/Documents.ts30
-rw-r--r--src/fields/Document.ts9
-rw-r--r--src/fields/Key.ts28
-rw-r--r--src/views/collections/CollectionFreeFormView.tsx8
-rw-r--r--src/views/collections/CollectionSchemaView.scss0
-rw-r--r--src/views/collections/CollectionSchemaView.tsx49
-rw-r--r--src/views/nodes/DocumentView.tsx15
-rw-r--r--src/views/nodes/FieldView.tsx31
9 files changed, 149 insertions, 31 deletions
diff --git a/src/Main.tsx b/src/Main.tsx
index 02b866753..ab87fc316 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -16,6 +16,7 @@ import { CollectionFreeFormView } from './views/collections/CollectionFreeFormVi
import { ListField } from './fields/ListField';
import { DocumentView } from './views/nodes/DocumentView';
import { ContextMenu } from './views/ContextMenu';
+import { TextField } from './fields/TextField';
configure({
enforceActions: "observed"
@@ -48,7 +49,14 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
let doc3 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
x: 450, y: 500
});
- let docset = new Array<Document>(doc1, doc2, doc3);
+ 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"
});
diff --git a/src/documents/Documents.ts b/src/documents/Documents.ts
index 318a6d7a3..73cf483ef 100644
--- a/src/documents/Documents.ts
+++ b/src/documents/Documents.ts
@@ -5,6 +5,7 @@ import { NumberField } from "../fields/NumberField";
import { ListField } from "../fields/ListField";
import { FieldTextBox } from "../views/nodes/FieldTextBox";
import { CollectionDockingView } from "../views/collections/CollectionDockingView";
+import { CollectionSchemaView } from "../views/collections/CollectionSchemaView";
interface DocumentOptions {
x?: number;
@@ -45,7 +46,7 @@ export namespace Documents {
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.LayoutKeys, new ListField([ KeyStore.Data ]));
+ textProto.SetField(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
}
return textProto;
}
@@ -57,6 +58,27 @@ export namespace Documents {
return doc;
}
+ let schemaProto: Document;
+ function GetSchemaPrototype(): Document {
+ if (!schemaProto) {
+ schemaProto = new Document();
+ schemaProto.SetField(KeyStore.X, new NumberField(0));
+ schemaProto.SetField(KeyStore.Y, new NumberField(0));
+ schemaProto.SetField(KeyStore.Width, new NumberField(300));
+ schemaProto.SetField(KeyStore.Height, new NumberField(150));
+ schemaProto.SetField(KeyStore.Layout, new TextField(CollectionSchemaView.LayoutString()));
+ schemaProto.SetField(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
+ }
+ return schemaProto;
+ }
+
+ export function SchemaDocument(documents: Array<Document>, options: DocumentOptions = {}): Document {
+ let doc = GetSchemaPrototype().MakeDelegate();
+ setupOptions(doc, options);
+ doc.SetField(KeyStore.Data, new ListField(documents));
+ return doc;
+ }
+
let dockProto: Document;
function GetDockPrototype(): Document {
@@ -67,7 +89,7 @@ export namespace Documents {
dockProto.SetField(KeyStore.Width, new NumberField(300));
dockProto.SetField(KeyStore.Height, new NumberField(150));
dockProto.SetField(KeyStore.Layout, new TextField(CollectionDockingView.LayoutString()));
- dockProto.SetField(KeyStore.LayoutKeys, new ListField([ KeyStore.Data ]));
+ dockProto.SetField(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
}
return dockProto;
}
@@ -90,7 +112,7 @@ export namespace Documents {
imageProto.SetField(KeyStore.Height, new NumberField(300));
imageProto.SetField(KeyStore.Layout, new TextField('<img src={Data} draggable="false" width="100%" alt="Image not found"/>'));
// imageProto.SetField(KeyStore.Layout, new TextField('<div style={"background-image: " + {Data}} />'));
- imageProto.SetField(KeyStore.LayoutFields, new ListField([ KeyStore.Data ]));
+ imageProto.SetField(KeyStore.LayoutFields, new ListField([KeyStore.Data]));
}
return imageProto;
}
@@ -114,7 +136,7 @@ export namespace Documents {
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.LayoutKeys, new ListField([ KeyStore.Data ]));
+ collectionProto.SetField(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
}
return collectionProto;
}
diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index 0551a74b0..5c0a9caf0 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -3,6 +3,7 @@ import { Key, KeyStore } from "./Key"
import { NumberField } from "./NumberField";
import { ObservableMap, computed } from "mobx";
import { TextField } from "./TextField";
+import { ListField } from "./ListField";
export class Document extends Field {
private fields: ObservableMap<Key, Field> = new ObservableMap();
@@ -51,14 +52,18 @@ export class Document extends Field {
return vval;
}
- GetNumberValue(key: Key, defaultVal: number): number {
+ GetNumberField(key: Key, defaultVal: number): number {
return this.GetFieldValue(key, NumberField, defaultVal);
}
- GetTextValue(key: Key, defaultVal: string): string {
+ GetTextField(key: Key, defaultVal: string): string {
return this.GetFieldValue(key, TextField, defaultVal);
}
+ GetListField<T extends Field>(key: Key, defaultVal: T[]): T[] {
+ return this.GetFieldValue<T[], ListField<T>>(key, ListField, defaultVal)
+ }
+
SetField(key: Key, field: Field | undefined): void {
if (field) {
this.fields.set(key, field);
diff --git a/src/fields/Key.ts b/src/fields/Key.ts
index 61b3cdd37..4da800fac 100644
--- a/src/fields/Key.ts
+++ b/src/fields/Key.ts
@@ -31,17 +31,19 @@ export class Key extends Field {
}
export namespace KeyStore {
- export let Prototype = new Key("Prototype");
- export let X = new Key("X");
- export let Y = new Key("Y");
- export let Title = new Key("Title");
- export let PanX = new Key("PanX");
- export let PanY = new Key("PanY");
- export let Scale = new Key("Scale");
- export let Width = new Key("Width");
- export let Height = new Key("Height");
- export let Data = new Key("Data");
- export let Layout = new Key("Layout");
- export let LayoutKeys = new Key("LayoutKeys");
- export let LayoutFields = new Key("LayoutFields");
+ export const Prototype = new Key("Prototype");
+ export const X = new Key("X");
+ export const Y = new Key("Y");
+ export const Title = new Key("Title");
+ export const Author = new Key("Author");
+ export const PanX = new Key("PanX");
+ export const PanY = new Key("PanY");
+ export const Scale = new Key("Scale");
+ export const Width = new Key("Width");
+ export const Height = new Key("Height");
+ export const Data = new Key("Data");
+ export const Layout = new Key("Layout");
+ export const LayoutKeys = new Key("LayoutKeys");
+ export const LayoutFields = new Key("LayoutFields");
+ export const ColumnsKey = new Key("SchemaColumns");
} \ No newline at end of file
diff --git a/src/views/collections/CollectionFreeFormView.tsx b/src/views/collections/CollectionFreeFormView.tsx
index 736bcb786..b4dd140d0 100644
--- a/src/views/collections/CollectionFreeFormView.tsx
+++ b/src/views/collections/CollectionFreeFormView.tsx
@@ -174,10 +174,10 @@ export class CollectionFreeFormView extends React.Component<CollectionViewProps>
render() {
const { fieldKey, Document: Document } = this.props;
- const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []);
- const panx: number = Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0));
- const pany: number = Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0));
- const currScale: number = Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1));
+ const value: Document[] = Document.GetListField<Document>(fieldKey, []);
+ const panx: number = Document.GetNumberField(KeyStore.PanX, 0);
+ const pany: number = Document.GetNumberField(KeyStore.PanY, 0);
+ const currScale: number = Document.GetNumberField(KeyStore.Scale, 1);
return (
<div className="border" style={{
borderStyle: "solid",
diff --git a/src/views/collections/CollectionSchemaView.scss b/src/views/collections/CollectionSchemaView.scss
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/src/views/collections/CollectionSchemaView.scss
diff --git a/src/views/collections/CollectionSchemaView.tsx b/src/views/collections/CollectionSchemaView.tsx
new file mode 100644
index 000000000..01a5ab639
--- /dev/null
+++ b/src/views/collections/CollectionSchemaView.tsx
@@ -0,0 +1,49 @@
+import { CollectionViewProps, DocumentFieldViewProps } from "../nodes/DocumentView";
+import React = require("react")
+import ReactTable, { ReactTableDefaults, CellInfo } from "react-table";
+import { observer } from "mobx-react";
+import { KeyStore as KS, Key } from "../../fields/Key";
+import { Document } from "../../fields/Document";
+import { FieldView } from "../nodes/FieldView";
+import "react-table/react-table.css"
+
+@observer
+export class CollectionSchemaView extends React.Component<CollectionViewProps> {
+ public static LayoutString() { return '<CollectionSchemaView Document={Document} fieldKey={DataKey} ContainingDocumentView={ContainingDocumentView}/>'; }
+
+ renderCell = (rowProps: CellInfo) => {
+ if (!this.props.ContainingDocumentView) {
+ return <div></div>
+ }
+ let props: DocumentFieldViewProps = {
+ doc: rowProps.value[0],
+ fieldKey: rowProps.value[1],
+ containingDocumentView: this.props.ContainingDocumentView
+ }
+ return <FieldView {...props} />
+ }
+
+ render() {
+ const { Document, fieldKey } = this.props;
+ const children = Document.GetListField<Document>(fieldKey, []);
+ const columns = Document.GetListField(KS.ColumnsKey,
+ [KS.Title, KS.Data, KS.Author])
+ return (
+ <ReactTable
+ data={children}
+ columns={columns.map(col => {
+ return (
+ {
+ Header: col.Name,
+ accessor: (doc: Document) => [doc, col],
+ id: col.Id
+ })
+ })}
+ column={{
+ ...ReactTableDefaults.column,
+ Cell: this.renderCell
+ }}
+ />
+ )
+ }
+} \ No newline at end of file
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index 1e4cc1cca..20dc6540b 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -9,6 +9,7 @@ import { FieldTextBox } from "../nodes/FieldTextBox"
import { Document } from "../../fields/Document";
import { CollectionFreeFormView } from "../collections/CollectionFreeFormView"
import { CollectionDockingView } from "../collections/CollectionDockingView"
+import { CollectionSchemaView } from "../collections/CollectionSchemaView"
import "./NodeView.scss"
import { SelectionManager } from "../../util/SelectionManager";
import { ContextMenu } from "../ContextMenu";
@@ -64,16 +65,16 @@ class DocumentContents extends React.Component<DocumentViewProps> {
let doc = this.props.Document;
let bindings = { ...this.props } as any;
for (const key of this.layoutKeys) {
- bindings[ key.Name + "Key" ] = key;
+ bindings[key.Name + "Key"] = key;
}
for (const key of this.layoutFields) {
let field = doc.GetField(key);
if (field) {
- bindings[ key.Name ] = field.GetValue();
+ bindings[key.Name] = field.GetValue();
}
}
return <JsxParser
- components={{ FieldTextBox, CollectionFreeFormView, CollectionDockingView }}
+ components={{ FieldTextBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
bindings={bindings}
jsx={this.layout}
showWarnings={true}
@@ -240,10 +241,10 @@ export class DocumentView extends React.Component<DocumentViewProps> {
if (this._mainCont.current != null && this.props.ContainingCollectionView != null) {
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;
+ 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,
diff --git a/src/views/nodes/FieldView.tsx b/src/views/nodes/FieldView.tsx
new file mode 100644
index 000000000..1c4164089
--- /dev/null
+++ b/src/views/nodes/FieldView.tsx
@@ -0,0 +1,31 @@
+import React = require("react")
+import { DocumentFieldViewProps } from "./DocumentView";
+import { observer } from "mobx-react";
+import { computed } from "mobx";
+import { Field, Opt } from "../../fields/Field";
+import { TextField } from "../../fields/TextField";
+import { NumberField } from "../../fields/NumberField";
+
+@observer
+export class FieldView extends React.Component<DocumentFieldViewProps> {
+ @computed
+ get field(): Opt<Field> {
+ const { doc, fieldKey } = this.props;
+ return doc.GetField(fieldKey);
+ }
+ render() {
+ const field = this.field;
+ if (!field) {
+ return <p>{'<null>'}</p>
+ }
+ if (field instanceof TextField) {
+ return <p>{field.Data}</p>
+ }
+ else if (field instanceof NumberField) {
+ return <p>{field.Data}</p>
+ } else {
+ return <p>{field.GetValue}</p>
+ }
+ }
+
+} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 11:53:40 +0000