Skip to content

Commit 2490cce

Browse files
boyongjiongboyongjiong
committed
feat: 完成 feature-examples 中 demo 的改造，增加 graph 页面
1 parent fa9f126 commit 2490cce

File tree

26 files changed

+1350
-26
lines changed

26 files changed

+1350
-26
lines changed

‎examples/feature-examples/.umirc.ts

+22
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,28 @@ export default defineConfig({
4949
},
5050
],
5151
},
52+
{
53+
name: 'official extensions',
54+
path: '/extension',
55+
routes: [
56+
{ path: 'extension', redirect: 'extension/control' },
57+
{
58+
path: '/extension/control',
59+
name: 'Control 插件',
60+
component: './extensions/Control',
61+
},
62+
{
63+
path: '/extension/menu',
64+
name: 'Menu 插件',
65+
component: './extensions/Menu',
66+
},
67+
{
68+
path: '/extension/dnd-panel',
69+
name: 'DndPanel 插件',
70+
component: './extensions/DndPanel',
71+
},
72+
],
73+
},
5274
],
5375
npmClient: 'pnpm',
5476
})

‎examples/feature-examples/src/pages/docs.tsx

-9
This file was deleted.

‎examples/feature-examples/src/pages/extensions/Control/index.less

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.viewport {
2+
position: relative;
3+
height: 80vh;
4+
overflow: hidden;
5+
}

‎examples/feature-examples/src/pages/extensions/Control/index.tsx

+132
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
import LogicFlow from '@logicflow/core'
2+
import { Control } from '@logicflow/extension'
3+
4+
import { Button, Card } from 'antd'
5+
import { useEffect, useRef } from 'react'
6+
import styles from './index.less'
7+
8+
import '@logicflow/core/es/index.css'
9+
import '@logicflow/extension/es/index.css'
10+
11+
const config: Partial<LogicFlow.Options> = {
12+
isSilentMode: false,
13+
stopScrollGraph: true,
14+
stopZoomGraph: true,
15+
style: {
16+
rect: {
17+
rx: 5,
18+
ry: 5,
19+
strokeWidth: 2,
20+
},
21+
circle: {
22+
fill: '#f5f5f5',
23+
stroke: '#666',
24+
},
25+
ellipse: {
26+
fill: '#dae8fc',
27+
stroke: '#6c8ebf',
28+
},
29+
polygon: {
30+
fill: '#d5e8d4',
31+
stroke: '#82b366',
32+
},
33+
diamond: {
34+
fill: '#ffe6cc',
35+
stroke: '#d79b00',
36+
},
37+
text: {
38+
color: '#b85450',
39+
fontSize: 12,
40+
},
41+
},
42+
}
43+
44+
const data = {
45+
nodes: [
46+
{
47+
id: '1',
48+
type: 'rect',
49+
x: 150,
50+
y: 100,
51+
text: '矩形',
52+
},
53+
{
54+
id: '2',
55+
type: 'circle',
56+
x: 350,
57+
y: 100,
58+
text: '圆形',
59+
},
60+
{
61+
id: '3',
62+
type: 'ellipse',
63+
x: 550,
64+
y: 100,
65+
text: '椭圆',
66+
},
67+
{
68+
id: '4',
69+
type: 'polygon',
70+
x: 150,
71+
y: 250,
72+
text: '多边形',
73+
},
74+
{
75+
id: '5',
76+
type: 'diamond',
77+
x: 350,
78+
y: 250,
79+
text: '菱形',
80+
},
81+
{
82+
id: '6',
83+
type: 'text',
84+
x: 550,
85+
y: 250,
86+
text: '纯文本节点',
87+
},
88+
{
89+
id: '7',
90+
type: 'html',
91+
x: 150,
92+
y: 400,
93+
text: 'html节点',
94+
},
95+
],
96+
}
97+
98+
export default function ControlExtension() {
99+
const lfRef = useRef<LogicFlow>()
100+
const containerRef = useRef<HTMLDivElement>(null)
101+
useEffect(() => {
102+
if (!lfRef.current) {
103+
const lf = new LogicFlow({
104+
...config,
105+
container: containerRef.current as HTMLElement,
106+
// container: document.querySelector('#graph') as HTMLElement,
107+
grid: {
108+
size: 10,
109+
},
110+
plugins: [Control],
111+
})
112+
113+
lf.render(data)
114+
lfRef.current = lf
115+
}
116+
}, [])
117+
118+
return (
119+
<Card title="LogicFlow Extension - Control">
120+
<Button
121+
onClick={() => {
122+
if (lfRef.current) {
123+
lfRef.current.history.undos = []
124+
}
125+
}}
126+
>
127+
清空 history
128+
</Button>
129+
<div ref={containerRef} id="graph" className={styles.viewport}></div>
130+
</Card>
131+
)
132+
}

‎examples/feature-examples/src/pages/extensions/DndPanel/index.less

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.viewport {
2+
position: relative;
3+
height: 80vh;
4+
overflow: hidden;
5+
}

‎examples/feature-examples/src/pages/extensions/DndPanel/index.tsx

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import LogicFlow from '@logicflow/core'
2+
import { DndPanel } from '@logicflow/extension'
3+
4+
import { Card } from 'antd'
5+
import { useEffect, useRef } from 'react'
6+
7+
import EndNode from './nodes/end'
8+
import StartNode from './nodes/start'
9+
10+
import '@logicflow/core/es/index.css'
11+
import '@logicflow/extension/es/index.css'
12+
import styles from './index.less'
13+
14+
const config: Partial<LogicFlow.Options> = {
15+
isSilentMode: false,
16+
stopScrollGraph: true,
17+
stopZoomGraph: true,
18+
style: {
19+
rect: {
20+
rx: 5,
21+
ry: 5,
22+
strokeWidth: 2,
23+
},
24+
circle: {
25+
fill: '#f5f5f5',
26+
stroke: '#666',
27+
},
28+
ellipse: {
29+
fill: '#dae8fc',
30+
stroke: '#6c8ebf',
31+
},
32+
polygon: {
33+
fill: '#d5e8d4',
34+
stroke: '#82b366',
35+
},
36+
diamond: {
37+
fill: '#ffe6cc',
38+
stroke: '#d79b00',
39+
},
40+
text: {
41+
color: '#b85450',
42+
fontSize: 12,
43+
},
44+
},
45+
}
46+
47+
export default function DndPanelExtension() {
48+
const lfRef = useRef<LogicFlow>()
49+
const containerRef = useRef<HTMLDivElement>(null)
50+
useEffect(() => {
51+
if (!lfRef.current) {
52+
const lf = new LogicFlow({
53+
...config,
54+
container: containerRef.current as HTMLElement,
55+
// container: document.querySelector('#graph') as HTMLElement,
56+
grid: {
57+
size: 10,
58+
},
59+
plugins: [DndPanel],
60+
})
61+
62+
lf.render([])
63+
64+
lf.register(StartNode)
65+
lf.register(EndNode)
66+
// lf.batchRegister([StartNode, EndNode])
67+
68+
// lf.extension.dndPanel.setPatternItems([])
69+
lf.setPatternItems([
70+
{
71+
type: 'start',
72+
text: '开始',
73+
label: '开始节点',
74+
icon: 'https://cdn.jsdelivr.net/gh/Logic-Flow/static@latest/core/start.png',
75+
},
76+
{
77+
type: 'rect',
78+
label: '系统任务',
79+
icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAEFVwZaAAAABGdBTUEAALGPC/xhBQAAAqlJREFUOBF9VM9rE0EUfrMJNUKLihGbpLGtaCOIR8VjQMGDePCgCCIiCNqzCAp2MyYUCXhUtF5E0D+g1t48qAd7CCLqQUQKEWkStcEfVGlLdp/fm3aW2QQdyLzf33zz5m2IsAZ9XhDpyaaIZkTS4ASzK41TFao88GuJ3hsr2pAbipHxuSYyKRugagICGANkfFnNh3HeE2N0b3nN2cgnpcictw5veJIzxmDamSlxxQZicq/mflxhbaH8BLRbuRwNtZp0JAhoplVRUdzmCe/vO27wFuuA3S5qXruGdboy5/PRGFsbFGKo/haRtQHIrM83bVeTrOgNhZReWaYGnE4aUQgTJNvijJFF4jQ8BxJE5xfKatZWmZcTQ+BVgh7s8SgPlCkcec4mGTmieTP4xd7PcpIEg1TX6gdeLW8rTVMVLVvb7ctXoH0Cydl2QOPJBG21STE5OsnbweVYzAnD3A7PVILuY0yiiyDwSm2g441r6rMSgp6iK42yqroI2QoXeJVeA+YeZSa47gZdXaZWQKTrG93rukk/l2Al6Kzh5AZEl7dDQy+JjgFahQjRopSxPbrbvK7GRe9ePWBo1wcU7sYrFZtavXALwGw/7Dnc50urrHJuTPSoO2IMV3gUQGNg87IbSOIY9BpiT9HV7FCZ94nPXb3MSnwHn/FFFE1vG6DTby+r31KAkUktB3Qf6ikUPWxW1BkXSPQeMHHiW0+HAd2GelJsZz1OJegCxqzl+CLVHa/IibuHeJ1HAKzhuDR+ymNaRFM+4jU6UWKXorRmbyqkq/D76FffevwdCp+jN3UAN/C9JRVTDuOxC/oh+EdMnqIOrlYteKSfadVRGLJFJPSB/ti/6K8f0CNymg/iH2gO/f0DwE0yjAFO6l8JaR5j0VPwPwfaYHqOqrCI319WzwhwzNW/aQAAAABJRU5ErkJggg==',
80+
className: 'import_icon',
81+
},
82+
{
83+
type: 'diamond',
84+
label: '条件判断',
85+
icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAAHeEJUAAAAABGdBTUEAALGPC/xhBQAAAvVJREFUOBGNVEFrE0EU/mY3bQoiFlOkaUJrQUQoWMGePLX24EH0IIoHKQiCV0G8iE1covgLiqA/QTzVm1JPogc9tIJYFaQtlhQxqYjSpunu+L7JvmUTU3AgmTfvffPNN++9WSA1DO182f6xwILzD5btfAoQmwL5KJEwiQyVbSVZ0IgRyV6PTpIJ81E5ZvqfHQR0HUOBHW4L5Et2kQ6Zf7iAOhTFAA8s0pEP7AXO1uAA52SbqGk6h/6J45LaLhO64ByfcUzM39V7ZiAdS2yCePPEIQYvTUHqM/n7dgQNfBKWPjpF4ISk8q3J4nB11qw6X8l+FsF3EhlkEMfrjIer3wJTLwS2aCNcj4DbGxXTw00JmAuO+Ni6bBxVUCvS5d9aa04+so4pHW5jLTywuXAL7jJ+D06sl82Sgl2JuVBQn498zkc2bGKxULHjCnSMadBKYDYYHAtsby1EQ5lNGrQd4Y3v4Zo0XdGEmDno46yCM9Tk+RiJmUYHS/aXHPNTcjxcbTFna000PFJHIVZ5lFRqRpJWk9/+QtlOUYJj9HG5pVFEU7zqIYDVsw2s+AJaD8wTd2umgSCCyUxgGsS1Y6TBwXQQTFuZaHcd8gAGioE90hlsY+wMcs30RduYtxanjMGal8H5dMW67dmT1JFtYUEe8LiQLRsPZ6IIc7A4J5tqco3T0pnv/4u0kyzrYUq7gASuEyI8VXKvB9Odytv6jS/PNaZBln0nioJG/AVQRZvApOdhjj3Jt8QC8Im09SafwdBdvIpztpxWxpeKCC+EsFdS8DCyuCn2munFpL7ctHKp+Xc5cMybeIyMAN33SPL3ZR9QV1XVwLyzHm6Iv0/yeUuUb7PPlZC4D4HZkeu6dpF4v9j9MreGtMbxMMRLIcjJic9yHi7WQ3yVKzZVWUr5UrViJvn1FfUlwe/KYVfYyWRLSGNu16hR01U9IacajXPei0wx/5BqgInvJN+MMNtNme7ReU9SBbgntovn0kKHpFg7UogZvaZiOue/q1SBo9ktHzQAAAAASUVORK5CYII=',
86+
},
87+
{
88+
type: 'end',
89+
text: '结束',
90+
label: '结束节点',
91+
icon: 'https://cdn.jsdelivr.net/gh/Logic-Flow/static@latest/core/end.png',
92+
},
93+
])
94+
95+
lfRef.current = lf
96+
}
97+
}, [])
98+
99+
return (
100+
<Card title="LogicFlow Extension - DndPanel">
101+
<div ref={containerRef} id="graph" className={styles.viewport}></div>
102+
</Card>
103+
)
104+
}

‎examples/feature-examples/src/pages/extensions/DndPanel/nodes/end.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { CustomImage } from '@/components/nodes/CustomHtml'
2+
3+
// 云形状的图片节点
4+
class EndNode extends CustomImage.view {
5+
getImageHref = () => {
6+
return 'https://cdn.jsdelivr.net/gh/Logic-Flow/static@latest/core/end.png'
7+
}
8+
}
9+
10+
export default {
11+
type: 'end',
12+
view: EndNode,
13+
model: CustomImage.model,
14+
}

‎examples/feature-examples/src/pages/extensions/DndPanel/nodes/start.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { CustomImage } from '@/components/nodes/CustomHtml'
2+
3+
// 云形状的图片节点
4+
class StartNode extends CustomImage.view {
5+
getImageHref = () => {
6+
return 'https://cdn.jsdelivr.net/gh/Logic-Flow/static@latest/core/start.png'
7+
}
8+
}
9+
10+
export default {
11+
type: 'start',
12+
view: StartNode,
13+
model: CustomImage.model,
14+
}

‎examples/feature-examples/src/pages/extensions/Menu/index.less

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.viewport {
2+
position: relative;
3+
height: 80vh;
4+
overflow: hidden;
5+
}

0 commit comments

Comments
 (0)