@mx-sose-front/mx-sose-graph 1.1.0 → 1.1.2

package/src/utils/resizeUtils.ts

@@ -0,0 +1,463 @@
+import { ref, type Ref } from 'vue';
+import type { Shape, Rect } from '../types';
+import { useGraphStore } from '../store/graphStore';
+import { toLocalPoint, ghostResizeStep } from './geom';
+import { calculateTextMinWidth } from './diagram';
+import { getPolicy } from './policy';
+import { withDrag } from './dom';
+import { isCompartment, clampCompartmentResize } from './compartment';
+import { clampParentRectToChildrenGap } from './containers';
+import { finalizeAfterTransform } from './drag';
+import { normalizeZOrder } from './zorder';
+import { eventBus } from '../store';
+
+/**
+ * 缩放操作的全局最小尺寸限制
+ */
+const minW = 50;
+const minH = 30;
+
+/**
+ * 最小尺寸配置接口
+ * @property minW - 最小宽度
+ * @property minH - 最小高度
+ */
+export interface MinDimensions {
+  minW: number;
+  minH: number;
+}
+
+/**
+ * 最小尺寸计算模式
+ * @property RESIZE - 缩放过程中的最小尺寸
+ * @property STOP - 缩放结束时的最小尺寸
+ */
+export enum MinDimensionMode {
+  RESIZE = 'resize',
+  STOP = 'stop'
+}
+
+/**
+ * 缩放状态接口
+ * 包含缩放过程中需要追踪的所有响应式状态
+ */
+export interface ResizeState {
+  isResizing: Ref<boolean>;                    // 是否正在缩放
+  resizeDirection: Ref<string>;                // 当前缩放方向 (nw/ne/sw/se)
+  startPos: Ref<{ x: number; y: number }>;    // 缩放起始鼠标位置
+  startBounds: Ref<Rect>;                      // 缩放起始时的元素边界
+  resizingTarget: Ref<Shape | null>;           // 当前缩放的目标元素
+  groupBase: Ref<Record<string, Rect>>;       // 缩放前的基础边界（用于多选）
+  groupGhost: Ref<Record<string, Rect>>;      // 缩放预览边界（用于多选）
+}
+
+/**
+ * 缩放配置接口
+ * @property packages - 需要特殊最小高度处理的 shapeKey 列表
+ * @property diagram - diagram 组件的 shapeKey 列表
+ * @property taggedValueLabels - taggedValueLabels 组件的 shapeKey 列表
+ */
+export interface ResizeConfig {
+  packages?: string[];
+  diagram?: string[];
+  taggedValueLabels?: string[];
+}
+
+/**
+ * 缩放回调函数接口
+ */
+export interface ResizeCallbacks {
+  onResizeStart?: (target: Shape) => void;      // 缩放开始时回调
+  onResizeEnd?: (target: Shape) => void;        // 缩放结束时回调
+  onShapeUpdate?: (id: string, updates: { bounds: Rect }) => void; // 元素更新时回调
+}
+
+/**
+ * 创建缩放工具函数
+ * 
+ * 功能：
+ * - 封装缩放操作的所有状态和方法
+ * - 提供响应式的缩放状态供外部使用
+ * - 处理缩放的完整生命周期（开始、进行中、结束、取消）
+ * 
+ * @param layerRef - 交互层的 DOM 引用
+ * @param config - 缩放配置（包含各类型组件的 shapeKey 列表）
+ * @param callbacks - 缩放过程的回调函数
+ * @returns 缩放工具对象，包含所有状态和方法
+ */
+export function createResizeUtils(
+  layerRef: { value: HTMLDivElement | null },
+  config: ResizeConfig,
+  callbacks: ResizeCallbacks = {}
+) {
+  const graphStore = useGraphStore();
+
+  // ========== 缩放状态 ==========
+  
+  const isResizing = ref(false);  // 是否正在缩放
+  const resizeDirection = ref<"nw" | "ne" | "sw" | "se" | "">("");  // 当前缩放方向
+  const startPos = ref({ x: 0, y: 0 });  // 鼠标按下时的位置
+  const startBounds = ref({ x: 0, y: 0, width: 0, height: 0 });  // 元素原始边界
+  const resizingTarget = ref<Shape | null>(null);  // 当前缩放的目标元素
+  const groupBase = ref<Record<string, Rect>>({});  // 多选时的原始边界
+  const groupGhost = ref<Record<string, Rect>>({});  // 多选时的预览边界
+
+  let offDrag: (() => void) | null = null;  // 拖拽清理函数
+
+  /**
+   * 获取指定元素的最小尺寸限制
+   * 
+   * 根据元素的 shapeKey 类型返回不同的最小高度和宽度限制
+   * 不同类型的组件有不同的最小尺寸要求
+   * 
+   * @param shape - 要计算最小尺寸的元素
+   * @param baseMinW - 基础最小宽度（默认 50）
+   * @param mode - 计算模式（RESIZE 或 STOP）
+   * @returns 最小尺寸配置 { minW, minH }
+   */
+  const getMinDimensions = (
+    shape: Shape,
+    baseMinW: number = minW,
+    mode: MinDimensionMode = MinDimensionMode.RESIZE
+  ): MinDimensions => {
+    let result: MinDimensions = { minW: baseMinW, minH: 60 };
+
+    if (shape.shapeKey) {
+      // packages 类型：缩放时最小高度 75，结束时 90
+      if (config.packages && config.packages.includes(shape.shapeKey)) {
+        result.minH = mode === MinDimensionMode.RESIZE ? 75 : 90;
+      } 
+      // diagram 类型：缩放时最小高度 80，结束时 50
+      else if (config.diagram && config.diagram.includes(shape.shapeKey)) {
+        result.minH = mode === MinDimensionMode.RESIZE ? 80 : 50;
+      } 
+      // taggedValueLabels 类型：最小高度 125
+      else if (config.taggedValueLabels && config.taggedValueLabels.includes(shape.shapeKey)) {
+        result.minH = 125;
+      } 
+      // pin 类型：最小宽高 22
+      else if (graphStore.pinsTypes.includes(shape.shapeKey)) {
+        result.minH = 22;
+        result.minW = 22;
+      } 
+      // port 类型：最小宽高 22
+      else if (graphStore.portsTypes.includes(shape.shapeKey)) {
+        result.minH = 22;
+        result.minW = 22;
+      }
+    }
+
+    return result;
+  };
+
+  /**
+   * 开始缩放
+   * 
+   * 触发时机：用户按下缩放手柄时
+   * 
+   * 执行步骤：
+   * 1. 检查是否允许缩放（ConceptRole 或多选时不允）
+   * 2. 设置缩放状态（isResizing = true）
+   * 3. 记录缩放方向和目标元素
+   * 4. 记录起始位置和元素边界
+   * 5. 初始化 groupBase 和 groupGhost
+   * 6. 绑定拖拽事件监听（mousemove 和 mouseup）
+   * 
+   * @param e - 鼠标事件
+   * @param dir - 缩放方向 (nw/ne/sw/se)
+   * @param target - 目标元素
+   */
+  const startResize = (
+    e: MouseEvent,
+    dir: "nw" | "ne" | "sw" | "se",
+    target: Shape
+  ) => {
+    // ConceptRole 类型不允许缩放
+    if (target.shapeKey === 'ConceptRole') {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+
+    // 多选状态下不允许缩放
+    if (graphStore.selectedIds.length > 1) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+
+    // 阻止默认行为和事件冒泡
+    e.preventDefault();
+    e.stopPropagation();
+
+    // 设置缩放状态
+    isResizing.value = true;
+    resizingTarget.value = target;
+    resizeDirection.value = dir;
+
+    // 触发开始回调
+    callbacks.onResizeStart?.(target);
+
+    // 记录起始位置
+    const anchor = toLocalPoint(e, layerRef.value!);
+    startPos.value = { x: anchor.x, y: anchor.y };
+
+    // 记录起始边界
+    const b = target.bounds ?? {};
+    startBounds.value = {
+      x: b.x ?? 0,
+      y: b.y ?? 0,
+      width: b.width ?? 100,
+      height: b.height ?? 50,
+    };
+
+    // 初始化预览状态
+    groupBase.value = { [target.id]: { ...startBounds.value } };
+    groupGhost.value = { [target.id]: { ...startBounds.value } };
+
+    // 绑定拖拽事件
+    offDrag = withDrag(handleResize, stopResize);
+  };
+
+  /**
+   * 缩放进行中
+   * 
+   * 触发时机：用户拖拽缩放手柄时（由 withDrag 调用）
+   * 
+   * 执行步骤：
+   * 1. 获取当前鼠标位置
+   * 2. 计算新的边界（基于起始边界和鼠标偏移）
+   * 3. 应用各类约束（容器边界、文本最小宽度、隔间组件、父子间隙）
+   * 4. 更新 groupGhost 供 UI 显示预览
+   * 
+   * @param e - 鼠标事件
+   */
+  const handleResize = (e: MouseEvent) => {
+    if (!isResizing.value || !resizingTarget.value) return;
+
+    const curr = toLocalPoint(e, layerRef.value!);
+    const base = startBounds.value;
+    const handle = resizeDirection.value as "nw" | "ne" | "sw" | "se";
+    const shape = resizingTarget.value;
+
+    // 容器边界约束（只限制左上角不小于 0，不限制右下角以允许无限放大）
+    const container = {
+      left: 0,
+      top: 0,
+      right: Infinity,
+      bottom: Infinity,
+    };
+
+    // 获取元素的边界约束策略
+    const edges = getPolicy(shape).constrainToDiagram;
+
+    // 计算基于文本内容的最小宽度
+    const dynamicMinW = calculateTextMinWidth(shape);
+
+    // 判断是放大还是缩小
+    const dx = curr.x - startPos.value.x;
+    const isEnlarging = (handle === 'ne' || handle === 'se') ? dx > 0 : dx < 0;
+    // 放大时使用较小约束，缩小时不小于文本所需宽度
+    const baseMinW = isEnlarging ? minW / 2 : Math.max(minW, dynamicMinW);
+
+    // 获取该类型的最小尺寸限制
+    const { minW: effectiveMinW, minH: effectiveMinH } = getMinDimensions(shape, baseMinW);
+
+    // 判断是否为 diagram 组件
+    const isDiagramComponent = shape.shapeKey && config.diagram && config.diagram.includes(shape.shapeKey);
+
+    // 计算预览边界
+    let next = ghostResizeStep(
+      { x: base.x, y: base.y, width: base.width, height: base.height },
+      handle,
+      { x: startPos.value.x, y: startPos.value.y },
+      curr,
+      container,
+      // 只限制 left 和 top
+      { left: edges.left, top: edges.top, right: false, bottom: false },
+      effectiveMinW,
+      effectiveMinH
+    );
+
+    // diagram 组件保持高度不变
+    if (isDiagramComponent && shape.shapeType === 'shape') {
+      next = { ...next, height: base.height };
+    }
+
+    // 画布类型（diagram）不移动位置
+    const isDiagram = (shape as any).shapeType?.toLowerCase?.() === "diagram";
+    if (isDiagram) {
+      next = { ...next, x: base.x, y: base.y };
+      next.x = Math.max(0, next.x);
+      next.y = Math.max(0, next.y);
+    }
+
+    // 隔间组件有特殊的缩放约束
+    if (isCompartment(shape)) {
+      next = clampCompartmentResize(
+        graphStore.shapes,
+        shape,
+        next,
+        resizeDirection.value as "nw" | "ne" | "sw" | "se"
+      );
+    }
+
+    // 确保父元素缩放后子元素仍然可见（有间隙约束）
+    next = clampParentRectToChildrenGap(
+      graphStore.shapes,
+      shape,
+      next,
+      resizeDirection.value as any,
+      0,
+      effectiveMinW,
+      minH,
+      groupGhost.value
+    );
+
+    // 更新预览边界
+    groupGhost.value = {
+      ...groupGhost.value,
+      [shape.id]: next,
+    };
+  };
+
+  /**
+   * 停止缩放
+   * 
+   * 触发时机：用户松开鼠标（由 withDrag 调用）
+   * 
+   * 执行步骤：
+   * 1. 获取最终边界（groupGhost 或起始边界）
+   * 2. 应用最小尺寸约束
+   * 3. 更新元素实际边界
+   * 4. 处理可能的重父子关系
+   * 5. 清理缩放状态
+   * 
+   * @param e - 鼠标事件（未使用，但 withDrag 要求）
+   */
+  const stopResize = () => {
+    if (!isResizing.value || !resizingTarget.value) return;
+
+    const id = resizingTarget.value.id;
+    const shape = resizingTarget.value;
+    const final = groupGhost.value[id] ?? startBounds.value;
+
+    // 计算最小尺寸约束
+    const dynamicMinW = calculateTextMinWidth(shape);
+    const { minW: effectiveMinW, minH: minHeight } = getMinDimensions(shape, dynamicMinW, MinDimensionMode.STOP);
+
+    const isDiagramComponent = shape.shapeKey && config.diagram && config.diagram.includes(shape.shapeKey);
+
+    // 应用最小尺寸约束
+    let finalBounds = { ...final };
+    if (final.width < effectiveMinW) {
+      finalBounds.width = effectiveMinW;
+    }
+    if (!isDiagramComponent && final.height < minHeight) {
+      finalBounds.height = minHeight;
+    }
+    if (isDiagramComponent && shape.shapeType === 'shape') {
+      finalBounds = { ...finalBounds, height: startBounds.value.height };
+    }
+
+    // 检查边界是否有变化
+    const shapeBefore = graphStore.shapes.find((s) => s.id === id);
+    const changed = shapeBefore && JSON.stringify(shapeBefore.bounds) !== JSON.stringify(finalBounds);
+
+    if (changed) {
+      // 更新元素边界
+      callbacks.onShapeUpdate?.(id, { bounds: finalBounds });
+      graphStore.updateShape(id, { bounds: finalBounds });
+
+      // 同步更新 selectedShape
+      if (graphStore.selectedShape?.id === id && graphStore.selectedShape) {
+        graphStore.selectedShape.bounds = { ...finalBounds };
+      }
+
+      // 处理重父子关系
+      const containerForFinalize =
+        graphStore.hoverContainerId && graphStore.hoverNestable ? graphStore.hoverContainerId : null;
+
+      const didReparent = finalizeAfterTransform(
+        graphStore.shapes,
+        [id],
+        { [id]: finalBounds },
+        [id],
+        graphStore.currentDiagramId,
+        containerForFinalize,
+        graphStore.updateShape
+      );
+
+      // 如果有重父子，需要重新计算 z-order
+      if (didReparent) {
+        normalizeZOrder(
+          graphStore.shapes,
+          graphStore.currentDiagramId,
+          graphStore.updateShape,
+          1,
+          1
+        );
+      }
+
+      // 通知 store 缩放结束
+      graphStore.endResizeShape(id);
+    }
+
+    // 触发结束回调
+    callbacks.onResizeEnd?.(resizingTarget.value);
+    eventBus.emit('resize-end', { target: resizingTarget.value });
+
+    // 清理状态
+    isResizing.value = false;
+    resizeDirection.value = "";
+    resizingTarget.value = null;
+    groupBase.value = {};
+    groupGhost.value = {};
+    offDrag?.();
+    offDrag = null;
+  };
+
+  /**
+   * 取消缩放
+   * 
+   * 用于外部强制取消缩放操作（如切换选中元素）
+   * 
+   * 执行步骤：
+   * 1. 清理拖拽事件监听
+   * 2. 重置所有缩放状态
+   */
+  const cancelResize = () => {
+    if (offDrag) {
+      offDrag();
+      offDrag = null;
+    }
+    isResizing.value = false;
+    resizeDirection.value = "";
+    resizingTarget.value = null;
+    groupBase.value = {};
+    groupGhost.value = {};
+  };
+
+  /**
+   * 返回值说明：
+   * - 响应式状态：供外部组件读取缩放状态（如 isBusy 计算属性）
+   * - startResize：供模板绑定缩放手柄的 mousedown 事件
+   * - groupGhost：供 allGhosts 计算属性获取预览框数据
+   * - handleResize/stopResize/cancelResize：内部使用
+   * - getMinDimensions：供外部计算最小尺寸
+   */
+  return {
+    isResizing,
+    resizeDirection,
+    startPos,
+    startBounds,
+    resizingTarget,
+    groupBase,
+    groupGhost,
+    startResize,
+    handleResize,
+    stopResize,
+    cancelResize,
+    getMinDimensions
+  };
+}