@mx-sose-front/mx-sose-graph 1.0.0

package/src/components/Edge/Edge.vue

@@ -0,0 +1,366 @@
+<template>
+  <div class="edge-component" :style="{
+    pointerEvents: 'all',
+    cursor: 'pointer'
+  }" @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()" />      
+      
+      <!-- 选中状态显示端点黑色圆圈 -->
+      <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" />
+      </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;">
+        {{ 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;">
+        {{ 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;">
+        {{ keywords }}
+      </text>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+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'
+
+// Props
+interface Props {
+  shape: Shape
+  isSelected?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isSelected: false
+})
+
+// Events
+const emit = defineEmits<{
+  'edge-click': [shape: Shape, event: MouseEvent]
+}>()
+
+// 解析waypoints
+const waypoints = computed(() => {
+  if (!props.shape.waypointId) return []
+
+  if (typeof props.shape.waypointId === 'string') {
+    try {
+      return JSON.parse(props.shape.waypointId) as Waypoint[]
+    } catch (error) {
+      console.error('解析waypointId失败:', error)
+      return []
+    }
+  }
+
+  if (Array.isArray(props.shape.waypointId)) {
+    return props.shape.waypointId as Waypoint[]
+  }
+
+  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)
+
+  return {
+    minX: Math.min(...xs),
+    maxX: Math.max(...xs),
+    minY: Math.min(...ys),
+    maxY: Math.max(...ys)
+  }
+})
+
+// 计算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}`
+)
+
+// 计算polyline点（相对坐标）
+const linePoints = computed(() => {
+  if (waypoints.value.length === 0) return '0,0 100,100'
+
+  // 创建新数组以避免修改原始数据
+  const adjustedWaypoints = [...waypoints.value];
+
+  // 调整起点位置避免线条穿过菱形
+  if (DIAMOND_MARKER_SHAPES.includes(shapeKey.value) && adjustedWaypoints.length >= 2) {
+    const startPoint = adjustedWaypoints[0];
+    const nextPoint = adjustedWaypoints[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;
+
+      // 调整起点位置
+      adjustedWaypoints[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 (length > 0) {
+      // 计算缩短距离
+      const shortenDistance = 14;
+      const ratio = shortenDistance / length;
+      
+      // 调整终点位置，向相反方向移动
+      adjustedWaypoints[adjustedWaypoints.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(' ')
+})
+
+// 获取shapeKey
+const shapeKey = computed(() => props.shape.shapeKey || '')
+// 获取名称
+const keywords = computed(() => props.shape.keywords || '')
+
+//获取线的名称
+const lineName = computed(()=>props.shape.modelName || '')
+
+
+// 样式相关
+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 textPosition = computed(() => {
+  if (!waypoints.value || waypoints.value.length === 0) {
+    // 当没有路径点时，返回一个默认位置
+    return { x: 120, y: 40 };
+  }
+  
+  if (waypoints.value.length === 1) {
+    // 当只有一个路径点时，使用默认的向上偏移
+    return {
+      x: waypoints.value[0].x - bounds.value.minX + padding,
+      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 = {
+        x: -dy / length,
+        y: dx / length
+      };
+    } else {
+      // 避免除以零，使用默认向上的向量
+      normalVector = { x: 0, y: -1 };
+    }
+  } else {
+    // 对于两段线，使用两个端点
+    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 = {
+        x: -dy / length,
+        y: dx / length
+      };
+    } else {
+      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,
+    y: adjustedY - bounds.value.minY + padding
+  };
+});
+
+// 获取起点标记
+const getMarkerStart = () => {
+  // 菱形标记
+  if (DIAMOND_MARKER_SHAPES.includes(shapeKey.value)) {
+    return `url(#diamond-${shapeKey.value})`;
+  }
+  return ''
+}
+
+// 获取终点标记
+const getMarkerEnd = () => {
+  // 空心箭头
+  if (EDGES_WITH_ARROWHEADS.includes(shapeKey.value)) {
+    return `url(#arrowhead-${shapeKey.value})`;
+  }
+  // 终点有空心三角形箭头（泛化关系）
+  else 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
+  const shapeWithCorrectType = {
+    ...props.shape,
+    shapeType: 'edge' as const
+  };
+  emit('edge-click', shapeWithCorrectType, event)
+}
+</script>
+
+<style scoped>
+.edge-component {
+  position: absolute;
+  pointer-events: all;
+  cursor: pointer;
+}
+
+.edge-svg {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.edge-svg polyline {
+  pointer-events: all;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.edge-svg circle {
+  pointer-events: none;
+}
+</style>>