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

package/src/components/LineStyle/LineStyleMarker.vue

@@ -25,7 +25,7 @@
 
       <!-- 泛化 - 空心三角形箭头 -->
       <template v-else-if="shapeKey === EDGE_TYPE.GENERALIZATION">
-        <marker :id="`diamond-${shapeKey}`" markerWidth="10" markerHeight="7" refX="" refY="3.5" orient="auto">
+        <marker :id="`diamond-${shapeKey}`" markerWidth="10" markerHeight="7" refX="0" refY="3.5" orient="auto">
           <path d="M0 0 L10 3.5 L0 7 Z" fill="none" stroke="#5E5E5E" stroke-width="1" />
         </marker>
       </template>

package/src/components/{NameEditor.vue → NameEditor/NameEditor.vue}

@@ -42,9 +42,9 @@
 
 <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';
+import type { Shape } from '../../types';
+import { nameTextBoxContainerStyle, nameTextBoxStyle, nameEditorContainerStyle, nameInputStyle } from '../../utils/diagram';
+import type { INameEditManager } from '../../hooks/useNameEdit';
 
 // 定义组件的props
 interface NameEditorProps {
@@ -52,7 +52,7 @@ interface NameEditorProps {
   canEdit: boolean;
   isEditingName: boolean;
   editingName: string;
-  nameEditManager: NameEditManager;
+  nameEditManager: INameEditManager;
 }
 
 // 定义组件的事件

package/src/components/{SelectionBox.vue → SelectionBox/SelectionBox.vue}

@@ -22,7 +22,7 @@
           @mousedown.stop.prevent="onModelTypePropertyIdClick"
           title="设置类型"
         >
-          <img src="../statics/icons/childIcons/设置类型.png" alt="设置类型" />
+          <img src="../../statics/icons/childIcons/设置类型.png" alt="设置类型" />
         </button>
       </div>
       <button
@@ -41,15 +41,15 @@
 
 <script setup lang="ts">
 import { computed } from "vue";
-import type { Shape } from "../types";
-import { resizeHandles } from "../constants/index";
+import type { Shape } from "../../types";
+import { resizeHandles } from "../../constants/index";
 import {
   selectionBoxStyle,
   handleStyle,
   actionButtonsStyle,
   ShapeConfig,
-} from "../utils/diagram";
-import { getIcon } from "../utils/iconLoader";
+} from "../../utils/diagram";
+import { getIcon } from "../../utils/iconLoader";
 
 // Props
 const props = defineProps<{

package/src/components/Shape/Block.vue

@@ -29,7 +29,7 @@
           :font-weight="nameStyle.fontWeight || 'bold'" :fill="nameStyle.color || '#000000'" style="cursor: pointer;">
           {{ shape.name }}
         </text>
-        <line v-if="shape.comparents?.length && shape.comparents[0]?.comparentShapes?.length" :x1="strokeWidth"
+        <line v-if="shape.showComparents" :x1="strokeWidth"
           :x2="vbW - strokeWidth" :y1="(nameBounds.y || 45) + 20" :y2="(nameBounds.y || 45) + 20" stroke="#767a7d"
           stroke-width="1" />
         <!-- 图标图片 -->

package/src/constants/edgeShapeKeys.ts

@@ -35,20 +35,60 @@ export const DASHED_EDGE_SHAPES = [
   'Desires',
   'Achieves',
   'Implements',
-  'IsCapableToperform',
   'ArbitraryConnector',
   'OperationalControlFlow',
   'FunctionControlFlow',
   'ServiceControlFlow',
   'IsCapableToPerform',
-  'Exhibits'
+  'ProvidesCompetence',
+  'OwnsProcesses',
+  'FillsPost',
+  'Exhibits',
+  'CompetenceToConduct',
+  'control',
+  'command',
+  'RequiresCompetence',
+  'OwnsRisk',
+  'Affects',
+  'Mitigates',
+  'Protects',
+  'MapsToCapability',
+  'ActualResourceRelationship'
 ];
 
 /**
  * 需要显示keywords和lineName的边类型集合
  * 与DASHED_EDGE_SHAPES保持一致，便于统一管理
  */
-export const EDGES_WITH_KEYWORDS = DASHED_EDGE_SHAPES;
+export const EDGES_WITH_KEYWORDS = [
+  'Phases',
+  'Sequence',
+  'Dependency',
+  'Creates',
+  'ComparesTo',
+  'ImpactedBy',
+  'Desires',
+  'Achieves',
+  'Implements',
+  'ArbitraryConnector',
+  'OperationalControlFlow',
+  'FunctionControlFlow',
+  'ServiceControlFlow',
+  'IsCapableToPerform',
+  'ProvidesCompetence',
+  'OwnsProcesses',
+  'FillsPost',
+  'CompetenceToConduct',
+  'control',
+  'command',
+  'RequiresCompetence',
+  'OwnsRisk',
+  'Affects',
+  'Mitigates',
+  'Protects',
+  'MapsToCapability',
+  'Exhibits'
+];
 
 /**
  * 带箭头的边类型集合

package/src/constants/index.ts

@@ -6,6 +6,7 @@ export const ShapeType = {
   Label: 'Label',     // 标签
   Shape: 'Shape',      // 图元
   ConceptualRole: 'ConceptualRole', //概念角色
+  Gantt: 'Gantt', //甘特图
 } as const
 
 // 导出类型
@@ -121,7 +122,7 @@ export const BlockKeyMap = {
   'SecurityConnectivityDiagram': "Diagram", //安全连通图
   'SecurityConnectivityTable': "Diagram", //安全连通表
   'SecurityProcessesDiagram': "Diagram", //安全流程图
-  'SecurityProcessesFlowDiagram': "Diagram", //安全内部流程图
+  'SecurityProcessFlowDiagram': "Diagram", //安全内部流程图
   'SecurityConstraintsDiagram': "Diagram", //安全约束图
   'SecurityConstraintsDefinitionDiagram': "Diagram", //安全约束定义图
   'RisksToAssetsMappingMatrix': "Diagram", //资产风险映射矩阵
@@ -204,6 +205,7 @@ export const BlockKeyMap = {
   'Person': 'Block',//人员
   'SecurityProcess': 'Block',//安全流程
   'ResourceMitigation': 'Block',  // 资源缓解措施
+  'OperationalMitigation': 'Block', //  业务缓解措施
 
   // 线
   'Association': 'Edge', //双向关联
@@ -223,7 +225,6 @@ export const BlockKeyMap = {
   'ImpactedBy':'Edge',//受到影响
   'Desires':'Edge',//要求
   'Achieves':'Edge',//达到
-  'IsCapableToperform':'Edge',//能够胜任
   'ArbitraryConnector':'Edge',//任意连接器
   'ArbitraryRelationship':'Edge',//任意关系
   'DirectedRelationship':'Edge',//定向关系
@@ -237,6 +238,18 @@ export const BlockKeyMap = {
   'Connector':'Edge',//连接器
   'OperationalConnector':'Edge',//业务连接器
   'IsCapableToPerform':'Edge',//能够胜任
+  'OwnsProcesses':'Edge',//拥有流程
+  'ActualResourceRelationship':'Edge',//实际资源关系
+  'FillsPost':'Edge',//填写职位申请
+  'control':'Edge',//控制
+  'command':'Edge',//命令
+  'RequiresCompetence':'Edge',//需求权限
+  'ProvidesCompetence':'Edge',//提供权限
+  'OwnsRisk':'Edge',//承担风险
+  'Affects':'Edge',//影响
+  'Mitigates':'Edge',//缓解
+  'Protects':'Edge',//保护
+  'MapsToCapability':'Edge',//适用能力
   'ProjectSequence':'Edge',//项目顺序
   'MilestoneDependency':'Edge',//里程碑依赖
   'DirectedAssociation':'Edge',//定向关联
@@ -417,7 +430,7 @@ export const DiagramKeyMap = {
   'SecurityConnectivityDiagram': 'StrategicTaxonomyDiagram', //安全连通图
   'SecurityConnectivityTable': 'StrategicTaxonomyDiagram', //安全连通表
   'SecurityProcessesDiagram': 'StrategicTaxonomyDiagram', //安全流程图
-  'SecurityProcessesFlowDiagram': 'StrategicTaxonomyDiagram', //安全内部流程图
+  'SecurityProcessFlowDiagram': 'StrategicTaxonomyDiagram', //安全内部流程图
   'SecurityConstraintsDiagram': 'StrategicTaxonomyDiagram', //安全约束图
   'SecurityConstraintsDefinitionDiagram': 'StrategicTaxonomyDiagram', //安全约束定义图
   'RisksToAssetsMappingMatrix': 'StrategicTaxonomyDiagram', //风险与资产映射矩阵
@@ -446,7 +459,9 @@ export const DiagramKeyMap = {
 export const PinKeyMap = {
   'OutputPin': 'Pin', //输出引脚
   'InputPin': 'Pin', //输入引脚
-  "OperationalPort": "Port"
+  "OperationalPort": "Port", //业务端口
+  "ServicePort": "Port", //服务端口
+  "ResourcePort": "Port", //资源端口
 } as const
 
 // 导出DiagramKeyMap类型

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './useHighlight';
+export * from './useNameEdit';
+export * from './useResize';

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;
+}