@mx-sose-front/mx-sose-graph 1.2.8 → 1.3.0

package/src/components/InteractionLayer.vue

@@ -107,7 +107,6 @@ import NameEditor from "./NameEditor/NameEditor.vue";
 // 工具：几何/命中/样式/拖拽
 import {
   toLocalPoint,
-  inBounds,
   getBounds,
   getDiagramRect,
   rectFromPoints,
@@ -118,11 +117,7 @@ import {
   isInsideCanvasClient,
 } from "../utils/geom";
 import { pickTarget } from "../utils/hittest";
-import {
-  actionButtonsStyle,
-  getMarqueeStyle,
-  getLayerStyle,
-} from "../utils/diagram";
+import { actionButtonsStyle, getMarqueeStyle } from "../utils/diagram";
 import { withDrag } from "../utils/dom";
 import { checkNestViaFront } from "../utils/policy";
 import { getShapeComponent, getShapeStyle } from "../render/shape-renderer";
@@ -143,6 +138,7 @@ import { useNameEdit } from "../hooks/useNameEdit";
 import { guardOperate } from "../utils/license-guard";
 import { useResize } from "../hooks/useResize";
 import { useHighlight, type IHighlightUtils } from "../hooks/useHighlight";
+import { useConnectionPreview } from "../hooks/useConnectionPreview";
 import { createRAFThrottle, createRAFDebounce } from "../utils/rafThrottle";
 import {
   buildPackageOutlineOverlay,
@@ -312,14 +308,6 @@ const marqueeAnchor = ref<{ x: number; y: number } | null>(null);
 // 是否多选
 const isMultiSelected = computed(() => graphStore.selectedIds.length > 1);
 
-// 连接层相关状态
-const mousePosition = ref({ x: 0, y: 0 });
-const showLine = ref(false);
-const currentConnectPoint = ref({ x: 0, y: 0 });
-const isConnecting = ref(false); // 是否正在连接状态
-const targetConnectPoint = ref({ x: 0, y: 0 }); // 目标连接点
-const targetShape = ref<Shape | null>(null); // 目标图形
-
 // 高亮相关 - 使用 Composable
 const {
   overlayBounds: highlightOverlayBounds,
@@ -336,12 +324,42 @@ const highlightUtils: IHighlightUtils = {
   clearHighlightTimeout,
 };
 
-// 保持兼容性：highlightedShape 计算属性
 const highlightedShape = computed(() => {
   if (!highlightedShapeId.value) return null;
   return graphStore.shapeMap.get(highlightedShapeId.value) ?? null;
 });
 
+const pendingActionButton = ref(false);
+
+const {
+  mousePosition,
+  showLine,
+  currentConnectPoint,
+  isConnecting,
+  targetConnectPoint,
+  targetShape,
+  recordClickPoint,
+  isConnectAllowed,
+  dotStyle,
+  svgStyle,
+  linePoints,
+  layerStyle,
+  cancelConnection,
+  initializeConnectPoint,
+  getCurrentTargetModels,
+  resolveConnectTargetAtPoint,
+  handleMouseMove,
+  handleMouseLeave,
+} = useConnectionPreview({
+  props,
+  graphStore,
+  highlightUtils,
+  connectMode,
+  layerRef,
+  highlightedShape,
+  pendingActionButton,
+});
+
 // 包图元使用“文件夹轮廓”高亮，其他图元继续沿用默认矩形覆盖层。
 const isPackageShape = (shape: Shape | null | undefined) => {
   return !!shape?.shapeKey && !!props.packages?.includes(shape.shapeKey);
@@ -375,59 +393,8 @@ const highlightPackageOutline = computed(() =>
   }),
 );
 
-const getCurrentTargetModels = () => {
-  if (connectMode.value === "action") {
-    return (
-      props.connectShapeData?.scenarioMenus?.find(
-        (menu) => menu.code === props.connectShapeData?.shapeKey
-      )?.targetModels ?? props.connectShapeData?.targetModels
-    );
-  }
-
-  return props.connectShapeData?.targetModels;
-};
-
-const resolveConnectTargetAtPoint = (pt: { x: number; y: number }) => {
-  const hit = pickTarget(graphStore.shapes, pt);
-
-  if (
-    ["shape", "pin"].includes(hit.kind) &&
-    hit.shape?.id &&
-    hit.shape.id !== props.connectShapeData?.sourceId
-  ) {
-    return hit.shape;
-  }
-
-  const hoveredShape = highlightedShape.value;
-  if (
-    !hoveredShape?.id ||
-    hoveredShape.id === props.connectShapeData?.sourceId
-  ) {
-    return null;
-  }
-
-  const bounds = getBounds(hoveredShape);
-  const minSide = Math.min(bounds.width, bounds.height);
-  const padding = minSide <= 30 ? 8 : minSide <= 40 ? 6 : 0;
-
-  if (
-    inBounds(pt, {
-      x: bounds.x - padding,
-      y: bounds.y - padding,
-      width: bounds.width + padding * 2,
-      height: bounds.height + padding * 2,
-    })
-  ) {
-    return hoveredShape;
-  }
-
-  return null;
-};
-
 const sourceShape = ref<Shape | null>(null);
-const recordClickPoint = ref({ x: 0, y: 0 });
-// 等待后端创建图元中，冻结连线预览
-const pendingActionButton = ref(false);
+// 等待后端创建图元中，冻结连线预览（pendingActionButton 见 useConnectionPreview）
 
 // 正在交互：缩放中 或 元素拖动中
 const isBusy = computed(
@@ -868,9 +835,6 @@ const showContextMenu = ref(false);
 const contextMenuPosition = ref({ x: 0, y: 0 });
 const contextMenuTarget = ref<Shape | null>(null);
 
-// 是否允许连接当前高亮的图元
-const isConnectAllowed = ref(false);
-
 // 处理右键点击事件
 const handleContextMenu = (event: MouseEvent) => {
   return guardOperate(async () => {
@@ -975,206 +939,6 @@ watch(
   }
 );
 
-// 鼠标移动事件处理 - 使用 RAF 节流优化
-const handleMouseMove = (event: MouseEvent) => {
-  // 使用 RAF 节流，同一帧内多次调用会合并为最后一次
-  connectMouseMoveThrottle.throttle((evt: MouseEvent) => {
-    const { clientX, clientY } = evt;
-    const localPoint = toLocalPoint(evt, layerRef.value);
-    // 使用工具类检查是否在画布内
-    if (EdgeUtils.isWithinCanvas(clientX, clientY)) {
-      mousePosition.value = { x: localPoint.x, y: localPoint.y };
-
-      // 只有在连接状态下才显示线条
-      if (isConnecting.value && !pendingActionButton.value) {
-        showLine.value = true;
-        updateConnectPointToNearest(localPoint.x, localPoint.y);
-        checkHoverTarget(localPoint.x, localPoint.y);
-      }
-    } else {
-      if (isConnecting.value) {
-        showLine.value = false;
-      }
-      highlightShape(null, false); // 使用highlightShape函数取消高亮，恢复原始样式
-    }
-  })(event);
-};
-
-// 用于跟踪上一次的hoverShape，避免重复发射事件
-let lastHoverShapeId: string | null = null;
-
-// 创建 RAF 节流实例用于连线时的鼠标移动
-const connectMouseMoveThrottle = createRAFThrottle();
-
-// 用于防抖 edge-check 事件和高亮，只有鼠标停留一段时间后才触发
-let edgeCheckDebounceTimer: ReturnType<typeof setTimeout> | null = null;
-const EDGE_CHECK_DEBOUNCE_DELAY = 150; // 150ms 防抖延迟
-
-const checkHoverTarget = (x: number, y: number) => {
-  if (!props.diagramBounds) return;
-
-  // 使用工具类检查悬停目标
-  const hoverShape = EdgeUtils.checkHoverTarget(
-    x,
-    y,
-    graphStore.shapes,
-    props.diagramBounds,
-    props.connectShapeData?.sourceId
-  );
-  clearHighlightTimeout();
-
-  if (hoverShape) {
-    // 检查连接有效性
-    const targetModels = getCurrentTargetModels();
-    let isAllowed = true;
-    if (
-      targetModels &&
-      Array.isArray(targetModels) &&
-      targetModels.length > 0
-    ) {
-      const hoverShapeType = hoverShape.shapeKey || "";
-      isAllowed = targetModels.includes(hoverShapeType);
-    }
-    // 检查parenShapeId是否匹配（无论hoverShape是否改变都要检查）
-    if (props.connectShapeData?.sourceId) {
-      const sourceShape = graphStore.shapeMap.get(
-        props.connectShapeData.sourceId
-      );
-      if (
-        sourceShape &&
-        sourceShape.parenShapeId !== hoverShape.parenShapeId &&
-        hoverShape.shapeType !== "pin" &&
-        sourceShape.shapeType !== "pin"
-      ) {
-        isAllowed = false;
-      }
-    }
-
-    // 当 hoverShape 改变时，清除之前的防抖定时器
-    if (lastHoverShapeId !== hoverShape.id) {
-      // 清除旧的防抖定时器
-      if (edgeCheckDebounceTimer) {
-        clearTimeout(edgeCheckDebounceTimer);
-        edgeCheckDebounceTimer = null;
-      }
-
-      // 立即取消之前图元的高亮（如果有）
-      highlightShape(null, false);
-      isConnectAllowed.value = false;
-
-      lastHoverShapeId = hoverShape.id;
-
-      // 只有当 connectShapeData 存在时才设置防抖定时器
-      if (props.connectShapeData) {
-        // 使用防抖：只有鼠标停留一段时间后才发射 edge-check 事件和高亮
-        edgeCheckDebounceTimer = setTimeout(() => {
-          // 使用更严格的优先级判断逻辑，确保只要有一个属性有实际值就使用它
-          let sourceModelId;
-          // 如果modelId是有效字符串或数字，使用modelId
-          if (
-            props.connectShapeData?.modelId &&
-            props.connectShapeData.modelId.toString().trim() !== ""
-          ) {
-            sourceModelId = props.connectShapeData.modelId;
-          }
-          // 否则，如果sourceModelId是有效字符串或数字，使用sourceModelId
-          else if (
-            props.connectShapeData?.sourceModelId &&
-            props.connectShapeData.sourceModelId.toString().trim() !== ""
-          ) {
-            sourceModelId = props.connectShapeData.sourceModelId;
-          }
-          // 只有当sourceModelId有值时就发射事件，并将isAllowed的值一并传递
-          if (sourceModelId) {
-            eventBus.emit("edge-check", {
-              sourceModelId: sourceModelId, // 显式指定键值对，避免属性简写可能带来的混淆
-              targetModelId: hoverShape.modelId,
-              isAllowed: isAllowed, // 将验证结果一并发射
-            });
-          }
-
-          // 高亮目标图元 - 根据isAllowed决定高亮颜色
-          highlightShape(hoverShape, true, isAllowed);
-          isConnectAllowed.value = isAllowed;
-        }, EDGE_CHECK_DEBOUNCE_DELAY);
-      }
-    }
-  } else {
-    // 如果没有悬停在目标上
-    // 清除防抖定时器
-    if (edgeCheckDebounceTimer) {
-      clearTimeout(edgeCheckDebounceTimer);
-      edgeCheckDebounceTimer = null;
-    }
-    // 重置lastHoverShapeId
-    lastHoverShapeId = null;
-    // 立即取消高亮（无需延迟，因为高亮本身已有防抖）
-    clearHighlightTimeout();
-    highlightShape(null, false);
-    isConnectAllowed.value = false;
-  }
-};
-
-// 更新连接点到最近的点
-const updateConnectPointToNearest = (mouseX: number, mouseY: number) => {
-  if (!props.connectShapeData?.sourceId || !props.diagramBounds) return;
-
-  const sourceShape = props.connectShapeData?.sourceId
-    ? graphStore.shapeMap.get(props.connectShapeData.sourceId)
-    : undefined;
-
-  // 使用同步版本，避免 Worker 异步延迟导致连线跟不上鼠标
-  const nearestPoint = EdgeUtils.findNearestConnectPoint(
-    { x: mouseX, y: mouseY },
-    sourceShape
-  );
-
-  if (
-    nearestPoint &&
-    nearestPoint.x !== undefined &&
-    nearestPoint.y !== undefined
-  ) {
-    currentConnectPoint.value = {
-      x: nearestPoint.x,
-      y: nearestPoint.y,
-    };
-  }
-};
-
-// 监听isConnecting变化，重置连接状态
-watch(
-  () => isConnecting.value,
-  (newVal) => {
-    if (!newVal) {
-      // 清除防抖定时器
-      if (edgeCheckDebounceTimer) {
-        clearTimeout(edgeCheckDebounceTimer);
-        edgeCheckDebounceTimer = null;
-      }
-      // 重置 lastHoverShapeId
-      lastHoverShapeId = null;
-      isConnectAllowed.value = false;
-      highlightShape(null, false); // 取消图元高亮
-    }
-  }
-);
-
-// 监听edgeCheck变化，当后端验证结果返回后更新高亮颜色
-watch(
-  () => props.edgeCheck,
-  (newEdgeCheck) => {
-    // 只有在连接状态下且有高亮图元时才更新
-    if (
-      isConnecting.value &&
-      highlightedShape.value &&
-      newEdgeCheck !== undefined
-    ) {
-      // 使用后端验证结果更新高亮颜色
-      highlightShape(highlightedShape.value, true, newEdgeCheck);
-    }
-  }
-);
-
 // 处理连接层点击事件
 const handleConnectLayerClick = (
   event: MouseEvent,
@@ -1312,142 +1076,6 @@ const completeConnection = async (
     clearHighlightTimeout();
   }
 };
-// 鼠标离开事件处理
-const handleMouseLeave = () => {
-  if (isConnecting.value) {
-    showLine.value = false;
-  }
-  highlightShape(null, false); // 取消图元高亮
-  clearHighlightTimeout();
-};
-
-// 初始化连接点位置
-const initializeConnectPoint = () => {
-  if (props.connectShapeData?.sourceId && props.diagramBounds) {
-    const sourceShape = props.connectShapeData?.sourceId
-      ? graphStore.shapeMap.get(props.connectShapeData.sourceId)
-      : undefined;
-
-    // 使用工具类初始化连接点，传递当前鼠标位置和diagramBounds
-    // 这样可以确保即使是第一次连线，也能计算出图元边界上的合适连接点，而不是使用中心点
-    const initialPoint = EdgeUtils.initializeConnectPoint(
-      sourceShape,
-      recordClickPoint.value, // 传递鼠标点击位置
-      props.diagramBounds // 传递图表边界
-    );
-
-    if (initialPoint && sourceShape) {
-      // 确保sourceShape存在，防止从工具栏拖拽时错误初始化
-      currentConnectPoint.value = initialPoint;
-
-      if (!isConnecting.value) {
-        // 进入连线状态前清空选中状态
-        graphStore.clearSelection();
-        isConnecting.value = true;
-        showLine.value = true;
-      }
-    } else {
-      // 如果没有找到sourceShape，重置连接状态
-      isConnecting.value = false;
-      showLine.value = false;
-    }
-  }
-};
-
-// 直接计算黑点样式 - 使用动态连接点
-const dotStyle = computed(() => {
-  if (!props.connectShapeData || !props.diagramBounds) {
-    return { display: "none" };
-  }
-
-  // 使用动态连接点位置
-  const { x, y } = currentConnectPoint.value;
-
-  return {
-    position: "absolute" as const,
-    left: `${x}px`,
-    top: `${y}px`,
-    width: "8px",
-    height: "8px",
-    pointerEvents: "none" as const,
-    zIndex: 1001,
-    transform: "translate(-50%, -50%)",
-  };
-});
-
-// SVG 样式
-const svgStyle = computed(() => {
-  if (
-    !props.connectShapeData ||
-    !props.connectShapeData.bounds ||
-    !props.diagramBounds
-  ) {
-    return { display: "none" };
-  }
-
-  return {
-    position: "absolute" as const,
-    left: "0px",
-    top: "0px",
-    width: "100%",
-    height: "100%",
-    pointerEvents: "none" as const,
-    zIndex: 1000,
-  };
-});
-
-// 计算直角线路径点（增加状态有效性判断）
-const linePoints = computed(() => {
-  // 新增：若未处于连线状态 / 线条未显示 / 无有效连接点，直接返回空值
-  if (
-    !isConnecting.value ||
-    !showLine.value ||
-    !props.connectShapeData ||
-    !props.diagramBounds ||
-    currentConnectPoint.value.x === 0 || // 排除无效默认值
-    currentConnectPoint.value.y === 0
-  ) {
-    return ""; // 返回空字符串，SVG 不会渲染任何线条
-  }
-
-  const { x: startX, y: startY } = currentConnectPoint.value;
-
-  let endX, endY;
-  // 仅在连线状态下计算终点（避免无效值）
-  if (isConnecting.value) {
-    endX = mousePosition.value.x;
-    endY = mousePosition.value.y;
-  } else if (targetConnectPoint.value) {
-    endX = targetConnectPoint.value.x;
-    endY = targetConnectPoint.value.y;
-  } else {
-    return "";
-  }
-
-  // 使用工具类计算线路径
-  return EdgeUtils.calculateLinePoints(
-    { x: startX, y: startY },
-    { x: endX, y: endY }
-  );
-});
-
-// 连接层样式 - 定位到 diagramBounds 位置，确保在最顶层
-const layerStyle = computed(() => getLayerStyle(props.diagramBounds));
-
-// 取消连线的方法（完全重置所有相关状态）
-const cancelConnection = () => {
-  EdgeUtils.cancelConnection(
-    {
-      isConnecting,
-      currentConnectPoint,
-      mousePosition,
-      targetConnectPoint,
-      targetShape,
-      showLine,
-    },
-    highlightUtils
-  );
-};
 
 // 监听 connectShapeData 变化，重新初始化连接点
 watch(

package/src/components/Matrix/Matrix.vue

@@ -1,8 +1,9 @@
 <template>
-  <div class="matrix">
+  <div ref="matrixRef" class="matrix">
 
     <!-- 矩阵表格：左侧行树（文件夹+方框 / 橙圆C+三角），表头仅 1-7，虚线层级 -->
-    <div class="matrix-table-wrap">
+    <div class="matrix-table-wrap" :style="tableWrapStyle">
+      <div class="matrix-table-scroll">
       <table class="matrix-table">
         <thead>
           <tr v-for="(row, rowIndex) in columnHeaderRows" :key="rowIndex">
@@ -147,6 +148,7 @@
           </tr>
         </tbody>
       </table>
+      </div>
     </div>
     <!-- 矩阵右键菜单 -->
     <MatrixContextMenu
@@ -162,7 +164,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
 import type { TreeNode, ColumnHeaderCell } from '../../types'
 import type { Matrix } from '../../types'
 import {
@@ -177,6 +179,27 @@ import { useGraphStore } from '../../store/graphStore'
 import { getIcon } from '../../utils/iconLoader'
 import MatrixContextMenu from '../MatrixContextMenu/MatrixContextMenu.vue'
 
+/** 表格滚动区高度 = .matrix 内容区高度 - 预留高度 */
+const MATRIX_TABLE_WRAP_HEIGHT_OFFSET = 50
+
+const matrixRef = ref<HTMLElement | null>(null)
+const tableWrapHeight = ref<number | null>(null)
+
+const tableWrapStyle = computed(() => {
+  if (tableWrapHeight.value == null) return undefined
+  return { height: `${tableWrapHeight.value}px` }
+})
+
+function updateTableWrapHeight(): void {
+  const el = matrixRef.value
+  if (!el) return
+  const h = el.clientHeight
+  if (h <= 0) return
+  tableWrapHeight.value = Math.max(0, h - MATRIX_TABLE_WRAP_HEIGHT_OFFSET)
+}
+
+let matrixResizeObserver: ResizeObserver | null = null
+
 /** 当前选中的行 id、列 id（点击行头/列头/单元格时更新并通过 eventBus 发出） */
 const selectedRowId = ref<string | null>(null)
 const selectedColumnId = ref<string | null>(null)
@@ -228,12 +251,35 @@ function onMatrixDataChange(payload: Matrix): void {
 }
 
 const handleMatrixDataChange = (payload: Matrix) => onMatrixDataChange(payload)
+
+function setupMatrixResizeObserver(): void {
+  const el = matrixRef.value
+  if (!el) return
+  updateTableWrapHeight()
+  if (typeof ResizeObserver === 'undefined') return
+  matrixResizeObserver?.disconnect()
+  matrixResizeObserver = new ResizeObserver(() => updateTableWrapHeight())
+  matrixResizeObserver.observe(el)
+}
+
+function teardownMatrixResizeObserver(): void {
+  matrixResizeObserver?.disconnect()
+  matrixResizeObserver = null
+}
+
 onMounted(() => {
   eventBus.on('matrix-data-change', handleMatrixDataChange)
+  nextTick(() => {
+    setupMatrixResizeObserver()
+    window.addEventListener('resize', updateTableWrapHeight)
+  })
 })
 onUnmounted(() => {
   eventBus.off('matrix-data-change', handleMatrixDataChange)
+  teardownMatrixResizeObserver()
+  window.removeEventListener('resize', updateTableWrapHeight)
 })
+
 const rowTreeNodes = computed(() => matrixData.value.rowTree)
 const columnTreeNodes = computed(() => matrixData.value.columnTree)
 const matrixNodes = computed(() => matrixData.value.crossData)
@@ -283,6 +329,12 @@ const columnHeaderRows = computed((): ColHeaderCell[][] => {
   })
 })
 
+watch(
+  [matrixData, columnHeaderRows, flattenedRows, rowExpandedIds, columnExpandedIds],
+  () => nextTick(updateTableWrapHeight),
+  { deep: true },
+)
+
 /** 行树连接器：计算每行在每个祖先深度是否还有后续兄弟（用于画 │ 或 └） */
 const flatRowsWithConnectors = computed(() => {
   const items = flattenedRows.value
@@ -474,6 +526,8 @@ defineExpose({ setMatrixData })
 .matrix {
   width: 100%;
   height: 100%;
+  min-width: 0;
+  min-height: 0;
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -552,13 +606,25 @@ defineExpose({ setMatrixData })
 }
 
 .matrix-table-wrap {
-  flex: 1;
-  overflow: auto;
+  flex: 0 0 auto;
+  width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: auto;
   padding: 12px;
+  box-sizing: border-box;
+}
+
+/* 内层撑开表格宽度，外层 wrap 才能正确出现横向滚动条 */
+.matrix-table-scroll {
+  display: inline-block;
+  min-width: 100%;
+  vertical-align: top;
 }
 
 .matrix-table {
   border-collapse: collapse;
+  width: max-content;
   min-width: 100%;
   font-size: 12px;