140 lines
13 KiB
TypeScript
140 lines
13 KiB
TypeScript
import * as React from 'react';
|
|
import * as vis from '../../resources/visjs/vis';
|
|
import LocalNavbar from '../ui/navbar';
|
|
import { Container, Row, Col, InputGroup, FormControl, ListGroup } from 'react-bootstrap';
|
|
|
|
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> {
|
|
|
|
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: 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: this.ref.current.parentElement.offsetHeight.toString() + 'px'
|
|
}
|
|
console.log(options.height)
|
|
this.network = new vis.Network(this.ref.current, data, options);
|
|
this.network.on('click', e => console.log(e))
|
|
|
|
const _this = this;
|
|
function handleResize() {
|
|
_this.network.setSize(undefined,undefined);
|
|
_this.network.redraw();
|
|
}
|
|
|
|
// handleResize();
|
|
|
|
this.handleResize = handleResize;
|
|
window.addEventListener('resize', this.handleResize)
|
|
|
|
}
|
|
|
|
handleResize: any
|
|
|
|
componentWillUnmount(){
|
|
window.removeEventListener('resize', this.handleResize)
|
|
}
|
|
|
|
network: any;
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.ref = React.createRef();
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<>
|
|
<LocalNavbar></LocalNavbar>
|
|
<Container fluid style={mainStyle}>
|
|
<Row style={mainStyle}>
|
|
<Col className="col-md-2 d-none d-md-block bg-light sidebar-sticky" style={sidebarStyle}>
|
|
{/* A Search Field. */}
|
|
<InputGroup size="sm" className="mb-3">
|
|
<InputGroup.Prepend>
|
|
<InputGroup.Text id="inputGroup-sizing-sm">Search</InputGroup.Text>
|
|
</InputGroup.Prepend>
|
|
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
|
|
</InputGroup>
|
|
<hr />
|
|
<h4>Group1</h4>
|
|
<hr />
|
|
<ListGroup>
|
|
<ListGroup.Item action>Cras justo odio</ListGroup.Item>
|
|
<ListGroup.Item action>Dapibus ac facilisis in</ListGroup.Item>
|
|
<ListGroup.Item action>Morbi leo risus</ListGroup.Item>
|
|
<ListGroup.Item action>Porta ac consectetur ac</ListGroup.Item>
|
|
<ListGroup.Item action>Vestibulum at eros</ListGroup.Item>
|
|
</ListGroup>
|
|
<hr />
|
|
<h4>Group 2</h4>
|
|
<hr />
|
|
<ListGroup>
|
|
<ListGroup.Item action>Cras justo odio</ListGroup.Item>
|
|
<ListGroup.Item action>Dapibus ac facilisis in</ListGroup.Item>
|
|
<ListGroup.Item action>Morbi leo risus</ListGroup.Item>
|
|
<ListGroup.Item action>Porta ac consectetur ac</ListGroup.Item>
|
|
<ListGroup.Item action>Vestibulum at eros</ListGroup.Item>
|
|
</ListGroup>
|
|
</Col>
|
|
<Col role="main" style={contentStyle}>
|
|
{/* style={{height: '100%'}} */}
|
|
<div ref={this.ref}></div>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
</>)
|
|
}
|
|
}
|
|
|
|
export default TestComponent; |