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

package/src/components/Shape/DogEar.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="capability-shape" :style="shapeStyle" @click="onClick">
+    <svg :width="vbW" :height="vbH" :viewBox="`0 0 ${vbW} ${vbH}`" class="capability-svg">
+      <!-- 定义渐变 -->
+      <defs>
+        <!-- 水平线性渐变 -->
+        <linearGradient  :id="`horizontalGradient-${shape.id}`" x1="0%" y1="0%" x2="100%" y2="0%">
+          <stop offset="0%" :stop-color="gradientLeftColor" />
+          <stop offset="100%" :stop-color="gradientRightColor" />
+        </linearGradient>
+        
+        <!-- 折叠角的渐变（稍暗一些，增强折叠感） -->
+        <linearGradient :id="`foldGradient-${shape.id}`" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" :stop-color="foldColor1" />
+          <stop offset="100%" :stop-color="foldColor2" />
+        </linearGradient>
+      </defs>
+
+      <!-- 带右上角折叠效果的形状 - 使用path绘制 -->
+      <path 
+        :d="shapePath" 
+        :fill="isGhost ? 'transparent' : `url(#horizontalGradient-${shape.id})`" 
+        :stroke="strokeColor" 
+        :stroke-width="strokeWidth"
+      />
+      
+      <!-- 折叠部分的阴影效果 -->
+      <path 
+        v-if="!isGhost"
+        :d="foldPath" 
+        fill="url(#foldGradient-${shape.id})" 
+        :stroke="strokeColor" 
+        :stroke-width="strokeWidth / 2"
+      />
+
+      <g v-if="!isGhost">
+        <!-- 文本内容 - 下移contentOffset -->
+        <text :x="keywordsBounds.x || 5" :y="(keywordsBounds.y || 20) + contentOffset" text-anchor="start"
+          :font-family="keywordsStyle.fontFamily || '思源黑体'"
+          :font-size="keywordsStyle.fontSize || keywordsBounds.height || 8"
+          :font-weight="keywordsStyle.fontWeight || 'normal'" :fill="keywordsStyle.color || '#000000'">
+          {{ shape.keywords }}
+        </text>
+
+        <text :x="nameBounds.x || '50%'" :y="(nameBounds.y || 45) + contentOffset" text-anchor="middle"
+          :font-family="nameStyle.fontFamily || '思源黑体'" :font-size="nameStyle.fontSize || nameBounds.height || 12"
+          :font-weight="nameStyle.fontWeight || 'bold'" :fill="nameStyle.color || '#000000'" style="cursor: pointer;">
+          {{ shape.name }}
+        </text>
+
+        <!-- 图标图片 - 下移contentOffset并调整水平位置 -->
+        <image v-if="showIcon" :x="vbW - 30" :y="5 + contentOffset" width="20" height="20" :href="getIcon('childIcons', shape.icon || '')" />
+      </g>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, watch, nextTick, type CSSProperties } from 'vue'
+import type { Shape } from '../../types'
+import { getIcon } from "../../utils/iconLoader";
+// 引入graphStore来更新shapes中的bounds值
+import { useGraphStore } from '../../store/graphStore'
+
+// 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>()
+
+// 获取graphStore实例
+const graphStore = useGraphStore()
+
+// 交互层在拖拽/缩放时会给 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 fillColor = computed(() =>
+  isGhost.value ? 'transparent' : (props.shape.keywordsStyle?.backgroundColor || '#9CCC65')
+)
+
+// 渐变颜色
+const gradientLeftColor = computed(() =>
+  props.shape.keywordsStyle?.gradientLeftColor || '#9CCC65'
+)
+
+const gradientRightColor = computed(() =>
+  props.shape.keywordsStyle?.gradientRightColor || '#7CB342'
+)
+
+// 折叠角的颜色（稍暗一些，增强立体感）
+const foldColor1 = computed(() => {
+  // 从主色生成稍暗的颜色用于折叠角
+  const color = gradientRightColor.value || '#7CB342';
+  return shadeColor(color, -20); // 调暗20%
+})
+
+const foldColor2 = computed(() => {
+  // 从主色生成更暗的颜色用于折叠角
+  const color = gradientRightColor.value || '#7CB342';
+  return shadeColor(color, -40); // 调暗40%
+})
+
+// 辅助函数：调整颜色明暗度
+function shadeColor(color: string, percent: number) {
+  let R = parseInt(color.substring(1, 3), 16);
+  let G = parseInt(color.substring(3, 5), 16);
+  let B = parseInt(color.substring(5, 7), 16);
+
+  R = Math.floor(R * (100 + percent) / 100);
+  G = Math.floor(G * (100 + percent) / 100);
+  B = Math.floor(B * (100 + percent) / 100);
+
+  R = (R < 255) ? R : 255;
+  G = (G < 255) ? G : 255;
+  B = (B < 255) ? B : 255;
+
+  R = Math.round(R);
+  G = Math.round(G);
+  B = Math.round(B);
+
+  const RR = ((R.toString(16).length === 1) ? "0" + R.toString(16) : R.toString(16));
+  const GG = ((G.toString(16).length === 1) ? "0" + G.toString(16) : G.toString(16));
+  const BB = ((B.toString(16).length === 1) ? "0" + B.toString(16) : B.toString(16));
+
+  return `#${RR}${GG}${BB}`;
+}
+
+// 折叠角的大小，占宽度的15%
+const foldSize = computed(() => Math.max(10, (props.shape.bounds.width || 100) * 0.15));
+
+// 内容偏移量，让内容区低于折叠角
+const contentOffset = computed(() => foldSize.value * 0.7); // 折叠角大小的70%作为偏移量
+
+// 计算带折叠角的路径
+const shapePath = computed(() => {
+  const w = props.shape.bounds.width || 100;
+  const h = props.shape.bounds.height || 40;
+  const fs = foldSize.value;
+  
+  // SVG路径命令：M=移动到，L=直线到，Z=闭合路径
+  return `M0,0 
+          L${w - fs},0 
+          L${w},${fs} 
+          L${w},${h} 
+          L0,${h} 
+          Z`;
+});
+
+// 折叠部分的路径（用于阴影效果）
+const foldPath = computed(() => {
+  const w = props.shape.bounds.width || 100;
+  const fs = foldSize.value;
+  
+  return `M${w - fs},0 
+          L${w},${fs} 
+          L${w - fs},${fs} 
+          Z`;
+});
+
+// 根据 shape 的 bounds 生成样式
+const shapeStyle = computed<CSSProperties>(() => {
+  const { bounds } = props.shape;
+  return {
+    width: `${bounds.width || 100}px`,
+    height: `${bounds.height || 40}px`
+  }
+});
+
+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);
+
+// 获取 keywordsBounds 和 nameBounds
+const keywordsBounds = computed(() => props.shape.keywordsBounds || {});
+const nameBounds = computed(() => props.shape.nameBounds || {});
+
+// 获取 keywordsStyle 和 nameStyle
+const keywordsStyle = computed(() => props.shape.keywordsStyle || {})
+const nameStyle = computed(() => props.shape.nameStyle || {})
+const showIcon = computed(() => props.shape.showIcon || false);
+
+// 监听name变化时重新选择图元
+watch(() => props.shape.name, () => {
+  // 只有当当前图元被选中时，才执行清空选择并重新选择的操作
+  if (graphStore.selectedShape?.id === props.shape.id) {
+    graphStore.clearSelection();
+    nextTick(() => {
+      graphStore.selectShape(props.shape);
+    });
+  }
+});
+</script>
+
+<style scoped>
+.capability-shape {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.capability-svg {
+  display: block;
+}
+</style>

package/src/components/Shape/Package.vue

@@ -0,0 +1,340 @@
+<template>
+  <div class="capability-shape" :style="shapeStyle" @click="onClick">
+    <svg :width="vbW" :height="vbH" :viewBox="`0 0 ${vbW} ${vbH}`" class="capability-svg">
+      <!-- 渐变/阴影定义 -->
+      <defs>
+        <!-- 主渐变 -->
+        <linearGradient :id="`mainGradient-${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>
+        <!-- 盖子渐变（略深） -->
+        <linearGradient :id="`topGradient-${shape.id}`" x1="0%" y1="0%" x2="100%" y2="0%">
+          <stop offset="0%" :stop-color="topGradientLeftColor" />
+          <stop offset="75%" :stop-color="topGradientMiddleColor" />
+          <stop offset="100%" :stop-color="topGradientRightColor" />
+        </linearGradient>
+
+        <!-- 柔和投影，与Block组件保持一致 -->
+        <filter :id="`softShadow-${shape.id}`" x="-10%" y="-10%" width="120%" height="120%">
+          <feDropShadow dx="2" dy="2" stdDeviation="1" flood-color="#000000" flood-opacity="0.2" />
+        </filter>
+      </defs>
+
+      <!-- 阴影：放在最底层（预览态也给阴影可选，默认给实物态） -->
+      <g v-if="!isGhost" :filter="`url(#softShadow-${shape.id})`">
+        <path
+          :d="`M${strokeWidth / 2},${strokeWidth / 2} H${topPartWidthInt - strokeWidth / 2} V${topPartHeightInt - strokeWidth / 2} H${vbW - strokeWidth / 2} V${vbH - strokeWidth / 2} H${strokeWidth / 2} Z`"
+          fill="#000" opacity="0.0" /> <!-- 仅作为载体，透明填充让投影生效 -->
+      </g>
+
+      <!-- 主体形状：无描边，只负责填充 -->
+      <path :d="`M0,${topPartHeightInt} H${vbW} V${vbH} H0 Z`"
+        :fill="isGhost ? 'transparent' : `url(#mainGradient-${shape.id})`"></path>
+
+      <!-- 盖子：无描边，只负责填充 -->
+      <path :d="`M0,0 H${topPartWidthInt} V${topPartHeightInt} H0 Z`"
+        :fill="isGhost ? 'transparent' : `url(#topGradient-${shape.id})`"></path>
+
+      <!-- 轮廓路径：优化描边渲染，确保所有边框宽度一致 -->
+      <path
+        :d="`M${strokeWidth / 2},${strokeWidth / 2} H${topPartWidthInt - strokeWidth / 2} V${topPartHeightInt - strokeWidth / 2} H${vbW - strokeWidth / 2} V${vbH - strokeWidth / 2} H${strokeWidth / 2} Z`"
+        fill="none" :stroke="strokeColor" :stroke-width="strokeWidth" stroke-linejoin="round" rx="2"></path>
+
+      <!-- 分隔线已移除，通过盖子和主体的描边自然形成 -->
+
+      <!-- 文本/图标：预览态不渲染 -->
+      <g v-if="!isGhost">
+        <text :x="keywordsBounds.x || 5" :y="(keywordsBounds.y || 20) + topPartHeightInt" text-anchor="start"
+          :font-family="keywordsStyle.fontFamily || '思源黑体'"
+          :font-size="keywordsStyle.fontSize || keywordsBounds.height || 8"
+          :font-weight="keywordsStyle.fontWeight || 'normal'" :fill="keywordsStyle.color || '#000000'">
+          {{ shape.keywords }}
+        </text>
+
+        <text :x="nameBounds.x || '50%'" :y="((nameBounds.y || 45) - topPartHeight) + topPartHeightInt"
+          text-anchor="middle" :font-family="nameStyle.fontFamily || '思源黑体'"
+          :font-size="nameStyle.fontSize || nameBounds.height || 12" :font-weight="nameStyle.fontWeight || 'bold'"
+          :fill="nameStyle.color || '#000000'" style="cursor: pointer;">
+          {{ shape.name }}
+        </text>
+
+        <image v-if="showIcon" :x="vbW - 30" :y="23" width="20" height="20"
+          :href="getIcon('childIcons', shape.icon || '')" />
+      </g>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, watch, onMounted, ref, onUnmounted, type CSSProperties } from 'vue'
+import type { Shape } from '../../types'
+import { getIcon } from "../../utils/iconLoader";
+// 引入颜色处理工具函数
+import { adjustColorLightness } from '../../utils/colorUtils'
+// 引入graphStore来更新shapes中的bounds值
+import { useGraphStore } from '../../store/graphStore'
+// 引入事件总线来监听缩放状态
+import { eventBus } from '../../store/eventBus';
+
+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>()
+
+// 获取graphStore实例
+const graphStore = useGraphStore()
+
+// 预览态（交互层会写 meta.isGhost）
+const isGhost = computed(() => (props.shape as any).meta?.isGhost)
+//跟踪name是否被修改过
+const nameDirty = ref(false)
+// 统一线宽：拖拽预览 4，其它从props中获取或使用默认值0.5（与Block组件保持一致）
+const strokeWidth = computed(() =>
+  isGhost.value ? 4 : (props.shape.style?.borderWidth ?? 0.5)
+)
+
+// 颜色
+// 轮廓颜色（边框颜色）
+const strokeColor = computed(() =>
+  props.shape.style?.borderColor ?? '#8a6d3b'
+)
+
+// 基础颜色（带默认值）
+const baseColor = computed(() =>
+  props.shape.keywordsStyle?.backgroundColor || '#C7D7FF'
+)
+
+// 渐变色
+// 主体渐变颜色
+const gradientLeftColor = computed(() => {
+  return baseColor.value
+})
+
+const gradientMiddleColor = computed(() => {
+  return adjustColorLightness(baseColor.value, 14)
+})
+
+const gradientRightColor = computed(() => {
+  return adjustColorLightness(baseColor.value, 22)
+})
+
+// 盖子渐变颜色
+const topGradientLeftColor = computed(() => {
+  return adjustColorLightness(baseColor.value, -8)
+})
+
+const topGradientMiddleColor = computed(() => {
+  return adjustColorLightness(baseColor.value, 4)
+})
+
+const topGradientRightColor = computed(() => {
+  return adjustColorLightness(baseColor.value, 10)
+})
+
+// 文本与图标
+const keywordsBounds = computed(() => props.shape.keywordsBounds || {})
+const nameBounds = computed(() => props.shape.nameBounds || {})
+const keywordsStyle = computed(() => props.shape.keywordsStyle || {})
+const nameStyle = computed(() => props.shape.nameStyle || {})
+const showIcon = computed(() => props.shape.showIcon || false)
+const iconYPosition = computed(() => (keywordsBounds.value.y || 20) + topPartHeightInt.value - 8)
+
+// 盖子高度固定为18像素，确保图形大小变化时盖子高度不变
+const topPartHeight = computed(() => {
+  return 18 // 固定高度值
+})
+const topPartHeightInt = computed(() => topPartHeight.value)
+
+// 计算基于文本内容的最小宽度
+const textBasedMinWidth = computed(() => {
+  // 获取字体大小
+  const nameFontSize = nameStyle.value.fontSize || nameBounds.value.height || 12;
+  const keywordsFontSize = keywordsStyle.value.fontSize || keywordsBounds.value.height || 8;
+  // 假设每个字符的平均宽度是字体大小的1倍
+  const nameCharWidth = nameFontSize * 1;
+  const keywordsCharWidth = keywordsFontSize * 1;
+
+  // 计算名称文本的宽度
+  const nameTextWidth = (props.shape.name?.length || 0) * nameCharWidth;
+  // 计算关键词文本的宽度
+  const keywordsTextWidth = (props.shape.keywords?.length || 0) * keywordsCharWidth;
+
+  // 返回较大的宽度，并添加一些边距
+  const maxTextWidth = Math.max(nameTextWidth, keywordsTextWidth);
+  return maxTextWidth + 60; // 左右各10px边距
+});
+
+// 计算基于盖子宽度的最小宽度
+const topPartMinWidth = computed(() => {
+  // 使用当前bounds宽度的40%作为盖子宽度的参考
+  const currentWidth = props.shape.bounds?.width || 240;
+  const topWidth = Math.round(currentWidth * 0.4);
+  return topWidth + 40;
+});
+
+// 最终的最小宽度
+const estimatedTextWidth = computed(() => {
+  return Math.max(textBasedMinWidth.value, topPartMinWidth.value);
+});
+
+// 尺寸 - 确保宽度和高度独立计算，不会相互影响
+const vbW = computed(() => Math.round(Math.max(estimatedTextWidth.value, props.shape.bounds.width || 240)))
+const vbH = computed(() => Math.round(props.shape.bounds.height || 120))
+
+// 盖子宽度计算 - 使用vbW而不是反向依赖
+const topPartWidth = computed(() => Math.round(vbW.value * 0.4)) // 增加横条长度，从0.26调整为0.4
+const topPartWidthInt = computed(() => topPartWidth.value)
+
+// 更新图元的bounds宽度
+const updateShapeBounds = async () => {
+  await nextTick();
+
+  const requiredWidth = estimatedTextWidth.value;
+  const currentWidth = props.shape.bounds?.width || 240;
+  const originalHeight = props.shape.bounds?.height || 120;
+
+  // 只有当文本所需宽度大于当前宽度时才更新
+  if (requiredWidth > currentWidth) {
+    graphStore.updateShape(props.shape.id, {
+      bounds: {
+        ...props.shape.bounds,
+        width: requiredWidth,
+        // 明确保留原始高度，确保不会等比例缩放
+        height: originalHeight
+      }
+    });
+  }
+};
+
+// 监听name变化时更新宽度并重新选择图元
+watch(() => props.shape.name, () => {
+  updateShapeBounds();
+  // 只有当当前图元被选中时，才执行清空选择并重新选择的操作
+  if (graphStore.selectedShape?.id === props.shape.id) {
+    graphStore.clearSelection();
+    nextTick(() => {
+      graphStore.selectShape(props.shape);
+    });
+  }
+});
+// 监听keywords变化时更新宽度
+watch(() => props.shape.keywords, () => {
+  updateShapeBounds();
+});
+
+// 监听字体样式变化时更新宽度
+watch(() => [nameStyle.value.fontSize, nameBounds.value.height, keywordsStyle.value.fontSize], () => {
+  updateShapeBounds();
+}, { deep: true });
+
+// 监听bounds变化（如缩放操作后），确保宽度始终满足文本显示需求
+watch(() => props.shape.bounds?.width, (newWidth) => {
+  if (newWidth !== undefined) {
+    updateShapeBounds();
+  }
+});
+
+// 卡片容器样式（保留你的 zIndex）
+const shapeStyle = computed<CSSProperties>(() => {
+  const { bounds, style } = props.shape
+  // 直接使用props中的bounds，确保宽度和高度完全独立
+  const width = Math.max(estimatedTextWidth.value, props.shape.bounds?.width || 240);
+  const height = props.shape.bounds?.height || 120;
+
+  return {
+    width: `${width}px`,
+    height: `${height}px`,
+    zIndex: (style?.zIndex as number) ?? 0,
+  }
+})
+
+const onClick = (e: MouseEvent) => emit('shape-click', props.shape, e)
+// 跟踪缩放状态
+const isResizing = ref(false);
+
+// 定义事件处理函数
+const handleResizeStart = () => {
+  isResizing.value = true;
+};
+
+const handleResizeEnd = () => {
+  isResizing.value = false;
+};
+
+// 组件挂载时绑定事件监听
+onMounted(() => {
+  updateShapeBounds();
+  
+  // 监听缩放开始和结束事件
+  eventBus.on('resize-start', handleResizeStart);
+  eventBus.on('resize-end', handleResizeEnd);
+});
+
+// 组件卸载时清理事件监听
+onUnmounted(() => {
+  eventBus.off('resize-start', handleResizeStart);
+  eventBus.off('resize-end', handleResizeEnd);
+});
+// ================== 监听 bounds 宽高变化 ==================
+
+// 原始宽高（150 x 85）
+const DEFAULT_WIDTH = 150
+const DEFAULT_HEIGHT = 85
+
+// 记录上一次的宽高，用来做去重判断
+const lastBounds = ref({
+  width: props.shape.bounds.width ?? DEFAULT_WIDTH,
+  height: props.shape.bounds.height ?? DEFAULT_HEIGHT,
+})
+
+/**
+ * 当当前 shape 的宽高发生变化时，要执行的逻辑
+ */
+
+// 同时监听 bounds.width 和 bounds.height
+watch(
+  () => [props.shape.bounds.width, props.shape.bounds.height],
+  ([newW, newH]) => {
+    if (isGhost.value) return
+    // 宽高兜底到默认值（150 x 85）
+    const width = newW ?? DEFAULT_WIDTH
+    const height = newH ?? DEFAULT_HEIGHT
+
+    // 如果和上一次一致，直接返回，避免重复触发
+    if (
+      width == lastBounds.value.width &&
+      height == lastBounds.value.height
+    ) {
+      return
+    }
+
+    // 更新“上一次”的记录
+    lastBounds.value = { width, height }
+
+    // 只有当宽高不再是原始 150 x 85 时才认为“真的变化”，再去调用其他方法
+    if (
+      width !== DEFAULT_WIDTH || height !== DEFAULT_HEIGHT
+    ) {
+      graphStore.expandParentAndEmitSizeUpdateByChild(props.shape)
+    }
+  }
+)
+</script>
+
+<style scoped>
+.capability-shape {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.capability-svg {
+  display: block;
+}
+</style>

package/src/constants/edgeShapeKeys.ts

@@ -0,0 +1,81 @@
+/**
+ * 边类型常量定义
+ * 集中管理所有组件中用到的边类型shapeKey集合，便于统一维护和修改
+ */
+
+// 特定边类型常量定义
+export const EDGE_TYPE = {
+  /** 定向聚合：带菱形起点和空心箭头终点 */
+  DIRECTED_AGGREGATION: 'DirectedAggregation',
+  /** 聚合：带菱形起点 */
+  AGGREGATION: 'Aggregation',
+  /** 定向组成：带实心菱形起点和空心箭头终点 */
+  DIRECTED_COMPOSITION: 'DirectedComposition',
+  /** 组成：带实心菱形起点 */
+  COMPOSITION: 'Composition',
+  /** 泛化：带空心三角形箭头 */
+  GENERALIZATION: 'Generalization',
+  /** 默认关联 */
+  ASSOCIATION: 'Association',
+  /** 定向关联：带空心箭头终点的实线 */
+  DIRECTED_ASSOCIATION: 'DirectedAssociation'
+};
+
+/**
+ * 虚线样式的边类型集合
+ * 适用于需要使用虚线显示的边，如流程、依赖关系等
+ */
+export const DASHED_EDGE_SHAPES = [
+  'Phases',
+  'Sequence',
+  'Dependency',
+  'Creates',
+  'ComparesTo',
+  'ImpactedBy',
+  'Desires',
+  'Achieves',
+  'Implements',
+  'IsCapableToperform',
+  'ArbitraryConnector',
+  'OperationalControlFlow',
+  'FunctionControlFlow',
+  'ServiceControlFlow',
+  'IsCapableToPerform',
+  'Exhibits'
+];
+
+/**
+ * 需要显示keywords和lineName的边类型集合
+ * 与DASHED_EDGE_SHAPES保持一致，便于统一管理
+ */
+export const EDGES_WITH_KEYWORDS = DASHED_EDGE_SHAPES;
+
+/**
+ * 带箭头的边类型集合
+ * 包含所有虚线边类型和具有方向性的聚合/组成关系，以及定向关联
+ */
+export const EDGES_WITH_ARROWHEADS = [
+  ...DASHED_EDGE_SHAPES,
+  EDGE_TYPE.DIRECTED_AGGREGATION,
+  EDGE_TYPE.DIRECTED_COMPOSITION,
+  EDGE_TYPE.DIRECTED_ASSOCIATION
+];
+
+/**
+ * 带菱形起点标记的边类型集合
+ * 适用于聚合和组成关系类型的边
+ */
+export const DIAMOND_MARKER_SHAPES = [
+  EDGE_TYPE.DIRECTED_AGGREGATION,
+  EDGE_TYPE.AGGREGATION,
+  EDGE_TYPE.DIRECTED_COMPOSITION,
+  EDGE_TYPE.COMPOSITION
+];
+
+/**
+ * 需要特殊终点处理的边类型集合
+ * 如泛化关系等需要特殊调整终点位置的类型
+ */
+export const SPECIAL_END_POINT_SHAPES = [
+  EDGE_TYPE.GENERALIZATION
+];