aboutsummaryrefslogtreecommitdiff
path: root/src/views
diff options
context:
space:
mode:
Diffstat (limited to 'src/views')
-rw-r--r--src/views/freeformcanvas/FreeFormCanvas.tsx19
-rw-r--r--src/views/freeformcanvas/NodeContainer.tsx3
-rw-r--r--src/views/nodes/DocumentView.tsx50
3 files changed, 47 insertions, 25 deletions
diff --git a/src/views/freeformcanvas/FreeFormCanvas.tsx b/src/views/freeformcanvas/FreeFormCanvas.tsx
index a80e11ef5..3552ffa54 100644
--- a/src/views/freeformcanvas/FreeFormCanvas.tsx
+++ b/src/views/freeformcanvas/FreeFormCanvas.tsx
@@ -3,8 +3,10 @@ import { NodeCollectionStore } from "../../stores/NodeCollectionStore";
import "./FreeFormCanvas.scss";
import { NodeContainer } from "./NodeContainer";
import React = require("react");
-import { KeyStore } from "../../controllers/KeyController";
-import { NumberController } from "../../controllers/NumberController";
+import { KeyStore } from "../../fields/Key";
+import { NumberField } from "../../fields/NumberField";
+import { TextField } from "../../fields/TextField";
+import { action } from "mobx";
interface IProps {
store: NodeCollectionStore
@@ -15,6 +17,7 @@ export class FreeFormCanvas extends React.Component<IProps> {
private _isPointerDown: boolean = false;
+ @action
onPointerDown = (e: React.PointerEvent): void => {
e.stopPropagation();
e.preventDefault();
@@ -25,6 +28,7 @@ export class FreeFormCanvas extends React.Component<IProps> {
document.addEventListener("pointerup", this.onPointerUp);
}
+ @action
onPointerUp = (e: PointerEvent): void => {
e.stopPropagation();
e.preventDefault();
@@ -33,14 +37,12 @@ export class FreeFormCanvas extends React.Component<IProps> {
document.removeEventListener("pointerup", this.onPointerUp);
let doc = this.props.store.Docs[0];
- let xField = doc.GetFieldT(KeyStore.X, NumberController);
- let x = xField ? xField.Data : 0;
- let yField = doc.GetFieldT(KeyStore.Y, NumberController);
- let y = yField ? yField.Data : 0;
- this.props.store.Docs[0].SetFieldValue(KeyStore.X, x + 10, NumberController);
- this.props.store.Docs[0].SetFieldValue(KeyStore.Y, y + 10, NumberController);
+ let dataField = doc.GetFieldT(KeyStore.Data, TextField);
+ let data = dataField ? dataField.Data : "";
+ this.props.store.Docs[0].SetFieldValue(KeyStore.Data, data + " hello", TextField);
}
+ @action
onPointerMove = (e: PointerEvent): void => {
e.stopPropagation();
e.preventDefault();
@@ -51,6 +53,7 @@ export class FreeFormCanvas extends React.Component<IProps> {
this.props.store.Y += e.movementY;
}
+ @action
onPointerWheel = (e: React.WheelEvent): void => {
e.stopPropagation();
e.preventDefault();
diff --git a/src/views/freeformcanvas/NodeContainer.tsx b/src/views/freeformcanvas/NodeContainer.tsx
index c59ab194e..6c3cb2af2 100644
--- a/src/views/freeformcanvas/NodeContainer.tsx
+++ b/src/views/freeformcanvas/NodeContainer.tsx
@@ -7,6 +7,7 @@ import { VideoNodeView } from "../nodes/VideoNodeView";
import "./FreeFormCanvas.scss";
import React = require("react");
import { DocumentView } from "../nodes/DocumentView";
+import { DocumentViewModel } from "../../viewmodels/DocumentViewModel";
interface IProps {
store: NodeCollectionStore
@@ -19,7 +20,7 @@ export class NodeContainer extends React.Component<IProps> {
return (
<div className="node-container">
{this.props.store.Docs.map(doc => {
- return (<DocumentView key={doc.Id} doc={doc} />);
+ return (<DocumentView key={doc.Id} dvm={new DocumentViewModel(doc)} />);
})}
</div>
);
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index d3f025388..059d6c69e 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -1,27 +1,27 @@
import { observer } from "mobx-react";
-import { DocumentController } from "../../controllers/DocumentController";
import React = require("react");
import { computed } from "mobx";
-import { KeyStore } from "../../controllers/KeyController";
-import { NumberController } from "../../controllers/NumberController";
-import { TextController } from "../../controllers/TextController";
+import { KeyStore, Key } from "../../fields/Key";
+import { NumberField } from "../../fields/NumberField";
+import { TextField } from "../../fields/TextField";
+import { DocumentViewModel } from "../../viewmodels/DocumentViewModel";
+import { ListField } from "../../fields/ListField";
+const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
interface IProps {
- doc:DocumentController;
+ dvm:DocumentViewModel;
}
@observer
export class DocumentView extends React.Component<IProps> {
@computed
get x(): number {
- let field = this.props.doc.GetFieldT(KeyStore.X, NumberController);
- return field ? field.Data : 0;
+ return this.props.dvm.Doc.GetFieldValue(KeyStore.X, NumberField, Number(0));
}
@computed
get y(): number {
- let field = this.props.doc.GetFieldT(KeyStore.Y, NumberController);
- return field ? field.Data : 0;
+ return this.props.dvm.Doc.GetFieldValue(KeyStore.Y, NumberField, Number(0));
}
@computed
@@ -31,31 +31,49 @@ export class DocumentView extends React.Component<IProps> {
@computed
get width(): number {
- let field = this.props.doc.GetFieldT(KeyStore.Width, NumberController);
- return field ? field.Data : 0;
+ return this.props.dvm.Doc.GetFieldValue(KeyStore.Width, NumberField, Number(0));
}
@computed
get height(): number {
- let field = this.props.doc.GetFieldT(KeyStore.Height, NumberController);
- return field ? field.Data : 0;
+ return this.props.dvm.Doc.GetFieldValue(KeyStore.Height, NumberField, Number(0));
}
//Temp
@computed
get data(): string {
- let field = this.props.doc.GetFieldT(KeyStore.Data, TextController);
- return field ? field.Data : "";
+ return this.props.dvm.Doc.GetFieldValue(KeyStore.Data, TextField, String(""));
+ }
+
+ @computed
+ get layout(): string {
+ return this.props.dvm.Doc.GetFieldValue(KeyStore.View, TextField, String("<p>Error loading layout data</p>"));
+ }
+
+ @computed
+ get layoutFields(): Key[] {
+ return this.props.dvm.Doc.GetFieldValue(KeyStore.ViewProps, ListField, new Array<Key>());
}
render() {
+ let doc = this.props.dvm.Doc;
+ let bindings:any = {};
+ for (const key of this.layoutFields) {
+ let field = doc.GetField(key);
+ if(field) {
+ bindings[key.Name] = field.GetValue();
+ }
+ }
return (
<div className="node" style={{
transform: this.transform,
width: this.width,
height: this.height
}}>
- <p>{this.data}</p>
+ <JsxParser
+ bindings={bindings}
+ jsx={this.layout}
+ />
</div>
);
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-02-27 23:03:18 +0000