import * as React from 'react';
import * as vis from '../../resources/visjs/vis';

export interface TestComponentProps {

}

export interface TestComponentState {

}

class TestComponent extends React.Component<TestComponentProps, TestComponentState> {

    ref: React.RefObject<any>;


    componentDidMount() {
        const data = { "edges": [{ "id": "event_000", "from": "state_000", "to": "state_001", "label": "Human Leaves", "color": { "color": "gray", "inherit": "none" }, "dashes": true }, { "id": "event_001", "from": "state_000", "to": "state_002", "label": "Stop (1)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_002", "from": "state_001", "to": "state_000", "label": "Human enters", "color": { "color": "gray", "inherit": "none" }, "dashes": true }, { "id": "event_003", "from": "state_001", "to": "state_002", "label": "Stop (2)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_004", "from": "state_001", "to": "state_003", "label": "Target Reached", "color": { "color": "gray", "inherit": "none" }, "dashes": true }, { "id": "event_005", "from": "state_003", "to": "state_002", "label": "Stop (3)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_006", "from": "state_002", "to": "state_001", "label": "Move Axis to Target Position", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_007", "from": "state_002", "to": "state_004", "label": "TE ausschwenken", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_008", "from": "state_004", "to": "state_005", "label": "Synchronize Axis (2)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_009", "from": "state_004", "to": "state_002", "label": "TE einschwenken", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_010", "from": "state_004", "to": "state_006", "label": "Zylinder ausfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_011", "from": "state_005", "to": "state_007", "label": "Synchronization Lost", "color": { "color": "gray", "inherit": "none" }, "dashes": true }, { "id": "event_012", "from": "state_005", "to": "state_008", "label": "TE einschwenken", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_013", "from": "state_005", "to": "state_006", "label": "Unsynchronize Axis", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_014", "from": "state_005", "to": "state_009", "label": "Zylinder einfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_015", "from": "state_007", "to": "state_004", "label": "Stop (4)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_016", "from": "state_007", "to": "state_005", "label": "Synchronize Axis (1)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_017", "from": "state_007", "to": "state_010", "label": "TE einschwenken", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_018", "from": "state_007", "to": "state_011", "label": "Zylinder ausfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_019", "from": "state_010", "to": "state_002", "label": "Stop (4)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_020", "from": "state_011", "to": "state_006", "label": "Stop (4)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_021", "from": "state_011", "to": "state_012", "label": "TE einschwenken", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_022", "from": "state_011", "to": "state_007", "label": "Zylinder einfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_023", "from": "state_012", "to": "state_013", "label": "Stop (4)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_024", "from": "state_012", "to": "state_010", "label": "Zylinder einfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_025", "from": "state_013", "to": "state_002", "label": "Zylinder einfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_026", "from": "state_008", "to": "state_010", "label": "Synchronization Lost", "color": { "color": "gray", "inherit": "none" }, "dashes": true }, { "id": "event_027", "from": "state_008", "to": "state_013", "label": "Unsynchronize Axis", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_028", "from": "state_008", "to": "state_014", "label": "Zylinder einfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_029", "from": "state_014", "to": "state_010", "label": "Synchronization Lost", "color": { "color": "gray", "inherit": "none" }, "dashes": true }, { "id": "event_030", "from": "state_014", "to": "state_002", "label": "Unsynchronize Axis", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_031", "from": "state_009", "to": "state_007", "label": "Synchronization Lost", "color": { "color": "gray", "inherit": "none" }, "dashes": true }, { "id": "event_032", "from": "state_009", "to": "state_014", "label": "TE einschwenken", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_033", "from": "state_009", "to": "state_004", "label": "Unsynchronize Axis", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_034", "from": "state_009", "to": "state_005", "label": "Zylinder ausfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_035", "from": "state_006", "to": "state_013", "label": "TE einschwenken", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_036", "from": "state_006", "to": "state_004", "label": "Zylinder einfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }], "nodes": [{ "id": "state_000", "label": "Axis is stopped (2)\nTransportposition\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 0 }, { "id": "state_001", "label": "Axis is moving to Target\nTransportposition\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 1 }, { "id": "state_002", "label": "Axis is stopped (1)\nTransportposition\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 1 }, { "id": "state_003", "label": "Axis at Target Position\nTransportposition\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 2 }, { "id": "state_004", "label": "Arbeitsposition\nAxis is stopped (1)\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 2 }, { "id": "state_005", "label": "Arbeitsposition\nAxis is moving sync\nZylinder ausgefahren", "shape": "box", "color": "yellow", "level": 3 }, { "id": "state_006", "label": "Arbeitsposition\nAxis is stopped (1)\nZylinder ausgefahren", "shape": "box", "color": "yellow", "level": 3 }, { "id": "state_007", "label": "Arbeitsposition\nAxis is moving unsync.\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 4 }, { "id": "state_008", "label": "Axis is moving sync\nTransportposition\nZylinder ausgefahren", "shape": "box", "color": "yellow", "level": 4 }, { "id": "state_009", "label": "Arbeitsposition\nAxis is moving sync\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 4 }, { "id": "state_010", "label": "Axis is moving unsync.\nTransportposition\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 5 }, { "id": "state_011", "label": "Arbeitsposition\nAxis is moving unsync.\nZylinder ausgefahren", "shape": "box", "color": "yellow", "level": 5 }, { "id": "state_012", "label": "Axis is moving unsync.\nTransportposition\nZylinder ausgefahren", "shape": "box", "color": "yellow", "level": 6 }, { "id": "state_013", "label": "Axis is stopped (1)\nTransportposition\nZylinder ausgefahren", "shape": "box", "color": "yellow", "level": 7 }, { "id": "state_014", "label": "Axis is moving sync\nTransportposition\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 5 }] }
        const options = {
            physics: { enabled: false },
            layout: {
                hierarchical: {
                    enabled: true,
                    levelSeparation: 300,
                    nodeSpacing: 300,
                    treeSpacing: 500,
                    blockShifting: false,
                    edgeMinimization: false,
                    parentCentralization: false,
                    direction: 'UD',        // UD, DU, LR, RL
                    sortMethod: 'directed'   // hubsize, directed
                }
            },
            nodes: {
                font: {
                    multi: 'md'
                }
            },
            edges: {
                arrows: 'to',
                smooth: true,
                shadow: false,
                font: {
                    background: 'white'
                }
            }
        }
        const network = new vis.Network(this.ref.current, data, options);
    }

    constructor(props) {
        super(props);
        this.ref = React.createRef();
    }

    render() {
        return (<>
            <div ref={this.ref}></div>
        </>);
    }
}

export default TestComponent;