@mx-sose-front/mx-sose-graph 1.1.2 → 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/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 { INameEditManager } from '../../hooks/useNameEdit';
+
+// 定义组件的props
+interface NameEditorProps {
+  selectedShape: Shape | null;
+  canEdit: boolean;
+  isEditingName: boolean;
+  editingName: string;
+  nameEditManager: INameEditManager;
+}
+
+// 定义组件的事件
+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/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/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,18 +225,31 @@ export const BlockKeyMap = {
   'ImpactedBy':'Edge',//受到影响
   'Desires':'Edge',//要求
   'Achieves':'Edge',//达到
-  'IsCapableToperform':'Edge',//能够胜任
   'ArbitraryConnector':'Edge',//任意连接器
   'ArbitraryRelationship':'Edge',//任意关系
   'DirectedRelationship':'Edge',//定向关系
   'OperationalControlFlow':'Edge',//业务控制流
+  'OperationalObjectFlow':'Edge',//业务对象流
   'FunctionControlFlow':'Edge',//功能控制流
+  'FunctionObjectFlow': 'Edge', // 功能对象流
   'ServiceConnector':'Edge',//服务连接器
   'ServiceControlFlow':'Edge',//服务控制流
   "ServiceObjectFlow": 'Edge', // 服务对象流
   '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',//定向关联
@@ -415,7 +430,7 @@ export const DiagramKeyMap = {
   'SecurityConnectivityDiagram': 'StrategicTaxonomyDiagram', //安全连通图
   'SecurityConnectivityTable': 'StrategicTaxonomyDiagram', //安全连通表
   'SecurityProcessesDiagram': 'StrategicTaxonomyDiagram', //安全流程图
-  'SecurityProcessesFlowDiagram': 'StrategicTaxonomyDiagram', //安全内部流程图
+  'SecurityProcessFlowDiagram': 'StrategicTaxonomyDiagram', //安全内部流程图
   'SecurityConstraintsDiagram': 'StrategicTaxonomyDiagram', //安全约束图
   'SecurityConstraintsDefinitionDiagram': 'StrategicTaxonomyDiagram', //安全约束定义图
   'RisksToAssetsMappingMatrix': 'StrategicTaxonomyDiagram', //风险与资产映射矩阵
@@ -444,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';