@mx-sose-front/mx-sose-graph 1.1.8 → 1.2.1

package/src/store/graphStore.ts

@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
 import { ref, computed, shallowReactive, nextTick, type Ref } from 'vue'
-import type { Shape, OwnerPayload, ShapeSizeUpdatePayload } from '../types'
+import type { Shape, OwnerPayload, ShapeSizeUpdatePayload, Matrix } from '../types'
+
 import { eventBus } from './eventBus'
 import { getPolicy, checkNestViaFront, } from '../utils/policy'
 import _ from "lodash";
@@ -20,13 +21,57 @@ import {
   syncShowComparentsByReparent,
 } from '../utils/compartment'
 import { EdgeUtils } from '../utils/edgeUtils'
+import { snapPinToParentEdge } from '../utils/pinUtils'
 import { expandParentByChild } from '../utils/autoExpandParent'
 import { batchAutoExpandParents } from '../utils/batchAutoExpand'
 import { adjustCanvasToFitAllShapes } from '../utils/diagram'
 import { applyReparentAndClone, autoExpandMovedCompartmentsAfterDrag, buildDragEndPayloads, buildPrevParentMap, collectAffectedShapeIds, createOnNestDoneCallback } from '../utils/graphDragService'
 import { createShapeOperator, type ShapeOp, type ShapeId } from "../utils/shapeOps/shapeOps"
 type Rect = { x: number; y: number; width: number; height: number };
+
+const GRAPH_SELECTION_STORAGE_KEY = 'mx-sose-graph:selected-state'
+
+interface PersistedSelectionState {
+  diagramId: string | null
+  selectedIds: string[]
+}
+
+function loadPersistedSelectionState(): PersistedSelectionState {
+  if (typeof window === 'undefined') {
+    return { diagramId: null, selectedIds: [] }
+  }
+
+  try {
+    const raw = window.sessionStorage.getItem(GRAPH_SELECTION_STORAGE_KEY)
+    if (!raw) {
+      return { diagramId: null, selectedIds: [] }
+    }
+
+    const parsed = JSON.parse(raw) as Partial<PersistedSelectionState>
+    return {
+      diagramId: typeof parsed.diagramId === 'string' ? parsed.diagramId : null,
+      selectedIds: Array.isArray(parsed.selectedIds)
+        ? parsed.selectedIds.filter((id): id is string => typeof id === 'string')
+        : [],
+    }
+  } catch {
+    return { diagramId: null, selectedIds: [] }
+  }
+}
+
+function savePersistedSelectionState(state: PersistedSelectionState) {
+  if (typeof window === 'undefined') return
+
+  window.sessionStorage.setItem(GRAPH_SELECTION_STORAGE_KEY, JSON.stringify(state))
+}
+
+function clearPersistedSelectionState() {
+  if (typeof window === 'undefined') return
+
+  window.sessionStorage.removeItem(GRAPH_SELECTION_STORAGE_KEY)
+}
 export const useGraphStore = defineStore('graph', () => {
+  const persistedSelectionState = loadPersistedSelectionState()
   // 状态
   const shapes = ref<Shape[]>([])
   // 在 store 初始化时创建一次
@@ -67,13 +112,31 @@ export const useGraphStore = defineStore('graph', () => {
   //当前激活的画布id
   const activeDiagramId = ref<string | null>(null);
   // 当前被选中的多个 id
-  const selectedIds = ref<string[]>([])
+  const selectedIds = ref<string[]>(persistedSelectionState.selectedIds)
+  const selectionDiagramId = ref<string | null>(persistedSelectionState.diagramId)
   // 外部拖拽创建中的形状 id(用于隐藏实际形状,只显示 ghost)
   const externalCreatingId = ref<string | null>(null)
   // 剪切状态的图元 ID 集合（用于 SVG 遮盖层渲染）
   const cutShapeIds = ref<Set<string>>(new Set())
   // 剪贴板中图元的数量（用于工具栏按钮状态同步）
   const copiedShapesCount = ref<number>(0)
+  /** 矩阵视图缓存：与 Matrix 组件收到的 matrix-data-change 同步 */
+  const matrixData = ref<Matrix>({
+    rowTree: [],
+    columnTree: [],
+    crossData: [],
+    relationModelIcon: '',
+    relationModelName: '',
+  })
+  const setMatrixData = (payload: Matrix) => {
+    matrixData.value = {
+      rowTree: payload.rowTree,
+      columnTree: payload.columnTree,
+      crossData: payload.crossData,
+      relationModelIcon: payload.relationModelIcon,
+      relationModelName: payload.relationModelName,
+    }
+  }
   // 计算属性
   const shapeCount = computed(() => shapes.value.length)
   const hasSelectedShape = computed(() => selectedShape.value !== null)
@@ -112,6 +175,29 @@ export const useGraphStore = defineStore('graph', () => {
     return map;
   })
 
+  /**
+   * 连线索引映射
+   * 用于快速查找某个节点关联的所有连线
+   * key: 节点 ID (sourceId 或 targetId), value: 关联的 edge 数组
+   * 性能优化: 避免 updateRelatedEdges / initializeAllEdgeEndpoints 中的全量 filter + find
+   */
+  const edgesByNodeId = computed(() => {
+    const map = new Map<string, Shape[]>()
+    shapes.value.forEach(s => {
+      if (s.shapeType === 'edge') {
+        if (s.sourceId) {
+          if (!map.has(s.sourceId)) map.set(s.sourceId, [])
+          map.get(s.sourceId)!.push(s)
+        }
+        if (s.targetId) {
+          if (!map.has(s.targetId)) map.set(s.targetId, [])
+          map.get(s.targetId)!.push(s)
+        }
+      }
+    })
+    return map
+  })
+
   //图元shapeKey
   const taggedValueLabels = ref<string[]>([])   // 隔间组件的图元类型
   const packagesTypes = ref<string[]>([])           // 需要展示线的隔间组件的图元类型
@@ -150,6 +236,9 @@ export const useGraphStore = defineStore('graph', () => {
     // 通过事件总线发送事件
     // eventBus.emit('shape-added', shape)
 
+    // 图元新增后调整画布大小
+    nextTick(adjustCanvasToFitAllShapes)
+
     // 自动扩父逻辑：如果图元有父元素且需要自动扩父，触发扩父逻辑
     const shouldAutoExpand = options?.autoExpandParent !== false // 默认为 true
     if (shouldAutoExpand && shape.parenShapeId && shape.bounds) {
@@ -163,9 +252,19 @@ export const useGraphStore = defineStore('graph', () => {
   const removeShape = (shapeId: string) => {
     const index = shapes.value.findIndex(s => s.id == shapeId)
     if (index > -1) {
+      const wasPrimarySelected = selectedShape.value?.id === shapeId
+      shapes.value.splice(index, 1)
+      diagrams.value = diagrams.value.filter(diagram => diagram.id !== shapeId)
+      selectedIds.value = selectedIds.value.filter(id => id !== shapeId)
+      pendingNestedIds.value = pendingNestedIds.value.filter(id => id !== shapeId)
+      if (cutShapeIds.value.has(shapeId)) {
+        const nextCutShapeIds = new Set(cutShapeIds.value)
+        nextCutShapeIds.delete(shapeId)
+        cutShapeIds.value = nextCutShapeIds
+      }
       // 如果删除的是当前选中的形状，清除选中状态
-      if (selectedShape.value?.id === shapeId) {
-        selectedShape.value = null
+      syncSelectedState(wasPrimarySelected)
+      if (wasPrimarySelected && !selectedShape.value) {
         eventBus.emit('shape-deselected')
       }
     }
@@ -195,7 +294,9 @@ export const useGraphStore = defineStore('graph', () => {
   })
   // 更新单个图元（不处理父子关系 / comparents，同步由外层 updateShape 负责）
   const updateShapeRaw = (shapeId: string, updates: Partial<Shape>, id: 'id' | 'modelId' = 'id') => {
-    const shape = shapes.value.find(s => s[id] === shapeId)
+    const shape = id === 'id'
+      ? shapeMap.value.get(shapeId) ?? null
+      : shapes.value.find(s => s[id] === shapeId)
     if (shape) {
       // 对 Pin 做强保护：永不允许把 parenShapeId 置空/undefined
       if (shape.shapeType === 'pin' && 'parenShapeId' in updates) {
@@ -218,18 +319,23 @@ export const useGraphStore = defineStore('graph', () => {
   }
   // 更新图元数据
   const updateShape = (shapeId: string, updates: Partial<Shape>, id: 'id' | 'modelId' = 'id') => {
-    const before = shapes.value.find(s => s[id] === shapeId) || null
+    const before = id === 'id'
+      ? shapeMap.value.get(shapeId) ?? null
+      : 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
+    // updateShapeRaw 是就地修改，before 和 after 是同一个引用（id 未变时）
+    const after = before
     if (!after) return
 
     // 如果更新了bounds，需要重新计算相关连线的位置
+    // 在高频场景（如拖拽）中使用同步版本保证即时性，
+    // 异步版本留给 endDragShape / endResizeShape 等"结束"时刻
     if (updates.bounds) {
       EdgeUtils.updateRelatedEdges(shapes.value, [after.id], (shape) => {
         updateShape(shape.id, shape);
-      });
+      }, edgesByNodeId.value, shapeMap.value);
     }
 
     const newPid = after.parenShapeId ?? null
@@ -259,23 +365,71 @@ export const useGraphStore = defineStore('graph', () => {
   }
   const sameId = (a?: string | null, b?: string | null) =>
     (a ?? null) === (b ?? null)
+  const getLoadedDiagramId = () => shapes.value[0]?.diagramId ?? null
+  const persistSelectionState = () => {
+    if (!selectedIds.value.length) {
+      selectionDiagramId.value = null
+      clearPersistedSelectionState()
+      return
+    }
+
+    const selected = selectedIds.value
+      .map(id => shapeMap.value.get(id))
+      .find((shape): shape is Shape => !!shape)
+
+    selectionDiagramId.value = selected?.diagramId ?? selectionDiagramId.value ?? getLoadedDiagramId()
+    savePersistedSelectionState({
+      diagramId: selectionDiagramId.value,
+      selectedIds: [...selectedIds.value],
+    })
+  }
+  const syncSelectedState = (emit = false) => {
+    const loadedDiagramId = getLoadedDiagramId()
+    const ids = selectionDiagramId.value && loadedDiagramId && selectionDiagramId.value !== loadedDiagramId
+      ? []
+      : selectedIds.value.filter(id => shapeMap.value.has(id))
+    const nextSelectedShape = ids.length
+      ? (shapeMap.value.get(ids[0]) ?? null)
+      : null
+
+    selectedIds.value = ids
+    selectedShape.value = nextSelectedShape
+
+    if (nextSelectedShape) {
+      selectionDiagramId.value = nextSelectedShape.diagramId ?? loadedDiagramId
+      persistSelectionState()
+    } else {
+      selectionDiagramId.value = null
+      clearPersistedSelectionState()
+    }
+
+    if (emit) {
+      eventBus.emit('shape-selected', nextSelectedShape)
+    }
+  }
   //选中图元
   const selectShape = (shape: Shape | null) => {
     const prevId = selectedShape.value?.id ?? null
     const nextId = shape?.id ?? null
-    if (sameId(prevId, nextId)) return
+    const nextSelectedIds = shape ? [shape.id] : []
+    const hasSameSelection =
+      selectedIds.value.length === nextSelectedIds.length &&
+      selectedIds.value.every((id, index) => id === nextSelectedIds[index])
+    if (sameId(prevId, nextId) && hasSameSelection) return
     selectedShape.value = shape
-    selectedIds.value = shape ? [shape.id] : []
+    selectedIds.value = nextSelectedIds
+    selectionDiagramId.value = shape?.diagramId ?? null
+    persistSelectionState()
     // 通过事件总线发送事件
     eventBus.emit('shape-selected', shape)
   }
   // 被框选中的多个 shape/映射 selectedIds.value中的数据
   const marqueeShapes = computed(() => {
-    const byId = (id: string) => shapes.value.find(s => s.id === id)
+    const map = shapeMap.value
     const isShape = (x: Shape | undefined): x is Shape => !!x
     const pending = new Set(pendingNestedIds.value)
     return selectedIds.value
-      .map(byId)
+      .map(id => map.get(id))
       .filter(isShape)
       .filter(s => !pending.has(s.id))
   })
@@ -304,18 +458,24 @@ export const useGraphStore = defineStore('graph', () => {
   })
   // 选择一组（用于框选/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)
+    const nextIds = Array.from(new Set(ids))
+    selectedIds.value = nextIds
+    selectedShape.value = nextIds.length
+      ? (shapeMap.value.get(nextIds[0]) ?? null)
       : null
+    selectionDiagramId.value = selectedShape.value?.diagramId ?? getLoadedDiagramId()
+    persistSelectionState()
   }
   // 清空选择
   const clearSelection = () => selectShape(null)
   // 全选图元
   const selectAll = () => {
-    // 获取所有非diagram类型的图元
+    // 获取所有非diagram、非edge类型的图元
     const allShapeIds = shapes.value
-      .filter(shape => shape.shapeType?.toLowerCase() !== 'diagram')
+      .filter(shape => {
+        const t = shape.shapeType?.toLowerCase()
+        return t !== 'diagram' && t !== 'edge'
+      })
       .map(shape => shape.id)
     selectMany(allShapeIds)
   }
@@ -346,6 +506,7 @@ export const useGraphStore = defineStore('graph', () => {
       op,
     })
     pendingNestedIds.value = []
+    syncSelectedState(op === 'replace' || op === 'delete')
     // eventBus.emit('shapes-updated', newShapes)
     // hydrateAllComparents()
 
@@ -356,6 +517,9 @@ export const useGraphStore = defineStore('graph', () => {
         batchAutoExpandParents(changedShapes, updateShape)
       })
     }
+
+    // 图元增删后调整画布大小（用 nextTick 合并同一 tick 内的多次调用）
+    nextTick(adjustCanvasToFitAllShapes)
   }
   // 获取当前图元数据
   const getShapes = () => {
@@ -366,12 +530,15 @@ export const useGraphStore = defineStore('graph', () => {
     shapes.value = []
     diagrams.value = []
     selectedShape.value = null
+    selectedIds.value = []
+    selectionDiagramId.value = null
     pendingNestedIds.value = []
+    clearPersistedSelectionState()
     eventBus.emit('shapes-cleared')
   }
   //拖动元素相关操作
   // 开始拖动已有元素（仅对 shape 生效）
-  const byId = (id: string) => shapes.value.find(s => s.id === id) || null
+  const byId = (id: string) => shapeMap.value.get(id) ?? null
   const startDragShape = (shapeId: string, pointer: { x: number; y: number }) => {
     startDrag([shapeId], pointer)
   }
@@ -621,7 +788,7 @@ export const useGraphStore = defineStore('graph', () => {
     }
     // —— Pin 终极兜底：不允许在本次拖拽后变成“无父” ——
     for (const id of changedIds) {
-      const node = shapes.value.find(s => s.id === id)
+      const node = shapeMap.value.get(id) ?? null
       if (node?.shapeType === 'pin') {
         const prevPid = prevParentById[id]
         const nowPid = node.parenShapeId ?? null
@@ -632,9 +799,9 @@ export const useGraphStore = defineStore('graph', () => {
     }
 
     // 更新相关 edge 的 waypoints
-    EdgeUtils.updateRelatedEdges(shapes.value, changedIds, (shape) => {
+    await EdgeUtils.updateRelatedEdgesAsync(shapes.value, changedIds, (shape) => {
       updateShape(shape.id, shape)
-    })
+    }, edgesByNodeId.value, shapeMap.value)
     //对“本次直接拖动的隔间”做一次自动扩容检查
     autoExpandMovedCompartmentsAfterDrag(shapes.value, changedIds, updateShape)
     // 把 clone 也并入“需要同步 comparents 的变更集合”
@@ -655,7 +822,7 @@ export const useGraphStore = defineStore('graph', () => {
     // 在生成 payloads 之前，把父扩容先做掉
     const shapeId = ownerPayload?.shapeId
     if (shapeId != null) {
-      const child = shapes.value.find(s => s.id == shapeId)
+      const child = shapeMap.value.get(shapeId) ?? null
       if (child) {
         expandParentByChild({
           shapes: shapes.value,
@@ -696,16 +863,45 @@ export const useGraphStore = defineStore('graph', () => {
     cleanupAfterDrag()
   }
   // 处理缩放结束后的事件发射
-  const endResizeShape = (id: string) => {
+  const endResizeShape = async (id: string) => {
     // 更新相关edge的waypoints
-    EdgeUtils.updateRelatedEdges(shapes.value, [id], (shape) => {
+    await EdgeUtils.updateRelatedEdgesAsync(shapes.value, [id], (shape) => {
       updateShape(shape.id, shape);
-    });
+    }, edgesByNodeId.value, shapeMap.value);
+
+    // 重新计算子栓/端口的位置（父图元缩放后，栓需要贴合新的边缘）
+    const parentShape = shapeMap.value.get(id);
+    if (parentShape) {
+      const childIds = parentChildMap.value.get(id) ?? [];
+      for (const childId of childIds) {
+        const childShape = shapeMap.value.get(childId);
+        if (!childShape) continue;
+        if (
+          pinsTypes.value.includes(childShape.shapeKey) ||
+          portsTypes.value.includes(childShape.shapeKey)
+        ) {
+          // 用栓的中心点作为参考点，重新吸附到父图元最近的边
+          const pb = childShape.bounds ?? {};
+          const pinCenterX = (pb.x ?? 0) + (pb.width ?? 0) / 2;
+          const pinCenterY = (pb.y ?? 0) + (pb.height ?? 0) / 2;
+          const newPos = snapPinToParentEdge(
+            { x: pinCenterX, y: pinCenterY },
+            parentShape,
+            childShape
+          );
+          updateShape(childId, {
+            bounds: { ...childShape.bounds, x: newPos.x, y: newPos.y },
+          });
+        }
+      }
+    }
 
     // 收集受影响的元素
     const affected = new Set<string>();
     affected.add(id);
-    const parentId = shapes.value.find(s => s.id === id)?.parenShapeId ?? null;
+    // 将缩放图元的所有子孙（包括栓/端口）加入受影响集合
+    collectDescendantIds(shapes.value, id).forEach(cid => affected.add(cid));
+    const parentId = shapeMap.value.get(id)?.parenShapeId ?? null;
     if (parentId) {
       affected.add(parentId);
       collectDescendantIds(shapes.value, parentId).forEach(cid => affected.add(cid));
@@ -716,8 +912,8 @@ export const useGraphStore = defineStore('graph', () => {
       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;
+        const s: Shape | null = shapeMap.value.get(cur!) ?? null;
+        const p: string | null = s ? (s as any).parenShapeId ?? null : null;
         if (!p) break;
         affected.add(p);
         cur = p;
@@ -726,9 +922,10 @@ export const useGraphStore = defineStore('graph', () => {
 
     // 组装并派发shape-drag-end事件
     const payloads = Array.from(affected)
-      .map(affectedId => shapes.value.find(s => s.id === affectedId))
+      .map(affectedId => shapeMap.value.get(affectedId))
       .filter(Boolean)
       .map(s => _.cloneDeep(s!)) as Shape[];
+    adjustCanvasToFitAllShapes()
     eventBus.emit('shape-drag-end', payloads,);
   };
 
@@ -793,10 +990,10 @@ export const useGraphStore = defineStore('graph', () => {
    * 初始化所有连线的端点
    * 用于在初始加载后端数据后，自动计算所有连线的合适端点，避免线横跨图元
    */
-  const initializeAllEdgeEndpoints = () => {
-    EdgeUtils.initializeAllEdgeEndpoints(shapes.value, (shape) => {
+  const initializeAllEdgeEndpoints = async () => {
+    await EdgeUtils.initializeAllEdgeEndpointsAsync(shapes.value, (shape) => {
       updateShape(shape.id, shape);
-    });
+    }, shapeMap.value);
   }
   /**
  * 由“子元素数据”触发的扩父入口：
@@ -806,12 +1003,13 @@ export const useGraphStore = defineStore('graph', () => {
  */
   const collectAncestors = (shapes: Shape[], id: string) => {
     const out: string[] = []
-    let cur = shapes.find(s => s.id === id)
+    const map = shapeMap.value
+    let cur = map.get(id)
     while (cur) {
       out.push(cur.id)
       const pid = cur.parenShapeId
       if (!pid) break
-      cur = shapes.find(s => s.id === pid)
+      cur = map.get(pid)
     }
     return out
   }
@@ -827,7 +1025,7 @@ export const useGraphStore = defineStore('graph', () => {
     const before = new Map(
       chainIds.map(id => [
         id,
-        JSON.stringify(shapes.value.find(s => s.id === id)?.bounds ?? {}),
+        JSON.stringify(shapeMap.value.get(id)?.bounds ?? {}),
       ]),
     )
 
@@ -840,7 +1038,7 @@ export const useGraphStore = defineStore('graph', () => {
 
     const payload: ShapeSizeUpdatePayload[] = chainIds
       .filter(id => id !== child.id)
-      .map(id => shapes.value.find(s => s.id === id))
+      .map(id => shapeMap.value.get(id))
       .filter((s): s is Shape => !!s)
       .filter(s => before.get(s.id) !== JSON.stringify(s.bounds ?? {})) //  diff
       .map(s => ({ id: s.id, bounds: JSON.stringify(s.bounds ?? {}) }))
@@ -893,6 +1091,7 @@ export const useGraphStore = defineStore('graph', () => {
     canOperate,
     cutShapeIds, // 剪切状态的图元 ID 集合
     copiedShapesCount, // 剪贴板中图元的数量
+    matrixData,
     //图元shapeKey
     taggedValueLabels,
     packagesTypes,
@@ -905,6 +1104,7 @@ export const useGraphStore = defineStore('graph', () => {
     hasSelectedShape,
     parentChildMap, // 父子关系索引映射
     shapeMap,       // 图元ID索引映射 (性能优化)
+    edgesByNodeId,  // 连线索引映射 (性能优化)
     marqueeShapes,
     ghostShadow,
     scales,
@@ -949,13 +1149,6 @@ export const useGraphStore = defineStore('graph', () => {
     setCutShapeIds,
     clearCutShapeIds,
     setCopiedShapesCount,
+    setMatrixData,
   }
-},
-  //配置持久化
-  {
-    //@ts-ignore
-    persist: {
-      paths: ['shapes', 'selectedShape']
-    } as any,
-  }
-)
+})

package/src/types/index.ts

@@ -77,7 +77,7 @@ export interface Shape {
   diagramId: string // 画布ID
   parenShapeId: string  // 父图元ID(图元嵌套)
   shapeKey: string // 具体图元类型（即模型类型）
-  shapeType: 'shape' | 'edge' | 'pin' | 'diagram' // 图形大类
+  shapeType: 'shape' | 'edge' | 'pin' | 'diagram' | 'gantt' | 'table' | 'matrix'  // 图形大类
   bounds: Bounds // 整体图元位置大小
   style?: Style // 图元样式，JSON字符串
   keywords: string // 关键字
@@ -112,6 +112,44 @@ export interface Shape {
   targetCreateModel?: string // 允许的目标图元字符串
   sourceModelId?: string // 允许的源图元字符串
   isMovableComparents: boolean//是否能拖出隔间
+  ganttData?: GanttData[]
+  attributeColumns?: GanttColumn[] // 列配置
+  ganttContainsModels?: GanttContainsModel[] // 甘特图可新增的模型列表
+}
+export interface GanttColumn {
+  id?: number // 列ID（后端返回）
+  propertyId?: number // 属性ID（后端返回）
+  projectId?: string // 项目ID（后端返回）
+  modelId?: string // 模型ID（后端返回）
+  configId: string // 列配置标识（如 "NamedElement.name"）
+  name: string // 列显示名称
+  isShow: boolean // 是否显示
+  isReadonly: boolean // 是否只读
+}
+export interface GanttContainsModel {
+  projectId: string // 项目id
+  ownerId: string // 所属者id
+  type: string // 模型类型
+  name: string // 模型名称
+  isChart: boolean // 是否为图表
+  icon: string // 模型图标
+}
+export interface GanttData {
+  id: string // 行唯一标识
+  modelId: string // 模型ID
+  ganttOrTableModelId: string // 甘特图/表格模型ID
+  projectId: string // 项目ID
+  type: string // 模型类型
+  sort: string // 排序
+  // 动态字段：字段名为 configId，值为对应的数据
+  // 例如：'NamedElement.name': '企业全生命周期'
+  //      'ActualState.startDate': '2026-01-15'
+  //      'Element.owner': { id: '...', nodeName: '...', icon: '...', modelTypeName: null }
+  [key: string]: any
+}
+export interface ModelProperty {
+  id: string // 属性id
+  name: string // 属性名称
 }
 export interface CompartmentRecord {
   bounds: Bounds                    // 整个父隔间的大小位置
@@ -210,6 +248,51 @@ export interface locationChart {
   modelIcon: string //图表图标
 }
 
-// InteractionLayer types
-export type { InteractionLayerProps, ExternalCreateDragState } from './interactionLayer';
-export { InteractionLayerEmits } from './interactionLayer';
+export interface TreeNode {
+  id: string;
+  nodeName: string;
+  modelName: string;
+  nodeType: string;
+  modelTypeName?: null;
+  elementId?: string | null;
+  parentId?: null | string;
+  isChildren?: boolean;
+  isLeaf?: boolean; // 标识是否为叶子节点
+  children?: TreeNode[];
+  expanded?: boolean; // 节点是否展开
+  isReName?: boolean;
+  isChart: boolean;
+  isCreate?: boolean; //是否可以创建图表
+  isCanvas?: string; //是否可以拖拽到画布
+  icon?: string; // 图标文件名，用于 getIcon 加载
+  modelRelationld?: string;
+}
+
+export interface Matrix {
+  rowTree: TreeNode[];
+  columnTree: TreeNode[];
+  crossData: ColumnHeaderCell[];
+  relationModelIcon: string;
+  relationModelName: string;
+}
+
+export interface MatrixNode {
+  rowNodeld: string;
+  columnNodeld: string; // 列节点ID
+  value: string;
+  relationld: string;//关系ID(如果有连线)
+  relationType: string;//关系类型(箭头类型)
+}
+
+export interface ColumnHeaderCell {
+  columnNodeId: string;
+  rowNodeId: string;
+  value: string;
+  relations: Relation[];
+  operable: boolean;
+}
+export interface Relation {
+  relationId: string;
+  relationType: string;
+  type: string;
+}

package/src/utils/batchAutoExpand.ts

@@ -1,5 +1,6 @@
 import type { Shape } from '@/types'
 import { ensureParentFitsChildren } from './containers'
+import { useGraphStore } from '../store/graphStore'
 
 /**
  * 批量自动扩展所有父容器以适应其子元素
@@ -23,12 +24,14 @@ export function batchAutoExpandParents(
 
     if (parentIds.size === 0) return
 
+    const _sm = useGraphStore().shapeMap
+
     // 2. 按深度排序（深度大的先处理，从内到外）
     const parentsWithDepth = Array.from(parentIds)
         .map(id => ({
             id,
-            depth: getDepth(shapes, id),
-            shape: shapes.find(s => s.id === id)
+            depth: getDepth(_sm, id),
+            shape: _sm.get(id)
         }))
         .filter(p => p.shape)
         .sort((a, b) => b.depth - a.depth) // 深度大的在前
@@ -42,19 +45,15 @@ export function batchAutoExpandParents(
 }
 
 /**
- * 计算图元的嵌套深度
- * @param shapes - 所有图元数据
- * @param id - 要计算深度的图元 ID
- * @returns 嵌套深度（0 表示顶层）
+ * 计算图元的嵌套深度（使用 shapeMap O(1) 查找）
  */
-function getDepth(shapes: Shape[], id: string): number {
+function getDepth(shapeMap: Map<string, Shape>, id: string): number {
     let depth = 0
-    let current = shapes.find(s => s.id === id)
+    let current = shapeMap.get(id)
 
     while (current?.parenShapeId) {
         depth++
-        current = shapes.find(s => s.id === current!.parenShapeId)
-        // 防止循环引用导致无限循环
+        current = shapeMap.get(current.parenShapeId)
         if (depth > 100) {
             console.warn(`检测到可能的循环引用，图元 ID: ${id}`)
             break