@mx-sose-front/mx-sose-graph 1.1.8 → 1.2.1

package/src/components/Edge/Edge.vue

@@ -5,40 +5,77 @@
     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()" />
+      <polyline
+        :points="linePoints"
+        :stroke="edgeColor"
+        :stroke-width="strokeWidth"
+        :stroke-dasharray="strokeDashArray"
+        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 > 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" />
+        <circle
+          v-if="adjustedWaypoints.length > 0"
+          :cx="adjustedWaypoints[0].x - bounds.minX + padding"
+          :cy="adjustedWaypoints[0].y - bounds.minY + padding"
+          r="4"
+          fill="#000000"
+          stroke="#FFFFFF"
+          stroke-width="1"
+        />
+        <circle
+          v-if="adjustedWaypoints.length > 1"
+          :cx="adjustedWaypoints[adjustedWaypoints.length - 1].x - bounds.minX + padding"
+          :cy="adjustedWaypoints[adjustedWaypoints.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>
@@ -46,12 +83,17 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted } from 'vue'
+import { computed } 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'
+import {
+  DASHED_EDGE_SHAPES,
+  EDGES_WITH_KEYWORDS,
+  EDGES_WITH_ARROWHEADS,
+  DIAMOND_MARKER_SHAPES,
+  SPECIAL_END_POINT_SHAPES
+} from '../../constants/edgeShapeKeys'
 
-// Props
 interface Props {
   shape: Shape
   isSelected?: boolean
@@ -61,12 +103,15 @@ const props = withDefaults(defineProps<Props>(), {
   isSelected: false
 })
 
-// Events
 const emit = defineEmits<{
   'edge-click': [shape: Shape, event: MouseEvent]
 }>()
 
-// 解析waypoints
+const shapeKey = computed(() => props.shape.shapeKey || '')
+const keywords = computed(() => props.shape.keywords || '')
+const lineName = computed(() => props.shape.modelName || '')
+
+// 解析 waypointId，统一转成路径点数组。
 const waypoints = computed(() => {
   if (!props.shape.waypointId) return []
 
@@ -74,7 +119,7 @@ const waypoints = computed(() => {
     try {
       return JSON.parse(props.shape.waypointId) as Waypoint[]
     } catch (error) {
-      console.error('解析waypointId失败:', error)
+      console.error('解析 waypointId 失败:', error)
       return []
     }
   }
@@ -86,14 +131,14 @@ const waypoints = computed(() => {
   return []
 })
 
-// 计算边界框
+// 根据路径点计算当前边的包围盒。
 const bounds = computed(() => {
   if (waypoints.value.length === 0) {
     return { minX: 0, minY: 0, maxX: 100, maxY: 100 }
   }
 
-  const xs = waypoints.value.map(wp => wp.x)
-  const ys = waypoints.value.map(wp => wp.y)
+  const xs = waypoints.value.map((wp) => wp.x)
+  const ys = waypoints.value.map((wp) => wp.y)
 
   return {
     minX: Math.min(...xs),
@@ -103,231 +148,189 @@ const bounds = computed(() => {
   }
 })
 
-// 计算SVG相关属性
+// SVG 容器需要给线头和选中圆点留出额外边距。
 const padding = 10
 const containerWidth = computed(() => {
   const width = bounds.value.maxX - bounds.value.minX + padding * 2
-  // 如果宽度太小，设置最小宽度
   return Math.max(width, 20)
 })
 const containerHeight = computed(() => bounds.value.maxY - bounds.value.minY + padding * 2)
-const svgViewBox = computed(() =>
-  `0 0 ${containerWidth.value} ${containerHeight.value}`
-)
+const svgViewBox = computed(() => `0 0 ${containerWidth.value} ${containerHeight.value}`)
 
-// 计算polyline点（相对坐标）
-const linePoints = computed(() => {
-  if (waypoints.value.length === 0) return '0,0 100,100'
-
-  // 创建新数组以避免修改原始数据
-  const adjustedWaypoints = [...waypoints.value];
+// 统一调整折点，保证 polyline、path 和选中态端点使用的是同一套坐标。
+const adjustedWaypoints = computed(() => {
+  if (waypoints.value.length === 0) return []
 
-  // 调整起点位置避免线条穿过菱形
-  if (DIAMOND_MARKER_SHAPES.includes(shapeKey.value) && adjustedWaypoints.length >= 2) {
-    const startPoint = adjustedWaypoints[0];
-    const nextPoint = adjustedWaypoints[1];
+  const nextWaypoints = [...waypoints.value]
 
-    // 计算方向向量
-    const dx = nextPoint.x - startPoint.x;
-    const dy = nextPoint.y - startPoint.y;
-    const length = Math.sqrt(dx * dx + dy * dy);
+  // 调整起点位置，避免菱形起点标记被线条穿过。
+  if (DIAMOND_MARKER_SHAPES.includes(shapeKey.value) && nextWaypoints.length >= 2) {
+    const startPoint = nextWaypoints[0]
+    const nextPoint = nextWaypoints[1]
+    const dx = nextPoint.x - startPoint.x
+    const dy = nextPoint.y - startPoint.y
+    const length = Math.sqrt(dx * dx + dy * dy)
 
     if (length > 0) {
-      // 计算缩短距离，基于菱形的实际高度(6)和宽度(12)
-      // 使用6*2作为缩短距离，确保菱形紧贴元素边缘
-      const shortenDistance = 18;
-      const ratio = shortenDistance / length;
+      const shortenDistance = 18
+      const ratio = shortenDistance / length
 
-      // 调整起点位置
-      adjustedWaypoints[0] = {
+      nextWaypoints[0] = {
         ...startPoint,
         x: startPoint.x + dx * ratio,
         y: startPoint.y + dy * ratio
-      };
+      }
     }
   }
 
-  // 需要特殊终点处理的边类型，避免线条穿过箭头
-  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 (SPECIAL_END_POINT_SHAPES.includes(shapeKey.value) && nextWaypoints.length >= 2) {
+    const endPoint = nextWaypoints[nextWaypoints.length - 1]
+    const prevPoint = nextWaypoints[nextWaypoints.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;
+      const shortenDistance = 14
+      const ratio = shortenDistance / length
 
-      // 调整终点位置，向相反方向移动
-      adjustedWaypoints[adjustedWaypoints.length - 1] = {
+      nextWaypoints[nextWaypoints.length - 1] = {
         ...endPoint,
         x: endPoint.x + dx * ratio,
         y: endPoint.y + dy * ratio
-      };
+      }
     }
   }
 
-  return adjustedWaypoints
-    .map(wp => `${wp.x - bounds.value.minX + padding},${wp.y - bounds.value.minY + padding}`)
-    .join(' ')
+  return nextWaypoints
 })
 
-// 获取shapeKey
-const shapeKey = computed(() => props.shape.shapeKey || '')
-// 获取名称
-const keywords = computed(() => props.shape.keywords || '')
-
-//获取线的名称
-const lineName = computed(() => props.shape.modelName || '')
-
+// 普通边仍保持 polyline 渲染。
+const linePoints = computed(() => {
+  if (adjustedWaypoints.value.length === 0) return '0,0 100,100'
 
-// 样式相关
-const edgeColor = computed(() => {
-  // 选中状态保持黑色
-  if (props.isSelected) {
-    return '#000000'
-  }
-  // 可以根据不同的形状类型返回不同的颜色
-  return '#5E5E5E'
-})
-const strokeWidth = computed(() => {
-  // 选中状态线条加粗
-  if (props.isSelected) {
-    return 2
-  }
-  return props.shape.style?.borderWidth || 1.5
-})
-const strokeDashArray = computed(() => {
-  if (DASHED_EDGE_SHAPES.includes(shapeKey.value)) {
-    return '12,11'; // 虚线样式
-  }
+  return adjustedWaypoints.value
+    .map((wp) => `${wp.x - bounds.value.minX + padding},${wp.y - bounds.value.minY + padding}`)
+    .join(' ')
 })
 
-// 计算文本位置
+// 计算文本位置，优先取中间线段的法线方向。
 const textPosition = computed(() => {
-  if (!waypoints.value || waypoints.value.length === 0) {
-    // 当没有路径点时，返回一个默认位置
-    return { x: 120, y: 40 };
+  if (!adjustedWaypoints.value || adjustedWaypoints.value.length === 0) {
+    return { x: 120, y: 40 }
   }
 
-  if (waypoints.value.length === 1) {
-    // 当只有一个路径点时，使用默认的向上偏移
+  if (adjustedWaypoints.value.length === 1) {
     return {
-      x: waypoints.value[0].x - bounds.value.minX + padding,
-      y: waypoints.value[0].y - bounds.value.minY + padding - 10
-    };
+      x: adjustedWaypoints.value[0].x - bounds.value.minX + padding,
+      y: adjustedWaypoints.value[0].y - bounds.value.minY + padding - 10
+    }
   }
 
-  // 计算线条中点和方向
-  let midPoint, normalVector;
+  let midPoint: { x: number; y: number }
+  let normalVector: { x: number; y: number }
 
-  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];
+  if (adjustedWaypoints.value.length > 2) {
+    const segmentIndex = Math.floor((adjustedWaypoints.value.length - 1) / 2)
+    const p1 = adjustedWaypoints.value[segmentIndex]
+    const p2 = adjustedWaypoints.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);
+    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 = {
         x: -dy / length,
         y: dx / length
-      };
+      }
     } else {
-      // 避免除以零，使用默认向上的向量
-      normalVector = { x: 0, y: -1 };
+      normalVector = { x: 0, y: -1 }
     }
   } else {
-    // 对于两段线，使用两个端点
-    const p1 = waypoints.value[0];
-    const p2 = waypoints.value[1];
+    const p1 = adjustedWaypoints.value[0]
+    const p2 = adjustedWaypoints.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);
+    const dx = p2.x - p1.x
+    const dy = p2.y - p1.y
+    const length = Math.sqrt(dx * dx + dy * dy)
 
-    // 计算单位法线向量
     if (length > 0) {
       normalVector = {
         x: -dy / length,
         y: dx / length
-      };
+      }
     } else {
-      normalVector = { x: 0, y: -1 };
+      normalVector = { x: 0, y: -1 }
     }
   }
 
-  // 计算文本位置：中点加上法线方向的偏移（在线条正上方10px）
-  const offsetDistance = 10;
-  const adjustedX = midPoint.x + normalVector.x * offsetDistance;
-  const adjustedY = midPoint.y + normalVector.y * offsetDistance;
+  const offsetDistance = 10
+  const adjustedX = midPoint.x + normalVector.x * offsetDistance
+  const adjustedY = midPoint.y + normalVector.y * offsetDistance
 
-  // 转换为相对坐标
   return {
     x: adjustedX - bounds.value.minX + padding,
     y: adjustedY - bounds.value.minY + padding
-  };
-});
+  }
+})
+
+const edgeColor = computed(() => {
+  if (props.isSelected) {
+    return '#000000'
+  }
+  return '#5E5E5E'
+})
+
+const strokeWidth = computed(() => {
+  if (props.isSelected) {
+    return 2
+  }
+  return props.shape.style?.borderWidth || 1.5
+})
+
+const strokeDashArray = computed(() => {
+  if (DASHED_EDGE_SHAPES.includes(shapeKey.value)) {
+    return '12,11'
+  }
+})
 
-// 获取起点标记
 const getMarkerStart = () => {
-  // 菱形标记
   if (DIAMOND_MARKER_SHAPES.includes(shapeKey.value)) {
-    return `url(#diamond-${shapeKey.value})`;
+    return `url(#diamond-${shapeKey.value})`
   }
   return ''
 }
 
-// 获取终点标记
 const getMarkerEnd = () => {
-  // 空心箭头
   if (EDGES_WITH_ARROWHEADS.includes(shapeKey.value)) {
-    return `url(#arrowhead-${shapeKey.value})`;
+    return `url(#arrowhead-${shapeKey.value})`
   }
-  // 终点有空心三角形箭头（泛化关系）
-  else if (SPECIAL_END_POINT_SHAPES.includes(shapeKey.value)) {
-    return `url(#diamond-${shapeKey.value})`;
+  if (SPECIAL_END_POINT_SHAPES.includes(shapeKey.value)) {
+    return `url(#diamond-${shapeKey.value})`
   }
   return ''
 }
 
-// 事件处理
 const handleClick = (event: MouseEvent) => {
-  console.log('Edge组件内部捕获到点击事件:', props.shape.id, props.shape.shapeType);
-  // 确保shapeType为edge
+  console.log('Edge组件内部捕获到点击事件:', props.shape.id, props.shape.shapeType)
   const shapeWithCorrectType = {
     ...props.shape,
     shapeType: 'edge' as const
-  };
+  }
   emit('edge-click', shapeWithCorrectType, event)
 }
-
 </script>
 
 <style scoped>
@@ -352,4 +355,4 @@ const handleClick = (event: MouseEvent) => {
 .edge-svg circle {
   pointer-events: none;
 }
-</style>>
+</style>