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

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'
@@ -798,12 +799,10 @@ export const useGraphStore = defineStore('graph', () => {
           }
         }
       }
-      console.log('1. endDragShape start')
       // 更新相关 edge 的 waypoints
       await EdgeUtils.updateRelatedEdgesAsync(shapes.value, changedIds, (shape) => {
         updateShape(shape.id, shape)
       }, edgesByNodeId.value, shapeMap.value)
-      console.log('2. updateRelatedEdgesAsync done')
       //对“本次直接拖动的隔间”做一次自动扩容检查
       autoExpandMovedCompartmentsAfterDrag(shapes.value, changedIds, updateShape)
       // 把 clone 也并入“需要同步 comparents 的变更集合”
@@ -861,10 +860,8 @@ export const useGraphStore = defineStore('graph', () => {
       }
       //对外只暴露一个事件：shape-drag-end
       eventBus.emit('shape-drag-end', payloads, ownerPayload, onNestDone)
-      console.log('3. emit done')
       // 清理拖拽状态
       cleanupAfterDrag()
-      console.log('4. cleanupAfterDrag done')
     } catch (e) {
       console.error('endDragShape 执行失败:', e)
     } finally {
@@ -1056,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
@@ -1159,5 +1178,6 @@ export const useGraphStore = defineStore('graph', () => {
     clearCutShapeIds,
     setCopiedShapesCount,
     setMatrixData,
+    applyAutoLayout,
   }
 })