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

package/src/components/Shape/ConceptualRole.vue

@@ -0,0 +1,266 @@
+<template>
+  <div 
+    class="diagram-shape" 
+    :style="shapeStyle" 
+    @click="onClick" 
+    @dblclick="onDoubleClick"
+    @mousedown="preventScaleAndDrag"
+    @touchstart="preventScaleAndDrag"
+    @touchmove="preventTouchScale"
+    @touchend="preventTouchScale"
+    @wheel="onWheel"
+    @contextmenu.prevent
+  >
+    <svg :width="vbW" :height="vbH" :viewBox="`0 0 ${vbW} ${vbH}`" class="diagram-svg">
+      <!-- 背景矩形 - 使用边框颜色，支持拖拽预览和正常显示 -->
+      <rect 
+        :x="strokeWidth / 2" 
+        :y="strokeWidth / 2" 
+        :width="vbW - strokeWidth" 
+        :height="vbH - strokeWidth" 
+        fill="transparent" 
+        :stroke="strokeColor" 
+        :stroke-width="shouldShowBorder ? strokeWidth : 0"
+        stroke-alignment="outer"
+        rx="2" 
+      />
+      
+      <g v-if="!isGhost">
+        <!-- 图片区域 -->
+        <g v-if="showIcon" @click="onImageClick">
+          <image 
+            :x="(vbW - imageWidth) / 2" 
+            :y="imageTopPadding" 
+            :width="imageWidth" 
+            :height="imageHeight" 
+            :href="getIcon('childIcons', shape.icon || '')" 
+            style="cursor: pointer;" 
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, watch, onMounted, onUnmounted, 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: 'image-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)
+
+// 轮廓颜色（边框颜色）- 支持从style.borderColor获取，实现边框颜色回显
+const strokeColor = computed(() =>
+  props.shape.style?.borderColor ?? '#8a6d3b'
+)
+
+// 轮廓线宽 - 支持动态调整，拖拽预览时显示较粗边框
+const strokeWidth = computed(() =>
+  isGhost.value ? 4 : (props.shape.style?.borderWidth ?? 0.5)
+)
+
+const vbW = computed(() => props.shape.bounds.width || 30)
+const vbH = computed(() => props.shape.bounds.height || 30)
+
+// 图片尺寸 - 设置固定值，不受外部缩放影响
+const imageWidth = computed(() => 30)
+const imageHeight = computed(() => 30)
+
+// 图片顶部边距
+const imageTopPadding = computed(() =>0)
+
+// 是否显示图标
+const showIcon = computed(() => props.shape.showIcon)
+
+// 计算是否应该显示边框 - 只有当边框颜色被明确设置时才显示
+const shouldShowBorder = computed(() => {
+  // 如果处于拖拽预览状态，总是显示边框
+  if (isGhost.value) return true
+  
+  // 只有当边框颜色被明确设置（不是默认值）时才显示边框
+  return props.shape.style?.borderColor !== undefined && props.shape.style?.borderColor !== null
+})
+
+// 更新图元的bounds尺寸，强制设置固定尺寸，但避免触发无限循环
+const updateShapeBounds = async () => {
+  await nextTick();
+  
+  // 检查当前尺寸是否已经是我们期望的固定尺寸
+  // 只有在真正需要更新时才调用graphStore.updateShape
+  const currentBounds = props.shape.bounds;
+  if (!currentBounds || 
+      currentBounds.width !== vbW.value || 
+      currentBounds.height !== vbH.value) {
+    
+    // 强制使用固定尺寸，完全忽略外部缩放
+    // 只更新x/y坐标和固定的宽高
+    graphStore.updateShape(props.shape.id, {
+      bounds: {
+        x: currentBounds?.x || 0,
+        y: currentBounds?.y || 0,
+        width: vbW.value, // 固定宽度
+        height: vbH.value // 固定高度
+      }
+    });
+  }
+};
+
+// 使用requestAnimationFrame来安全地恢复尺寸，避免无限循环
+let isUpdating = false;
+
+// 安全的更新尺寸函数
+const safeUpdateShapeBounds = () => {
+  // 防止重复调用
+  if (isUpdating) return;
+  
+  isUpdating = true;
+  
+  // 使用requestAnimationFrame确保在下一帧更新，避免阻塞UI
+  requestAnimationFrame(async () => {
+    await updateShapeBounds();
+    // 更新完成后重置标志
+    isUpdating = false;
+  });
+};
+
+// 监听bounds变化，但使用浅监听避免深度递归
+// 只比较引用变化，不比较内部属性的深层变化
+watch(() => props.shape.bounds, () => {
+  // 当bounds引用变化时（可能是外部缩放导致的），安全地恢复尺寸
+  safeUpdateShapeBounds();
+}, { deep: false }); // 使用浅监听
+
+// 监听showIcon变化时安全地更新尺寸
+watch(() => props.shape.showIcon, () => {
+  safeUpdateShapeBounds();
+});
+
+// 添加一个定期检查机制，确保尺寸不会被长时间改变
+let checkInterval: number | null = null;
+
+onMounted(() => {
+  // 初始设置固定尺寸
+  updateShapeBounds();
+  
+  // 设置定期检查，每500ms检查一次尺寸是否被改变
+  checkInterval = window.setInterval(() => {
+    const currentBounds = props.shape.bounds;
+    if (currentBounds && (currentBounds.width !== vbW.value || currentBounds.height !== vbH.value)) {
+      safeUpdateShapeBounds();
+    }
+  }, 500);
+});
+
+// 在组件卸载时清理定时器
+onUnmounted(() => {
+  if (checkInterval) {
+    window.clearInterval(checkInterval);
+  }
+});
+
+// 只在组件挂载时设置一次尺寸，避免持续监听导致的循环
+
+// 形状样式 - 使用固定尺寸，避免影响性能
+const shapeStyle = computed<CSSProperties>(() => {
+  const { x = 0, y = 0 } = props.shape.bounds || {}
+  
+  return {
+    position: 'absolute',
+    left: `${x}px`,
+    top: `${y}px`,
+    width: `${vbW.value}px`, // 固定宽度
+    height: `${vbH.value}px`, // 固定高度
+    zIndex: (props.shape.style?.zIndex as number) ?? 0,
+  }
+})
+
+const onClick = (event: MouseEvent) => {
+  event.stopPropagation();
+  event.preventDefault();
+  emit('shape-click', props.shape, event)
+}
+
+const onDoubleClick = (event: MouseEvent) => {
+  event.stopPropagation();
+  event.preventDefault();
+}
+
+// 阻止拖拽和缩放相关的事件
+const preventScaleAndDrag = (event: Event) => {
+  event.stopPropagation();
+  event.preventDefault();
+}
+
+// 阻止触摸缩放事件
+const preventTouchScale = (event: TouchEvent) => {
+  // 阻止多点触控缩放
+  if (event.touches.length > 1) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+}
+
+// 阻止鼠标滚轮缩放 - 完全禁用缩放功能
+const onWheel = (event: WheelEvent) => {
+  // 完全阻止所有滚轮事件，包括缩放
+  event.stopPropagation();
+  event.preventDefault();
+}
+
+const onImageClick = (event: MouseEvent) => {
+  event.stopPropagation()
+  emit('image-click', props.shape, event)
+}
+
+const onNameClick = (event: MouseEvent) => {
+  event.stopPropagation()
+  emit('name-click', props.shape, event)
+}
+</script>
+
+<style scoped>
+.diagram-shape {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  pointer-events: auto;
+  /* 阻止拖拽缩放的CSS属性 */
+  touch-action: none;
+  -webkit-touch-action: none;
+  -ms-touch-action: none;
+  /* 完全禁用缩放 */
+  zoom: 1;
+  transform: none !important;
+  -webkit-transform: none !important;
+  -moz-transform: none !important;
+  -ms-transform: none !important;
+}
+
+.diagram-svg {
+  width: 100%;
+  height: 100%;
+  /* 禁用SVG内部的缩放 */
+  transform: none !important;
+  -webkit-transform: none !important;
+}
+</style>

package/src/components/Shape/Diagram.vue

@@ -0,0 +1,220 @@
+<template>
+  <div class="diagram-shape" :style="shapeStyle" @click="onClick">
+    <svg :width="vbW" :height="vbH" :viewBox="`0 0 ${vbW} ${vbH}`" class="diagram-svg">
+      <!-- 拖拽预览时显示边框，正常显示时不显示 -->
+      <rect 
+        v-if="isGhost" 
+        :x="strokeWidth / 2" 
+        :y="strokeWidth / 2" 
+        :width="vbW - strokeWidth" 
+        :height="vbH - strokeWidth" 
+        fill="transparent" 
+        :stroke="strokeColor" 
+        :stroke-width="strokeWidth"
+        stroke-alignment="outer"
+        rx="2" 
+      />
+      
+      <g v-if="!isGhost">
+        <!-- 图片区域 -->
+        <g v-if="showIcon" @click="onImageClick">
+          <image 
+            :x="(vbW - imageWidth) / 2" 
+            :y="imageTopPadding" 
+            :width="imageWidth" 
+            :height="imageHeight" 
+            :href="getIcon('childIcons', shape.icon || '')" 
+            style="cursor: pointer;" 
+          />
+        </g>
+
+        <!-- 名称文本区域 - 图片下方居中显示 -->
+        <text 
+          :x="'50%'" 
+          :y="textYPosition" 
+          text-anchor="middle"
+          :font-family="nameStyle.fontFamily || '思源黑体'" 
+          :font-size="nameStyle.fontSize || 12"
+          :font-weight="nameStyle.fontWeight || 'bold'" 
+          :fill="nameStyle.color || '#000000'" 
+          style="cursor: pointer;"
+          @click="onNameClick"
+        >
+          {{ shape.name }}
+        </text>
+      </g>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, watch, onMounted, 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: 'image-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(() => {
+  return '#8a6d3b'
+})
+
+// 轮廓线宽 - 只在拖拽预览时使用
+const strokeWidth = computed(() => {
+  return  4
+})
+
+// 视图框宽度和高度
+const vbW = computed(() => props.shape.bounds?.width || 100)
+const vbH = computed(() => props.shape.bounds?.height || 120)
+
+// 图片尺寸
+const imageWidth = computed(() => Math.min(vbW.value * 0.6, 35))
+const imageHeight = computed(() => Math.min(vbH.value * 0.5, 35))
+
+// 图片顶部边距
+const imageTopPadding = computed(() => 5)
+
+// 文本Y坐标位置 - 图片下方居中
+const textYPosition = computed(() => {
+  return imageTopPadding.value + imageHeight.value + 20
+})
+
+// 是否显示图标
+const showIcon = computed(() => props.shape.showIcon)
+
+// 名称样式
+const nameStyle = computed(() => {
+  if (props.shape.nameStyle) {
+    return typeof props.shape.nameStyle === 'string' 
+      ? JSON.parse(props.shape.nameStyle) 
+      : props.shape.nameStyle
+  }
+  return {}
+})
+
+// 计算文本内容的估计宽度（基于字符数和字体大小）
+const estimatedTextWidth = computed(() => {
+  // 获取字体大小
+  const fontSize = nameStyle.value.fontSize || 12;
+  // 假设每个字符的平均宽度是字体大小的1倍
+  const charWidth = fontSize * 1;
+  
+  // 计算名称文本的宽度
+  const nameTextWidth = (props.shape.name?.length || 0) * charWidth;
+  
+  // 返回文本宽度，并添加一些边距（左右各10px）
+  const textWidth = nameTextWidth + 60; // 左右各10px边距
+  
+  // 确保最小宽度不小于图片宽度和一些额外空间
+  return Math.max(textWidth, imageWidth.value + 40);
+});
+
+// 更新图元的bounds宽度
+const updateShapeBounds = async () => {
+  await nextTick();
+  
+  const requiredWidth = estimatedTextWidth.value;
+  const currentWidth = props.shape.bounds?.width || 100;
+  
+  // 只有当文本所需宽度大于当前宽度时才更新
+  if (requiredWidth > currentWidth) {
+    graphStore.updateShape(props.shape.id, {
+      bounds: {
+        ...props.shape.bounds,
+        width: requiredWidth
+      }
+    });
+  }
+};
+
+// 组件挂载时更新一次宽度
+onMounted(() => {
+  updateShapeBounds();
+});
+
+// 监听name变化时更新宽度并重新选择图元
+watch(() => props.shape.name, () => {
+  updateShapeBounds();
+  // 只有当当前图元被选中时，才执行清空选择并重新选择的操作
+  if (graphStore.selectedShape?.id === props.shape.id) {
+    graphStore.clearSelection();
+    nextTick(() => {
+      graphStore.selectShape(props.shape);
+    });
+  }
+});
+
+// 监听字体样式变化时更新宽度
+watch(() => nameStyle.value.fontSize, () => {
+  updateShapeBounds();
+}, { deep: true });
+
+// 监听bounds变化（如缩放操作后），确保宽度始终满足文本显示需求
+watch(() => props.shape.bounds?.width, (newWidth) => {
+  if (newWidth !== undefined) {
+    updateShapeBounds();
+  }
+});
+
+// 形状样式
+const shapeStyle = computed<CSSProperties>(() => {
+  const { x = 0, y = 0 } = props.shape.bounds || {}
+  // 确保宽度不小于文本所需的最小宽度
+  const width = Math.max(estimatedTextWidth.value, props.shape.bounds?.width || 100);
+  
+  return {
+    position: 'absolute',
+    left: `${x}px`,
+    top: `${y}px`,
+    width: `${width}px`,
+    height: `${vbH.value}px`,
+    cursor: 'pointer'
+  }
+})
+
+// 点击事件处理
+const onClick = (event: MouseEvent) => {
+  emit('shape-click', props.shape, event)
+}
+
+const onImageClick = (event: MouseEvent) => {
+  event.stopPropagation()
+  emit('image-click', props.shape, event)
+}
+
+const onNameClick = (event: MouseEvent) => {
+  event.stopPropagation()
+  emit('name-click', props.shape, event)
+}
+</script>
+
+<style scoped>
+.diagram-shape {
+  user-select: none;
+}
+
+.diagram-svg {
+  width: 100%;
+  height: 100%;
+}
+</style>