403vueflow连线修改，逻辑，数据，删除bug修改

src/style/index.css

@@ -108,9 +108,9 @@ body{
   
 }
 .activeOrange {
-    background-color: rgba(255, 255, 255, 0.3);
-    border: 2px solid #fff;
-    border-radius: 5px;
+    background-color: rgba(155, 155, 155, 0.3);
+    /* border: 2px solid #fff; */
+    /* border-radius: 5px; */
     box-sizing: border-box;
   }
   .imgzong  .listitem{

src/views/home.vue

@@ -1941,7 +1941,7 @@ let looktext=ref('');
 //       });
 const activeName = ref('Role')
 const activeName1 = ref('message')
-let active = ref('');
+let active = ref('Role10');
 let tabactive = ref("");
 let checkbox = ref(false)
 let formLabelWidth6 = ref(100)
@@ -2621,9 +2621,14 @@ const handleEditorChange = (value) => {
 
 // 模块选择
 const clickgeometry = (e, index, key, name) => {
-  console.log(key);
-  console.log('模块选择:',name);
+  // console.log(key);
+  // console.log('模块选择:',name);
   tabactive.value = name;
+  // 逻辑流数据流增加选中
+  if(key==='Role10' || key==='Role11'){
+    active.value = key;
+  }
+  
   dialogbolen();
 }
 
@@ -2670,10 +2675,10 @@ const dialogbolen = () => {
       showTrigger.value = true;
       break;
     case "逻辑流连线":
-      vuefval.value.linestrokeWidth(1);
+      vuefval.value.linestrokeWidth('process');
       break;
     case "数据流连线":
-      vuefval.value.linestrokeWidth(3);
+      vuefval.value.linestrokeWidth('data');
       break;
       case "模块组合":
       vuefval.value.bgcolorfunc(colortier.value);

src/views/vuetree/Sidebar.vue

@@ -366,7 +366,8 @@ const stopDrag = () => {
   >
     <el-tree :data="datatree"  class="custom-tree" ref="cgtree"  default-expand-all  :props="defaultProps" @node-click="handleNodeClick"  >
       <template #default="{ node, data }">
-          <div   @dragstart="onDragStart($event, 'default',data.id)"  :draggable="true" >
+          <!-- <div   @dragstart="onDragStart($event, 'default',data.id)"  :draggable="true" > -->
+          <div>
             <img :src="data.img" class="custom-image" />
             <span class="custom-text"> {{ node.label }}  </span>
           </div>

src/views/vuetree/index.vue

@@ -267,7 +267,7 @@ import emitter from "@/utils/emitter";
 const dark = ref(false)
 let datatree=ref();
 const route = useRoute();
-const { onInit, onNodeDragStop, onNodeContextMenu, onConnect, addEdges, setViewport, toObject,addNodes,updateEdgeData } = useVueFlow()
+const { onInit, onNodeDragStop, onNodeContextMenu, onConnect, addEdges, setViewport, toObject,addNodes,updateEdgeData,onConnectStart} = useVueFlow()
 let vueFlowRef = ref();
 let emit = defineEmits(['optimizerfalse']);
 let mergedObj=ref();
@@ -322,6 +322,29 @@ const changeName = ref({
   
 })
 
+// 旧数据存储
+let prevNodes = [...nodes.value];
+let prevEdges = [...edges.value];
+
+// 监听节点变化
+watch(nodes, (newNodes) => {
+  const deletedNodes = prevNodes.filter((node) => !newNodes.some((n) => n.id === node.id));
+  if (deletedNodes.length > 0) {
+    console.log("Deleted Nodes:", deletedNodes);
+    // 处理节点删除逻辑
+  }
+  prevNodes = [...newNodes];
+}, { deep: true });
+
+// 监听连线变化
+watch(edges, (newEdges) => {
+  const deletedEdges = prevEdges.filter((edge) => !newEdges.some((e) => e.id === edge.id));
+  if (deletedEdges.length > 0) {
+    console.log("Deleted Edges:", deletedEdges);
+    // 处理连线删除逻辑
+  }
+  prevEdges = [...newEdges];
+}, { deep: true });
 
 onNodeContextMenu((e) => {
   noid.value = e.node;
@@ -329,6 +352,12 @@ onNodeContextMenu((e) => {
   changeNameshow.value = true;
 })
 
+
+// 监听连接开始，提前取消选中的线段
+onConnectStart(() => {
+  cleanEdgeselect();
+});
+
 // 线的类型 process-逻辑线 data-数据线
 let lineType = ref('process');
 // 线序号
@@ -337,14 +366,34 @@ let linecount = ref(0);
 onConnect((connection) => {
   console.log('线连接',connection);
   // 创建唯一的边ID（由源节点和目标节点组成）
-  const edgeId = `${connection.source}-${connection.target}`;
+  const edgeId = `${lineType.value}-${connection.source}-${connection.sourceHandle}-${connection.target}-${connection.targetHandle}`;
   connection.id = edgeId;  // 自定义 ID
   connection.type = 'smoothstep';//  smoothstep straight
-  connection.markerEnd = MarkerType.ArrowClosed;
+  connection.markerEnd = lineType.value === "data" ? "" : MarkerType.ArrowClosed;
   connection.color=linecolor.value;
   // connection.label = '这是一条注释';
   connection.style = { strokeWidth:linenum.value ,stroke:linecolor.value};
-  addEdges(connection)
+
+  // 连接数据流线前应先连接逻辑流
+  if(lineType.value === 'data'){
+    const processEdgeId = `process-${connection.source}-${connection.sourceHandle}-${connection.target}-${connection.targetHandle}`;
+    const hasProcessEdge = edges.value.some(edge => edge.id === processEdgeId);
+    if(!hasProcessEdge){
+      ElMessage({
+        message:'请先连接逻辑流连线！',
+        type:'error'
+      })
+      return;
+    }
+  }
+
+  // 
+  const sameEdge = edges.value.find(edge => edge.id === edgeId);
+  if(sameEdge){
+    deleteflow(sameEdge.data.wid);
+  }
+
+  addEdges(connection);
   seledge.value=null;
   
   linecount.value++;
@@ -521,6 +570,7 @@ let previousEdge = null;  // 用于保存上一个选中的边缘
 // 监听线
 function onEdgeClick(e) {
   console.log('Edge Click', e.edge);
+  console.log('所有线段：',edges.value);
   // 如果已经有选中的边缘
   if (seledge.value) {
     // 恢复上一个选中边缘的样式
@@ -540,10 +590,12 @@ function onEdgeClick(e) {
   // 暂时更改当前选中边缘的样式
   seledge.value.originalColor = seledge.value.style.stroke;  // 保存当前边缘的原始颜色
   seledge.value.originalWidth = seledge.value.style.strokeWidth; // 保存当前边缘的原始宽度
+
+  const isProcess = e.edge.data.type === 'process';
   seledge.value.style = {
     ...seledge.value.style,
-    stroke: '#2267B1',       // 设置选中边缘的颜色
-    strokeWidth: 2,          // 设置选中边缘的宽度
+    stroke: isProcess ? '#2267B1' : 'rgba(255, 255, 0, 0.3)',// 设置选中边缘的颜色
+    strokeWidth: isProcess ? 2 : 6,// 设置选中边缘的宽度
   };
 
   // 保存当前选中的边缘作为上一个选中边缘
@@ -610,7 +662,7 @@ const handlecheckAllchange = (val) => {
   isIndeterminate.value = false;
 };
 
-
+// 双击线段弹窗确认
 const confirmselection=()=>{
   const table = dataTables[datacontent.value];
   let checkedData = table.value.filter((item) => item.steamflag).map((item) => item.name);
@@ -641,9 +693,14 @@ const handleAdid = (adidFromB) => {
 
 
 let datacontent = ref('')
+// 判定是哪种线段
 function onEdgeDoubleClick(e) {
   
   console.log('Edge Double Click', e)
+  if(e.edge.data.type==='process'){
+    console.log('逻辑流不打开弹窗');
+    return ;
+  }
   seledge.value = e.edge;
   // dataflowshow.value = true
   console.log('qidian:',e.edge.sourceNode.data.name);
@@ -815,6 +872,9 @@ function updatePos() {
 }
 
 function removeEdge(id) {
+  if(!seledge.value){
+    return;
+  }
   id = Edgeid.value;
   const wid = seledge.value.data.wid;
   vueFlowRef.value.removeEdges(id);
@@ -1105,21 +1165,13 @@ onMounted(() => {
   }, 1500);
   // childfun();
 
+  
+  // 点击其他区域取消线段选中
   if (vueFlowRef.value) {
     vueFlowRef.value.$el.addEventListener('click', (event) => {
       // 确保点击的不是边缘
       if (seledge.value && !event.target.closest('.vue-flow__edge')) {
-        // 恢复选中边缘的原始样式
-        seledge.value.style = {
-          ...seledge.value.style,
-          stroke: seledge.value.originalColor,
-          strokeWidth: previousEdge?.originalWidth || 1, // 恢复原始宽度
-        };
-
-        // 清空选中的边缘
-        seledge.value = null;
-        Edgeid.value = null;
-        previousEdge = null;
+        cleanEdgeselect();
       }
     });
   }
@@ -1128,6 +1180,23 @@ onMounted(() => {
   emitter.on("adidFromadflow", handleAdid);
 });
 
+const cleanEdgeselect = () => {
+  if(seledge.value) {
+    // 恢复选中边缘的原始样式
+    seledge.value.style = {
+          ...seledge.value.style,
+          stroke: seledge.value.originalColor,
+          strokeWidth: previousEdge?.originalWidth || 1, // 恢复原始宽度
+        };
+
+    // 清空选中的边缘
+    seledge.value = null;
+    Edgeid.value = null;
+    previousEdge = null;
+  }
+  
+} 
+
 
 onUnmounted(() => {
   emitter.off('child2Data');
@@ -1160,19 +1229,16 @@ const getroter=()=>{
 
 }
 //改变线的粗
-const linestrokeWidth=(num)=>{
-  if(seledge.value){
-    seledge.value.style.strokeWidth = num;
+const linestrokeWidth=(type)=>{
+  if(type=='process'){
+    linenum.value=1;
+    linecolor.value = '#b1b1b7';
+    lineType.value = 'process';
+  }else if(type=='data'){
+    linenum.value=6;
+    linecolor.value = "rgba(150, 150, 150, 0.2)";
+    lineType.value = 'data';
   }
-  linenum.value=num;
-// console.log(seledge.value);
-//   let edgearr= toObject().edges;
-//   for (let i = 0; i <= edgearr.length-1; i++) {
-//     edgearr[i].style.strokeWidth = num;
-// }
-console.log(num)
-//addEdges(edgearr);
-
 }
 //改变线的颜色
 const changeAllEdgesColor = (color1) => {
@@ -1181,13 +1247,18 @@ const changeAllEdgesColor = (color1) => {
 
   // 找到当前选中的边缘
   if (seledge.value) {
-    // 更新该边缘的颜色，不修改宽度
+    // 更新该边缘的颜色
+    let newColor = linecolor.value;
+
+    // 如果选中的线 `linetype` 是 `data`，则增加透明度 0.3
+    if (seledge.value.data.type === 'data') {
+      newColor = convertToRGBA(linecolor.value, 0.3);
+    }
     const updatedEdge = { 
       ...seledge.value, 
       style: { 
         ...seledge.value.style, 
-        stroke: linecolor.value, // 只修改颜色
-        strokeWidth: 1, // 保持选中样式的宽度（如果想要恢复原始宽度，设置为 1）
+        stroke: newColor, // 只修改颜色
       }
     };
 
@@ -1200,6 +1271,21 @@ const changeAllEdgesColor = (color1) => {
   }
 };
 
+// 颜色转换函数：将 Hex / RGB 转换为 RGBA
+const convertToRGBA = (color, alpha) => {
+  if (color.startsWith('#')) {
+    // 处理 Hex 颜色（例如 #ff0000 转换为 rgba(255, 0, 0, 0.3)）
+    const r = parseInt(color.substring(1, 3), 16);
+    const g = parseInt(color.substring(3, 5), 16);
+    const b = parseInt(color.substring(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  } else if (color.startsWith('rgb')) {
+    // 处理 RGB 颜色，替换透明度
+    return color.replace(/rgb(a?)\(([^)]+)\)/, `rgba($2, ${alpha})`);
+  }
+  return color; // 默认返回原始颜色（避免报错）
+};
+
 watch(() => seledge.value, (newItems, oldItems) => {
   if(seledge.value!=null){
     // seledge.value.style.stroke =  linecolor.value;

src/views/vuetree/useDnD.js

@@ -212,7 +212,7 @@ export default function useDragAndDrop() {
     })
 
     const savedObj = JSON.parse(sessionStorage.getItem("objlist"));
-    console.log('objlist',savedObj);
+    // console.log('objlist',savedObj);
     const pid = savedObj.pid;
     const newwid = '';