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

package/src/utils/rafThrottle.ts

@@ -0,0 +1,162 @@
+/**
+ * RAF (requestAnimationFrame) 节流工具类
+ * 用于优化高频事件（如 mousemove、scroll 等）的性能
+ * 确保在浏览器重绘前只执行一次回调，避免不必要的计算
+ */
+export class RAFThrottle {
+  private rafId: number | null = null
+  private lastArgs: any[] = []
+  private isPending = false
+
+  /**
+   * 节流执行函数
+   * @param fn 要执行的函数
+   * @returns 节流后的函数
+   */
+  throttle<T extends (...args: any[]) => any>(fn: T): T {
+    return ((...args: Parameters<T>) => {
+      // 保存最新的参数
+      this.lastArgs = args
+
+      // 如果已经有待执行的 RAF，直接返回
+      if (this.isPending) {
+        return
+      }
+
+      this.isPending = true
+
+      // 请求动画帧
+      this.rafId = requestAnimationFrame(() => {
+        this.isPending = false
+        this.rafId = null
+
+        // 使用最新的参数执行函数
+        fn(...this.lastArgs)
+      })
+    }) as T
+  }
+
+  /**
+   * 取消待执行的 RAF
+   */
+  cancel(): void {
+    if (this.rafId !== null) {
+      cancelAnimationFrame(this.rafId)
+      this.rafId = null
+      this.isPending = false
+    }
+  }
+
+  /**
+   * 立即执行待处理的回调（如果有）
+   */
+  flush(): void {
+    if (this.isPending && this.rafId !== null) {
+      cancelAnimationFrame(this.rafId)
+      this.rafId = null
+      this.isPending = false
+    }
+  }
+}
+
+/**
+ * 创建 RAF 节流实例
+ * @returns RAFThrottle 实例
+ */
+export function createRAFThrottle(): RAFThrottle {
+  return new RAFThrottle()
+}
+
+/**
+ * RAF 防抖工具类
+ * 延迟执行函数，但在延迟期间如果有新调用，则重新计时
+ * 使用 requestAnimationFrame 确保在浏览器重绘前执行
+ */
+export class RAFDebounce {
+  private rafId: number | null = null
+  private delay: number
+  private timer: ReturnType<typeof setTimeout> | null = null
+  private lastArgs: any[] = []
+  private isPending = false
+
+  constructor(delay: number = 0) {
+    this.delay = delay
+  }
+
+  /**
+   * 防抖执行函数
+   * @param fn 要执行的函数
+   * @returns 防抖后的函数
+   */
+  debounce<T extends (...args: any[]) => any>(fn: T): T {
+    return ((...args: Parameters<T>) => {
+      // 保存最新的参数
+      this.lastArgs = args
+
+      // 清除之前的定时器
+      if (this.timer !== null) {
+        clearTimeout(this.timer)
+      }
+
+      // 设置新的定时器
+      this.timer = setTimeout(() => {
+        this.timer = null
+
+        // 如果已经有待执行的 RAF，直接返回
+        if (this.isPending) {
+          return
+        }
+
+        this.isPending = true
+
+        // 请求动画帧
+        this.rafId = requestAnimationFrame(() => {
+          this.isPending = false
+          this.rafId = null
+
+          // 使用最新的参数执行函数
+          fn(...this.lastArgs)
+        })
+      }, this.delay)
+    }) as T
+  }
+
+  /**
+   * 取消待执行的 RAF 和定时器
+   */
+  cancel(): void {
+    if (this.timer !== null) {
+      clearTimeout(this.timer)
+      this.timer = null
+    }
+    if (this.rafId !== null) {
+      cancelAnimationFrame(this.rafId)
+      this.rafId = null
+      this.isPending = false
+    }
+  }
+
+  /**
+   * 立即执行待处理的回调（如果有）
+   */
+  flush(): void {
+    if (this.timer !== null) {
+      clearTimeout(this.timer)
+      this.timer = null
+    }
+    if (this.isPending && this.rafId !== null) {
+      cancelAnimationFrame(this.rafId)
+      this.rafId = null
+      this.isPending = false
+    }
+  }
+}
+
+/**
+ * 创建 RAF 防抖实例
+ * @param delay 延迟时间（毫秒）
+ * @returns RAFDebounce 实例
+ */
+export function createRAFDebounce(delay: number = 0): RAFDebounce {
+  return new RAFDebounce(delay)
+}

package/src/utils/workerManager.ts

@@ -0,0 +1,335 @@
+// workerManager.ts - Web Worker manager for handling edge calculations
+
+import type { Shape } from '../types';
+
+interface WorkerMessage {
+  type: string;
+  data: any;
+  id: number;
+}
+
+interface WorkerResponse {
+  id: number;
+  result: any;
+  error?: string;
+}
+
+interface WorkerTask {
+  resolve: (value: any) => void;
+  reject: (reason: any) => void;
+}
+
+export class WorkerManager {
+  private worker: Worker | null = null;
+  private taskQueue: Map<number, WorkerTask> = new Map();
+  private nextTaskId = 1;
+  private isInitialized = false;
+  private initializationPromise: Promise<void> | null = null;
+
+  /**
+   * 各操作类型的版本号，用于竞态控制。
+   * 每次发起同类型请求时递增，回调中只采纳最新版本的结果。
+   */
+  private versionMap: Map<string, number> = new Map();
+
+  /**
+   * Initialize the Web Worker
+   */
+  initialize(): Promise<void> {
+    if (this.isInitialized) {
+      return Promise.resolve();
+    }
+
+    if (this.initializationPromise) {
+      return this.initializationPromise;
+    }
+
+    this.initializationPromise = new Promise((resolve, reject) => {
+      try {
+        this.worker = new Worker(new URL('./edgeWorker.ts', import.meta.url), { type: 'module' });
+
+        this.worker.addEventListener('message', (event: MessageEvent<WorkerResponse>) => {
+          this.handleWorkerMessage(event.data);
+        });
+
+        this.worker.addEventListener('error', (error: ErrorEvent) => {
+          console.error('Worker error:', error);
+          reject(error);
+        });
+
+        this.isInitialized = true;
+        resolve();
+      } catch (error) {
+        console.error('Failed to initialize worker:', error);
+        reject(error);
+      }
+    });
+
+    return this.initializationPromise;
+  }
+
+  /**
+   * Handle messages from the worker
+   */
+  private handleWorkerMessage(response: WorkerResponse): void {
+    const { id, result, error } = response;
+    const task = this.taskQueue.get(id);
+
+    if (task) {
+      this.taskQueue.delete(id);
+      if (error) {
+        task.reject(new Error(error));
+      } else {
+        task.resolve(result);
+      }
+    }
+  }
+
+  /**
+   * 递增并返回指定操作类型的版本号
+   */
+  private bumpVersion(opType: string): number {
+    const next = (this.versionMap.get(opType) ?? 0) + 1;
+    this.versionMap.set(opType, next);
+    return next;
+  }
+
+  /**
+   * 检查版本号是否仍然是最新的
+   */
+  isLatestVersion(opType: string, version: number): boolean {
+    return (this.versionMap.get(opType) ?? 0) === version;
+  }
+
+  /**
+   * Send a message to the worker and return a promise for the result
+   */
+  private sendMessage(type: string, data: any): Promise<any> {
+    return new Promise((resolve, reject) => {
+      if (!this.worker || !this.isInitialized) {
+        reject(new Error('Worker not initialized'));
+        return;
+      }
+
+      const taskId = this.nextTaskId++;
+      this.taskQueue.set(taskId, { resolve, reject });
+
+      const message: WorkerMessage = {
+        type,
+        data,
+        id: taskId
+      };
+
+      try {
+        this.worker.postMessage(message);
+      } catch (error) {
+        this.taskQueue.delete(taskId);
+        reject(error);
+      }
+    });
+  }
+
+  /**
+   * 只提取 Worker 需要的最小字段，减少序列化开销
+   * 使用展开运算符确保所有嵌套对象都是纯 JS 对象（去除 Vue Proxy）
+   */
+  private minifyShape(shape: Shape): any {
+    const bounds = shape.bounds
+      ? { x: shape.bounds.x, y: shape.bounds.y, width: shape.bounds.width, height: shape.bounds.height }
+      : undefined;
+    return {
+      id: shape.id,
+      shapeType: shape.shapeType,
+      bounds,
+      sourceId: shape.sourceId,
+      targetId: shape.targetId,
+      modelId: shape.modelId,
+      shapeKey: shape.shapeKey,
+      direction: shape.direction,
+      parenShapeId: shape.parenShapeId,
+      waypointId: (shape as any).waypointId,
+    };
+  }
+
+  /**
+   * 将可能来自 Vue ref/reactive 的点坐标转换为普通对象，避免 postMessage 触发 DataCloneError
+   */
+  private minifyPoint(
+    point: { x?: number; y?: number } | null | undefined
+  ): { x: number; y: number } | undefined {
+    if (!point) return undefined;
+
+    return {
+      x: Number(point.x ?? 0),
+      y: Number(point.y ?? 0),
+    };
+  }
+
+  /**
+   * 只提取与 changedIds 相关的 edge，减少传输量
+   */
+  private extractRelatedEdges(
+    edgeIndex: Map<string, Shape[]> | undefined,
+    changedIds: string[]
+  ): Shape[] | undefined {
+    if (!edgeIndex) return undefined;
+    const seen = new Set<string>();
+    const result: Shape[] = [];
+    for (const id of changedIds) {
+      const edges = edgeIndex.get(id);
+      if (edges) {
+        for (const e of edges) {
+          if (!seen.has(e.id)) {
+            seen.add(e.id);
+            result.push(e);
+          }
+        }
+      }
+    }
+    return result;
+  }
+
+  /**
+   * Update related edges endpoints
+   * 返回 { version, result } 以便调用方判断竞态
+   */
+  async updateRelatedEdges(
+    shapes: Shape[],
+    changedIds: string[],
+    edgeIndex?: Map<string, Shape[]>,
+    shapeMapIndex?: Map<string, Shape>
+  ): Promise<{ version: number; result: Shape[] }> {
+    await this.initialize();
+
+    const version = this.bumpVersion('updateRelatedEdges');
+
+    // 只传相关的 edge 和它们引用的 source/target shape，而非全量 shapes
+    const relatedEdges = this.extractRelatedEdges(edgeIndex, changedIds);
+    const neededShapeIds = new Set<string>(changedIds);
+    if (relatedEdges) {
+      for (const e of relatedEdges) {
+        if (e.sourceId) neededShapeIds.add(e.sourceId);
+        if (e.targetId) neededShapeIds.add(e.targetId);
+      }
+    }
+
+    const minShapes = relatedEdges
+      ? Array.from(neededShapeIds)
+          .map(id => shapeMapIndex?.get(id))
+          .filter(Boolean)
+          .map(s => this.minifyShape(s!))
+          .concat(relatedEdges.map(e => this.minifyShape(e)))
+      : shapes.map(s => this.minifyShape(s));
+
+    // 构建精简的 shapeMap（只包含需要的）
+    const shapeMapData: Record<string, any> = {};
+    if (shapeMapIndex) {
+      for (const id of neededShapeIds) {
+        const s = shapeMapIndex.get(id);
+        if (s) shapeMapData[id] = this.minifyShape(s);
+      }
+    }
+
+    // 构建精简的 edgeIndex
+    let edgeIndexData: Record<string, any[]> | undefined;
+    if (edgeIndex) {
+      edgeIndexData = {};
+      for (const id of changedIds) {
+        const edges = edgeIndex.get(id);
+        if (edges) {
+          edgeIndexData[id] = edges.map(e => this.minifyShape(e));
+        }
+      }
+    }
+
+    const result = await this.sendMessage('updateRelatedEdges', {
+      shapes: minShapes,
+      changedIds,
+      edgeIndex: edgeIndexData,
+      shapeMapIndex: shapeMapData
+    });
+
+    return { version, result };
+  }
+
+  /**
+   * Initialize all edge endpoints
+   */
+  async initializeAllEdgeEndpoints(
+    shapes: Shape[],
+    shapeMapIndex?: Map<string, Shape>
+  ): Promise<Shape[]> {
+    await this.initialize();
+
+    const minShapes = shapes.map(s => this.minifyShape(s));
+    const shapeMapData = shapeMapIndex
+      ? Object.fromEntries(
+          Array.from(shapeMapIndex.entries()).map(([k, v]) => [k, this.minifyShape(v)])
+        )
+      : undefined;
+
+    return this.sendMessage('initializeAllEdgeEndpoints', {
+      shapes: minShapes,
+      shapeMapIndex: shapeMapData
+    });
+  }
+
+  /**
+   * Complete connection operation
+   */
+  async completeConnection(
+    sourceShape: Shape | undefined,
+    targetShape: Shape,
+    clickPoint: { x: number; y: number },
+    currentConnectPoint: { x: number; y: number },
+    shapes: Shape[] = []
+  ): Promise<any> {
+    await this.initialize();
+
+    return this.sendMessage('completeConnection', {
+      sourceShape: sourceShape ? this.minifyShape(sourceShape) : undefined,
+      targetShape: this.minifyShape(targetShape),
+      clickPoint: this.minifyPoint(clickPoint),
+      currentConnectPoint: this.minifyPoint(currentConnectPoint),
+      shapes: shapes.map(s => this.minifyShape(s))
+    });
+  }
+
+  /**
+   * Find nearest connect point
+   */
+  async findNearestConnectPoint(
+    mousePos: { x: number; y: number },
+    shape: Shape | undefined
+  ): Promise<any> {
+    await this.initialize();
+
+    return this.sendMessage('findNearestConnectPoint', {
+      mousePos: this.minifyPoint(mousePos),
+      shape: shape ? this.minifyShape(shape) : undefined
+    });
+  }
+
+  /**
+   * Terminate the worker
+   */
+  terminate(): void {
+    if (this.worker) {
+      this.worker.terminate();
+      this.worker = null;
+      this.isInitialized = false;
+      this.taskQueue.clear();
+      this.versionMap.clear();
+    }
+  }
+
+  /**
+   * Get worker status
+   */
+  isWorkerInitialized(): boolean {
+    return this.isInitialized;
+  }
+}
+
+// Create a singleton instance
+export const workerManager = new WorkerManager();

package/src/view/graph.vue

@@ -4,7 +4,7 @@
     <div class="diagram-content" ref="diagramContentRef" @wheel="handleWheel">
       <div class="shapes-container" v-if="shapes.length > 0">
         <component v-for="shape in shapes" :key="shape.id"
-          v-memo="[shape.id, shape.bounds, graphStore.selectedShape?.id === shape.id]" :is="getShapeComponent(shape)"
+          v-memo="[shape.id, shape.bounds?.x, shape.bounds?.y, shape.bounds?.width, shape.bounds?.height, shape.name, shape.parenShapeId, shape.style?.zIndex, shape.waypointId, graphStore.selectedShape?.id === shape.id]" :is="getShapeComponent(shape)"
           :shape="shape" :style="getShapeStyle(shape)" @name-click="handleNameClick" @shape-click="handleShapeClick"
           @edge-click="handleEdgeClick"
           :is-selected="graphStore.selectedShape?.id === shape.id && shape.shapeType === 'edge'" class="shape-element"
@@ -13,7 +13,8 @@
       </div>
 
       <!-- 剪切状态遮盖层 - 使用 SVG 渲染，性能更优 -->
-      <svg v-if="cutShapeBounds.length > 0" class="cut-overlay-svg">
+      <svg v-if="cutShapeBounds.length > 0" class="cut-overlay-svg"
+        :style="{ width: diagramBounds ? `${diagramBounds.width}px` : '100%', height: diagramBounds ? `${diagramBounds.height}px` : '100%' }">
         <rect v-for="bounds in cutShapeBounds" :key="bounds.id"
           :x="bounds.x"
           :y="bounds.y"
@@ -22,8 +23,8 @@
           fill="rgba(255, 255, 255, 0.6)" />
       </svg>
 
-      <!-- 交互层 - 整合了连接层逻辑 -->
-      <InteractionLayer v-if="diagramBounds" ref="interactionLayerRef" :connect-shape-data="connectShapeData"
+      <!-- 交互层 - 整合了连接层逻辑（甘特图模式下不渲染） -->
+      <InteractionLayer v-if="diagramBounds && !isGanttMode" ref="interactionLayerRef" :connect-shape-data="connectShapeData"
         :diagram-bounds="diagramBounds" :style="{
           width: `${(diagramBounds?.width ?? 0) - 10}px`,
           height: `${(diagramBounds?.height ?? 0) - 10}px`,
@@ -38,7 +39,6 @@
         :packages="props.packages" :diagram="props.diagram" :tagged-value-labels="props.taggedValueLabels"
         @action-button-add="handleActionButtonAdd" />
     </div>
-
     <!-- 所在图表 -->
     <DiagramListTooltip :visible="tooltipVisible" :x="tooltipX" :y="tooltipY" :current-diagram-id="currentDiagramId"
       @close="tooltipVisible = false" :diagram-location-data="chartLocationData || []" />
@@ -64,13 +64,16 @@ import Diagram from '../components/Shape/Diagram.vue'
 import ActivityAction from '../components/Shape/ActivityAction.vue'
 import Pin from '../components/Pin/Pin.vue'
 import Port from '../components/Pin/Port.vue'
+import Gantt from '../components/Gantt/Gantt.vue'
 import { registerShapes } from "../render/shape-registry";
 import { getShapeComponent, getShapeStyle, clearEdgeStyleCache } from "../render/shape-renderer";
-import { ShapeConfig } from '../utils/diagram'
+import { ShapeConfig, adjustCanvasToFitAllShapes } from '../utils/diagram'
 import { setCompartmentZones, buildZones, setTaggedValueLabelsCache, setPackageTypesCache } from '../utils/compartment'
 import { eventBus } from "../store";
 import { guardOperate } from "../utils/license-guard"
 import DiagramListTooltip from '../components/DiagramListTooltip/DiagramListTooltip.vue';
+import Table from '../components/Table/Table.vue'
+import Matrix from '../components/Matrix/Matrix.vue';
 
 registerShapes({
   StrategicTaxonomyDiagram,
@@ -84,7 +87,10 @@ registerShapes({
   ActivityAction,
   Diagram,
   Pin,
-  Port
+  Port,
+  Gantt,
+  Table,
+  Matrix
 })
 const interactionLayerRef = ref<InstanceType<typeof InteractionLayer> | null>(null)
 const diagramContentRef = ref<HTMLDivElement | null>(null) // 画布内容区域ref
@@ -218,9 +224,18 @@ const onCompartmentMetrics = (
   const z = buildZones(shape, m)
   setCompartmentZones(shape.id, z)
 }
-// 获取StrategicTaxonomyDiagram的bounds
+
+// 是否为甘特图模式
+const isGanttMode = computed(() => {
+  return shapes.value.some(s => s.shapeType === 'gantt' || s.shapeType === 'table' || s.shapeType === 'matrix')
+})
+
+// 获取画布（diagram）的 bounds，仅用于 InteractionLayer 定位和剪切遮盖层尺寸
+// 甘特图/表格/矩阵等铺满型画布也需取对应 shape 的 bounds
 const diagramBounds = computed(() => {
-  const diagram = shapes.value.find(s => s.shapeType === ShapeConfig.SHAPE_TYPE)
+  const diagram = shapes.value.find(s =>
+    s.shapeType === ShapeConfig.SHAPE_TYPE || s.shapeType === 'gantt' || s.shapeType === 'table' || s.shapeType === 'matrix'
+  )
   return diagram?.bounds || null
 })
 
@@ -243,6 +258,13 @@ const handleNameClick = (shape: Shape, event: MouseEvent) => {
 // 处理图形点击事件
 const handleShapeClick = (shape: Shape, event: MouseEvent) => {
   return guardOperate(async () => {
+    if (
+      props.connectShapeData?.sourceId &&
+      interactionLayerRef.value?.tryCompleteConnectionFromShapeClick?.(shape)
+    ) {
+      return
+    }
+
     graphStore.selectShape(shape)
   })
 }
@@ -353,19 +375,15 @@ const handleWheel = (event: WheelEvent) => {
 }
 
 const updateShapes = (shapes: Shape[]) => {
-  shapes.sort((a, b) => {
-    if (a.shapeType === 'diagram') return -1
-    if (b.shapeType === 'diagram') return 1
-    return 0
-  })
   clearEdgeStyleCache() // 批量更新时清空 edge 样式缓存，避免旧数据残留
   // graphStore.updateShapes(shapes)
    graphStore.shapes=[]
   graphStore.updateShapes(shapes, 'replace');
   // 在图形批量更新后（通常是从后端加载数据），初始化所有连线的端点
   // 确保连线不会横跨图元，而是从合适的位置连接
-  nextTick(() => {
-    graphStore.initializeAllEdgeEndpoints()
+  nextTick(async () => {
+    await graphStore.initializeAllEdgeEndpoints()
+    adjustCanvasToFitAllShapes()
   })
 }
 
@@ -380,8 +398,6 @@ watch(() => props.addShapeData, async (newVal, oldVal) => {
   graphStore.addShape(newVal)
   graphStore.selectShape(newVal)
   eventBus.emit('addShape:ok')
-  // graphStore.addShape(newVal)
-  // resShape.value = newVal
 },)
 function sweepShapesWithInert() {
   const arr = graphStore.shapes as any[]
@@ -460,18 +476,23 @@ watch(
     immediate: true,
   }
 )
+const handleKeyDown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape') {
+    graphStore.clearSelection()
+    graphStore.selectedIds = []
+  }
+}
+
 onMounted(() => {
   initShapes()
-  document.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape') {
-      graphStore.clearSelection()
-      graphStore.selectedIds = []
-    }
-  });
+  document.addEventListener('keydown', handleKeyDown);
 
   // 监听所在图表弹窗位置信息事件
   eventBus.on('locate-chart-position', handleLocateChartPosition)
 
+  // 初始化画布大小
+  nextTick(adjustCanvasToFitAllShapes)
+
   // ========== 视口裁剪优化:初始化视口 ==========
   nextTick(() => {
     updateViewport() // 初始化视口边界
@@ -486,12 +507,7 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-  document.removeEventListener('keydown', (e) => {
-    if (e.key === 'Escape') {
-      graphStore.clearSelection()
-      graphStore.selectedIds = []
-    }
-  });
+  document.removeEventListener('keydown', handleKeyDown);
 
   // 移除所在图表弹窗位置信息事件监听器
   eventBus.off('locate-chart-position', handleLocateChartPosition)
@@ -572,9 +588,7 @@ defineExpose({
   position: absolute;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
   pointer-events: none;
   z-index: 998;
 }
-</style>
+</style>