199 lines
3.9 KiB
Vue
199 lines
3.9 KiB
Vue
<template>
|
|
<div class="flow-demo1">
|
|
<div ref="flow" class="viewport" id="flowMain" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import LogicFlow from '@logicflow/core';
|
|
// 引入整体背景的样式
|
|
import '@logicflow/core/dist/style/index.css';
|
|
import { Menu } from "@logicflow/extension";
|
|
import AiNodeExtension from '@/components/flow/index'
|
|
import RegisteMenu from '@/components/flow/menu.js'
|
|
const emit=defineEmits(["initLf","updateNode","nodeClick"])
|
|
const themeApprove = {
|
|
rect: { // 矩形样式
|
|
radius: 8,
|
|
stroke: '#3CB371'
|
|
},
|
|
circle: {
|
|
r: 25,
|
|
stroke: '#FF6347'
|
|
},
|
|
polygon: {
|
|
stroke: '#6495ED',
|
|
},
|
|
polyline: {
|
|
strokeWidth: 1,
|
|
stroke: '#6495ED'
|
|
},
|
|
edgeText: {
|
|
background: {
|
|
fill: 'white',
|
|
},
|
|
},
|
|
}
|
|
|
|
const config = {
|
|
stopScrollGraph: true,
|
|
stopZoomGraph: true,
|
|
grid: {
|
|
size: 10,
|
|
visible: true,
|
|
type: 'mesh',
|
|
config: {
|
|
color: '#DCDCDC',
|
|
}
|
|
},
|
|
keyboard: { enabled: true },
|
|
style: themeApprove,
|
|
plugins: [AiNodeExtension,Menu]
|
|
};
|
|
const flow = ref()
|
|
let lf = ref(null)
|
|
let showProp=ref(false)
|
|
let nodeData=reactive(null)
|
|
let nodePropKey=ref(1)
|
|
const initEvent=(lf)=>{
|
|
lf.on("blank:click",node=>{
|
|
emit("nodeClick",null)
|
|
});
|
|
lf.on("element:click",node=>{
|
|
nodeData=node.data
|
|
showProp.value=true
|
|
nodePropKey.value++
|
|
emit("nodeClick",node)
|
|
});
|
|
lf.on("node:dnd-add",data=>{
|
|
nodeData=data.data;
|
|
showProp.value=true
|
|
nodePropKey.value++
|
|
doUpdateState()
|
|
});
|
|
lf.on("connection:not-allowed",(a,b,c)=>{
|
|
ElMessage.error("开始节点只能连接结束节点!");
|
|
});
|
|
lf.on("node:delete",data=>{
|
|
if(data.data.text.value=="目标绘图"){
|
|
ElMessage.error("目标绘图节点不能删除");
|
|
setTimeout(() => {
|
|
lf.undo();
|
|
}, 400);
|
|
return;
|
|
}
|
|
doUpdateState()
|
|
});
|
|
lf.on("node:contextmenu",(d)=>{
|
|
if(d.data.text.value=="目标绘图"){
|
|
setTimeout(()=>{
|
|
document.querySelector(".lf-menu").style.display="none";
|
|
},0)
|
|
}
|
|
});
|
|
}
|
|
const doEdit=(n)=>{
|
|
debugger
|
|
}
|
|
const doUpdateState=()=>{
|
|
//nodePanel.value.updateNode(lf.value.getGraphData());
|
|
emit("updateNode",lf.value.getGraphData())
|
|
}
|
|
defineExpose({
|
|
doEdit,
|
|
})
|
|
onMounted(() => {
|
|
const logicFlow = new LogicFlow({
|
|
...config,
|
|
container: flow.value
|
|
})
|
|
lf.value = logicFlow
|
|
logicFlow.setDefaultEdgeType("ai-link");
|
|
RegisteMenu(logicFlow)
|
|
initEvent(logicFlow);
|
|
emit("initLf",lf);
|
|
window.lf = lf;
|
|
logicFlow.render({
|
|
nodes: [
|
|
/* {
|
|
id: 'node_1',
|
|
type: 'ai-node',
|
|
x: 150,
|
|
y: 40,
|
|
fill:'#409effaa',
|
|
text: '图像缩放',
|
|
properties:{
|
|
node:201
|
|
}
|
|
},
|
|
{
|
|
id: 'node_2',
|
|
type: 'ai-node',
|
|
x: 150,
|
|
y: 540,
|
|
fill:'#3CB371',
|
|
text: '目标绘图',
|
|
properties:{
|
|
node:900
|
|
}
|
|
}*/
|
|
],
|
|
edges: [
|
|
|
|
]
|
|
})
|
|
doUpdateState();
|
|
});
|
|
</script>
|
|
<style scoped lang='scss'>
|
|
.flow-demo1 {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
padding: 0px;
|
|
|
|
.viewport {
|
|
height: 600px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.custom-anchor {
|
|
stroke: #999;
|
|
stroke-width: 1;
|
|
fill: #d9d9d9;
|
|
cursor: crosshair;
|
|
rx: 3;
|
|
ry: 3;
|
|
}
|
|
|
|
.custom-anchor:hover {
|
|
fill: #ff7f0e;
|
|
stroke: #ff7f0e;
|
|
}
|
|
|
|
.flow-card {
|
|
height: 80%;
|
|
width: calc(100% - 450px);
|
|
|
|
.el-card__body {
|
|
height: 100%;
|
|
padding: 4px;
|
|
}
|
|
|
|
margin: 0px 12px;
|
|
}
|
|
|
|
.node-panel {
|
|
width: 240px;
|
|
|
|
.el-tabs__item {
|
|
padding: 0px 10px !important;
|
|
}
|
|
}
|
|
|
|
.card-prop {
|
|
height: 300px;
|
|
width: 200px;
|
|
min-width: 200px;
|
|
}
|
|
}
|
|
</style> |