@next-bricks/diagram 0.68.8 → 0.68.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bricks.json +3 -3
- package/dist/chunks/1265.177053f1.js +3 -0
- package/dist/chunks/1265.177053f1.js.map +1 -0
- package/dist/chunks/577.c9c65352.js.map +1 -1
- package/dist/chunks/editable-label.667b04d5.js.map +1 -1
- package/dist/chunks/eo-diagram.78450578.js.map +1 -1
- package/dist/chunks/eo-display-canvas.2a43ce91.js.map +1 -1
- package/dist/chunks/eo-draw-canvas.e01342d6.js.map +1 -1
- package/dist/chunks/experimental-node.2f4d802a.js.map +1 -1
- package/dist/chunks/{main.4630d30e.js → main.9ba966bb.js} +2 -2
- package/dist/chunks/{main.4630d30e.js.map → main.9ba966bb.js.map} +1 -1
- package/dist/examples.json +10 -7
- package/dist/{index.c366c6da.js → index.31ee50ee.js} +2 -2
- package/dist/{index.c366c6da.js.map → index.31ee50ee.js.map} +1 -1
- package/dist/manifest.json +359 -220
- package/dist/types.json +5654 -5654
- package/dist-types/diagram/index.d.ts +48 -1
- package/dist-types/display-canvas/index.d.ts +37 -3
- package/dist-types/draw-canvas/index.d.ts +73 -5
- package/dist-types/editable-label/index.d.ts +14 -1
- package/dist-types/experimental-node/index.d.ts +11 -1
- package/docs/editable-label.md +71 -1
- package/docs/editable-label.react.md +100 -0
- package/docs/eo-diagram.md +54 -87
- package/docs/eo-diagram.react.md +399 -0
- package/docs/eo-display-canvas.md +60 -21
- package/docs/eo-display-canvas.react.md +376 -0
- package/docs/eo-draw-canvas.md +95 -40
- package/docs/eo-draw-canvas.react.md +989 -0
- package/docs/experimental-node.md +156 -0
- package/docs/experimental-node.react.md +157 -0
- package/package.json +2 -2
- package/dist/chunks/1265.55a02b5a.js +0 -3
- package/dist/chunks/1265.55a02b5a.js.map +0 -1
- /package/dist/chunks/{1265.55a02b5a.js.LICENSE.txt → 1265.177053f1.js.LICENSE.txt} +0 -0
package/docs/eo-draw-canvas.md
CHANGED
|
@@ -1,11 +1,88 @@
|
|
|
1
|
-
|
|
1
|
+
---
|
|
2
|
+
tagName: eo-draw-canvas
|
|
3
|
+
displayName: WrappedEoDrawCanvas
|
|
4
|
+
description: "用于手工绘图的画布构件，支持节点拖放、连线绘制、元素移动/缩放/删除等交互操作，配合展示画布（eo-display-canvas）使用。"
|
|
5
|
+
category: diagram
|
|
6
|
+
source: "@next-bricks/diagram"
|
|
7
|
+
---
|
|
2
8
|
|
|
3
|
-
|
|
9
|
+
# eo-draw-canvas
|
|
10
|
+
|
|
11
|
+
> 用于手工绘图的画布构件，支持节点拖放、连线绘制、元素移动/缩放/删除等交互操作，配合展示画布（eo-display-canvas）使用。
|
|
12
|
+
|
|
13
|
+
## Props
|
|
14
|
+
|
|
15
|
+
| 属性 | 类型 | 必填 | 默认值 | 说明 |
|
|
16
|
+
| ----------------------------------- | ------------------------------ | ---- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
17
|
+
| cells | `InitialCell[]` | - | - | 初始化画布单元格数据，包含节点（node）、边（edge）和装饰器（decorator）。仅当初始化时使用，渲染后重新设置 `cells` 将无效，请使用 `updateCells` 方法代替。 |
|
|
18
|
+
| layout | `LayoutType` | ✅ | - | 画布布局类型，支持 `manual`（手动定位）、`force`（力导向）、`dagre`（层次有向图）。 |
|
|
19
|
+
| layoutOptions | `LayoutOptions` | - | - | 布局算法选项，根据 layout 类型不同，支持不同参数（如 dagre 的 ranksep/nodesep 等）。 |
|
|
20
|
+
| defaultNodeSize | `SizeTuple` | - | `[20, 20]` | 节点默认尺寸，格式为 `[width, height]`，在节点未指定尺寸时使用。 |
|
|
21
|
+
| defaultNodeBricks | `NodeBrickConf[]` | - | - | 节点默认砖块配置，指定渲染节点的自定义构件，可按节点类型匹配不同配置。 |
|
|
22
|
+
| degradedThreshold | `number` | - | - | 当节点数量达到或超过 `degradedThreshold` 时，节点将被降级展示。 |
|
|
23
|
+
| degradedNodeLabel | `string` | - | - | 设置节点将降级展示时显示的名称。 |
|
|
24
|
+
| defaultEdgeLines | `EdgeLineConf[]` | - | - | 使用条件判断设置默认的边对应的连线。在 `if` 表达式中 `DATA` 为 `{ edge }`。 |
|
|
25
|
+
| activeTarget | `ActiveTarget \| null` | - | - | 当前激活目标，可以是节点、边或装饰器，为 null 表示无激活目标。 |
|
|
26
|
+
| fadeUnrelatedCells | `boolean` | - | - | 当 `activeTarget` 不为 `null` 时，隐藏其他跟该 `activeTarget` 无关的元素，高亮相关节点和边。 |
|
|
27
|
+
| zoomable | `boolean` | - | `true` | 是否允许通过鼠标滚轮或触控板捏合手势缩放画布，默认为 true。 |
|
|
28
|
+
| scrollable | `boolean` | - | `true` | 是否允许通过滚轮平移画布（非捏合手势），默认为 true。 |
|
|
29
|
+
| pannable | `boolean` | - | `true` | 是否允许通过鼠标拖拽平移画布，默认为 true。 |
|
|
30
|
+
| allowEdgeToArea | `boolean` | - | `false` | 是否允许将边连接到区域（area）装饰器，默认为 false。 |
|
|
31
|
+
| dragBehavior | `DragBehavior` | - | - | 按住鼠标拖动时的行为：`none`（无）、`lasso`（绘制选区）、`grab`（拖动画布）。 |
|
|
32
|
+
| ctrlDragBehavior | `CtrlDragBehavior` | - | - | 按住 ctrl 键并按住鼠标拖动时的行为：`none`（无）、`grab`（拖动画布）。 |
|
|
33
|
+
| scaleRange | `RangeTuple` | - | - | 缩放比例范围，格式为 `[min, max]`，默认范围由内部常量决定。 |
|
|
34
|
+
| lineSettings | `LineSettings` | - | - | 连线设置，包含连线类型、箭头等属性，用于新建连线时的默认样式。 |
|
|
35
|
+
| lineConnector | `LineConnecterConf \| boolean` | - | - | 连线连接器配置，设置为 `true` 或配置对象以启用智能连线功能，允许从节点边缘拖出连线。 |
|
|
36
|
+
| doNotResetActiveTargetForSelector | `string` | - | - | 选择器，点击该选择器对应的元素时不重置 `activeTarget`。 |
|
|
37
|
+
| doNotResetActiveTargetOutsideCanvas | `boolean` | - | - | 在画布外点击时不重置 `activeTarget`。 |
|
|
38
|
+
|
|
39
|
+
## Events
|
|
40
|
+
|
|
41
|
+
| 事件 | detail | 说明 |
|
|
42
|
+
| -------------------------- | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
|
|
43
|
+
| activeTarget.change | `ActiveTarget \| null` — 当前激活目标，节点/边/装饰器对象或 null | 激活目标变化时触发，当用户点击节点、边或装饰器使其激活，或点击空白处取消激活时触发。 |
|
|
44
|
+
| node.move | `MoveCellPayload` — 移动的节点信息，包含节点 id 和新位置 | 节点被拖拽移动后触发（已废弃，请使用 `cell.move`）。 |
|
|
45
|
+
| cell.move | `MoveCellPayload` — 移动的单元格信息，包含单元格 id、类型和新位置 | 单个单元格（节点或装饰器）被拖拽移动后触发。 |
|
|
46
|
+
| cells.move | `MoveCellPayload[]` — 移动的多个单元格信息列表 | 多个单元格（通过框选后拖拽）同时被移动后触发。 |
|
|
47
|
+
| cell.resize | `ResizeCellPayload` — 调整大小的单元格信息，包含单元格 id 和新尺寸 | 单元格（节点或装饰器）被手动调整大小后触发。 |
|
|
48
|
+
| node.delete | `Cell` — 被删除的节点 cell 对象 | 节点被删除时触发（已废弃，请使用 `cell.delete`）。 |
|
|
49
|
+
| cell.delete | `Cell` — 被删除的单元格对象，包含节点、边或装饰器 | 单个单元格被删除时触发（用户按 Delete 键或通过菜单删除）。 |
|
|
50
|
+
| cells.delete | `Cell[]` — 被批量删除的单元格对象列表 | 多个单元格被同时删除时触发（框选后批量删除）。 |
|
|
51
|
+
| cell.contextmenu | `CellContextMenuDetail` — 右键菜单详情，包含 `{ cell: 对应的单元格, clientX: 鼠标X坐标, clientY: 鼠标Y坐标 }` | 用户右键点击节点、边或装饰器时触发，常用于弹出上下文菜单。 |
|
|
52
|
+
| edge.add | `ConnectNodesDetail` — 新边详情，包含 `{ source: 起始节点 id, target: 目标节点 id }` | 通过画布绘图的方式添加边时触发（手动调用 `addEdge` 方法不会触发该事件）。 |
|
|
53
|
+
| edge.view.change | `EdgeViewChangePayload` — 边视图变更详情，包含边 id 和新的视图属性 | 用户通过拖拽手柄修改连线路径或形状时触发。 |
|
|
54
|
+
| decorator.view.change | `DecoratorViewChangePayload` — 装饰器视图变更详情，包含装饰器 id 和新的位置/尺寸 | 装饰器（area、container、text 等）被移动或调整大小时触发。 |
|
|
55
|
+
| decorator.text.change | `DecoratorTextChangeDetail` — 文本变更详情，包含装饰器 id 和新的文本内容 | 装饰器文本（area/container/text 的文字）被编辑并确认后触发。 |
|
|
56
|
+
| node.container.change | `MoveCellPayload[]` — 节点与容器关系变更详情列表，有 containerCell 则为新增关系，否则为删除关系 | 节点与容器组（container 装饰器）的包含关系发生变化时触发，包括拖入、拖出容器。 |
|
|
57
|
+
| decorator.group.plus.click | `DecoratorCell` — 被点击加号按钮的分组容器 cell 对象 | 分组容器（group 装饰器）的加号按钮被点击时触发，用于触发在组内添加新节点的逻辑。 |
|
|
58
|
+
| scale.change | `number` — 当前缩放比例值（如 1.0 表示 100%） | 画布缩放比例变化时触发，从素材库拖拽元素进画布时，拖拽图像应设置对应的缩放比例。 |
|
|
59
|
+
| canvas.contextmenu | `CanvasContextMenuDetail` — 右键菜单详情，包含 `{ clientX: 鼠标X坐标, clientY: 鼠标Y坐标, view: 画布坐标 { x, y } }` | 用户在画布空白处右键点击时触发，常用于弹出画布级别的上下文菜单。 |
|
|
60
|
+
| canvas.copy | `void` | 用户触发复制操作（Ctrl+C）时触发，外部需自行处理复制逻辑。 |
|
|
61
|
+
| canvas.paste | `void` | 用户触发粘贴操作（Ctrl+V）时触发，外部需自行处理粘贴逻辑。 |
|
|
62
|
+
| canvas.group | `void` | 用户触发分组操作（Ctrl+G）时触发，外部需自行处理分组逻辑。 |
|
|
63
|
+
| canvas.ungroup | `void` | 用户触发取消分组操作（Ctrl+Shift+G）时触发，外部需自行处理解组逻辑。 |
|
|
64
|
+
|
|
65
|
+
## Methods
|
|
66
|
+
|
|
67
|
+
| 方法 | 参数 | 返回值 | 说明 |
|
|
68
|
+
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
|
|
69
|
+
| dropNode | <ul><li>`info: DropNodeInfo` - 拖放节点信息，包含节点 id、拖放位置（clientX/clientY）、尺寸和数据</li></ul> | `Promise<NodeCell \| null>` | 将一个节点拖放到画布中指定位置。如果放置位置不在画布内，则返回 null。 |
|
|
70
|
+
| dropDecorator | <ul><li>`info: DropDecoratorInfo` - 拖放装饰器信息，包含装饰器类型、拖放位置、文本和方向等</li></ul> | `Promise<DecoratorCell \| null>` | 将一个装饰器（area、container、text、line 等）拖放到画布中指定位置。如果放置位置不在画布内，则返回 null。 |
|
|
71
|
+
| addNodes | <ul><li>`nodes: AddNodeInfo[]` - 要添加的节点信息列表，每项包含 id、数据、尺寸等</li></ul> | `Promise<NodeCell[]>` | 批量添加节点到画布，节点位置由布局算法自动计算。 |
|
|
72
|
+
| addEdge | <ul><li>`info: AddEdgeInfo` - 边信息，包含 source（起始节点 id）、target（目标节点 id）和可选的 data</li></ul> | `Promise<EdgeCell>` | 以编程方式添加一条边（连线）到画布。注意：此方法不会触发 `edge.add` 事件。 |
|
|
73
|
+
| manuallyConnectNodes | <ul><li>`source: NodeId` - 起始节点的 id</li></ul> | `Promise<ConnectNodesDetail>` | 以编程方式启动从指定源节点到目标节点的手动连线流程，等待用户在画布上点击目标节点后返回连线详情。 |
|
|
74
|
+
| updateCells | <ul><li>`cells: InitialCell[]` - 新的单元格数据列表</li><li>`ctx?: UpdateCellsContext` - 可选的更新上下文，用于指定更新原因和位置参考节点</li></ul> | `Promise<{ updated: Cell[] }>` | 更新画布中的单元格数据，支持增量更新（新增、修改），已渲染的画布使用此方法代替直接设置 `cells` 属性。 |
|
|
75
|
+
| reCenter | - | `void` | 将画布视图重置并居中，使所有单元格重新显示在视口中央。 |
|
|
76
|
+
| toggleLock | <ul><li>`target: ActiveTarget` - 当前选中的目标</li></ul> | `Promise<Cell[] \| null>` | 切换锁定状态。如果目标中包含未锁定且可以锁定的元素，则将这些元素锁定；否则，如果目标中包含已锁定且可以解锁的元素，则将这些元素解锁。 |
|
|
77
|
+
| lock | <ul><li>`target: ActiveTarget` - 当前选中的目标</li></ul> | `Promise<Cell[] \| null>` | 锁定选中的目标。规则类似 `toggleLock`，但仅执行锁定操作。 |
|
|
78
|
+
| unlock | <ul><li>`target: ActiveTarget` - 当前选中的目标</li></ul> | `Promise<Cell[] \| null>` | 解锁选中的目标。规则类似 `toggleLock`，但仅执行解锁操作。 |
|
|
4
79
|
|
|
5
80
|
## Examples
|
|
6
81
|
|
|
7
82
|
### Basic
|
|
8
83
|
|
|
84
|
+
基础绘图画布示例，展示手动布局（manual）下的节点拖放、连线绘制、装饰器（area/text/line/rect/container）添加、右键菜单（删除/添加边/锁定）等交互功能。
|
|
85
|
+
|
|
9
86
|
```yaml preview minHeight="600px"
|
|
10
87
|
- brick: div
|
|
11
88
|
properties:
|
|
@@ -44,7 +121,7 @@
|
|
|
44
121
|
decorator: "group",
|
|
45
122
|
containerId: "container-2",
|
|
46
123
|
view: {
|
|
47
|
-
usePlus: true,
|
|
124
|
+
usePlus: true,
|
|
48
125
|
},
|
|
49
126
|
},
|
|
50
127
|
{
|
|
@@ -52,21 +129,21 @@
|
|
|
52
129
|
id: "G",
|
|
53
130
|
groupId: "group-1",
|
|
54
131
|
data: {
|
|
55
|
-
name: `Node G`,
|
|
56
|
-
},
|
|
132
|
+
name: `Node G`,
|
|
133
|
+
},
|
|
57
134
|
view: {
|
|
58
135
|
width: 60,
|
|
59
136
|
height: 60,
|
|
60
137
|
}
|
|
61
138
|
},
|
|
62
139
|
{
|
|
63
|
-
type: "edge",
|
|
140
|
+
type: "edge",
|
|
64
141
|
source: "X",
|
|
65
142
|
target: "Y",
|
|
66
143
|
},
|
|
67
144
|
{
|
|
68
145
|
type: "edge",
|
|
69
|
-
source: "Z",
|
|
146
|
+
source: "Z",
|
|
70
147
|
target: "W",
|
|
71
148
|
},
|
|
72
149
|
{
|
|
@@ -85,7 +162,7 @@
|
|
|
85
162
|
groupId: ["C","S","D","F",].includes(id)?"group-1":null,
|
|
86
163
|
data: {
|
|
87
164
|
name: `Node ${id}`,
|
|
88
|
-
},
|
|
165
|
+
},
|
|
89
166
|
view: {
|
|
90
167
|
x: ["A","B","C","S","D","F","Z","X","Y",].includes(id)?null:Math.round(
|
|
91
168
|
id === "X"
|
|
@@ -103,7 +180,7 @@
|
|
|
103
180
|
{
|
|
104
181
|
type: "decorator",
|
|
105
182
|
id: "text-1",
|
|
106
|
-
decorator: "text",
|
|
183
|
+
decorator: "text",
|
|
107
184
|
view: {
|
|
108
185
|
x: 300,
|
|
109
186
|
y: 120,
|
|
@@ -163,32 +240,11 @@
|
|
|
163
240
|
- <% EVENT.detail %>
|
|
164
241
|
- brick: eo-button
|
|
165
242
|
properties:
|
|
166
|
-
textContent:
|
|
243
|
+
textContent: Re-center
|
|
167
244
|
events:
|
|
168
245
|
click:
|
|
169
246
|
target: eo-draw-canvas
|
|
170
|
-
method:
|
|
171
|
-
args:
|
|
172
|
-
- |
|
|
173
|
-
<%
|
|
174
|
-
((...seeds) => seeds.map((seed) => ({
|
|
175
|
-
id: seed,
|
|
176
|
-
containerId: "container-1",
|
|
177
|
-
data: {
|
|
178
|
-
name: String(seed),
|
|
179
|
-
},
|
|
180
|
-
})))(
|
|
181
|
-
Math.round(Math.random() * 1e6),
|
|
182
|
-
Math.round(Math.random() * 1e6),
|
|
183
|
-
Math.round(Math.random() * 1e6),
|
|
184
|
-
)
|
|
185
|
-
%>
|
|
186
|
-
callback:
|
|
187
|
-
success:
|
|
188
|
-
action: console.log
|
|
189
|
-
args:
|
|
190
|
-
- Added nodes
|
|
191
|
-
- <% EVENT.detail %>
|
|
247
|
+
method: reCenter
|
|
192
248
|
- brick: eo-button
|
|
193
249
|
properties:
|
|
194
250
|
textContent: "Add edge: Y => Z"
|
|
@@ -347,8 +403,8 @@
|
|
|
347
403
|
: {
|
|
348
404
|
position: EVENT.detail,
|
|
349
405
|
decorator: ITEM.split(".")[0],
|
|
350
|
-
text:
|
|
351
|
-
direction: ITEM.split(".")
|
|
406
|
+
text: ITEM === "text" ? "Text" : undefined,
|
|
407
|
+
direction: ITEM.split(".")[1],
|
|
352
408
|
}
|
|
353
409
|
%>
|
|
354
410
|
callback:
|
|
@@ -370,21 +426,16 @@
|
|
|
370
426
|
height: 100%
|
|
371
427
|
activeTarget: <%= CTX.activeTarget %>
|
|
372
428
|
fadeUnrelatedCells: true
|
|
373
|
-
allowEdgeToArea: true
|
|
374
429
|
dragBehavior: lasso
|
|
375
430
|
layoutOptions:
|
|
376
|
-
# initialLayout: layered-architecture
|
|
377
|
-
initialLayout: layered-staggered
|
|
378
431
|
snap:
|
|
379
|
-
# grid: true
|
|
380
432
|
object: true
|
|
381
|
-
# Initial nodes only
|
|
382
433
|
defaultNodeSize: [60, 60]
|
|
383
434
|
defaultNodeBricks:
|
|
384
435
|
- useBrick:
|
|
385
436
|
brick: diagram.experimental-node
|
|
386
437
|
properties:
|
|
387
|
-
textContent:
|
|
438
|
+
textContent: <% `Node ${DATA.node.id}` %>
|
|
388
439
|
status: |
|
|
389
440
|
<%=
|
|
390
441
|
(CTX.activeTarget?.type === "multi"
|
|
@@ -958,6 +1009,8 @@
|
|
|
958
1009
|
|
|
959
1010
|
### Force layout
|
|
960
1011
|
|
|
1012
|
+
使用力导向（force）布局模式，节点位置由力导向算法自动计算。
|
|
1013
|
+
|
|
961
1014
|
```yaml preview minHeight="600px"
|
|
962
1015
|
- brick: div
|
|
963
1016
|
properties:
|
|
@@ -1352,6 +1405,8 @@
|
|
|
1352
1405
|
|
|
1353
1406
|
### Dagre layout
|
|
1354
1407
|
|
|
1408
|
+
使用层次有向图（dagre）布局模式，节点位置由 dagre 算法自动计算，适合展示有向依赖关系。
|
|
1409
|
+
|
|
1355
1410
|
```yaml preview minHeight="600px"
|
|
1356
1411
|
- brick: div
|
|
1357
1412
|
properties:
|