@mx-sose-front/mx-sose-graph 1.1.1 → 1.1.2

package/src/components/Edge/Edge.vue

@@ -1,56 +1,44 @@
 <template>
   <div class="edge-component" :style="{
     pointerEvents: 'all',
-    cursor: 'pointer'
+    cursor: 'pointer',
+    zIndex: props.shape.style?.zIndex
   }" @click.stop="handleClick($event)">
     <svg class="edge-svg" :viewBox="svgViewBox" :width="containerWidth" :height="containerHeight">
       <!-- 引入线条样式标记组件 -->
       <LineStyleMarker :shape-key="shapeKey" />
 
       <polyline :points="linePoints" :stroke="edgeColor" :stroke-width="strokeWidth" :stroke-dasharray="strokeDashArray"
-        fill="none" @click.stop="handleClick($event)" :marker-start="getMarkerStart()" :marker-end="getMarkerEnd()" />      
-      
+        fill="none" @click.stop="handleClick($event)" :marker-start="getMarkerStart()" :marker-end="getMarkerEnd()" />
+
       <!-- 选中状态显示端点黑色圆圈 -->
       <g v-if="props.isSelected">
         <!-- 起点圆圈 -->
-        <circle v-if="waypoints.length > 0" 
-          :cx="waypoints[0].x - bounds.minX + padding" 
-          :cy="waypoints[0].y - bounds.minY + padding" 
-          r="4" 
-          fill="#000000" 
-          stroke="#FFFFFF" 
-          stroke-width="1" />
-        
+        <circle v-if="waypoints.length > 0" :cx="waypoints[0].x - bounds.minX + padding"
+          :cy="waypoints[0].y - bounds.minY + padding" r="4" fill="#000000" stroke="#FFFFFF" stroke-width="1" />
+
         <!-- 终点圆圈 -->
-        <circle v-if="waypoints.length > 1" 
-          :cx="waypoints[waypoints.length - 1].x - bounds.minX + padding" 
-          :cy="waypoints[waypoints.length - 1].y - bounds.minY + padding" 
-          r="4" 
-          fill="#000000" 
-          stroke="#FFFFFF" 
+        <circle v-if="waypoints.length > 1" :cx="waypoints[waypoints.length - 1].x - bounds.minX + padding"
+          :cy="waypoints[waypoints.length - 1].y - bounds.minY + padding" r="4" fill="#000000" stroke="#FFFFFF"
           stroke-width="1" />
       </g>
-      
+
       <!-- 线条上方显示描述 -->
       <!-- 当lineName有值且符合特定shapeKey时，显示keywords和lineName -->
-      <text v-if="lineName && lineName !== '' && EDGES_WITH_KEYWORDS.includes(shapeKey)" 
-        :x="textPosition.x" :y="textPosition.y" 
-        text-anchor="middle" dominant-baseline="middle" 
-        font-family="思源黑体" font-size="12" fill="#5E5E5E" style="pointer-events: none;">
+      <text v-if="lineName && lineName !== '' && EDGES_WITH_KEYWORDS.includes(shapeKey)" :x="textPosition.x"
+        :y="textPosition.y" text-anchor="middle" dominant-baseline="middle" font-family="思源黑体" font-size="12"
+        fill="#5E5E5E" style="pointer-events: none;">
         {{ keywords }}{{ lineName }}
       </text>
       <!-- 当lineName有值但不符合特定shapeKey时，单独显示lineName -->
-      <text v-else-if="lineName && lineName !== ''" 
-        :x="textPosition.x" :y="textPosition.y" 
-        text-anchor="middle" dominant-baseline="middle" 
-        font-family="思源黑体" font-size="12" fill="#5E5E5E" style="pointer-events: none;">
+      <text v-else-if="lineName && lineName !== ''" :x="textPosition.x" :y="textPosition.y" text-anchor="middle"
+        dominant-baseline="middle" font-family="思源黑体" font-size="12" fill="#5E5E5E" style="pointer-events: none;">
         {{ lineName }}
       </text>
       <!-- 当lineName无值但符合特定shapeKey时，单独显示keywords -->
-      <text v-else-if="EDGES_WITH_KEYWORDS.includes(shapeKey)" 
-        :x="textPosition.x" :y="textPosition.y" 
-        text-anchor="middle" dominant-baseline="middle" 
-        font-family="思源黑体" font-size="12" fill="#5E5E5E" style="pointer-events: none;">
+      <text v-else-if="EDGES_WITH_KEYWORDS.includes(shapeKey)" :x="textPosition.x" :y="textPosition.y"
+        text-anchor="middle" dominant-baseline="middle" font-family="思源黑体" font-size="12" fill="#5E5E5E"
+        style="pointer-events: none;">
         {{ keywords }}
       </text>
     </svg>
@@ -58,7 +46,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, nextTick, onMounted } from 'vue'
 import type { Shape, Waypoint } from '../../types'
 import LineStyleMarker from '../LineStyle/LineStyleMarker.vue'
 import { DASHED_EDGE_SHAPES, EDGES_WITH_KEYWORDS, EDGES_WITH_ARROWHEADS, DIAMOND_MARKER_SHAPES, SPECIAL_END_POINT_SHAPES, EDGE_TYPE } from '../../constants/edgeShapeKeys'
@@ -158,22 +146,22 @@ const linePoints = computed(() => {
       };
     }
   }
-  
+
   // 需要特殊终点处理的边类型，避免线条穿过箭头
   if (SPECIAL_END_POINT_SHAPES.includes(shapeKey.value) && adjustedWaypoints.length >= 2) {
     const endPoint = adjustedWaypoints[adjustedWaypoints.length - 1];
     const prevPoint = adjustedWaypoints[adjustedWaypoints.length - 2];
-    
+
     // 计算方向向量（从终点指向倒数第二点，即反向向量）
     const dx = prevPoint.x - endPoint.x;
     const dy = prevPoint.y - endPoint.y;
     const length = Math.sqrt(dx * dx + dy * dy);
-    
+
     if (length > 0) {
       // 计算缩短距离
       const shortenDistance = 14;
       const ratio = shortenDistance / length;
-      
+
       // 调整终点位置，向相反方向移动
       adjustedWaypoints[adjustedWaypoints.length - 1] = {
         ...endPoint,
@@ -194,7 +182,7 @@ const shapeKey = computed(() => props.shape.shapeKey || '')
 const keywords = computed(() => props.shape.keywords || '')
 
 //获取线的名称
-const lineName = computed(()=>props.shape.modelName || '')
+const lineName = computed(() => props.shape.modelName || '')
 
 
 // 样式相关
@@ -225,7 +213,7 @@ const textPosition = computed(() => {
     // 当没有路径点时，返回一个默认位置
     return { x: 120, y: 40 };
   }
-  
+
   if (waypoints.value.length === 1) {
     // 当只有一个路径点时，使用默认的向上偏移
     return {
@@ -233,29 +221,29 @@ const textPosition = computed(() => {
       y: waypoints.value[0].y - bounds.value.minY + padding - 10
     };
   }
-  
+
   // 计算线条中点和方向
   let midPoint, normalVector;
-  
+
   if (waypoints.value.length > 2) {
     // 对于多段线，找到中间线段
     const segmentIndex = Math.floor((waypoints.value.length - 1) / 2);
     const p1 = waypoints.value[segmentIndex];
     const p2 = waypoints.value[segmentIndex + 1];
-    
+
     // 计算中间线段的中点
     midPoint = {
       x: (p1.x + p2.x) / 2,
       y: (p1.y + p2.y) / 2
     };
-    
+
     // 计算线段的方向向量
     const dx = p2.x - p1.x;
     const dy = p2.y - p1.y;
-    
+
     // 计算线段长度
     const length = Math.sqrt(dx * dx + dy * dy);
-    
+
     // 计算单位法线向量（向左旋转90度）
     if (length > 0) {
       normalVector = {
@@ -270,20 +258,20 @@ const textPosition = computed(() => {
     // 对于两段线，使用两个端点
     const p1 = waypoints.value[0];
     const p2 = waypoints.value[1];
-    
+
     // 计算中点
     midPoint = {
       x: (p1.x + p2.x) / 2,
       y: (p1.y + p2.y) / 2
     };
-    
+
     // 计算方向向量
     const dx = p2.x - p1.x;
     const dy = p2.y - p1.y;
-    
+
     // 计算长度
     const length = Math.sqrt(dx * dx + dy * dy);
-    
+
     // 计算单位法线向量
     if (length > 0) {
       normalVector = {
@@ -294,12 +282,12 @@ const textPosition = computed(() => {
       normalVector = { x: 0, y: -1 };
     }
   }
-  
+
   // 计算文本位置：中点加上法线方向的偏移（在线条正上方10px）
   const offsetDistance = 10;
   const adjustedX = midPoint.x + normalVector.x * offsetDistance;
   const adjustedY = midPoint.y + normalVector.y * offsetDistance;
-  
+
   // 转换为相对坐标
   return {
     x: adjustedX - bounds.value.minX + padding,
@@ -339,6 +327,7 @@ const handleClick = (event: MouseEvent) => {
   };
   emit('edge-click', shapeWithCorrectType, event)
 }
+
 </script>
 
 <style scoped>