-
Notifications
You must be signed in to change notification settings - Fork 10
/
MyDiagram.tsx
82 lines (73 loc) · 2.77 KB
/
MyDiagram.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
import React from 'react';
import go from 'gojs';
import { Diagram, ToolManager } from 'gojs';
import { NodeModel } from '../reducers/diagramReducer';
import { DiagramModel, LinkModel, GojsDiagram, ModelChangeEvent } from 'react-gojs';
import './MyDiagram.css';
import { UpdateNodeTextEvent } from '../actions/diagram';
interface MyDiagramProps {
model: DiagramModel<NodeModel, LinkModel>;
onNodeSelection: (key: string, isSelected: boolean) => void;
onModelChange: (event: ModelChangeEvent<NodeModel, LinkModel>) => void;
onTextChange: (event: UpdateNodeTextEvent) => void;
}
class MyDiagram extends React.PureComponent<MyDiagramProps> {
constructor(props: MyDiagramProps) {
super(props);
this.createDiagram = this.createDiagram.bind(this);
this.onTextEdited = this.onTextEdited.bind(this);
}
render() {
return (
<GojsDiagram
diagramId="myDiagramDiv"
model={this.props.model}
createDiagram={this.createDiagram}
className="myDiagram"
onModelChange={this.props.onModelChange}
/>
);
}
private createDiagram(diagramId: string): Diagram {
const $ = go.GraphObject.make;
const myDiagram: Diagram = $(go.Diagram, diagramId, {
initialContentAlignment: go.Spot.LeftCenter,
layout: $(go.TreeLayout, {
angle: 0,
arrangement: go.TreeLayout.ArrangementVertical,
treeStyle: go.TreeLayout.StyleLayered
}),
isReadOnly: false,
allowHorizontalScroll: true,
allowVerticalScroll: true,
allowZoom: false,
allowSelect: true,
autoScale: Diagram.Uniform,
contentAlignment: go.Spot.LeftCenter,
TextEdited: this.onTextEdited
});
myDiagram.toolManager.panningTool.isEnabled = false;
myDiagram.toolManager.mouseWheelBehavior = ToolManager.WheelScroll;
myDiagram.nodeTemplate = $(
go.Node,
'Auto',
{
selectionChanged: node => this.props.onNodeSelection(node.key as string, node.isSelected)
},
$(go.Shape, 'RoundedRectangle', { strokeWidth: 0 }, new go.Binding('fill', 'color')),
$(go.TextBlock, { margin: 8, editable: true }, new go.Binding('text', 'label'))
);
return myDiagram;
}
private onTextEdited(e: go.DiagramEvent) {
const tb = e.subject;
if (tb === null) {
return;
}
const node = tb.part;
if (node instanceof go.Node && this.props.onTextChange) {
this.props.onTextChange({ key: node.key as string, text: tb.text });
}
}
}
export default MyDiagram;