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

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

@@ -74,7 +74,6 @@ export const useGraphStore = defineStore('graph', () => {
   const cutShapeIds = ref<Set<string>>(new Set())
   // 剪贴板中图元的数量（用于工具栏按钮状态同步）
   const copiedShapesCount = ref<number>(0)
-
   // 计算属性
   const shapeCount = computed(() => shapes.value.length)
   const hasSelectedShape = computed(() => selectedShape.value !== null)
@@ -149,7 +148,7 @@ export const useGraphStore = defineStore('graph', () => {
 
     shapes.value.push(shape)
     // 通过事件总线发送事件
-    eventBus.emit('shape-added', shape)
+    // eventBus.emit('shape-added', shape)
 
     // 自动扩父逻辑：如果图元有父元素且需要自动扩父，触发扩父逻辑
     const shouldAutoExpand = options?.autoExpandParent !== false // 默认为 true
@@ -164,16 +163,6 @@ 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)
-      //   }
-      // }
       // 如果删除的是当前选中的形状，清除选中状态
       if (selectedShape.value?.id === shapeId) {
         selectedShape.value = null
@@ -380,28 +369,6 @@ export const useGraphStore = defineStore('graph', () => {
     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
@@ -589,6 +556,7 @@ export const useGraphStore = defineStore('graph', () => {
   }
   // 结束拖动：提交位置/尺寸 + 处理归属 + 规范层级
   const endDragShape = async (source?: string) => {
+    // 防并发：同一次拖拽只允许进入一次
     if (!isDragging.value) return
     // 提交拖动几何（commitDrag 只是“位置/大小”的更新）
     const changedIds = commitDrag(
@@ -632,7 +600,6 @@ export const useGraphStore = defineStore('graph', () => {
         pendingNestedIds,
         addShape,
       })
-
       if (nestResult.cancelled) {
         // 嵌套校验失败，已经在 graphDragService 里回滚了位置/父级，这里只需要收尾
         cleanupAfterDrag()
@@ -652,7 +619,6 @@ export const useGraphStore = defineStore('graph', () => {
         1,
       )
     }
-
     // —— Pin 终极兜底：不允许在本次拖拽后变成“无父” ——
     for (const id of changedIds) {
       const node = shapes.value.find(s => s.id === id)
@@ -671,13 +637,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 +674,6 @@ export const useGraphStore = defineStore('graph', () => {
       ownerPayload,
       updateShape,
     })
-
     // 先同步调整画布大小，确保获取到最新的画布数据
     adjustCanvasToFitAllShapes()
 
@@ -705,11 +690,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()
   }

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);
   }
 

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/shapeOps/shapeOps.ts

@@ -11,19 +11,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
+            }
         }
     }