set up web box classes

1 files changed, 134 insertions, 0 deletions

diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
new file mode 100644
index 000000000..f955a8c39
--- /dev/null
+++ b/src/views/nodes/DocumentView.tsx
@@ -0,0 +1,134 @@
+import { observer } from "mobx-react";
+import React = require("react");
+import { computed } from "mobx";
+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";
+import { FieldTextBox } from "../nodes/FieldTextBox"
+import { FreeFormCanvas } from "../freeformcanvas/FreeFormCanvas"
+import { CollectionFreeFormView } from "../freeformcanvas/CollectionFreeFormView"
+import "./NodeView.scss"
+const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
+
+interface IProps {
+    dvm: DocumentViewModel;
+}
+
+@observer
+export class DocumentView extends React.Component<IProps> {
+    @computed
+    get x(): number {
+        return this.props.dvm.Doc.GetFieldValue(KeyStore.X, NumberField, Number(0));
+    }
+
+    @computed
+    get y(): number {
+        return this.props.dvm.Doc.GetFieldValue(KeyStore.Y, NumberField, Number(0));
+    }
+
+    set x(x: number) {
+        this.props.dvm.Doc.SetFieldValue(KeyStore.X, x, NumberField)
+    }
+
+    set y(y: number) {
+        this.props.dvm.Doc.SetFieldValue(KeyStore.Y, y, NumberField)
+    }
+
+    @computed
+    get transform(): string {
+        return `translate(${this.x}px, ${this.y}px)`;
+    }
+
+    @computed
+    get width(): number {
+        return this.props.dvm.Doc.GetFieldValue(KeyStore.Width, NumberField, Number(0));
+    }
+
+    @computed
+    get height(): number {
+        return this.props.dvm.Doc.GetFieldValue(KeyStore.Height, NumberField, Number(0));
+    }
+
+    @computed
+    get layout(): string {
+        return this.props.dvm.Doc.GetFieldValue(KeyStore.Layout, TextField, String("<p>Error loading layout data</p>"));
+    }
+
+    @computed
+    get layoutKeys(): Key[] {
+        return this.props.dvm.Doc.GetFieldValue(KeyStore.LayoutKeys, ListField, new Array<Key>());
+    }
+
+    @computed
+    get layoutFields(): Key[] {
+        return this.props.dvm.Doc.GetFieldValue(KeyStore.LayoutFields, ListField, new Array<Key>());
+    }
+
+    private _isPointerDown = false;
+
+    onPointerDown = (e: React.PointerEvent): void => {
+        e.stopPropagation();
+        if (e.button === 2) {
+            this._isPointerDown = true;
+            document.removeEventListener("pointermove", this.onPointerMove);
+            document.addEventListener("pointermove", this.onPointerMove);
+            document.removeEventListener("pointerup", this.onPointerUp);
+            document.addEventListener("pointerup", this.onPointerUp);
+        }
+    }
+
+    onPointerUp = (e: PointerEvent): void => {
+        e.stopPropagation();
+        if (e.button === 2) {
+            e.preventDefault();
+            this._isPointerDown = false;
+            document.removeEventListener("pointermove", this.onPointerMove);
+            document.removeEventListener("pointerup", this.onPointerUp);
+        }
+    }
+
+    onPointerMove = (e: PointerEvent): void => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (!this._isPointerDown) {
+            return;
+        }
+        this.x += e.movementX;
+        this.y += e.movementY;
+    }
+
+    render() {
+        let doc = this.props.dvm.Doc;
+        let bindings: any = {
+            doc: doc
+        };
+        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 (
+            <div className="node" style={{
+                transform: this.transform,
+                width: this.width,
+                height: this.height
+            }} onPointerDown={this.onPointerDown} onContextMenu={
+                (e) => {
+                    e.preventDefault()
+                }}>
+                <JsxParser
+                    components={{ FieldTextBox, FreeFormCanvas, CollectionFreeFormView }}
+                    bindings={bindings}
+                    jsx={this.layout}
+                />
+            </div>
+        );
+    }
+
+}
\ No newline at end of file