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

package/src/utils/geom.ts

@@ -0,0 +1,177 @@
+// 坐标与数值工具
+import type { Shape } from '@/types'
+import { useGraphStore } from '../store/graphStore'
+// 夹取：把 v 限制在 [min, max] 区间
+export const clamp = (v: number, min: number, max: number) =>
+  Math.min(max, Math.max(min, v))
+
+// client 坐标转换到某容器元素 el 的本地坐标
+export const toLocalPoint = (evt: MouseEvent, el: HTMLElement | null) => {
+  if (!el) return { x: evt.clientX, y: evt.clientY }
+  const rect = el.getBoundingClientRect()
+  // 获取当前缩放比例
+  const graphStore = useGraphStore()
+  const scale = graphStore.getScale() || 1
+  // 计算本地坐标并除以缩放比例
+  return { 
+    x: (evt.clientX - rect.left) / scale, 
+    y: (evt.clientY - rect.top) / scale 
+  }
+}
+
+// 点是否位于矩形边界内
+export const inBounds = (
+  pt: { x: number; y: number },
+  b?: { x?: number; y?: number; width?: number; height?: number }
+) => {
+  if (!b) return false
+  const x = b.x ?? 0, y = b.y ?? 0, w = b.width ?? 0, h = b.height ?? 0
+  return pt.x >= x && pt.x <= x + w && pt.y >= y && pt.y <= y + h
+}
+export type Point = { x: number; y: number }
+export type Rect  = { x: number; y: number; width: number; height: number }
+export type Bounds = { x: number; y: number; width: number; height: number }
+export type ContainerRect = { left: number; top: number; right: number; bottom: number }
+/**
+ * 从 Shape（或包含 bounds 的对象）中取出完整的矩形，缺省值补 0
+ */
+export const getBounds = (s?: { bounds?: Partial<Rect> } | null): Rect => {
+  const b = s?.bounds ?? {}
+  return {
+    x: b.x ?? 0,
+    y: b.y ?? 0,
+    width:  b.width  ?? 0,
+    height: b.height ?? 0,
+  }
+}
+
+// 从全量 shapes 中找出画布(diagram)的包围框；没有画布则返回无限大容器（表示不限制）
+export function getDiagramRect(shapes: any[]): ContainerRect {
+  const d = shapes.find(
+    (s: any) => String(s?.shapeType ?? '').trim().toLowerCase() === 'diagram'
+  )
+  if (!d) return { left: -Infinity, top: -Infinity, right: Infinity, bottom: Infinity }
+  const b = getBounds(d)
+  return { left: b.x, top: b.y, right: b.x + b.width, bottom: b.y + b.height }
+}
+
+// 哪些边需要限制（左/上/右/下 任意组合）
+export type EdgeFlags = { left?: boolean; top?: boolean; right?: boolean; bottom?: boolean }
+export function clampPointToRect(
+  pt: { x: number; y: number },
+  elem: Bounds,
+  container: ContainerRect,
+  edges: EdgeFlags
+) {
+  let { x, y } = pt
+  if (edges.left)   x = Math.max(container.left, x)
+  if (edges.top)    y = Math.max(container.top, y)
+  if (edges.right)  x = Math.min(x, container.right  - elem.width)
+  if (edges.bottom) y = Math.min(y, container.bottom - elem.height)
+  return { x, y }
+}
+
+/** 缩放手柄方向 */
+export type Handle = "nw" | "ne" | "sw" | "se"
+// 将矩形 按最小尺寸约束后，按需限制在容器内（按 edges 控制四边）。
+export function clampRectToContainer(
+  r: Rect,
+  container: ContainerRect,
+  edges: EdgeFlags,
+  minW: number,
+  minH: number
+): Rect {
+  let { x, y, width, height } = r
+
+  // 最小尺寸约束
+  width  = Math.max(minW, width)
+  height = Math.max(minH, height)
+
+  // 位置约束（基于最终尺寸）
+  if (edges.left)   x = Math.max(x, container.left)
+  if (edges.top)    y = Math.max(y, container.top)
+  if (edges.right)  x = Math.min(x, container.right  - width)
+  if (edges.bottom) y = Math.min(y, container.bottom - height)
+
+  return { x, y, width, height }
+}
+
+/**
+ * 计算拖动预览：基于按下点与当前点的位移，得到下一帧矩形，
+ * 仅改变位置（x/y），并按容器与 edges 做位置约束。
+ */
+export function ghostDragStep(
+  base: Rect,                 // 按下时的元素矩形
+  anchor: Point,              // 按下时指针（本地坐标）
+  curr: Point,                // 当前指针（本地坐标）
+  container: ContainerRect,   // 画布容器（left/top/right/bottom）
+  edges: EdgeFlags            // 限制哪几条边
+): Rect {
+  const dx = curr.x - anchor.x
+  const dy = curr.y - anchor.y
+  let nx = base.x + dx
+  let ny = base.y + dy
+
+  // 仅对位置做夹取（尺寸用 base 参与计算，以防越界）
+  ;({ x: nx, y: ny } = clampPointToRect(
+    { x: nx, y: ny },
+    base,        // 用 base 的 width/height 作为“被约束元素”
+    container,
+    edges
+  ))
+
+  return { x: nx, y: ny, width: base.width, height: base.height }
+}
+
+/**
+ * 计算缩放预览：基于手柄方向与指针位移得到下一帧矩形，
+ * 保持对角锚点不动，应用最小尺寸与容器约束。
+ */
+export function ghostResizeStep(
+  base: Rect,                 // 按下时的元素矩形
+  handle: Handle,             // 手柄方向："nw" | "ne" | "sw" | "se"
+  anchor: Point,              // 按下时指针（本地坐标）
+  curr: Point,                // 当前指针（本地坐标）
+  container: ContainerRect,   // 画布容器
+  edges: EdgeFlags,           // 限制哪几条边
+  minW: number,               // 最小宽
+  minH: number                // 最小高
+): Rect {
+  const dx = curr.x - anchor.x
+  const dy = curr.y - anchor.y
+
+  // 依据手柄方向决定宽高增量（右/下为正，左/上为负）
+  let w = base.width  + (handle.includes("e") ?  dx : -dx)
+  let h = base.height + (handle.includes("s") ?  dy : -dy)
+
+  // 先做最小尺寸约束，避免回算位置时出现错位
+  w = Math.max(minW, w)
+  h = Math.max(minH, h)
+
+  // 对角点保持不动，回算 x/y
+  const right  = base.x + base.width
+  const bottom = base.y + base.height
+  let x = handle.includes("w") ? right  - w : base.x
+  let y = handle.includes("n") ? bottom - h : base.y
+
+  // 最终做容器约束（会再次考虑尺寸变化）
+  return clampRectToContainer({ x, y, width: w, height: h }, container, edges, minW, minH)
+}
+
+// 由两点生成包围矩形（支持反向拖拽）
+export function rectFromPoints(a: {x:number;y:number}, b:{x:number;y:number}) {
+  const x = Math.min(a.x, b.x)
+  const y = Math.min(a.y, b.y)
+  const w = Math.abs(a.x - b.x)
+  const h = Math.abs(a.y - b.y)
+  return { x, y, width: w, height: h }
+}
+//完全包含
+export function rectContainsRect(outer: Rect, inner: Rect) {
+  return (
+    inner.x >= outer.x &&
+    inner.y >= outer.y &&
+    inner.x + inner.width  <= outer.x + outer.width &&
+    inner.y + inner.height <= outer.y + outer.height
+  );
+}

package/src/utils/graphDragService.ts

@@ -0,0 +1,329 @@
+import type { OwnerPayload, Shape, ShapeSizeUpdatePayload } from "@/types"
+import { collectDescendantIds, expandParentToFitChildBounds, type Rect } from "./containers"
+import { useGraphStore } from '../store/graphStore'
+import _ from "lodash";
+import { eventBus } from '../store/eventBus'
+import { getUuid } from "../utils/index";
+import { addChildShapeToCompartment, isCompartment, isShapeTypeNotInPackageTypes, removeChildShapeFromCompartment } from "./compartment";
+import { autoExpandCompartmentAfterMoved } from "./autoExpandParent";
+
+// 父 id 快照
+type PrevParentMap = Record<string, string | null>
+
+/**
+ * 根据 changedIds 记录“拖动前”的父 id 映射
+ */
+export const buildPrevParentMap = (shapes: Shape[], changedIds: string[]): PrevParentMap => {
+    const map: PrevParentMap = {}
+    for (const id of changedIds) {
+        const before = shapes.find(s => s.id === id)
+        map[id] = before?.parenShapeId ?? null
+    }
+    return map
+}
+// 判断某个类型是否在 classMetaTypes 中
+const isClassMetaType = (type?: string | null) => {
+    const graphStore = useGraphStore()
+    if (!type) return false
+    // 统一转成小写，避免大小写问题
+    const lower = String(type).toLowerCase()
+    return graphStore.classMetaTypes
+        .map(t => String(t).toLowerCase())
+        .includes(lower)
+}
+// 根据业务规则，决定“拖到父元素里时，是移动自己，还是在父元素里生成一个新副本”
+const shouldCloneOnNest = (child: Shape, parent: Shape): boolean => {
+    const childKey = (child as any).shapeKey || ''
+    const parentKey = (parent as any).shapeKey || ''
+
+    // 只有“父 + 子 都在 classMetaTypes” 且 “都有 modelId（已经在画布上）” 才克隆
+    return (
+        isClassMetaType(childKey) &&
+        isClassMetaType(parentKey)
+    )
+}
+/**
+ * 处理“换父 + 克隆 + comparents”的业务
+ * - 负责 finalCheckCanNest
+ * - 负责克隆 & emit('addShape')
+ * - 负责 comparents add/remove
+ * - 产生 ownerPayload / clonedIds
+ * - 若嵌套不通过，会返回 { cancelled: true }
+ */
+export async function applyReparentAndClone(options: {
+    shapes: Shape[]
+    changedIds: string[]
+    prevParentById: PrevParentMap
+    source?: string
+    dragBase: Record<string, Rect>
+    updateShape: (id: string, updates: Partial<Shape>) => void
+    pendingNestedIds: { value: string[] }
+    addShape: (s: Shape) => void
+}): Promise<{
+    ownerPayload: OwnerPayload | null
+    clonedIds: string[]
+    cancelled: boolean
+}> {
+    const {
+        shapes,
+        changedIds,
+        prevParentById,
+        source,
+        dragBase,
+        updateShape,
+        pendingNestedIds,
+        addShape,
+    } = options
+    const graphStore = useGraphStore()
+    let ownerPayload: OwnerPayload | null = null
+    const clonedIds: string[] = []
+
+    for (const id of changedIds) {
+        const after = shapes.find(s => s.id === id)
+        if (!after) continue
+
+        const beforePid = prevParentById[id]
+        const afterPid = after.parenShapeId ?? null
+
+        if (beforePid !== afterPid) {
+            // === 1) 嵌套权限最终校验 ===
+            if (source === 'addEntity') {
+                pendingNestedIds.value.push(after.id)
+            }
+
+            const pass = await graphStore.finalCheckCanNest(id, afterPid)
+            if (!pass) {
+                // 撤销 reparent（恢复父 + 位置）
+                updateShape(id, { parenShapeId: beforePid || '' })
+                const base = dragBase[id]
+                if (base) {
+                    updateShape(id, { bounds: { ...base } })
+                }
+                return { ownerPayload: null, clonedIds, cancelled: true }
+            }
+
+            const parent = shapes.find(s => s.id === afterPid)
+            if (!parent) continue
+
+            // === 2) 克隆 + 嵌套 逻辑 ===
+            if (shouldCloneOnNest(after, parent) && !source) {
+                // 维护 pendingNestedIds
+                if (!Array.isArray(pendingNestedIds.value)) {
+                    pendingNestedIds.value = []
+                } else {
+                    const idx = pendingNestedIds.value.indexOf(after.id)
+                    if (idx !== -1) pendingNestedIds.value.splice(idx, 1)
+                }
+
+                const dropBounds = { ...after.bounds }
+                const newId = getUuid()
+                const clonedShape: Shape = _.cloneDeep(after) as Shape
+                clonedShape.id = newId
+                    ; (clonedShape as any).parenShapeId = parent.id
+
+                // 还原原图元
+                const baseBounds = dragBase[id]
+                updateShape(id, {
+                    parenShapeId: prevParentById[id] || '',
+                    bounds: baseBounds ? { ...baseBounds } : dropBounds,
+                })
+
+                // 放进画布
+                addShape(clonedShape)
+                pendingNestedIds.value.push(newId)
+
+                // 设置克隆图元的最终父 + 位置
+                updateShape(newId, {
+                    parenShapeId: parent.id || '',
+                    bounds: dropBounds,
+                })
+
+                const cloneInStore = shapes.find(s => s.id === newId) || clonedShape
+                const shapeDataForAdd: any = _.cloneDeep(cloneInStore)
+                const payloadData: any = {
+                    coordinate: {
+                        clientX: dropBounds.x,
+                        clientY: dropBounds.y,
+                    },
+                    shapeData: shapeDataForAdd,
+                    type: 'treeNode',
+                    nodeType: cloneInStore.shapeKey,
+                    icon: cloneInStore.icon,
+                }
+
+                await new Promise<void>((resolve, reject) => {
+                    eventBus.emit('addShape', {
+                        ...payloadData,
+                        resolve,
+                        reject,
+                    })
+                })
+
+                clonedIds.push(newId)
+
+                // ownerPayload：克隆场景
+                const latestClone = shapes.find(s => s.id === newId) || cloneInStore
+                const childModelId = String((latestClone as any).modelId || '')
+                const ownerId = String((parent as any).modelId || '')
+                const ownerType = String((parent as any).shapeKey || '')
+
+                if (childModelId && ownerId && ownerType) {
+                    ownerPayload = {
+                        id: childModelId,
+                        ownerId,
+                        ownerType,
+                        shapeId: newId,
+                    } as any
+                }
+
+                // 克隆场景走完，下面“非克隆 ownerPayload 逻辑”不再参与
+                continue
+            }
+
+            // === 3) 非克隆场景的 ownerPayload ===
+            const childModelId = String((after as any).modelId || '')
+            const ownerId = String((parent as any).modelId || '')
+            const ownerType = String((parent as any).shapeKey || '')
+
+            if (childModelId && ownerId && ownerType) {
+                ownerPayload = {
+                    id: childModelId,
+                    ownerId,
+                    ownerType,
+                    shapeId: after.id,
+                }
+            }
+
+            // === 4) comparents：老父移除，新父添加 ===
+            if (beforePid) {
+                const oldP = shapes.find(s => s.id === beforePid)
+                if (oldP && isShapeTypeNotInPackageTypes(oldP)) {
+                    removeChildShapeFromCompartment(oldP, after, updateShape)
+                }
+            }
+            if (afterPid) {
+                const newP = shapes.find(s => s.id === afterPid)
+                if (newP && isShapeTypeNotInPackageTypes(newP)) {
+                    addChildShapeToCompartment(newP, after, updateShape)
+                }
+            }
+        } else {
+            // 父未变化：若父是隔间，确保 comparents 中有它（幂等）
+            if (afterPid) {
+                const p = shapes.find(s => s.id === afterPid)
+                if (p && isShapeTypeNotInPackageTypes(p)) {
+                    addChildShapeToCompartment(p, after, updateShape)
+                }
+            }
+        }
+    }
+
+    return { ownerPayload, clonedIds, cancelled: false }
+}
+
+/**
+ * 对“本次被拖动的隔间组件”做一次自动扩容检查
+ * - 用于你现在说的：父已经贴到画布顶部了，之后拖下来有空间，要再扩一次把子从头部/内容区顶出来
+ */
+export const autoExpandMovedCompartmentsAfterDrag = (
+    shapes: Shape[],
+    changedIds: string[],
+    updateShape: (id: string, updates: Partial<Shape>) => void,
+) => {
+    const movedCompartmentIds = changedIds.filter(id => {
+        const shape = shapes.find(s => s.id === id)
+        return shape && isCompartment(shape)
+    })
+
+    for (const cid of movedCompartmentIds) {
+        autoExpandCompartmentAfterMoved(shapes, cid, updateShape)
+    }
+}
+
+/**
+ * 收集拖动影响到的所有 shape id
+ * - changedIds / clonedIds 本身
+ * - 这些节点的父节点 + 子树
+ * - 所有这些节点的祖先链
+ */
+export const collectAffectedShapeIds = (shapes: Shape[], changedIds: string[], clonedIds: string[]): Set<string> => {
+    const affected = new Set<string>()
+    const allChanged = [...changedIds, ...clonedIds]
+
+    for (const id of allChanged) {
+        affected.add(id)
+        const parentId = shapes.find(s => s.id === id)?.parenShapeId ?? null
+        if (parentId) {
+            affected.add(parentId)
+            collectDescendantIds(shapes, parentId).forEach(cid => affected.add(cid))
+        }
+    }
+
+    for (const id of Array.from(affected)) {
+        let cur: string | null = id
+        let guard = 0
+        while (cur && guard++ < 1000) {
+            const s = shapes.find(x => x.id === cur)
+            const p = s ? (s as any).parenShapeId ?? null : null
+            if (!p) break
+            affected.add(p)
+            cur = p
+        }
+    }
+
+    return affected
+}
+
+/**
+ * 根据 affectedIds 生成 deep 拷贝后的 payloads
+ * （发给 shape-drag-end 用）
+ */
+export const buildDragEndPayloads = (affectedIds: Set<string>, shapes: Shape[]): Shape[] => {
+    return Array.from(affectedIds)
+        .map(id => shapes.find(s => s.id === id))
+        .filter((s): s is Shape => !!s)
+        .map(s => _.cloneDeep(s))
+}
+
+/**
+ * 创建 onNestDone 回调
+ * - 只在嵌套接口成功时，再进行“按子扩父 + shape-size-update”
+ */
+export const createOnNestDoneCallback = (options: {
+    shapesRef: { value: Shape[] }
+    ownerPayload: OwnerPayload | null
+    updateShape: (id: string, updates: Partial<Shape>) => void
+}): (ok: boolean) => void => {
+    const { shapesRef, ownerPayload, updateShape } = options
+    return (ok: boolean) => {
+        if (!ok || !ownerPayload?.shapeId) return
+
+        const shapes = shapesRef.value
+        const childId = ownerPayload.shapeId
+        const childShape = shapes.find(s => (s as any).id === childId)
+        if (!childShape || !childShape.parenShapeId || !childShape.bounds) return
+
+        const parent = shapes.find(s => s.id === childShape.parenShapeId)
+        if (!parent) return
+        const { expanded, affectedIds } = expandParentToFitChildBounds(
+            shapes,
+            parent,
+            childShape.id,
+            childShape.bounds as Rect,
+            updateShape,
+        )
+        if (!expanded) return
+
+        const sizePayload: ShapeSizeUpdatePayload[] = affectedIds
+            .map(id => shapes.find(s => s.id === id))
+            .filter((s): s is Shape => !!s)
+            .filter(s => s.id !== childId) // 不用更新子，子已经是最新的 bounds
+            .map(s => ({
+                id: s.id,
+                bounds: JSON.stringify(s.bounds ?? {}),
+            }))
+
+        // 交给外面单独的监听去调 updateShapeSize 接口
+        eventBus.emit('shape-size-update', sizePayload)
+    }
+}

package/src/utils/highlightUtils.ts

@@ -0,0 +1,162 @@
+import type { Shape } from '../types';
+
+// GraphStore接口定义，包含highlightUtils所需的方法和属性
+interface GraphStore {
+  shapes: Shape[];
+  updateShape: (shapeId: string, updates: Partial<Shape>, id?: 'id' | 'modelId') => void;
+}
+
+/**
+ * 图元高亮工具类
+ * 用于处理图元高亮状态管理和样式转换
+ */
+export class HighlightUtils {
+  private highlightedShapeId: string | null = null;
+  private originalShapeStyles = new Map<string, { borderColor?: string; borderWidth?: number }>();
+  private graphStore: GraphStore;
+  private highlightTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  /**
+   * 构造函数
+   * @param graphStore 图元存储实例
+   */
+  constructor(graphStore: GraphStore) {
+    this.graphStore = graphStore;
+  }
+
+  /**
+   * 高亮或取消高亮图元
+   * @param shape 要高亮的图元，null表示取消所有高亮
+   * @param isHighlight 是否高亮
+   * @param isValidSource 是否是有效的连接源（影响高亮颜色）
+   * @returns 高亮后的图元（如果有）
+   */
+  public highlightShape(
+    shape: Shape | null,
+    isHighlight: boolean,
+    isValidSource: boolean = true
+  ): Shape | null {
+    // 取消高亮处理
+    if (!shape && !isHighlight) {
+      this.cancelAllHighlights();
+      return null;
+    }
+
+    // 无效图元或边类型图元不处理
+    if (!shape || shape.shapeType === 'edge') return null;
+
+    // 高亮操作
+    if (isHighlight && shape) {
+      // 先取消之前可能存在的高亮
+      if (this.highlightedShapeId && this.highlightedShapeId !== shape.id) {
+        this.cancelAllHighlights();
+      }
+
+      // 保存原始样式
+      if (!this.originalShapeStyles.has(shape.id)) {
+        // 确保borderWidth是number类型
+        let borderWidth: number | undefined;
+        if (shape.style?.borderWidth !== undefined) {
+          borderWidth = typeof shape.style.borderWidth === 'string' 
+            ? parseFloat(shape.style.borderWidth) 
+            : shape.style.borderWidth;
+        }
+        
+        this.originalShapeStyles.set(shape.id, {
+          borderColor: shape.style?.borderColor,
+          borderWidth: borderWidth
+        });
+      }
+
+      // 设置高亮样式（蓝色表示可以连接，红色表示不可以）
+      const highlightStyle = {
+        ...shape.style,
+        borderColor: isValidSource ? '#1890ff' : '#f56c6c', // 蓝色或红色
+        borderWidth: 3,
+      };
+
+      // 更新图元样式
+      this.graphStore.updateShape(shape.id, { style: highlightStyle });
+      this.highlightedShapeId = shape.id;
+      
+      return shape;
+    }
+
+    return null;
+  }
+
+  /**
+   * 取消所有图元的高亮状态
+   */
+  public cancelAllHighlights(): void {
+    if (this.highlightedShapeId) {
+      // 找到当前高亮的图元
+      const currentHighlighted = this.graphStore.shapes.find(s => s.id === this.highlightedShapeId);
+      if (currentHighlighted) {
+        // 恢复原始样式
+        const originalStyle = this.originalShapeStyles.get(this.highlightedShapeId);
+        if (originalStyle) {
+          const restoreStyle = {
+            ...currentHighlighted.style,
+            borderColor: originalStyle.borderColor !== undefined ? originalStyle.borderColor : undefined,
+            borderWidth: originalStyle.borderWidth !== undefined ? Number(originalStyle.borderWidth) : undefined
+          };
+
+          // 更新图元恢复原始样式
+          this.graphStore.updateShape(this.highlightedShapeId, { style: restoreStyle });
+        }
+
+        this.originalShapeStyles.delete(this.highlightedShapeId);
+      }
+    }
+    
+    // 重置状态
+    this.highlightedShapeId = null;
+  }
+
+  /**
+   * 获取当前高亮的图元ID
+   */
+  public getHighlightedShapeId(): string | null {
+    return this.highlightedShapeId;
+  }
+
+  /**
+   * 获取当前高亮的图元
+   */
+  public getHighlightedShape(): Shape | null {
+    if (!this.highlightedShapeId) return null;
+    return this.graphStore.shapes.find(s => s.id === this.highlightedShapeId) || null;
+  }
+
+  /**
+   * 设置高亮定时器
+   * @param callback 回调函数
+   * @param delay 延迟时间（毫秒）
+   */
+  public setHighlightTimeout(callback: () => void, delay: number): void {
+    // 先清除已存在的定时器
+    this.clearHighlightTimeout();
+    // 设置新的定时器
+    this.highlightTimeout = setTimeout(callback, delay);
+  }
+
+  /**
+   * 清除高亮定时器
+   */
+  public clearHighlightTimeout(): void {
+    if (this.highlightTimeout) {
+      clearTimeout(this.highlightTimeout);
+      this.highlightTimeout = null;
+    }
+  }
+
+  /**
+   * 清理所有高亮状态和数据
+   */
+  public dispose(): void {
+    this.cancelAllHighlights();
+    this.clearHighlightTimeout();
+    this.originalShapeStyles.clear();
+  }
+}