1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
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));
}
@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));
}
//Temp
@computed
get data(): string {
return this.props.dvm.Doc.GetFieldValue(KeyStore.Data, TextField, String(""));
}
@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>());
}
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
}}>
<JsxParser
components={{ FieldTextBox, FreeFormCanvas, CollectionFreeFormView }}
bindings={bindings}
jsx={this.layout}
/>
</div>
);
}
}
|
