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

package/src/components/Shape/Action.vue

@@ -0,0 +1,121 @@
+
+<template>
+  <div class="capability-shape" :style="shapeStyle" @click="onClick">
+    <svg :width="vbW" :height="vbH" :viewBox="`0 0 ${vbW} ${vbH}`" class="capability-svg">
+      <!-- 定义渐变（放在defs中） -->
+      <defs>
+        <!-- 水平线性渐变（从左到右） -->
+        <linearGradient  :id="`horizontalGradient-${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="100%" 
+        height="100%" 
+        :fill="isGhost ? 'transparent' : `url(#horizontalGradient-${shape.id})`" 
+        :stroke="strokeColor" 
+        :stroke-width="strokeWidth"
+        rx="25" 
+      />
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, type CSSProperties } from 'vue'
+import type { Shape } from '../../types'
+import { getIcon } from "../../utils/iconLoader";
+// 引入颜色处理工具函数
+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 baseColor = computed(() => 
+  props.shape.keywordsStyle?.backgroundColor || '#9CCC65'
+)
+
+// 左侧渐变颜色-初始值
+const gradientLeftColor = computed(() => {
+  return baseColor.value
+})
+
+// 中间过渡颜色（浅）
+const gradientMiddleColor = computed(() => {
+    return adjustColorLightness(baseColor.value, 20)
+})
+
+// 右侧渐变颜色（较浅）
+const gradientRightColor = computed(() => {
+  // 提高明度50%，使颜色更浅
+  return adjustColorLightness(baseColor.value, 28)
+})
+
+// 根据 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)
+
+// 获取 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)
+</script>
+
+<style scoped>
+.capability-shape {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.capability-svg {
+  display: block;
+}
+</style>

package/src/components/Shape/ActivityAction.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="capability-shape" :style="shapeStyle" @click="onClick">
+    <svg :width="vbW" :height="vbH" :viewBox="`0 0 ${vbW} ${vbH}`" class="capability-svg">
+      <!-- 定义渐变（放在defs中） -->
+      <defs>
+        <!-- 水平线性渐变（从左到右） -->
+        <linearGradient  :id="`horizontalGradient-${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="vbW - strokeWidth" 
+        :height="vbH - strokeWidth" 
+        :fill="isGhost ? 'transparent' : `url(#horizontalGradient-${shape.id})`" 
+        :stroke="strokeColor" 
+        :stroke-width="strokeWidth"
+        stroke-alignment="outer"
+        rx="25" 
+      />
+      <g v-if="!isGhost">
+        <!-- 文本内容 -->
+        <text :x="keywordsBounds.x || 5" :y="keywordsBounds.y || 20" 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" 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="5" 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";
+// 引入颜色处理工具函数
+import { adjustColorLightness } from '../../utils/colorUtils'
+// 引入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 baseColor = computed(() => 
+  props.shape.keywordsStyle?.backgroundColor || '#9CCC65'
+)
+
+// 左侧渐变颜色-初始值
+const gradientLeftColor = computed(() => {
+  return baseColor.value
+})
+
+// 中间过渡颜色（浅）
+const gradientMiddleColor = computed(() => {
+    return adjustColorLightness(baseColor.value, 20)
+})
+
+// 右侧渐变颜色（较浅）
+const gradientRightColor = computed(() => {
+  // 提高明度50%，使颜色更浅
+  return adjustColorLightness(baseColor.value, 28)
+})
+
+// 根据 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)
+
+// 获取 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/Block.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="capability-shape" :style="shapeStyle" @click="onClick">
+    <svg :width="vbW" :height="vbH" :viewBox="`0 0 ${vbW} ${vbH}`" class="capability-svg">
+      <!-- 定义渐变（放在defs中） -->
+      <defs>
+        <!-- 水平线性渐变（从左到右） -->
+        <linearGradient :id="`horizontalGradient-${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="vbW - strokeWidth" :height="vbH - strokeWidth"
+        :fill="isGhost ? 'transparent' : `url(#horizontalGradient-${shape.id})`" :stroke="strokeColor"
+        :stroke-width="strokeWidth" stroke-alignment="outer" rx="2" />
+      <g v-if="!isGhost">
+        <!-- 文本内容 -->
+        <text :x="keywordsBounds.x || 5" :y="keywordsBounds.y || 20" 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" 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>
+        <line v-if="shape.comparents?.length && shape.comparents[0]?.comparentShapes?.length" :x1="strokeWidth"
+          :x2="vbW - strokeWidth" :y1="(nameBounds.y || 45) + 20" :y2="(nameBounds.y || 45) + 20" stroke="#767a7d"
+          stroke-width="1" />
+        <!-- 图标图片 -->
+        <image v-if="showIcon" :x="vbW - 30" y="5" 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'
+// 引入lodash的防抖函数
+import { debounce } from 'lodash';
+// 引入事件总线来监听缩放状态
+import { eventBus } from '../../store/eventBus';
+
+// 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 isResizing = ref(false);
+
+// 定义事件处理函数
+const handleResizeStart = () => {
+  isResizing.value = true;
+};
+
+const handleResizeEnd = (target: any) => {
+  isResizing.value = false;
+  // 缩放结束后更新图元大小
+  nextTick(() => {
+    updateShapeBounds();
+  });
+};
+
+// 组件挂载时绑定事件监听
+onMounted(() => {
+  // 监听缩放开始事件
+  eventBus.on('resize-start', handleResizeStart);
+  // 监听缩放结束事件
+  eventBus.on('resize-end', handleResizeEnd);
+  
+  // 组件挂载时更新一次宽度
+  updateShapeBounds();
+});
+
+// 组件卸载时清理事件监听
+onUnmounted(() => {
+  eventBus.off('resize-start', handleResizeStart);
+  eventBus.off('resize-end', handleResizeEnd);
+});
+
+// 轮廓颜色（边框颜色）
+const strokeColor = computed(() =>
+  props.shape.style?.borderColor ?? '#8a6d3b'
+)
+
+// 轮廓线宽
+const strokeWidth = computed(() =>
+  isGhost.value ? 4 : (props.shape.style?.borderWidth ?? 0.5)
+)
+
+// 基础颜色（带默认值）
+const baseColor = computed(() =>
+  props.shape.keywordsStyle?.backgroundColor || '#9CCC65'
+)
+
+// 左侧渐变颜色-初始值
+const gradientLeftColor = computed(() => {
+  return baseColor.value
+})
+
+// 中间过渡颜色（浅）
+const gradientMiddleColor = computed(() => {
+  return adjustColorLightness(baseColor.value, 20)
+})
+
+// 右侧渐变颜色（较浅）
+const gradientRightColor = computed(() => {
+  // 提高明度50%，使颜色更浅
+  return adjustColorLightness(baseColor.value, 28)
+})
+
+// 获取 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)
+
+// 计算文本内容的估计宽度（基于字符数和字体大小）
+const estimatedTextWidth = computed(() => {
+  // 获取字体大小
+  const fontSize = nameStyle.value.fontSize || nameBounds.value.height || 12;
+  // 假设每个字符的平均宽度是字体大小的1倍
+  const charWidth = fontSize * 1;
+
+  // 计算名称文本的宽度
+  const nameTextWidth = (props.shape.name?.length || 0) * charWidth;
+  // 计算关键词文本的宽度
+  const keywordsTextWidth = (props.shape.keywords?.length || 0) * charWidth;
+
+  // 返回较大的宽度，并添加一些边距（左右各10px）
+  const maxTextWidth = Math.max(nameTextWidth, keywordsTextWidth);
+  return maxTextWidth + 60; // 左右各10px边距
+});
+
+// 根据 shape 的 bounds 生成样式
+const shapeStyle = computed<CSSProperties>(() => {
+  const { bounds, style } = props.shape;
+
+  // 直接使用bounds宽度，不做任何限制
+  let width = bounds.width || 100;
+
+  // 只在非缩放状态下应用最小宽度保护，确保文本可见
+  // 缩放过程中完全不限制宽度，允许自由放大和缩小
+  if (!isResizing.value) {
+    width = Math.max(estimatedTextWidth.value, width);
+  }
+
+  // 最小高度限制为70px
+  const minHeight = 70;
+  const height = Math.max(bounds.height || 40, minHeight);
+
+  return {
+    width: `${width}px`,
+    height: `${height}px`,
+    zIndex: (style?.zIndex as number) ?? 0,
+  }
+});
+
+// 更新图元的bounds宽度和高度
+const updateShapeBounds = async () => {
+  await nextTick();
+
+  const requiredWidth = estimatedTextWidth.value;
+  const currentWidth = props.shape.bounds.width || 100;
+  // 最小高度限制为70px
+  const minHeight = 70;
+  const currentHeight = props.shape.bounds.height || 40;
+  const requiredHeight = Math.max(currentHeight, minHeight);
+
+  // 检查是否需要更新宽度或高度
+  if (requiredWidth > currentWidth || requiredHeight > currentHeight) {
+    graphStore.updateShape(props.shape.id, {
+      bounds: {
+        ...props.shape.bounds,
+        width: Math.max(requiredWidth, currentWidth),
+        height: requiredHeight
+      }
+    });
+  }
+}
+
+// 创建防抖版本的updateShapeBounds函数，在必要时使用
+const debouncedUpdateShapeBounds = debounce(updateShapeBounds, 100);
+
+const onClick = (e: MouseEvent) => {
+  emit('shape-click', props.shape, e)
+}
+
+
+
+// 监听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 && !isResizing.value) {
+    // 只有在非缩放状态下才更新，避免缩放过程中改变图元大小
+    updateShapeBounds();
+  }
+});
+
+const vbW = computed(() => props.shape.bounds.width || 100)
+const vbH = computed(() => props.shape.bounds.height || 40)
+// ================== 监听 bounds 宽高变化 ==================
+
+// 原始宽高（150 x 70）
+const DEFAULT_WIDTH = 150
+const DEFAULT_HEIGHT = 70
+
+// 记录上一次的宽高，用来做去重判断
+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 70）
+    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 70 时才认为“真的变化”，再去调用其他方法
+      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>