Skip to content

Commit bed5435

Browse files
xinxin93xinxin93
authored
Merge pull request #214 from towersxu/master
打包后插件不可以使用。
2 parents 9fac772 + d3218ae commit bed5435

File tree

35 files changed

+262
-32
lines changed

35 files changed

+262
-32
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/CHANGELOG.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,25 @@
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.6.0](https://github.com/towersxu/logicflow/compare/examples@0.5.11...examples@0.6.0) (2021-06-18)
7+
8+
9+
### Bug Fixes
10+
11+
* use pluginName replace name ([8bf1a08](https://github.com/towersxu/logicflow/commit/8bf1a0892e61f619204b7b621902f36f9ad3e204))
12+
* **docs:** docs fix ([13d29e4](https://github.com/towersxu/logicflow/commit/13d29e49fa47189e3e0953a5cdd1ea26c4647ced))
13+
* **textension:** rename function getShapeReise to getResizeShape ([88d6d53](https://github.com/towersxu/logicflow/commit/88d6d531dd6232a2abb952468fae0086813bce78))
14+
15+
16+
### Features
17+
18+
* **docs:** add docs and example for InserNodeInPolyline ([e83b998](https://github.com/towersxu/logicflow/commit/e83b998c33b6354463f08d4cd45eac4103138e66))
19+
* **extension:** node resize update ([5434840](https://github.com/towersxu/logicflow/commit/5434840692f741dfb71e385e07f1fe539f3355b1))
20+
21+
22+
23+
24+
625
## [0.5.15](https://github.com/towersxu/logicflow/compare/examples@0.5.11...examples@0.5.15) (2021-06-17)
726

827

‎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.15",
3+
"version": "0.6.0",
44
"private": true,
55
"dependencies": {
66
"@ant-design/icons": "^4.3.0",
77
"@babel/core": "7.12.3",
8-
"@logicflow/core": "^0.4.15",
9-
"@logicflow/extension": "^0.4.15",
8+
"@logicflow/core": "^0.5.0",
9+
"@logicflow/extension": "^0.5.0",
1010
"@pmmmwh/react-refresh-webpack-plugin": "0.4.2",
1111
"@svgr/webpack": "5.4.0",
1212
"@testing-library/jest-dom": "^5.11.4",

‎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/src/pages/extension/components/custom-dnd/Dnd.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import DndTool from './DndTool';
44
import LogicFlow, { Extension } from '@logicflow/core';
55

66
const Dnd: Extension = {
7-
name: 'dnd',
7+
pluginName: 'dnd',
88
install() { },
99
render(lf: LogicFlow, domContainer: HTMLElement) {
1010
ReactDOM.render(<DndTool lf={lf} />, domContainer);

‎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/CHANGELOG.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,25 @@
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.0](https://github.com/towersxu/logicflow/compare/@logicflow/core@0.4.11...@logicflow/core@0.5.0) (2021-06-18)
7+
8+
9+
### Bug Fixes
10+
11+
* [#211](https://github.com/towersxu/logicflow/issues/211) ([3347137](https://github.com/towersxu/logicflow/commit/33471376ec4994eece9acf5266fe50d411aa99cd))
12+
* use html-node as model type ([944b895](https://github.com/towersxu/logicflow/commit/944b895e640a699d6ce0bdedd2d2ac04779489d1))
13+
* use pluginName replace name ([8bf1a08](https://github.com/towersxu/logicflow/commit/8bf1a0892e61f619204b7b621902f36f9ad3e204))
14+
15+
16+
### Features
17+
18+
* add html node ([373db63](https://github.com/towersxu/logicflow/commit/373db637fb8cca0416ff944dc5beda23f3082bf3))
19+
* text:update event emit element data ([36f1f2a](https://github.com/towersxu/logicflow/commit/36f1f2a5d57c70dada007a7ec92782d994528e5e))
20+
21+
22+
23+
24+
625
## [0.4.15](https://github.com/towersxu/logicflow/compare/@logicflow/core@0.4.11...@logicflow/core@0.4.15) (2021-06-17)
726

827

0 commit comments

Comments
 (0)