Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 879e19e

Browse files
committed
feat: add init data
1 parent a9af3aa commit 879e19e

File tree

7 files changed

+149
-6
lines changed

7 files changed

+149
-6
lines changed

‎public/images/delay.svg‎

Lines changed: 1 addition & 0 deletions
Loading[フレーム]

‎src/components/FlowChart.vue‎

Lines changed: 93 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,105 @@ export default {
3737
this.lf.render({
3838
nodes: [
3939
{
40+
id: 'node_1',
4041
type: 'start-node',
4142
x: 220,
4243
y: 200,
43-
text: '开始'
44+
text: 'start'
45+
},
46+
{
47+
id: 'node_2',
48+
type: 'fetch-node',
49+
x: 420,
50+
y: 200,
51+
text: 'fetch data'
52+
},
53+
{
54+
id: 'node_3',
55+
type: 'function-node',
56+
x: 620,
57+
y: 200,
58+
text: 'function'
59+
},
60+
{
61+
id: 'node_4',
62+
type: 'delay-node',
63+
x: 420,
64+
y: 300,
65+
text: 'function'
66+
},
67+
{
68+
id: 'node_5',
69+
type: 'switch-node',
70+
x: 820,
71+
y: 200,
72+
text: 'switch'
73+
},
74+
{
75+
id: 'node_6',
76+
type: 'function-node',
77+
x: 1020,
78+
y: 200,
79+
text: 'function'
80+
},
81+
{
82+
id: 'node_7',
83+
type: 'function-node',
84+
x: 1020,
85+
y: 300,
86+
text: 'function'
87+
},
88+
],
89+
edges: [
90+
{
91+
type: 'flow-link',
92+
sourceNodeId: 'node_1',
93+
targetNodeId: 'node_2'
94+
},
95+
{
96+
type: 'flow-link',
97+
sourceNodeId: 'node_2',
98+
targetNodeId: 'node_3'
99+
},
100+
{
101+
type: 'flow-link',
102+
sourceNodeId: 'node_3',
103+
startPoint: {
104+
x: 680,
105+
y: 200
106+
},
107+
targetNodeId: 'node_4'
108+
},
109+
{
110+
type: 'flow-link',
111+
sourceNodeId: 'node_4',
112+
startPoint: {
113+
x: 360,
114+
y: 300
115+
},
116+
targetNodeId: 'node_2'
117+
},
118+
{
119+
type: 'flow-link',
120+
sourceNodeId: 'node_3',
121+
targetNodeId: 'node_5'
122+
},
123+
{
124+
type: 'flow-link',
125+
sourceNodeId: 'node_5',
126+
targetNodeId: 'node_6'
127+
},
128+
{
129+
type: 'flow-link',
130+
sourceNodeId: 'node_5',
131+
targetNodeId: 'node_7'
44132
},
45133
]
46134
})
135+
this.lf.on('node-red:start', () => {
136+
// todo: 让流程跑起来
137+
console.log('我要开始执行流程了')
138+
})
47139
}
48140
}
49141
</script>

‎src/components/node-red/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import FunctionNode from "./nodes/FunctionNode";
33
import SwitchNode from "./nodes/SwitchNode";
44
import StartNode from "./nodes/StartNode";
55
import FetchNode from "./nodes/FetchNode";
6+
import DelayNode from "./nodes/DelayNode";
67
import FlowLink from "./FlowLink";
78
import Palette from './tools/Palette.vue';
89

@@ -14,6 +15,7 @@ class NodeRedExtension {
1415
lf.register(StartNode);
1516
lf.register(FetchNode);
1617
lf.register(FlowLink);
18+
lf.register(DelayNode);
1719
lf.setDefaultEdgeType('flow-link');
1820
this.app = createApp(Palette, {
1921
lf
@@ -23,9 +25,7 @@ class NodeRedExtension {
2325
const node = document.createElement('div')
2426
node.className = 'node-red-palette'
2527
domOverlay.appendChild(node)
26-
setTimeout(() => {
27-
this.app.mount(node)
28-
})
28+
this.app.mount(node)
2929
}
3030
}
3131

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { h } from '@logicflow/core'
2+
import BaseNode from "./BaseNode"
3+
4+
class DelayNode extends BaseNode.view {
5+
getIcon () {
6+
const {
7+
width,
8+
height,
9+
} = this.props.model;
10+
return h('image', {
11+
width: 30,
12+
height: 30,
13+
x: - width / 2,
14+
y: - height / 2,
15+
href: 'images/delay.svg'
16+
})
17+
}
18+
}
19+
20+
class DelayNodeModel extends BaseNode.model {
21+
getNodeStyle() {
22+
const style = super.getNodeStyle()
23+
style.fill = 'rgb(230, 224, 248)';
24+
return style
25+
}
26+
}
27+
28+
export default {
29+
type: 'delay-node',
30+
model: DelayNodeModel,
31+
view: DelayNode
32+
}

‎src/components/node-red/nodes/StartNode.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,21 @@ import BaseNode from "./BaseNode"
33

44
class StartNode extends BaseNode.view {
55
getIcon () {
6+
const { model, graphModel } = this.props;
67
const {
78
width,
89
height,
9-
} = this.props.model;
10+
} = model;
1011
return h('image', {
1112
width: 30,
1213
height: 30,
1314
x: - width / 2,
1415
y: - height / 2,
15-
href: 'images/start.svg'
16+
className: 'node-red-start',
17+
href: 'images/start.svg',
18+
onClick: () => {
19+
graphModel.eventCenter.emit('node-red:start')
20+
}
1621
})
1722
}
1823
}

‎src/components/node-red/style.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,8 @@
1616
position: absolute;
1717
left: 0px;
1818
top: 0px;
19+
}
20+
.node-red-start {
21+
cursor: pointer;
22+
pointer-events: all;
1923
}

‎src/components/node-red/tools/Palette.vue‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,12 @@ const baseNodes = ref([
6161
text: 'switch',
6262
background: 'rgb(226, 217, 110)',
6363
icon: 'public/images/switch.svg'
64+
},
65+
{
66+
type: 'delay-node',
67+
text: 'delay',
68+
background: 'rgb(230, 224, 248)',
69+
icon: 'public/images/delay.svg'
6470
}
6571
])
6672
@@ -69,6 +75,9 @@ const baseNodes = ref([
6975
.demo-collapse {
7076
width: 150px;
7177
}
78+
.demo-collapse /deep/ .el-collapse-item__header {
79+
text-indent: 20px;
80+
}
7281
.red-ui-palette-node {
7382
cursor: move;
7483
background: #fff;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /