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 3a74cac

Browse files
committed
feat: 增加属性设置功能
1 parent f76d85c commit 3a74cac

File tree

13 files changed

+872
-54
lines changed

13 files changed

+872
-54
lines changed

‎package-lock.json

Lines changed: 39 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
"preview": "vite preview"
99
},
1010
"dependencies": {
11-
"@logicflow/core": "^1.1.7",
11+
"@logicflow/core": "^1.1.23",
12+
"@logicflow/extension": "^1.1.23",
1213
"element-plus": "^2.0.4",
1314
"vue": "^3.2.25"
1415
},

‎src/components/FlowChart.vue

Lines changed: 37 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,16 @@ import { ref } from 'vue'
33
import LogicFlow from '@logicflow/core'
44
import '@logicflow/core/dist/style/index.css'
55
import NodeRedExtension from './node-red/index'
6-
import './node-red/style.css'
6+
import Settingfrom'./node-red/tools/Setting.vue'
77
8+
import './node-red/style.css'
89
export default {
910
setup() {
1011
const count = ref(0)
12+
const currentNode = ref(null)
1113
return {
12-
count
14+
count,
15+
currentNode
1316
}
1417
},
1518
mounted() {
@@ -42,6 +45,15 @@ export default {
4245
x: 220,
4346
y: 200,
4447
text: 'start'
48+
},
49+
{
50+
id: 'node_123_1',
51+
type: 'vue-html',
52+
x: 720,
53+
y: 700,
54+
properties: {
55+
t: 1
56+
}
4557
},
4658
{
4759
id: 'node_2',
@@ -136,18 +148,32 @@ export default {
136148
// todo: 让流程跑起来
137149
console.log('我要开始执行流程了')
138150
})
139-
this.lf.on('vue-node:click', (data) => {
151+
this.lf.on('vue-node:click', (data) => {
140152
this.lf.setProperties(data.id, {
141153
t: ++data.val
142154
})
143155
})
156+
this.lf.on('node:click', ({ data }) => {
157+
this.currentNode = data
158+
})
159+
this.lf.on('blank:click', ({ data }) => {
160+
this.currentNode = null
161+
})
162+
},
163+
methods: {
164+
changeStyle (style) {
165+
this.lf.setProperties(this.currentNode.id, {
166+
style
167+
})
168+
}
144169
}
145170
}
146171
</script>
147172

148173
<template>
149174
<div class="flow-chart">
150175
<div ref="container" class="container"></div>
176+
<Setting v-if="currentNode" @changeStyle="changeStyle" :nodeData="currentNode" class="setting-panel"></Setting>
151177
</div>
152178
</template>
153179

@@ -164,10 +190,18 @@ export default {
164190
.flow-chart /deep/ .lf-red-node, .flow-chart /deep/ .lf-element-text {
165191
cursor: move;
166192
}
193+
.flow-chart /deep/ svg {
194+
display: block;
195+
}
167196
.flow-chart-palette {
168197
position: absolute;
169198
left: 0;
170199
top: 0;
171200
z-index: 1;
172201
}
202+
.setting-panel {
203+
position: absolute;
204+
top: 0;
205+
right: 0;
206+
}
173207
</style>

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ class RedNodeModel extends RectNodeModel {
1414
// this.text.editable = false;
1515
this.text.x = this.x + 10;
1616
this.iconPosition = ''; // icon位置,left表示左边,'right'表示右边
17+
this.defaultFill = '#a6bbcf';
1718
}
1819
/**
1920
* 动态设置初始化数据
@@ -37,14 +38,15 @@ class RedNodeModel extends RectNodeModel {
3738
*/
3839
getNodeStyle() {
3940
const style = super.getNodeStyle();
40-
style.fill='#a6bbcf';
41+
constdataStyle=this.properties.style||{};
4142
if (this.isSelected) {
42-
style.strokeWidth = 2;
43-
style.stroke = '#ff7f0e';
43+
style.strokeWidth = Number(dataStyle.borderWidth)||2;
44+
style.stroke = dataStyle.borderColor||'#ff7f0e';
4445
} else {
45-
style.strokeWidth = 1;
46-
style.stroke = '#999';
46+
style.strokeWidth = Number(dataStyle.borderWidth)||1;
47+
style.stroke = dataStyle.borderColor||'#999';
4748
}
49+
style.fill = dataStyle.backgroundColor || this.defaultFill;
4850
return style;
4951
}
5052
/**

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,9 @@ class DelayNode extends BaseNode.view {
1818
}
1919

2020
class DelayNodeModel extends BaseNode.model {
21-
getNodeStyle() {
22-
const style = super.getNodeStyle()
23-
style.fill = 'rgb(230, 224, 248)';
24-
return style
21+
initNodeData (data) {
22+
super.initNodeData(data)
23+
this.defaultFill = 'rgb(230, 224, 248)'
2524
}
2625
}
2726

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,9 @@ class FetchNode extends BaseNode.view {
1818
}
1919

2020
class FetchNodeModel extends BaseNode.model {
21-
getNodeStyle() {
22-
const style = super.getNodeStyle()
23-
style.fill = 'rgb(231, 231, 174)';
24-
return style
21+
initNodeData (data) {
22+
super.initNodeData(data)
23+
this.defaultFill = 'rgb(231, 231, 174)'
2524
}
2625
}
2726

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,9 @@ class FunctionNode extends BaseNode.view {
1818
}
1919

2020
class FunctionNodeModel extends BaseNode.model {
21-
getNodeStyle() {
22-
const style = super.getNodeStyle()
23-
style.fill = 'rgb(253, 208, 162)';
24-
return style
21+
initNodeData (data) {
22+
super.initNodeData(data)
23+
this.defaultFill = 'rgb(253, 208, 162)'
2524
}
2625
}
2726

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,9 @@ class StartNodeModel extends BaseNode.model {
3838
];
3939
return anchors;
4040
}
41-
getNodeStyle() {
42-
const style = super.getNodeStyle()
43-
style.fill = 'rgb(166, 187, 207)';
44-
return style
41+
initNodeData (data) {
42+
super.initNodeData(data)
43+
this.defaultFill = 'rgb(166, 187, 207)'
4544
}
4645
}
4746

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,9 @@ class SwitchNode extends BaseNode.view {
1818
}
1919

2020
class SwitchNodeModel extends BaseNode.model {
21-
getNodeStyle() {
22-
const style = super.getNodeStyle()
23-
style.fill = 'rgb(226, 217, 110)';
24-
return style
21+
initNodeData (data) {
22+
super.initNodeData(data)
23+
this.defaultFill = 'rgb(226, 217, 110)'
2524
}
2625
}
2726

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

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,32 @@
11
import { HtmlNode, HtmlNodeModel } from "@logicflow/core";
2-
import { createApp } from 'vue';
2+
import { createApp,ref,h } from 'vue';
33
import VueNode from './VueNode.vue';
44

55
class VueHtmlNode extends HtmlNode {
66
constructor (props) {
77
super(props)
8-
this.app = createApp(VueNode)
8+
// const appRef = ref(null)
9+
this.app = createApp({
10+
render: () => h(VueNode, {
11+
// ref: appRef,
12+
title: '312',
13+
properties: props.model.getProperties(),
14+
onBtnClick: (i) => {
15+
console.log(44, i)
16+
props.model.setProperties({
17+
t: i++
18+
})
19+
}
20+
})
21+
})
922
}
1023
setHtml(rootEl) {
1124
const node = document.createElement('div')
12-
const { model, graphModel } = this.props;
13-
const properties = model.getProperties();
25+
// const { model, graphModel } = this.props;
26+
// const properties = model.getProperties();
1427
rootEl.appendChild(node)
15-
if (!this.isMounted) {
16-
this.app.mount(node)
17-
this.app._instance.emitsOptions['btn:click'] = (val) => {
18-
graphModel.eventCenter.emit('vue-node:click', {
19-
id: model.id,
20-
val
21-
})
22-
}
23-
this.isMounted = true
24-
} else {
25-
this.app._instance.props.properties = properties
26-
}
28+
this.app.mount(node)
29+
console.log(34)
2730
}
2831
}
2932

0 commit comments

Comments
(0)

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