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

package/src/utils/graphDragService.ts

@@ -252,11 +252,12 @@ export const collectAffectedShapeIds = (shapes: Shape[], changedIds: string[], c
 
     for (const id of allChanged) {
         affected.add(id)
+        // 只算自己子树（组拖动需要）
+        collectDescendantIds(shapes, id).forEach(cid => affected.add(cid))
+
+        // 父节点本身可能受影响（容器/连线）
         const parentId = shapes.find(s => s.id === id)?.parenShapeId ?? null
-        if (parentId) {
-            affected.add(parentId)
-            collectDescendantIds(shapes, parentId).forEach(cid => affected.add(cid))
-        }
+        if (parentId) affected.add(parentId)
     }
 
     for (const id of Array.from(affected)) {
@@ -305,7 +306,9 @@ export const createOnNestDoneCallback = (options: {
 
         const parent = shapes.find(s => s.id === childShape.parenShapeId)
         if (!parent) return
-        const { expanded, affectedIds } = expandParentToFitChildBounds(
+        //  只记录 parent 的前后 bounds
+        const beforeParent = JSON.stringify(parent.bounds ?? {})
+        const { expanded } = expandParentToFitChildBounds(
             shapes,
             parent,
             childShape.id,
@@ -313,17 +316,11 @@ export const createOnNestDoneCallback = (options: {
             updateShape,
         )
         if (!expanded) return
-
-        const sizePayload: ShapeSizeUpdatePayload[] = affectedIds
-            .map(id => shapes.find(s => s.id === id))
-            .filter((s): s is Shape => !!s)
-            .filter(s => s.id !== childId) // 不用更新子，子已经是最新的 bounds
-            .map(s => ({
-                id: s.id,
-                bounds: JSON.stringify(s.bounds ?? {}),
-            }))
-
-        // 交给外面单独的监听去调 updateShapeSize 接口
-        eventBus.emit('shape-size-update', sizePayload)
+        const afterParent = JSON.stringify(parent.bounds ?? {})
+        if (afterParent == beforeParent) return
+        // 只更新当前嵌套的父图元（parent）
+        eventBus.emit('shape-size-update', [
+            { id: parent.id, bounds: afterParent },
+        ])
     }
 }

package/src/utils/keyboardUtils.ts

@@ -0,0 +1,229 @@
+import { useGraphStore } from '../store/graphStore';
+import { eventBus } from '../store';
+// 定义快捷键处理函数类型
+type KeyboardEventHandler = (e: KeyboardEvent) => void;
+
+// 定义快捷键配置类型
+interface KeyboardConfig {
+  onDelete?: () => void;
+  onEditProperty?: () => void;
+  onCancelConnection?: () => void;
+  onShapesRemove?: (items: Array<{ modelId: string; shapeId: string; shapeType: string; isRemoveModelTree: boolean }>) => void;
+  isEditingName?: () => boolean;
+}
+
+/**
+ * 创建键盘事件处理器
+ * @param config 快捷键配置
+ * @returns 键盘事件处理函数
+ */
+export const createKeyboardHandler = (config: KeyboardConfig): KeyboardEventHandler => {
+  const graphStore = useGraphStore();
+
+  return (e: KeyboardEvent) => {
+    // 按下Esc且正在连线时，取消连线
+    if (e.key === 'Escape' && config.onCancelConnection) {
+      e.preventDefault();
+      config.onCancelConnection();
+    }
+
+    // 处理Delete键移除图元
+    if (e.key === 'Delete') {
+      const target = e.target as HTMLElement | null;
+      if (target) {
+        const tag = target.tagName;
+        // 如果在原生输入类控件里（input / textarea）
+        if (tag === 'INPUT' || tag === 'TEXTAREA') {
+          return; // 让浏览器自己处理 Delete，删文字，不动图元
+        }
+      }
+
+      // 如果鼠标不在图元区域，不处理删除
+      if (!graphStore.museInGraphView) return;
+      e.preventDefault(); // 避免浏览器默认行为
+
+      // 选中的图元中如果有画布(diagram)，则不允许删除
+      const selectedShapes = graphStore.marqueeShapes ?? [];
+      // 判断是否包含画布
+      const hasDiagram = selectedShapes.some(s =>
+        s.shapeType?.toLowerCase?.() === 'diagram'
+      );
+      if (hasDiagram) {
+        // 选中了画布，直接不处理删除
+        return;
+      }
+
+      const items = selectedShapes
+        .map(s => ({
+          modelId: s.modelId,
+          shapeId: s.id,
+          shapeType: s.shapeType,
+          isRemoveModelTree: false
+        }));
+
+      if (items.length) {
+        eventBus.emit('shapes-remove', items);
+        if (config.onShapesRemove) {
+          config.onShapesRemove(items);
+        }
+      }
+    }
+
+    // 按下Alt+B时触发树上高亮功能
+    if (e.altKey && e.key === 'b') {
+      e.preventDefault();
+      if (graphStore.selectedShape) {
+        eventBus.emit('highlight-shape', graphStore.selectedShape);
+      }
+    }
+
+    // 按下Ctrl+A时选中所有图元
+    if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
+      // 如果正在编辑名称，不执行全选功能，让输入框正常处理Ctrl+A
+      if (config.isEditingName && config.isEditingName()) {
+        return;
+      }
+      
+      e.preventDefault();
+      if (graphStore.museInGraphView) {
+        graphStore.selectAll();
+      }
+    }
+
+    // 检查是否在输入元素中
+    const activeElement = document.activeElement;
+    const isInputElement = activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA' || activeElement.hasAttribute('contenteditable'));
+
+    // 按下Enter键时触发属性配置功能（不在输入框或文本域中时）
+    if (e.key === 'Enter' && graphStore.selectedShape && graphStore.museInGraphView && !isInputElement) {
+      // 如果正在编辑名称，不执行属性配置功能
+      if (config.isEditingName && config.isEditingName()) {
+        return;
+      }
+      
+      e.preventDefault();
+      if (graphStore.museInGraphView && config.onEditProperty) {
+        config.onEditProperty();
+      }
+    }
+
+    // 按下Ctrl+D时触发删除功能（不在输入框或文本域中时）
+    if ((e.ctrlKey || e.metaKey) && e.key === 'd' && graphStore.museInGraphView && !isInputElement) {
+      // 如果正在编辑名称，不执行删除功能
+      if (config.isEditingName && config.isEditingName()) {
+        return;
+      }
+      
+      e.preventDefault();
+      if (graphStore.selectedIds.length === 1 && graphStore.selectedShape && graphStore.selectedShape.shapeType?.toLowerCase?.() !== 'diagram' && graphStore.museInGraphView) {
+        // 单选情况下发送删除事件
+        eventBus.emit('shapes-delete', graphStore.selectedShape);
+        if (config.onDelete) {
+          config.onDelete();
+        }
+      }
+    }
+
+    // 按下方向键时移动选中的图元（不在输入框或文本域中时）
+    if ((e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === 'ArrowLeft' || e.key === 'ArrowRight') && graphStore.museInGraphView && !isInputElement) {
+      // 如果正在编辑名称，不执行移动功能
+      if (config.isEditingName && config.isEditingName()) {
+        return;
+      }
+      
+      e.preventDefault();
+      const step = 1; // 移动距离
+
+      // 获取画布信息（diagram类型的shape）
+      const canvas = graphStore.shapes.find(shape => shape.shapeType === 'diagram');
+      const canvasX = canvas?.bounds?.x || 0;
+      const canvasY = canvas?.bounds?.y || 0;
+      const canvasWidth = canvas?.bounds?.width || 300; // 最小画布宽度
+      const canvasHeight = canvas?.bounds?.height || 200; // 最小画布高度
+
+      // 计算画布的边界约束
+      const canvasMinX = canvasX;
+      const canvasMinY = canvasY;
+      const canvasMaxX = canvasWidth + canvasX;
+      const canvasMaxY = canvasHeight + canvasY;
+
+      // 获取所有选中的图元
+      const selectedShapes = graphStore.selectedIds.map(id => graphStore.shapes.find(s => s.id === id)).filter(Boolean);
+
+      selectedShapes.forEach(shape => {
+        if (shape && shape.bounds) {
+          const { x = 0, y = 0, width = 0, height = 0 } = shape.bounds;
+          let newX = x;
+          let newY = y;
+
+          // 根据按键方向调整位置
+          switch (e.key) {
+            case 'ArrowUp':
+              newY -= step;
+              break;
+            case 'ArrowDown':
+              newY += step;
+              break;
+            case 'ArrowLeft':
+              newX -= step;
+              break;
+            case 'ArrowRight':
+              newX += step;
+              break;
+          }
+
+          // 添加边界约束：确保图元不会超出画布的边界
+          newX = Math.max(newX, canvasMinX);
+          newY = Math.max(newY, canvasMinY);
+          newX = Math.min(newX, canvasMaxX - width);
+          newY = Math.min(newY, canvasMaxY - height);
+
+          // 计算位置变化量
+          const deltaX = newX - x;
+          const deltaY = newY - y;
+
+          // 更新父图元位置
+          graphStore.updateShape(shape.id, {
+            bounds: {
+              x: newX,
+              y: newY,
+              width,
+              height
+            }
+          });
+
+          // 查找并移动所有子图元
+          const childShapes = graphStore.shapes.filter(child => child.parenShapeId === shape.id);
+          childShapes.forEach(child => {
+            if (child && child.bounds) {
+              const childX = child.bounds.x || 0;
+              const childY = child.bounds.y || 0;
+              const childWidth = child.bounds.width || 0;
+              const childHeight = child.bounds.height || 0;
+
+              // 计算子图元的新位置
+              const childNewX = childX + deltaX;
+              const childNewY = childY + deltaY;
+
+              // 为子图元添加边界约束
+              const constrainedChildX = Math.max(childNewX, canvasMinX);
+              const constrainedChildY = Math.max(childNewY, canvasMinY);
+              const constrainedChildXWithWidth = Math.min(constrainedChildX, canvasMaxX - childWidth);
+              const constrainedChildYWithHeight = Math.min(constrainedChildY, canvasMaxY - childHeight);
+
+              // 更新子图元位置
+              graphStore.updateShape(child.id, {
+                bounds: {
+                  x: constrainedChildXWithWidth,
+                  y: constrainedChildYWithHeight,
+                  width: childWidth,
+                  height: childHeight
+                }
+              });
+            }
+          });
+        }
+      });
+    }
+  };
+};

package/src/utils/license-guard.ts

@@ -0,0 +1,50 @@
+import { ElMessage, type MessageHandler } from "element-plus"
+import { useGraphStore } from "../store/graphStore"
+
+/**
+ * ElMessage.warning 互斥锁：同一时间只显示一个 warning
+ * - warning 显示期间：不会重复弹
+ * - warning 关闭后：允许下一次再弹
+ */
+let warningLock: Promise<void> | null = null
+let warningHandler: MessageHandler | null = null
+
+function showWarningOnce(message?: string) {
+  // 如果上一次 warning 还在显示，就直接复用“锁”，不再重复弹
+  if (warningLock) return warningLock
+
+  warningLock = new Promise<void>((resolve) => {
+    warningHandler = ElMessage.warning({
+      message,
+      onClose: () => {
+        warningHandler = null
+        warningLock = null
+        resolve()
+      },
+    })
+  })
+
+  return warningLock
+}
+
+/**
+ * 操作拦截器：
+ * - canOperate=false 时：提示并阻止执行（warning 同一时间只显示一个）
+ * - canOperate=true 时：执行传入的函数
+ */
+export async function guardOperate<T>(
+  fn: () => T | Promise<T>,
+  options?: { message?: string; silent?: boolean }
+): Promise<T | undefined> {
+  const licenseStore = useGraphStore()
+
+  if (!licenseStore.canOperate) {
+    return
+    if (!options?.silent) {
+      // showWarningOnce(options?.message ?? "当前软件未激活License,请激活后使用!")
+    }
+    return
+  }
+
+  return await fn()
+}

package/src/utils/nameEditUtils.ts

@@ -0,0 +1,132 @@
+import { ref, nextTick, type Ref } from 'vue';
+import type { Shape } from '../types';
+
+export interface NameEditOptions {
+  onNameChange?: (oldName: string, newName: string) => void;
+  validateName?: (name: string) => string | null; // 返回错误信息，null表示验证通过
+  onEditStart?: () => void;
+  onEditEnd?: () => void;
+}
+
+export class NameEditManager {
+  private isEditing: Ref<boolean>;
+  private editingName: Ref<string>;
+  private nameInput: Ref<HTMLInputElement | undefined>;
+  private options: NameEditOptions;
+
+  constructor(options: NameEditOptions = {}) {
+    this.isEditing = ref(false);
+    this.editingName = ref('');
+    this.nameInput = ref<HTMLInputElement>();
+    this.options = options;
+  }
+
+  // 获取响应式状态
+  get editingState() {
+    return {
+      isEditingName: this.isEditing,
+      editingName: this.editingName,
+      nameInput: this.nameInput
+    };
+  }
+
+  // 开始编辑名称
+  async startEdit(shape: Shape | null): Promise<void> {
+    if (!shape || this.isEditing.value) return;
+    
+    this.isEditing.value = true;
+    this.editingName.value = shape.name;
+    
+    // 触发开始编辑回调
+    this.options.onEditStart?.();
+    
+    await nextTick();
+    
+    // 聚焦并选中文本
+    this.nameInput.value?.focus();
+    this.nameInput.value?.select();
+  }
+
+  // 完成编辑
+  finishEdit(shape: Shape | null): void {
+    if (!shape || !this.isEditing.value) return;
+    
+    const newName = this.editingName.value.trim();
+    const oldName = shape.name;
+    
+    if (newName && newName !== oldName) {
+      // 验证名称
+      const validationError = this.options.validateName?.(newName);
+      if (validationError) {
+        // 如果验证失败，可以显示错误提示
+        console.warn('名称验证失败:', validationError);
+        this.cancelEdit();
+        return;
+      }
+      
+      // 调用名称变更回调
+      this.options.onNameChange?.(oldName, newName);
+    }
+    
+    this.isEditing.value = false;
+    this.editingName.value = '';
+    this.options.onEditEnd?.();
+  }
+
+  // 取消编辑
+  cancelEdit(): void {
+    this.isEditing.value = false;
+    this.editingName.value = '';
+    this.options.onEditEnd?.();
+  }
+
+  // 处理键盘事件
+  handleKeyUp(event: KeyboardEvent, shape: Shape | null): void {
+    if (event.key === 'Enter') {
+      this.finishEdit(shape);
+    } else if (event.key === 'Escape') {
+      this.cancelEdit();
+    }
+  }
+
+  // 处理失焦事件
+  handleBlur(shape: Shape | null): void {
+    this.finishEdit(shape);
+  }
+
+  // 判断是否可以编辑
+  canEdit(shape: Shape | null): boolean {
+    return !!shape && 
+           shape.shapeKey !== 'ConceptRole' && 
+           !this.isEditing.value;
+  }
+
+  // 获取名称显示文本
+  getDisplayName(shape: Shape | null): string {
+    return shape?.name || '';
+  }
+
+  // 重置状态
+  reset(): void {
+    this.isEditing.value = false;
+    this.editingName.value = '';
+  }
+}
+
+// 便捷创建函数
+export function createNameEditManager(options?: NameEditOptions): NameEditManager {
+  return new NameEditManager(options);
+}
+
+// 默认验证函数
+export function defaultNameValidator(name: string): string | null {
+  if (!name.trim()) {
+    return '名称不能为空';
+  }
+  
+  if (name.length > 100) {
+    return '名称长度不能超过100个字符';
+  }
+  
+  return null;
+}