@mx-sose-front/mx-sose-graph 1.1.9 → 1.2.2

package/src/components/MatrixContextMenu/MatrixContextMenu.vue

@@ -0,0 +1,235 @@
+<template>
+  <teleport to="body">
+    <div
+      v-if="visible"
+      class="matrix-context-menu px-[6px]"
+      :style="dynamicMenuStyle"
+      @contextmenu.prevent
+      @click.stop
+      ref="menuRef"
+    >
+      <!-- 属性配置 -->
+      <div class="menu-item" @click="handlePropertyConfig">
+        <div class="flex items-center box-border border-b-[1px] border-solid border-[#DCDFE6]">
+          <img :src="getIcon('createMenu', 'config')" class="w-[18px] h-[18px] mr-[10px] ml-[2px]" alt="属性配置" />
+          <span>属性配置</span>
+        </div>
+      </div>
+
+      <!-- 树上高亮 -->
+      <div class="menu-item" @click="handleTreeHighlight">
+        <div class="flex items-center box-border border-b-[1px] border-solid border-[#DCDFE6]">
+          <img :src="getIcon('createMenu', 'tree')" class="w-[18px] h-[18px] mr-[10px] ml-[2px]" alt="树上高亮" />
+          <span>树上高亮</span>
+        </div>
+      </div>
+
+      <!-- 删除 -->
+      <div class="menu-item" @click="handleDelete">
+        <div class="flex items-center box-border border-b-[1px] border-solid border-[#DCDFE6]">
+          <img :src="getIcon('createMenu', 'delete')" class="w-[18px] h-[18px] mr-[10px] ml-[2px]" alt="删除" />
+          <span>删除</span>
+        </div>
+      </div>
+
+      <!-- 移除 -->
+      <div class="menu-item" @click="handleRemove">
+        <div class="flex items-center">
+          <img :src="getIcon('createMenu', 'remove')" class="w-[18px] h-[18px] mr-[10px] ml-[2px]" alt="移除" />
+          <span>移除</span>
+        </div>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted, type CSSProperties } from 'vue'
+import { getIcon } from '../../utils/iconLoader'
+
+interface Props {
+  visible: boolean
+  position: {
+    x: number
+    y: number
+  }
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+  (e: 'property-config'): void
+  (e: 'tree-highlight'): void
+  (e: 'delete'): void
+  (e: 'remove'): void
+}>()
+
+const menuRef = ref<HTMLElement | null>(null)
+
+const MENU_WIDTH = 180
+const MENU_HEIGHT = 160
+const SAFE_MARGIN = 10
+
+const dynamicMenuStyle = ref<CSSProperties>({
+  left: '0px',
+  top: '0px',
+  display: 'none',
+  position: 'fixed',
+  zIndex: '9999',
+  minWidth: `${MENU_WIDTH}px`,
+})
+
+const updateMenuPosition = () => {
+  if (!props.visible) {
+    dynamicMenuStyle.value = { ...dynamicMenuStyle.value, display: 'none' }
+    return
+  }
+
+  const viewportWidth = window.innerWidth
+  const viewportHeight = window.innerHeight
+
+  let left = props.position.x
+  let top = props.position.y
+
+  if (left + MENU_WIDTH > viewportWidth) {
+    left = viewportWidth - MENU_WIDTH - SAFE_MARGIN
+  }
+  left = Math.max(SAFE_MARGIN, left)
+
+  if (top + MENU_HEIGHT > viewportHeight) {
+    top = viewportHeight - MENU_HEIGHT - SAFE_MARGIN
+  }
+  top = Math.max(SAFE_MARGIN, top)
+
+  dynamicMenuStyle.value = {
+    left: `${left}px`,
+    top: `${top}px`,
+    display: 'block',
+    position: 'fixed',
+    zIndex: '9999',
+    minWidth: `${MENU_WIDTH}px`,
+  }
+}
+
+const closeMenu = () => {
+  emit('update:visible', false)
+}
+
+const handleClickOutside = (event: MouseEvent) => {
+  if (!props.visible || !menuRef.value) return
+  if (!menuRef.value.contains(event.target as Node)) {
+    closeMenu()
+  }
+}
+
+watch(
+  () => [props.visible, props.position],
+  () => {
+    updateMenuPosition()
+
+    if (props.visible) {
+      setTimeout(() => {
+        document.addEventListener('click', handleClickOutside, { capture: true })
+      }, 0)
+    } else {
+      document.removeEventListener('click', handleClickOutside, { capture: true })
+    }
+  },
+  { immediate: true }
+)
+
+const handlePropertyConfig = () => {
+  emit('property-config')
+  closeMenu()
+}
+
+const handleTreeHighlight = () => {
+  emit('tree-highlight')
+  closeMenu()
+}
+
+const handleDelete = () => {
+  emit('delete')
+  closeMenu()
+}
+
+const handleRemove = () => {
+  emit('remove')
+  closeMenu()
+}
+
+const handleWindowResize = () => {
+  if (props.visible) {
+    updateMenuPosition()
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('resize', handleWindowResize)
+  updateMenuPosition()
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside, { capture: true })
+  window.removeEventListener('resize', handleWindowResize)
+})
+</script>
+
+<style scoped lang="scss">
+.matrix-context-menu {
+  background-color: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 6px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  padding: 6px 0;
+  overflow-y: auto;
+  box-sizing: border-box;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  transform-origin: top left;
+}
+
+.matrix-context-menu[style*='display: block'] {
+  animation: fadeIn 0.2s ease forwards;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.matrix-context-menu::-webkit-scrollbar {
+  width: 6px;
+}
+
+.matrix-context-menu::-webkit-scrollbar-thumb {
+  background-color: #ddd;
+  border-radius: 3px;
+}
+
+.matrix-context-menu::-webkit-scrollbar-track {
+  background-color: #f5f5f5;
+}
+
+.menu-item {
+  padding: 0 15px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #606266;
+  border-radius: 4px;
+  height: 36px;
+  line-height: 36px;
+  box-sizing: border-box;
+
+  &:hover {
+    background-color: #f5f7fa;
+    color: #303133;
+  }
+}
+</style>

package/src/components/Shape/DividingLine.vue

@@ -198,6 +198,8 @@ const headerHeight = computed(() => {
 
 // 响应式状态管理
 const actualContentHeight = ref<number>(0); // 实际内容高度
+  // 实际内容宽度
+const actualContentWidth = ref<number>(0)
 const contentRef = ref<HTMLElement | null>(null);
 
 // 内容区域高度计算
@@ -278,73 +280,90 @@ const reportMetrics = () => {
   });
 }
 
-// 测量实际内容高度并更新组件
-const measureContentHeight = () => {
-  if (!contentRef.value) return;
+/**
+ * 测量内容真实宽高
+ */
+const measureContentSize = () => {
+  if (!contentRef.value) return
+
+  // 先重置，保证测量的是内容自然撑开的尺寸
+  contentRef.value.style.width = 'auto'
+  contentRef.value.style.height = 'auto'
+  contentRef.value.style.maxWidth = 'none'
+
+  // 真实内容尺寸
+  const realWidth = contentRef.value.scrollWidth
+  const realHeight = contentRef.value.scrollHeight
+
+  let changed = false
+
+  if (realWidth !== actualContentWidth.value) {
+    actualContentWidth.value = realWidth
+    changed = true
+  }
 
-  // 强制重新计算内容尺寸，特别是在宽度变化的情况下
-  contentRef.value.style.width = '100%'; // 确保内容区域宽度正确
-  contentRef.value.style.height = 'auto'; // 重置高度以测量实际需要的高度
+  if (realHeight !== actualContentHeight.value) {
+    actualContentHeight.value = realHeight
+    changed = true
+  }
 
-  // 获取实际内容高度
-  const actualHeight = contentRef.value.scrollHeight;
-  if (actualHeight !== actualContentHeight.value) {
-    actualContentHeight.value = actualHeight;
+  if (changed) {
     nextTick(() => {
       updateShapeBounds()
       debouncedReportMetrics()
     })
-
   }
-};
+}
 
 // 更新组件宽度和高度
+/**
+ * 更新组件宽高
+ */
 const updateShapeBounds = () => {
-  // 计算内容所需的最小总高度
-  const minTotalHeight = headerHeight.value + 15 + contentHeight.value + 10; // 加上一些额外空间
+  // 内容区左右 padding：foreignObject x=12，左右一共约 24
+  const contentRequiredWidth = actualContentWidth.value > 0
+    ? actualContentWidth.value + 24
+    : 0
+
+  // 标题区和内容区，取最大值
+  const requiredWidth = Math.max(
+    estimatedTextWidth.value,
+    contentRequiredWidth,
+    150
+  )
+
+  // 计算最小总高度
+  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);
+  ) + 50
 
-  // 获取当前组件尺寸
-  const currentWidth = props.shape.bounds?.width || 0;
-  const currentHeight = props.shape.bounds?.height || 0;
+  const explicitMinHeight = 110
+  const effectiveMinHeight = Math.max(
+    minTotalHeight,
+    fontSizeBasedMinHeight,
+    explicitMinHeight
+  )
 
-  // 获取所需宽度，确保包含文本内容和图标
-  const requiredWidth = Math.max(estimatedTextWidth.value, 120); // 确保至少有120的宽度
+  const currentWidth = props.shape.bounds?.width || 0
+  const currentHeight = props.shape.bounds?.height || 0
 
-  // 准备更新的属性
-  const updates: any = {};
+  const nextWidth = Math.max(currentWidth, requiredWidth)
+  const nextHeight = Math.max(currentHeight, effectiveMinHeight)
 
-  // 重要：无论是否在缩放中，都确保组件高度至少达到有效最小高度
-  // 这可以防止预览框在缩放过程中变得太小
-  if (currentHeight < effectiveMinHeight) {
-    updates.height = effectiveMinHeight;
-  }
+  // 宽高没变就不更新，避免死循环
+  if (nextWidth === currentWidth && nextHeight === currentHeight) return
 
-  // 无论是否在缩放中，都确保宽度至少达到所需宽度
-  // 这可以防止缩小时预览框右边不显示
-  if (currentWidth < requiredWidth) {
-    updates.width = requiredWidth;
-  }
-
-  // 如果有更新，则应用
-  if (Object.keys(updates).length > 0) {
-    graphStore.updateShape(props.shape.id, {
-      bounds: {
-        ...props.shape.bounds,
-        ...updates
-      }
-    });
-  }
-};
+  graphStore.updateShape(props.shape.id, {
+    bounds: {
+      ...props.shape.bounds,
+      width: nextWidth,
+      height: nextHeight
+    }
+  })
+}
 
 // 添加额外的尺寸保护，在拖拽结束后强制检查最小尺寸
 const enforceMinSizeOnResizeEnd = () => {
@@ -389,7 +408,7 @@ const debouncedUpdateShapeBounds = debounce(updateShapeBounds, 100);
 
 // 监听尺寸变化，更新compartment区域
 const debouncedReportMetrics = debounce(reportMetrics, 100);
-const debouncedMeasureContentHeight = debounce(measureContentHeight, 100);
+const debouncedMeasureContentSize = debounce(measureContentSize, 100)
 
 // 监听拖拽缩放事件
 const handleDragStart = () => {
@@ -407,7 +426,7 @@ onMounted(() => {
   nextTick(() => {
     reportMetrics();
     // 初始测量内容高度
-    setTimeout(measureContentHeight, 0);
+    setTimeout(measureContentSize, 0)
     // 初始更新图元尺寸
     updateShapeBounds();
   });
@@ -419,7 +438,7 @@ onMounted(() => {
   eventBus.on('shape-resize-end', enforceMinSizeOnResizeEnd);
 
   // 监听内容变化相关的事件
-  window.addEventListener('resize', debouncedMeasureContentHeight);
+  window.addEventListener('resize', debouncedMeasureContentSize)
 });
 
 // 监听shape变化，重新计算尺寸
@@ -428,7 +447,7 @@ watch(() => [props.shape.name, props.shape.keywords, props.shape.bounds?.width,
     nextTick(() => {
       reportMetrics();
       // 当内容或宽度变化时重新测量高度
-      debouncedMeasureContentHeight();
+      debouncedMeasureContentSize()
     });
   }
 }, { deep: true }); // 启用深度监听以捕获样式对象的变化
@@ -487,8 +506,7 @@ watch(
   () => {
     if (!isResizing.value) {
       nextTick(() => {
-        // 重新测量内容高度
-        debouncedMeasureContentHeight()
+        debouncedMeasureContentSize()
       })
     }
   },
@@ -499,7 +517,7 @@ onBeforeUnmount(() => {
   eventBus.off('shape-drag-end', handleDragEnd);
   eventBus.off('shape-resize-start', handleDragStart);
   eventBus.off('shape-resize-end', enforceMinSizeOnResizeEnd);
-  window.removeEventListener('resize', debouncedMeasureContentHeight);
+  window.removeEventListener('resize', debouncedMeasureContentSize)
 });
 // ================== 监听 bounds 宽高变化 ==================
 
@@ -521,24 +539,22 @@ const lastBounds = ref({
 watch(
   () => [props.shape.bounds.width, props.shape.bounds.height],
   ([newW, newH]) => {
-    if (!isGhost.value) return
-    // 宽高兜底到默认值（150 x 135）
+    // 只有真实图元变化时，才通知父元素扩容
+    if (isGhost.value) return
+
     const width = newW ?? DEFAULT_WIDTH
     const height = newH ?? DEFAULT_HEIGHT
 
-    // 如果和上一次一致，直接返回，避免重复触发
     if (
-      width == lastBounds.value.width &&
-      height == lastBounds.value.height
+      width === lastBounds.value.width &&
+      height === lastBounds.value.height
     ) {
       return
     }
 
-    // 更新“上一次”的记录
     lastBounds.value = { width, height }
-    // 只有当宽高不再是原始 150 x 135 时才认为“真的变化”，再去调用其他方法
-    if (
-      width !== DEFAULT_WIDTH || height !== DEFAULT_HEIGHT) {
+
+    if (width !== DEFAULT_WIDTH || height !== DEFAULT_HEIGHT) {
       graphStore.expandParentAndEmitSizeUpdateByChild(props.shape)
     }
   }