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

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,11 +31,9 @@ export const buildDragSnapshot = (
   shapes: Shape[],
   ids: string[],
 ) => {
-  const graphStore = useGraphStore();
-  const byId = graphStore.shapeMap;
   const dragBase: Record<string, Rect> = {}
   ids.forEach(id => {
-    const s = byId.get(id); if (!s) return
+    const s = shapes.find(x => x.id === id); if (!s) return
     const b = getBounds(s)
     dragBase[id] = { x: b.x, y: b.y, width: b.width, height: b.height }
   })
@@ -63,8 +61,7 @@ export const stepSingleDrag = (
   constrainEdges: { left?: boolean; top?: boolean; right?: boolean; bottom?: boolean },
   hitPointer?: { x: number; y: number },
 ) => {
-  const graphStore = useGraphStore();
-  const s = graphStore.shapeMap.get(id); if (!s) return { ghost: {}, hover: null }
+  const s = shapes.find(x => x.id === id); if (!s) return { ghost: {}, hover: null }
   const base = dragBase[id]; if (!base) return { ghost: {}, hover: null }
   const container = getDiagramRect(shapes)
 
@@ -104,8 +101,6 @@ 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
@@ -125,14 +120,14 @@ export const stepGroupDrag = (
   // 构建整组 ghost
   const ghost: Record<string, Rect> = {}
   for (const id of draggingIds) {
-    const s = byId.get(id); if (!s) continue
+    const s = shapes.find(x => x.id === 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 = byId.get(primaryId)
+  const priShape = shapes.find(x => x.id === primaryId)
   const diagramId = priShape?.diagramId || ''
 
   const hoverShape = pickContainerByPointerTopmost(
@@ -160,22 +155,9 @@ 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>()
 
-  // 递归收集所有后代 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 写回；不处理父子关系，也不扩父或夹回
+  // 仅把“参与拖拽的节点”的 ghost 写回；不处理父子关系，也不扩父或夹回
   for (const id of draggingIds) {
     const s = shapes.find(x => x.id === id)
     const r = ghost[id] // 参与拖拽的 id 都应当在 ghost 里
@@ -190,34 +172,12 @@ export const commitDrag = (
     }
 
     const pb = (baseMap?.[id] ?? (s.bounds as Rect))
-    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
+    const same =
+      pb.x === nb.x && pb.y === nb.y && pb.width === nb.width && pb.height === nb.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/keyboardUtils.ts

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

package/src/utils/shapeOps/shapeOps.ts

@@ -4,15 +4,6 @@
 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）
@@ -78,15 +69,13 @@ export function createShapeOperator<Shape extends { id: ShapeId }>() {
         return ids
     }
 
-    /** O(1) 删除：swap last + pop（会改变数组顺序），返回被删除的元素 */
-    const removeByIdFast = (list: Shape[], id: ShapeId): Shape | null => {
+    /** O(1) 删除：swap last + pop（会改变数组顺序） */
+    const removeByIdFast = (list: Shape[], id: ShapeId) => {
         const idx = indexMap.get(id)
-        if (idx == null) return null
+        if (idx == null) return false
 
         const lastIdx = list.length - 1
-        if (lastIdx < 0) return null
-
-        const removed = list[idx]
+        if (lastIdx < 0) return false
 
         if (idx !== lastIdx) {
             const moved = list[lastIdx]
@@ -96,57 +85,52 @@ export function createShapeOperator<Shape extends { id: ShapeId }>() {
 
         list.pop()
         indexMap.delete(id)
-        return removed
+        return true
     }
 
     /** upsert：有则整条替换，无则 push 新增 */
-    const upsertOne = (list: Shape[], incoming: Shape): { changed: boolean; isAdd: boolean; oldShape?: Shape } => {
+    const upsertOne = (list: Shape[], incoming: Shape) => {
         const id = incoming?.id
-        if (id == null) return { changed: false, isAdd: false }
+        if (id == null) return 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): { changed: boolean; oldShape?: Shape } => {
+    const updateOne = (list: Shape[], incoming: Shape) => {
         const id = incoming?.id
-        if (id == null) return { changed: false }
+        if (id == null) return false
 
         const idx = indexMap.get(id)
-        if (idx == null) return { changed: false }
+        if (idx == null) return false
 
-        const oldShape = list[idx]
         list[idx] = incoming
-        return { changed: true, oldShape }
+        return true
     }
 
     /**
      * add：不存在才新增
-     * - 已存在时选择"替换"保证最终一致
+     * - 已存在时选择“替换”保证最终一致
      */
-    const addOne = (list: Shape[], incoming: Shape): { changed: boolean; isAdd: boolean; oldShape?: Shape } => {
+    const addOne = (list: Shape[], incoming: Shape) => {
         const id = incoming?.id
-        if (id == null) return { changed: false, isAdd: false }
+        if (id == null) return 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
     }
 
     /**
@@ -156,9 +140,8 @@ 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") {
@@ -175,8 +158,8 @@ export function createShapeOperator<Shape extends { id: ShapeId }>() {
             for (let i = 0; i < list.length; i++) {
                 indexMap.set(list[i].id, i)
             }
-            //  replace 场景：返回空的 changeDetails，调用方应该全量重建索引
-            return { changedShapes: incomingShapes, changeDetails: [] }
+            //  replace 场景：可以认为所有都是“变更”，直接返回整批（方便 autoExpand）
+            return { changedShapes: incomingShapes }
         }
         // 轻量保证索引可用
         ensureIndex(list)
@@ -186,12 +169,9 @@ export function createShapeOperator<Shape extends { id: ShapeId }>() {
         if (op === "delete") {
             const ids = extractIds(payload as any)
             for (const id of ids) {
-                const removed = removeByIdFast(list, id)
-                if (removed) {
-                    changeDetails.push({ type: 'delete', shape: removed })
-                }
+                removeByIdFast(list, id)
             }
-            return { changedShapes, changeDetails }
+            return { changedShapes }
         }
 
         const incomingShapes = payload as Shape[]
@@ -199,39 +179,15 @@ export function createShapeOperator<Shape extends { id: ShapeId }>() {
             if (!incoming) continue
 
             if (op === "upsert") {
-                const result = upsertOne(list, incoming)
-                if (result.changed) {
-                    changedShapes.push(incoming)
-                    changeDetails.push({
-                        type: result.isAdd ? 'add' : 'update',
-                        shape: incoming,
-                        oldShape: result.oldShape
-                    })
-                }
+                if (upsertOne(list, incoming)) changedShapes.push(incoming)
             } else if (op === "update") {
-                const result = updateOne(list, incoming)
-                if (result.changed) {
-                    changedShapes.push(incoming)
-                    changeDetails.push({
-                        type: 'update',
-                        shape: incoming,
-                        oldShape: result.oldShape
-                    })
-                }
+                if (updateOne(list, incoming)) changedShapes.push(incoming)
             } else if (op === "add") {
-                const result = addOne(list, incoming)
-                if (result.changed) {
-                    changedShapes.push(incoming)
-                    changeDetails.push({
-                        type: result.isAdd ? 'add' : 'update',
-                        shape: incoming,
-                        oldShape: result.oldShape
-                    })
-                }
+                if (addOne(list, incoming)) changedShapes.push(incoming)
             }
         }
 
-        return { changedShapes, changeDetails }
+        return { changedShapes }
     }
 
     return {

package/src/view/graph.vue

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