@mx-sose-front/mx-sose-graph 1.2.9 → 1.3.1

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;
 

package/src/hooks/useConnectionPreview.ts

@@ -0,0 +1,405 @@
+import { ref, computed, watch, type Ref, type ComputedRef } from "vue";
+import type { Shape } from "../types";
+import type { InteractionLayerProps } from "../types/interactionLayer";
+import type { IHighlightUtils } from "./useHighlight";
+import { EdgeUtils } from "../utils/edgeUtils";
+import { getLayerStyle } from "../utils/diagram";
+import { useGraphStore } from "../store/graphStore";
+import { toLocalPoint, getBounds, inBounds } from "../utils/geom";
+import { pickTarget } from "../utils/hittest";
+import { eventBus } from "../store";
+import { createRAFThrottle } from "../utils/rafThrottle";
+
+export interface UseConnectionPreviewOptions {
+  props: InteractionLayerProps;
+  graphStore: ReturnType<typeof useGraphStore>;
+  highlightUtils: IHighlightUtils;
+  connectMode: Ref<string>;
+  layerRef: Ref<HTMLDivElement | null>;
+  highlightedShape: ComputedRef<Shape | null>;
+  pendingActionButton: Ref<boolean>;
+}
+
+/**
+ * 连线预览层：连接点状态、预览线样式、初始化/取消连接、悬停校验与 document 鼠标移动。
+ */
+export function useConnectionPreview(options: UseConnectionPreviewOptions) {
+  const {
+    props,
+    graphStore,
+    highlightUtils,
+    connectMode,
+    layerRef,
+    highlightedShape,
+    pendingActionButton,
+  } = options;
+
+  const { highlightShape, clearHighlightTimeout } = highlightUtils;
+
+  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);
+  const recordClickPoint = ref({ x: 0, y: 0 });
+  const isConnectAllowed = ref(false);
+
+  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 initializeConnectPoint = () => {
+    if (props.connectShapeData?.sourceId && props.diagramBounds) {
+      const sourceShape = props.connectShapeData?.sourceId
+        ? graphStore.shapeMap.get(props.connectShapeData.sourceId)
+        : undefined;
+
+      const initialPoint = EdgeUtils.initializeConnectPoint(
+        sourceShape,
+        recordClickPoint.value,
+        props.diagramBounds
+      );
+
+      if (initialPoint && sourceShape) {
+        currentConnectPoint.value = initialPoint;
+
+        if (!isConnecting.value) {
+          graphStore.clearSelection();
+          isConnecting.value = true;
+          showLine.value = true;
+        }
+      } else {
+        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%)",
+    };
+  });
+
+  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 "";
+    }
+
+    const { x: startX, y: startY } = currentConnectPoint.value;
+
+    let endX: number;
+    let endY: number;
+    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 }
+    );
+  });
+
+  const layerStyle = computed(() => getLayerStyle(props.diagramBounds));
+
+  const cancelConnection = () => {
+    EdgeUtils.cancelConnection(
+      {
+        isConnecting,
+        currentConnectPoint,
+        mousePosition,
+        targetConnectPoint,
+        targetShape,
+        showLine,
+      },
+      highlightUtils
+    );
+  };
+
+  const connectMouseMoveThrottle = createRAFThrottle();
+
+  let lastHoverShapeId: string | null = null;
+  let edgeCheckDebounceTimer: ReturnType<typeof setTimeout> | null = null;
+  const EDGE_CHECK_DEBOUNCE_DELAY = 150;
+
+  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);
+      }
+      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;
+        }
+      }
+
+      if (lastHoverShapeId !== hoverShape.id) {
+        if (edgeCheckDebounceTimer) {
+          clearTimeout(edgeCheckDebounceTimer);
+          edgeCheckDebounceTimer = null;
+        }
+
+        highlightShape(null, false);
+        isConnectAllowed.value = false;
+
+        lastHoverShapeId = hoverShape.id;
+
+        if (props.connectShapeData) {
+          edgeCheckDebounceTimer = setTimeout(() => {
+            let sourceModelId;
+            if (
+              props.connectShapeData?.modelId &&
+              props.connectShapeData.modelId.toString().trim() !== ""
+            ) {
+              sourceModelId = props.connectShapeData.modelId;
+            } else if (
+              props.connectShapeData?.sourceModelId &&
+              props.connectShapeData.sourceModelId.toString().trim() !== ""
+            ) {
+              sourceModelId = props.connectShapeData.sourceModelId;
+            }
+            if (sourceModelId) {
+              eventBus.emit("edge-check", {
+                sourceModelId: sourceModelId,
+                targetModelId: hoverShape.modelId,
+                isAllowed: isAllowed,
+              });
+            }
+
+            highlightShape(hoverShape, true, isAllowed);
+            isConnectAllowed.value = isAllowed;
+          }, EDGE_CHECK_DEBOUNCE_DELAY);
+        }
+      }
+    } else {
+      if (edgeCheckDebounceTimer) {
+        clearTimeout(edgeCheckDebounceTimer);
+        edgeCheckDebounceTimer = null;
+      }
+      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;
+
+    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,
+      };
+    }
+  };
+
+  const handleMouseMove = (event: MouseEvent) => {
+    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);
+      }
+    })(event);
+  };
+
+  const handleMouseLeave = () => {
+    if (isConnecting.value) {
+      showLine.value = false;
+    }
+    highlightShape(null, false);
+    clearHighlightTimeout();
+  };
+
+  watch(
+    () => isConnecting.value,
+    (newVal) => {
+      if (!newVal) {
+        if (edgeCheckDebounceTimer) {
+          clearTimeout(edgeCheckDebounceTimer);
+          edgeCheckDebounceTimer = null;
+        }
+        lastHoverShapeId = null;
+        isConnectAllowed.value = false;
+        highlightShape(null, false);
+      }
+    }
+  );
+
+  watch(
+    () => props.edgeCheck,
+    (newEdgeCheck) => {
+      if (
+        isConnecting.value &&
+        highlightedShape.value &&
+        newEdgeCheck !== undefined
+      ) {
+        highlightShape(highlightedShape.value, true, newEdgeCheck);
+      }
+    }
+  );
+
+  return {
+    mousePosition,
+    showLine,
+    currentConnectPoint,
+    isConnecting,
+    targetConnectPoint,
+    targetShape,
+    recordClickPoint,
+    isConnectAllowed,
+    dotStyle,
+    svgStyle,
+    linePoints,
+    layerStyle,
+    cancelConnection,
+    initializeConnectPoint,
+    getCurrentTargetModels,
+    resolveConnectTargetAtPoint,
+    handleMouseMove,
+    handleMouseLeave,
+  };
+}

package/src/store/graphStore.ts

@@ -27,6 +27,7 @@ import { batchAutoExpandParents } from '../utils/batchAutoExpand'
 import { adjustCanvasToFitAllShapes } from '../utils/diagram'
 import { applyReparentAndClone, autoExpandMovedCompartmentsAfterDrag, buildDragEndPayloads, buildPrevParentMap, collectAffectedShapeIds, createOnNestDoneCallback } from '../utils/graphDragService'
 import { createShapeOperator, type ShapeOp, type ShapeId } from "../utils/shapeOps/shapeOps"
+import { autoLayout, type AutoLayoutOptions, type LayoutResult } from '../utils/autoLayout'
 type Rect = { x: number; y: number; width: number; height: number };
 
 const GRAPH_SELECTION_STORAGE_KEY = 'mx-sose-graph:selected-state'
@@ -1052,6 +1053,28 @@ export const useGraphStore = defineStore('graph', () => {
     // eventBus.emit('shape-size-update', payload)
   }
 
+  /**
+   * 自动布局画布上的所有图元
+   * 基于 ELK 分层算法，支持横向/纵向布局
+   */
+  const applyAutoLayout = async (options?: AutoLayoutOptions): Promise<LayoutResult> => {
+    const result = await autoLayout(shapes.value, options)
+
+    for (const [id, bounds] of result.nodeUpdates) {
+      updateShape(id, { bounds })
+    }
+
+    await EdgeUtils.updateRelatedEdgesAsync(
+      shapes.value,
+      result.affectedNodeIds,
+      (shape) => updateShape(shape.id, shape),
+      edgesByNodeId.value,
+      shapeMap.value
+    )
+
+    return result
+  }
+
   // 设置鼠标是否在图元区域
   const setIsMouseInGraphView = (isIn: boolean) => {
     museInGraphView.value = isIn
@@ -1155,5 +1178,6 @@ export const useGraphStore = defineStore('graph', () => {
     clearCutShapeIds,
     setCopiedShapesCount,
     setMatrixData,
+    applyAutoLayout,
   }
 })