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

package/src/utils/containers.ts

@@ -9,6 +9,7 @@ import {
 import { getBounds } from './geom'
 import { canNest } from './policy';
 import { useGraphStore } from '../store/graphStore'
+import { snapPinToParentEdge } from './pinUtils'
 /** 统一的几何矩形类型 */
 export type Rect = { x: number; y: number; width: number; height: number }
 /** 更新回调签名（ */
@@ -234,6 +235,8 @@ export const ensureParentFitsChildren = (
     updateShape(parent.id, {
       bounds: { x: snap(nx), y: snap(ny), width: snap(needW), height: snap(needH) }
     })
+    // 父 bounds 确实变了，把父上挂载的 pin/port 重新吸附到新边缘
+    relocatePinsOnShape(parent.id, updateShape)
   }
 }
 /** 从当前父开始，逐层向上做 ensureParentFitsChildren */
@@ -242,9 +245,10 @@ export const bubbleAutoFitUp = (
   startParentId: string | null | undefined,
   updateShape: Updater
 ) => {
+  const shapeMap = useGraphStore().shapeMap
   let pid = startParentId ?? null
   while (pid) {
-    const p = shapes.find(s => s.id === pid)
+    const p = shapeMap.get(pid)
     if (!p) break
     ensureParentFitsChildren(shapes, p, updateShape)
     pid = p.parenShapeId ?? null
@@ -260,8 +264,9 @@ export const attachToParent = (
   parentId: string,
   updateShape: Updater
 ) => {
-  const child = shapes.find(s => s.id === childId)
-  const parent = shapes.find(s => s.id === parentId)
+  const shapeMap = useGraphStore().shapeMap
+  const child = shapeMap.get(childId)
+  const parent = shapeMap.get(parentId)
   if (!child || !parent) return
   if (isDescendant(shapes, parentId, childId)) return // 防环
 
@@ -274,7 +279,7 @@ export const attachToParent = (
   const subtreeIds = [childId, ...collectDescendantIds(shapes, childId)]
   if (delta !== 0) {
     for (const id of subtreeIds) {
-      const n = shapes.find(s => s.id === id)!
+      const n = shapeMap.get(id)!
       const nz = getZ(n) + delta
       updateShape(id, { style: { ...(n.style ?? {}), zIndex: nz } as any })
     }
@@ -290,7 +295,7 @@ export const detachFromParent = (
   childId: string,
   updateShape: Updater
 ) => {
-  const child = shapes.find(s => s.id === childId)
+  const child = useGraphStore().shapeMap.get(childId)
   if (!child || !child.parenShapeId) return
   updateShape(childId, { parenShapeId: undefined })
 }
@@ -303,7 +308,8 @@ export const cascadeZIndexFrom = (
   startId: string,
   updateShape: Updater
 ) => {
-  const start = shapes.find(s => s.id === startId); if (!start) return
+  const shapeMap = useGraphStore().shapeMap
+  const start = shapeMap.get(startId); if (!start) return
   const queue: Shape[] = [start]
 
   while (queue.length) {
@@ -448,9 +454,10 @@ export const bubbleCoverWithGapUp = (
   updateShape: Updater,
   gap = 0
 ) => {
+  const shapeMap = useGraphStore().shapeMap
   let pid = startParentId ?? null
   while (pid) {
-    const p = shapes.find(s => s.id === pid)
+    const p = shapeMap.get(pid)
     if (!p) break
     ensureParentCoversChildrenWithGap(shapes, p, updateShape, gap)
     pid = p.parenShapeId ?? null
@@ -505,10 +512,11 @@ export const hasDraggedAncestor = (
   sid: string,
   draggingSet: Set<string>
 ) => {
-  let pid = shapes.find(s => s.id === sid)?.parenShapeId ?? null
+  const shapeMap = useGraphStore().shapeMap
+  let pid = shapeMap.get(sid)?.parenShapeId ?? null
   while (pid) {
     if (draggingSet.has(pid)) return true
-    pid = shapes.find(s => s.id === pid)?.parenShapeId ?? null
+    pid = shapeMap.get(pid)?.parenShapeId ?? null
   }
   return false
 }
@@ -542,7 +550,8 @@ export const resolveParentAfterDrag = (
     deferExpandOnReparent?: boolean
   }
 ): boolean => {
-  const byId = (id?: string | null) => (id ? shapes.find(x => x.id === id) || null : null)
+  const shapeMap = useGraphStore().shapeMap
+  const byId = (id?: string | null) => (id ? shapeMap.get(id) || null : null)
   const draggingSet = new Set(draggingIds)
   // 本次拖动的子图元是否是“黏在父上的类型”
   const stickyToParent = isStickyChild(s)
@@ -601,11 +610,11 @@ export const resolveParentAfterDrag = (
       if (!allowAsParent(shapes, p)) return false
     } else {
       // 或者直接内联一版最小实现：
-      let q = shapes.find(x => x.id === p.parenShapeId) || null
+      let q = shapeMap.get(p.parenShapeId!) || null
       while (q) {
         if (isCompartment(q)) return false
         const parentId = q.parenShapeId
-        q = parentId ? shapes.find(x => x.id === parentId) || null : null
+        q = parentId ? shapeMap.get(parentId) || null : null
       }
     }
     // if (!canNest(s, p, shapes)) return false
@@ -684,7 +693,7 @@ export const resolveParentAfterDrag = (
     if (delta !== 0) {
       const subtree = [s.id, ...collectDescendantIds(shapes, s.id)]
       for (const id of subtree) {
-        const node = shapes.find(x => x.id === id)!
+        const node = shapeMap.get(id)!
         const nz = ((typeof node.style?.zIndex === 'number') ? node.style!.zIndex as number : 0) + delta
         updateShape(id, { style: { ...(node.style ?? {}), zIndex: nz } as any })
       }
@@ -709,9 +718,10 @@ const pointInRect = (pt: { x: number; y: number }, r: Rect, margin = 0) =>
   pt.y <= r.y + r.height - margin
 
 const depthOf = (shapes: Shape[], id: string): number => {
+  const shapeMap = useGraphStore().shapeMap
   let d = 0
-  let p = shapes.find(s => s.id === id)?.parenShapeId ?? null
-  while (p) { d++; p = shapes.find(s => s.id === p)?.parenShapeId ?? null }
+  let p = shapeMap.get(id)?.parenShapeId ?? null
+  while (p) { d++; p = shapeMap.get(p)?.parenShapeId ?? null }
   return d
 }
 
@@ -799,7 +809,7 @@ export const expandParentToFitChildBounds = (
   updateShape: (id: string, updates: Partial<Shape>) => void,
 ): { expanded: boolean; affectedIds: string[] } => {
   // child 是 pin 时，永远不扩父，直接返回
-  const childShape = shapes.find(s => s.id === childId) || null
+  const childShape = useGraphStore().shapeMap.get(childId) || null
   if (isPinShape(childShape)) {
     return { expanded: false, affectedIds: [] }
   }
@@ -878,6 +888,8 @@ export const expandParentToFitChildBounds = (
           updateShape(parent.id, {
             bounds: { x: pX, y: ny, width: pW, height: nh },
           })
+          // 隔间扩父后也要重定位 pin/port
+          relocatePinsOnShape(parent.id, updateShape)
           expanded = true
         }
       }
@@ -896,7 +908,7 @@ export const expandParentToFitChildBounds = (
     bubbleAutoFitUp(shapes, parent.parenShapeId, updateShape)
 
     // 再看一眼，若父仍然轻微越界，则把子轻夹回去
-    const pNow = shapes.find(s => s.id === parent.id)
+    const pNow = useGraphStore().shapeMap.get(parent.id)
     if (pNow && overflowIn(pNow, placeRect) > CONTENT_EPS) {
       const clamped = clampChildIntoParent(pNow, placeRect)
       if (clamped.x !== placeRect.x || clamped.y !== placeRect.y) {
@@ -910,6 +922,49 @@ export const expandParentToFitChildBounds = (
     affectedIds: expanded ? Array.from(affected) : [],
   }
 }
+
+/**
+ * 父 bounds 变化后，将其上挂载的 pin/port 重新吸附到新的边缘。
+ * 只在位置确实变化时才调用 updateShape，避免触发多余的响应式循环。
+ */
+function relocatePinsOnShape(
+  parentId: string,
+  updateShape: Updater,
+) {
+  const store = useGraphStore()
+  const pinsSet = new Set([
+    ...(store.pinsTypes ?? []),
+    ...(store.portsTypes ?? []),
+  ])
+  if (pinsSet.size === 0) return
+
+  const parentShape = store.shapeMap.get(parentId)
+  if (!parentShape) return
+
+  const childIds = store.parentChildMap.get(parentId) ?? []
+  for (const childId of childIds) {
+    const childShape = store.shapeMap.get(childId)
+    if (!childShape) continue
+    if (!pinsSet.has(childShape.shapeKey)) continue
+
+    const pb = childShape.bounds ?? ({} as any)
+    const oldX = pb.x ?? 0
+    const oldY = pb.y ?? 0
+    const pinCenterX = oldX + (pb.width ?? 0) / 2
+    const pinCenterY = oldY + (pb.height ?? 0) / 2
+    const newPos = snapPinToParentEdge(
+      { x: pinCenterX, y: pinCenterY },
+      parentShape,
+      childShape,
+    )
+    if (Math.round(newPos.x) !== Math.round(oldX) || Math.round(newPos.y) !== Math.round(oldY)) {
+      updateShape(childId, {
+        bounds: { ...childShape.bounds, x: newPos.x, y: newPos.y },
+      })
+    }
+  }
+}
+
 /**
  * 统一判定：这个 shape 是否“禁止扩父”（pin / port）
  */

package/src/utils/contextMenuUtils.ts

@@ -263,23 +263,23 @@ export class ContextMenuUtils {
     }
 
     let pastedShapes: string[] = this.copiedShapes.map(s => s.id);
+    const currentOp = this.operationType;
 
     // 通过事件总线通知添加图元,包含操作类型
     eventBus.emit('paste-shapes', {
       shapeIds: pastedShapes,
-      operationType: this.operationType
+      operationType: currentOp
     });
 
-    // 如果是剪切操作,粘贴后清除剪切状态遮盖层
-    if (this.operationType === 'cut') {
+    if (currentOp === 'cut') {
+      // 剪切操作：粘贴一次后清除剪切遮盖层并清空剪贴板
       const graphStore = useGraphStore();
       graphStore.clearCutShapeIds();
+      this.clearClipboard();
     }
+    // 复制操作：不清空剪贴板，允许多次粘贴
 
-    // 粘贴完成后清空剪贴板（无论是复制还是剪切）
-    this.clearClipboard();
-
-    console.log('已粘贴的图元:', pastedShapes, '操作类型:', this.operationType);
+    console.log('已粘贴的图元:', pastedShapes, '操作类型:', currentOp);
   }
 
   /**

package/src/utils/dateUtils.ts

@@ -0,0 +1,160 @@
+/**
+ * 日期工具类
+ * 提供统一的日期解析、格式化和计算功能
+ */
+export class DateUtils {
+  /**
+   * 解析日期字符串为 Date 对象
+   * @param dateStr - 日期字符串，支持 ISO 格式（带 T 或空格）
+   * @returns Date 对象，解析失败返回 null
+   * @example
+   * DateUtils.parse('2024-03-05T14:30:25') // Date 对象
+   * DateUtils.parse('2024-03-05 14:30:25') // Date 对象
+   * DateUtils.parse('invalid') // null
+   */
+  static parse(dateStr: string | null | undefined): Date | null {
+    if (!dateStr) return null
+
+    // 将空格替换为 T，兼容 "YYYY-MM-DD HH:mm:ss" 和 "YYYY-MM-DDTHH:mm:ss" 两种格式
+    const normalized = dateStr.includes('T') ? dateStr : dateStr.replace(' ', 'T')
+    const date = new Date(normalized)
+
+    // 检查日期是否有效
+    return Number.isNaN(date.getTime()) ? null : date
+  }
+
+  /**
+   * 获取日期的时间戳
+   * @param dateStr - 日期字符串
+   * @returns 时间戳（毫秒），解析失败返回 null
+   * @example
+   * DateUtils.getTimestamp('2024-03-05T14:30:25') // 1709641825000
+   */
+  static getTimestamp(dateStr: string | null | undefined): number | null {
+    const date = this.parse(dateStr)
+    return date ? date.getTime() : null
+  }
+
+  /**
+   * 格式化日期为字符串
+   * @param dateStr - 日期字符串或 Date 对象
+   * @param format - 格式类型：'date' 只显示日期，'datetime' 显示日期和时间
+   * @returns 格式化后的字符串，解析失败返回原字符串
+   * @example
+   * DateUtils.format('2024-03-05T14:30:25', 'date') // '2024-03-05'
+   * DateUtils.format('2024-03-05T14:30:25', 'datetime') // '2024-03-05 14:30:25'
+   */
+  static format(
+    dateStr: string | Date | null | undefined,
+    format: 'date' | 'datetime' = 'datetime'
+  ): string {
+    if (!dateStr) return ''
+
+    const date = dateStr instanceof Date ? dateStr : this.parse(dateStr)
+    if (!date) return typeof dateStr === 'string' ? dateStr : ''
+
+    const year = date.getFullYear()
+    const month = this.pad(date.getMonth() + 1)
+    const day = this.pad(date.getDate())
+
+    if (format === 'date') {
+      return `${year}-${month}-${day}`
+    }
+
+    const hours = this.pad(date.getHours())
+    const minutes = this.pad(date.getMinutes())
+    const seconds = this.pad(date.getSeconds())
+
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+  }
+
+  /**
+   * 格式化日期为中文格式
+   * @param dateStr - 日期字符串
+   * @returns 中文格式的日期字符串
+   * @example
+   * DateUtils.formatChinese('2024-03-05') // '2024年3月5日'
+   */
+  static formatChinese(dateStr: string | null | undefined): string {
+    if (!dateStr) return ''
+
+    const date = this.parse(dateStr)
+    if (!date) return dateStr
+
+    return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
+  }
+
+  /**
+   * 数字补零（小于 10 的数字前面补 0）
+   * @param value - 数字
+   * @returns 补零后的字符串
+   * @example
+   * DateUtils.pad(5) // '05'
+   * DateUtils.pad(12) // '12'
+   */
+  static pad(value: number): string {
+    return String(value).padStart(2, '0')
+  }
+
+  /**
+   * 检查日期字符串是否有效
+   * @param dateStr - 日期字符串
+   * @returns 是否有效
+   * @example
+   * DateUtils.isValid('2024-03-05') // true
+   * DateUtils.isValid('invalid') // false
+   */
+  static isValid(dateStr: string | null | undefined): boolean {
+    return this.parse(dateStr) !== null
+  }
+
+  /**
+   * 比较两个日期的大小
+   * @param date1 - 日期1
+   * @param date2 - 日期2
+   * @returns date1 < date2 返回 -1，date1 > date2 返回 1，相等返回 0，任一无效返回 null
+   */
+  static compare(
+    date1: string | null | undefined,
+    date2: string | null | undefined
+  ): number | null {
+    const d1 = this.parse(date1)
+    const d2 = this.parse(date2)
+
+    if (!d1 || !d2) return null
+
+    const t1 = d1.getTime()
+    const t2 = d2.getTime()
+
+    if (t1 < t2) return -1
+    if (t1 > t2) return 1
+    return 0
+  }
+
+  /**
+   * 获取日期范围（最小和最大日期）
+   * @param dates - 日期字符串数组
+   * @returns { min: Date | null, max: Date | null }
+   */
+  static getRange(dates: (string | null | undefined)[]): {
+    min: Date | null
+    max: Date | null
+  } {
+    let minDate: Date | null = null
+    let maxDate: Date | null = null
+
+    for (const dateStr of dates) {
+      const date = this.parse(dateStr)
+      if (!date) continue
+
+      if (!minDate || date < minDate) {
+        minDate = date
+      }
+      if (!maxDate || date > maxDate) {
+        maxDate = date
+      }
+    }
+
+    return { min: minDate, max: maxDate }
+  }
+}

package/src/utils/diagram.ts

@@ -89,12 +89,18 @@ export const handleStyle = (pos: HandlePos, shape: Shape) => {
   };
 };
 
+/**
+ * 判断是否为画布类型（diagram 或 gantt）
+ */
+const isCanvasShape = (shape: Shape) =>
+  shape.shapeType === ShapeConfig.SHAPE_TYPE || shape.shapeType === 'gantt' || shape.shapeType === 'table' || shape.shapeType === 'matrix';
+
 /**
  * 获取画布形状
  */
 export const getCanvasShape = () => {
   const graphStore = useGraphStore();
-  return graphStore.shapes.find(shape => shape.shapeType === ShapeConfig.SHAPE_TYPE);
+  return graphStore.shapes.find(isCanvasShape);
 };
 
 /**
@@ -104,7 +110,7 @@ export const calculateShapesBounds = () => {
   const graphStore = useGraphStore();
   // 过滤掉画布本身，只计算子图元
   const childShapes = graphStore.shapes.filter(
-    (shape) => shape.shapeType !== ShapeConfig.SHAPE_TYPE
+    (shape) => !isCanvasShape(shape)
   );
 
   if (childShapes.length === 0) return null;
@@ -136,9 +142,7 @@ export const calculateShapesBounds = () => {
 export const adjustCanvasToFitAllShapes = () => {
   const graphStore = useGraphStore();
   // 获取画布形状
-  const canvas = graphStore.shapes.find(
-    (shape) => shape.shapeType === ShapeConfig.SHAPE_TYPE
-  );
+  const canvas = graphStore.shapes.find(isCanvasShape);
 
   if (!canvas || !canvas.bounds) return;
 
@@ -190,9 +194,7 @@ export const adjustCanvasToFitAllShapes = () => {
  * */
 const ensureMinimumCanvasSize = () => {
   const graphStore = useGraphStore();
-  const canvas = graphStore.shapes.find(
-    (shape) => shape.shapeType === ShapeConfig.SHAPE_TYPE
-  );
+  const canvas = graphStore.shapes.find(isCanvasShape);
 
   if (!canvas || !canvas.bounds) return;
 

package/src/utils/drag.ts

@@ -31,9 +31,10 @@ export const buildDragSnapshot = (
   shapes: Shape[],
   ids: string[],
 ) => {
+  const shapeMap = useGraphStore().shapeMap
   const dragBase: Record<string, Rect> = {}
   ids.forEach(id => {
-    const s = shapes.find(x => x.id === id); if (!s) return
+    const s = shapeMap.get(id); if (!s) return
     const b = getBounds(s)
     dragBase[id] = { x: b.x, y: b.y, width: b.width, height: b.height }
   })
@@ -61,7 +62,7 @@ export const stepSingleDrag = (
   constrainEdges: { left?: boolean; top?: boolean; right?: boolean; bottom?: boolean },
   hitPointer?: { x: number; y: number },
 ) => {
-  const s = shapes.find(x => x.id === id); if (!s) return { ghost: {}, hover: null }
+  const s = useGraphStore().shapeMap.get(id); if (!s) return { ghost: {}, hover: null }
   const base = dragBase[id]; if (!base) return { ghost: {}, hover: null }
   const container = getDiagramRect(shapes)
 
@@ -120,14 +121,14 @@ export const stepGroupDrag = (
   // 构建整组 ghost
   const ghost: Record<string, Rect> = {}
   for (const id of draggingIds) {
-    const s = shapes.find(x => x.id === id); if (!s) continue
+    const s = useGraphStore().shapeMap.get(id); if (!s) continue
     const b = getBounds(s)
     ghost[id] = { x: b.x + dx, y: b.y + dy, width: b.width, height: b.height }
   }
 
   // —— hover 统一改为“指针命中 topmost 容器”
   // 用主拖动项获取 diagramId（也可以存你当前图的 id）
-  const priShape = shapes.find(x => x.id === primaryId)
+  const priShape = useGraphStore().shapeMap.get(primaryId)
   const diagramId = priShape?.diagramId || ''
 
   const hoverShape = pickContainerByPointerTopmost(
@@ -159,7 +160,7 @@ export const commitDrag = (
 
   // 仅把“参与拖拽的节点”的 ghost 写回；不处理父子关系，也不扩父或夹回
   for (const id of draggingIds) {
-    const s = shapes.find(x => x.id === id)
+    const s = useGraphStore().shapeMap.get(id)
     const r = ghost[id] // 参与拖拽的 id 都应当在 ghost 里
     if (!s || !r) continue