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

package/src/components/LineStyle/ConnectionLine.vue

@@ -0,0 +1,126 @@
+<template>
+  <!-- 连线SVG组件，用于动态渲染不同样式的连线 -->
+  <svg v-if="showLine" class="connection-line" :style="svgStyle">
+    <!-- 引入线条样式标记组件 -->
+    <LineStyleMarker :shape-key="shapeKey" />
+
+    <!-- 渲染polyline并根据shapeKey应用不同的样式和标记 -->
+    <polyline :points="points" :fill="lineStyle.fill" :stroke="lineStyle.stroke"
+      :stroke-width="String(lineStyle.strokeWidth)" :stroke-linecap="lineStyle.strokeLinecap"
+      :stroke-linejoin="lineStyle.strokeLinejoin" :stroke-dasharray="lineStyle.strokeDasharray"
+      :marker-start="getMarkerStart()" :marker-end="getMarkerEnd()" />
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import LineStyleMarker from './LineStyleMarker.vue';
+import type { CSSProperties } from 'vue';
+import { DASHED_EDGE_SHAPES, EDGES_WITH_ARROWHEADS, DIAMOND_MARKER_SHAPES, EDGE_TYPE } from '../../constants/edgeShapeKeys';
+
+type StrokeLinecap = 'inherit' | 'round' | 'butt' | 'square'
+type StrokeLinejoin = 'inherit' | 'round' | 'miter' | 'bevel'
+export interface LineStyle {
+  stroke: string
+  strokeWidth: number | string
+  strokeLinecap: StrokeLinecap
+  strokeLinejoin: StrokeLinejoin
+  strokeDasharray?: string
+  fill?: string
+}
+
+interface Props {
+  showLine: boolean;
+  points: string;
+  shapeKey?: string;
+  style?: CSSProperties & Partial<LineStyle>
+}
+
+interface Point {
+  x: number;
+  y: number;
+}
+
+const props = defineProps<Props>();
+
+// 默认的线条样式
+const defaultLineStyle: LineStyle = {
+  fill: 'none',
+  stroke: '#5E5E5E',
+  strokeWidth: '1.5',
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+  strokeDasharray: ''
+};
+
+// 解析点字符串为坐标数组
+const parsedPoints = computed((): Point[] => {
+  if (!props.points) return [];
+
+  return props.points.split(' ').map(pointStr => {
+    const [x, y] = pointStr.split(',').map(Number);
+    return { x, y };
+  });
+});
+
+// 根据shapeKey计算线条样式
+const shapeKey = computed(() => props.shapeKey || 'Association');
+
+// 直接使用解析后的点，线条缩短已在Edge.vue中处理
+const points = computed(() => {
+  return parsedPoints.value.map(p => `${p.x},${p.y}`).join(' ');
+});
+
+// 计算最终的线条样式
+const lineStyle = computed<LineStyle>(() => {
+  let style = { ...defaultLineStyle };
+
+  // 根据shapeKey设置虚线样式
+  if (DASHED_EDGE_SHAPES.includes(shapeKey.value)) {
+    style.strokeDasharray = '12,11'; // 虚线样式
+  }
+
+  // 合并用户自定义样式
+  if (props.style) {
+    style = {
+      ...style,
+      ...props.style
+    };
+  }
+
+  return style;
+});
+
+// SVG容器样式
+const svgStyle = computed(() => props.style || {});
+
+// 获取起点标记
+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 (shapeKey.value === 'Generalization') {
+    return `url(#diamond-${shapeKey.value})`;
+  }
+  return '';
+};
+</script>
+
+<style scoped>
+.connection-line {
+  position: absolute;
+  pointer-events: none;
+  z-index: 10;
+}
+</style>

package/src/components/LineStyle/LineStyleMarker.vue

@@ -0,0 +1,87 @@
+<template>
+  <!-- 根据不同的shapeKey动态渲染对应的SVG标记定义 -->
+  <template v-if="shapeKey">
+    <defs>
+      <!-- 定向聚合 - 起点菱形，终点空心箭头 -->
+      <template v-if="shapeKey === EDGE_TYPE.DIRECTED_AGGREGATION">
+        <!-- 终点箭头标记 -->
+        <marker :id="`arrowhead-${shapeKey}`" markerWidth="7" markerHeight="6" refX="7" refY="3" orient="auto">
+          <path d="M0 0 L7 3 L0 6" fill="none" stroke="#5E5E5E" stroke-width="1" stroke-linejoin="round" />
+        </marker>
+        <!-- 起点菱形标记 -->
+        <marker :id="`diamond-${shapeKey}`" markerWidth="12" markerHeight="6" refX="11.8" refY="3" orient="auto"
+          markerUnits="strokeWidth">
+          <polygon points="6 0, 12 3, 6 6, 0 3" fill="none" stroke="#5E5E5E" stroke-width="1" />
+        </marker>
+      </template>
+
+      <!-- 聚合（只有起点菱形，终点无箭头） -->
+      <template v-else-if="shapeKey === EDGE_TYPE.AGGREGATION">
+        <marker :id="`diamond-${shapeKey}`" markerWidth="12" markerHeight="6" refX="11.8" refY="3" orient="auto"
+          markerUnits="strokeWidth">
+          <polygon points="6 0, 12 3, 6 6, 0 3" fill="none" stroke="#5E5E5E" stroke-width="1" />
+        </marker>
+      </template>
+
+      <!-- 泛化 - 空心三角形箭头 -->
+      <template v-else-if="shapeKey === EDGE_TYPE.GENERALIZATION">
+        <marker :id="`diamond-${shapeKey}`" markerWidth="10" markerHeight="7" refX="" refY="3.5" orient="auto">
+          <path d="M0 0 L10 3.5 L0 7 Z" fill="none" stroke="#5E5E5E" stroke-width="1" />
+        </marker>
+      </template>
+
+      <!-- 定向组成 - 起点实心菱形 终端箭头 -->
+      <template v-else-if="shapeKey === EDGE_TYPE.DIRECTED_COMPOSITION">
+        <!-- 箭头 -->
+        <marker :id="`arrowhead-${shapeKey}`" markerWidth="7" markerHeight="6" refX="7" refY="3" orient="auto">
+          <path d="M0 0 L7 3 L0 6" fill="none" stroke="#5E5E5E" stroke-width="1" stroke-linejoin="round" />
+        </marker>
+        <!-- 菱形 -->
+        <marker :id="`diamond-${shapeKey}`" markerWidth="12" markerHeight="6" refX="11.8" refY="3" orient="auto"
+          markerUnits="strokeWidth">
+          <polygon points="6 0, 12 3, 6 6, 0 3" fill="#5E5E5E" stroke="#5E5E5E" stroke-width="1" />
+        </marker>
+      </template>
+
+      <!-- 组成 - 实心菱形 -->
+      <template v-else-if="shapeKey === EDGE_TYPE.COMPOSITION">
+        <marker :id="`diamond-${shapeKey}`" markerWidth="12" markerHeight="6" refX="11.8" refY="3" orient="auto"
+          markerUnits="strokeWidth">
+          <polygon points="6 0, 12 3, 6 6, 0 3" fill="#5E5E5E" stroke="#5E5E5E" stroke-width="1" />
+        </marker>
+      </template>
+
+      <!-- 定向关联 - 带空心箭头终点的实线 -->
+      <template v-else-if="shapeKey === EDGE_TYPE.DIRECTED_ASSOCIATION">
+        <!-- 终点箭头标记 -->
+        <marker :id="`arrowhead-${shapeKey}`" markerWidth="7" markerHeight="6" refX="7" refY="3" orient="auto">
+          <path d="M0 0 L7 3 L0 6" fill="none" stroke="#5E5E5E" stroke-width="1" stroke-linejoin="round" />
+        </marker>
+      </template>
+
+      <!-- 虚线边类型 - 带终端箭头 -->
+      <template v-else-if="DASHED_EDGE_SHAPES.includes(shapeKey)">
+        <!-- 终点箭头标记  -->
+        <marker :id="`arrowhead-${shapeKey}`" markerWidth="7" markerHeight="6" refX="7" refY="3" orient="auto">
+          <path d="M0 0 L7 3 L0 6" fill="none" stroke="#5E5E5E" stroke-width="1" stroke-linejoin="round" />
+        </marker>
+      </template>
+    </defs>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { DASHED_EDGE_SHAPES, EDGE_TYPE } from '../../constants/edgeShapeKeys';
+
+interface Props {
+  shapeKey?: string;
+}
+
+const props = defineProps<Props>();
+
+// 计算当前需要显示的标记类型
+const shapeKey = computed(() => props.shapeKey || EDGE_TYPE.ASSOCIATION);
+</script>
+
+<style scoped></style>

package/src/components/Pin/Pin.vue

@@ -0,0 +1,220 @@
+<template>
+    <div class="output-pin-shape" :style="shapeStyle" @click="onClick">
+      <svg :width="vbW" :height="vbH" :viewBox="`0 0 ${vbW} ${vbH}`" class="output-pin-svg">
+        <!-- 定义渐变（放在defs中） -->
+        <defs>
+          <!-- 水平线性渐变（从左到右） -->
+          <linearGradient :id="`outputPinGradient-${shape.id}`" x1="0%" y1="0%" x2="100%" y2="0%">
+            <!-- 渐变起点（左侧较深）、中间过渡点和终点（右侧较浅） -->
+            <stop offset="0%" :stop-color="gradientLeftColor" />
+            <stop offset="75%" :stop-color="gradientMiddleColor" />
+            <stop offset="100%" :stop-color="gradientRightColor" />
+          </linearGradient>
+        </defs>
+  
+        <!-- 背景矩形 - 使用线性渐变，带圆角 -->
+        <rect 
+          x="0" 
+          y="0" 
+          :width="vbW" 
+          :height="vbH" 
+          :fill="isGhost ? 'transparent' : `url(#outputPinGradient-${shape.id})`" 
+          :stroke="strokeColor" 
+          :stroke-width="strokeWidth"
+          :rx="borderRadius" 
+        />
+        
+        <g v-if="!isGhost">
+          <!-- 箭头：根据 shape.direction 旋转，细线风格 -->
+          <g :transform="arrowTransform" aria-hidden="true">
+            <path
+              :d="arrowPathD"
+              fill="none"
+              stroke="#4a4a4a"
+              stroke-width="0.8"
+              stroke-linejoin="round"
+              stroke-linecap="round"
+              vector-effect="non-scaling-stroke"
+              opacity="0.95"
+            />
+          </g>
+
+          <!-- 名称：优先使用传入的 nameBounds；否则按 direction 自动定位到上/下/左/右 -->
+          <text 
+            v-if="showName && shape.name"
+            :x="namePos.x"
+            :y="namePos.y"
+            :text-anchor="namePos.anchor"
+            :dominant-baseline="namePos.baseline"
+            :font-family="nameStyle.fontFamily || '思源黑体'"
+            :font-size="nameFontSize"
+            :font-weight="nameStyle.fontWeight || 'normal'" 
+            :fill="nameStyle.color || '#000000'"
+          >
+            {{ shape.name }}
+          </text>
+        </g>
+      </svg>
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  import { computed, type CSSProperties } from 'vue'
+  import type { Shape } from '../../types'
+  // 引入颜色处理工具函数
+  import { adjustColorLightness } from '../../utils/colorUtils'
+  
+  // Props
+  interface Props {
+    shape: Shape
+  }
+  const emit = defineEmits<{
+    (e: 'shape-click', shape: Shape, event: MouseEvent): void
+    (e: 'keywords-click', shape: Shape, event: MouseEvent): void
+    (e: 'name-click', shape: Shape, event: MouseEvent): void
+  }>()
+  const props = defineProps<Props>()
+  
+  // 交互层在拖拽/缩放时会给 shape.meta.isGhost = true
+  const isGhost = computed(() => (props.shape as any).meta?.isGhost)
+  
+  // 轮廓颜色（边框颜色）
+  const strokeColor = computed(() =>
+    props.shape.style?.borderColor ?? '#8a6d3b'
+  )
+  
+  // 轮廓线宽
+  const strokeWidth = computed(() =>
+    isGhost.value ? 4 : (props.shape.style?.borderWidth ?? 0.5)
+  )
+  
+  
+  // 圆角半径
+  const borderRadius = computed(() =>
+    props.shape.style?.borderRadius ?? 2
+  )
+  
+  // 基础颜色（带默认值，使用浅色）
+  const baseColor = computed(() => 
+    props.shape.keywordsStyle?.backgroundColor || props.shape.style?.backgroundColor || '#E8F5E9'
+  )
+  
+  // 左侧渐变颜色-初始值
+  const gradientLeftColor = computed(() => {
+    return baseColor.value
+  })
+  
+  // 中间过渡颜色（浅）
+  const gradientMiddleColor = computed(() => {
+    return adjustColorLightness(baseColor.value, 15)
+  })
+  
+  // 右侧渐变颜色（较浅）
+  const gradientRightColor = computed(() => {
+    // 提高明度，使颜色更浅
+    return adjustColorLightness(baseColor.value, 25)
+  })
+  
+  // 获取 nameBounds 和 nameStyle
+  const nameBoundsProp = computed(() => props.shape.nameBounds || undefined)
+  const nameStyle = computed(() => props.shape.nameStyle || {})
+  const showName = computed(() => props.shape.showName !== false)
+  
+  // 根据 shape 的 bounds 生成样式
+  const shapeStyle = computed<CSSProperties>(() => {
+    const { bounds, style } = props.shape
+    return {
+      width: `${bounds.width || 100}px`,
+      height: `${bounds.height || 40}px`,
+      zIndex: (style?.zIndex as number) ?? 0,
+    }
+  })
+  
+  const onClick = (e: MouseEvent) => {
+    emit('shape-click', props.shape, e)
+  }
+  
+  const vbW = computed(() => props.shape.bounds.width || 100)
+  const vbH = computed(() => props.shape.bounds.height || 40)
+
+  // 名称字号
+  const nameFontSize = computed(() => {
+    const nb: any = nameBoundsProp.value || {}
+    return nameStyle.value.fontSize || nb.height || 10
+  })
+
+  // 名称位置：优先 nameBounds，否则按 direction 自动计算
+  const namePos = computed(() => {
+    const nb: any = nameBoundsProp.value
+    if (nb && (nb.x != null) && (nb.y != null)) {
+      return {
+        x: nb.x,
+        y: nb.y,
+        anchor: (nameStyle.value.textAnchor as any) || 'middle',
+        baseline: (nameStyle.value.dominantBaseline as any) || 'auto',
+      }
+    }
+    const pad = 4
+    const dir = (props.shape.direction as any) || 'right'
+    const W = vbW.value
+    const H = vbH.value
+    const fs = Number(nameFontSize.value) || 10
+    // 默认：水平文字，不旋转
+    if (dir === 'up') {
+      return { x: W / 2, y: pad + fs, anchor: 'middle', baseline: 'alphabetic' }
+    }
+    if (dir === 'down') {
+      return { x: W / 2, y: H - pad, anchor: 'middle', baseline: 'alphabetic' }
+    }
+    if (dir === 'left') {
+      return { x: pad, y: H / 2, anchor: 'start', baseline: 'middle' }
+    }
+    // right
+    return { x: W - pad, y: H / 2, anchor: 'end', baseline: 'middle' }
+  })
+
+  // 细线箭头路径（默认朝上）：竖直主干 + 两条箭头边
+  const arrowPathD = computed(() => {
+    const W = vbW.value
+    const H = vbH.value
+    const cx = W / 2
+    const topY = H * 0.18
+    const bottomY = H * 0.82
+    const headH = Math.max(4, H * 0.14)
+    const headW = Math.max(6, W * 0.28)
+
+    const leftHeadX = cx - headW / 2
+    const rightHeadX = cx + headW / 2
+
+    // M 主干底 -> 主干顶; 顶点分叉到左右
+    return `M ${cx},${bottomY} L ${cx},${topY} M ${cx},${topY} L ${leftHeadX},${topY + headH} M ${cx},${topY} L ${rightHeadX},${topY + headH}`
+  })
+
+  // 旋转以匹配 direction: up/right/down/left（默认 right）
+  const arrowTransform = computed(() => {
+    const dir = (props.shape.direction as any) || 'right'
+    const W = vbW.value
+    const H = vbH.value
+    const cx = W / 2
+    const cy = H / 2
+    const angleMap: Record<string, number> = { up: 0, right: 90, down: 180, left: -90 }
+    const angle = angleMap[dir] ?? 0
+    return `rotate(${angle} ${cx} ${cy})`
+  })
+  </script>
+  
+  <style scoped>
+  .output-pin-shape {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /* 允许名称绘制到 Pin 外部 */
+    overflow: visible;
+  }
+  
+  .output-pin-svg {
+    display: block;
+    overflow: visible; /* 允许 svg 内容溢出显示（用于上下左右外侧的名称） */
+  }
+  </style>
+  

package/src/components/Pin/Port.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="port-shape" :style="shapeStyle" @click="onClick">
+    <svg :width="vbW" :height="vbH" :viewBox="`0 0 ${vbW} ${vbH}`" class="port-svg">
+      <!-- 定义渐变（放在defs中） -->
+      <defs>
+        <!-- 水平线性渐变（从左到右） -->
+        <linearGradient :id="`portGradient-${shape.id}`" x1="0%" y1="0%" x2="100%" y2="0%">
+          <!-- 渐变起点（左侧较深）、中间过渡点和终点（右侧较浅） -->
+          <stop offset="0%" :stop-color="gradientLeftColor" />
+          <stop offset="75%" :stop-color="gradientMiddleColor" />
+          <stop offset="100%" :stop-color="gradientRightColor" />
+        </linearGradient>
+      </defs>
+
+      <!-- 背景矩形 - 使用线性渐变，带圆角 -->
+      <rect 
+        x="0" 
+        y="0" 
+        :width="vbW" 
+        :height="vbH" 
+        :fill="isGhost ? 'transparent' : `url(#portGradient-${shape.id})`" 
+        :stroke="strokeColor" 
+        :stroke-width="strokeWidth"
+        :rx="borderRadius" 
+      />
+      
+      <g v-if="!isGhost">
+        <!-- 名称：优先使用传入的 nameBounds；否则按 direction 自动定位到上/下/左/右 -->
+        <text 
+          v-if="showName && shape.name"
+          :x="namePos.x"
+          :y="namePos.y"
+          :text-anchor="namePos.anchor"
+          :dominant-baseline="namePos.baseline"
+          :font-family="nameStyle.fontFamily || '思源黑体'"
+          :font-size="nameFontSize"
+          :font-weight="nameStyle.fontWeight || 'normal'" 
+          :fill="nameStyle.color || '#000000'"
+        >
+          {{ shape.name }}
+        </text>
+      </g>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, type CSSProperties } from 'vue'
+import type { Shape } from '../../types'
+// 引入颜色处理工具函数
+import { adjustColorLightness } from '../../utils/colorUtils'
+
+// Props
+interface Props {
+  shape: Shape
+}
+const emit = defineEmits<{
+  (e: 'shape-click', shape: Shape, event: MouseEvent): void
+  (e: 'name-click', shape: Shape, event: MouseEvent): void
+}>()
+const props = defineProps<Props>()
+
+// 交互层在拖拽/缩放时会给 shape.meta.isGhost = true
+const isGhost = computed(() => (props.shape as any).meta?.isGhost)
+
+// 轮廓颜色（边框颜色）- 默认黑色
+const strokeColor = computed(() =>
+  props.shape.style?.borderColor ?? '#000000'
+)
+
+// 轮廓线宽
+const strokeWidth = computed(() =>
+  isGhost.value ? 4 : (props.shape.style?.borderWidth ?? 1)
+)
+
+// 圆角半径
+const borderRadius = computed(() =>
+  props.shape.style?.borderRadius ?? 0
+)
+
+// 是否为 OperationalPort
+const isOperationalPort = computed(() => props.shape.shapeKey === 'OperationalPort')
+
+// 基础颜色（可被样式覆盖；OperationalPort 默认淡紫色）
+const baseColor = computed(() => {
+  const explicit = props.shape.keywordsStyle?.backgroundColor || props.shape.style?.backgroundColor
+  if (explicit) return explicit
+  return isOperationalPort.value ? '#D9D2FF' : '#FFFFFF' // OperationalPort 用淡紫色
+})
+
+// 左侧渐变颜色-初始值
+const gradientLeftColor = computed(() => baseColor.value)
+
+// 中间过渡颜色（更柔和的渐变）
+const gradientMiddleColor = computed(() => adjustColorLightness(baseColor.value, 8))
+
+// 右侧渐变颜色（较浅）
+const gradientRightColor = computed(() => adjustColorLightness(baseColor.value, 14))
+
+// 获取 nameBounds 和 nameStyle
+const nameBoundsProp = computed(() => props.shape.nameBounds || undefined)
+const nameStyle = computed(() => props.shape.nameStyle || {})
+const showName = computed(() => props.shape.showName !== false)
+
+// 根据 shape 的 bounds 生成样式
+const shapeStyle = computed<CSSProperties>(() => {
+  const { bounds, style } = props.shape
+  return {
+    width: `${bounds?.width || 20}px`,
+    height: `${bounds?.height || 20}px`,
+    zIndex: (style?.zIndex as number) ?? 0,
+  }
+})
+
+const onClick = (e: MouseEvent) => {
+  emit('shape-click', props.shape, e)
+}
+
+const vbW = computed(() => props.shape.bounds?.width || 20)
+const vbH = computed(() => props.shape.bounds?.height || 20)
+
+// 名称字号
+const nameFontSize = computed(() => {
+  const nb: any = nameBoundsProp.value || {}
+  return nameStyle.value.fontSize || nb.height || 10
+})
+
+// 名称位置：优先 nameBounds，否则按 direction 自动计算
+const namePos = computed(() => {
+  const nb: any = nameBoundsProp.value
+  if (nb && (nb.x != null) && (nb.y != null)) {
+    return {
+      x: nb.x,
+      y: nb.y,
+      anchor: (nameStyle.value.textAnchor as any) || 'middle',
+      baseline: (nameStyle.value.dominantBaseline as any) || 'auto',
+    }
+  }
+  const pad = 4
+  const dir = (props.shape.direction as any) || 'right'
+  const W = vbW.value
+  const H = vbH.value
+  const fs = Number(nameFontSize.value) || 10
+  // 默认：水平文字，不旋转
+  if (dir === 'up') {
+    return { x: W / 2, y: -pad, anchor: 'middle', baseline: 'alphabetic' } // 向上偏移
+  }
+  if (dir === 'down') {
+    return { x: W / 2, y: H + fs + pad, anchor: 'middle', baseline: 'alphabetic' } // 向下偏移
+  }
+  if (dir === 'left') {
+    return { x: -pad, y: H / 2, anchor: 'end', baseline: 'middle' } // 向左偏移
+  }
+  // right
+  return { x: W + pad, y: H / 2, anchor: 'start', baseline: 'middle' } // 向右偏移
+})
+</script>
+
+<style scoped>
+.port-shape {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* 允许名称绘制到 Port 外部 */
+  overflow: visible;
+}
+
+.port-svg {
+  display: block;
+  overflow: visible; /* 允许 svg 内容溢出显示（用于上下左右外侧的名称） */
+}
+</style>