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

package/src/components/NameEditor.vue

@@ -0,0 +1,212 @@
+<template>
+  <!-- 名称虚线框（选中时显示） -->
+  <div
+    v-if="
+      selectedShape &&
+      selectedShape.nameBounds &&
+      !isEditingName &&
+      selectedShape.shapeKey !== 'ConceptRole'
+    "
+    class="name-text-box-container"
+    :style="computedNameTextBoxContainerStyle"
+  >
+    <div
+      class="name-text-box"
+      :style="computedNameTextBoxStyle"
+      title="点击编辑名称"
+      @click="handleNameTextBoxClick"
+    ></div>
+  </div>
+
+  <!-- 名称编辑输入框 -->
+  <div
+    v-if="
+      isEditingName &&
+      selectedShape &&
+      selectedShape.shapeKey !== 'ConceptRole'
+    "
+    class="name-editor-container"
+    :style="computedNameEditorContainerStyle"
+  >
+    <input
+      ref="nameInput"
+      v-model="localEditingName"
+      class="name-input"
+      :style="computedNameInputStyle"
+      @blur="handleBlur"
+      @keyup.enter="handleKeyUp($event)"
+      @keyup.escape="handleKeyUp($event)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed, nextTick, type CSSProperties } from 'vue';
+import type { Shape } from '../types';
+import { nameTextBoxContainerStyle, nameTextBoxStyle, nameEditorContainerStyle, nameInputStyle } from '../utils/diagram';
+import type { NameEditManager } from '../utils/nameEditUtils';
+
+// 定义组件的props
+interface NameEditorProps {
+  selectedShape: Shape | null;
+  canEdit: boolean;
+  isEditingName: boolean;
+  editingName: string;
+  nameEditManager: NameEditManager;
+}
+
+// 定义组件的事件
+const emit = defineEmits<{
+  (e: 'editName', shape: Shape, newName: string, oldName: string): void;
+}>();
+
+// 获取props
+const props = defineProps<NameEditorProps>();
+
+// 名称输入框引用
+const nameInput = ref<HTMLInputElement | null>(null);
+
+// 创建本地ref存储输入值
+const localEditingName = ref(props.editingName);
+
+// 监听props.editingName的变化，同步到本地ref
+watch(() => props.editingName, (newValue) => {
+  localEditingName.value = newValue;
+});
+
+// 监听nameInput ref变化，将其传递给NameEditManager
+watch(() => nameInput.value, (newValue) => {
+  if (newValue) {
+    props.nameEditManager.setNameInput(newValue);
+  }
+});
+
+// 监听本地输入值的变化，同步到nameEditManager
+watch(() => localEditingName.value, (newValue) => {
+  // 更新NameEditManager中的editingName状态
+  (props.nameEditManager as any).editingName.value = newValue;
+});
+
+// 监听selectedShape变化，如果编辑中的形状不是当前选中的形状，取消编辑
+watch(() => props.selectedShape, (newShape) => {
+  if (props.isEditingName && (!newShape || newShape.id !== props.selectedShape?.id)) {
+    props.nameEditManager.cancelEdit();
+  }
+});
+
+// 计算名称虚线框容器样式
+const computedNameTextBoxContainerStyle = computed<CSSProperties>(() => {
+  if (!props.selectedShape) return {};
+  return nameTextBoxContainerStyle(props.selectedShape.id);
+});
+
+// 计算名称虚线框样式
+const computedNameTextBoxStyle = computed<CSSProperties>(() => {
+  if (!props.selectedShape) return {};
+  return nameTextBoxStyle(props.selectedShape);
+});
+
+// 计算名称编辑器容器样式
+const computedNameEditorContainerStyle = computed<CSSProperties>(() => {
+  if (!props.selectedShape) return {};
+  return nameEditorContainerStyle(props.selectedShape);
+});
+
+// 计算名称输入框样式
+const computedNameInputStyle = computed<CSSProperties>(() => {
+  if (!props.selectedShape) return {};
+  return nameInputStyle(props.selectedShape);
+});
+
+// 处理名称虚线框点击事件
+const handleNameTextBoxClick = () => {
+  if (props.canEdit && props.nameEditManager.canEdit(props.selectedShape)) {
+    startEditName();
+  }
+};
+
+// 开始编辑名称
+const startEditName = async () => {
+  await props.nameEditManager.startEdit(props.selectedShape);
+};
+
+// 处理失焦事件
+const handleBlur = () => {
+  props.nameEditManager.handleBlur(props.selectedShape);
+};
+
+// 处理键盘事件
+const handleKeyUp = (event: KeyboardEvent) => {
+  props.nameEditManager.handleKeyUp(event, props.selectedShape);
+};
+
+// 暴露方法给父组件
+defineExpose({
+  startEditName,
+  canEdit: (shape: Shape | null) => props.nameEditManager.canEdit(shape),
+  cancelEdit: () => props.nameEditManager.cancelEdit(),
+});
+</script>
+
+<style scoped>
+/* 名称虚线框容器 */
+.name-text-box-container {
+  position: absolute;
+  z-index: 1001;
+  pointer-events: all;
+}
+
+/* 名称虚线框 */
+.name-text-box {
+  border: 1px dashed #007bff;
+  background: rgba(255, 255, 255, 0.2);
+  cursor: pointer;
+  pointer-events: all;
+  transition: all 0.2s ease;
+  border-radius: 4px;
+  box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.1);
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.name-text-box:hover {
+  border-color: #0056b3;
+  background: rgba(0, 123, 255, 0.05);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
+  transform: scale(1.02);
+}
+
+/* 名称编辑器容器 */
+.name-editor-container {
+  position: absolute;
+  z-index: 1002;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  pointer-events: all;
+}
+
+/* 名称输入框 */
+.name-input {
+  width: calc(100% - 20px);
+  padding: 2px 4px;
+  border: 2px solid #007bff;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  background: #fff;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  outline: none;
+  text-align: center;
+  font-family: inherit;
+  resize: none;
+  overflow: hidden;
+}
+
+.name-input:focus {
+  border-color: #0056b3;
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
+}
+</style>

package/src/components/SelectionBox.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="selection-box" :style="getSelectionBoxStyle(shape)">
+    <!-- 只有当shapeType不是edge且不是conceptualRole时才渲染四个角手柄 -->
+    <div class="resize-handles" v-show="!isBusy && shape.shapeType !== 'edge'">
+      <div
+        v-for="h in resizeHandles"
+        :key="h.position"
+        class="resize-handle"
+        :class="[`resize-${h.position}`, { 'is-disabled': isMultiSelected }]"
+        :style="getHandleStyle(h, shape)"
+        @mousedown.stop.prevent="onHandleMouseDown($event, h.position)"
+      />
+    </div>
+    <div
+      class="action-buttons"
+      v-show="shouldShowActionButtons"
+      :style="actionButtonsStyle(shape)"
+    >
+      <div v-show="shape.modelTypePropertyId" class="border-btn">
+        <button
+          class="action-btn edit-btn"
+          @mousedown.stop.prevent="onModelTypePropertyIdClick"
+          title="设置类型"
+        >
+          <img src="../statics/icons/childIcons/设置类型.png" alt="设置类型" />
+        </button>
+      </div>
+      <button
+        v-for="value in shape.scenarioMenus"
+        :key="value.code"
+        class="action-btn edit-btn"
+        @mousedown.stop.prevent="onActionButtonClick(value.code)"
+        @click.stop.prevent
+        :title="value.name"
+      >
+        <img :src="getIcon('childIcons', value.icon || '')" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import type { Shape } from "../types";
+import { resizeHandles } from "../constants/index";
+import {
+  selectionBoxStyle,
+  handleStyle,
+  actionButtonsStyle,
+  ShapeConfig,
+} from "../utils/diagram";
+import { getIcon } from "../utils/iconLoader";
+
+// Props
+const props = defineProps<{
+  shape: Shape;
+  isBusy: boolean;
+  isMultiSelected: boolean;
+}>();
+
+// 计算属性：是否显示操作按钮
+const shouldShowActionButtons = computed(() => {
+  return !props.isMultiSelected && 
+         props.shape.scenarioMenus && 
+         props.shape.scenarioMenus.length > 0 && 
+         props.shape.shapeType != ShapeConfig.SHAPE_TYPE;
+});
+
+// Emits
+const emit = defineEmits<{
+  (
+    e: "resize-start",
+    event: MouseEvent,
+    position: "nw" | "ne" | "sw" | "se",
+    shape: Shape
+  ): void;
+  (e: "action-button-click", code: string, shape: Shape): void;
+  (e: "model-type-property-id-click", value: string, shape: Shape): void;
+}>();
+
+// Methods
+const getSelectionBoxStyle = (shape: Shape) => selectionBoxStyle(shape);
+const getHandleStyle = (h: any, shape: Shape) => handleStyle(h.position, shape);
+
+// Event handlers
+const onHandleMouseDown = (
+  event: MouseEvent,
+  position: "nw" | "ne" | "sw" | "se"
+) => {
+  emit("resize-start", event, position, props.shape);
+};
+
+const onActionButtonClick = (code: string) => {
+  emit("action-button-click", code, props.shape);
+};
+
+const onModelTypePropertyIdClick = () => {
+  if (props.shape.modelTypePropertyId) {
+    emit(
+      "model-type-property-id-click",
+      props.shape.modelTypePropertyId,
+      props.shape
+    );
+  }
+};
+</script>
+
+<style scoped>
+.selection-box {
+  pointer-events: none;
+  background: transparent;
+}
+
+.resize-handles {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.resize-handle {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background-color: #007bff;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  pointer-events: all;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  z-index: 999;
+}
+
+.resize-handle.is-disabled {
+  cursor: default !important;
+}
+
+.resize-handle:hover {
+  background-color: #0056b3;
+  transform: scale(1.2);
+}
+
+.action-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  pointer-events: all;
+  background: rgba(255, 255, 255, 0.95);
+  padding: 6px;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  border: 1px solid #e0e0e0;
+  backdrop-filter: blur(2px);
+}
+
+.action-btn {
+  width: 28px;
+  height: 28px;
+  border: 1px solid #d0d0d0;
+  border-radius: 3px;
+  background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: bold;
+  font-family: "Arial", sans-serif;
+  color: #495057;
+  transition: all 0.2s ease;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.action-btn:hover {
+  background: linear-gradient(to bottom, #e3f2fd, #bbdefb);
+  border-color: #90caf9;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(33, 150, 243, 0.3);
+  color: #1976d2;
+}
+
+.edit-btn:hover {
+  background: #e3f2fd;
+}
+
+.border-btn {
+  padding-bottom: 4px;
+  border-bottom: 1px solid #e0e0e0;
+}
+</style>

package/src/constants/index.ts

@@ -228,7 +228,9 @@ export const BlockKeyMap = {
   'ArbitraryRelationship':'Edge',//任意关系
   'DirectedRelationship':'Edge',//定向关系
   'OperationalControlFlow':'Edge',//业务控制流
+  'OperationalObjectFlow':'Edge',//业务对象流
   'FunctionControlFlow':'Edge',//功能控制流
+  'FunctionObjectFlow': 'Edge', // 功能对象流
   'ServiceConnector':'Edge',//服务连接器
   'ServiceControlFlow':'Edge',//服务控制流
   "ServiceObjectFlow": 'Edge', // 服务对象流

package/src/utils/contextMenuUtils.ts

@@ -1,5 +1,7 @@
 import { ref, type Ref } from 'vue';
 import { eventBus } from '../store';
+import _ from 'lodash';
+import { getUuid } from '../utils/index';
 
 // 菜单位置接口
 export interface MenuPosition {
@@ -40,6 +42,9 @@ const DEFAULT_MENU_CONFIG: Required<MenuConfig> = {
 
 // 右键菜单工具函数
 export class ContextMenuUtils {
+  // 用于存储复制的图元
+  private static copiedShapes: any[] = [];
+  
   /**
    * 处理右键菜单点击事件
    * @param event 鼠标事件
@@ -73,7 +78,7 @@ export class ContextMenuUtils {
     // 使用命中测试找到点击的图元
     const hit = pickTarget(shapes, point);
 
-    if (hit.kind === "shape" && hit.shape) {
+    if ((hit.kind === "shape" || hit.kind === "pin") && hit.shape) {
       // 选中图元
       if (selectShape) {
         selectShape(hit.shape);
@@ -174,11 +179,27 @@ export class ContextMenuUtils {
     }
   }
 
+  /**
+   * 设置复制的图元
+   */
+  static setCopiedShapes(shapes: any[]) {
+    this.copiedShapes = _.cloneDeep(shapes);
+    console.log('已复制的图元:', this.copiedShapes);
+  }
+  
+  /**
+   * 获取复制的图元
+   */
+  static getCopiedShapes(): any[] {
+    return this.copiedShapes;
+  }
+  
   /**
    * 处理复制
    */
   static handleCopy(target: any) {
     if (target) {
+      this.setCopiedShapes([target]);
       eventBus.emit('copy-shape', target);
     }
   }
@@ -187,9 +208,40 @@ export class ContextMenuUtils {
    * 处理粘贴
    */
   static handlePaste(target: any) {
-    if (target) {
-      eventBus.emit('paste-shape', target);
+    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);
+    });
+    
+    // 通过事件总线通知添加图元
+    eventBus.emit('paste-shapes', pastedShapes);
+    
+    // 通过事件总线通知选中新粘贴的图元
+    eventBus.emit('select-shapes', pastedShapes.map(s => s.id));
+    
+    console.log('已粘贴的图元:', pastedShapes);
   }
 
   /**
@@ -259,6 +311,11 @@ export const defaultMenuItems: MenuItemConfig[] = [
 ];
 
 // 标准右键菜单配置
-export const standardContextMenuConfig: MenuConfig = {
-  items: defaultMenuItems
-};
+// export const standardContextMenuConfig: MenuConfig = {
+//   items: defaultMenuItems.map(item => {
+//     if (item.id === 'copy' || item.id === 'paste') {
+//       return { ...item, disabled: false };
+//     }
+//     return item;
+//   })
+// };

package/src/utils/diagram.ts

@@ -375,13 +375,17 @@ export const nameInputStyle = (shape: Shape): Record<string, string> => {
  * 名称编辑容器样式 - 确保在父组件内水平居中
  */
 export const nameEditorContainerStyle = (shape: Shape): Record<string, string> => {
-  const b = shape.bounds ?? {} as any
-  const nb = (shape as any).nameBounds ?? {} as any
-  const ns = (shape as any).nameStyle ?? {} as any
+  // 使用shape.id重新从store获取最新的图元信息，确保位置是最新的
+  const graphStore = useGraphStore();
+  const latestShape = graphStore.shapes.find(s => s.id === shape.id) || shape;
+  
+  const b = latestShape.bounds ?? {} as any
+  const nb = (latestShape as any).nameBounds ?? {} as any
+  const ns = (latestShape as any).nameStyle ?? {} as any
 
-  if ((shape as any).shapeType === 'pin' && (nb.x != null) && (nb.y != null)) {
+  if ((latestShape as any).shapeType === 'pin' && (nb.x != null) && (nb.y != null)) {
     const fontSize = Number(ns.fontSize || nb.height || 12)
-    const textLen = (shape.name?.length || 0)
+    const textLen = (latestShape.name?.length || 0)
     const textWidth = Math.max(10, textLen * fontSize * 0.6)
     const boxW = Math.min(300, Math.max(40, textWidth + 14))
     const boxH = Math.max(22, fontSize + 10)
@@ -403,18 +407,18 @@ export const nameEditorContainerStyle = (shape: Shape): Record<string, string> =
     else top = yAbs - fontSize
 
     return {
-      position: 'absolute',
-      left: `${Math.round(left)}px`,
-      top: `${Math.round(top)}px`,
-      width: `${Math.round(boxW)}px`,
-      height: `${Math.round(boxH)}px`,
-      display: 'block',
-      zIndex: '1001',
-    }
+    position: 'absolute',
+    left: `${Math.round(left)}px`,
+    top: `${Math.round(top)}px`,
+    width: `${Math.round(boxW)}px`,
+    height: `${Math.round(boxH)}px`,
+    display: 'block',
+    zIndex: '1001',
   }
+}
 
-  const shapeBounds = shape.bounds ?? {};
-  const nameBounds = shape.nameBounds ?? {};
+  const shapeBounds = latestShape.bounds ?? {};
+  const nameBounds = latestShape.nameBounds ?? {};
 
   // 计算text name在画布中的绝对位置
   const absoluteY = (shapeBounds.y ?? 0) + (nameBounds.y ?? 0);

package/src/utils/keyboardUtils.ts

@@ -10,6 +10,8 @@ interface KeyboardConfig {
   onCancelConnection?: () => void;
   onShapesRemove?: (items: Array<{ modelId: string; shapeId: string; shapeType: string; isRemoveModelTree: boolean }>) => void;
   isEditingName?: () => boolean;
+  onCopy?: () => void;
+  onPaste?: () => void;
 }
 
 /**
@@ -124,6 +126,32 @@ export const createKeyboardHandler = (config: KeyboardConfig): KeyboardEventHand
       }
     }
 
+    // 按下Ctrl+C时复制选中的图元
+    if ((e.ctrlKey || e.metaKey) && e.key === 'c' && graphStore.museInGraphView && !isInputElement) {
+      // 如果正在编辑名称，不执行复制功能
+      if (config.isEditingName && config.isEditingName()) {
+        return;
+      }
+      
+      e.preventDefault();
+      if (config.onCopy) {
+        config.onCopy();
+      }
+    }
+
+    // 按下Ctrl+V时粘贴选中的图元
+    if ((e.ctrlKey || e.metaKey) && e.key === 'v' && graphStore.museInGraphView && !isInputElement) {
+      // 如果正在编辑名称，不执行粘贴功能
+      if (config.isEditingName && config.isEditingName()) {
+        return;
+      }
+      
+      e.preventDefault();
+      if (config.onPaste) {
+        config.onPaste();
+      }
+    }
+
     // 按下方向键时移动选中的图元（不在输入框或文本域中时）
     if ((e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === 'ArrowLeft' || e.key === 'ArrowRight') && graphStore.museInGraphView && !isInputElement) {
       // 如果正在编辑名称，不执行移动功能

package/src/utils/nameEditUtils.ts

@@ -11,7 +11,7 @@ export interface NameEditOptions {
 export class NameEditManager {
   private isEditing: Ref<boolean>;
   private editingName: Ref<string>;
-  private nameInput: Ref<HTMLInputElement | undefined>;
+  private nameInput: Ref<HTMLInputElement | undefined | null>;
   private options: NameEditOptions;
 
   constructor(options: NameEditOptions = {}) {
@@ -30,6 +30,11 @@ export class NameEditManager {
     };
   }
 
+  // 设置名称输入框引用
+  setNameInput(input: HTMLInputElement | null) {
+    this.nameInput.value = input;
+  }
+
   // 开始编辑名称
   async startEdit(shape: Shape | null): Promise<void> {
     if (!shape || this.isEditing.value) return;

package/src/utils/packgeMap.ts

@@ -1 +0,0 @@
-export const packageMap = ['Strategic']