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

package/src/utils/keyboardUtils.ts

@@ -1,5 +1,9 @@
 import { useGraphStore } from '../store/graphStore';
 import { eventBus } from '../store';
+import _ from 'lodash';
+import { guardOperate } from './license-guard';
+import { ContextMenuUtils } from './contextMenuUtils';
+
 // 定义快捷键处理函数类型
 type KeyboardEventHandler = (e: KeyboardEvent) => void;
 
@@ -11,22 +15,120 @@ interface KeyboardConfig {
   onShapesRemove?: (items: Array<{ modelId: string; shapeId: string; shapeType: string; isRemoveModelTree: boolean }>) => void;
   isEditingName?: () => boolean;
   onCopy?: () => void;
+  onCut?: () => void;
   onPaste?: () => void;
+  isTextareaDialogOpen?: () => boolean; // 检查对话框是否打开
 }
 
+// ==================== 键盘移动防抖状态管理 ====================
+let keyboardMoveTimer: number | null = null;
+let keyboardMoveInitialBounds: Map<string, any> = new Map();
+let keyboardMovingShapeIds: Set<string> = new Set();
+const KEYBOARD_MOVE_DEBOUNCE_DELAY = 1000; // 1000ms 防抖延迟
+
+/**
+ * 收集受影响的图元ID(包括自身、父元素、子元素、祖先链)
+ */
+const collectAffectedShapeIds = (graphStore: any, movedIds: Set<string>): Set<string> => {
+  const affectedIds = new Set<string>();
+
+  movedIds.forEach(id => {
+    affectedIds.add(id);
+
+    const shape = graphStore.shapes.find((s: any) => s.id === id);
+    if (!shape) return;
+
+    // 添加父元素
+    if (shape.parenShapeId) {
+      affectedIds.add(shape.parenShapeId);
+    }
+
+    // 添加所有子元素(递归)
+    const collectChildren = (parentId: string) => {
+      const childIds = graphStore.parentChildMap.get(parentId) || [];
+      childIds.forEach((childId: string) => {
+        affectedIds.add(childId);
+        collectChildren(childId); // 递归收集子元素的子元素
+      });
+    };
+    collectChildren(id);
+
+    // 添加祖先链
+    let currentParentId = shape.parenShapeId;
+    let guard = 0;
+    while (currentParentId && guard++ < 100) {
+      affectedIds.add(currentParentId);
+      const parent = graphStore.shapes.find((s: any) => s.id === currentParentId);
+      currentParentId = parent?.parenShapeId;
+    }
+  });
+
+  return affectedIds;
+};
+
+/**
+ * 触发键盘移动结束事件,发射 shape-drag-end 进行数据同步
+ */
+const emitKeyboardMoveEnd = (graphStore: any) => {
+  if (keyboardMovingShapeIds.size === 0) return;
+
+  // 收集所有受影响的图元
+  const affectedIds = collectAffectedShapeIds(graphStore, keyboardMovingShapeIds);
+
+  // 组装 payloads(深拷贝)
+  const payloads = Array.from(affectedIds)
+    .map(id => graphStore.shapes.find((s: any) => s.id === id))
+    .filter(Boolean)
+    .map(s => _.cloneDeep(s));
+
+  // 发射事件(与拖拽结束使用相同的事件)
+  if (payloads.length > 0) {
+    eventBus.emit('shape-drag-end', payloads);
+  }
+
+  // 清理状态
+  keyboardMoveTimer = null;
+  keyboardMoveInitialBounds.clear();
+  keyboardMovingShapeIds.clear();
+};
+
+/**
+ * 清理键盘移动状态(用于取消或切换选中时)
+ */
+const cleanupKeyboardMoveState = () => {
+  if (keyboardMoveTimer !== null) {
+    window.clearTimeout(keyboardMoveTimer);
+    keyboardMoveTimer = null;
+  }
+  keyboardMoveInitialBounds.clear();
+  keyboardMovingShapeIds.clear();
+};
+
 /**
  * 创建键盘事件处理器
  * @param config 快捷键配置
  * @returns 键盘事件处理函数
  */
-export const createKeyboardHandler = (config: KeyboardConfig): KeyboardEventHandler => {
+export const createKeyboardHandler = (config: KeyboardConfig): KeyboardEventHandler | any => {
   const graphStore = useGraphStore();
 
-  return (e: KeyboardEvent) => {
-    // 按下Esc且正在连线时，取消连线
+  return async (e: KeyboardEvent) => {
+    const result = await guardOperate(() => true)
+    if (!result) return // 未授权就直接结束
+    // 🚫 如果对话框打开,禁用所有快捷键
+    if (config.isTextareaDialogOpen && config.isTextareaDialogOpen()) {
+      return; // 直接返回,不处理任何快捷键
+    }
+
+    // 按下Esc且正在连线时,取消连线
     if (e.key === 'Escape' && config.onCancelConnection) {
       e.preventDefault();
       config.onCancelConnection();
+      // 同时清理键盘移动状态
+      cleanupKeyboardMoveState();
+
+      // 清除所有剪切状态（SVG 遮盖层 + 剪切缓存）
+      ContextMenuUtils.clearCutState();
     }
 
     // 处理Delete键移除图元
@@ -85,7 +187,7 @@ export const createKeyboardHandler = (config: KeyboardConfig): KeyboardEventHand
       if (config.isEditingName && config.isEditingName()) {
         return;
       }
-      
+
       e.preventDefault();
       if (graphStore.museInGraphView) {
         graphStore.selectAll();
@@ -102,7 +204,7 @@ export const createKeyboardHandler = (config: KeyboardConfig): KeyboardEventHand
       if (config.isEditingName && config.isEditingName()) {
         return;
       }
-      
+
       e.preventDefault();
       if (graphStore.museInGraphView && config.onEditProperty) {
         config.onEditProperty();
@@ -115,11 +217,20 @@ export const createKeyboardHandler = (config: KeyboardConfig): KeyboardEventHand
       if (config.isEditingName && config.isEditingName()) {
         return;
       }
-      
+
       e.preventDefault();
-      if (graphStore.selectedIds.length === 1 && graphStore.selectedShape && graphStore.selectedShape.shapeType?.toLowerCase?.() !== 'diagram' && graphStore.museInGraphView) {
-        // 单选情况下发送删除事件
-        eventBus.emit('shapes-delete', graphStore.selectedShape);
+
+      // 获取所有选中的图元
+      const selectedShapes = graphStore.marqueeShapes ?? [];
+
+      // 过滤掉画布类型的图元
+      const shapesToDelete = selectedShapes.filter(s =>
+        s.shapeType?.toLowerCase?.() !== 'diagram'
+      );
+
+      // 如果有可删除的图元，发送删除事件
+      if (shapesToDelete.length > 0) {
+        eventBus.emit('shapes-delete', shapesToDelete);
         if (config.onDelete) {
           config.onDelete();
         }
@@ -132,7 +243,7 @@ export const createKeyboardHandler = (config: KeyboardConfig): KeyboardEventHand
       if (config.isEditingName && config.isEditingName()) {
         return;
       }
-      
+
       e.preventDefault();
       if (config.onCopy) {
         config.onCopy();
@@ -145,20 +256,33 @@ export const createKeyboardHandler = (config: KeyboardConfig): KeyboardEventHand
       if (config.isEditingName && config.isEditingName()) {
         return;
       }
-      
+
       e.preventDefault();
       if (config.onPaste) {
         config.onPaste();
       }
     }
 
+    // 按下Ctrl+X时剪切选中的图元
+    if ((e.ctrlKey || e.metaKey) && e.key === 'x' && graphStore.museInGraphView && !isInputElement) {
+      // 如果正在编辑名称，不执行剪切功能
+      if (config.isEditingName && config.isEditingName()) {
+        return;
+      }
+
+      e.preventDefault();
+      if (config.onCut) {
+        config.onCut();
+      }
+    }
+
     // 按下方向键时移动选中的图元（不在输入框或文本域中时）
     if ((e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === 'ArrowLeft' || e.key === 'ArrowRight') && graphStore.museInGraphView && !isInputElement) {
       // 如果正在编辑名称，不执行移动功能
       if (config.isEditingName && config.isEditingName()) {
         return;
       }
-      
+
       e.preventDefault();
       const step = 1; // 移动距离
 
@@ -176,7 +300,18 @@ export const createKeyboardHandler = (config: KeyboardConfig): KeyboardEventHand
       const canvasMaxY = canvasHeight + canvasY;
 
       // 获取所有选中的图元
-      const selectedShapes = graphStore.selectedIds.map(id => graphStore.shapes.find(s => s.id === id)).filter(Boolean);
+      const selectedShapes = graphStore.selectedIds
+        .map(id => graphStore.shapes.find(s => s.id === id))
+        .filter((shape): shape is NonNullable<typeof shape> => shape != null);
+
+      // ==================== 防抖机制:记录初始状态 ====================
+      // 在第一次移动时记录初始bounds
+      selectedShapes.forEach(shape => {
+        if (!keyboardMoveInitialBounds.has(shape.id)) {
+          keyboardMoveInitialBounds.set(shape.id, { ...shape.bounds });
+        }
+        keyboardMovingShapeIds.add(shape.id);
+      });
 
       selectedShapes.forEach(shape => {
         if (shape && shape.bounds) {
@@ -200,18 +335,22 @@ export const createKeyboardHandler = (config: KeyboardConfig): KeyboardEventHand
               break;
           }
 
-          // 添加边界约束：确保图元不会超出画布的边界
+          // 添加边界约束:确保图元不会超出画布的边界
           newX = Math.max(newX, canvasMinX);
           newY = Math.max(newY, canvasMinY);
           newX = Math.min(newX, canvasMaxX - width);
           newY = Math.min(newY, canvasMaxY - height);
 
-          // 计算位置变化量
+          // 计算实际移动的距离(考虑边界约束后的实际偏移)
           const deltaX = newX - x;
           const deltaY = newY - y;
 
-          // 更新父图元位置
-          graphStore.updateShape(shape.id, {
+          // 先收集所有需要更新的图元(父图元 + 子图元)
+          const updates: Array<{ id: string; bounds: any }> = [];
+
+          // 添加父图元的更新
+          updates.push({
+            id: shape.id,
             bounds: {
               x: newX,
               y: newY,
@@ -220,38 +359,62 @@ export const createKeyboardHandler = (config: KeyboardConfig): KeyboardEventHand
             }
           });
 
-          // 查找并移动所有子图元
-          const childShapes = graphStore.shapes.filter(child => child.parenShapeId === shape.id);
-          childShapes.forEach(child => {
+          // 查找并计算所有子图元的新位置
+          const childIds = graphStore.parentChildMap.get(shape.id) || [];
+          childIds.forEach(childId => {
+            const child = graphStore.shapes.find(s => s.id === childId);
             if (child && child.bounds) {
+              // 如果子图元也在选中列表中,跳过它
+              // 因为它会在遍历 selectedShapes 时被单独处理
+              if (graphStore.selectedIds.includes(child.id)) {
+                return; // 跳过已选中的子图元
+              }
+
               const childX = child.bounds.x || 0;
               const childY = child.bounds.y || 0;
               const childWidth = child.bounds.width || 0;
               const childHeight = child.bounds.height || 0;
 
-              // 计算子图元的新位置
-              const childNewX = childX + deltaX;
-              const childNewY = childY + deltaY;
+              // 计算子图元的新位置(使用父图元的实际移动距离)
+              let childNewX = childX + deltaX;
+              let childNewY = childY + deltaY;
 
               // 为子图元添加边界约束
-              const constrainedChildX = Math.max(childNewX, canvasMinX);
-              const constrainedChildY = Math.max(childNewY, canvasMinY);
-              const constrainedChildXWithWidth = Math.min(constrainedChildX, canvasMaxX - childWidth);
-              const constrainedChildYWithHeight = Math.min(constrainedChildY, canvasMaxY - childHeight);
+              childNewX = Math.max(childNewX, canvasMinX);
+              childNewY = Math.max(childNewY, canvasMinY);
+              childNewX = Math.min(childNewX, canvasMaxX - childWidth);
+              childNewY = Math.min(childNewY, canvasMaxY - childHeight);
 
-              // 更新子图元位置
-              graphStore.updateShape(child.id, {
+              // 添加子图元的更新
+              updates.push({
+                id: child.id,
                 bounds: {
-                  x: constrainedChildXWithWidth,
-                  y: constrainedChildYWithHeight,
+                  x: childNewX,
+                  y: childNewY,
                   width: childWidth,
                   height: childHeight
                 }
               });
             }
           });
+
+          // 统一批量更新所有图元(避免中间状态导致的累积偏移)
+          updates.forEach(update => {
+            graphStore.updateShape(update.id, { bounds: update.bounds });
+          });
         }
       });
+
+      // ==================== 防抖机制:重置定时器 ====================
+      // 清除之前的定时器
+      if (keyboardMoveTimer !== null) {
+        window.clearTimeout(keyboardMoveTimer);
+      }
+
+      // 设置新的防抖定时器,1000ms后触发数据同步
+      keyboardMoveTimer = window.setTimeout(() => {
+        emitKeyboardMoveEnd(graphStore);
+      }, KEYBOARD_MOVE_DEBOUNCE_DELAY);
     }
-  };
+  }
 };

package/src/utils/pinUtils.ts

@@ -1,7 +1,7 @@
 import type { Shape, Bounds } from '../types'
 import { getBounds } from './geom'
 
-const PortKeys = ['OperationalPort']
+const PortKeys = ['OperationalPort', 'ServicePort', 'ResourcePort']
 /**
  * 计算点到矩形边的距离
  */
@@ -329,7 +329,6 @@ export function snapPinToParentEdge(
       dominantBaseline: baseline,
     }
   } catch {}
-  console.log(dropPoint, attachedBounds)
 
   // 直接返回“完全贴边并在外侧”的坐标（已在 calculatePinAttachmentPosition 中确定）
   return { x: Math.round(attachedBounds.x || 0), y: Math.round(attachedBounds.y || 0) };

package/src/utils/shapeOps/shapeOps.ts

@@ -0,0 +1,168 @@
+/**
+ * 图元批量操作工具（新增/更新/删除/upsert）
+ */
+export type ShapeId = string | number
+export type ShapeOp = "add" | "update" | "delete" | "upsert" | "replace"
+
+/**
+ * 创建一个图元操作器（每个操作器维护自己的 indexMap）
+ *  推荐在每个 store 实例里创建一次并复用（不要每次调用都 new）
+ */
+export function createShapeOperator<Shape extends { id: ShapeId }>() {
+    const indexMap = new Map<ShapeId, number>()
+    /**
+       * 重建索引
+       */
+    const resetIndex = (list: Shape[]) => {
+        indexMap.clear()
+        for (let i = 0; i < list.length; i++) {
+            indexMap.set(list[i].id, i)
+        }
+    }
+    const ensureIndex = (list: Shape[]) => {
+        if (indexMap.size === list.length) return
+        indexMap.clear()
+        for (let i = 0; i < list.length; i++) {
+            indexMap.set(list[i].id, i)
+        }
+    }
+
+    /** delete 支持 payload 传 id[] 或 Shape[]（只要有 id 即可） */
+    const extractIds = (payload: Shape[] | ShapeId[]) => {
+        const ids: ShapeId[] = []
+        for (const item of payload as any[]) {
+            if (item == null) continue
+            if (typeof item === "string" || typeof item === "number") {
+                ids.push(item)
+            } else if (item.id != null) {
+                ids.push(item.id)
+            }
+        }
+        return ids
+    }
+
+    /** O(1) 删除：swap last + pop（会改变数组顺序） */
+    const removeByIdFast = (list: Shape[], id: ShapeId) => {
+        const idx = indexMap.get(id)
+        if (idx == null) return false
+
+        const lastIdx = list.length - 1
+        if (lastIdx < 0) return false
+
+        if (idx !== lastIdx) {
+            const moved = list[lastIdx]
+            list[idx] = moved
+            indexMap.set(moved.id, idx)
+        }
+
+        list.pop()
+        indexMap.delete(id)
+        return true
+    }
+
+    /** upsert：有则整条替换，无则 push 新增 */
+    const upsertOne = (list: Shape[], incoming: Shape) => {
+        const id = incoming?.id
+        if (id == null) return false
+
+        const idx = indexMap.get(id)
+        if (idx == null) {
+            list.push(incoming)
+            indexMap.set(id, list.length - 1)
+        } else {
+            list[idx] = incoming
+        }
+        return true
+    }
+
+    /** update：仅存在才替换 */
+    const updateOne = (list: Shape[], incoming: Shape) => {
+        const id = incoming?.id
+        if (id == null) return false
+
+        const idx = indexMap.get(id)
+        if (idx == null) return false
+
+        list[idx] = incoming
+        return true
+    }
+
+    /**
+     * add：不存在才新增
+     * - 已存在时选择“替换”保证最终一致
+     */
+    const addOne = (list: Shape[], incoming: Shape) => {
+        const id = incoming?.id
+        if (id == null) return false
+
+        const idx = indexMap.get(id)
+        if (idx == null) {
+            list.push(incoming)
+            indexMap.set(id, list.length - 1)
+        } else {
+            list[idx] = incoming
+        }
+        return true
+    }
+
+    /**
+     * 对外统一入口
+     */
+    const applyShapeOp = (args: {
+        list: Shape[]
+        payload: Shape[] | ShapeId[]
+        op: ShapeOp
+    }) => {
+        const { list, payload, op } = args
+
+        // ==================== replace：全量覆盖（就地覆盖数组内容） ====================
+        if (op === "replace") {
+            const incomingShapes = payload as Shape[]
+            // 清空原数组（保持 list 引用不变，即 shapes.value 引用不变）
+            list.length = 0
+            //  写入新数据
+            for (const s of incomingShapes) {
+                if (!s) continue
+                list.push(s)
+            }
+            //  重建索引
+            indexMap.clear()
+            for (let i = 0; i < list.length; i++) {
+                indexMap.set(list[i].id, i)
+            }
+            //  replace 场景：可以认为所有都是“变更”，直接返回整批（方便 autoExpand）
+            return { changedShapes: incomingShapes }
+        }
+        // 轻量保证索引可用
+        ensureIndex(list)
+
+        const changedShapes: Shape[] = []
+
+        if (op === "delete") {
+            const ids = extractIds(payload as any)
+            for (const id of ids) {
+                removeByIdFast(list, id)
+            }
+            return { changedShapes }
+        }
+
+        const incomingShapes = payload as Shape[]
+        for (const incoming of incomingShapes) {
+            if (!incoming) continue
+
+            if (op === "upsert") {
+                if (upsertOne(list, incoming)) changedShapes.push(incoming)
+            } else if (op === "update") {
+                if (updateOne(list, incoming)) changedShapes.push(incoming)
+            } else if (op === "add") {
+                if (addOne(list, incoming)) changedShapes.push(incoming)
+            }
+        }
+
+        return { changedShapes }
+    }
+
+    return {
+        applyShapeOp,
+    }
+}