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
97
98
99
100
101
102
103
104
105
106
107
108
|
import { action, computed } from "mobx";
import { observer } from "mobx-react";
import { Document } from "../../../fields/Document";
import { Opt, FieldWaiting } from "../../../fields/Field";
import { Key, KeyStore } from "../../../fields/Key";
import { ListField } from "../../../fields/ListField";
import { NumberField } from "../../../fields/NumberField";
import { TextField } from "../../../fields/TextField";
import { Utils } from "../../../Utils";
import { CollectionDockingView } from "../collections/CollectionDockingView";
import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
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");
import { Transform } from "../../util/Transform";
const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
export interface DocumentViewProps {
DocumentView: Opt<DocumentView> // needed only to set ContainingDocumentView on CollectionViewProps when invoked from JsxParser -- is there a better way?
ContainingCollectionView: Opt<CollectionViewBase>;
Document: Document;
AddDocument?: (doc: Document) => void;
RemoveDocument?: (doc: Document) => boolean;
GetTransform: () => Transform;
Scaling: number;
}
@observer
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.GetData(KeyStore.Layout, TextField, String("<p>Error loading layout data</p>"));
}
@computed
get backgroundLayout(): string {
return this.props.Document.GetData(KeyStore.BackgroundLayout, TextField, String("<p>Error loading layout data</p>"));
}
@computed
get layoutKeys(): Key[] {
return this.props.Document.GetData(KeyStore.LayoutKeys, ListField, new Array<Key>());
}
@computed
get layoutFields(): Key[] {
return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array<Key>());
}
//
// returns the cumulative scaling between the document and the screen
//
@computed
public get ScalingToScreenSpace(): number {
if (this.props.ContainingCollectionView != undefined &&
this.props.ContainingCollectionView.props.ContainingDocumentView != undefined) {
let ss = this.props.ContainingCollectionView.props.DocumentForCollection.GetNumber(KeyStore.Scale, 1);
return this.props.ContainingCollectionView.props.ContainingDocumentView.ScalingToScreenSpace * ss;
}
return 1;
}
render() {
let bindings = { ...this.props } as any;
for (const key of this.layoutKeys) {
bindings[key.Name + "Key"] = key; // this maps string values of the form <keyname>Key to an actual key Kestore.keyname e.g, "DataKey" => KeyStore.Data
}
if (!bindings.GetTransform) {
console.log("test");
}
for (const key of this.layoutFields) {
let field = this.props.Document.Get(key);
bindings[key.Name] = field && field != FieldWaiting ? field.GetValue() : field;
}
if (bindings.DocumentView === undefined) {
bindings.DocumentView = this; // set the DocumentView to this if it hasn't already been set by a sub-class during its render method.
}
var annotated = <JsxParser
components={{ FormattedTextBox: FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
bindings={bindings}
jsx={this.backgroundLayout}
showWarnings={true}
onError={(test: any) => { console.log(test) }}
/>;
bindings["BackgroundView"] = this.backgroundLayout ? annotated : null;
return (
<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>
)
}
}
|
