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

package/src/render/shape-renderer.ts

@@ -1,20 +1,27 @@
 import type { CSSProperties } from "vue";
 import type { Shape } from "@/types";
-import { BlockKeyMap, DiagramKeyMap } from "../constants";
+import { ShapeKeyMap, DiagramKeyMap, PinKeyMap, EdgeKeyMap } from "../constants";
 import { getShapeComponentByKey } from "./shape-registry";
-import { PinKeyMap } from "../constants";
 
-// 根据 shapeKey 匹配具体组件
+// 根据 shapeKey 匹配具体组件 (shapeType: 'shape')
 function getComponentByShapeKey(shapeKey: string) {
-  const componentName = (BlockKeyMap as any)[shapeKey] || shapeKey;
+  const componentName = (ShapeKeyMap as any)[shapeKey] || shapeKey;
   return getShapeComponentByKey(componentName) || componentName;
 }
+
+// 根据 shapeKey 匹配 Pin 组件 (shapeType: 'pin')
 function getComponentByPinKey(shapeKey: string) {
   const componentName = (PinKeyMap as any)[shapeKey] || shapeKey;
   return getShapeComponentByKey(componentName) || componentName;
 }
 
-// 根据 shapeKey 匹配图类型组件
+// 根据 shapeKey 匹配 Edge 组件 (shapeType: 'edge')
+function getComponentByEdgeKey(shapeKey: string) {
+  const componentName = (EdgeKeyMap as any)[shapeKey] || shapeKey;
+  return getShapeComponentByKey(componentName) || componentName;
+}
+
+// 根据 shapeKey 匹配 Edge 组件 (shapeType: 'diagram')
 export function getComponentByDiagramKey(shapeKey: string) {
   const componentName = (DiagramKeyMap as any)[shapeKey] || shapeKey;
   return getShapeComponentByKey(componentName) || componentName;
@@ -31,7 +38,7 @@ export const getShapeComponent = (shape: Shape) => {
     case "diagram":
       return getComponentByDiagramKey(shapeKey);
     case "edge":
-      return getComponentByShapeKey(shapeKey);
+      return getComponentByEdgeKey(shapeKey);
     default:
       return "ShapeComponent";
   }

package/src/store/graphStore.ts

@@ -1,5 +1,5 @@
-import { defineStore } from 'pinia'
-import { ref, computed, shallowReactive, nextTick, type Ref } from 'vue'
+import { defineStore } from 'pinia'
+import { ref, computed, shallowReactive, shallowRef, triggerRef, nextTick, type Ref } from 'vue'
 import type { Shape, OwnerPayload, ShapeSizeUpdatePayload } from '../types'
 import { eventBus } from './eventBus'
 import { getPolicy, checkNestViaFront, } from '../utils/policy'
@@ -74,44 +74,132 @@ export const useGraphStore = defineStore('graph', () => {
   const cutShapeIds = ref<Set<string>>(new Set())
   // 剪贴板中图元的数量（用于工具栏按钮状态同步）
   const copiedShapesCount = ref<number>(0)
-
+  // 拖动时的后代坐标快照（只在 startDrag 时计算一次，避免每帧重算）
+  // key: 被拖动的父元素 ID, value: 所有后代的坐标快照
+  type DescendantSnapshot = { id: string; x: number; y: number; width: number; height: number };
+  const dragDescendantsSnapshot = ref<Map<string, DescendantSnapshot[]>>(new Map())
   // 计算属性
   const shapeCount = computed(() => shapes.value.length)
   const hasSelectedShape = computed(() => selectedShape.value !== null)
 
+  // ========== 增量索引：手动维护，避免 computed 全量重建 ==========
+  
+  /**
+   * 图元ID索引映射（增量维护版本）
+   * 用于快速通过ID查找图元对象
+   * key: 图元 ID, value: 图元对象
+   * 性能优化: O(1) 增删改查，避免每次 shapes 变化都 O(n) 重建
+   */
+  const _shapeMapRef = shallowRef(new Map<string, Shape>())
+  // 使用 computed 包装，确保 Pinia 正确解包
+  const shapeMap = computed(() => _shapeMapRef.value)
+  
   /**
-   * 父子关系索引映射
+   * 父子关系索引映射（增量维护版本）
    * 用于快速查找某个图元的所有直接子图元
    * key: 父图元 ID, value: 子图元 ID 数组
-   * 性能优化: O(n) 构建, O(1) 查询
+   * 性能优化: O(1) 查询，增删时只更新受影响的条目
    */
-  const parentChildMap = computed(() => {
-    const map = new Map<string, string[]>();
+  const _parentChildMapRef = shallowRef(new Map<string, string[]>())
+  // 使用 computed 包装，确保 Pinia 正确解包
+  const parentChildMap = computed(() => _parentChildMapRef.value)
+
+  // ========== 索引维护内部方法 ==========
+  
+  /** 添加图元到索引 */
+  function _indexAdd(shape: Shape) {
+    _shapeMapRef.value.set(shape.id, shape)
+    if (shape.parenShapeId) {
+      const children = _parentChildMapRef.value.get(shape.parenShapeId)
+      if (children) {
+        if (!children.includes(shape.id)) {
+          children.push(shape.id)
+        }
+      } else {
+        _parentChildMapRef.value.set(shape.parenShapeId, [shape.id])
+      }
+    }
+  }
+
+  /** 从索引中移除图元 */
+  function _indexRemove(shapeId: string) {
+    const shape = _shapeMapRef.value.get(shapeId)
+    if (!shape) return
+    _shapeMapRef.value.delete(shapeId)
+    if (shape.parenShapeId) {
+      const children = _parentChildMapRef.value.get(shape.parenShapeId)
+      if (children) {
+        const idx = children.indexOf(shapeId)
+        if (idx !== -1) children.splice(idx, 1)
+        if (children.length === 0) {
+          _parentChildMapRef.value.delete(shape.parenShapeId)
+        }
+      }
+    }
+    // 如果这个图元是父节点，清理它的子节点列表
+    _parentChildMapRef.value.delete(shapeId)
+  }
+
+  /** 更新图元索引（处理父节点变更） */
+  function _indexUpdate(shape: Shape, oldParentId: string | null | undefined) {
+    _shapeMapRef.value.set(shape.id, shape)
+    const newParentId = shape.parenShapeId ?? null
+    const normalizedOldParent = oldParentId ?? null
+    
+    if (normalizedOldParent !== newParentId) {
+      // 从旧父节点移除
+      if (normalizedOldParent) {
+        const oldChildren = _parentChildMapRef.value.get(normalizedOldParent)
+        if (oldChildren) {
+          const idx = oldChildren.indexOf(shape.id)
+          if (idx !== -1) oldChildren.splice(idx, 1)
+          if (oldChildren.length === 0) {
+            _parentChildMapRef.value.delete(normalizedOldParent)
+          }
+        }
+      }
+      // 添加到新父节点
+      if (newParentId) {
+        const newChildren = _parentChildMapRef.value.get(newParentId)
+        if (newChildren) {
+          if (!newChildren.includes(shape.id)) {
+            newChildren.push(shape.id)
+          }
+        } else {
+          _parentChildMapRef.value.set(newParentId, [shape.id])
+        }
+      }
+    }
+  }
+
+  /** 全量重建索引（用于 replace 操作或初始化） */
+  function _rebuildIndex() {
+    const newShapeMap = new Map<string, Shape>()
+    const newParentChildMap = new Map<string, string[]>()
+    
     shapes.value.forEach(shape => {
+      newShapeMap.set(shape.id, shape)
       if (shape.parenShapeId) {
-        if (!map.has(shape.parenShapeId)) {
-          map.set(shape.parenShapeId, []);
+        const children = newParentChildMap.get(shape.parenShapeId)
+        if (children) {
+          children.push(shape.id)
+        } else {
+          newParentChildMap.set(shape.parenShapeId, [shape.id])
         }
-        map.get(shape.parenShapeId)!.push(shape.id);
       }
-    });
-    return map;
-  })
+    })
+    
+    _shapeMapRef.value = newShapeMap
+    _parentChildMapRef.value = newParentChildMap
+    triggerRef(_shapeMapRef)
+    triggerRef(_parentChildMapRef)
+  }
 
-  /**
-   * 图元ID索引映射
-   * 用于快速通过ID查找图元对象
-   * key: 图元 ID, value: 图元对象
-   * 性能优化: O(n) 构建, O(1) 查询
-   * 解决嵌套图元场景下大量 find() 调用导致的性能问题
-   */
-  const shapeMap = computed(() => {
-    const map = new Map<string, Shape>();
-    shapes.value.forEach(shape => {
-      map.set(shape.id, shape);
-    });
-    return map;
-  })
+  /** 触发索引的响应式更新 */
+  function _triggerIndexUpdate() {
+    triggerRef(_shapeMapRef)
+    triggerRef(_parentChildMapRef)
+  }
 
   //图元shapeKey
   const taggedValueLabels = ref<string[]>([])   // 隔间组件的图元类型
@@ -148,8 +236,11 @@ export const useGraphStore = defineStore('graph', () => {
     }
 
     shapes.value.push(shape)
+    // 增量更新索引
+    _indexAdd(shape)
+    _triggerIndexUpdate()
     // 通过事件总线发送事件
-    eventBus.emit('shape-added', shape)
+    // eventBus.emit('shape-added', shape)
 
     // 自动扩父逻辑：如果图元有父元素且需要自动扩父，触发扩父逻辑
     const shouldAutoExpand = options?.autoExpandParent !== false // 默认为 true
@@ -164,16 +255,10 @@ export const useGraphStore = defineStore('graph', () => {
   const removeShape = (shapeId: string) => {
     const index = shapes.value.findIndex(s => s.id == shapeId)
     if (index > -1) {
-      const removedShape = shapes.value.splice(index, 1)[0]
-      // 通过事件总线发送事件
-      // eventBus.emit('shape-removed', removedShape)
-      // 若该图元有父，且父是隔间：从 comparents 里移除这个子 Shape
-      // if (removedShape.parenShapeId) {
-      //   const parent = shapes.value.find(s => s.id == removedShape.parenShapeId)
-      //   if (parent && isShapeTypeNotInPackageTypes(parent)) {
-      //     removeChildShapeFromCompartment(parent, removedShape, updateShape)
-      //   }
-      // }
+      // 增量更新索引（在删除数组元素之前）
+      _indexRemove(shapeId)
+      shapes.value.splice(index, 1)
+      _triggerIndexUpdate()
       // 如果删除的是当前选中的形状，清除选中状态
       if (selectedShape.value?.id === shapeId) {
         selectedShape.value = null
@@ -208,6 +293,8 @@ export const useGraphStore = defineStore('graph', () => {
   const updateShapeRaw = (shapeId: string, updates: Partial<Shape>, id: 'id' | 'modelId' = 'id') => {
     const shape = shapes.value.find(s => s[id] === shapeId)
     if (shape) {
+      // 记录旧的父节点ID，用于索引更新
+      const oldParentId = shape.parenShapeId
       // 对 Pin 做强保护：永不允许把 parenShapeId 置空/undefined
       if (shape.shapeType === 'pin' && 'parenShapeId' in updates) {
         const v: any = (updates as any).parenShapeId
@@ -224,6 +311,9 @@ export const useGraphStore = defineStore('graph', () => {
       const nextBounds = updates.bounds ? { ...shape.bounds, ...updates.bounds } : shape.bounds
       const nextStyle = updates.style ? { ...(shape.style || {}), ...(updates.style as any) } : shape.style
       Object.assign(shape, updates, { bounds: nextBounds, style: nextStyle })
+      // 增量更新索引（处理父节点变更）
+      _indexUpdate(shape, oldParentId)
+      _triggerIndexUpdate()
       eventBus.emit('shape-updated', shape, updates)
     }
   }
@@ -282,32 +372,46 @@ export const useGraphStore = defineStore('graph', () => {
   }
   // 被框选中的多个 shape/映射 selectedIds.value中的数据
   const marqueeShapes = computed(() => {
-    const byId = (id: string) => shapes.value.find(s => s.id === id)
-    const isShape = (x: Shape | undefined): x is Shape => !!x
     const pending = new Set(pendingNestedIds.value)
-    return selectedIds.value
-      .map(byId)
-      .filter(isShape)
-      .filter(s => !pending.has(s.id))
+    const result: Shape[] = []
+    // 使用 shapeMap 进行 O(1) 查找，避免 O(n²) 的 find
+    for (const id of selectedIds.value) {
+      if (pending.has(id)) continue
+      const shape = shapeMap.value.get(id)
+      if (shape) result.push(shape)
+    }
+    return result
   })
   //获取元素拖动预览框
+  // 性能优化：只返回"直接被拖动"的图元的 ghost，不包含后代
+  // 后代图元会跟随父元素移动，不需要单独显示 ghost
   const ghostShadow = computed<Shape[]>(() => {
+    // 如果没有在拖动，直接返回空数组
+    if (!isDragging.value || draggingIds.value.length === 0) return []
+    
     const out: Shape[] = []
     // 兜底：防止被持久化还原成非数组
     const pendingList = Array.isArray(pendingNestedIds.value)
       ? pendingNestedIds.value
       : []
     const pendingSet = new Set(pendingList)
-    // 用 shapeMap O(1) 查找原始图元，避免 find O(N)
+    // 只为"直接被选中拖动"的图元创建 ghost，不包含后代
+    // 这样可以大幅减少 ghost 数量（从 3000 减少到用户实际选中的数量）
+    const directDragSet = new Set(dragSelectionSnapshot.value.length > 0 
+      ? dragSelectionSnapshot.value 
+      : draggingIds.value.slice(0, 1)) // 至少保留主拖动项
+    
     const map = shapeMap.value
-    for (const id in dragGhost) {
+    for (const id of directDragSet) {
       if (pendingSet.has(id)) continue
+      const ghostRect = dragGhost[id]
+      if (!ghostRect) continue
       const orig = map.get(id)
       if (!orig) continue
 
       out.push({
         ...orig,
-        bounds: { ...dragGhost[id] },
+        bounds: { ...ghostRect },
         meta: { ...(orig as any).meta, isGhost: true } as any,
       } as Shape)
     }
@@ -316,18 +420,22 @@ export const useGraphStore = defineStore('graph', () => {
   // 选择一组（用于框选/Shift 叠加）
   const selectMany = (ids: string[]) => {
     selectedIds.value = Array.from(new Set(ids))
+    // 使用 shapeMap 进行 O(1) 查找，避免 O(n) 的 find
     selectedShape.value = ids.length
-      ? (shapes.value.find(s => s.id === ids[0]) ?? null)
+      ? (shapeMap.value.get(ids[0]) ?? null)
       : null
   }
   // 清空选择
   const clearSelection = () => selectShape(null)
   // 全选图元
   const selectAll = () => {
-    // 获取所有非diagram类型的图元
-    const allShapeIds = shapes.value
-      .filter(shape => shape.shapeType?.toLowerCase() !== 'diagram')
-      .map(shape => shape.id)
+    // 优化：直接遍历一次收集 id，避免 filter + map 两次遍历
+    const allShapeIds: string[] = []
+    for (const shape of shapes.value) {
+      if (shape.shapeType?.toLowerCase() !== 'diagram') {
+        allShapeIds.push(shape.id)
+      }
+    }
     selectMany(allShapeIds)
   }
   // 设置图表标题
@@ -341,7 +449,7 @@ export const useGraphStore = defineStore('graph', () => {
   /**
    * 批量操作图元（新增 / 修改 / 删除）
    * @param payload - 新增/修改时传 Shape[]；删除时可传 Shape[]（只需要 id）或 id 数组
-   * @param op - 操作类型：add | update | delete | upsert（默认）
+   * @param op - 操作类型：add | update | delete | upsert（默认）| replace
    * @param options - 额外选项（保持你原来的 autoExpandParents）
    */
   const updateShapes = (
@@ -351,11 +459,44 @@ export const useGraphStore = defineStore('graph', () => {
   ) => {
     // 先把 comparents[*].comparentShapes 铺平同步到运行时
     // const expanded = syncComparentShapesIntoRuntime(newShapes)
-    const { changedShapes } = applyShapeOp({
+    const { changedShapes, changeDetails } = applyShapeOp({
       list: shapes.value,
       payload: payload as any, // delete 时是 id[]，其余是 Shape[]
       op,
     })
+    
+    // 根据操作类型选择索引更新策略
+    if (op === 'replace' || changeDetails.length === 0) {
+      // replace 操作或无变更详情时，全量重建索引
+      _rebuildIndex()
+    } else {
+      // 增量更新索引
+      for (const detail of changeDetails) {
+        if (detail.type === 'add') {
+          _indexAdd(detail.shape)
+        } else if (detail.type === 'delete') {
+          // 删除时 shape 已经从数组移除，需要手动清理索引
+          _shapeMapRef.value.delete(detail.shape.id)
+          const parentId = (detail.shape as any).parenShapeId
+          if (parentId) {
+            const children = _parentChildMapRef.value.get(parentId)
+            if (children) {
+              const idx = children.indexOf(detail.shape.id)
+              if (idx !== -1) children.splice(idx, 1)
+              if (children.length === 0) {
+                _parentChildMapRef.value.delete(parentId)
+              }
+            }
+          }
+          _parentChildMapRef.value.delete(detail.shape.id)
+        } else if (detail.type === 'update') {
+          const oldParentId = (detail.oldShape as any)?.parenShapeId
+          _indexUpdate(detail.shape, oldParentId)
+        }
+      }
+      _triggerIndexUpdate()
+    }
+    
     pendingNestedIds.value = []
     // eventBus.emit('shapes-updated', newShapes)
     // hydrateAllComparents()
@@ -375,33 +516,16 @@ export const useGraphStore = defineStore('graph', () => {
   //清空图元数据
   const clearAll = () => {
     shapes.value = []
+    // 清空索引
+    _shapeMapRef.value = new Map()
+    _parentChildMapRef.value = new Map()
+    triggerRef(_shapeMapRef)
+    triggerRef(_parentChildMapRef)
     diagrams.value = []
     selectedShape.value = null
     pendingNestedIds.value = []
     eventBus.emit('shapes-cleared')
   }
-
-  /** 把所有隔间父的 comparents 从 comparentsJSON 还原；若没有 JSON 就按 parenShapeId 兜底重建 */
-  // const hydrateAllComparents = () => {
-  //   if (comparentsHydratedOnce.value) return
-  //   if (!shapes.value.length) return
-  //   let hadAnyJSON = false
-  //   for (const p of shapes.value) {
-  //     if (isShapeTypeNotInPackageTypes(p)) {
-  //       const any = p as any
-  //       if (typeof any.comparentsJSON === 'string' && any.comparentsJSON.length) {
-  //         hydrateComparentsFromJSON(p, updateShape)
-  //         hadAnyJSON = true
-  //       }
-  //     }
-  //   }
-  //   // 历史数据可能还没有 comparentsJSON：按父子关系兜底重建一次
-  //   if (!hadAnyJSON) {
-  //     rebuildAllCompartmentChildrenAsShapes(shapes.value, updateShape)
-  //   }
-
-  //   comparentsHydratedOnce.value = true
-  // }
   //拖动元素相关操作
   // 开始拖动已有元素（仅对 shape 生效）
   const byId = (id: string) => shapes.value.find(s => s.id === id) || null
@@ -409,17 +533,13 @@ export const useGraphStore = defineStore('graph', () => {
     startDrag([shapeId], pointer)
   }
   const startDrag = (ids: string[], pointer: { x: number; y: number }) => {
-    // 记录“当前真正被用户选中”的快照 —— 结束时恢复
+    // 记录"当前真正被用户选中"的快照  结束时恢复
     dragSelectionSnapshot.value = selectedIds.value.length ? [...selectedIds.value] : [ids[0]]
     primaryDragId.value = ids[0] || null
 
-    // 展开“选中项 + 后代”的集合（你现有的逻辑保留）
-    const expanded: string[] = []
-    ids.forEach(id => {
-      expanded.push(id)
-      collectDescendantIds(shapes.value, id).forEach(cid => expanded.push(cid))
-    })
-    const validIds = Array.from(new Set(expanded)).filter(id => {
+    // 性能优化：只对"直接选中"的图元建立 dragBase/dragGhost
+    // 后代图元会跟随父元素移动，不需要单独创建 ghost，大幅减少渲染开销
+    const validIds = ids.filter(id => {
       const s = byId(id); return s && getPolicy(s!).draggable
     })
     if (!validIds.length) return
@@ -433,6 +553,32 @@ export const useGraphStore = defineStore('graph', () => {
     draggingIds.value = validIds
     dragAnchor.value = { x: pointer.x, y: pointer.y }
 
+    // 构建后代坐标快照（只计算一次，供预览框渲染使用）
+    const newSnapshot = new Map<string, { id: string; x: number; y: number; width: number; height: number }[]>()
+    for (const parentId of validIds) {
+      const descendants: { id: string; x: number; y: number; width: number; height: number }[] = []
+      // 递归收集所有后代
+      const collectDescendants = (pid: string) => {
+        const childIds = _parentChildMapRef.value.get(pid) || []
+        for (const childId of childIds) {
+          const childShape = _shapeMapRef.value.get(childId)
+          if (childShape?.bounds) {
+            descendants.push({
+              id: childId,
+              x: childShape.bounds.x ?? 0,
+              y: childShape.bounds.y ?? 0,
+              width: childShape.bounds.width ?? 0,
+              height: childShape.bounds.height ?? 0,
+            })
+          }
+          collectDescendants(childId) // 递归
+        }
+      }
+      collectDescendants(parentId)
+      newSnapshot.set(parentId, descendants)
+    }
+    dragDescendantsSnapshot.value = newSnapshot
+
     const currentDiagram = shapes.value.find(s => s.shapeType === 'diagram')
     if (currentDiagram) {
       dragBaseCanvasSize.value = {
@@ -589,6 +735,7 @@ export const useGraphStore = defineStore('graph', () => {
   }
   // 结束拖动：提交位置/尺寸 + 处理归属 + 规范层级
   const endDragShape = async (source?: string) => {
+    // 防并发：同一次拖拽只允许进入一次
     if (!isDragging.value) return
     // 提交拖动几何（commitDrag 只是“位置/大小”的更新）
     const changedIds = commitDrag(
@@ -632,7 +779,6 @@ export const useGraphStore = defineStore('graph', () => {
         pendingNestedIds,
         addShape,
       })
-
       if (nestResult.cancelled) {
         // 嵌套校验失败，已经在 graphDragService 里回滚了位置/父级，这里只需要收尾
         cleanupAfterDrag()
@@ -652,7 +798,6 @@ export const useGraphStore = defineStore('graph', () => {
         1,
       )
     }
-
     // —— Pin 终极兜底：不允许在本次拖拽后变成“无父” ——
     for (const id of changedIds) {
       const node = shapes.value.find(s => s.id === id)
@@ -671,13 +816,33 @@ export const useGraphStore = defineStore('graph', () => {
     })
     //对“本次直接拖动的隔间”做一次自动扩容检查
     autoExpandMovedCompartmentsAfterDrag(shapes.value, changedIds, updateShape)
+    // 把 clone 也并入“需要同步 comparents 的变更集合”
+    const allReparentIds = [...changedIds, ...clonedIds]
+    // prevParentById 要补齐 clone 的“拖动前父”，因为 clone 之前不存在
+    const prevMapForComparents = { ...prevParentById }
+    for (const cid of clonedIds) {
+      // clone 之前不存在 => 认为 beforePid = null / ''
+      prevMapForComparents[cid] = null
+    }
     //  处理comparents字段
     syncShowComparentsByReparent(
       shapes.value,
-      changedIds,
-      prevParentById,
+      allReparentIds,
+      prevMapForComparents,
       (id, u) => updateShapeRaw(id, u)
     )
+    // 在生成 payloads 之前，把父扩容先做掉
+    const shapeId = ownerPayload?.shapeId
+    if (shapeId != null) {
+      const child = shapes.value.find(s => s.id == shapeId)
+      if (child) {
+        expandParentByChild({
+          shapes: shapes.value,
+          child,
+          updateShape,
+        })
+      }
+    }
     // 收集受影响的所有 shape（自身 + 父 + 子树 + 祖先）
     const affectedIds = collectAffectedShapeIds(shapes.value, changedIds, clonedIds)
     //组装 payloads（深拷贝），给更新接口用
@@ -688,7 +853,6 @@ export const useGraphStore = defineStore('graph', () => {
       ownerPayload,
       updateShape,
     })
-
     // 先同步调整画布大小，确保获取到最新的画布数据
     adjustCanvasToFitAllShapes()
 
@@ -705,11 +869,8 @@ export const useGraphStore = defineStore('graph', () => {
         }
       }
     }
-    console.log("drag end payloads:", payloads, ownerPayload);
-    
     //对外只暴露一个事件：shape-drag-end
     eventBus.emit('shape-drag-end', payloads, ownerPayload, onNestDone)
-
     // 清理拖拽状态
     cleanupAfterDrag()
   }
@@ -770,6 +931,7 @@ export const useGraphStore = defineStore('graph', () => {
     dragSelectionSnapshot.value = []
     primaryDragId.value = null
     dragBaseCanvasSize.value = null
+    dragDescendantsSnapshot.value = new Map() // 清理后代快照
     for (const k in dragGhost) delete dragGhost[k]
   }
   //设置当前打开的画布id
@@ -925,6 +1087,8 @@ export const useGraphStore = defineStore('graph', () => {
     shapeMap,       // 图元ID索引映射 (性能优化)
     marqueeShapes,
     ghostShadow,
+    dragDescendantsSnapshot, // 拖动时的后代坐标快照
+    dragBase, // 拖动开始时的坐标快照
     scales,
     activeDiagramId,
     // 当前活动画布的缩放比例

package/src/utils/containers.ts

@@ -709,9 +709,11 @@ const pointInRect = (pt: { x: number; y: number }, r: Rect, margin = 0) =>
   pt.y <= r.y + r.height - margin
 
 const depthOf = (shapes: Shape[], id: string): number => {
+  const graphStore = useGraphStore();
+  const byId = graphStore.shapeMap;
   let d = 0
-  let p = shapes.find(s => s.id === id)?.parenShapeId ?? null
-  while (p) { d++; p = shapes.find(s => s.id === p)?.parenShapeId ?? null }
+  let p = byId.get(id)?.parenShapeId ?? null
+  while (p) { d++; p = byId.get(p)?.parenShapeId ?? null }
   return d
 }
 

package/src/utils/contextMenuUtils.ts

@@ -163,10 +163,43 @@ export class ContextMenuUtils {
   }
 
   /**
-   * 清除剪切状态
-   * 当按 ESC 取消或其他需要清除剪切状态的场景调用
+   * 检查剪贴板是否有内容
+   */
+  static hasClipboardContent(): boolean {
+    return this.copiedShapes.length > 0;
+  }
+
+  /**
+   * 清空剪贴板（粘贴完成后调用）
+   */
+  static clearClipboard() {
+    this.copiedShapes = [];
+    this.operationType = 'copy';
+    
+    // 清空 GraphStore 中的剪贴板数量
+    const graphStore = useGraphStore();
+    graphStore.setCopiedShapesCount(0);
+    console.log('剪贴板已清空');
+  }
+
+  /**
+   * 清除剪切状态（只清除SVG遮盖层，不清除剪贴板数据）
+   * 当点击空白处时调用
    */
   static clearCutState() {
+    // 只清除剪切遮盖层
+    if (this.operationType === 'cut') {
+      const graphStore = useGraphStore();
+      graphStore.clearCutShapeIds();
+    }
+    // 注意：不清除 copiedShapes 和 operationType，保留剪贴板数据
+  }
+
+  /**
+   * 完全清除剪切状态和剪贴板数据
+   * 当需要完全重置时调用（如按ESC取消操作）
+   */
+  static clearAll() {
     if (this.operationType === 'cut') {
       const graphStore = useGraphStore();
       graphStore.clearCutShapeIds();
@@ -224,7 +257,7 @@ export class ContextMenuUtils {
   /**
    * 处理粘贴
    */
-  static handlePaste(target: any) {
+  static handlePaste(_target?: any) {
     if (this.copiedShapes.length === 0) {
       return;
     }
@@ -237,17 +270,15 @@ export class ContextMenuUtils {
       operationType: this.operationType
     });
 
-    // 如果是剪切操作,粘贴后清除剪切状态遮盖层和剪贴板
+    // 如果是剪切操作,粘贴后清除剪切状态遮盖层
     if (this.operationType === 'cut') {
       const graphStore = useGraphStore();
       graphStore.clearCutShapeIds();
-      
-      // 剪切粘贴后清空剪贴板数量
-      graphStore.setCopiedShapesCount(0);
-      this.copiedShapes = [];
-      this.operationType = 'copy';
     }
 
+    // 粘贴完成后清空剪贴板（无论是复制还是剪切）
+    this.clearClipboard();
+
     console.log('已粘贴的图元:', pastedShapes, '操作类型:', this.operationType);
   }