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 ee06690

Browse files
committed
feat: add node red
1 parent 94d4e32 commit ee06690

File tree

16 files changed

+404
-44
lines changed

16 files changed

+404
-44
lines changed

‎package-lock.json‎

Lines changed: 7 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: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"preview": "vite preview"
99
},
1010
"dependencies": {
11-
"@logicflow/core": "^1.1.3",
11+
"@logicflow/core": "^1.1.7",
1212
"element-plus": "^2.0.4",
1313
"vue": "^3.2.25"
1414
},

‎public/images/function.svg‎

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

‎public/images/swap.svg‎

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

‎public/images/switch.svg‎

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

‎src/components/FlowChart.vue‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@
22
import { ref } from 'vue'
33
import LogicFlow from '@logicflow/core'
44
import '@logicflow/core/dist/style/index.css'
5+
import NodeRedExtension from './node-red/index'
6+
import './node-red/style.css'
57
import Palette from './Palette.vue'
6-
import FunctionNode from './nodes/FunctionNode'
78
89
export default {
910
setup() {
@@ -21,28 +22,28 @@ export default {
2122
config: {
2223
color: '#eeeeee'
2324
}
24-
}
25+
},
26+
plugins: [
27+
NodeRedExtension
28+
]
2529
})
26-
console.log(FunctionNode)
27-
this.lf.register(FunctionNode)
2830
this.lf.render({
2931
nodes: [
3032
{
3133
id: 'id1',
3234
type: 'function-node',
3335
x: 350,
3436
y: 150,
35-
properties: {
36-
name: '1',
37-
color: 'red',
38-
forms: []
39-
},
40-
text: {
41-
x: 365,
42-
y: 152,
43-
value: '开始节点'
44-
}
45-
}]
37+
text: '开始节点啊啊撒'
38+
},
39+
{
40+
id: 'id2',
41+
type: 'switch-node',
42+
x: 550,
43+
y: 150,
44+
text: 'switch'
45+
}
46+
]
4647
})
4748
},
4849
methods: {
@@ -60,10 +61,10 @@ export default {
6061

6162
<template>
6263
<div class="flow-chart">
63-
<div ref="container" class="container"></div>
6464
<Palette class="flow-chart-palette">
6565
<button @click="setProperties">11</button>
6666
</Palette>
67+
<div ref="container" class="container"></div>
6768
</div>
6869
</template>
6970

@@ -77,6 +78,9 @@ export default {
7778
width: 100%;
7879
height: 100%;
7980
}
81+
.flow-chart /deep/ .lf-red-node, .flow-chart /deep/ .lf-element-text {
82+
cursor: move;
83+
}
8084
.flow-chart-palette {
8185
position: absolute;
8286
left: 0;

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import FunctionNode from "./nodes/FunctionNode"
2+
import SwitchNode from "./nodes/SwitchNode"
3+
// import ConditionNode from "./nodes/ConditionNode"
4+
5+
class NodeRedExtension {
6+
static pluginName = 'NodeRedExtension'
7+
constructor ({ lf }) {
8+
lf.register(FunctionNode)
9+
lf.register(SwitchNode)
10+
// lf.register(ConditionNode)
11+
}
12+
}
13+
14+
export default NodeRedExtension
Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
import { RectNode, RectNodeModel, h } from "@logicflow/core"
2+
import { getBytesLength } from '../util'
3+
4+
5+
class RedNodeModel extends RectNodeModel {
6+
/**
7+
* 初始化
8+
*/
9+
initNodeData(data) {
10+
super.initNodeData(data)
11+
this.width = 100;
12+
this.height = 30;
13+
this.radius = 5;
14+
this.text.editable = false;
15+
this.text.x = this.x + 10;
16+
this.iconPosition = ''; // icon位置,left表示左边,'right'表示右边
17+
}
18+
/**
19+
* 动态设置初始化数据
20+
*/
21+
setAttributes() {
22+
if (this.text.value) {
23+
this.width = 30 + getBytesLength(this.text.value) * 9;
24+
}
25+
}
26+
/**
27+
* 重写节点样式
28+
*/
29+
getNodeStyle() {
30+
const style = super.getNodeStyle();
31+
style.fill = '#a6bbcf';
32+
if (this.isSelected) {
33+
style.strokeWidth = 2;
34+
style.stroke = '#ff7f0e';
35+
} else {
36+
style.strokeWidth = 1;
37+
style.stroke = '#999';
38+
}
39+
return style;
40+
}
41+
/**
42+
* 重写定义锚点
43+
*/
44+
getDefaultAnchor() {
45+
const { x, y, id, width, height } = this;
46+
const anchors = [
47+
{
48+
x: x + width / 2,
49+
y: y,
50+
id: `${id}_right`,
51+
type: "right"
52+
},
53+
{
54+
x: x - width / 2,
55+
y: y,
56+
id: `${id}_left`,
57+
type: "left"
58+
}
59+
];
60+
return anchors;
61+
}
62+
/**
63+
*
64+
*/
65+
getOutlineStyle() {
66+
const style = super.getOutlineStyle();
67+
style.stroke = 'transparent';
68+
style.hover.stroke = 'transparent';
69+
return style;
70+
}
71+
}
72+
class RedNode extends RectNode {
73+
/**
74+
* 1.1.7版本后支持在view中重写锚点形状。
75+
* 重写锚点新增
76+
*/
77+
getAnchorShape(anchorData) {
78+
const { x, y, type } = anchorData;
79+
return h("rect", {
80+
x: x - 5,
81+
y: y - 5,
82+
width: 10,
83+
height: 10,
84+
className: 'custom-anchor'
85+
});
86+
}
87+
getIcon () {
88+
return null;
89+
}
90+
getShape() {
91+
const {
92+
text,
93+
x,
94+
y,
95+
width,
96+
height,
97+
radius
98+
} = this.props.model;
99+
const style = this.props.model.getNodeStyle()
100+
return h(
101+
'g',
102+
{
103+
className: 'lf-red-node'
104+
},
105+
[
106+
h('rect', {
107+
...style,
108+
x: x - width / 2,
109+
y: y - height / 2,
110+
width,
111+
height,
112+
rx: radius,
113+
ry: radius
114+
}),
115+
h('g', {
116+
style: 'pointer-events: none;',
117+
transform: `translate(${x}, ${y})`
118+
}, [
119+
h('rect', {
120+
x: - width / 2,
121+
y: - height / 2,
122+
width: 30,
123+
height: 30,
124+
fill: '#000',
125+
fillOpacity: 0.05,
126+
stroke: 'none',
127+
}),
128+
this.getIcon(),
129+
h('path', {
130+
d: `M ${30 - width / 2} ${1 -height / 2 } l 0 28`,
131+
stroke: '#000',
132+
strokeOpacity: 0.1,
133+
strokeWidth: 1
134+
})
135+
])
136+
]
137+
)
138+
}
139+
}
140+
141+
142+
export default {
143+
type: 'red-node',
144+
model: RedNodeModel,
145+
view: RedNode
146+
}
Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import { HtmlNode, HtmlNodeModel, h } from "@logicflow/core";
2+
import { createApp } from 'vue';
3+
// import ConditonNode from './ConditionNode.vue';
4+
class ConditionNode extends HtmlNode {
5+
// constructor (props) {
6+
// super(props)
7+
// this.app = createApp({})
8+
// this.app.component('button-counter', {
9+
// data() {
10+
// return {
11+
// count: 0
12+
// }
13+
// },
14+
// template: `
15+
// <button @click="count++">
16+
// You clicked me {{ count }} times.
17+
// </button>`
18+
// })
19+
// }
20+
/**
21+
* 1.1.7版本后支持在view中重写锚点形状。
22+
* 重写锚点新增
23+
*/
24+
getAnchorShape(anchorData) {
25+
const { x, y, type } = anchorData;
26+
return h("rect", {
27+
x: x - 5,
28+
y: y - 5,
29+
width: 10,
30+
height: 10,
31+
className: `custom-anchor ${
32+
type === "left" ? "incomming-anchor" : "outgoing-anchor"
33+
}`
34+
});
35+
}
36+
setHtml(rootEl) {
37+
const el = document.createElement('div')
38+
el.id = 'js_id'
39+
console.log(5555, this.app, rootEl);
40+
el.innerHTML = '<div><button-counter></button-counter>111</div>'
41+
rootEl.appendChild(el);
42+
const app = createApp({})
43+
44+
// Define a new global component called button-counter
45+
app.component('button-counter', {
46+
data() {
47+
return {
48+
count: 0
49+
}
50+
},
51+
template: `
52+
<button v-on:click="count++">
53+
You clicked me {{ count }} times.
54+
</button>`
55+
})
56+
setTimeout(() => {
57+
app.mount('#js_id');
58+
})
59+
// rootEl.appendChild(container);
60+
}
61+
}
62+
63+
class ConditionNodeModel extends HtmlNodeModel {
64+
/**
65+
* 给model自定义添加字段方法
66+
*/
67+
addField(item) {
68+
this.properties.fields.push(item);
69+
this.setAttributes();
70+
// 为了保持节点顶部位置不变,在节点变化后,对节点进行一个位移,位移距离为添加高度的一半。
71+
this.move(0, 24 / 2);
72+
}
73+
getOutlineStyle() {
74+
const style = super.getOutlineStyle();
75+
style.stroke = "none";
76+
style.hover.stroke = "none";
77+
return style;
78+
}
79+
// 如果不用修改锚地形状,可以重写颜色相关样式
80+
getAnchorStyle(anchorInfo) {
81+
const style = super.getAnchorStyle();
82+
if (anchorInfo.type === "left") {
83+
style.fill = "red";
84+
style.hover.fill = "transparent";
85+
style.hover.stroke = "transpanrent";
86+
style.className = "lf-hide-default";
87+
} else {
88+
style.fill = "green";
89+
}
90+
return style;
91+
}
92+
}
93+
94+
export default {
95+
type: "condition-node",
96+
model: ConditionNodeModel,
97+
view: ConditionNode
98+
};

0 commit comments

Comments
(0)

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