Skip to content

Commit 0909bd3

Browse files
towersxutowersxu
committed
fix: reactive html node
1 parent 4fc34d4 commit 0909bd3

File tree

6 files changed

+76
-21
lines changed

6 files changed

+76
-21
lines changed

‎docs/guide/advance/customNode.md

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -449,14 +449,15 @@ class UmlModel extends HtmlNodeModel {
449449
class UmlNode extends HtmlNode {
450450
// 重新setHtml方法，想html节点插入任何你想要插入的节点
451451
setHtml(rootEl: HTMLElement) {
452+
const { properties } = this.getAttributes();
452453
const el = document.createElement('div');
453454
el.className = 'uml-wrapper';
454455
const html = `
455456
<div>
456457
<div class="uml-head">Head</div>
457458
<div class="uml-body">
458-
<div>+ $Name</div>
459-
<div>+ $Body</div>
459+
<div>+ ${properties.name}</div>
460+
<div>+ ${properties.body}</div>
460461
</div>
461462
<div class="uml-footer">
462463
<div>+ setHead(Head $head)</div>
@@ -465,6 +466,8 @@ class UmlNode extends HtmlNode {
465466
</div>
466467
`
467468
el.innerHTML = html;
469+
// 需要先把之前渲染的子节点清除掉。
470+
rootEl.innerHTML = '';
468471
rootEl.appendChild(el);
469472
}
470473
}
@@ -475,20 +478,18 @@ class UmlNode extends HtmlNode {
475478
以为自定义html节点对外暴露的是一个DOM节点，所以你可以使用框架现有的能力来渲染节点。在react中，我们利用`reactDom`的`render`方法，将react组件渲染到dom节点上。
476479
477480
```jsx
478-
// box.jsx
479-
480481
import { HtmlNodeModel, HtmlNode } from '@logicflow/core';
481482
import React from 'react';
482483
import ReactDOM from 'react-dom';
483484
import './uml.css';
484485

485-
function Hello() {
486+
function Hello(props) {
486487
return (
487488
<>
488489
<h1 className="box-title">title</h1>
489490
<div className="box-content">
490-
<p>content</p>
491-
<p>content2</p>
491+
<p>{props.name}</p>
492+
<p>{props.body}</p>
492493
<p>content3</p>
493494
</div>
494495
</>
@@ -512,7 +513,8 @@ class BoxxModel extends HtmlNodeModel {
512513
}
513514
class BoxxNode extends HtmlNode {
514515
setHtml(rootEl: HTMLElement) {
515-
ReactDOM.render(<Hello />, rootEl);
516+
const { properties } = this.getAttributes();
517+
ReactDOM.render(<Hello name={properties.name} body={properties.body}/>, rootEl);
516518
}
517519
}
518520

@@ -524,6 +526,7 @@ const boxx = {
524526

525527
export default boxx;
526528

529+
527530
```
528531
529532
```jsx
@@ -537,7 +540,26 @@ export default function PageIndex() {
537540
container: document.querySelector('#graph_html') as HTMLElement
538541
});
539542
lf.register(box);
540-
lf.render();
543+
lf.render({
544+
nodes: [
545+
{
546+
id: 11,
547+
type: 'boxx',
548+
x: 350,
549+
y: 100,
550+
properties: {
551+
name: 'turbo',
552+
body: 'hello'
553+
}
554+
},
555+
]
556+
});
557+
lf.on('node:click', ({ data}) => {
558+
lf.setProperties(data.id, {
559+
name: 'turbo',
560+
body: Math.random()
561+
})
562+
});
541563
}, []);
542564

543565
return (

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import React from 'react';
33
import ReactDOM from 'react-dom';
44
import './uml.css';
55

6-
function Hello() {
6+
function Hello(props: any) {
77
return (
88
<>
99
<h1 className="box-title">title</h1>
1010
<div className="box-content">
11-
<p>content</p>
12-
<p>content2</p>
11+
<p>{props.name}</p>
12+
<p>{props.body}</p>
1313
<p>content3</p>
1414
</div>
1515
</>
@@ -33,7 +33,8 @@ class BoxxModel extends HtmlNodeModel {
3333
}
3434
class BoxxNode extends HtmlNode {
3535
setHtml(rootEl: HTMLElement) {
36-
ReactDOM.render(<Hello />, rootEl);
36+
const { properties } = this.getAttributes();
37+
ReactDOM.render(<Hello name={properties.name} body={properties.body}/>, rootEl);
3738
}
3839
}
3940

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

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,27 +22,40 @@ const data = {
2222
type: 'uml',
2323
x: 150,
2424
y: 90,
25+
properties: {
26+
name: 'logicflow',
27+
body: 'hello'
28+
}
2529
},
2630
{
2731
id: 11,
2832
type: 'boxx',
2933
x: 350,
3034
y: 100,
35+
properties: {
36+
name: 'turbo',
37+
body: 'hello'
38+
}
3139
},
3240
]
3341
};
34-
42+
let lf: LogicFlow;
3543
export default function CustomNodeAnchorExample() {
3644

3745
useEffect(() => {
38-
console.log(LogicFlow)
39-
const lf = new LogicFlow({
46+
lf = new LogicFlow({
4047
...config,
4148
container: document.querySelector('#graph_html') as HTMLElement
4249
});
4350
lf.register(Uml);
4451
lf.register(box);
4552
lf.render(data);
53+
lf.on('node:click', ({ data}) => {
54+
lf.setProperties(data.id, {
55+
name: 'turbo',
56+
body: Math.random()
57+
})
58+
})
4659
}, []);
4760

4861
return (

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,15 @@ class UmlModel extends HtmlNodeModel {
1919
}
2020
class UmlNode extends HtmlNode {
2121
setHtml(rootEl: HTMLElement) {
22-
console.log(111)
22+
const { properties } = this.getAttributes();
2323
const el = document.createElement('div');
2424
el.className = 'uml-wrapper';
2525
const html = `
2626
<div>
2727
<div class="uml-head">Head</div>
2828
<div class="uml-body">
29-
<div>+ $Name</div>
30-
<div>+ $Body</div>
29+
<div>+ ${properties.name}</div>
30+
<div>+ ${properties.body}</div>
3131
</div>
3232
<div class="uml-footer">
3333
<div>+ setHead(Head $head)</div>
@@ -36,6 +36,8 @@ class UmlNode extends HtmlNode {
3636
</div>
3737
`
3838
el.innerHTML = html;
39+
// 需要先把之前渲染的子节点清除掉。
40+
rootEl.innerHTML = '';
3941
rootEl.appendChild(el);
4042
}
4143
}

‎packages/core/index.html

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,14 +110,16 @@
110110
}
111111
class UmlNode extends HtmlNode {
112112
setHtml(rootEl) {
113+
const { properties } = this.getAttributes();
114+
console.log(7777, properties)
113115
const el = document.createElement('div');
114116
el.className = 'uml-wrapper';
115117
const html = `
116118
<div>
117119
<div class="uml-head">Head</div>
118120
<div class="uml-body">
119-
<div>+ $Name</div>
120-
<div>+ $Body</div>
121+
<div>+ ${properties.name}</div>
122+
<div>+ ${properties.body}</div>
121123
</div>
122124
<div class="uml-footer">
123125
<div>+ setHead(Head $head)</div>
@@ -126,6 +128,7 @@
126128
</div>
127129
`
128130
el.innerHTML = html;
131+
rootEl.innerHTML = '';
129132
rootEl.appendChild(el);
130133
}
131134
}
@@ -349,6 +352,10 @@
349352
x: 100,
350353
y: 100,
351354
id: 10,
355+
properties: {
356+
name: 'haod',
357+
body: '哈哈哈哈'
358+
}
352359
},
353360
{
354361
type: 'square',
@@ -495,6 +502,13 @@
495502
lf.on('text:update', (data) => {
496503
console.log('test:update', data)
497504
});
505+
lf.on('node:click', ({ data }) => {
506+
console.log(6666)
507+
lf.setProperties(data.id, {
508+
name: 'xt'
509+
})
510+
console.log(lf.getProperties(data.id));
511+
})
498512
// lf.on('node:mouseup',()=> {
499513
// console.log('nodeup')
500514
// })

‎packages/core/src/view/node/HtmlNode.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@ export default class HtmlNode extends BaseNode {
2525
componentDidMount() {
2626
this.setHtml(this.rootEl);
2727
}
28+
componentDidUpdate() {
29+
this.setHtml(this.rootEl);
30+
}
2831
getShape() {
2932
const attributes = this.getAttributes();
3033
const { x, y, width, height } = attributes;

0 commit comments

Comments
 (0)