Hooke / vue-flow-editor

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
1816b1ef 1 parent 95425863

源代码整理标记

Inline Side-by-side
Showing 9 changed files with 64 additions and 22 deletions
......@@ -17,6 +17,7 @@
@dblclick-edge="onDblClickEdge"
:activityConfig="state.activityConfig"
>
<!-- 左侧菜单 -->
<template v-slot:menu>
<vue-flow-edit-menu-group label="活动节点" value>
<vue-flow-edit-menu
......@@ -45,7 +46,7 @@
/>
</vue-flow-edit-menu-group>
</template>
<!-- 右侧表单 -->
<template v-slot:model>
<el-form
v-if="!!state.detailModel"
......@@ -177,15 +178,16 @@
</template>
</el-form>
</template>
<!-- 工具栏 -->
<template v-slot:toolbar>
<el-tooltip content="打印流程图数据结构">
<div class="vue-flow-editor-toolbar-item" @click="logData">
<i class="el-icon-search" />
<i class="el-icon-search" style=" margin-top: 4px;" />
<span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">log数据</span>
</div>
</el-tooltip>
</template>
<!-- 表单底部按钮 -->
<template v-slot:foot>
<el-button type="primary" @click="save">保存</el-button>
<el-button @click="cancel">取消</el-button>
......@@ -338,6 +340,7 @@ export default {
});
onMounted(() => {
document.title = '可视化流程设计器';
// // 显示提示框的标志位
// var showConfirmation = true;
// // 监听 beforeunload 事件
......
......@@ -6,7 +6,7 @@ export const AppData = {
"y": 100,
"text": "广告宣传",
"desc": "通过广告短频宣传",
"activity": "advertisement",
"activity": "advertisement", // 自定义节点的类型
},
{
"id": "2323456789",
......
<!--
* @Date: 2023-11-01 10:18:53
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-11-01 15:32:45
* @LastEditTime: 2023-11-02 07:25:50
* @FilePath: /vue-flow-editor/doc/selectUserView.vue
* @Description: 文件描述
* @Description: 成员列表选择控件
-->
<template>
<el-dialog
......
......@@ -34,6 +34,7 @@
},
drop: async e => {
let model = {...this.model}
// TAG: 自定义节点
formatNodeModel(model, this[VueFlowEditorProvider].props.activityConfig)
let {id, shape, size} = model
......@@ -113,4 +114,4 @@
</script>
<style lang="scss">
</style>
\ No newline at end of file
</style>
......
......@@ -59,7 +59,7 @@ export default {
let {nodes, edges} = data || {}
nodes = nodes || []
edges = edges || []
// TAG: 自定义节点
nodes.forEach(node => formatNodeModel(node, editorProps.activityConfig))
data = {nodes, edges}
......
......@@ -32,10 +32,10 @@ export default {
activityConfig: {type: Object}, // 注册活动节点
},
setup(props, context) {
const styles = useEditorStyles(props)
const canvasProps = useCanvasProps(props)
const modelBodyStyle = computed(() => ({
width: suffixSize(props.modelWidth)
}))
......@@ -79,6 +79,7 @@ export default {
editorState.showModel = false
},
updateModel: (model) => {
// TAG: 自定义节点
formatNodeModel(model, props.activityConfig)
commander.commands.update(model)
},
......
/*
* @Date: 2023-10-27 09:29:59
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-11-13 17:25:41
* @FilePath: /vue-flow-editor/src/shape/activity.ts
* @Description: 文件描述
*/
import {BASE_COLOR} from "@/utils/styles";
// TAG: 自定义节点
export function registerActivity(G6) {
G6.registerNode('activity', {
options: {
......@@ -7,14 +14,14 @@ export function registerActivity(G6) {
stateStyles: {},
},
setState() {},
drawShape(cfg, group) {
drawShape(cfg, group) { // 名字叫drawShape或者draw好像都可以，文档两个名字都有
let {text, desc, img, color} = cfg
color = color || BASE_COLOR
desc = desc || '无描述'
const [width, height] = (cfg.size || [200, 80]) as [number, number]
// 定义节点里的图形，名字和配置可以自定义
const shapes = {
keyShape: {
type: 'rect',
......@@ -35,7 +42,7 @@ export function registerActivity(G6) {
desc: {
type: 'text',
attrs: {text: desc, x: height - width / 2, y: height * (5 / 8) - height / 2, fontSize: 12, textAlign: 'left', textBaseline: 'middle', fill: '#999'},
}
},
}
const addShapes = {}
......@@ -55,7 +62,7 @@ export function registerActivity(G6) {
})
group.shapes = addShapes
// 好像是必须返回一个名字叫keyShape，用于寻找节点
return keyShape
},
update(cfg, group) {
......@@ -65,5 +72,5 @@ export function registerActivity(G6) {
group.shapes.label.attr({text: cfg.text})
group.shapes.desc.attr({text: cfg.desc})
},
}, 'single-shape')
}
\ No newline at end of file
}, 'single-shape') // 继承了 single-shape 的基类
}
......
/*
* @Date: 2023-10-27 09:29:59
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-11-13 16:31:31
* @FilePath: /vue-flow-editor/src/shape/index.ts
* @Description: 文件描述
*/
import {registerAnchor} from "@/shape/anchor";
import {registerEdge} from "@/shape/edge";
// TAG: 自定义节点
import {registerActivity} from "@/shape/activity";
export function registerShape(G6) {
registerAnchor(G6)
registerEdge(G6)
registerActivity(G6)
}
\ No newline at end of file
}
......
......@@ -28,13 +28,14 @@ export function flatten(array) {
return flattend;
}
export const DEFAULT_SIZE = {
export const DEFAULT_SIZE = { // 不同类型的默认宽高
rect: [130, 40],
ellipse: [100, 50],
diamond: [140, 50],
circle: [80, 80],
triangle: [80, 80],
star: [80, 80],
// TAG: 自定义节点
activity: [200, 80],
}
......@@ -77,19 +78,40 @@ export function formatPos(option: { x: number, y: number, size: [number, number]
shape: option.shape,
}
}
// TAG: 自定义节点
export function formatNodeModel(model, activityConfig) {
let {shape, size, activity} = model
/**
* {
"id": "123456",
"x": 590,
"y": 100,
"text": "广告宣传",
"desc": "通过广告短频宣传",
"activity": "advertisement", // 自定义节点的类型
}
*/
if (!!activity) {
shape = 'activity'
}
model.size = size || DEFAULT_SIZE[shape]
/**
* advertisement: {
text: "广告宣传1",
desc: "通过广告宣传新品",
color: "#9283ed",
img: "https://cdn.ipadbiz.cn/oa/advertisement-node.svg"
}
*/
if (!!activity && !!activityConfig[activity]) {
// 把activity的配置挂到model上
model.shape = 'activity'
model.img = activityConfig[activity].img
model.color = activityConfig[activity].color
}
}
\ No newline at end of file
}
......