Skip to content

Commit d3218ae

Browse files
towersxutowersxu
committed
docs: use react write html node
1 parent dbb4f02 commit d3218ae

File tree

7 files changed

+153
-2
lines changed

7 files changed

+153
-2
lines changed

‎docs/guide/advance/customNode.md

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -468,4 +468,82 @@ class UmlNode extends HtmlNode {
468468
rootEl.appendChild(el);
469469
}
470470
}
471+
```
472+
473+
### 使用react编写html节点
474+
475+
以为自定义html节点对外暴露的是一个DOM节点，所以你可以使用框架现有的能力来渲染节点。在react中，我们利用`reactDom`的`render`方法，将react组件渲染到dom节点上。
476+
477+
```jsx
478+
// box.jsx
479+
480+
import { HtmlNodeModel, HtmlNode } from '@logicflow/core';
481+
import React from 'react';
482+
import ReactDOM from 'react-dom';
483+
import './uml.css';
484+
485+
function Hello() {
486+
return (
487+
<>
488+
<h1 className="box-title">title</h1>
489+
<div className="box-content">
490+
<p>content</p>
491+
<p>content2</p>
492+
<p>content3</p>
493+
</div>
494+
</>
495+
)
496+
}
497+
498+
class BoxxModel extends HtmlNodeModel {
499+
setAttributes() {
500+
this.text.editable = false;
501+
const width = 200;
502+
const height = 116;
503+
this.width = width;
504+
this.height = height;
505+
this.anchorsOffset = [
506+
[width / 2, 0],
507+
[0, height / 2],
508+
[-width / 2, 0],
509+
[0, -height/2],
510+
]
511+
}
512+
}
513+
class BoxxNode extends HtmlNode {
514+
setHtml(rootEl: HTMLElement) {
515+
ReactDOM.render(<Hello />, rootEl);
516+
}
517+
}
518+
519+
const boxx = {
520+
type: 'boxx',
521+
view: BoxxNode,
522+
model: BoxxModel
523+
}
524+
525+
export default boxx;
526+
527+
```
528+
529+
```jsx
530+
// page.jsx
531+
532+
import box from './box.tsx';
533+
export default function PageIndex() {
534+
useEffect(() => {
535+
const lf = new LogicFlow({
536+
...config,
537+
container: document.querySelector('#graph_html') as HTMLElement
538+
});
539+
lf.register(box);
540+
lf.render();
541+
}, []);
542+
543+
return (
544+
<>
545+
<div id="graph_html" className="viewport" />
546+
</>
547+
)
548+
}
471549
```

‎examples/public/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
2727
<title>React App</title>
28+
<script src="http://localhost:9090/logic-flow.js"></script>
2829
</head>
2930
<body>
3031
<noscript>You need to enable JavaScript to run this app.</noscript>

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { HtmlNodeModel, HtmlNode } from '@logicflow/core';
2+
import React from 'react';
3+
import ReactDOM from 'react-dom';
4+
import './uml.css';
5+
6+
function Hello() {
7+
return (
8+
<>
9+
<h1 className="box-title">title</h1>
10+
<div className="box-content">
11+
<p>content</p>
12+
<p>content2</p>
13+
<p>content3</p>
14+
</div>
15+
</>
16+
)
17+
}
18+
19+
class BoxxModel extends HtmlNodeModel {
20+
setAttributes() {
21+
this.text.editable = false;
22+
const width = 200;
23+
const height = 116;
24+
this.width = width;
25+
this.height = height;
26+
this.anchorsOffset = [
27+
[width / 2, 0],
28+
[0, height / 2],
29+
[-width / 2, 0],
30+
[0, -height/2],
31+
]
32+
}
33+
}
34+
class BoxxNode extends HtmlNode {
35+
setHtml(rootEl: HTMLElement) {
36+
ReactDOM.render(<Hello />, rootEl);
37+
}
38+
}
39+
40+
const boxx = {
41+
type: 'boxx',
42+
view: BoxxNode,
43+
model: BoxxModel
44+
}
45+
46+
export default boxx;

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import React, { useEffect } from 'react';
22
import LogicFlow from '@logicflow/core';
33
import ExampleHeader from '../../../../components/example-header';
44
import Uml from './uml';
5+
// @ts-ignore
6+
import box from './box.tsx';
57

68
const config = {
79
stopScrollGraph: true,
@@ -21,17 +23,25 @@ const data = {
2123
x: 150,
2224
y: 90,
2325
},
26+
{
27+
id: 11,
28+
type: 'boxx',
29+
x: 350,
30+
y: 100,
31+
},
2432
]
2533
};
2634

2735
export default function CustomNodeAnchorExample() {
2836

2937
useEffect(() => {
38+
console.log(LogicFlow)
3039
const lf = new LogicFlow({
3140
...config,
3241
container: document.querySelector('#graph_html') as HTMLElement
3342
});
3443
lf.register(Uml);
44+
lf.register(box);
3545
lf.render(data);
3646
}, []);
3747

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,19 @@
2222
padding: 5px 10px;
2323
font-size: 14px;
2424
}
25+
foreignObject:focus {
26+
outline: none;
27+
}
28+
.box-title {
29+
border: 1px solid #909192;
30+
margin: 0;
31+
padding: 0 10px;
32+
}
33+
.box-content {
34+
border: 1px solid #909192;
35+
border-top: none;
36+
}
37+
.box-content p {
38+
margin: 0;
39+
padding: 0 10px;
40+
}

‎examples/tsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"isolatedModules": true,
2020
"noEmit": true,
2121
"jsx": "react",
22-
"strictPropertyInitialization": false
22+
"strictPropertyInitialization": false
2323
},
2424
"include": [
2525
"src"

‎packages/core/scripts/webpack.config.dev.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ module.exports = [
1414
contentBase: path.join(__dirname, '../'),
1515
stats: 'errors-warnings',
1616
port: 9090,
17-
host: 'localhost',
17+
host: '0.0.0.0',
1818
watchOptions: {
1919
poll: true,
2020
}

0 commit comments

Comments
 (0)