Skip to content

Commit 5434840

Browse files
xinxin93xinxin93
committed
feat(extension): node resize update
1 parent e83b998 commit 5434840

File tree

13 files changed

+409
-38
lines changed

13 files changed

+409
-38
lines changed

‎docs/article/NodeResize.md

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ edges.targetEdges.forEach(item => {
149149
### 样式
150150
增加节点调整后，为了使整体样式个更加舒适，在插件内部设置了节点的主题样式，宿主可以对其进行覆盖设置。
151151
```js
152-
// 设置默认样式，主要将outlineColor设置为透明，不再core包中默认的节点外框
152+
// 设置默认样式，主要将outlineColor设置为透明，不再展示core包中默认的节点外框
153153
lf.setTheme({
154154
rect: {
155155
strokeWidth: 2,
@@ -182,5 +182,10 @@ edges.targetEdges.forEach(item => {
182182
},
183183
},
184184
```
185+
## 事件
186+
节点缩放后，定义了 `node:resize` 事件，并抛出节点缩放前和缩放后的基础信息、大小、位置信息，方便宿主可以进行其他操作。
187+
188+
## 自定义节点使用
189+
为了能够使自定义节点使用缩放功能，内部将 `RectResize`, `EllipseResize` , `DiamondResize` 导出，通过继承 `RectResize.model` , `RectResize.view` 等实现缩放。
185190
## 最后
186191
以上介绍了节点缩放功能的实现方案，如果对此插件实现有想法的同学，欢迎在用户群交流~。

‎docs/guide/extension/extension-node-resize.md

Lines changed: 118 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@ import { NodeResize } from '@logicflow/extension';
1313
import '@logicflow/extension/lib/style/index.css'
1414
LogicFlow.use(NodeResize);
1515
```
16-
<example href="/examples/#/extension/node-resize" :height="450" ></example>
16+
<example href="/examples/#/extension/node-resize" :height="650" ></example>
17+
18+
[示例代码](https://github.com/didi/LogicFlow/tree/master/examples/src/pages/extension/NodeResize)
1719

1820
## 个性化配置
1921
### step
@@ -23,7 +25,7 @@ import { NodeResize } from '@logicflow/extension';
2325
NodeResize.step = 4;
2426
LogicFlow.use(NodeResize);
2527
```
26-
### 样式
28+
### 缩放样式
2729
支持节点缩放边框以及控制点样式调整，支持的样式以及默认值如下:
2830
```js
2931
// 边框和contol拖动点样式的设置
@@ -49,5 +51,119 @@ LogicFlow.use(NodeResize);
4951
strokeDasharray: '',
5052
}
5153
LogicFlow.use(NodeResize);
54+
```
55+
### 主题
56+
增加节点调整后，为了使整体样式个更加舒适，在插件内部设置了节点的主题样式，宿主可以对其进行覆盖设置。
57+
```js
58+
// 默认配置，主要将outlineColor设置为透明，不再展示core包中默认的节点外框
59+
lf.setTheme({
60+
rect: {
61+
strokeWidth: 2,
62+
outlineColor: 'transparent',
63+
},
64+
ellipse: {
65+
strokeWidth: 2,
66+
outlineColor: 'transparent',
67+
},
68+
diamond: {
69+
strokeWidth: 2,
70+
outlineColor: 'transparent',
71+
},
72+
});
73+
```
74+
如果想要在此基础上增加其他主题配置，需要将2者配置merge后设置。例如：在此基础上想要设置矩形边框为蓝色，设置如下：
75+
```js
76+
lf.setTheme({
77+
rect: {
78+
strokeWidth: 2,
79+
outlineColor: 'transparent',
80+
stroke: 'blue',
81+
},
82+
ellipse: {
83+
strokeWidth: 2,
84+
outlineColor: 'transparent',
85+
},
86+
diamond: {
87+
strokeWidth: 2,
88+
outlineColor: 'transparent',
89+
},
90+
});
91+
```
92+
## 事件
93+
节点缩放后抛出事件`node:resize`，抛出数据包括节点缩放前后的节点位置、节点大小信息， 数据为{oldNodeSize, newNodeSize}, 详细字段如下。
94+
| 名称 | 类型 | 描述 |
95+
| :---- | :----- | :------------- |
96+
| id | String | 节点 id|
97+
| type | String | 节点类型 |
98+
| modelType | String | 节点图形类型，已内部定义 |
99+
| x | Number | 节点中心x轴坐标 |
100+
| y | Number | 节点中心y轴坐标 |
101+
| rx | Number | x轴半径(椭圆、菱形) |
102+
| ry | Number | y轴半径(椭圆、菱形) |
103+
| width | Number | 节点宽度(矩形) |
104+
| height | Number | 节点高度(矩形) |
105+
106+
```js
107+
lf.on('node:resize', ({oldNodeSize, newNodeSize}) => {
108+
console.log(oldNodeSize, newNodeSize)
109+
})
110+
```
111+
## 自定义节点使用
112+
通过继承的方式，实现自定义节点的缩放。
113+
- RectResize: 矩形
114+
- EllipseResize: 椭圆
115+
- DiamondResize: 菱形
116+
117+
**getShapeResize**方法功能等同于普通自定义节点的**getShape**方法，进行个性化图形绘制，使用方式如下：
118+
119+
```js
120+
import { RectResize, EllipseResize, DiamondResize,} from '@logicflow/extension';
121+
// 自定义节点的 Model 与 普通自定义节点一致
122+
class UserModel extends RectResize.model {}
123+
124+
// 自定义节点的 view ，方法功能等同于普通自定义节点的getShape方法
125+
class UserView extends RectResize.view {
126+
getShapeResize() {
127+
// 通过 getAttributes 获取 model 中的属性
128+
const { x, y, width, height, fill, stroke, strokeWidth, radius } = this.getAttributes();
129+
const attrs = {
130+
// rect 标签的 x，y 对应的是图形的左上角
131+
// 所以我们要将矩形的中心移动到 x，y
132+
x: x - width / 2,
133+
y: y - height / 2,
134+
width,
135+
height,
136+
stroke,
137+
fill,
138+
strokeWidth,
139+
rx: radius,
140+
ry: radius,
141+
}
142+
// getShape 的返回值是一个通过 h 方法创建的 svg 元素
143+
return h("g", {}, [
144+
h("rect", { ...attrs }),
145+
h(
146+
'svg',
147+
{
148+
x: x - width / 2 + 5,
149+
y: y - height / 2 + 5,
150+
width: 25,
151+
height: 25,
152+
viewBox: "0 0 1274 1024",
153+
},
154+
h(
155+
'path',
156+
{
157+
fill: stroke,
158+
d:
159+
"M655.807326 287.35973m-223.989415 0a218.879 218.879 0 1 0 447.978829 0 218.879 218.879 0 1 0-447.978829 0ZM1039.955839 895.482975c-0.490184-212.177424-172.287821-384.030443-384.148513-384.030443-211.862739 0-383.660376 171.85302-384.15056 384.030443L1039.955839 895.482975z",
160+
}
161+
)
162+
)
163+
]
164+
);
165+
}
166+
}
167+
52168
```
53169
更过细节见 [节点缩放的实现方案](/article/NodeResize.html)

‎examples/src/pages/extension/NodeResize/CustomeNode/ExclusiveGateway.tsx

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { h } from '@logicflow/core';
2+
import { DiamondResize } from '@logicflow/extension';
3+
import { BaseNodeModel } from '@logicflow/core';
4+
5+
type PointTuple = [number, number];
6+
7+
export type ExclusiveGatewayAttribute = BaseNodeModel & {
8+
points?: PointTuple[] & string;
9+
};
10+
const ICONSIZE = 25
11+
12+
class ExclusiveGatewayModel extends DiamondResize.model {
13+
// @ts-ignore
14+
constructor(data, graphModel) {
15+
data.text = {
16+
value: (data.text && data.text.value) || '',
17+
x: data.x,
18+
y: data.y + 40
19+
}
20+
super(data, graphModel)
21+
}
22+
setAttributes() {
23+
this.rx = ICONSIZE;
24+
this.ry = ICONSIZE;
25+
}
26+
}
27+
28+
class ExclusiveGatewayView extends DiamondResize.view {
29+
getShapeResize() {
30+
const attributes = super.getAttributes();
31+
const {
32+
x,
33+
y,
34+
fill,
35+
stroke,
36+
strokeWidth,
37+
points,
38+
} = attributes;
39+
const pointsPath = points.map(point => point.join(',')).join(' ');
40+
return h(
41+
'g',
42+
{},
43+
h('polygon', {
44+
fill,
45+
stroke,
46+
strokeWidth,
47+
points: pointsPath,
48+
}),
49+
h('path', {
50+
transform: `matrix(1 0 0 1 ${x - ICONSIZE} ${y - ICONSIZE})`,
51+
fill,
52+
stroke,
53+
strokeWidth,
54+
d:
55+
'm 16,15 7.42857142857143,9.714285714285715 -7.42857142857143,9.714285714285715 3.428571428571429,0 5.714285714285715,-7.464228571428572 5.714285714285715,7.464228571428572 3.428571428571429,0 -7.42857142857143,-9.714285714285715 7.42857142857143,-9.714285714285715 -3.428571428571429,0 -5.714285714285715,7.464228571428572 -5.714285714285715,-7.464228571428572 -3.428571428571429,0 z',
56+
}),
57+
);
58+
}
59+
}
60+
61+
const ExclusiveGateway = {
62+
type: 'bpmn:exclusiveGateway',
63+
view: ExclusiveGatewayView,
64+
model: ExclusiveGatewayModel,
65+
};
66+
67+
export { ExclusiveGatewayView, ExclusiveGatewayModel };
68+
export default ExclusiveGateway;

‎examples/src/pages/extension/NodeResize/CustomeNode/StartEvent.tsx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { EllipseResize } from '@logicflow/extension';
2+
class StartEventModel extends EllipseResize.model {
3+
// @ts-ignore
4+
constructor(data, graphModel) {
5+
data.text = {
6+
value: (data.text && data.text.value) || '',
7+
x: data.x,
8+
y: data.y + 35,
9+
}
10+
super(data, graphModel)
11+
}
12+
setAttributes(){
13+
this.rx = 20;
14+
this.ry = 20;
15+
}
16+
getConnectedTargetRules() {
17+
const rules = super.getConnectedTargetRules();
18+
const notAsTarget = {
19+
message: '起始节点不能作为连线的终点',
20+
validate: () => false,
21+
};
22+
rules.push(notAsTarget);
23+
return rules;
24+
}
25+
}
26+
27+
class StartEventView extends EllipseResize.view {
28+
getAttributes() {
29+
const attr = super.getAttributes();
30+
return {
31+
...attr,
32+
};
33+
}
34+
}
35+
36+
const StartEvent = {
37+
type: 'bpmn:startEvent',
38+
view: StartEventView,
39+
model: StartEventModel,
40+
};
41+
42+
export { StartEventModel, StartEventView };
43+
export default StartEvent;

‎examples/src/pages/extension/NodeResize/CustomeNode/UserTask.tsx

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
2+
import { h } from '@logicflow/core';
3+
import { RectResize } from '@logicflow/extension';
4+
5+
class UserTaskModel extends RectResize.model {
6+
setAttributes() {
7+
this.width = 100;
8+
this.height = 80;
9+
this.radius = 10;
10+
}
11+
}
12+
// 自定义节点的 view
13+
class UserTaskView extends RectResize.view {
14+
getShapeResize() {
15+
// 通过 getAttributes 获取 model 中的属性
16+
const { x, y, width, height, fill, stroke, strokeWidth, radius } = this.getAttributes();
17+
const attrs = {
18+
// rect 标签的 x，y 对应的是图形的左上角
19+
// 所以我们要将矩形的中心移动到 x，y
20+
x: x - width / 2,
21+
y: y - height / 2,
22+
width,
23+
height,
24+
stroke,
25+
fill,
26+
strokeWidth,
27+
rx: radius,
28+
ry: radius,
29+
}
30+
// getShape 的返回值是一个通过 h 方法创建的 svg 元素
31+
return h("g", {}, [
32+
h("rect", { ...attrs }),
33+
h(
34+
'svg',
35+
{
36+
x: x - width / 2 + 5,
37+
y: y - height / 2 + 5,
38+
width: 25,
39+
height: 25,
40+
viewBox: "0 0 1274 1024",
41+
},
42+
h(
43+
'path',
44+
{
45+
fill: stroke,
46+
d:
47+
"M655.807326 287.35973m-223.989415 0a218.879 218.879 0 1 0 447.978829 0 218.879 218.879 0 1 0-447.978829 0ZM1039.955839 895.482975c-0.490184-212.177424-172.287821-384.030443-384.148513-384.030443-211.862739 0-383.660376 171.85302-384.15056 384.030443L1039.955839 895.482975z",
48+
}
49+
)
50+
)
51+
]
52+
);
53+
}
54+
}
55+
56+
const UserTask = {
57+
type: 'bpmn:userTask',
58+
view: UserTaskView,
59+
model: UserTaskModel,
60+
};
61+
62+
export { UserTaskView, UserTaskModel };
63+
export default UserTask;

‎examples/src/pages/extension/NodeResize/index.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,4 +31,15 @@
3131
margin-right: 20px;
3232
background: #fff;
3333
cursor: pointer;
34+
}
35+
.node-resize-custome{
36+
display: inline-block;
37+
width: 50px;
38+
height: 50px;
39+
margin-right: 10px;
40+
font-size: 14px;
41+
text-align: center;
42+
line-height: 50px;
43+
border: 2px solid #000;
44+
cursor: pointer;
3445
}

0 commit comments

Comments
 (0)