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

package/src/hooks/useHighlight.ts

@@ -0,0 +1,223 @@
+import { ref, onMounted, onUnmounted } from 'vue';
+import type { Ref } from 'vue';
+import type { Shape } from '../types';
+import { eventBus } from '../store';
+
+/**
+ * 高亮覆盖层的边界信息
+ */
+export interface HighlightOverlayBounds {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+/**
+ * 高亮颜色类型
+ */
+export type HighlightColor = 'blue' | 'red';
+
+/**
+ * 高亮工具接口 - 用于 EdgeUtils.cancelConnection 等方法
+ */
+export interface IHighlightUtils {
+  highlightShape: (shape: Shape | null, isHighlight: boolean, isValidSource?: boolean) => void;
+  clearHighlightTimeout: () => void;
+}
+
+/**
+ * 外部高亮控制事件的 payload 类型
+ */
+export interface HighlightShapePayload {
+  shape: Shape;
+  isHighlight: boolean;
+  isValidSource?: boolean;
+}
+
+/**
+ * useHighlight 配置选项
+ */
+export interface UseHighlightOptions {
+  /** 是否监听 eventBus 事件，默认 true */
+  listenEvents?: boolean;
+}
+
+/**
+ * useHighlight 返回类型
+ */
+export interface UseHighlightReturn extends IHighlightUtils {
+  // 状态（用于模板绑定）
+  overlayBounds: Ref<HighlightOverlayBounds | null>;
+  overlayColor: Ref<HighlightColor>;
+  highlightedShapeId: Ref<string | null>;
+  // 方法
+  setHighlightTimeout: (callback: () => void, delay?: number) => void;
+  getHighlightedShapeId: () => string | null;
+  // 清理
+  dispose: () => void;
+}
+
+/**
+ * 图元高亮 Composable
+ * 使用覆盖层方式实现高亮（性能优化：不修改 graphStore）
+ * 
+ * @param options 配置选项
+ * @returns 高亮相关的状态和方法
+ * 
+ * @example
+ * ```vue
+ * <script setup>
+ * const { overlayBounds, overlayColor, highlightShape } = useHighlight();
+ * </script>
+ * 
+ * <template>
+ *   <div v-if="overlayBounds" class="highlight-overlay" :class="overlayColor" :style="{
+ *     left: overlayBounds.x + 'px',
+ *     top: overlayBounds.y + 'px',
+ *     width: overlayBounds.width + 'px',
+ *     height: overlayBounds.height + 'px',
+ *   }" />
+ * </template>
+ * ```
+ * 
+ * @example 外部控制高亮
+ * ```ts
+ * // 触发高亮
+ * eventBus.emit('highlight-shape-overlay', { shape, isHighlight: true, isValidSource: true });
+ * // 清除高亮
+ * eventBus.emit('clear-highlight-overlay');
+ * ```
+ */
+export function useHighlight(options: UseHighlightOptions = {}): UseHighlightReturn {
+  const { listenEvents = true } = options;
+
+  // 内部状态
+  const overlayBounds = ref<HighlightOverlayBounds | null>(null);
+  const overlayColor = ref<HighlightColor>('blue');
+  const highlightedShapeId = ref<string | null>(null);
+  const highlightTimeout = ref<ReturnType<typeof setTimeout> | null>(null);
+
+  /**
+   * 清除高亮定时器
+   */
+  const clearHighlightTimeout = () => {
+    if (highlightTimeout.value) {
+      clearTimeout(highlightTimeout.value);
+      highlightTimeout.value = null;
+    }
+  };
+
+  /**
+   * 设置高亮定时器
+   * @param callback 回调函数
+   * @param delay 延迟时间（毫秒），默认 60ms
+   */
+  const setHighlightTimeout = (callback: () => void, delay: number = 60) => {
+    clearHighlightTimeout();
+    highlightTimeout.value = setTimeout(callback, delay);
+  };
+
+  /**
+   * 高亮或取消高亮图元（使用覆盖层方式）
+   * @param shape 要高亮的图元，null 表示取消高亮
+   * @param isHighlight 是否高亮
+   * @param isValidSource 是否是有效的连接源（影响高亮颜色：蓝色=有效，红色=无效）
+   */
+  const highlightShape = (
+    shape: Shape | null,
+    isHighlight: boolean,
+    isValidSource: boolean = true
+  ) => {
+    // 取消高亮
+    if (!shape || !isHighlight) {
+      overlayBounds.value = null;
+      highlightedShapeId.value = null;
+      return;
+    }
+
+    // 不高亮 diagram 和 edge 类型
+    if (shape.shapeType === 'diagram' || shape.shapeType === 'edge') {
+      return;
+    }
+
+    // 不高亮没有有效 bounds 的图元
+    if (!shape.bounds || (shape.bounds.width ?? 0) <= 0 || (shape.bounds.height ?? 0) <= 0) {
+      return;
+    }
+
+    // 不高亮没有 shapeKey 的图元
+    if (!shape.shapeKey) {
+      return;
+    }
+
+    // 设置高亮覆盖层（向外扩展 3px，完全覆盖图元边框）
+    overlayBounds.value = {
+      x: shape.bounds.x ?? 0,
+      y: shape.bounds.y ?? 0,
+      width: shape.bounds.width ?? 0,
+      height: shape.bounds.height ?? 0,
+    };
+    overlayColor.value = isValidSource ? 'blue' : 'red';
+    highlightedShapeId.value = shape.id;
+  };
+
+  /**
+   * 获取当前高亮的图元 ID
+   */
+  const getHighlightedShapeId = () => highlightedShapeId.value;
+
+  /**
+   * 清理所有状态
+   */
+  const dispose = () => {
+    clearHighlightTimeout();
+    overlayBounds.value = null;
+    highlightedShapeId.value = null;
+  };
+
+  // eventBus 事件处理
+  const handleHighlightShapeOverlay = (payload: HighlightShapePayload | null) => {
+    if (!payload) {
+      highlightShape(null, false);
+    } else {
+      highlightShape(payload.shape, payload.isHighlight, payload.isValidSource ?? true);
+    }
+  };
+
+  const handleClearHighlightOverlay = () => {
+    highlightShape(null, false);
+    clearHighlightTimeout();
+  };
+
+  // 生命周期
+  if (listenEvents) {
+    onMounted(() => {
+      eventBus.on('highlight-shape-overlay', handleHighlightShapeOverlay);
+      eventBus.on('clear-highlight-overlay', handleClearHighlightOverlay);
+    });
+
+    onUnmounted(() => {
+      eventBus.off('highlight-shape-overlay', handleHighlightShapeOverlay);
+      eventBus.off('clear-highlight-overlay', handleClearHighlightOverlay);
+      dispose();
+    });
+  } else {
+    onUnmounted(() => {
+      dispose();
+    });
+  }
+
+  return {
+    // 状态
+    overlayBounds,
+    overlayColor,
+    highlightedShapeId,
+    // 方法
+    highlightShape,
+    setHighlightTimeout,
+    clearHighlightTimeout,
+    getHighlightedShapeId,
+    dispose,
+  };
+}

package/src/hooks/useNameEdit.ts

@@ -0,0 +1,234 @@
+import { ref, nextTick, onUnmounted, type Ref } from 'vue';
+import type { Shape } from '../types';
+
+/**
+ * 名称编辑配置选项
+ */
+export interface UseNameEditOptions {
+  /** 获取当前选中的 shape（用于 onNameChange 回调） */
+  getSelectedShape?: () => Shape | null;
+  /** 名称变更时的回调，包含 shape 信息 */
+  onNameChange?: (shape: Shape, oldName: string, newName: string) => void;
+  /** 名称验证函数，返回错误信息，null 表示验证通过 */
+  validateName?: (name: string) => string | null;
+  /** 开始编辑时的回调 */
+  onEditStart?: () => void;
+  /** 结束编辑时的回调 */
+  onEditEnd?: () => void;
+}
+
+/**
+ * 名称编辑管理器接口
+ * 用于 NameEditor 组件的 props 类型定义
+ */
+export interface INameEditManager {
+  // 响应式状态（通过 editingState getter 访问）
+  editingState: {
+    isEditingName: Ref<boolean>;
+    editingName: Ref<string>;
+    nameInput: Ref<HTMLInputElement | null>;
+  };
+  // 方法
+  setNameInput: (input: HTMLInputElement | null) => void;
+  startEdit: (shape: Shape | null) => Promise<void>;
+  finishEdit: (shape: Shape | null) => void;
+  cancelEdit: () => void;
+  handleKeyUp: (event: KeyboardEvent, shape: Shape | null) => void;
+  handleBlur: (shape: Shape | null) => void;
+  canEdit: (shape: Shape | null) => boolean;
+  getDisplayName: (shape: Shape | null) => string;
+  reset: () => void;
+}
+
+/**
+ * useNameEdit 返回类型
+ */
+export interface UseNameEditReturn extends INameEditManager {
+  // 直接暴露的响应式状态（方便解构使用）
+  isEditingName: Ref<boolean>;
+  editingName: Ref<string>;
+  nameInput: Ref<HTMLInputElement | null>;
+}
+
+/**
+ * 名称编辑 Composable
+ * 
+ * 用于管理图元名称的编辑状态和行为
+ * 
+ * @param options 配置选项
+ * @returns 名称编辑相关的状态和方法
+ * 
+ * @example
+ * ```vue
+ * <script setup>
+ * // 方式1：解构使用
+ * const { isEditingName, editingName, startEdit, handleBlur } = useNameEdit({
+ *   onNameChange: (oldName, newName) => {
+ *     emit('editName', selectedShape, newName, oldName);
+ *   }
+ * });
+ * 
+ * // 方式2：作为对象传递给子组件（兼容 NameEditor 组件）
+ * const nameEditManager = useNameEdit({ ... });
+ * // <NameEditor :name-edit-manager="nameEditManager" />
+ * </script>
+ * ```
+ */
+export function useNameEdit(options: UseNameEditOptions = {}): UseNameEditReturn {
+  // 响应式状态
+  const isEditingName = ref(false);
+  const editingName = ref('');
+  const nameInput = ref<HTMLInputElement | null>(null);
+
+  /**
+   * 设置名称输入框引用
+   */
+  const setNameInput = (input: HTMLInputElement | null) => {
+    nameInput.value = input;
+  };
+
+  /**
+   * 开始编辑名称
+   */
+  const startEdit = async (shape: Shape | null): Promise<void> => {
+    if (!shape || isEditingName.value) return;
+    
+    isEditingName.value = true;
+    editingName.value = shape.name || '';
+    
+    // 触发开始编辑回调
+    options.onEditStart?.();
+    
+    await nextTick();
+    
+    // 聚焦并选中文本
+    nameInput.value?.focus();
+    nameInput.value?.select();
+  };
+
+  /**
+   * 完成编辑
+   */
+  const finishEdit = (shape: Shape | null): void => {
+    if (!shape || !isEditingName.value) return;
+    
+    const newName = editingName.value.trim();
+    const oldName = shape.name || '';
+    
+    if (newName && newName !== oldName) {
+      // 验证名称
+      const validationError = options.validateName?.(newName);
+      if (validationError) {
+        console.warn('名称验证失败:', validationError);
+        cancelEdit();
+        return;
+      }
+      
+      // 调用名称变更回调（优先使用 getSelectedShape 获取最新的 shape）
+      const targetShape = options.getSelectedShape?.() ?? shape;
+      if (targetShape) {
+        options.onNameChange?.(targetShape, oldName, newName);
+      }
+    }
+    
+    isEditingName.value = false;
+    editingName.value = '';
+    options.onEditEnd?.();
+  };
+
+  /**
+   * 取消编辑
+   */
+  const cancelEdit = (): void => {
+    isEditingName.value = false;
+    editingName.value = '';
+    options.onEditEnd?.();
+  };
+
+  /**
+   * 处理键盘事件
+   */
+  const handleKeyUp = (event: KeyboardEvent, shape: Shape | null): void => {
+    if (event.key === 'Enter') {
+      finishEdit(shape);
+    } else if (event.key === 'Escape') {
+      cancelEdit();
+    }
+  };
+
+  /**
+   * 处理失焦事件
+   */
+  const handleBlur = (shape: Shape | null): void => {
+    finishEdit(shape);
+  };
+
+  /**
+   * 判断是否可以编辑
+   */
+  const canEdit = (shape: Shape | null): boolean => {
+    return !!shape && 
+           shape.shapeKey !== 'ConceptRole' && 
+           !isEditingName.value;
+  };
+
+  /**
+   * 获取名称显示文本
+   */
+  const getDisplayName = (shape: Shape | null): string => {
+    return shape?.name || '';
+  };
+
+  /**
+   * 重置状态
+   */
+  const reset = (): void => {
+    isEditingName.value = false;
+    editingName.value = '';
+  };
+
+  // 组件卸载时自动重置
+  onUnmounted(() => {
+    reset();
+  });
+
+  return {
+    // 直接暴露的状态（方便解构）
+    isEditingName,
+    editingName,
+    nameInput,
+    // editingState getter（兼容 NameEditor 组件）
+    get editingState() {
+      return {
+        isEditingName,
+        editingName,
+        nameInput,
+      };
+    },
+    // 方法
+    setNameInput,
+    startEdit,
+    finishEdit,
+    cancelEdit,
+    handleKeyUp,
+    handleBlur,
+    canEdit,
+    getDisplayName,
+    reset,
+  };
+}
+
+/**
+ * 默认名称验证函数
+ */
+export function defaultNameValidator(name: string): string | null {
+  if (!name.trim()) {
+    return '名称不能为空';
+  }
+  
+  if (name.length > 100) {
+    return '名称长度不能超过100个字符';
+  }
+  
+  return null;
+}