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 94d4e32

Browse files
committed
feat: logicflow issue 515
1 parent 04d0c6a commit 94d4e32

File tree

9 files changed

+1254
-38
lines changed

9 files changed

+1254
-38
lines changed

‎package-lock.json

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

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,13 @@
99
},
1010
"dependencies": {
1111
"@logicflow/core": "^1.1.3",
12+
"element-plus": "^2.0.4",
1213
"vue": "^3.2.25"
1314
},
1415
"devDependencies": {
1516
"@vitejs/plugin-vue": "^2.2.0",
17+
"unplugin-auto-import": "^0.6.1",
18+
"unplugin-vue-components": "^0.17.21",
1619
"vite": "^2.8.0"
1720
}
1821
}

‎src/App.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,3 @@ import FlowChart from './components/FlowChart.vue'
77
<template>
88
<FlowChart />
99
</template>
10-

‎src/components/FlowChart.vue

Lines changed: 57 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,35 +2,85 @@
22
import { ref } from 'vue'
33
import LogicFlow from '@logicflow/core'
44
import '@logicflow/core/dist/style/index.css'
5+
import Palette from './Palette.vue'
6+
import FunctionNode from './nodes/FunctionNode'
57
68
export default {
7-
props: {
8-
msg: String
9-
},
109
setup() {
1110
const count = ref(0)
1211
return {
1312
count
1413
}
1514
},
1615
mounted() {
17-
console.log(44, this.count)
1816
this.lf = new LogicFlow({
1917
container: this.$refs.container,
20-
grid: true
18+
grid: {
19+
visible: true,
20+
type: 'mesh',
21+
config: {
22+
color: '#eeeeee'
23+
}
24+
}
25+
})
26+
console.log(FunctionNode)
27+
this.lf.register(FunctionNode)
28+
this.lf.render({
29+
nodes: [
30+
{
31+
id: 'id1',
32+
type: 'function-node',
33+
x: 350,
34+
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+
}]
2146
})
22-
this.lf.render()
47+
},
48+
methods: {
49+
setProperties () {
50+
this.lf.setProperties('id1', {
51+
color: 'green',
52+
})
53+
}
54+
},
55+
components: {
56+
Palette
2357
}
2458
}
2559
</script>
2660

2761
<template>
28-
<div ref="container" class="container"></div>
62+
<div class="flow-chart">
63+
<div ref="container" class="container"></div>
64+
<Palette class="flow-chart-palette">
65+
<button @click="setProperties">11</button>
66+
</Palette>
67+
</div>
2968
</template>
3069

3170
<style scoped>
3271
.container {
3372
width: 100%;
3473
height: 100%;
3574
}
75+
.flow-chart {
76+
position: relative;
77+
width: 100%;
78+
height: 100%;
79+
}
80+
.flow-chart-palette {
81+
position: absolute;
82+
left: 0;
83+
top: 0;
84+
z-index: 1;
85+
}
3686
</style>

‎src/components/HelloWorld.vue

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎src/components/Palette.vue

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script>
2+
export default {
3+
4+
}
5+
</script>
6+
7+
<template>
8+
<div>
9+
11
10+
<slot></slot>
11+
</div>
12+
</template>
13+
14+
<style>
15+
16+
</style>

‎src/components/nodes/FunctionNode.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { RectNode, RectNodeModel } from "@logicflow/core"
2+
3+
class FunctionNode extends RectNode {
4+
}
5+
6+
class FunctionNodeModel extends RectNodeModel {
7+
getNodeStyle() {
8+
const style = super.getNodeStyle()
9+
if (this.properties.name) {
10+
style.fill = this.properties.color
11+
}
12+
return style
13+
}
14+
}
15+
16+
export default {
17+
type: 'function-node',
18+
model: FunctionNodeModel,
19+
view: FunctionNode
20+
}

‎src/main.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
import { createApp } from 'vue'
2+
import ElementPlus from 'element-plus'
23
import App from './App.vue'
34
import './style.css'
45

5-
createApp(App).mount('#app')
6+
7+
const app = createApp(App)
8+
9+
app.use(ElementPlus)
10+
11+
app.mount('#app')
12+

‎vite.config.js

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,18 @@
11
import { defineConfig } from 'vite'
22
import vue from '@vitejs/plugin-vue'
3+
import AutoImport from 'unplugin-auto-import/vite'
4+
import Components from 'unplugin-vue-components/vite'
5+
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
36

47
// https://vitejs.dev/config/
58
export default defineConfig({
6-
plugins: [vue()]
9+
plugins: [
10+
vue(),
11+
AutoImport({
12+
resolvers: [ElementPlusResolver()],
13+
}),
14+
Components({
15+
resolvers: [ElementPlusResolver()],
16+
}),
17+
]
718
})

0 commit comments

Comments
(0)

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