-
Notifications
You must be signed in to change notification settings - Fork 1.6k
/
index.tsx
122 lines (112 loc) 路 3.53 KB
/
index.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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import React from 'react'
import { Graph } from '@antv/x6'
import {
Connector,
IntermediateEvent,
UndevelopedEvent,
BasicEvent,
ExternalEvent,
ConditioningEvent,
} from './shapes'
import '../index.less'
export default class Example extends React.Component {
private container: HTMLDivElement
componentDidMount() {
const graph = new Graph({
container: this.container,
width: 1000,
height: 800,
connecting: {
connectionPoint: {
name: 'boundary',
args: { extrapolate: true },
},
connector: 'rounded',
router: 'orth',
},
sorting: 'approx',
async: true,
interactive: false,
frozen: true,
})
var events = [
IntermediateEvent.create('Fall from Scaffolding').gate('inhibit'),
IntermediateEvent.create('Fall from the Scaffolding', 'and').gate('and'),
IntermediateEvent.create('Safety Belt Not Working', 'or').gate('or'),
IntermediateEvent.create('Fall By Accident', 'or').gate('or'),
IntermediateEvent.create('Broken By Equipment', 'or').gate('or'),
IntermediateEvent.create('Did not Wear Safety Belt', 'or').gate('or'),
UndevelopedEvent.create('Slip and Fall'),
UndevelopedEvent.create('Lose Balance'),
UndevelopedEvent.create('Upholder Broken'),
BasicEvent.create('Safety Belt Broken'),
BasicEvent.create('Forgot to Wear'),
ExternalEvent.create('Take off When Walking'),
ConditioningEvent.create('Height and Ground Condition'),
]
var links = [
Connector.create(events[0], events[1]),
Connector.create(events[1], events[2]),
Connector.create(events[1], events[3]),
Connector.create(events[2], events[4]),
Connector.create(events[2], events[5]),
Connector.create(events[3], events[6]),
Connector.create(events[3], events[7]),
Connector.create(events[4], events[8]),
Connector.create(events[4], events[9]),
Connector.create(events[5], events[10]),
Connector.create(events[5], events[11]),
Connector.create(events[0], events[12]),
]
// function layout() {
// const autoLayoutElements: v1.Node[] = []
// const manualLayoutElements: v1.Node[] = []
// graph.model.getNodes().forEach(cell => {
// if (cell instanceof ConditioningEvent) {
// manualLayoutElements.push(cell)
// } else {
// autoLayoutElements.push(cell)
// }
// })
// // Automatic Layout
// v1.layout.DirectedGraph.layout(
// graph.model.getSubGraph(autoLayoutElements),
// {
// setVertices: true,
// marginX: 20,
// marginY: 20,
// },
// )
// // Manual Layout
// manualLayoutElements.forEach(node => {
// const neighbor = graph.model.getNeighbors(node, { incoming: true })[0]
// if (!neighbor) {
// return
// }
// const neighborPosition = neighbor.getBBox().getBottomRight()
// node.setPosition(
// neighborPosition.x + 20,
// neighborPosition.y - node.getSize().height / 2 - 20,
// )
// })
// }
graph.model.resetCells([...events, ...links] as any)
graph.unfreeze()
}
refContainer = (container: HTMLDivElement) => {
this.container = container
}
render() {
return (
<div
style={{
width: '100%',
height: '100%',
backgroundColor: '#ffffff',
}}
>
<div ref={this.refContainer} className="x6-graph" />
</div>
)
}
}