Skip to content

Commit 876324e

Browse files
xinxin93xinxin93
authored
Merge pull request #210 from towersxu/master
fix: 修复control组件某些情况下无法销毁的问题 & 新增html组件
2 parents 1e2e1e3 + 944b895 commit 876324e

File tree

22 files changed

+388
-27
lines changed

22 files changed

+388
-27
lines changed

‎docs/guide/advance/customNode.md

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -419,3 +419,53 @@ lf.render({
419419
420420
在上面的代码中，`getShape`方法返回了一个包含图标的标签，Logic Flow 拿到这个返回值后会直接在`graph`中进行渲染。SVG 元素需要 model 中的实时数据才可以正常显示并使用，现在我们可以通过[getAttributes](/guide/advance/customNode.html#getattributes)方法获取到 model 中的[数据属性](/api/nodeApi.md#数据属性)和[样式属性](/api/nodeApi.html#样式属性)。
421421
422+
## 自定义HTML节点
423+
424+
LogicFlow内置了基础的HTML节点，我们可以利用LogicFlow的自定义机制，实现各种形态的HTML节点，而且HTML节点内部可以使用任意框架进行渲染。
425+
426+
<example
427+
:height="280"
428+
iframeId="iframe-6"
429+
href="/examples/#/advance/custom-node/html"
430+
/>
431+
432+
```ts
433+
class UmlModel extends HtmlNodeModel {
434+
setAttributes() {
435+
this.text.editable = false; // 禁止节点文本编辑
436+
// 设置节点宽高和锚点
437+
const width = 200;
438+
const height = 130;
439+
this.width = width;
440+
this.height = height;
441+
this.anchorsOffset = [
442+
[width / 2, 0],
443+
[0, height / 2],
444+
[-width / 2, 0],
445+
[0, -height/2],
446+
]
447+
}
448+
}
449+
class UmlNode extends HtmlNode {
450+
// 重新setHtml方法，想html节点插入任何你想要插入的节点
451+
setHtml(rootEl: HTMLElement) {
452+
const el = document.createElement('div');
453+
el.className = 'uml-wrapper';
454+
const html = `
455+
<div>
456+
<div class="uml-head">Head</div>
457+
<div class="uml-body">
458+
<div>+ $Name</div>
459+
<div>+ $Body</div>
460+
</div>
461+
<div class="uml-footer">
462+
<div>+ setHead(Head $head)</div>
463+
<div>+ setBody(Body $body)</div>
464+
</div>
465+
</div>
466+
`
467+
el.innerHTML = html;
468+
rootEl.appendChild(el);
469+
}
470+
}
471+
```

‎docs/guide/basic/node.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ LogicFlow 的内置节点包括：
77
- 菱形(diamond)
88
- 多边形(polygon)
99
- 文本(text)
10+
- html节点(html)
1011

1112
## 节点属性
1213

@@ -59,6 +60,11 @@ type Point = [number, number]
5960
| fontSize | number | ✅ | 字体大小 |
6061
| fontFamily | string | ✅ | 字体类型 |
6162
| fontWeight | number / string | ✅ | 字体粗细 |
63+
64+
### html节点
65+
66+
html节点无特殊属性，定制效果需要去view中自己控制。详情请参考自定义节点。
67+
6268
## 创建节点
6369
LogicFlow 支持三种创建节点的方式：
6470
- 数据配置

‎examples/CHANGELOG.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,24 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6+
## [0.5.14](https://github.com/towersxu/logicflow/compare/examples@0.5.11...examples@0.5.14) (2021-06-16)
7+
8+
9+
### Bug Fixes
10+
11+
* **docs:** docs fix ([13d29e4](https://github.com/towersxu/logicflow/commit/13d29e49fa47189e3e0953a5cdd1ea26c4647ced))
12+
* **textension:** rename function getShapeReise to getResizeShape ([88d6d53](https://github.com/towersxu/logicflow/commit/88d6d531dd6232a2abb952468fae0086813bce78))
13+
14+
15+
### Features
16+
17+
* **docs:** add docs and example for InserNodeInPolyline ([e83b998](https://github.com/towersxu/logicflow/commit/e83b998c33b6354463f08d4cd45eac4103138e66))
18+
* **extension:** node resize update ([5434840](https://github.com/towersxu/logicflow/commit/5434840692f741dfb71e385e07f1fe539f3355b1))
19+
20+
21+
22+
23+
624
## [0.5.13](https://github.com/towersxu/logicflow/compare/examples@0.5.11...examples@0.5.13) (2021-06-09)
725

826

‎examples/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{
22
"name": "examples",
3-
"version": "0.5.13",
3+
"version": "0.5.14",
44
"private": true,
55
"dependencies": {
66
"@ant-design/icons": "^4.3.0",
77
"@babel/core": "7.12.3",
8-
"@logicflow/core": "^0.4.13",
9-
"@logicflow/extension": "^0.4.13",
8+
"@logicflow/core": "^0.4.14",
9+
"@logicflow/extension": "^0.4.14",
1010
"@pmmmwh/react-refresh-webpack-plugin": "0.4.2",
1111
"@svgr/webpack": "5.4.0",
1212
"@testing-library/jest-dom": "^5.11.4",

‎examples/src/pages/advance/custom-node/html/index.tsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React, { useEffect } from 'react';
2+
import LogicFlow from '@logicflow/core';
3+
import ExampleHeader from '../../../../components/example-header';
4+
import Uml from './uml';
5+
6+
const config = {
7+
stopScrollGraph: true,
8+
stopZoomGraph: true,
9+
style: {
10+
circle: {
11+
r: 40
12+
}
13+
}
14+
};
15+
16+
const data = {
17+
nodes: [
18+
{
19+
id: 10,
20+
type: 'uml',
21+
x: 150,
22+
y: 90,
23+
},
24+
]
25+
};
26+
27+
export default function CustomNodeAnchorExample() {
28+
29+
useEffect(() => {
30+
const lf = new LogicFlow({
31+
...config,
32+
container: document.querySelector('#graph_html') as HTMLElement
33+
});
34+
lf.register(Uml);
35+
lf.render(data);
36+
}, []);
37+
38+
return (
39+
<>
40+
<ExampleHeader
41+
content="自定义HTML节点"
42+
githubPath="/advance/custom-node/html/index.tsx"
43+
/>
44+
<div id="graph_html" className="viewport" />
45+
</>
46+
)
47+
}

‎examples/src/pages/advance/custom-node/html/uml.css

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.uml-wrapper{
2+
background: #68FCE2;
3+
width: 100%;
4+
height: 100%;
5+
border-radius: 10px;
6+
border: 2px solid #838382;
7+
box-sizing: border-box;
8+
}
9+
.uml-head {
10+
text-align: center;
11+
line-height: 30px;
12+
font-size: 16px;
13+
font-weight: bold;
14+
}
15+
.uml-body {
16+
border-top: 1px solid #838382;
17+
border-bottom: 1px solid #838382;
18+
padding: 5px 10px;
19+
font-size: 12px;
20+
}
21+
.uml-footer {
22+
padding: 5px 10px;
23+
font-size: 14px;
24+
}

‎examples/src/pages/advance/custom-node/html/uml.ts

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { HtmlNodeModel, HtmlNode } from '@logicflow/core';
2+
// import HtmlNode from '@logicflow/core';
3+
import './uml.css';
4+
5+
class UmlModel extends HtmlNodeModel {
6+
setAttributes() {
7+
this.text.editable = false;
8+
const width = 200;
9+
const height = 130;
10+
this.width = width;
11+
this.height = height;
12+
this.anchorsOffset = [
13+
[width / 2, 0],
14+
[0, height / 2],
15+
[-width / 2, 0],
16+
[0, -height/2],
17+
]
18+
}
19+
}
20+
class UmlNode extends HtmlNode {
21+
setHtml(rootEl: HTMLElement) {
22+
console.log(111)
23+
const el = document.createElement('div');
24+
el.className = 'uml-wrapper';
25+
const html = `
26+
<div>
27+
<div class="uml-head">Head</div>
28+
<div class="uml-body">
29+
<div>+ $Name</div>
30+
<div>+ $Body</div>
31+
</div>
32+
<div class="uml-footer">
33+
<div>+ setHead(Head $head)</div>
34+
<div>+ setBody(Body $body)</div>
35+
</div>
36+
</div>
37+
`
38+
el.innerHTML = html;
39+
rootEl.appendChild(el);
40+
}
41+
}
42+
43+
const uml = {
44+
type: 'uml',
45+
view: UmlNode,
46+
model: UmlModel
47+
}
48+
export default uml;

‎examples/src/routes.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import Anchor from './pages/advance/custom-node/anchor';
2525
import Triangle from './pages/advance/custom-node/triangle';
2626
import Rule from './pages/advance/custom-node/rule';
2727
import Shape from './pages/advance/custom-node/shape';
28+
import Html from './pages/advance/custom-node/html';
2829
import Process from './pages/advance/custom-edge';
2930
import Event from './pages/advance/event';
3031
import Approve from './pages/usage/approve';
@@ -52,6 +53,7 @@ export default (
5253
<Route path="/advance/custom-node/rule" exact component={Rule} />
5354
<Route path="/advance/custom-node/shape" exact component={Shape} />
5455
<Route path="/advance/custom-edge/process" exact component={Process} />
56+
<Route path="/advance/custom-node/html" exact component={Html} />
5557
<Route path="/extension/snapshot" exact component={Snapshot} />
5658
<Route path="/extension/components/control" exact component={Control} />
5759
<Route path="/extension/components/menu" exact component={Menu} />

‎packages/core/CHANGELOG.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,14 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6+
## [0.4.14](https://github.com/towersxu/logicflow/compare/@logicflow/core@0.4.11...@logicflow/core@0.4.14) (2021-06-16)
7+
8+
**Note:** Version bump only for package @logicflow/core
9+
10+
11+
12+
13+
614
## [0.4.13](https://github.com/towersxu/logicflow/compare/@logicflow/core@0.4.11...@logicflow/core@0.4.13) (2021-06-09)
715

816
**Note:** Version bump only for package @logicflow/core

‎packages/core/index.html

Lines changed: 65 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,30 @@
4343
border: 2px solid #000;
4444
background: #fff;
4545
}
46+
.uml-wrapper {
47+
background: #68FCE2;
48+
width: 100%;
49+
height: 100%;
50+
border-radius: 10px;
51+
border: 2px solid #838382;
52+
box-sizing: border-box;
53+
}
54+
.uml-head {
55+
text-align: center;
56+
line-height: 30px;
57+
font-size: 16px;
58+
font-weight: bold;
59+
}
60+
.uml-body {
61+
border-top: 1px solid #838382;
62+
border-bottom: 1px solid #838382;
63+
padding: 5px 10px;
64+
font-size: 12px;
65+
}
66+
.uml-footer {
67+
padding: 5px 10px;
68+
font-size: 14px;
69+
}
4670
</style>
4771
</head>
4872

@@ -70,6 +94,41 @@
7094

7195
<!-- 自定义节点 -->
7296
<script>
97+
class UmlModel extends HtmlNodeModel {
98+
setAttributes() {
99+
const width = 200;
100+
const height = 130;
101+
this.width = width;
102+
this.height = height;
103+
this.anchorsOffset = [
104+
[width / 2, 0],
105+
[0, height / 2],
106+
[-width / 2, 0],
107+
[0, -height/2],
108+
]
109+
}
110+
}
111+
class UmlNode extends HtmlNode {
112+
setHtml(rootEl) {
113+
const el = document.createElement('div');
114+
el.className = 'uml-wrapper';
115+
const html = `
116+
<div>
117+
<div class="uml-head">Head</div>
118+
<div class="uml-body">
119+
<div>+ $Name</div>
120+
<div>+ $Body</div>
121+
</div>
122+
<div class="uml-footer">
123+
<div>+ setHead(Head $head)</div>
124+
<div>+ setBody(Body $body)</div>
125+
</div>
126+
</div>
127+
`
128+
el.innerHTML = html;
129+
rootEl.appendChild(el);
130+
}
131+
}
73132
// square
74133
class SquareModel extends RectNodeModel {
75134
setAttributes() {
@@ -275,14 +334,18 @@
275334
view: Connection,
276335
model: LineEdgeModel,
277336
})
278-
337+
lf.register({
338+
type: 'uml',
339+
view: UmlNode,
340+
model: UmlModel,
341+
})
279342
lf.setTheme({});
280343
lf.setDefaultEdgeType('polyline');
281344

282345
lf.render({
283346
nodes: [
284347
{
285-
type: 'rect',
348+
type: 'uml',
286349
x: 100,
287350
y: 100,
288351
id: 10,
@@ -378,21 +441,6 @@
378441
}
379442
]
380443
});
381-
382-
// console.log(lf.graphModel);
383-
// lf.createEdge({
384-
// sourceNodeId: 10,
385-
// targetNodeId: 11,
386-
// // text: '222',
387-
// });
388-
// lf.updateText('edge_2222', '你是打算啊')
389-
// lf.createEdge({
390-
// sourceNodeId: 10,
391-
// targetNodeId: 50,
392-
// text: '222',
393-
// type: 'bezier'
394-
// });
395-
// console.log(lf.graphModel);
396444
}
397445
</script>
398446

0 commit comments

Comments
 (0)