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

package/src/{utils/resizeUtils.ts → hooks/useResize.ts}

@@ -1,14 +1,14 @@
-import { ref, type Ref } from 'vue';
+import { ref, onUnmounted, 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 { toLocalPoint, ghostResizeStep } from '../utils/geom';
+import { calculateTextMinWidth } from '../utils/diagram';
+import { getPolicy } from '../utils/policy';
+import { withDrag } from '../utils/dom';
+import { isCompartment, clampCompartmentResize } from '../utils/compartment';
+import { clampParentRectToChildrenGap } from '../utils/containers';
+import { finalizeAfterTransform } from '../utils/drag';
+import { normalizeZOrder } from '../utils/zorder';
 import { eventBus } from '../store';
 
 /**
@@ -19,8 +19,6 @@ const minH = 30;
 
 /**
  * 最小尺寸配置接口
- * @property minW - 最小宽度
- * @property minH - 最小高度
  */
 export interface MinDimensions {
   minW: number;
@@ -29,35 +27,16 @@ export interface MinDimensions {
 
 /**
  * 最小尺寸计算模式
- * @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 {
+export interface UseResizeConfig {
   packages?: string[];
   diagram?: string[];
   taggedValueLabels?: string[];
@@ -66,54 +45,58 @@ export interface ResizeConfig {
 /**
  * 缩放回调函数接口
  */
-export interface ResizeCallbacks {
-  onResizeStart?: (target: Shape) => void;      // 缩放开始时回调
-  onResizeEnd?: (target: Shape) => void;        // 缩放结束时回调
-  onShapeUpdate?: (id: string, updates: { bounds: Rect }) => void; // 元素更新时回调
+export interface UseResizeCallbacks {
+  onResizeStart?: (target: Shape) => void;
+  onResizeEnd?: (target: Shape) => void;
+  onShapeUpdate?: (id: string, updates: { bounds: Rect }) => void;
 }
 
 /**
- * 创建缩放工具函数
- * 
- * 功能：
- * - 封装缩放操作的所有状态和方法
- * - 提供响应式的缩放状态供外部使用
- * - 处理缩放的完整生命周期（开始、进行中、结束、取消）
+ * useResize 返回类型
+ */
+export interface UseResizeReturn {
+  isResizing: Ref<boolean>;
+  resizeDirection: Ref<string>;
+  startPos: Ref<{ x: number; y: number }>;
+  startBounds: Ref<Rect>;
+  resizingTarget: Ref<Shape | null>;
+  groupBase: Ref<Record<string, Rect>>;
+  groupGhost: Ref<Record<string, Rect>>;
+  startResize: (e: MouseEvent, dir: "nw" | "ne" | "sw" | "se", target: Shape) => void;
+  handleResize: (e: MouseEvent) => void;
+  stopResize: () => void;
+  cancelResize: () => void;
+  getMinDimensions: (shape: Shape, baseMinW?: number, mode?: MinDimensionMode) => MinDimensions;
+}
+
+/**
+ * 图元缩放 Composable
  * 
  * @param layerRef - 交互层的 DOM 引用
- * @param config - 缩放配置（包含各类型组件的 shapeKey 列表）
+ * @param config - 缩放配置
  * @param callbacks - 缩放过程的回调函数
- * @returns 缩放工具对象，包含所有状态和方法
+ * @returns 缩放相关的状态和方法
  */
-export function createResizeUtils(
-  layerRef: { value: HTMLDivElement | null },
-  config: ResizeConfig,
-  callbacks: ResizeCallbacks = {}
-) {
+export function useResize(
+  layerRef: Ref<HTMLDivElement | null>,
+  config: UseResizeConfig,
+  callbacks: UseResizeCallbacks = {}
+): UseResizeReturn {
   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>>({});  // 多选时的预览边界
+  // 缩放状态
+  const isResizing = ref(false);
+  const resizeDirection = ref<"nw" | "ne" | "sw" | "se" | "">("");
+  const startPos = ref({ x: 0, y: 0 });
+  const startBounds = ref<Rect>({ 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;  // 拖拽清理函数
+  let offDrag: (() => void) | null = null;
 
   /**
    * 获取指定元素的最小尺寸限制
-   * 
-   * 根据元素的 shapeKey 类型返回不同的最小高度和宽度限制
-   * 不同类型的组件有不同的最小尺寸要求
-   * 
-   * @param shape - 要计算最小尺寸的元素
-   * @param baseMinW - 基础最小宽度（默认 50）
-   * @param mode - 计算模式（RESIZE 或 STOP）
-   * @returns 最小尺寸配置 { minW, minH }
    */
   const getMinDimensions = (
     shape: Shape,
@@ -123,24 +106,19 @@ export function createResizeUtils(
     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;
@@ -152,57 +130,36 @@ export function createResizeUtils(
 
   /**
    * 开始缩放
-   * 
-   * 触发时机：用户按下缩放手柄时
-   * 
-   * 执行步骤：
-   * 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,
@@ -211,26 +168,14 @@ export function createResizeUtils(
       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;
@@ -240,7 +185,6 @@ export function createResizeUtils(
     const handle = resizeDirection.value as "nw" | "ne" | "sw" | "se";
     const shape = resizingTarget.value;
 
-    // 容器边界约束（只限制左上角不小于 0，不限制右下角以允许无限放大）
     const container = {
       left: 0,
       top: 0,
@@ -248,43 +192,32 @@ export function createResizeUtils(
       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 };
@@ -292,7 +225,6 @@ export function createResizeUtils(
       next.y = Math.max(0, next.y);
     }
 
-    // 隔间组件有特殊的缩放约束
     if (isCompartment(shape)) {
       next = clampCompartmentResize(
         graphStore.shapes,
@@ -302,7 +234,6 @@ export function createResizeUtils(
       );
     }
 
-    // 确保父元素缩放后子元素仍然可见（有间隙约束）
     next = clampParentRectToChildrenGap(
       graphStore.shapes,
       shape,
@@ -314,7 +245,6 @@ export function createResizeUtils(
       groupGhost.value
     );
 
-    // 更新预览边界
     groupGhost.value = {
       ...groupGhost.value,
       [shape.id]: next,
@@ -323,17 +253,6 @@ export function createResizeUtils(
 
   /**
    * 停止缩放
-   * 
-   * 触发时机：用户松开鼠标（由 withDrag 调用）
-   * 
-   * 执行步骤：
-   * 1. 获取最终边界（groupGhost 或起始边界）
-   * 2. 应用最小尺寸约束
-   * 3. 更新元素实际边界
-   * 4. 处理可能的重父子关系
-   * 5. 清理缩放状态
-   * 
-   * @param e - 鼠标事件（未使用，但 withDrag 要求）
    */
   const stopResize = () => {
     if (!isResizing.value || !resizingTarget.value) return;
@@ -342,13 +261,11 @@ export function createResizeUtils(
     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;
@@ -360,21 +277,17 @@ export function createResizeUtils(
       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;
 
@@ -388,7 +301,6 @@ export function createResizeUtils(
         graphStore.updateShape
       );
 
-      // 如果有重父子，需要重新计算 z-order
       if (didReparent) {
         normalizeZOrder(
           graphStore.shapes,
@@ -399,15 +311,12 @@ export function createResizeUtils(
         );
       }
 
-      // 通知 store 缩放结束
       graphStore.endResizeShape(id);
     }
 
-    // 触发结束回调
     callbacks.onResizeEnd?.(resizingTarget.value);
     eventBus.emit('resize-end', { target: resizingTarget.value });
 
-    // 清理状态
     isResizing.value = false;
     resizeDirection.value = "";
     resizingTarget.value = null;
@@ -419,12 +328,6 @@ export function createResizeUtils(
 
   /**
    * 取消缩放
-   * 
-   * 用于外部强制取消缩放操作（如切换选中元素）
-   * 
-   * 执行步骤：
-   * 1. 清理拖拽事件监听
-   * 2. 重置所有缩放状态
    */
   const cancelResize = () => {
     if (offDrag) {
@@ -438,14 +341,11 @@ export function createResizeUtils(
     groupGhost.value = {};
   };
 
-  /**
-   * 返回值说明：
-   * - 响应式状态：供外部组件读取缩放状态（如 isBusy 计算属性）
-   * - startResize：供模板绑定缩放手柄的 mousedown 事件
-   * - groupGhost：供 allGhosts 计算属性获取预览框数据
-   * - handleResize/stopResize/cancelResize：内部使用
-   * - getMinDimensions：供外部计算最小尺寸
-   */
+  // 组件卸载时自动清理
+  onUnmounted(() => {
+    cancelResize();
+  });
+
   return {
     isResizing,
     resizeDirection,
@@ -458,6 +358,6 @@ export function createResizeUtils(
     handleResize,
     stopResize,
     cancelResize,
-    getMinDimensions
+    getMinDimensions,
   };
 }

package/src/index.ts

@@ -10,6 +10,9 @@ export { GraphView }
 // 导出 store
 export { useGraphStore, eventBus } from './store'
 
+// 导出工具类
+export { ContextMenuUtils } from './utils/contextMenuUtils'
+
 // 导出类型
 export type { Shape, Bounds, Style, NameObject, TaggedValueLabel, Comparent, GraphEvents } from './types'
 /**
@@ -35,7 +38,7 @@ export const MxSoseGraphPlugin: Plugin<[MxSoseGraphOptions?]> = {
       if (import.meta.env.DEV) {
         console.warn(
           '[mx-sose-graph] 未找到 pinia 实例，请确保：' +
-            '1）先 app.use(pinia)，2）再 app.use(MxSoseGraphPlugin, { pinia })'
+          '1）先 app.use(pinia)，2）再 app.use(MxSoseGraphPlugin, { pinia })'
         )
       }
     }

package/src/render/shape-renderer.ts

@@ -36,68 +36,81 @@ export const getShapeComponent = (shape: Shape) => {
       return "ShapeComponent";
   }
 };
-// 根据 shape 的 bounds 生成样式
-export const getShapeStyle = (shape: Shape): CSSProperties => {
-  const { bounds, shapeType } = shape;
+// Edge waypoints 解析结果缓存，避免每帧重复 JSON.parse（约 60+ 图元时明显）
+const EDGE_STYLE_CACHE_MAX = 128
+const edgeStyleCache = new Map<string, CSSProperties>()
 
-  // Edge组件需要特殊处理
-  if (shapeType === "edge") {
-    // 解析waypoints计算边界框
-    let waypoints: Array<{ x: number; y: number }> = [];
+function getEdgeShapeStyle(shape: Shape): CSSProperties {
+  const raw = shape.waypointId
+  const cacheKey = shape.id + (typeof raw === "string" ? raw : raw ? JSON.stringify(raw) : "")
+  const cached = edgeStyleCache.get(cacheKey)
+  if (cached) return cached
 
-    if (shape.waypointId) {
-      if (typeof shape.waypointId === "string") {
-        try {
-          waypoints = JSON.parse(shape.waypointId);
-        } catch (error) {
-          console.error("解析waypointId失败:", error);
-          waypoints = [];
-        }
-      } else if (Array.isArray(shape.waypointId)) {
-        waypoints = shape.waypointId;
+  let waypoints: Array<{ x: number; y: number }> = []
+  if (raw) {
+    if (typeof raw === "string") {
+      try {
+        waypoints = JSON.parse(raw)
+      } catch (error) {
+        console.error("解析waypointId失败:", error)
       }
+    } else if (Array.isArray(raw)) {
+      waypoints = raw
     }
+  }
 
-    if (waypoints.length === 0) {
-      return {
-        position: "absolute",
-        left: "0px",
-        top: "0px",
-        width: "100px",
-        height: "50px",
-        opacity: 0, // 初始时隐藏
-      };
+  let result: CSSProperties
+  if (waypoints.length === 0) {
+    result = {
+      position: "absolute",
+      left: "0px",
+      top: "0px",
+      width: "100px",
+      height: "50px",
+      opacity: 0,
     }
-
-    // 计算边界框
-    const xs = waypoints.map((wp) => wp.x);
-    const ys = waypoints.map((wp) => wp.y);
-
-    const minX = Math.min(...xs);
-    const maxX = Math.max(...xs);
-    const minY = Math.min(...ys);
-    const maxY = Math.max(...ys);
-
-    // 计算容器尺寸和位置
-    const padding = 10;
-    const width = Math.max(maxX - minX + padding * 2, 20); // 最小宽度20
-    const height = maxY - minY + padding * 2;
-
-    return {
+  } else {
+    const xs = waypoints.map((wp) => wp.x)
+    const ys = waypoints.map((wp) => wp.y)
+    const minX = Math.min(...xs)
+    const maxX = Math.max(...xs)
+    const minY = Math.min(...ys)
+    const maxY = Math.max(...ys)
+    const padding = 10
+    const width = Math.max(maxX - minX + padding * 2, 20)
+    const height = maxY - minY + padding * 2
+    result = {
       position: "absolute",
       left: `${minX - padding}px`,
       top: `${minY - padding}px`,
       width: `${width}px`,
       height: `${height}px`,
-    };
+    }
+  }
+  if (edgeStyleCache.size >= EDGE_STYLE_CACHE_MAX) {
+    const firstKey = edgeStyleCache.keys().next().value
+    if (firstKey != null) edgeStyleCache.delete(firstKey)
   }
+  edgeStyleCache.set(cacheKey, result)
+  return result
+}
+
+/** 批量更新图元时调用，避免缓存无限增长 */
+export function clearEdgeStyleCache(): void {
+  edgeStyleCache.clear()
+}
+
+// 根据 shape 的 bounds 生成样式
+export const getShapeStyle = (shape: Shape): CSSProperties => {
+  const { bounds, shapeType } = shape
+
+  if (shapeType === "edge") return getEdgeShapeStyle(shape)
 
-  // 其他组件使用bounds
   return {
     position: "absolute",
     left: `${bounds?.x || 0}px`,
     top: `${bounds?.y || 0}px`,
     width: `${bounds?.width || 100}px`,
     height: `${bounds?.height || 50}px`,
-  };
-};
+  }
+}