131 lines
12 KiB
TypeScript
131 lines
12 KiB
TypeScript
import * as React from 'react';
|
|
import * as vis from '../../resources/visjs/vis';
|
|
import Layout from '../ui/layout/layout';
|
|
|
|
export interface TestComponentProps {
|
|
|
|
}
|
|
|
|
export interface TestComponentState {
|
|
|
|
}
|
|
|
|
const mainStyle = {
|
|
minHeight: '90vh',
|
|
}
|
|
|
|
const sidebarStyle = {
|
|
padding: '10px',
|
|
background: "primary"
|
|
}
|
|
|
|
const contentStyle = {
|
|
padding: '10px',
|
|
}
|
|
|
|
class TestComponent extends React.Component<TestComponentProps, TestComponentState> {
|
|
|
|
network: any;
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
}
|
|
|
|
render() {
|
|
const template: {
|
|
groupName: string,
|
|
items: {
|
|
label: string,
|
|
keywords: string,
|
|
item: string,
|
|
id: string | number,
|
|
}[]
|
|
}[] = [
|
|
{
|
|
groupName: 'GRP 1',
|
|
items: [
|
|
{
|
|
item: 'hello',
|
|
keywords: '1',
|
|
label: 'Hello',
|
|
id: 1,
|
|
},
|
|
{
|
|
item: 'world',
|
|
keywords: '2',
|
|
label: 'world',
|
|
id: 2,
|
|
|
|
}, {
|
|
item: '!',
|
|
keywords: '3',
|
|
label: '!',
|
|
id: 3,
|
|
}
|
|
|
|
]
|
|
},
|
|
{
|
|
groupName: 'GRP 2',
|
|
items: [
|
|
{
|
|
item: 'world',
|
|
keywords: '4',
|
|
label: 'world',
|
|
id: 4,
|
|
}
|
|
]
|
|
}
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<Layout selection={template} onMount={ref => {
|
|
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: true },
|
|
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'
|
|
}
|
|
},
|
|
autoResize: false,
|
|
height: ref.current.parentElement.offsetHeight.toString() + 'px'
|
|
}
|
|
this.network = new vis.Network(ref.current, data, options);
|
|
this.network.on('click', e => console.log(e))
|
|
}
|
|
} onResize={() => {
|
|
if (this.network) {
|
|
this.network.setSize(undefined, undefined);
|
|
this.network.redraw();
|
|
}
|
|
}
|
|
}></Layout>
|
|
</>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default TestComponent; |