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

package/src/components/Shape/DividingLine.vue

@@ -0,0 +1,594 @@
+<template>
+  <div :style="bounds">
+    <!-- 确保SVG始终有足够的宽度显示所有内容 -->
+    <svg class="capability-shape" :width="bounds.width" :height="bounds.height" preserveAspectRatio="xMinYMin meet">
+      <!-- 定义渐变 -->
+      <defs>
+        <linearGradient :id="`gradient-${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="strokeWidth / 2" :y="strokeWidth / 2" :width="bounds.width - strokeWidth"
+        :height="bounds.height - strokeWidth" :rx="2" :ry="2"
+        :fill="isGhost ? 'transparent' : `url(#gradient-${shape.id})`" :stroke="strokeColor" :stroke-width="strokeWidth"
+        stroke-alignment="outer" />
+
+      <!-- 头部区域 -->
+      <g v-show="!isGhost">
+        <!-- 头部下划线 -->
+        <line x1="0" :y1="65" x2="100%" :y2="65" :stroke="strokeColor" stroke-width="0.5" />
+
+        <!-- 关键词和图标区域 -->
+        <g @click.stop="emit('name-click', shape, $event)" cursor="pointer">
+          <!-- 关键词文本 -->
+          <foreignObject :x="10" :y="5" :width="bounds.width - 20"
+            :height="Math.max(20, (keywordsStyle.fontSize || 12) * 1.5)">
+            <div class="name-text-svg" :style="{
+              fontSize: `${keywordsStyle.fontSize || keywordsBounds.height || 12}px`,
+              fontFamily: keywordsStyle.fontFamily || '思源黑体',
+              fontWeight: keywordsStyle.fontWeight || 'normal',
+              color: keywordsStyle.color || '#000000',
+              lineHeight: '1',
+            }">
+              {{ shape.keywords }}
+            </div>
+          </foreignObject>
+
+          <!-- 图标 -->
+          <image v-if="showIcon" :x="bounds.width - 30" :y="5" :width="20" :height="20"
+            :href="getIcon('childIcons', shape.icon || '')" />
+
+          <!-- 名称文本 -->
+          <foreignObject :x="0" :y="31" :width="bounds.width" :height="20">
+            <div class="shape-name-svg" :style="{
+              fontSize: `${nameStyle.fontSize || nameBounds.height || 12}px`,
+              fontFamily: nameStyle.fontFamily || '思源黑体',
+              fontWeight: nameStyle.fontWeight || 'bold',
+              color: nameStyle.color || '#000000',
+              lineHeight: '1',
+            }">
+              {{ shape.name }}
+            </div>
+          </foreignObject>
+        </g>
+      </g>
+
+      <!-- 内容区域 - 只在非拖拽预览状态显示 -->
+      <foreignObject v-show="!isGhost" :x="12" :y="headerHeight + 15" :width="bounds.width - 24" :height="contentHeight"
+        @click.stop="emit('keywords-click', shape, $event)">
+        <div class="content-text-svg" ref="contentRef">
+          <div v-for="value in shape.taggedValueLabels" :key="value.id" class="content-item" v-html="value.name"></div>
+        </div>
+      </foreignObject>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted, nextTick, onBeforeUnmount, watch } from 'vue'
+import type { Shape } from '../../types'
+import { getIcon } from "../../utils/iconLoader";
+import { setCompartmentZones, type Rect } from '../../utils/compartment';
+import { adjustColorLightness } from '../../utils/colorUtils'
+import { useGraphStore } from '../../store';
+import { eventBus } from '../../store/eventBus';
+import { debounce } from 'lodash';
+
+// 组件Props定义
+interface Props {
+  shape: Shape
+  upperHeight?: number
+}
+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
+  (e: 'update:keywords', value: string, shape: Shape): void
+  (e: 'compartment-metrics', payload: { headerH: number; contentH: number }, shape: Shape): void
+}>()
+const props = defineProps<Props>()
+const graphStore = useGraphStore()
+
+// 状态管理
+const isResizing = ref(false);
+const isGhost = computed(() => (props.shape as any).meta?.isGhost)
+const lastHeight = ref<number | null>(null); // 记录上一次高度，用于防循环
+// 定义底部边距
+const bottomMargin = 10; // 下半区域底部额外边距（单位：px）
+
+// 样式计算
+const strokeColor = computed(() => props.shape.style?.borderColor ?? '#8a6d3b')
+const strokeWidth = computed(() => {
+  // 拖拽预览时边框宽度为4，正常状态使用配置的边框宽度
+  return isGhost.value ? 4 : (props.shape.style?.borderWidth ?? 0.5)
+})
+
+// 渐变背景色计算（基于填充色）
+const baseColor = computed(() => props.shape.keywordsStyle?.backgroundColor || '#e3f2fd')
+const gradientLeftColor = computed(() => adjustColorLightness(baseColor.value, 10))
+const gradientMiddleColor = computed(() => baseColor.value)
+const gradientRightColor = computed(() => adjustColorLightness(baseColor.value, 28))
+
+// 文本相关属性
+const showIcon = computed(() => props.shape.showIcon || false)
+// 获取 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 || {})
+
+// 计算关键词文本的foreignObject高度
+const keywordsForeignObjectHeight = computed(() => {
+  return Math.max(20, (keywordsStyle.value.fontSize || 12) * 1.5);
+});
+
+// 计算名称文本的foreignObject高度
+const nameForeignObjectHeight = computed(() => {
+  return Math.max(20, (nameStyle.value.fontSize || 12) * 1.5);
+});
+
+// 计算文本内容的估计宽度（基于字符数和字体大小）
+const estimatedTextWidth = computed(() => {
+  // 获取字体大小
+  const nameFontSize = nameStyle.value.fontSize || nameBounds.value.height || 12;
+  const keywordsFontSize = keywordsStyle.value.fontSize || keywordsBounds.value.height || 12;
+
+  // 假设每个字符的平均宽度是字体大小的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;
+
+  // 返回较大的宽度，并添加一些边距（左右各20px）
+  const maxTextWidth = Math.max(nameTextWidth, keywordsTextWidth);
+  return maxTextWidth + 40; // 左右各20px边距
+});
+
+// 获取边界信息
+const bounds = computed(() => {
+  // 即使在缩放状态下也应用最小宽度保护，确保预览框右边不显示的问题
+  let width = props.shape.bounds?.width || 120;
+  // 确保始终保持最小宽度，防止缩小时右边内容被截断
+  const minWidth = Math.max(estimatedTextWidth.value, 120); // 设置一个基础最小宽度120
+  width = Math.max(minWidth, width);
+  return {
+    width: width,
+    height: props.shape.bounds?.height || 80,
+    zIndex: (props.shape.style?.zIndex as number) ?? 0,
+  }
+})
+// 头部高度计算
+const headerHeight = computed(() => {
+  // 基于内容估算头部高度
+  const hasKeywords = !!props.shape.keywords;
+  const hasName = !!props.shape.name;
+  if (!hasKeywords && !hasName) return 40;
+
+  let height = 5; // 顶部边距
+  if (hasKeywords) {
+    height += keywordsForeignObjectHeight.value;
+    if (hasName) {
+      height += 1; // keywords和name之间的原始间距
+    }
+  }
+  if (hasName) {
+    height += nameForeignObjectHeight.value;
+  }
+
+  height += 10; // 底部边距
+
+  // 确保最小高度，同时考虑字体大小可能较大的情况
+  const fontSizeBasedMinHeight = Math.max(
+    hasKeywords ? (keywordsStyle.value.fontSize || 12) * 2 : 0,
+    hasName ? (nameStyle.value.fontSize || 12) * 2 : 0
+  ) + (hasKeywords && hasName ? 11 : 10); // 基础间距
+
+  // 确保最小高度
+  return Math.max(height, fontSizeBasedMinHeight, 40);
+})
+
+// 响应式状态管理
+const actualContentHeight = ref<number>(0); // 实际内容高度
+const contentRef = ref<HTMLElement | null>(null);
+
+// 内容区域高度计算
+const contentHeight = computed(() => {
+  // 计算内容实际需要的最小高度
+  if (actualContentHeight.value > 0) {
+    return actualContentHeight.value + bottomMargin; // 实际内容高度+边距
+  }
+
+  // 估算值：每个项目约20px高度，加上底部边距
+  const itemCount = props.shape.taggedValueLabels?.length || 0;
+  return Math.max(20, itemCount * 20 + bottomMargin);
+})
+
+// 内容区域定义（用于compartment功能）
+const contentZone = computed(() => ({
+  x: (props.shape.bounds?.x || 0) + 12,
+  y: (props.shape.bounds?.y || 0) + headerHeight.value + 10, // 调整间距以匹配下划线位置
+  width: (props.shape.bounds?.width || 0) - 24,
+  height: contentHeight.value
+}))
+
+// 上半部分高度计算逻辑
+const reportMetrics = () => {
+  const hh = headerHeight.value;
+  const cc = contentHeight.value;
+
+  // 防止无限循环：只有当高度实际发生变化时才更新
+  const currentHeight = hh + cc;
+  if (lastHeight.value !== null && lastHeight.value === currentHeight) {
+    return;
+  }
+  lastHeight.value = currentHeight;
+
+  // 避免直接修改props，使用emit传递需要的信息
+  emit('compartment-metrics', { headerH: hh, contentH: cc }, props.shape);
+
+  // 计算区域划分
+  const b = props.shape.bounds
+  if (
+    !b ||
+    b.x == null ||
+    b.y == null ||
+    b.width == null ||
+    b.height == null
+  ) {
+    return
+  }
+
+  const divider = 1, PAD_TOP = 6, INSET = 6;
+  const header: Rect = {
+    x: b.x,
+    y: b.y,
+    width: b.width,
+    height: hh + 5 // 增加header高度以匹配下移的下划线
+  };
+
+  const top = b.y + hh + 5 + divider + cc + PAD_TOP; // 考虑下划线下移5px
+  const childrenArea: Rect = {
+    x: b.x + INSET,
+    y: top,
+    width: Math.max(0, b.width - 2 * INSET),
+    height: Math.max(0, b.y + b.height - INSET - top)
+  };
+
+  const parentBounds: Rect = {
+    x: b.x,
+    y: b.y,
+    width: b.width,
+    height: b.height
+  };
+
+  setCompartmentZones(props.shape.id, {
+    header,
+    content: contentZone.value,
+    childrenArea,
+    parentBounds
+  });
+}
+
+// 测量实际内容高度并更新组件
+const measureContentHeight = () => {
+  if (!contentRef.value) return;
+
+  // 强制重新计算内容尺寸，特别是在宽度变化的情况下
+  contentRef.value.style.width = '100%'; // 确保内容区域宽度正确
+  contentRef.value.style.height = 'auto'; // 重置高度以测量实际需要的高度
+
+  // 获取实际内容高度
+  const actualHeight = contentRef.value.scrollHeight;
+  if (actualHeight !== actualContentHeight.value) {
+    actualContentHeight.value = actualHeight;
+    nextTick(() => {
+      updateShapeBounds()
+      debouncedReportMetrics()
+    })
+
+  }
+};
+
+// 更新组件宽度和高度
+const updateShapeBounds = () => {
+  // 计算内容所需的最小总高度
+  const minTotalHeight = headerHeight.value + 15 + contentHeight.value + 10; // 加上一些额外空间
+
+  // 设置一个基于字体大小的最小高度，确保字体较大时组件也能正常显示
+  const fontSizeBasedMinHeight = Math.max(
+    (keywordsStyle.value.fontSize || 12) * 3,
+    (nameStyle.value.fontSize || 12) * 3
+  ) + 50; // 基于字体大小的最小高度 + 内容区域基本高度
+
+  // 设置一个明确的最小高度限制，确保组件不会太小
+  const explicitMinHeight = 110; // 明确的最小高度值，不小于100
+  const effectiveMinHeight = Math.max(minTotalHeight, fontSizeBasedMinHeight, explicitMinHeight);
+
+  // 获取当前组件尺寸
+  const currentWidth = props.shape.bounds?.width || 0;
+  const currentHeight = props.shape.bounds?.height || 0;
+
+  // 获取所需宽度，确保包含文本内容和图标
+  const requiredWidth = Math.max(estimatedTextWidth.value, 120); // 确保至少有120的宽度
+
+  // 准备更新的属性
+  const updates: any = {};
+
+  // 重要：无论是否在缩放中，都确保组件高度至少达到有效最小高度
+  // 这可以防止预览框在缩放过程中变得太小
+  if (currentHeight < effectiveMinHeight) {
+    updates.height = effectiveMinHeight;
+  }
+
+  // 无论是否在缩放中，都确保宽度至少达到所需宽度
+  // 这可以防止缩小时预览框右边不显示
+  if (currentWidth < requiredWidth) {
+    updates.width = requiredWidth;
+  }
+
+  // 如果有更新，则应用
+  if (Object.keys(updates).length > 0) {
+    graphStore.updateShape(props.shape.id, {
+      bounds: {
+        ...props.shape.bounds,
+        ...updates
+      }
+    });
+  }
+};
+
+// 添加额外的尺寸保护，在拖拽结束后强制检查最小尺寸
+const enforceMinSizeOnResizeEnd = () => {
+  handleDragEnd();
+  // 强制应用最小尺寸，确保即使在缩放过程中也能保持最小高度和宽度
+  nextTick(() => {
+    // 获取当前组件尺寸
+    const currentHeight = props.shape.bounds?.height || 0;
+    const currentWidth = props.shape.bounds?.width || 0;
+    const explicitMinHeight = 110;
+    const explicitMinWidth = 120; // 设置明确的最小宽度
+
+    const updates: any = {};
+
+    // 如果当前高度小于最小高度，立即更新
+    if (currentHeight < explicitMinHeight) {
+      updates.height = explicitMinHeight;
+    }
+
+    // 如果当前宽度小于最小宽度，立即更新，确保预览框右边显示完整
+    if (currentWidth < explicitMinWidth) {
+      updates.width = explicitMinWidth;
+    }
+
+    // 如果有高度或宽度更新，立即应用
+    if (Object.keys(updates).length > 0) {
+      graphStore.updateShape(props.shape.id, {
+        bounds: {
+          ...props.shape.bounds,
+          ...updates
+        }
+      });
+    }
+
+    // 然后再运行常规的更新逻辑
+    updateShapeBounds();
+  });
+};
+
+// 创建防抖版本的updateShapeBounds函数
+const debouncedUpdateShapeBounds = debounce(updateShapeBounds, 100);
+
+// 监听尺寸变化，更新compartment区域
+const debouncedReportMetrics = debounce(reportMetrics, 100);
+const debouncedMeasureContentHeight = debounce(measureContentHeight, 100);
+
+// 监听拖拽缩放事件
+const handleDragStart = () => {
+  isResizing.value = true;
+};
+
+const handleDragEnd = () => {
+  isResizing.value = false;
+  nextTick(() => reportMetrics());
+};
+
+// 初始化和事件监听
+onMounted(() => {
+  // 初始计算
+  nextTick(() => {
+    reportMetrics();
+    // 初始测量内容高度
+    setTimeout(measureContentHeight, 0);
+    // 初始更新图元尺寸
+    updateShapeBounds();
+  });
+
+  // 事件总线监听
+  eventBus.on('shape-drag-start', handleDragStart);
+  eventBus.on('shape-drag-end', handleDragEnd);
+  eventBus.on('shape-resize-start', handleDragStart);
+  eventBus.on('shape-resize-end', enforceMinSizeOnResizeEnd);
+
+  // 监听内容变化相关的事件
+  window.addEventListener('resize', debouncedMeasureContentHeight);
+});
+
+// 监听shape变化，重新计算尺寸
+watch(() => [props.shape.name, props.shape.keywords, props.shape.bounds?.width, keywordsStyle.value, nameStyle.value], () => {
+  if (!isResizing.value) {
+    nextTick(() => {
+      reportMetrics();
+      // 当内容或宽度变化时重新测量高度
+      debouncedMeasureContentHeight();
+    });
+  }
+}, { deep: true }); // 启用深度监听以捕获样式对象的变化
+
+// 监听contentHeight变化，更新组件尺寸
+watch(contentHeight, () => {
+  if (!isResizing.value) {
+    nextTick(() => {
+      reportMetrics();
+      updateShapeBounds();
+    });
+  }
+});
+
+// 监听name变化时更新宽度
+watch(() => props.shape.name, () => {
+  if (!isResizing.value) {
+    nextTick(() => {
+      updateShapeBounds();
+    });
+  }
+});
+
+// 监听keywords变化时更新宽度
+watch(() => props.shape.keywords, () => {
+  if (!isResizing.value) {
+    nextTick(() => {
+      updateShapeBounds();
+    });
+  }
+});
+
+// 监听字体样式变化时更新宽度和高度
+watch(() => [nameStyle.value.fontSize, nameStyle.value.fontFamily, nameStyle.value.fontWeight,
+nameBounds.value.height, keywordsStyle.value.fontSize, keywordsStyle.value.fontFamily,
+keywordsStyle.value.fontWeight, keywordsBounds.value.height], () => {
+  if (!isResizing.value) {
+    nextTick(() => {
+      updateShapeBounds();
+    });
+  }
+}, { deep: true });
+
+// 监听bounds宽度变化，但只在非缩放状态下响应
+watch(() => props.shape.bounds.width, () => {
+  if (!isResizing.value) {
+    nextTick(() => {
+      updateShapeBounds();
+    });
+  }
+});
+// 监听 taggedValueLabels 的内容变化（比如富文本 name 变长/变多行）
+// 不能只看 length，因为文本变长时 length 不变
+watch(
+  () => props.shape.taggedValueLabels,
+  () => {
+    if (!isResizing.value) {
+      nextTick(() => {
+        // 重新测量内容高度
+        debouncedMeasureContentHeight()
+      })
+    }
+  },
+  { deep: true }
+)
+onBeforeUnmount(() => {
+  eventBus.off('shape-drag-start', handleDragStart);
+  eventBus.off('shape-drag-end', handleDragEnd);
+  eventBus.off('shape-resize-start', handleDragStart);
+  eventBus.off('shape-resize-end', enforceMinSizeOnResizeEnd);
+  window.removeEventListener('resize', debouncedMeasureContentHeight);
+});
+// ================== 监听 bounds 宽高变化 ==================
+
+// 原始宽高（150 x 135）
+const DEFAULT_WIDTH = 150
+const DEFAULT_HEIGHT = 135
+
+// 记录上一次的宽高，用来做去重判断
+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 135）
+    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 135 时才认为“真的变化”，再去调用其他方法
+    if (
+      width !== DEFAULT_WIDTH || height !== DEFAULT_HEIGHT) {
+      graphStore.expandParentAndEmitSizeUpdateByChild(props.shape)
+    }
+  }
+)
+</script>
+
+<style scoped>
+.capability-shape {
+  display: inline-block;
+  position: relative;
+  overflow: visible;
+  /* 确保内容不会被截断 */
+  box-sizing: content-box;
+  /* 确保宽度计算正确 */
+}
+
+/* SVG内的HTML元素样式 */
+::v-deep(.name-text-svg) {
+  text-align: left;
+}
+
+::v-deep(.shape-name-svg) {
+  text-align: center;
+}
+
+::v-deep(.content-text-svg) {
+  font-size: 13px;
+  line-height: 1.4;
+  color: #000;
+  font-family: Arial, sans-serif;
+  min-height: 20px;
+  /* 确保内容可以完全显示 */
+  overflow: visible;
+  width: 100%;
+  /* 确保宽度占满父容器 */
+  box-sizing: border-box;
+}
+
+::v-deep(.content-item) {
+  margin-bottom: 4px;
+  word-break: break-word;
+  white-space: normal;
+  /* 确保文本可以正常换行 */
+  overflow: visible;
+  width: 100%;
+  /* 确保每个项目都占满宽度 */
+  box-sizing: border-box;
+}
+
+::v-deep(.content-item:last-child) {
+  margin-bottom: 0;
+}
+</style>