63 lines
10 KiB
TypeScript
63 lines
10 KiB
TypeScript
|
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"
|
||
|
|
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;
|