@mx-sose-front/mx-sose-graph 1.0.0

package/src/store/graphStore.ts

@@ -0,0 +1,782 @@
+import { defineStore } from 'pinia'
+import { ref, computed, shallowReactive, type Ref } from 'vue'
+import type { Shape, OwnerPayload, ShapeSizeUpdatePayload } from '../types'
+import { eventBus } from './eventBus'
+import { getPolicy, checkNestViaFront, } from '../utils/policy'
+import _ from "lodash";
+import { collectDescendantIds, } from '../utils/containers'
+import { normalizeZOrder } from '../utils/zorder'
+import {
+  buildDragSnapshot,
+  stepSingleDrag,
+  stepGroupDrag,
+  commitDrag,
+  finalizeAfterTransform,
+} from '../utils/drag'
+import {
+  isShapeTypeNotInPackageTypes, removeChildShapeFromCompartment, addChildShapeToCompartment, hydrateComparentsFromJSON,
+  rebuildAllCompartmentChildrenAsShapes,
+  syncComparentShapesIntoRuntime,
+} from '../utils/compartment'
+import { EdgeUtils } from '../utils/edgeUtils'
+import { expandParentByChild } from '../utils/autoExpandParent'
+import { applyReparentAndClone, autoExpandMovedCompartmentsAfterDrag, buildDragEndPayloads, buildPrevParentMap, collectAffectedShapeIds, createOnNestDoneCallback } from '../utils/graphDragService'
+type Rect = { x: number; y: number; width: number; height: number };
+export const useGraphStore = defineStore('graph', () => {
+  // 状态
+  const shapes = ref<Shape[]>([])
+  // 缩放比例 - 按画布ID存储
+  const scales = ref<Record<string, number>>({});
+  const selectedShape = ref<Shape | null>(null)
+  const diagramTitle = ref('未命名图表')
+  // 是否正在拖动元素
+  const isDragging = ref(false)
+  // 嵌套悬停容器高亮
+  const hoverContainerId = ref<string | null>(null)
+  // 当前元素是否允许嵌套
+  const hoverNestable = ref<boolean | null>(null)
+  // 存放“等待后端改类型”的图元 id 列表
+  const pendingNestedIds = ref<string[]>([])
+  // 当前拖动的元素 id
+  const draggingShapeId = ref<string | null>(null)
+  const draggingIds = ref<string[]>([])           // 当前正在拖动的 id 集合（单个时只有一个）
+  const dragAnchor = ref<{ x: number; y: number } | null>(null) // 按下时的指针位置
+  const dragBase = ref<Record<string, Rect>>({}) // 按下时的元素快照（完整矩形）
+  const dragGhost = shallowReactive<Record<string, Rect>>({}) // 拖动中的影子（不直接改实体）
+  let lastHoverId: string | null = '__INIT__' as any                    // 只在 hover 变化时才重算 canNest
+  const canDropOnCanvas = ref(false)//用来控制图元是否可以放到画布上面，不可以的话显示禁用标志
+  // 拖拽前的选中元素（用于恢复 UI 选中）
+  const dragSelectionSnapshot = ref<string[]>([])
+  // 拖拽时的“主拖动项”（用于组拖命中计算/高亮时可用）
+  const primaryDragId = ref<string | null>(null)
+  const groupBaseBox = ref<Rect | null>(null)
+  // 指针相对图元左上角的偏移，用于保持拖动时鼠标与元素的相对位置
+  const dragOffset = ref<{ x: number; y: number } | null>(null)
+  //当前打开画布的列表
+  const diagrams = ref<Shape[]>([])
+  //当前打开的画布id
+  const currentDiagramId = ref<string | null>(null)
+  //当前激活的画布id
+  const activeDiagramId = ref<string | null>(null);
+  // 当前被选中的多个 id
+  const selectedIds = ref<string[]>([])
+  const comparentsHydratedOnce = ref(false)
+  // 外部拖拽创建中的形状 id（用于隐藏实际形状，只显示 ghost）
+  const externalCreatingId = ref<string | null>(null)
+  // 计算属性
+  const shapeCount = computed(() => shapes.value.length)
+  const hasSelectedShape = computed(() => selectedShape.value !== null)
+  //图元shapeKey
+  const taggedValueLabels = ref<string[]>([])   // 隔间组件的图元类型
+  const packagesTypes = ref<string[]>([])           // 需要展示线的隔间组件的图元类型
+  const classMetaTypes = ref<string[]>([]) //可以生成的class类型
+  const ownerRequiredShapeKeys = ref<string[]>([])//哪些图元需要自动补 ownerId
+  const pinsTypes=ref<string[]>([])//栓类型
+  const portsTypes = ref<string[]>([])//端口类型
+  // 方法
+  /**
+   * 添加图元
+   * @param shape - The shape to add
+   */
+  // 添加图元
+  const addShape = (shape: Shape) => {
+    // 检查是否是边类型且已经存在相同类型、相同源和目标的边
+    if (shape.shapeType === 'edge' && shape.sourceId && shape.targetId) {
+      const existingEdge = shapes.value.find(
+        s => s.shapeType === 'edge' &&
+          s.sourceId === shape.sourceId &&
+          s.targetId === shape.targetId &&
+          s.shapeKey === shape.shapeKey
+      );
+
+      // 如果已经存在相同类型的边，则不添加并发送警告事件
+      if (existingEdge) {
+        return;
+      }
+    }
+
+    shapes.value.push(shape)
+    // 通过事件总线发送事件
+    eventBus.emit('shape-added', shape)
+  }
+  //移除图元 
+  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
+        eventBus.emit('shape-deselected')
+      }
+    }
+  }
+  //删除选中的元素
+  const removeSelected = () => {
+    if (!selectedIds.value.length) return
+    // 先拍个快照，避免过程中 selectedIds 变化
+    const ids = [...selectedIds.value]
+    ids.forEach(id => removeShape(id))
+    // 清空选择状态
+    selectedShape.value = null
+    selectedIds.value = []
+  }
+  function refreshChildSnapshotInCompartment(parent: Shape, child: Shape) {
+    // 直接“先移后加”达到“替换快照”的效果（工具内部会用快照，避免 Proxy/循环）
+    removeChildShapeFromCompartment(parent, child, updateShapeRaw)
+    addChildShapeToCompartment(parent, child, updateShapeRaw)
+  }
+
+  // 用于画布渲染的可见图元列表
+  const visibleShapes = computed<Shape[]>(() => {
+    const pendings = pendingNestedIds.value
+    if (!pendings.length) return shapes.value
+    const pendingSet = new Set(pendings)
+    return shapes.value.filter(s => !pendingSet.has(s.id))
+  })
+  // 更新单个图元（不处理父子关系 / comparents，同步由外层 updateShape 负责）
+  const updateShapeRaw = (shapeId: string, updates: Partial<Shape>, id: 'id' | 'modelId' = 'id') => {
+    const shape = shapes.value.find(s => s[id] === shapeId)
+    if (shape) {
+      // 对 Pin 做强保护：永不允许把 parenShapeId 置空/undefined
+      if (shape.shapeType === 'pin' && 'parenShapeId' in updates) {
+        const v: any = (updates as any).parenShapeId
+        if (v == null || v === '') {
+          // 丢弃本次对父字段的修改，仅应用其它字段
+          const { parenShapeId, ...rest } = updates as any
+          updates = rest as Partial<Shape>
+        }
+      }
+      // 归一化：如果调用方显式想“清空父”，统一改成空字符串（历史兼容）
+      if ('parenShapeId' in updates && (updates as any).parenShapeId == null) {
+        (updates as any).parenShapeId = ''
+      }
+      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 })
+      eventBus.emit('shape-updated', shape, updates)
+    }
+  }
+  // 更新图元数据
+  const updateShape = (shapeId: string, updates: Partial<Shape>, id: 'id' | 'modelId' = 'id') => {
+    const before = shapes.value.find(s => s[id] === shapeId) || null
+    const oldPid = before?.parenShapeId ?? null
+    // 先真正写入
+    updateShapeRaw(shapeId, updates, id)
+    const after = shapes.value.find(s => s[id] === shapeId) || null
+    if (!after) return
+
+    // 如果更新了bounds，需要重新计算相关连线的位置
+    if (updates.bounds) {
+      EdgeUtils.updateRelatedEdges(shapes.value, [after.id], (shape) => {
+        updateShape(shape.id, shape);
+      });
+    }
+
+    const newPid = after.parenShapeId ?? null
+    // 父变了：从旧父移除、向新父添加（工具内部有去重/幂等）
+    if (oldPid !== newPid) {
+      if (oldPid) {
+        const oldP = shapes.value.find(s => s.id === oldPid)
+        if (oldP && isShapeTypeNotInPackageTypes(oldP)) {
+          removeChildShapeFromCompartment(oldP, after, updateShapeRaw)
+        }
+      }
+      if (newPid) {
+        const newP = shapes.value.find(s => s.id === newPid)
+        if (newP && isShapeTypeNotInPackageTypes(newP)) {
+          addChildShapeToCompartment(newP, after, updateShapeRaw)
+        }
+      }
+      return
+    }
+    //  父没变 & 在隔间里：刷新快照（属性变化时也要同步到 comparentShapes）
+    if (newPid) {
+      const p = shapes.value.find(s => s.id === newPid)
+      if (p && isShapeTypeNotInPackageTypes(p)) {
+        refreshChildSnapshotInCompartment(p, after)
+      }
+    }
+  }
+  const sameId = (a?: string | null, b?: string | null) =>
+    (a ?? null) === (b ?? null)
+  //选中图元
+  const selectShape = (shape: Shape | null) => {
+    const prevId = selectedShape.value?.id ?? null
+    const nextId = shape?.id ?? null
+    if (sameId(prevId, nextId)) return
+    selectedShape.value = shape
+    selectedIds.value = shape ? [shape.id] : []
+    // 通过事件总线发送事件
+    eventBus.emit('shape-selected', shape)
+  }
+  // 被框选中的多个 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 ghostShadow = computed<Shape[]>(() => {
+    const out: Shape[] = []
+    // 兜底：防止被持久化还原成非数组
+    const pendingList = Array.isArray(pendingNestedIds.value)
+      ? pendingNestedIds.value
+      : []
+    const pendingSet = new Set(pendingList)
+    for (const id in dragGhost) {
+      // 如果当前 id 在 pending 里，不生成 ghost
+      if (pendingSet.has(id)) continue
+      const orig = shapes.value.find(x => x.id === id)
+      if (!orig) continue
+      out.push({
+        ...orig,
+        bounds: { ...dragGhost[id] },
+        meta: { ...(orig as any).meta, isGhost: true } as any,
+      } as Shape)
+    }
+    return out
+  })
+  // 选择一组（用于框选/Shift 叠加）
+  const selectMany = (ids: string[]) => {
+    selectedIds.value = Array.from(new Set(ids))
+    selectedShape.value = ids.length
+      ? (shapes.value.find(s => s.id === ids[0]) ?? null)
+      : null
+  }
+  // 清空选择
+  const clearSelection = () => selectShape(null)
+  // 设置图表标题
+  const setTitle = (title: string) => {
+    diagramTitle.value = title
+    // 通过事件总线发送事件
+    eventBus.emit('title-changed', title)
+  }
+
+  // 批量操作
+  const updateShapes = (newShapes: Shape[]) => {
+    // 先把 comparents[*].comparentShapes 铺平同步到运行时
+    const expanded = syncComparentShapesIntoRuntime(newShapes)
+    shapes.value = expanded
+    pendingNestedIds.value = []
+    eventBus.emit('shapes-updated', expanded)
+    hydrateAllComparents()
+  }
+  // 获取当前图元数据
+  const getShapes = () => {
+    return shapes.value
+  }
+  //清空图元数据
+  const clearAll = () => {
+    shapes.value = []
+    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
+  const startDragShape = (shapeId: string, pointer: { x: number; y: number }) => {
+    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 => {
+      const s = byId(id); return s && getPolicy(s!).draggable
+    })
+    if (!validIds.length) return
+
+    const snap = buildDragSnapshot(shapes.value, validIds)
+    dragBase.value = snap.dragBase
+    groupBaseBox.value = snap.groupBaseBox
+    // 初始化 dragGhost：就地更新，避免新引用
+    for (const k in dragGhost) delete dragGhost[k]              // 清空旧 key
+    for (const k in snap.dragBase) dragGhost[k] = snap.dragBase[k] // 写入新 key
+    draggingIds.value = validIds
+    dragAnchor.value = { x: pointer.x, y: pointer.y }
+    if (validIds.length === 1) {
+      const b = dragBase.value[validIds[0]]
+      dragOffset.value = { x: pointer.x - b.x, y: pointer.y - b.y }
+      draggingShapeId.value = validIds[0]
+    } else {
+      dragOffset.value = null
+      draggingShapeId.value = null
+    }
+    isDragging.value = true
+  }
+  const finalCheckCanNest = async (childId: string, parentId: string | null) => {
+    const child = byId(childId)
+    const parent = parentId ? byId(parentId) : null
+    // 画布：取 currentDiagramId，否则回落 child.diagramId
+    const diagram = shapes.value.find(
+      s => s.diagramId == (currentDiagramId.value || child?.diagramId)
+    ) || null
+    if (!child) return false
+    const { ok } = await checkNestViaFront(child, parent, diagram) // 后端只返回 true/false
+    if (ok) {
+      canDropOnCanvas.value = true
+    } else {
+      canDropOnCanvas.value = false
+    }
+    return !!ok
+  }
+  //统一设置 hover 状态（方便复用/保证一致）
+  const setHoverState = (id: string | null, nestable: boolean | null) => {
+    hoverContainerId.value = id
+    hoverNestable.value = nestable
+  }
+  // —— server hover 校验缓存 & 并发控制 —— //
+  const hoverServerCache = new Map<string, { ok: boolean; t: number }>()
+  let hoverReqSeq = 0  // 每次发请求递增；只采纳最新的响应
+  const HOVER_CACHE_TTL = 400 // ms（短缓存，减少连发）
+  // 只在 hover 变化时计算嵌套许可
+  const maybeUpdateHover = async (hover: string | null, draggedId: string | null) => {
+    if (hover === lastHoverId) return
+    lastHoverId = hover
+    const child = draggedId ? byId(draggedId) : null
+    if (!hover) {
+      // 脱离父元素的时候也进行校验
+      hoverContainerId.value = null
+      hoverNestable.value = null
+      if (draggedId) {
+        await finalCheckCanNest(draggedId, null)
+      }
+      return
+    }
+    // 已经是这个父元素的子元素了，只是在里面挪位置 —— 不需要再校验
+    if (child && child.parenShapeId === hover) {
+      hoverContainerId.value = hover
+      hoverNestable.value = null  // 或者 null
+      return
+    }
+    hoverContainerId.value = hover
+    if (!draggedId) {
+      setHoverState(hover, null)
+      return
+    }
+    // const child = byId(draggedId)
+    const parent = byId(hover)
+    // 元素找不到，也不做判断
+    if (!child || !parent) {
+      setHoverState(hover, null)
+      return
+    }
+    // 如果目标是模拟数据（inert），保持你之前的特殊处理：不触发校验 & 不高亮
+    if (Object.prototype.hasOwnProperty.call(parent as any, 'inert')) {
+      setHoverState(null, null)
+      return
+    }
+    // 先标记为“判定中”（null），避免先乐观 true 再变 false 的闪烁
+    hoverNestable.value = null
+    // ==== 短缓存 ====
+    const key = `${currentDiagramId.value || ''}:${draggedId}->${hover}`
+    const now = Date.now()
+    const cached = hoverServerCache.get(key)
+    if (cached && now - cached.t <= HOVER_CACHE_TTL) {
+      hoverNestable.value = !!cached.ok
+      return
+    }
+    // 并发控制：只采纳最后一次请求
+    const mySeq = ++hoverReqSeq
+    try {
+      // 让 front 去调后端，只用后端给的 true/ false
+      const { ok } = await checkNestViaFront(child, parent, shapes.value[0])
+      if (hoverReqSeq === mySeq && hover === hoverContainerId.value) {
+        hoverServerCache.set(key, { ok: !!ok, t: Date.now() })
+        hoverNestable.value = !!ok   // 这里只认后端
+      }
+      if (ok) {
+        canDropOnCanvas.value = true
+      } else {
+        canDropOnCanvas.value = false
+      }
+    } catch {
+      if (hoverReqSeq === mySeq && hover === hoverContainerId.value) {
+        // 失败时，你可以选择 false 或 null，这里保守按 false 处理
+        setHoverState(null, false)
+      }
+    }
+  }
+  //拖动过程中
+  const moveDraggedShape = (pointer: { x: number; y: number }) => {
+    if (!isDragging.value || draggingIds.value.length === 0) return
+
+    if (draggingIds.value.length === 1) {
+      const id = draggingIds.value[0]
+      const s = byId(id); if (!s) return
+      const { ghost, hover } = stepSingleDrag(
+        shapes.value,
+        id,
+        pointer,
+        dragOffset.value,
+        dragBase.value,
+        currentDiagramId.value || s.diagramId,
+        getPolicy(s).constrainToDiagram
+      )
+      // 就地写 shallowReactive，不再每帧解构新对象
+      for (const k in ghost) dragGhost[k] = ghost[k]
+      // 可选：清理多余 key（如果 stepSingleDrag 不会返回完整集）
+      for (const k in dragGhost) if (!(k in ghost)) delete dragGhost[k]
+      // 只有 hover 变化才算 canNest，避免每帧重算
+      maybeUpdateHover(hover, id)
+      return
+    }
+    if (!dragAnchor.value || !groupBaseBox.value || !primaryDragId.value) return
+    const { ghost, hover } = stepGroupDrag(
+      shapes.value,
+      draggingIds.value,
+      primaryDragId.value,
+      pointer,
+      dragAnchor.value,
+      groupBaseBox.value
+    )
+    for (const k in ghost) dragGhost[k] = ghost[k]
+    for (const k in dragGhost) if (!(k in ghost)) delete dragGhost[k]
+
+    maybeUpdateHover(hover, primaryDragId.value)
+  }
+  // 结束拖动：提交位置/尺寸 + 处理归属 + 规范层级
+  const endDragShape = async (source?: string) => {
+    if (!isDragging.value) return
+    // 提交拖动几何（commitDrag 只是“位置/大小”的更新）
+    const changedIds = commitDrag(
+      shapes.value,
+      [...draggingIds.value],
+      dragGhost,
+      currentDiagramId.value || shapes.value[0].diagramId,
+      updateShape,
+      dragBase.value
+    )
+    if (!changedIds.length) {
+      cleanupAfterDrag()
+      return
+    }
+    // 记录拖动前的父 id，用于嵌套回滚 & 业务上报
+    const prevParentById = buildPrevParentMap(shapes.value, changedIds)
+    const containerForFinalize =
+      hoverContainerId.value && hoverNestable.value ? hoverContainerId.value : null
+
+    // finalizeAfterTransform：决定“最终 parent + bounds”
+    const didReparent = finalizeAfterTransform(
+      shapes.value,
+      changedIds,
+      dragGhost,
+      draggingIds.value,
+      currentDiagramId.value,
+      containerForFinalize,
+      updateShape,
+    )
+    //嵌套 / 克隆 / comparents 业务处理（pinDrop 场景跳过）
+    let ownerPayload: OwnerPayload | null = null
+    let clonedIds: string[] = []
+    if (source !== 'pinDrop') {
+      const nestResult = await applyReparentAndClone({
+        shapes: shapes.value,
+        changedIds,
+        prevParentById,
+        source,
+        dragBase: dragBase.value,
+        updateShape,
+        pendingNestedIds,
+        addShape,
+      })
+
+      if (nestResult.cancelled) {
+        // 嵌套校验失败，已经在 graphDragService 里回滚了位置/父级，这里只需要收尾
+        cleanupAfterDrag()
+        return
+      }
+
+      ownerPayload = nestResult.ownerPayload
+      clonedIds = nestResult.clonedIds
+    }
+    // 如果真的发生了“换父”，整理一下 zIndex（保持绘制顺序）
+    if (didReparent) {
+      normalizeZOrder(
+        shapes.value,
+        currentDiagramId.value,
+        updateShape,
+        1,
+        1,
+      )
+    }
+
+    // —— Pin 终极兜底：不允许在本次拖拽后变成“无父” ——
+    for (const id of changedIds) {
+      const node = shapes.value.find(s => s.id === id)
+      if (node?.shapeType === 'pin') {
+        const prevPid = prevParentById[id]
+        const nowPid = node.parenShapeId ?? null
+        if ((!nowPid || nowPid === '') && prevPid) {
+          updateShape(id, { parenShapeId: prevPid })
+        }
+      }
+    }
+
+    // 更新相关 edge 的 waypoints
+    EdgeUtils.updateRelatedEdges(shapes.value, changedIds, (shape) => {
+      updateShape(shape.id, shape)
+    })
+    //对“本次直接拖动的隔间”做一次自动扩容检查
+    autoExpandMovedCompartmentsAfterDrag(shapes.value, changedIds, updateShape)
+    // 收集受影响的所有 shape（自身 + 父 + 子树 + 祖先）
+    const affectedIds = collectAffectedShapeIds(shapes.value, changedIds, clonedIds)
+    //组装 payloads（深拷贝），给更新接口用
+    const payloads = buildDragEndPayloads(affectedIds, shapes.value)
+    //  创建嵌套完成后的回调：成功后按子扩父 + 发 shape-size-update
+    const onNestDone = createOnNestDoneCallback({
+      shapesRef: shapes,
+      ownerPayload,
+      updateShape,
+    })
+
+    //对外只暴露一个事件：shape-drag-end
+    eventBus.emit('shape-drag-end', payloads, ownerPayload, onNestDone)
+
+    // 清理拖拽状态
+    cleanupAfterDrag()
+  }
+  // 处理缩放结束后的事件发射
+  const endResizeShape = (id: string) => {
+    // 更新相关edge的waypoints
+    EdgeUtils.updateRelatedEdges(shapes.value, [id], (shape) => {
+      updateShape(shape.id, shape);
+    });
+
+    // 收集受影响的元素
+    const affected = new Set<string>();
+    affected.add(id);
+    const parentId = shapes.value.find(s => s.id === id)?.parenShapeId ?? null;
+    if (parentId) {
+      affected.add(parentId);
+      collectDescendantIds(shapes.value, parentId).forEach(cid => affected.add(cid));
+    }
+
+    // 把所有受影响元素的“祖先链”也并入
+    for (const affectedId of Array.from(affected)) {
+      let cur: string | null = affectedId;
+      let guard = 0;
+      while (cur && guard++ < 1000) {
+        const s = shapes.value.find(x => x.id === cur);
+        const p = s ? (s as any).parenShapeId ?? null : null;
+        if (!p) break;
+        affected.add(p);
+        cur = p;
+      }
+    }
+
+    // 组装并派发shape-drag-end事件
+    const payloads = Array.from(affected)
+      .map(affectedId => shapes.value.find(s => s.id === affectedId))
+      .filter(Boolean)
+      .map(s => _.cloneDeep(s!)) as Shape[];
+    eventBus.emit('shape-drag-end', payloads,);
+  };
+
+  //清理状态
+  const cleanupAfterDrag = () => {
+    if (dragSelectionSnapshot.value.length <= 1) {
+      const keepId = dragSelectionSnapshot.value[0] || null
+      const s = keepId ? byId(keepId) : null
+    } else {
+      selectMany(dragSelectionSnapshot.value)
+    }
+    hoverContainerId.value = null
+    hoverNestable.value = null
+    isDragging.value = false
+    draggingShapeId.value = null
+    dragOffset.value = null
+    draggingIds.value = []
+    dragAnchor.value = null
+    dragBase.value = {}
+    groupBaseBox.value = null
+    dragSelectionSnapshot.value = []
+    primaryDragId.value = null
+    for (const k in dragGhost) delete dragGhost[k]
+  }
+  //设置当前打开的画布id
+  const setCurrentDiagramId = (id: string | null) => {
+    currentDiagramId.value = id
+  }
+  const setActiveDiagramId = (id: string | null) => {
+    activeDiagramId.value = id;
+  };
+  // 获取当前缩放比例
+  const getScale = (diagramId?: string | null) => {
+    const targetId = diagramId || activeDiagramId.value;
+    // 如果指定画布没有缩放记录，返回默认值1
+    return scales.value[targetId || 'default'] || 1;
+  };
+
+  // 设置缩放比例
+  const setScale = (newScale: number, diagramId?: string | null) => {
+    // 限制缩放范围，避免过大或过小
+    const minScale = 0.1;
+    const maxScale = 5;
+    const targetId = diagramId || activeDiagramId.value || 'default';
+    scales.value[targetId] = Math.max(minScale, Math.min(maxScale, newScale));
+    eventBus.emit("scale-changed", scales.value[targetId]);
+  };
+  //新增画布
+  const addDiagram = (diagram: Shape) => {
+    diagrams.value.push(diagram)
+  }
+  /**
+   * 初始化所有连线的端点
+   * 用于在初始加载后端数据后，自动计算所有连线的合适端点，避免线横跨图元
+   */
+  const initializeAllEdgeEndpoints = () => {
+    EdgeUtils.initializeAllEdgeEndpoints(shapes.value, (shape) => {
+      updateShape(shape.id, shape);
+    });
+  }
+  /**
+ * 由“子元素数据”触发的扩父入口：
+ * - 只需要传子元素（child），其中 parenShapeId 即为父 id
+ * - 内部调用 expandParentByChild → 得到 expanded / affectedIds
+ * - 若有扩父，再组装 sizePayload 并发 shape-size-update 事件
+ */
+  const expandParentAndEmitSizeUpdateByChild = (child: Shape) => {
+    if (!child.parenShapeId) {
+      return
+    }
+     if (pinsTypes.value.includes(child.shapeKey)) return
+    const { expanded, affectedIds } = expandParentByChild({
+      shapes: shapes.value,
+      child,
+      updateShape,
+    })
+
+    if (!expanded) return
+
+    const childId = child.id
+
+    // 组装“只更新大小”的 payload：id + JSON.stringify(bounds)
+    const sizePayload: ShapeSizeUpdatePayload[] = affectedIds
+      .map(id => shapes.value.find(s => s.id === id))
+      .filter((s): s is Shape => !!s)
+      // 过滤掉子元素本身，只把真正扩父的父/祖先发给接口
+      .filter(s => s.id !== childId)
+      .map(s => ({
+        id: s.id,
+        bounds: JSON.stringify(s.bounds ?? {}),
+      }))
+
+    if (!sizePayload.length) return
+
+    // 发事件给统一监听，监听里再去调用 updateShapeSize（单条接口就 for 循环）
+    eventBus.emit('shape-size-update', sizePayload)
+  }
+  return {
+    // 状态
+    shapes,
+    pendingNestedIds,
+    selectedShape,
+    diagramTitle,
+    isDragging, draggingShapeId, dragOffset,
+    diagrams,
+    selectedIds,
+    hoverContainerId,
+    hoverNestable,
+    currentDiagramId,
+    canDropOnCanvas,
+    //图元shapeKey
+    taggedValueLabels,
+    packagesTypes,
+    classMetaTypes,
+    ownerRequiredShapeKeys,
+    pinsTypes,
+    portsTypes,
+    // 计算属性
+    shapeCount,
+    hasSelectedShape,
+    marqueeShapes,
+    ghostShadow,
+    scales,
+    activeDiagramId,
+    // 当前活动画布的缩放比例
+    currentScale: computed(() => getScale()),
+    // 方法
+    addShape,
+    removeShape,
+    updateShape,
+    selectShape,
+    setTitle,
+    updateShapes,
+    clearAll,
+    startDragShape,
+    startDrag,
+    moveDraggedShape,
+    endDragShape,
+    getShapes,
+    addDiagram,
+    setCurrentDiagramId,
+    selectMany,
+    clearSelection,
+    removeSelected,
+    finalCheckCanNest,
+    setHoverState,
+    initializeAllEdgeEndpoints,
+    endResizeShape,
+    getScale,
+    setScale,
+    setActiveDiagramId,
+    visibleShapes,
+    externalCreatingId,
+    expandParentAndEmitSizeUpdateByChild,
+  }
+},
+  //配置持久化
+  {
+    //@ts-ignore
+    persist: {
+      paths: ['shapes', 'selectedShape']
+    } as any,
+  }
+)