@mx-sose-front/mx-sose-graph 1.1.1 → 1.1.2

package/src/utils/contextMenuUtils.ts

@@ -0,0 +1,264 @@
+import { ref, type Ref } from 'vue';
+import { eventBus } from '../store';
+
+// 菜单位置接口
+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 {
+  /**
+   * 处理右键菜单点击事件
+   * @param event 鼠标事件
+   * @param layerRef 图层引用
+   * @param pickTarget 命中测试函数
+   * @param shapes 图元列表
+   * @param selectShape 选中图元函数
+   * @param isDragging 是否正在拖拽
+   * @param isResizing 是否正在缩放
+   * @returns 命中的图元（如果有）
+   */
+  static handleContextMenuClick(
+    event: MouseEvent,
+    layerRef: Ref<HTMLElement | null>,
+    pickTarget: (shapes: any[], point: { x: number; y: number }) => { kind: string; shape?: any },
+    shapes: any[],
+    selectShape?: (shape: any) => void,
+    isDragging?: boolean,
+    isResizing?: boolean
+  ): any | null {
+    // 如果图元正在移动或缩放，则不显示菜单
+    if (isDragging || isResizing) {
+      return null;
+    }
+
+    event.preventDefault();
+
+    // 获取点击位置
+    const point = ContextMenuUtils.toLocalPoint(event, layerRef.value);
+
+    // 使用命中测试找到点击的图元
+    const hit = pickTarget(shapes, point);
+
+    if (hit.kind === "shape" && hit.shape) {
+      // 选中图元
+      if (selectShape) {
+        selectShape(hit.shape);
+      }
+      return hit.shape;
+    }
+
+    return null;
+  }
+
+  /**
+   * 将鼠标事件坐标转换为本地坐标
+   */
+  static toLocalPoint(event: MouseEvent, layerRef: HTMLElement | null): { 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
+    };
+  }
+
+  /**
+   * 检查点击是否在菜单外部
+   */
+  static isClickOutsideMenu(event: MouseEvent, menuSelector: string = '.context-menu'): boolean {
+    const menuElement = document.querySelector(menuSelector);
+    return !menuElement || !menuElement.contains(event.target as Node);
+  }
+
+  /**
+   * 计算菜单位置（避免超出屏幕边界）
+   */
+  static calculateMenuPosition(
+    x: number, 
+    y: number, 
+    menuWidth: number = 180, 
+    menuHeight: number = 300,
+    safeMargin: number = 10
+  ): { x: number; y: number } {
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    let left = x;
+    let top = y;
+
+    // 水平方向调整
+    if (left + menuWidth > viewportWidth) {
+      left = viewportWidth - menuWidth - safeMargin;
+    }
+    left = Math.max(safeMargin, left);
+
+    // 垂直方向调整
+    if (top + menuHeight > viewportHeight) {
+      top = viewportHeight - menuHeight - safeMargin;
+    }
+    top = Math.max(safeMargin, top);
+
+    return { x: left, y: top };
+  }
+
+  /**
+   * 处理删除操作
+   */
+  static handleDelete(target: any) {
+    if (target) {
+      eventBus.emit('shapes-delete', target);
+    }
+  }
+
+  /**
+   * 处理属性配置  (暂时不用)
+   */
+  static handleShowPropertyPanel(target: any) {
+    if (target) {
+      eventBus.emit('show-property-panel', target);
+    }
+  }
+
+  /**
+   * 处理树上高亮
+   */
+  static handleHighlight(target: any) {
+    if (target) {
+      eventBus.emit('highlight-shape', target);
+    }
+  }
+
+  /**
+   * 处理所在图表
+   */
+  static handleLocateChart(target: any) {
+    if (target) {
+      eventBus.emit('locate-chart', target);
+    }
+  }
+
+  /**
+   * 处理复制
+   */
+  static handleCopy(target: any) {
+    if (target) {
+      eventBus.emit('copy-shape', target);
+    }
+  }
+
+  /**
+   * 处理粘贴
+   */
+  static handlePaste(target: any) {
+    if (target) {
+      eventBus.emit('paste-shape', target);
+    }
+  }
+
+  /**
+   * 处理剪切
+   */
+  static handleCut(target: any) {
+    if (target) {
+      eventBus.emit('cut-shape', target);
+    }
+  }
+
+  /**
+   * 记录日志
+   */
+  static logSelectedShape(target: any) {
+    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
+};

package/src/utils/diagram.ts

@@ -218,17 +218,27 @@ const ensureMinimumCanvasSize = () => {
  * 计算操作按钮的位置样式
  */
 export const actionButtonsStyle = (shape: Shape): Record<string, string> => {
+  // 前置校验：shapeId不存在/元素已销毁，直接返回空样式
+  if (!shape.scenarioMenus) {
+    return {};
+  }
+
   const shapeBounds = shape.bounds ?? {};
   const shapeWidth = shapeBounds.width ?? 100;
   const shapeHeight = shapeBounds.height ?? 40;
-  if (!shape.scenarioMenus) {
-    return {}
-  }
   // 按钮宽度：28px，间距4px，共5个按钮 (根据接口动态替换)
   const hasTypeButton = !!shape.modelTypePropertyId;
   const totalButtons = (shape.scenarioMenus ? shape.scenarioMenus!.length : 0) + (hasTypeButton ? 1 : 0);
   const buttonsHeight = 28 * totalButtons + 4 * (totalButtons - (totalButtons > 0 ? 1 : 0));
-
+  const shapeTop = shape.bounds?.y ?? 0;
+  if (shapeTop < 40) { // 固定阈值，不受按钮DOM样式修改影响
+    return {
+      position: "absolute",
+      left: `${shapeWidth + 15}px`, // 紧贴形状右侧，间距5px
+      top: `10px`, // 顶部对齐
+      zIndex: "1000",
+    };
+  }
   return {
     position: "absolute",
     left: `${shapeWidth + 15}px`, // 紧贴形状右侧，间距5px
@@ -341,6 +351,26 @@ export const nameTextBoxStyle = (shape: Shape): Record<string, string> => {
   };
 };
 
+/**
+ * Pin 名称编辑输入框样式（放大，随字体自适应），非 Pin 返回空由 CSS 控制
+ */
+export const nameInputStyle = (shape: Shape): Record<string, string> => {
+  if (!shape) return {};
+  const isPin = String(shape?.shapeType || '').toLowerCase() === 'pin';
+  const ns = shape?.nameStyle || {};
+  const nb = shape?.nameBounds || {};
+  const fs = Number(ns.fontSize || nb.height || 12);
+  if (!isPin) return {};
+  return {
+    width: '100%',
+    height: '100%',
+    fontSize: `${fs}px`,
+    lineHeight: `${Math.ceil(fs + 8)}px`,
+    padding: '4px 6px',
+    boxSizing: 'border-box' as const,
+  };
+};
+
 /**
  * 名称编辑容器样式 - 确保在父组件内水平居中
  */
@@ -401,3 +431,62 @@ export const nameEditorContainerStyle = (shape: Shape): Record<string, string> =
     zIndex: "1001",
   };
 };
+
+/**
+ * 计算文本所需最小宽度 - 应用于所有图形类型
+ */
+export const calculateTextMinWidth = (shape: Shape): number => {
+  const minW = 50;
+  // 获取字体大小（与Block.vue中逻辑一致）
+  const nameStyle = shape.nameStyle || {};
+  const nameBounds = shape.nameBounds || {};
+  const fontSize = nameStyle.fontSize || nameBounds.height || 12;
+  // 假设每个字符的平均宽度是字体大小的1倍
+  const charWidth = fontSize * 1;
+
+  // 计算名称文本的宽度
+  const nameTextWidth = (shape.name?.length || 0) * charWidth;
+  // 计算关键词文本的宽度
+  const keywordsTextWidth = (shape.keywords?.length || 0) * charWidth;
+
+  // 返回较大的宽度，并添加一些边距（左右各10px）
+  const maxTextWidth = Math.max(nameTextWidth, keywordsTextWidth);
+  const estimatedTextWidth = maxTextWidth + 60; // 左右各10px边距
+
+  // 确保最小宽度不小于minW
+  return Math.max(minW, estimatedTextWidth);
+};
+
+/**
+ * 框选矩形的样式
+ */
+export const getMarqueeStyle = (r: { x: number; y: number; width: number; height: number }): Record<string, string> => ({
+  position: "absolute",
+  left: `${r.x}px`,
+  top: `${r.y}px`,
+  width: `${r.width}px`,
+  height: `${r.height}px`,
+  border: "2px dashed #a6ddff",
+  pointerEvents: "none",
+  zIndex: "20",
+});
+
+/**
+ * 计算交互层的定位样式
+ * @param diagramBounds 画布边界
+ * @returns CSS样式对象
+ */
+export const getLayerStyle = (diagramBounds: { x?: number; y?: number; width?: number; height?: number } | undefined): Record<string, string> => {
+  if (!diagramBounds) {
+    return { display: 'none' };
+  }
+
+  return {
+    position: 'absolute',
+    left: `${diagramBounds.x ?? 0}px`,
+    top: `${diagramBounds.y ?? 0}px`,
+    width: `${diagramBounds.width ?? 0}px`,
+    height: `${diagramBounds.height ?? 0}px`,
+    pointerEvents: 'none',
+  };
+};

package/src/utils/edgeUtils.ts

@@ -2,6 +2,7 @@
 import type { Shape } from "../types";
 import { pickTarget } from "./hittest";
 import { useGraphStore } from '../store/graphStore';
+import { snapPinToParentEdge } from './pinUtils';
 
 export class EdgeUtils {
   /**
@@ -597,6 +598,40 @@ export class EdgeUtils {
     };
   }
 
+  /**
+   * 取消连线的方法（完全重置所有相关状态）
+   */
+  static cancelConnection(
+    state: {
+      isConnecting: { value: boolean };
+      currentConnectPoint: { value: { x: number; y: number } };
+      mousePosition: { value: { x: number; y: number } };
+      targetConnectPoint: { value: { x: number; y: number } };
+      targetShape: { value: any };
+      showLine: { value: boolean };
+    },
+    highlightUtils: {
+      highlightShape: (shape: any, highlight: boolean) => void;
+      clearHighlightTimeout: () => void;
+    }
+  ) {
+    // 1. 先停止连线状态，避免后续计算触发
+    state.isConnecting.value = false;
+
+    // 2. 重置关键坐标状态（核心：清空无效坐标，让 linePoints 无值可算）
+    state.currentConnectPoint.value = { x: 0, y: 0 }; // 重置为无效默认值
+    state.mousePosition.value = { x: 0, y: 0 };       // 重置鼠标位置
+    state.targetConnectPoint.value = { x: 0, y: 0 };  // 重置目标连接点
+    state.targetShape.value = null;                  // 清空目标图元
+
+    // 3. 清除高亮状态和定时器
+    highlightUtils.highlightShape(null, false); // 取消图元高亮，恢复原始样式
+    highlightUtils.clearHighlightTimeout();
+
+    // 4. 最后隐藏线条（确保状态重置后再隐藏，避免延迟渲染）
+    state.showLine.value = false;
+  }
+
   static isEndPointInShape(shapes: Shape[], endPoint: { x: number; y: number }) {
     for (const shape of shapes) {
       // 排除 diagram 类型的图形
@@ -773,4 +808,197 @@ export class EdgeUtils {
       }
     });
   }
+
+  /**
+   * 根据 pin 的方向和位置计算连接点
+   * 连接点位于 pin 的外侧边缘（远离父图元的一侧）：
+   * - OutputPin: direction 表示箭头朝外的方向，连接点在该方向的外侧边缘
+   * - InputPin: direction 表示箭头朝内的方向，连接点在相反方向的外侧边缘
+   * 
+   * 例如：
+   * - InputPin direction='down' (箭头朝下，pin 在父图元上方) -> 连接点在 pin 的上边缘（y）
+   * - InputPin direction='up' (箭头朝上，pin 在父图元下方) -> 连接点在 pin 的下边缘（y + height）
+   * - InputPin direction='right' (箭头朝右，pin 在父图元左边) -> 连接点在 pin 的左边缘（x）
+   * - InputPin direction='left' (箭头朝左，pin 在父图元右边) -> 连接点在 pin 的右边缘（x + width）
+   * 
+   * @param pinShape pin 图元对象
+   * @returns 连接点坐标 { x, y }
+   */
+  static calculatePinConnectionPoint(pinShape: Shape): { x: number; y: number } {
+    if (!pinShape.bounds) {
+      return { x: 0, y: 0 };
+    }
+
+    const { x = 0, y = 0, width = 0, height = 0 } = pinShape.bounds;
+    const direction = pinShape.direction || 'right';
+    const isInputPin = (pinShape.shapeKey as string)?.toLowerCase().includes('input');
+
+    // 计算 pin 的中心点（用于水平和垂直方向的坐标）
+    const centerX = x + width / 2;
+    const centerY = y + height / 2;
+
+    // 对于 InputPin，direction 表示箭头朝内的方向，连接点应该在相反方向的外侧边缘
+    if (isInputPin) {
+      switch (direction) {
+        case 'up':
+          // InputPin: 箭头朝上（朝内），pin 在父图元下方，连接点在 pin 的下边缘（外侧）
+          return {
+            x: centerX,
+            y: y + height
+          };
+        case 'down':
+          // InputPin: 箭头朝下（朝内），pin 在父图元上方，连接点在 pin 的上边缘（外侧）
+          return {
+            x: centerX,
+            y: y
+          };
+        case 'left':
+          // InputPin: 箭头朝左（朝内），pin 在父图元右边，连接点在 pin 的右边缘（外侧）
+          return {
+            x: x + width,
+            y: centerY
+          };
+        case 'right':
+          // InputPin: 箭头朝右（朝内），pin 在父图元左边，连接点在 pin 的左边缘（外侧）
+          return {
+            x: x,
+            y: centerY
+          };
+        default:
+          return { x: centerX, y: centerY };
+      }
+    } else {
+      // OutputPin: direction 表示箭头朝外的方向，连接点在该方向的外侧边缘
+      switch (direction) {
+        case 'up':
+          // OutputPin: 箭头朝上，pin 在父图元上方，连接点在 pin 的上边缘中点
+          return {
+            x: centerX,
+            y: y
+          };
+        case 'down':
+          // OutputPin: 箭头朝下，pin 在父图元下方，连接点在 pin 的下边缘中点
+          return {
+            x: centerX,
+            y: y + height
+          };
+        case 'left':
+          // OutputPin: 箭头朝左，pin 在父图元左边，连接点在 pin 的左边缘中点
+          return {
+            x: x,
+            y: centerY
+          };
+        case 'right':
+          // OutputPin: 箭头朝右，pin 在父图元右边，连接点在 pin 的右边缘中点
+          return {
+            x: x + width,
+            y: centerY
+          };
+        default:
+          return { x: centerX, y: centerY };
+      }
+    }
+  }
+
+  /**
+   * 处理 ServiceObjectFlow 连接：计算 OutputPin 和 InputPin 的 bounds 和连接点
+   * @param sourceShape 源图元
+   * @param targetShape 目标图元
+   * @param connectionData 连接数据
+   * @returns 处理后的连接数据和 pin 的 bounds
+   */
+  static handleServiceObjectFlowConnection(
+    sourceShape: Shape,
+    targetShape: Shape,
+    connectionData: {
+      sourceId?: string;
+      targetId?: string;
+      sourcePoint: { x: number; y: number };
+      targetPoint: { x: number; y: number };
+      waypoints?: Array<{ x: number; y: number }>;
+      [key: string]: any;
+    }
+  ): {
+    connectionData: typeof connectionData;
+    outputPinBounds: { x: number; y: number; width: number; height: number; direction?: string };
+    inputPinBounds: { x: number; y: number; width: number; height: number; direction?: string };
+  } {
+    // 创建临时 OutputPin 对象用于计算 bounds（只包含必要属性）
+    const outputPin: Shape = {
+      shapeKey: 'OutputPin',
+      shapeType: 'pin',
+      bounds: {
+        x: connectionData.sourcePoint.x,
+        y: connectionData.sourcePoint.y,
+        width: 22,
+        height: 22,
+      },
+    } as Shape;
+
+    // 使用 snapPinToParentEdge 调整 outputPin 的位置
+    const adjustedOutputPinPos = snapPinToParentEdge(
+      connectionData.sourcePoint,
+      sourceShape,
+      outputPin
+    );
+    outputPin.bounds = {
+      x: adjustedOutputPinPos.x,
+      y: adjustedOutputPinPos.y,
+      width: 22,
+      height: 22,
+    };
+
+    // 创建临时 InputPin 对象用于计算 bounds（只包含必要属性）
+    const inputPin: Shape = {
+      shapeKey: 'InputPin',
+      shapeType: 'pin',
+      bounds: {
+        x: connectionData.targetPoint.x,
+        y: connectionData.targetPoint.y,
+        width: 22,
+        height: 22,
+      },
+    } as Shape;
+
+    // 使用 snapPinToParentEdge 调整 inputPin 的位置
+    const adjustedInputPinPos = snapPinToParentEdge(
+      connectionData.targetPoint,
+      targetShape,
+      inputPin
+    );
+    inputPin.bounds = {
+      x: adjustedInputPinPos.x,
+      y: adjustedInputPinPos.y,
+      width: 22,
+      height: 22,
+    };
+
+    // 根据 pin 的方向计算连接点位置
+    const outputPinConnectionPoint = EdgeUtils.calculatePinConnectionPoint(outputPin);
+    const inputPinConnectionPoint = EdgeUtils.calculatePinConnectionPoint(inputPin);
+
+    // 修改 connectionData 的连接点
+    connectionData.sourcePoint = outputPinConnectionPoint;
+    connectionData.targetPoint = inputPinConnectionPoint;
+    // 更新 waypoints
+    connectionData.waypoints = [outputPinConnectionPoint, inputPinConnectionPoint];
+
+    return {
+      connectionData,
+      outputPinBounds: {
+        x: outputPin.bounds.x ?? 0,
+        y: outputPin.bounds.y ?? 0,
+        width: outputPin.bounds.width ?? 22,
+        height: outputPin.bounds.height ?? 22,
+        direction: outputPin.direction,
+      },
+      inputPinBounds: {
+        x: inputPin.bounds.x ?? 0,
+        y: inputPin.bounds.y ?? 0,
+        width: inputPin.bounds.width ?? 22,
+        height: inputPin.bounds.height ?? 22,
+        direction: inputPin.direction,
+      },
+    };
+  }
 }

package/src/utils/geom.ts

@@ -19,6 +19,40 @@ export const toLocalPoint = (evt: MouseEvent, el: HTMLElement | null) => {
   }
 }
 
+// 客户端坐标转换到容器本地坐标（带scale处理）
+export const clientToLocalPoint = (clientX: number, clientY: number, el: HTMLElement | null) => {
+  if (!el) return { x: clientX, y: clientY } // 若还没挂载，直接用屏幕坐标兜底
+  const rect = el.getBoundingClientRect()
+  // 获取当前缩放比例
+  const graphStore = useGraphStore()
+  const scale = graphStore.getScale() || 1
+  // 计算本地坐标并除以缩放比例
+  return { x: (clientX - rect.left) / scale, y: (clientY - rect.top) / scale }
+}
+
+// 本地坐标转换到客户端坐标（带scale处理）
+export const localToClientPoint = (x: number, y: number, el: HTMLElement | null) => {
+  if (!el) return { clientX: x, clientY: y } // 若还没挂载，直接用屏幕坐标兜底
+  const rect = el.getBoundingClientRect()
+  // 获取当前缩放比例
+  const graphStore = useGraphStore()
+  const scale = graphStore.getScale() || 1
+  // 计算客户端坐标并乘以缩放比例
+  return { clientX: rect.left + x * scale, clientY: rect.top + y * scale }
+}
+
+// 判断点是否在容器范围内（客户端坐标）
+export const isInsideCanvasClient = (clientX: number, clientY: number, el: HTMLElement | null) => {
+  if (!el) return false
+  const rect = el.getBoundingClientRect()
+  return (
+    clientX >= rect.left &&
+    clientX <= rect.right &&
+    clientY >= rect.top &&
+    clientY <= rect.bottom
+  )
+}
+
 // 点是否位于矩形边界内
 export const inBounds = (
   pt: { x: number; y: number },