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
| // jsplumb 默认配置
| export const jsplumbDefaults = {
| // 多个锚点 [源锚点，目标锚点]
| Anchors: [
| 'Top',
| 'TopCenter',
| 'TopRight',
| 'TopLeft',
| 'Right',
| 'RightMiddle',
| 'Bottom',
| 'BottomCenter',
| 'BottomRight',
| 'BottomLeft',
| 'Left',
| 'LeftMiddle',
| ],
| // 连线的容器id
| Container: 'workflow-right',
| // 设置链接线的形状，如直线或者曲线之类的。anchor可以去设置锚点的位置。可选值"<Bezier|Flowchart|StateMachine|Straight>"
| Connector: ['Bezier', { curviness: 100 }],
| // 节点是否可以用鼠标拖动使其断开，默认为true。即用鼠标链接上的连线，也可以使用鼠标拖动让其断开。设置成false，可以让其拖动也不会自动断开
| ConnectionsDetachable: false,
| // 删除线的时候节点不删除
| DeleteEndpointsOnDetach: false,
| // 每当添加或以其他方式创建 Endpoint 并且 jsPlumb 尚未给出任何明确的 Endpoint 定义时将使用
| Endpoint: ['Blank', { Overlays: '' }],
| // 连接中源和目标端点的默认外观
| EndpointStyle: { fill: '#1879ffa1', outlineWidth: 1 },
| // jsPlumb 的内部日志记录是否打开
| LogEnabled: true,
| // 连接器的默认外观
| PaintStyle: {
| stroke: '#E0E3E7',
| strokeWidth: 1,
| outlineStroke: 'transparent',
| outlineWidth: 10,
| },
| // 用于配置任何可拖动元素的默认选项jsPlumb.draggable
| DragOptions: { cursor: 'pointer', zIndex: 2000 },
| // 添加到连接器和端点的默认叠加层。已弃用：从 4.x 开始，将不支持此功能。并非所有叠加层都可以连接到连接器和端点。
| Overlays: [
| [
| 'Arrow',
| {
| width: 10, // 箭头尾部的宽度
| length: 8, // 从箭头的尾部到头部的距离
| location: 1, // 位置，建议使用0～1之间
| direction: 1, // 方向，默认值为1（表示向前），可选-1（表示向后）
| foldback: 0.623, // 折回，也就是尾翼的角度，默认0.623，当为1时，为正三角
| },
| ],
| [
| 'Label',
| {
| label: '',
| location: 0.5,
| cssClass: 'aLabel',
| },
| ],
| ],
| // 默认渲染模式 svg、canvas
| RenderMode: 'svg',
| // 悬停状态下连接的默认外观
| HoverPaintStyle: { stroke: '#b0b2b5', strokeWidth: 1 },
| // 悬停状态下端点的默认外观
| EndpointHoverStyle: { fill: 'red' },
| // 端点和连接的默认范围。范围提供了对哪些端点可以连接到哪些其他端点的基本控制
| Scope: 'jsPlumb_DefaultScope',
| };
|
| // 整个节点作为source或者target
| export const jsplumbMakeSource = {
| // 设置可以拖拽的类名，只要鼠标移动到该类名上的DOM，就可以拖拽连线
| filter: '.workflow-icon-drag',
| filterExclude: false,
| anchor: 'Continuous',
| // 是否允许自己连接自己
| allowLoopback: true,
| maxConnections: -1,
| };
|
| // 整个节点作为source或者target
| export const jsplumbMakeTarget = {
| filter: '.workflow-icon-drag',
| filterExclude: false,
| // 是否允许自己连接自己
| anchor: 'Continuous',
| allowLoopback: true,
| dropOptions: { hoverClass: 'ef-drop-hover' },
| };
|
| // 连线参数
| export const jsplumbConnect = {
| isSource: true,
| isTarget: true,
| // 动态锚点、提供了4个方向 Continuous、AutoDefault
| anchor: 'Continuous',
| };
|
|
