@mx-sose-front/mx-sose-graph 1.1.3 → 1.1.5

package/src/utils/containers.ts

@@ -70,22 +70,26 @@ export const getContentRect = (parent: Shape) => {
 
 /** 判断 childId 是否是 ancestorId 的后代 */
 export const isDescendant = (shapes: Shape[], childId: string, ancestorId: string) => {
-  let p = shapes.find(s => s.id === childId)?.parenShapeId ?? null
+  const graphStore = useGraphStore();
+  const byId = graphStore.shapeMap;
+  
+  let p = byId.get(childId)?.parenShapeId ?? null
   while (p) {
     if (p === ancestorId) return true
-    p = shapes.find(s => s.id === p)?.parenShapeId ?? null
+    p = byId.get(p)?.parenShapeId ?? null  // ✅ O(1) 查找,替代 find()
   }
   return false
 }
 
-/** 收集整棵子树（仅 id） */
+/** 收集整棵子树(仅 id) */
 export const collectDescendantIds = (shapes: Shape[], parentId: string): string[] => {
+  const graphStore = useGraphStore();
   const out: string[] = []
   const stack = [parentId]
   while (stack.length) {
     const id = stack.pop()!
-    const kids = shapes.filter(s => s.parenShapeId === id)
-    kids.forEach(k => { out.push(k.id); stack.push(k.id) })
+    const childIds = graphStore.parentChildMap.get(id) || []
+    childIds.forEach(childId => { out.push(childId); stack.push(childId) })
   }
   return out
 }
@@ -156,9 +160,12 @@ export const ensureParentFitsChildren = (
   updateShape: Updater,
   overrideRects?: Record<string, Rect>
 ) => {
-  const kids = shapes.filter(
-    s => s.parenShapeId === parent.id && !isPinShape(s)
-  )
+  const graphStore = useGraphStore();
+  const childIds = graphStore.parentChildMap.get(parent.id) || [];
+  const kids = childIds
+    .map(id => graphStore.shapeMap.get(id))
+    .filter(s => s && !isPinShape(s)) as Shape[];
+  
   if (kids.length === 0) return
 
   const pad = readPadding(parent)
@@ -320,7 +327,7 @@ export const childrenUnionBounds = (
   parentId: string,
   overrideRects?: Record<string, Rect>
 ) => {
- const kids = shapes.filter(
+  const kids = shapes.filter(
     s => s.parenShapeId === parentId && !isPinShape(s)
   )
   if (!kids.length) return null
@@ -512,7 +519,7 @@ export const hasDraggedAncestor = (
  * - 组拖后代：禁止 reparent；只夹回/必要才扩父
  * - 返回：是否发生 reparent（可用于统计/调试）
  */
-const DETACH_THRESHOLD = 0.4   // 覆盖率低于该阈值就脱离，不再扩父
+const DETACH_THRESHOLD = 0.01  // 覆盖率低于该阈值就脱离，不再扩父
 /** 哪些图元一旦挂上父，就不允许脱离父（拖动时只能让父扩容） */
 export const isStickyChild = (s: Shape): boolean => {
   if (!Object.prototype.hasOwnProperty.call(s, 'isMovableComparents')) {
@@ -547,6 +554,13 @@ export const resolveParentAfterDrag = (
     if (!curParent) { updateShape(s.id, { bounds: finalRect }); return false }
     //  子就地落位（不回弹/不clamp，避免跳动）
     updateShape(s.id, { bounds: finalRect })
+
+    // 关键修复：拖动父图元时，子 pin 只应该“跟随平移”，不应被当作普通子元素去做
+    // overflow/clamp/扩父（这些会把 pin 夹进内容区，常表现为被重算到父图元下方）。
+    if (isPinShape(s)) {
+      return false
+    }
+
     if (isCompartment(curParent)) {
       // 如果父是隔间，拖动时父移动了，需要刷新隔间内部布局
       ensureCompartmentAfterParentMoved(shapes, curParent, updateShape) // 新增调用

package/src/utils/contextMenuUtils.ts

@@ -1,50 +1,15 @@
-import { ref, type Ref } from 'vue';
+import { type Ref } from 'vue';
 import { eventBus } from '../store';
+import { useGraphStore } from '../store/graphStore';
 import _ from 'lodash';
-import { getUuid } from '../utils/index';
-
-// 菜单位置接口
-export interface MenuPosition {
-  x: number;
-  y: number;
-}
-
-// 菜单项配置接口
-export interface MenuItemConfig {
-  id: string;
-  label: string;
-  icon?: string;
-  disabled?: boolean;
-  divider?: boolean;
-  handler?: () => void;
-  submenu?: MenuItemConfig[];
-}
-
-// 菜单配置接口
-export interface MenuConfig {
-  items: MenuItemConfig[];
-  width?: number;
-  itemHeight?: number;
-  padding?: number;
-  maxVisibleItems?: number;
-  safeMargin?: number;
-}
-
-// 默认菜单配置
-const DEFAULT_MENU_CONFIG: Required<MenuConfig> = {
-  items: [],
-  width: 180,
-  itemHeight: 36,
-  padding: 6,
-  maxVisibleItems: 8,
-  safeMargin: 10
-};
 
 // 右键菜单工具函数
 export class ContextMenuUtils {
   // 用于存储复制的图元
   private static copiedShapes: any[] = [];
-  
+  // 用于标记操作类型：'copy' 或 'cut'
+  private static operationType: 'copy' | 'cut' = 'copy';
+
   /**
    * 处理右键菜单点击事件
    * @param event 鼠标事件
@@ -63,7 +28,8 @@ export class ContextMenuUtils {
     shapes: any[],
     selectShape?: (shape: any) => void,
     isDragging?: boolean,
-    isResizing?: boolean
+    isResizing?: boolean,
+    scale: number = 1
   ): any | null {
     // 如果图元正在移动或缩放，则不显示菜单
     if (isDragging || isResizing) {
@@ -72,8 +38,8 @@ export class ContextMenuUtils {
 
     event.preventDefault();
 
-    // 获取点击位置
-    const point = ContextMenuUtils.toLocalPoint(event, layerRef.value);
+    // 获取点击位置，考虑缩放比例
+    const point = ContextMenuUtils.toLocalPoint(event, layerRef.value, scale);
 
     // 使用命中测试找到点击的图元
     const hit = pickTarget(shapes, point);
@@ -91,16 +57,18 @@ export class ContextMenuUtils {
 
   /**
    * 将鼠标事件坐标转换为本地坐标
+   * 注意：需要考虑画布的缩放比例
    */
-  static toLocalPoint(event: MouseEvent, layerRef: HTMLElement | null): { x: number; y: number } {
+  static toLocalPoint(event: MouseEvent, layerRef: HTMLElement | null, scale: number = 1): { x: number; y: number } {
     if (!layerRef) {
       return { x: event.clientX, y: event.clientY };
     }
 
     const rect = layerRef.getBoundingClientRect();
+    // 计算本地坐标并除以缩放比例
     return {
-      x: event.clientX - rect.left,
-      y: event.clientY - rect.top
+      x: (event.clientX - rect.left) / scale,
+      y: (event.clientY - rect.top) / scale
     };
   }
 
@@ -116,9 +84,9 @@ export class ContextMenuUtils {
    * 计算菜单位置（避免超出屏幕边界）
    */
   static calculateMenuPosition(
-    x: number, 
-    y: number, 
-    menuWidth: number = 180, 
+    x: number,
+    y: number,
+    menuWidth: number = 180,
     menuHeight: number = 300,
     safeMargin: number = 10
   ): { x: number; y: number } {
@@ -186,21 +154,70 @@ export class ContextMenuUtils {
     this.copiedShapes = _.cloneDeep(shapes);
     console.log('已复制的图元:', this.copiedShapes);
   }
-  
+
   /**
    * 获取复制的图元
    */
   static getCopiedShapes(): any[] {
     return this.copiedShapes;
   }
-  
+
+  /**
+   * 清除剪切状态
+   * 当按 ESC 取消或其他需要清除剪切状态的场景调用
+   */
+  static clearCutState() {
+    if (this.operationType === 'cut') {
+      const graphStore = useGraphStore();
+      graphStore.clearCutShapeIds();
+    }
+    this.copiedShapes = [];
+    this.operationType = 'copy';
+    
+    // 清空 GraphStore 中的剪贴板数量
+    const graphStore = useGraphStore();
+    graphStore.setCopiedShapesCount(0);
+  }
+
+  /**
+   * 收集图元及其所有子图元的 ID
+   * @param shapes 要收集的图元数组
+   * @returns 所有图元 ID 的数组（包括子图元）
+   */
+  private static collectShapeAndChildrenIds(shapes: any[]): string[] {
+    const graphStore = useGraphStore();
+    const idsToCollect: string[] = [];
+
+    // 收集所有需要的图元 ID (包括父图元和子图元)
+    shapes.forEach(shape => {
+      idsToCollect.push(shape.id);
+
+      // 使用父子关系索引快速查找子图元 (O(1) 查询)
+      const childIds = graphStore.parentChildMap.get(shape.id) || [];
+      childIds.forEach(childId => {
+        idsToCollect.push(childId);
+      });
+    });
+
+    return idsToCollect;
+  }
+
   /**
    * 处理复制
    */
-  static handleCopy(target: any) {
-    if (target) {
-      this.setCopiedShapes([target]);
-      eventBus.emit('copy-shape', target);
+  static handleCopy(targets: any[]) {
+    if (targets && targets.length > 0) {
+      // 如果之前是剪切状态，先清除剪切遮盖层
+      if (this.operationType === 'cut') {
+        const graphStore = useGraphStore();
+        graphStore.clearCutShapeIds();
+      }
+      this.operationType = 'copy';
+      this.setCopiedShapes(targets);
+      
+      // 更新 GraphStore 中的剪贴板数量
+      const graphStore = useGraphStore();
+      graphStore.setCopiedShapesCount(targets.length);
     }
   }
 
@@ -211,45 +228,46 @@ export class ContextMenuUtils {
     if (this.copiedShapes.length === 0) {
       return;
     }
-    
-    // 设置粘贴位置（画布左上角50像素处）
-    const pasteX = 50;
-    const pasteY = 50;
-    
-    // 为每个复制的图元创建新的副本
-    const pastedShapes: any[] = [];
-    
-    this.copiedShapes.forEach(shape => {
-      // 深拷贝图元
-      const newShape = _.cloneDeep(shape);
-      
-      // 生成新的ID
-      newShape.id = getUuid();
-      
-      // 更新位置到画布左上角50像素处
-      if (newShape.bounds) {
-        newShape.bounds.x = pasteX;
-        newShape.bounds.y = pasteY;
-      }
-      
-      pastedShapes.push(newShape);
+
+    let pastedShapes: string[] = this.copiedShapes.map(s => s.id);
+
+    // 通过事件总线通知添加图元,包含操作类型
+    eventBus.emit('paste-shapes', {
+      shapeIds: pastedShapes,
+      operationType: this.operationType
     });
-    
-    // 通过事件总线通知添加图元
-    eventBus.emit('paste-shapes', pastedShapes);
-    
-    // 通过事件总线通知选中新粘贴的图元
-    eventBus.emit('select-shapes', pastedShapes.map(s => s.id));
-    
-    console.log('已粘贴的图元:', pastedShapes);
+
+    // 如果是剪切操作,粘贴后清除剪切状态遮盖层和剪贴板
+    if (this.operationType === 'cut') {
+      const graphStore = useGraphStore();
+      graphStore.clearCutShapeIds();
+      
+      // 剪切粘贴后清空剪贴板数量
+      graphStore.setCopiedShapesCount(0);
+      this.copiedShapes = [];
+      this.operationType = 'copy';
+    }
+
+    console.log('已粘贴的图元:', pastedShapes, '操作类型:', this.operationType);
   }
 
   /**
    * 处理剪切
    */
-  static handleCut(target: any) {
-    if (target) {
-      eventBus.emit('cut-shape', target);
+  static handleCut(targets: any[]) {
+    if (targets && targets.length > 0) {
+      this.operationType = 'cut';
+      this.setCopiedShapes(targets);
+
+      // 收集所有需要显示剪切遮盖层的图元 ID（包括子图元）
+      const idsToMark = this.collectShapeAndChildrenIds(targets);
+      
+      // 使用 SVG 遮盖层方案：设置剪切状态的图元 ID
+      const graphStore = useGraphStore();
+      graphStore.setCutShapeIds(idsToMark);
+      
+      // 更新 GraphStore 中的剪贴板数量
+      graphStore.setCopiedShapesCount(targets.length);
     }
   }
 
@@ -260,62 +278,3 @@ export class ContextMenuUtils {
     console.log('当前选中的图元:', target);
   }
 }
-
-// 默认菜单配置
-export const defaultMenuItems: MenuItemConfig[] = [
-  {
-    id: 'property',
-    label: '属性配置',
-    icon: 'config'
-  },
-  {
-    id: 'highlight',
-    label: '树上高亮',
-    icon: 'delete'
-  },
-  {
-    id: 'locate-chart',
-    label: '所在图表',
-    icon: 'locateChart',
-    divider: true
-  },
-  {
-    id: 'new-chart',
-    label: '新建图表',
-    icon: 'diagram',
-    disabled: true
-  },
-  {
-    id: 'copy',
-    label: '复制',
-    icon: 'copy',
-    disabled: true
-  },
-  {
-    id: 'paste',
-    label: '粘贴',
-    icon: 'paste',
-    disabled: true
-  },
-  {
-    id: 'cut',
-    label: '剪切',
-    icon: 'scissors',
-    disabled: true
-  },
-  {
-    id: 'delete',
-    label: '删除',
-    icon: 'delete'
-  }
-];
-
-// 标准右键菜单配置
-// export const standardContextMenuConfig: MenuConfig = {
-//   items: defaultMenuItems.map(item => {
-//     if (item.id === 'copy' || item.id === 'paste') {
-//       return { ...item, disabled: false };
-//     }
-//     return item;
-//   })
-// };

package/src/utils/drag.ts

@@ -1,6 +1,7 @@
 // utils/drag.ts
 import type { Shape } from '../types'
 import { getBounds, getDiagramRect, clampPointToRect } from './geom'
+import { useGraphStore } from '../store/graphStore'
 import {
   finalRectOf,
   pickContainerByPointerTopmost,
@@ -57,7 +58,8 @@ export const stepSingleDrag = (
   dragOffset: { x: number; y: number } | null,
   dragBase: Record<string, Rect>,
   diagramId: string,
-  constrainEdges: { left?: boolean; top?: boolean; right?: boolean; bottom?: boolean }
+  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 base = dragBase[id]; if (!base) return { ghost: {}, hover: null }
@@ -69,9 +71,10 @@ export const stepSingleDrag = (
 
   const dropRect: Rect = { x: nx, y: ny, width: base.width, height: base.height }
   // 按“鼠标所指”
+  const hp = hitPointer ?? pointer
   const candidate = pickContainerByPointerTopmost(
     shapes,
-    pointer,
+    hp,
     id,
     diagramId,
     [id],     // 如果是组拖可以传整个组的 id 列表
@@ -192,19 +195,21 @@ export const finalizeAfterTransform = (
   hoverId: string | null | undefined,
   updateShape: (id: string, updates: Partial<Shape>) => void,
 ): boolean => {
+  const graphStore = useGraphStore();
+  const byId = graphStore.shapeMap;
 
   // 深度工具：先处理“外层”再处理“内层”，避免内层已换父时反复扩父
   const depthOf = (sid: string) => {
     let d = 0
-    let p = shapes.find(s => s.id === sid)?.parenShapeId ?? null
-    while (p) { d++; p = shapes.find(s => s.id === p)?.parenShapeId ?? null }
+    let p = byId.get(sid)?.parenShapeId ?? null  // ✅ O(1) 查找
+    while (p) { d++; p = byId.get(p)?.parenShapeId ?? null }  // ✅ O(1) 查找
     return d
   }
   const sorted = [...changedIds].sort((a, b) => depthOf(a) - depthOf(b))
 
   let anyReparent = false
   for (const id of sorted) {
-    const s = shapes.find(x => x.id === id); if (!s) continue
+    const s = byId.get(id); if (!s) continue  // ✅ O(1) 查找
     const finalRect = finalRectOf(ghost, s)
     const did = resolveParentAfterDrag(
       shapes, s, finalRect,

package/src/utils/edgeUtils.ts

@@ -3,6 +3,8 @@ import type { Shape } from "../types";
 import { pickTarget } from "./hittest";
 import { useGraphStore } from '../store/graphStore';
 import { snapPinToParentEdge } from './pinUtils';
+import type { IHighlightUtils } from "../hooks/useHighlight";
+
 
 export class EdgeUtils {
   /**
@@ -610,10 +612,7 @@ export class EdgeUtils {
       targetShape: { value: any };
       showLine: { value: boolean };
     },
-    highlightUtils: {
-      highlightShape: (shape: any, highlight: boolean) => void;
-      clearHighlightTimeout: () => void;
-    }
+    highlightUtils: IHighlightUtils
   ) {
     // 1. 先停止连线状态，避免后续计算触发
     state.isConnecting.value = false;

package/src/utils/graphDragService.ts

@@ -77,7 +77,12 @@ export async function applyReparentAndClone(options: {
     const graphStore = useGraphStore()
     let ownerPayload: OwnerPayload | null = null
     const clonedIds: string[] = []
-
+    // 只在嵌套/脱离时刷新
+    const parentsToRefresh = new Set<string>();
+    const normPid = (pid: any): string | null => {
+        const v = pid ?? null;
+        return v === "" ? null : v;
+    };
     for (const id of changedIds) {
         const after = shapes.find(s => s.id === id)
         if (!after) continue
@@ -195,29 +200,28 @@ export async function applyReparentAndClone(options: {
             }
 
             // === 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)
-                }
-            }
+            // 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)
-                }
-            }
+            // if (afterPid) {
+            //     const p = shapes.find(s => s.id === afterPid)
+            //     if (p && isShapeTypeNotInPackageTypes(p)) {
+            //         addChildShapeToCompartment(p, after, updateShape)
+            //     }
+            // }
         }
     }
-
     return { ownerPayload, clonedIds, cancelled: false }
 }
 
@@ -319,8 +323,8 @@ export const createOnNestDoneCallback = (options: {
         const afterParent = JSON.stringify(parent.bounds ?? {})
         if (afterParent == beforeParent) return
         // 只更新当前嵌套的父图元（parent）
-        eventBus.emit('shape-size-update', [
-            { id: parent.id, bounds: afterParent },
-        ])
+        // eventBus.emit('shape-size-update', [
+        //     { id: parent.id, bounds: afterParent },
+        // ])
     }
 }

package/src/utils/iconLoader.ts

@@ -18,43 +18,43 @@ export class IconLoader {
     let modules: Record<string, string>;
     switch (iconPath) {
       case 'menu':
-        modules = import.meta.glob('/src/statics/icons/menu/*.{png,svg,jpg,jpeg,webp}', {
+        modules = import.meta.glob('../statics/icons/menu/*.{png,svg,jpg,jpeg,webp}', {
           eager: true,
           import: "default",
         }) as Record<string, string>;
         break;
       case 'home':
-        modules = import.meta.glob('/src/statics/icons/home/*.{png,svg,jpg,jpeg,webp}', {
+        modules = import.meta.glob('../statics/icons/home/*.{png,svg,jpg,jpeg,webp}', {
           eager: true,
           import: "default",
         }) as Record<string, string>;
         break;
       case 'createElement':
-        modules = import.meta.glob('/src/statics/icons/createElement/*.{png,svg,jpg,jpeg,webp}', {
+        modules = import.meta.glob('../statics/icons/createElement/*.{png,svg,jpg,jpeg,webp}', {
           eager: true,
           import: "default",
         }) as Record<string, string>;
         break;
       case 'createMenu':
-        modules = import.meta.glob('/src/statics/icons/createMenu/*.{png,svg,jpg,jpeg,webp}', {
+        modules = import.meta.glob('../statics/icons/createMenu/*.{png,svg,jpg,jpeg,webp}', {
           eager: true,
           import: "default",
         }) as Record<string, string>;
         break;
       case 'modelView':
-        modules = import.meta.glob('/src/statics/icons/modelView/*.{png,svg,jpg,jpeg,webp}', {
+        modules = import.meta.glob('../statics/icons/modelView/*.{png,svg,jpg,jpeg,webp}', {
           eager: true,
           import: "default",
         }) as Record<string, string>;
         break;
       case 'sideMenu':
-        modules = import.meta.glob('/src/statics/icons/sideMenu/*.{png,svg,jpg,jpeg,webp}', {
+        modules = import.meta.glob('../statics/icons/sideMenu/*.{png,svg,jpg,jpeg,webp}', {
           eager: true,
           import: "default",
         }) as Record<string, string>;
         break;
       case 'childIcons':
-        modules = import.meta.glob('/src/statics/icons/childIcons/*.{png,svg,jpg,jpeg,webp}', {
+        modules = import.meta.glob('../statics/icons/childIcons/*.{png,svg,jpg,jpeg,webp}', {
           eager: true,
           import: "default",
         }) as Record<string, string>;