@mx-sose-front/mx-sose-graph 1.2.9 → 1.3.0

package/src/utils/autoLayout.ts

@@ -0,0 +1,388 @@
+import ELK, { type ElkNode, type ElkExtendedEdge } from 'elkjs/lib/elk.bundled.js'
+import type { Shape, Bounds } from '../types'
+import { getShapeInitialDimensions } from './shapeInitialBounds'
+import { attachPinToBlock, isPortShape } from './pinUtils'
+
+export type LayoutDirection = 'horizontal' | 'vertical'
+
+/** ELK 布局算法：layered 分层布局；mrtree 多根树布局 */
+export type LayoutAlgorithm = 'layered' | 'mrtree'
+
+export interface AutoLayoutOptions {
+  /** ELK 布局算法，默认 layered */
+  algorithm?: LayoutAlgorithm
+  direction?: LayoutDirection
+  /** 同层节点间距（像素） */
+  nodeSpacing?: number
+  /** 层间距（像素） */
+  layerSpacing?: number
+  /** 布局结果左上角偏移 */
+  padding?: number
+  /** 子图元在父容器内的内边距 */
+  childPadding?: number
+  /** 子图元之间的间距 */
+  childSpacing?: number
+  /** 每行最多子图元数量 */
+  maxChildrenPerRow?: number
+}
+
+export interface LayoutResult {
+  /** shapeId → 新的 bounds（x/y 为布局结果；width/height 重置为各图元类型的默认尺寸） */
+  nodeUpdates: Map<string, Bounds>
+  /** 所有参与布局的节点 ID（用于批量刷新连线） */
+  affectedNodeIds: string[]
+}
+
+const DEFAULT_NODE_WIDTH = 100
+const DEFAULT_NODE_HEIGHT = 50
+
+/** 布局用端点：端口映射到父图元，普通图元保持自身 id */
+function resolveLayoutEndpoint(
+  shapeId: string,
+  shapeById: Map<string, Shape>
+): { layoutId: string; portId?: string } {
+  const shape = shapeById.get(shapeId)
+  if (!shape) return { layoutId: shapeId }
+  if (shape.shapeType === 'pin' && isPortShape(shape) && shape.parenShapeId) {
+    return { layoutId: shape.parenShapeId, portId: shape.id }
+  }
+  return { layoutId: shapeId }
+}
+
+function getLayoutBounds(
+  shapeId: string,
+  nodeUpdates: Map<string, Bounds>,
+  shapeById: Map<string, Shape>
+): Bounds {
+  const updated = nodeUpdates.get(shapeId)
+  if (updated) return updated
+  const shape = shapeById.get(shapeId)
+  const b = shape?.bounds
+  return {
+    x: b?.x ?? 0,
+    y: b?.y ?? 0,
+    width: b?.width ?? DEFAULT_NODE_WIDTH,
+    height: b?.height ?? DEFAULT_NODE_HEIGHT,
+  }
+}
+
+function blockCenter(bounds: Bounds): { x: number; y: number } {
+  const x = bounds.x ?? 0
+  const y = bounds.y ?? 0
+  const w = bounds.width ?? DEFAULT_NODE_WIDTH
+  const h = bounds.height ?? DEFAULT_NODE_HEIGHT
+  return { x: x + w / 2, y: y + h / 2 }
+}
+
+interface EdgePortLayoutInfo {
+  sourcePortId?: string
+  targetPortId?: string
+  layoutSourceId: string
+  layoutTargetId: string
+}
+
+/** 布局完成后，将端口吸附到父图元朝向对端的边上 */
+function positionPortsOnEdges(
+  edgePortInfos: EdgePortLayoutInfo[],
+  shapes: Shape[],
+  nodeUpdates: Map<string, Bounds>,
+  affectedNodeIds: string[]
+): void {
+  const shapeById = new Map(shapes.map(s => [s.id, s]))
+  const affectedSet = new Set(affectedNodeIds)
+
+  for (const info of edgePortInfos) {
+    const otherSourceBounds = getLayoutBounds(info.layoutSourceId, nodeUpdates, shapeById)
+    const otherTargetBounds = getLayoutBounds(info.layoutTargetId, nodeUpdates, shapeById)
+
+    if (info.sourcePortId) {
+      const port = shapeById.get(info.sourcePortId)
+      const parentId = port?.parenShapeId
+      const parent = parentId ? shapeById.get(parentId) : undefined
+      if (port && parent) {
+        const parentWithBounds: Shape = {
+          ...parent,
+          bounds: getLayoutBounds(parent.id, nodeUpdates, shapeById),
+        }
+        const portBounds = attachPinToBlock(port, parentWithBounds, blockCenter(otherTargetBounds))
+        nodeUpdates.set(port.id, portBounds)
+        if (!affectedSet.has(port.id)) {
+          affectedNodeIds.push(port.id)
+          affectedSet.add(port.id)
+        }
+      }
+    }
+
+    if (info.targetPortId) {
+      const port = shapeById.get(info.targetPortId)
+      const parentId = port?.parenShapeId
+      const parent = parentId ? shapeById.get(parentId) : undefined
+      if (port && parent) {
+        const parentWithBounds: Shape = {
+          ...parent,
+          bounds: getLayoutBounds(parent.id, nodeUpdates, shapeById),
+        }
+        const portBounds = attachPinToBlock(port, parentWithBounds, blockCenter(otherSourceBounds))
+        nodeUpdates.set(port.id, portBounds)
+        if (!affectedSet.has(port.id)) {
+          affectedNodeIds.push(port.id)
+          affectedSet.add(port.id)
+        }
+      }
+    }
+  }
+}
+
+/** 根据子图元排列计算父容器所需尺寸 */
+function computeParentSize(
+  children: Shape[],
+  maxPerRow: number,
+  childSpacing: number,
+  childPadding: number,
+  headerHeight: number,
+): { width: number; height: number } {
+  if (!children.length) return { width: DEFAULT_NODE_WIDTH, height: DEFAULT_NODE_HEIGHT }
+
+  const childDims = children.map(c => getShapeInitialDimensions(c))
+  const rows: { width: number; height: number }[][] = []
+  for (let i = 0; i < childDims.length; i += maxPerRow) {
+    rows.push(childDims.slice(i, i + maxPerRow))
+  }
+
+  let totalWidth = 0
+  let totalHeight = 0
+  for (const row of rows) {
+    const rowW = row.reduce((sum, d) => sum + d.width, 0) + (row.length - 1) * childSpacing
+    const rowH = Math.max(...row.map(d => d.height))
+    totalWidth = Math.max(totalWidth, rowW)
+    totalHeight += rowH
+  }
+  totalHeight += (rows.length - 1) * childSpacing
+
+  return {
+    width: totalWidth + childPadding * 2,
+    height: totalHeight + childPadding * 2 + headerHeight,
+  }
+}
+
+/** 在父容器内将子图元横向排列（每行最多 maxPerRow 个） */
+function arrangeChildrenInParent(
+  parentBounds: Bounds,
+  children: Shape[],
+  maxPerRow: number,
+  childSpacing: number,
+  childPadding: number,
+  headerHeight: number,
+): Map<string, Bounds> {
+  const result = new Map<string, Bounds>()
+  if (!children.length) return result
+
+  const childDims = children.map(c => getShapeInitialDimensions(c))
+  const startX = (parentBounds.x ?? 0) + childPadding
+  const startY = (parentBounds.y ?? 0) + childPadding + headerHeight
+
+  let curY = startY
+  for (let i = 0; i < children.length; i += maxPerRow) {
+    const rowChildren = children.slice(i, i + maxPerRow)
+    const rowDims = childDims.slice(i, i + maxPerRow)
+    const rowH = Math.max(...rowDims.map(d => d.height))
+
+    let curX = startX
+    for (let j = 0; j < rowChildren.length; j++) {
+      result.set(rowChildren[j].id, {
+        x: curX,
+        y: curY,
+        width: rowDims[j].width,
+        height: rowDims[j].height,
+      })
+      curX += rowDims[j].width + childSpacing
+    }
+    curY += rowH + childSpacing
+  }
+
+  return result
+}
+
+/**
+ * 基于 ELK 的自动布局
+ *
+ * 从 shapes 中分离出节点与边（排除 edge、diagram、pin/端口），交由 ELK 计算布局（layered / mrtree），
+ * 返回每个节点的新坐标。
+ *
+ * 端口不参与节点布局：构建 ELK 边时将连到端口的 source/target 换为其父图元 id；
+ * 布局完成后边的 sourceId/targetId 仍指向端口，再按对端父图元中心用 attachPinToBlock 吸附端口。
+ *
+ * 对于有嵌套子图元的父图元：
+ * 1. 先根据子图元数量计算父图元所需宽高
+ * 2. 以计算后的尺寸参与 ELK 布局
+ * 3. 布局完成后将子图元在父内横向排列（每行最多 maxChildrenPerRow 个）
+ */
+export async function autoLayout(
+  shapes: Shape[],
+  options: AutoLayoutOptions = {}
+): Promise<LayoutResult> {
+  const {
+    algorithm = 'layered',
+    direction = 'vertical',
+    nodeSpacing = 50,
+    layerSpacing = 80,
+    padding = 40,
+    childPadding = 16,
+    childSpacing = 12,
+    maxChildrenPerRow = 3,
+  } = options
+
+  const HEADER_HEIGHT = 30
+
+  const shapeById = new Map(shapes.map(s => [s.id, s]))
+
+  // 排除边、画布、端口（pin）——端口不参与 ELK 节点布局
+  const nodeShapes = shapes.filter(
+    s => s.shapeType !== 'edge' && s.shapeType !== 'diagram' && s.shapeType !== 'pin'
+  )
+  const edgeShapes = shapes.filter(
+    s => s.shapeType === 'edge' && s.sourceId && s.targetId
+  )
+
+  // 构建父子关系
+  const parentChildMap = new Map<string, Shape[]>()
+  const childIdSet = new Set<string>()
+  for (const s of nodeShapes) {
+    if (s.parenShapeId && s.shapeType === 'shape') {
+      const parent = nodeShapes.find(p => p.id === s.parenShapeId)
+      if (parent) {
+        if (!parentChildMap.has(s.parenShapeId)) {
+          parentChildMap.set(s.parenShapeId, [])
+        }
+        parentChildMap.get(s.parenShapeId)!.push(s)
+        childIdSet.add(s.id)
+      }
+    }
+  }
+
+  // 顶层图元：不是别人的子图元
+  const topLevelShapes = nodeShapes.filter(s => !childIdSet.has(s.id))
+  const topLevelIdSet = new Set(topLevelShapes.map(s => s.id))
+
+  // 为父图元计算基于子图元排列的尺寸
+  const parentSizeMap = new Map<string, { width: number; height: number }>()
+  for (const [parentId, children] of parentChildMap) {
+    parentSizeMap.set(
+      parentId,
+      computeParentSize(children, maxChildrenPerRow, childSpacing, childPadding, HEADER_HEIGHT)
+    )
+  }
+
+  const elkNodes: ElkNode[] = topLevelShapes.map(s => {
+    const overrideSize = parentSizeMap.get(s.id)
+    if (overrideSize) {
+      return {
+        id: s.id,
+        width: overrideSize.width,
+        height: overrideSize.height,
+      }
+    }
+    const { width, height } = getShapeInitialDimensions(s)
+    return {
+      id: s.id,
+      width: width || DEFAULT_NODE_WIDTH,
+      height: height || DEFAULT_NODE_HEIGHT,
+    }
+  })
+
+  // 边的端点：端口换为其父图元 id，供 ELK 排序；并记录需事后吸附的端口
+  const edgePortInfos: EdgePortLayoutInfo[] = []
+  const elkEdges: ElkExtendedEdge[] = edgeShapes
+    .map(e => {
+      const src = resolveLayoutEndpoint(e.sourceId!, shapeById)
+      const tgt = resolveLayoutEndpoint(e.targetId!, shapeById)
+      return { edge: e, src, tgt }
+    })
+    .filter(({ src, tgt }) => topLevelIdSet.has(src.layoutId) && topLevelIdSet.has(tgt.layoutId))
+    .map(({ edge, src, tgt }) => {
+      if (src.portId || tgt.portId) {
+        edgePortInfos.push({
+          sourcePortId: src.portId,
+          targetPortId: tgt.portId,
+          layoutSourceId: src.layoutId,
+          layoutTargetId: tgt.layoutId,
+        })
+      }
+      return {
+        id: edge.id,
+        sources: [src.layoutId],
+        targets: [tgt.layoutId],
+      }
+    })
+
+  const elkDirection = direction === 'horizontal' ? 'RIGHT' : 'DOWN'
+
+  const elk = new ELK()
+
+  const baseLayoutOptions: Record<string, string> = {
+    'elk.algorithm': algorithm,
+    'elk.direction': elkDirection,
+    'elk.spacing.nodeNode': String(nodeSpacing),
+    'elk.padding': `[top=${padding},left=${padding},bottom=${padding},right=${padding}]`,
+  }
+
+  const layoutOptions: Record<string, string> =
+    algorithm === 'layered'
+      ? {
+          ...baseLayoutOptions,
+          'elk.layered.spacing.nodeNodeBetweenLayers': String(layerSpacing),
+          'elk.layered.crossingMinimization.strategy': 'LAYER_SWEEP',
+          'elk.layered.nodePlacement.strategy': 'BRANDES_KOEPF',
+          'elk.edgeRouting': 'ORTHOGONAL',
+        }
+      : baseLayoutOptions
+
+  const graph: ElkNode = {
+    id: 'root',
+    layoutOptions,
+    children: elkNodes,
+    edges: elkEdges,
+  }
+
+  const layoutResult = await elk.layout(graph)
+
+  const nodeUpdates = new Map<string, Bounds>()
+  const affectedNodeIds: string[] = []
+
+  if (layoutResult.children) {
+    for (const child of layoutResult.children) {
+      const original = topLevelShapes.find(s => s.id === child.id)
+      if (!original) continue
+
+      const overrideSize = parentSizeMap.get(child.id)
+      const width = overrideSize?.width ?? (getShapeInitialDimensions(original).width || DEFAULT_NODE_WIDTH)
+      const height = overrideSize?.height ?? (getShapeInitialDimensions(original).height || DEFAULT_NODE_HEIGHT)
+
+      const parentBounds: Bounds = {
+        x: child.x ?? 0,
+        y: child.y ?? 0,
+        width,
+        height,
+      }
+      nodeUpdates.set(child.id, parentBounds)
+      affectedNodeIds.push(child.id)
+
+      // 布局子图元：横向排列
+      const children = parentChildMap.get(child.id)
+      if (children?.length) {
+        const childBoundsMap = arrangeChildrenInParent(
+          parentBounds, children, maxChildrenPerRow, childSpacing, childPadding, HEADER_HEIGHT
+        )
+        for (const [childId, bounds] of childBoundsMap) {
+          nodeUpdates.set(childId, bounds)
+          affectedNodeIds.push(childId)
+        }
+      }
+    }
+  }
+
+  // 将端口放到连线两端：朝向对端父图元中心吸附到父图元边缘
+  positionPortsOnEdges(edgePortInfos, shapes, nodeUpdates, affectedNodeIds)
+
+  return { nodeUpdates, affectedNodeIds }
+}

package/src/utils/pinUtils.ts

@@ -2,6 +2,11 @@ import type { Shape, Bounds } from '../types'
 import { getBounds } from './geom'
 
 const PortKeys = ['OperationalPort', 'ServicePort', 'ResourcePort']
+
+/** 是否为业务/服务/资源端口图元 */
+export function isPortShape(shape: Shape): boolean {
+  return PortKeys.includes(shape.shapeKey)
+}
 /**
  * 计算点到矩形边的距离
  */

package/src/utils/shapeInitialBounds.ts

@@ -0,0 +1,42 @@
+import type { Shape } from '../types'
+import { PinKeyMap, ShapeKeyMap } from '../constants'
+
+/**
+ * 各渲染组件中与「原始 / 兜底」bounds 宽高一致的默认值
+ * （对应 Block.vue、Package.vue、DividingLine.vue、ActivityAction.vue、ConceptualRole.vue、Diagram.vue 等）
+ */
+const RENDERER_DEFAULTS: Record<string, { width: number; height: number }> = {
+  Block: { width: 150, height: 60 },
+  Package: { width: 150, height: 85 },
+  DividingLine: { width: 150, height: 135 },
+  ActivityAction: { width: 100, height: 40 },
+  ConceptualRole: { width: 30, height: 30 },
+  Diagram: { width: 100, height: 120 },
+}
+
+/** Pin.vue 中 vbW/vbH 的兜底 */
+const PIN_DEFAULTS = { width: 20, height: 20 }
+/** Port.vue 中 vbW/vbH 的兜底 */
+const PORT_DEFAULTS = { width: 20, height: 20 }
+
+const FALLBACK = { width: 100, height: 50 }
+
+/**
+ * 返回图元用于布局/重置时的「初始」宽高（与对应 Vue 组件默认一致），不读取当前可能被拉伸的 bounds。
+ */
+export function getShapeInitialDimensions(shape: Shape): { width: number; height: number } {
+  if (shape.shapeType === 'pin') {
+    const kind = (PinKeyMap as Record<string, string>)[shape.shapeKey]
+    if (kind === 'Port') return { ...PORT_DEFAULTS }
+    if (kind === 'Pin') return { ...PIN_DEFAULTS }
+    return { ...PIN_DEFAULTS }
+  }
+
+  if (shape.shapeType === 'shape') {
+    const renderer = (ShapeKeyMap as Record<string, string>)[shape.shapeKey]
+    const d = renderer ? RENDERER_DEFAULTS[renderer] : undefined
+    if (d) return { ...d }
+  }
+
+  return { ...FALLBACK }
+}

package/src/view/graph.vue

@@ -588,6 +588,8 @@ defineExpose({
   position: absolute;
   top: 0;
   left: 0;
+  transform-origin: 0 0;
+  transform: scale(v-bind('currentScale'));
   pointer-events: none;
   z-index: 998;
 }