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

package/src/utils/drag.ts

@@ -1,4 +1,4 @@
-// utils/drag.ts
+// utils/drag.ts
 import type { Shape } from '../types'
 import { getBounds, getDiagramRect, clampPointToRect } from './geom'
 import { useGraphStore } from '../store/graphStore'
@@ -31,9 +31,11 @@ export const buildDragSnapshot = (
   shapes: Shape[],
   ids: string[],
 ) => {
+  const graphStore = useGraphStore();
+  const byId = graphStore.shapeMap;
   const dragBase: Record<string, Rect> = {}
   ids.forEach(id => {
-    const s = shapes.find(x => x.id === id); if (!s) return
+    const s = byId.get(id); if (!s) return
     const b = getBounds(s)
     dragBase[id] = { x: b.x, y: b.y, width: b.width, height: b.height }
   })
@@ -61,7 +63,8 @@ export const stepSingleDrag = (
   constrainEdges: { left?: boolean; top?: boolean; right?: boolean; bottom?: boolean },
   hitPointer?: { x: number; y: number },
 ) => {
-  const s = shapes.find(x => x.id === id); if (!s) return { ghost: {}, hover: null }
+  const graphStore = useGraphStore();
+  const s = graphStore.shapeMap.get(id); if (!s) return { ghost: {}, hover: null }
   const base = dragBase[id]; if (!base) return { ghost: {}, hover: null }
   const container = getDiagramRect(shapes)
 
@@ -101,6 +104,8 @@ export const stepGroupDrag = (
   dragAnchor: { x: number; y: number },
   groupBaseBox: Rect,
 ) => {
+  const graphStore = useGraphStore();
+  const byId = graphStore.shapeMap;
   const diagramRect = getDiagramRect(shapes)
   const dxRaw = pointer.x - dragAnchor.x
   const dyRaw = pointer.y - dragAnchor.y
@@ -120,14 +125,14 @@ export const stepGroupDrag = (
   // 构建整组 ghost
   const ghost: Record<string, Rect> = {}
   for (const id of draggingIds) {
-    const s = shapes.find(x => x.id === id); if (!s) continue
+    const s = byId.get(id); if (!s) continue
     const b = getBounds(s)
     ghost[id] = { x: b.x + dx, y: b.y + dy, width: b.width, height: b.height }
   }
 
   // —— hover 统一改为“指针命中 topmost 容器”
   // 用主拖动项获取 diagramId（也可以存你当前图的 id）
-  const priShape = shapes.find(x => x.id === primaryId)
+  const priShape = byId.get(primaryId)
   const diagramId = priShape?.diagramId || ''
 
   const hoverShape = pickContainerByPointerTopmost(
@@ -155,9 +160,22 @@ export const commitDrag = (
   updateShape: (id: string, updates: Partial<Shape>) => void,
   baseMap?: Record<string, Rect>
 ) => {
+  const graphStore = useGraphStore();
+  const parentChildMap = graphStore.parentChildMap;
   const changedIds = new Set<string>()
 
-  // 仅把“参与拖拽的节点”的 ghost 写回；不处理父子关系，也不扩父或夹回
+  // 递归收集所有后代 ID
+  const collectAllDescendants = (parentId: string): string[] => {
+    const result: string[] = []
+    const children = parentChildMap.get(parentId) || []
+    for (const childId of children) {
+      result.push(childId)
+      result.push(...collectAllDescendants(childId))
+    }
+    return result
+  }
+
+  // 仅把"参与拖拽的节点"的 ghost 写回；不处理父子关系，也不扩父或夹回
   for (const id of draggingIds) {
     const s = shapes.find(x => x.id === id)
     const r = ghost[id] // 参与拖拽的 id 都应当在 ghost 里
@@ -172,12 +190,34 @@ export const commitDrag = (
     }
 
     const pb = (baseMap?.[id] ?? (s.bounds as Rect))
-    const same =
-      pb.x === nb.x && pb.y === nb.y && pb.width === nb.width && pb.height === nb.height
+    const dx = nb.x - pb.x
+    const dy = nb.y - pb.y
+    const same = dx === 0 && dy === 0 && nb.width === pb.width && nb.height === pb.height
 
     if (!same) {
       updateShape(id, { bounds: nb })
       changedIds.add(id)
+
+      // 性能优化：同步移动所有后代元素（只在父元素位置变化时）
+      if (dx !== 0 || dy !== 0) {
+        const descendants = collectAllDescendants(id)
+        for (const descId of descendants) {
+          // 跳过已经在 draggingIds 中的元素（避免重复处理）
+          if (draggingIds.includes(descId)) continue
+          const descShape = shapes.find(x => x.id === descId)
+          if (!descShape?.bounds) continue
+          const descBounds = descShape.bounds as Rect
+          updateShape(descId, {
+            bounds: {
+              x: Math.round(descBounds.x + dx),
+              y: Math.round(descBounds.y + dy),
+              width: descBounds.width,
+              height: descBounds.height,
+            }
+          })
+          changedIds.add(descId)
+        }
+      }
     }
   }
 

package/src/utils/graphDragService.ts

@@ -77,13 +77,14 @@ export async function applyReparentAndClone(options: {
     const graphStore = useGraphStore()
     let ownerPayload: OwnerPayload | null = null
     const clonedIds: string[] = []
-    // 只在嵌套/脱离时刷新
-    const parentsToRefresh = new Set<string>();
-    const normPid = (pid: any): string | null => {
-        const v = pid ?? null;
-        return v === "" ? null : v;
-    };
-    for (const id of changedIds) {
+    // 只保留顶层变更：父也在 changedIds 中的，认为是后代（跳过克隆）
+    const changedSet = new Set(changedIds)
+    const topLevelChangedIds = changedIds.filter(id => {
+        const beforePid = prevParentById[id] ?? null
+        const afterPid = shapes.find(s => s.id === id)?.parenShapeId ?? null
+        return !(beforePid && changedSet.has(beforePid)) && !(afterPid && changedSet.has(afterPid))
+    })
+    for (const id of topLevelChangedIds) {
         const after = shapes.find(s => s.id === id)
         if (!after) continue
 
@@ -132,7 +133,6 @@ export async function applyReparentAndClone(options: {
                     parenShapeId: prevParentById[id] || '',
                     bounds: baseBounds ? { ...baseBounds } : dropBounds,
                 })
-
                 // 放进画布
                 addShape(clonedShape)
                 pendingNestedIds.value.push(newId)
@@ -144,7 +144,7 @@ export async function applyReparentAndClone(options: {
                 })
 
                 const cloneInStore = shapes.find(s => s.id === newId) || clonedShape
-                const shapeDataForAdd: any = _.cloneDeep(cloneInStore)
+                const shapeDataForAdd: any = _.cloneDeep(cloneInStore)      
                 const payloadData: any = {
                     coordinate: {
                         clientX: dropBounds.x,
@@ -322,6 +322,7 @@ export const createOnNestDoneCallback = (options: {
         if (!expanded) return
         const afterParent = JSON.stringify(parent.bounds ?? {})
         if (afterParent == beforeParent) return
+        return { id: parent.id, bounds: afterParent }
         // 只更新当前嵌套的父图元（parent）
         // eventBus.emit('shape-size-update', [
         //     { id: parent.id, bounds: afterParent },

package/src/utils/keyboardUtils.ts

@@ -31,11 +31,13 @@ const KEYBOARD_MOVE_DEBOUNCE_DELAY = 1000; // 1000ms 防抖延迟
  */
 const collectAffectedShapeIds = (graphStore: any, movedIds: Set<string>): Set<string> => {
   const affectedIds = new Set<string>();
+  const shapeMap = graphStore.shapeMap;
 
   movedIds.forEach(id => {
     affectedIds.add(id);
 
-    const shape = graphStore.shapes.find((s: any) => s.id === id);
+    // 使用 shapeMap O(1) 查找
+    const shape = shapeMap.get(id);
     if (!shape) return;
 
     // 添加父元素
@@ -58,7 +60,8 @@ const collectAffectedShapeIds = (graphStore: any, movedIds: Set<string>): Set<st
     let guard = 0;
     while (currentParentId && guard++ < 100) {
       affectedIds.add(currentParentId);
-      const parent = graphStore.shapes.find((s: any) => s.id === currentParentId);
+      // 使用 shapeMap O(1) 查找
+      const parent = shapeMap.get(currentParentId);
       currentParentId = parent?.parenShapeId;
     }
   });
@@ -74,10 +77,11 @@ const emitKeyboardMoveEnd = (graphStore: any) => {
 
   // 收集所有受影响的图元
   const affectedIds = collectAffectedShapeIds(graphStore, keyboardMovingShapeIds);
+  const shapeMap = graphStore.shapeMap;
 
-  // 组装 payloads(深拷贝)
+  // 组装 payloads(深拷贝) - 使用 shapeMap O(1) 查找
   const payloads = Array.from(affectedIds)
-    .map(id => graphStore.shapes.find((s: any) => s.id === id))
+    .map(id => shapeMap.get(id))
     .filter(Boolean)
     .map(s => _.cloneDeep(s));
 
@@ -286,8 +290,14 @@ export const createKeyboardHandler = (config: KeyboardConfig): KeyboardEventHand
       e.preventDefault();
       const step = 1; // 移动距离
 
-      // 获取画布信息（diagram类型的shape）
-      const canvas = graphStore.shapes.find(shape => shape.shapeType === 'diagram');
+      // 获取画布信息（diagram类型的shape）- 遍历一次找 diagram
+      let canvas: any = null;
+      for (const shape of graphStore.shapes) {
+        if (shape.shapeType === 'diagram') {
+          canvas = shape;
+          break;
+        }
+      }
       const canvasX = canvas?.bounds?.x || 0;
       const canvasY = canvas?.bounds?.y || 0;
       const canvasWidth = canvas?.bounds?.width || 300; // 最小画布宽度
@@ -299,10 +309,13 @@ export const createKeyboardHandler = (config: KeyboardConfig): KeyboardEventHand
       const canvasMaxX = canvasWidth + canvasX;
       const canvasMaxY = canvasHeight + canvasY;
 
-      // 获取所有选中的图元
-      const selectedShapes = graphStore.selectedIds
-        .map(id => graphStore.shapes.find(s => s.id === id))
-        .filter((shape): shape is NonNullable<typeof shape> => shape != null);
+      // 获取所有选中的图元 - 使用 shapeMap O(1) 查找
+      const shapeMap = graphStore.shapeMap;
+      const selectedShapes: any[] = [];
+      for (const id of graphStore.selectedIds) {
+        const shape = shapeMap.get(id);
+        if (shape) selectedShapes.push(shape);
+      }
 
       // ==================== 防抖机制:记录初始状态 ====================
       // 在第一次移动时记录初始bounds
@@ -362,7 +375,8 @@ export const createKeyboardHandler = (config: KeyboardConfig): KeyboardEventHand
           // 查找并计算所有子图元的新位置
           const childIds = graphStore.parentChildMap.get(shape.id) || [];
           childIds.forEach(childId => {
-            const child = graphStore.shapes.find(s => s.id === childId);
+            // 使用 shapeMap O(1) 查找
+            const child = shapeMap.get(childId);
             if (child && child.bounds) {
               // 如果子图元也在选中列表中,跳过它
               // 因为它会在遍历 selectedShapes 时被单独处理

package/src/utils/shapeOps/shapeOps.ts

@@ -4,6 +4,15 @@
 export type ShapeId = string | number
 export type ShapeOp = "add" | "update" | "delete" | "upsert" | "replace"
 
+/**
+ * 变更详情，用于增量更新外部索引
+ */
+export interface ShapeChangeDetail<Shape> {
+    type: 'add' | 'update' | 'delete'
+    shape: Shape
+    oldShape?: Shape  // update 时提供旧值，用于检测父节点变更
+}
+
 /**
  * 创建一个图元操作器（每个操作器维护自己的 indexMap）
  *  推荐在每个 store 实例里创建一次并复用（不要每次调用都 new）
@@ -11,19 +20,47 @@ export type ShapeOp = "add" | "update" | "delete" | "upsert" | "replace"
 export function createShapeOperator<Shape extends { id: ShapeId }>() {
     const indexMap = new Map<ShapeId, number>()
     /**
-       * 重建索引
-       */
-    const resetIndex = (list: Shape[]) => {
+      * 重建索引 + 去重（保留最后出现的同 id）
+      * 说明：
+      * - 从尾到头遍历，遇到重复 id 就删掉前面的（更早的那条）
+      * - 最终 list 中保证每个 id 只剩 1 条
+      */
+    const rebuildIndexAndDedupe = (list: Shape[]) => {
+        const seen = new Set<ShapeId>()
+
+        // 先去重：保留最后一条
+        for (let i = list.length - 1; i >= 0; i--) {
+            const id = list[i]?.id
+            if (id == null) continue
+            if (seen.has(id)) {
+                list.splice(i, 1) // 删除更早的重复项
+            } else {
+                seen.add(id)
+            }
+        }
+
+        // 再重建索引
         indexMap.clear()
         for (let i = 0; i < list.length; i++) {
             indexMap.set(list[i].id, i)
         }
     }
+    /**
+      * 确保索引可用：
+      * - 不仅检查 size，还校验 indexMap 指向的元素是否真的匹配 id
+      * - 一旦发现错位/重复，直接 rebuild
+      */
     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)
+        if (indexMap.size !== list.length) {
+            rebuildIndexAndDedupe(list)
+            return
+        }
+        // 校验映射是否仍然正确（防止 sort/reorder 导致错位）
+        for (const [id, idx] of indexMap) {
+            if (list[idx]?.id !== id) {
+                rebuildIndexAndDedupe(list)
+                return
+            }
         }
     }
 
@@ -41,13 +78,15 @@ export function createShapeOperator<Shape extends { id: ShapeId }>() {
         return ids
     }
 
-    /** O(1) 删除：swap last + pop（会改变数组顺序） */
-    const removeByIdFast = (list: Shape[], id: ShapeId) => {
+    /** O(1) 删除：swap last + pop（会改变数组顺序），返回被删除的元素 */
+    const removeByIdFast = (list: Shape[], id: ShapeId): Shape | null => {
         const idx = indexMap.get(id)
-        if (idx == null) return false
+        if (idx == null) return null
 
         const lastIdx = list.length - 1
-        if (lastIdx < 0) return false
+        if (lastIdx < 0) return null
+
+        const removed = list[idx]
 
         if (idx !== lastIdx) {
             const moved = list[lastIdx]
@@ -57,52 +96,57 @@ export function createShapeOperator<Shape extends { id: ShapeId }>() {
 
         list.pop()
         indexMap.delete(id)
-        return true
+        return removed
     }
 
     /** upsert：有则整条替换，无则 push 新增 */
-    const upsertOne = (list: Shape[], incoming: Shape) => {
+    const upsertOne = (list: Shape[], incoming: Shape): { changed: boolean; isAdd: boolean; oldShape?: Shape } => {
         const id = incoming?.id
-        if (id == null) return false
+        if (id == null) return { changed: false, isAdd: false }
 
         const idx = indexMap.get(id)
         if (idx == null) {
             list.push(incoming)
             indexMap.set(id, list.length - 1)
+            return { changed: true, isAdd: true }
         } else {
+            const oldShape = list[idx]
             list[idx] = incoming
+            return { changed: true, isAdd: false, oldShape }
         }
-        return true
     }
 
     /** update：仅存在才替换 */
-    const updateOne = (list: Shape[], incoming: Shape) => {
+    const updateOne = (list: Shape[], incoming: Shape): { changed: boolean; oldShape?: Shape } => {
         const id = incoming?.id
-        if (id == null) return false
+        if (id == null) return { changed: false }
 
         const idx = indexMap.get(id)
-        if (idx == null) return false
+        if (idx == null) return { changed: false }
 
+        const oldShape = list[idx]
         list[idx] = incoming
-        return true
+        return { changed: true, oldShape }
     }
 
     /**
      * add：不存在才新增
-     * - 已存在时选择“替换”保证最终一致
+     * - 已存在时选择"替换"保证最终一致
      */
-    const addOne = (list: Shape[], incoming: Shape) => {
+    const addOne = (list: Shape[], incoming: Shape): { changed: boolean; isAdd: boolean; oldShape?: Shape } => {
         const id = incoming?.id
-        if (id == null) return false
+        if (id == null) return { changed: false, isAdd: false }
 
         const idx = indexMap.get(id)
         if (idx == null) {
             list.push(incoming)
             indexMap.set(id, list.length - 1)
+            return { changed: true, isAdd: true }
         } else {
+            const oldShape = list[idx]
             list[idx] = incoming
+            return { changed: true, isAdd: false, oldShape }
         }
-        return true
     }
 
     /**
@@ -112,8 +156,9 @@ export function createShapeOperator<Shape extends { id: ShapeId }>() {
         list: Shape[]
         payload: Shape[] | ShapeId[]
         op: ShapeOp
-    }) => {
+    }): { changedShapes: Shape[]; changeDetails: ShapeChangeDetail<Shape>[] } => {
         const { list, payload, op } = args
+        const changeDetails: ShapeChangeDetail<Shape>[] = []
 
         // ==================== replace：全量覆盖（就地覆盖数组内容） ====================
         if (op === "replace") {
@@ -130,8 +175,8 @@ export function createShapeOperator<Shape extends { id: ShapeId }>() {
             for (let i = 0; i < list.length; i++) {
                 indexMap.set(list[i].id, i)
             }
-            //  replace 场景：可以认为所有都是“变更”，直接返回整批（方便 autoExpand）
-            return { changedShapes: incomingShapes }
+            //  replace 场景：返回空的 changeDetails，调用方应该全量重建索引
+            return { changedShapes: incomingShapes, changeDetails: [] }
         }
         // 轻量保证索引可用
         ensureIndex(list)
@@ -141,9 +186,12 @@ export function createShapeOperator<Shape extends { id: ShapeId }>() {
         if (op === "delete") {
             const ids = extractIds(payload as any)
             for (const id of ids) {
-                removeByIdFast(list, id)
+                const removed = removeByIdFast(list, id)
+                if (removed) {
+                    changeDetails.push({ type: 'delete', shape: removed })
+                }
             }
-            return { changedShapes }
+            return { changedShapes, changeDetails }
         }
 
         const incomingShapes = payload as Shape[]
@@ -151,15 +199,39 @@ export function createShapeOperator<Shape extends { id: ShapeId }>() {
             if (!incoming) continue
 
             if (op === "upsert") {
-                if (upsertOne(list, incoming)) changedShapes.push(incoming)
+                const result = upsertOne(list, incoming)
+                if (result.changed) {
+                    changedShapes.push(incoming)
+                    changeDetails.push({
+                        type: result.isAdd ? 'add' : 'update',
+                        shape: incoming,
+                        oldShape: result.oldShape
+                    })
+                }
             } else if (op === "update") {
-                if (updateOne(list, incoming)) changedShapes.push(incoming)
+                const result = updateOne(list, incoming)
+                if (result.changed) {
+                    changedShapes.push(incoming)
+                    changeDetails.push({
+                        type: 'update',
+                        shape: incoming,
+                        oldShape: result.oldShape
+                    })
+                }
             } else if (op === "add") {
-                if (addOne(list, incoming)) changedShapes.push(incoming)
+                const result = addOne(list, incoming)
+                if (result.changed) {
+                    changedShapes.push(incoming)
+                    changeDetails.push({
+                        type: result.isAdd ? 'add' : 'update',
+                        shape: incoming,
+                        oldShape: result.oldShape
+                    })
+                }
             }
         }
 
-        return { changedShapes }
+        return { changedShapes, changeDetails }
     }
 
     return {

package/src/view/graph.vue

@@ -360,7 +360,8 @@ const updateShapes = (shapes: Shape[]) => {
   })
   clearEdgeStyleCache() // 批量更新时清空 edge 样式缓存，避免旧数据残留
   // graphStore.updateShapes(shapes)
-   graphStore.shapes=[]
+  // 使用 clearAll 清空数据和索引，然后用 replace 重新加载
+  graphStore.clearAll()
   graphStore.updateShapes(shapes, 'replace');
   // 在图形批量更新后（通常是从后端加载数据），初始化所有连线的端点
   // 确保连线不会横跨图元，而是从合适的位置连接
@@ -388,7 +389,8 @@ function sweepShapesWithInert() {
   let removed = 0
   for (let i = arr.length - 1; i >= 0; i--) {
     if ('inert' in arr[i]) {
-      arr.splice(i, 1)     // 直接删，避免 removeShape 的事件/副作用导致回填
+      // 使用 removeShape 确保索引同步
+      graphStore.removeShape(arr[i].id)
       removed++
     }
   }