src/Main.tsx


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

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import "./Main.scss";
import "normalize.css"
import { NodeCollectionStore } from './stores/NodeCollectionStore';
import { StaticTextNodeStore } from './stores/StaticTextNodeStore';
import { VideoNodeStore } from './stores/VideoNodeStore';
import { FreeFormCanvas } from './views/freeformcanvas/FreeFormCanvas';
import { Key, KeyStore as KS } from './fields/Key';
import { NumberField } from './fields/NumberField';
import { Document } from './fields/Document';
import { configure, runInAction } from 'mobx';
import { NodeStore } from './stores/NodeStore';
import { Documents } from './documents/Documents';
import { DocumentDecorations } from './DocumentDecorations';

configure({
    enforceActions: "observed"
});

const mainNodeCollection = new NodeCollectionStore();
ReactDOM.render((
    <div>
        <FreeFormCanvas store={mainNodeCollection} />
        <DocumentDecorations />
    </div>), document.getElementById('root'));

runInAction(() => {
    let doc1 = Documents.TextDocument("Hello world");
    let doc2 = doc1.MakeDelegate();
    doc2.SetField(KS.X, new NumberField(150));
    doc2.SetField(KS.Y, new NumberField(20));
    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);
    let doc4 = Documents.CollectionDocument(docset, {
        x: 100, y: 400
    });
    let doc5 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
        x: 650, y: 500
    });
    mainNodeCollection.Docs.push(doc1);
    mainNodeCollection.Docs.push(doc2);
    mainNodeCollection.Docs.push(doc4);
    mainNodeCollection.Docs.push(doc3);
    mainNodeCollection.Docs.push(doc5);
});