@mx-sose-front/mx-sose-graph 1.2.1 → 1.2.2

package/src/components/Shape/DividingLine.vue

@@ -198,6 +198,8 @@ const headerHeight = computed(() => {
 
 // 响应式状态管理
 const actualContentHeight = ref<number>(0); // 实际内容高度
+  // 实际内容宽度
+const actualContentWidth = ref<number>(0)
 const contentRef = ref<HTMLElement | null>(null);
 
 // 内容区域高度计算
@@ -278,73 +280,90 @@ const reportMetrics = () => {
   });
 }
 
-// 测量实际内容高度并更新组件
-const measureContentHeight = () => {
-  if (!contentRef.value) return;
+/**
+ * 测量内容真实宽高
+ */
+const measureContentSize = () => {
+  if (!contentRef.value) return
+
+  // 先重置，保证测量的是内容自然撑开的尺寸
+  contentRef.value.style.width = 'auto'
+  contentRef.value.style.height = 'auto'
+  contentRef.value.style.maxWidth = 'none'
+
+  // 真实内容尺寸
+  const realWidth = contentRef.value.scrollWidth
+  const realHeight = contentRef.value.scrollHeight
+
+  let changed = false
+
+  if (realWidth !== actualContentWidth.value) {
+    actualContentWidth.value = realWidth
+    changed = true
+  }
 
-  // 强制重新计算内容尺寸，特别是在宽度变化的情况下
-  contentRef.value.style.width = '100%'; // 确保内容区域宽度正确
-  contentRef.value.style.height = 'auto'; // 重置高度以测量实际需要的高度
+  if (realHeight !== actualContentHeight.value) {
+    actualContentHeight.value = realHeight
+    changed = true
+  }
 
-  // 获取实际内容高度
-  const actualHeight = contentRef.value.scrollHeight;
-  if (actualHeight !== actualContentHeight.value) {
-    actualContentHeight.value = actualHeight;
+  if (changed) {
     nextTick(() => {
       updateShapeBounds()
       debouncedReportMetrics()
     })
-
   }
-};
+}
 
 // 更新组件宽度和高度
+/**
+ * 更新组件宽高
+ */
 const updateShapeBounds = () => {
-  // 计算内容所需的最小总高度
-  const minTotalHeight = headerHeight.value + 15 + contentHeight.value + 10; // 加上一些额外空间
+  // 内容区左右 padding：foreignObject x=12，左右一共约 24
+  const contentRequiredWidth = actualContentWidth.value > 0
+    ? actualContentWidth.value + 24
+    : 0
+
+  // 标题区和内容区，取最大值
+  const requiredWidth = Math.max(
+    estimatedTextWidth.value,
+    contentRequiredWidth,
+    150
+  )
+
+  // 计算最小总高度
+  const minTotalHeight = headerHeight.value + 15 + contentHeight.value + 10
 
-  // 设置一个基于字体大小的最小高度，确保字体较大时组件也能正常显示
   const fontSizeBasedMinHeight = Math.max(
     (keywordsStyle.value.fontSize || 12) * 3,
     (nameStyle.value.fontSize || 12) * 3
-  ) + 50; // 基于字体大小的最小高度 + 内容区域基本高度
-
-  // 设置一个明确的最小高度限制，确保组件不会太小
-  const explicitMinHeight = 110; // 明确的最小高度值，不小于100
-  const effectiveMinHeight = Math.max(minTotalHeight, fontSizeBasedMinHeight, explicitMinHeight);
+  ) + 50
 
-  // 获取当前组件尺寸
-  const currentWidth = props.shape.bounds?.width || 0;
-  const currentHeight = props.shape.bounds?.height || 0;
+  const explicitMinHeight = 110
+  const effectiveMinHeight = Math.max(
+    minTotalHeight,
+    fontSizeBasedMinHeight,
+    explicitMinHeight
+  )
 
-  // 获取所需宽度，确保包含文本内容和图标
-  const requiredWidth = Math.max(estimatedTextWidth.value, 120); // 确保至少有120的宽度
+  const currentWidth = props.shape.bounds?.width || 0
+  const currentHeight = props.shape.bounds?.height || 0
 
-  // 准备更新的属性
-  const updates: any = {};
+  const nextWidth = Math.max(currentWidth, requiredWidth)
+  const nextHeight = Math.max(currentHeight, effectiveMinHeight)
 
-  // 重要：无论是否在缩放中，都确保组件高度至少达到有效最小高度
-  // 这可以防止预览框在缩放过程中变得太小
-  if (currentHeight < effectiveMinHeight) {
-    updates.height = effectiveMinHeight;
-  }
+  // 宽高没变就不更新，避免死循环
+  if (nextWidth === currentWidth && nextHeight === currentHeight) return
 
-  // 无论是否在缩放中，都确保宽度至少达到所需宽度
-  // 这可以防止缩小时预览框右边不显示
-  if (currentWidth < requiredWidth) {
-    updates.width = requiredWidth;
-  }
-
-  // 如果有更新，则应用
-  if (Object.keys(updates).length > 0) {
-    graphStore.updateShape(props.shape.id, {
-      bounds: {
-        ...props.shape.bounds,
-        ...updates
-      }
-    });
-  }
-};
+  graphStore.updateShape(props.shape.id, {
+    bounds: {
+      ...props.shape.bounds,
+      width: nextWidth,
+      height: nextHeight
+    }
+  })
+}
 
 // 添加额外的尺寸保护，在拖拽结束后强制检查最小尺寸
 const enforceMinSizeOnResizeEnd = () => {
@@ -389,7 +408,7 @@ const debouncedUpdateShapeBounds = debounce(updateShapeBounds, 100);
 
 // 监听尺寸变化，更新compartment区域
 const debouncedReportMetrics = debounce(reportMetrics, 100);
-const debouncedMeasureContentHeight = debounce(measureContentHeight, 100);
+const debouncedMeasureContentSize = debounce(measureContentSize, 100)
 
 // 监听拖拽缩放事件
 const handleDragStart = () => {
@@ -407,7 +426,7 @@ onMounted(() => {
   nextTick(() => {
     reportMetrics();
     // 初始测量内容高度
-    setTimeout(measureContentHeight, 0);
+    setTimeout(measureContentSize, 0)
     // 初始更新图元尺寸
     updateShapeBounds();
   });
@@ -419,7 +438,7 @@ onMounted(() => {
   eventBus.on('shape-resize-end', enforceMinSizeOnResizeEnd);
 
   // 监听内容变化相关的事件
-  window.addEventListener('resize', debouncedMeasureContentHeight);
+  window.addEventListener('resize', debouncedMeasureContentSize)
 });
 
 // 监听shape变化，重新计算尺寸
@@ -428,7 +447,7 @@ watch(() => [props.shape.name, props.shape.keywords, props.shape.bounds?.width,
     nextTick(() => {
       reportMetrics();
       // 当内容或宽度变化时重新测量高度
-      debouncedMeasureContentHeight();
+      debouncedMeasureContentSize()
     });
   }
 }, { deep: true }); // 启用深度监听以捕获样式对象的变化
@@ -487,8 +506,7 @@ watch(
   () => {
     if (!isResizing.value) {
       nextTick(() => {
-        // 重新测量内容高度
-        debouncedMeasureContentHeight()
+        debouncedMeasureContentSize()
       })
     }
   },
@@ -499,7 +517,7 @@ onBeforeUnmount(() => {
   eventBus.off('shape-drag-end', handleDragEnd);
   eventBus.off('shape-resize-start', handleDragStart);
   eventBus.off('shape-resize-end', enforceMinSizeOnResizeEnd);
-  window.removeEventListener('resize', debouncedMeasureContentHeight);
+  window.removeEventListener('resize', debouncedMeasureContentSize)
 });
 // ================== 监听 bounds 宽高变化 ==================
 
@@ -521,24 +539,22 @@ const lastBounds = ref({
 watch(
   () => [props.shape.bounds.width, props.shape.bounds.height],
   ([newW, newH]) => {
-    if (!isGhost.value) return
-    // 宽高兜底到默认值（150 x 135）
+    // 只有真实图元变化时，才通知父元素扩容
+    if (isGhost.value) return
+
     const width = newW ?? DEFAULT_WIDTH
     const height = newH ?? DEFAULT_HEIGHT
 
-    // 如果和上一次一致，直接返回，避免重复触发
     if (
-      width == lastBounds.value.width &&
-      height == lastBounds.value.height
+      width === lastBounds.value.width &&
+      height === lastBounds.value.height
     ) {
       return
     }
 
-    // 更新“上一次”的记录
     lastBounds.value = { width, height }
-    // 只有当宽高不再是原始 150 x 135 时才认为“真的变化”，再去调用其他方法
-    if (
-      width !== DEFAULT_WIDTH || height !== DEFAULT_HEIGHT) {
+
+    if (width !== DEFAULT_WIDTH || height !== DEFAULT_HEIGHT) {
       graphStore.expandParentAndEmitSizeUpdateByChild(props.shape)
     }
   }

package/src/components/Table/Table.vue

@@ -909,6 +909,8 @@ function handleCanvasDataChange(data: any[]) {
       ...d,
       hasChildren: false,
     })) as (GanttData & { hasChildren: boolean })[];
+  }else{
+    ganttItems.value = [];
   }
 }
 

package/src/constants/edgeShapeKeys.ts

@@ -55,7 +55,8 @@ export const DASHED_EDGE_SHAPES = [
   'Protects',
   'MapsToCapability',
   'ActualResourceRelationship',
-  'ProjectSequence'
+  'ProjectSequence',
+  'Supports'
 ];
 
 /**
@@ -92,7 +93,8 @@ export const EDGES_WITH_KEYWORDS = [
   'Protects',
   'MapsToCapability',
   'ActualResourceRelationship',
-  'ProjectSequence'
+  'ProjectSequence',
+  'Supports'
 ];
 
 /**

package/src/constants/index.ts

@@ -74,6 +74,7 @@ export const EdgeKeyMap = {
   'ResourceConnector': 'Edge',//资源连接器
   'CompetenceToConduct': 'Edge',//开展工作能力
   'ResponsibleFor': 'Edge',//负责
+  'Supports': 'Edge',//支持
 } as const
 
 // Diagram 类型 (shapeType: 'diagram') - 用于组件渲染映射
@@ -169,11 +170,9 @@ export const DiagramKeyMap = {
   'ProjectsProcessesDiagram': 'StrategicTaxonomyDiagram', //项目流程图
   'ProjectsProcessesFlowDiagram': 'StrategicTaxonomyDiagram', //项目内部流程图
   'ActualProjectMilestoneSummaryTable': 'StrategicTaxonomyDiagram', //实际项目里程碑摘要表
-  'ActualProjectsToCapabilitiesMappingMatrix': 'StrategicTaxonomyDiagram', //实际项目与能力映射矩阵
   'ActualResponsibleResourcesToActualProjectsMappingMatrix': 'StrategicTaxonomyDiagram', //实际负责资源与实际项目映射矩阵
   'ProjectActivitiesToCapabilitiesMappingMatrix': 'StrategicTaxonomyDiagram', //项目活动到能力映射矩阵
   'StandardsTaxonomyDiagram': 'StrategicTaxonomyDiagram', //标准概念图
-  'StandardsTaxonomyTable': 'StrategicTaxonomyDiagram', //标准概念表
   'StandardsStructureDiagram': 'StrategicTaxonomyDiagram', //标准结构图
   'StandardsTraceabilityDiagram': 'StrategicTaxonomyDiagram', //标准可追溯图
   'ActualResourcesTaxonomyMatrix': 'StrategicTaxonomyDiagram', //实际资源概念矩阵
@@ -231,6 +230,7 @@ export const GanttKeyMap = {
   'SV8SystemsEvolutionDescriptionDiagram': 'Gantt', //SV-8 系统演进描述甘特图
   'PV2ProjectTimelinesChart': 'Gantt', //PV-2项目时间进度甘特图
 } as const
+
 //Table 类型 (shapeType: 'table') - 表格组件渲染映射
 export const TableKeyMap = {
   'StrategicTaxonomyTable': 'Table', //战略概念表
@@ -244,15 +244,18 @@ export const TableKeyMap = {
   'ProjectsTaxonomyTable': 'Table', //项目概念表
   'ActualProjectMilestoneSummaryTable': 'Table', //实际项目里程碑汇总表 
   'StandardsTraceabilityTable': 'Table', //标准追溯表
+  'ResourcesConnectivityTable': 'Table', //资源连通表
+  'StandardsTaxonomyTable': 'Table', //标准概念表
 
   // dodaf
   'AV2IntegratedDictionaryTable': 'Table', //AV-2集成字典表
   'SvcV9ServicesTechnologyandSkillsForecastTable': 'Table', //SvcV-9 服务技术与技能预测表
   'StdV1StandardsProfileTable': 'Table', //StdV-1 标准配置表
   'StdV2StandardsForecastTable': 'Table', //StdV-2 标准预测表
-  'SV9SystemsTechologyandSkillsForecastTable': 'Table', //SV-9 系统技术与技能预测表
+  'SV9SystemsTechologyAndSkillsForecastTable': 'Table', //SV-9 系统技术与技能预测表
   'SV10aSystemsRulesModelTable': 'Table', //SV-10a 系统规则模型表
 } as const
+
 //Matrix 类型 (shapeType: 'matrix') - 矩阵组件渲染映射
 export const MatrixKeyMap = {
   'StrategicConnectivityMatrix': 'Matrix', //战略概念矩阵
@@ -266,7 +269,8 @@ export const MatrixKeyMap = {
   'RisksToAssetsMappingMatrix': 'Matrix', //风险到资产映射矩阵
   'SecurityControlsToRisksMappingMatrix': 'Matrix', //安全控制到风险映射矩阵
   'ProjectActivitiesToCapabilitiesMappingMatrix': 'Matrix', //项目活动到能力映射矩阵
-
+  'ActualProjectsToCapabilitiesMappingMatrix': 'Matrix', //实际项目与能力的映射矩阵
+  'ActualStrategicPhasesToCapabilitiesMappingMatrix': 'Matrix', //实际战略阶段与能力映射矩阵
   // dodaf
   'CV5CapabilityToOrganizationDeploymentMapping': 'Matrix', //CV-5能力到组织的映射矩阵
   'CV6CapabilityToOperationalActivitiesMappingMatrix': 'Matrix', //CV-6能力到业务活动映射矩阵
@@ -280,7 +284,7 @@ export const MatrixKeyMap = {
   'SvcV6ServicesResourceFlowMatrix': 'Matrix', //SvcV-6 服务资源流矩阵
   'SvcV7ServicesTypicalMeasuresMatrix': 'Matrix', //SvcV-7 服务典型度量矩阵
   'SV3SystemsSystemsMatrix': 'Matrix', //SV-3 系统 - 系统矩阵
-  'SV5aOperationalActivityToSystemsFunctionTraceabilityMatrix': 'Matrix', //SV-5a 业务活动到系统功能的可追溯性矩阵
+  'SV5aOperationalActivityToSystemsFunctionMatrix': 'Matrix', //SV-5a 业务活动到系统功能的可追溯性矩阵
   'SV5bOperationalActivityToSystemsTarceabilityMatrix': 'Matrix', //SV-5b 业务活动到系统的可追溯性矩阵
   'SV6SystemsResourceFlowMatrix': 'Matrix', //SV-6 系统资源流动矩阵
   'SV7SystemsActualMeasuresMatrix': 'Matrix', //SV-7 系统实际度量矩阵
@@ -504,6 +508,10 @@ export const ShapeKeyMap = {
   'ResourceParameter': 'Block', //资源参数
   'ResourceRole': 'Block', //资源角色
   'ResourceSignal': 'Block', //资源信号
+  'Standard': 'Block', //标准
+  'Protocol': 'Block', //协议
+  'ProtocolStack': 'Block', //协议栈
+  'ProtocolLayer': 'Block', //协议层
 
   // DividingLine 类型
   'EnterpriseGoal': 'DividingLine', //企业目标
@@ -551,7 +559,6 @@ export const ShapeKeyMap = {
   'StrategicActualStrategicPhaseTaxonomyTable': 'Diagram', //战略实际战略阶段分类表
   'StrategicActualDeploymentDiagram': 'Diagram', //战略实际部署图
   'StrategicConnectivityMatrixTable': 'Diagram', //战略连通矩阵表
-  'ActualStrategicPhasesToCapabilitiesMappingMatrix': 'Diagram', //实际战略阶段与能力映射矩阵
   'OperationalConnectivityTable': 'Diagram', //业务连通表
   'OperationalActivitiesToCapabilitiesMappingMatrix': 'Diagram', //业务活动与能力映射矩阵
   'OperationalPerformersToCapabilitiesMappingMatrix': 'Diagram', //业务执行者与能力映射矩阵
@@ -587,7 +594,6 @@ export const ShapeKeyMap = {
   'ResourcesTaxonomyTable': 'Diagram', //资源概念表
   'ResourcesStructureDiagram': 'Diagram', //资源结构图
   'ResourcesConnectivityDiagram': 'Diagram', //资源连通图
-  'ResourcesConnectivityTable': 'Diagram', //资源连通表
   'ResourcesInternalConnectivityDiagram': 'Diagram', //资源内部连通图
   'ResourcesProcessesDiagram': 'Diagram', //资源流程图
   'ResourcesProcessesFlowDiagram': 'Diagram', //资源内部流程图
@@ -615,17 +621,19 @@ export const ShapeKeyMap = {
   'ProjectsProcessesDiagram': 'Diagram', //项目流程图
   'ProjectsProcessesFlowDiagram': 'Diagram', //项目内部流程图
   'ActualProjectMilestoneSummaryTable': 'Diagram', //实际项目里程碑汇总表
-  'ActualProjectsToCapabilitiesMappingMatrix': 'Diagram', //实际项目与能力映射矩阵
   'ActualResponsibleResourcesToActualProjectsMappingMatrix': 'Diagram', //实际资源与实际项目对应关系矩阵
   'ProjectActivitiesToCapabilitiesMappingMatrix': 'Diagram', //项目活动与能力映射矩阵
   'StandardsTaxonomyDiagram': 'Diagram', //标准概念图
-  'StandardsTaxonomyTable': 'Diagram', //标准概念表
   'StandardsStructureDiagram': 'Diagram', //标准结构图
   'StandardsTraceabilityDiagram': 'Diagram', //标准追溯图
   'ActualResourcesTaxonomyMatrix': 'Diagram', //实际资源概念矩阵
   'ActualResourcesStructureDiagram': 'Diagram', //实际资源结构图
   'ActualResourcesConnectivityDiagram': 'Diagram', //实际资源连通图
   'ActualStrategicPhasesGanttChart': 'Diagram', //实际战略阶段甘特图
+  'OperationalTaxonomyTable': 'Diagram', //业务概念表
+  'StandardsTaxonomyTable': 'Diagram', //标准概念表
+  'ServicesTaxonomyTable': 'Diagram', //服务概念表
+  'StandardsRoadmapTable': 'Diagram', //标准路线图
 
   // DODAF Diagram 类型
   'AV1OverviewAndSummaryInformationDiagram': 'Diagram', //AV-1概述摘要图
@@ -682,7 +690,7 @@ export const ShapeKeyMap = {
   'StdV1StandardsProfileTable': 'Diagram', //StdV-1 标准配置表
   'StdV2StandardsForecastTable': 'Diagram', //StdV-2 标准预测表
   'SV3SystemsSystemsMatrix': 'Diagram', //SV-3 系统 - 系统矩阵
-  'SV5aOperationalActivityToSystemsFunctionTraceabilityMatrix': 'Diagram', //SV-5a 业务活动到系统功能的可追溯性矩阵
+  'SV5aOperationalActivityToSystemsFunctionMatrix': 'Diagram', //SV-5a 业务活动到系统功能的可追溯性矩阵
   'SV5bOperationalActivityToSystemsTarceabilityMatrix': 'Diagram', //SV-5b 业务活动到系统的可追溯性矩阵
   'SV6SystemsResourceFlowMatrix': 'Diagram', //SV-6 系统资源流动矩阵
   'SV7SystemsActualMeasuresMatrix': 'Diagram', //SV-7 系统实际度量矩阵

package/src/hooks/useChartRowSelection.ts

@@ -21,6 +21,10 @@ interface RemoveContext {
   selectedIndices: number[]
 }
 
+interface AddSuccessContext {
+  modelId?: string | null
+}
+
 /**
  * 行选择 Hook 配置项
  */
@@ -82,6 +86,7 @@ export function useChartRowSelection<T extends ChartRowItem>({
   const showContextMenu = ref(false)
   const contextMenuPosition = ref({ x: 0, y: 0 })
   const contextMenuTargetItem = ref<T | null>(null)
+  const pendingAddSelection = ref<AddSuccessContext | null>(null)
 
   /**
    * 缓存本次“移除”的上下文
@@ -393,19 +398,45 @@ export function useChartRowSelection<T extends ChartRowItem>({
    * 选中最后一行
    * 用于新增成功后的默认回选
    */
-  function selectLastRow() {
+  function selectLastRow(payload?: AddSuccessContext | string) {
     const list = items.value
     if (!list.length) {
-      selectedRowIds.value = new Set()
-      lastSelectedId.value = null
+      pendingAddSelection.value =
+        typeof payload === 'string' ? { modelId: payload } : payload ?? null
       return
     }
 
-    const last = list[list.length - 1]
-    selectedRowIds.value = new Set([last.id])
-    lastSelectedId.value = last.id
+    const targetModelId =
+      typeof payload === 'string'
+        ? payload
+        : payload?.modelId || null
+
+    const targetItem = targetModelId
+      ? list.find(item => item.modelId === targetModelId)
+      : null
+
+    if (targetModelId && !targetItem) {
+      pendingAddSelection.value =
+        typeof payload === 'string' ? { modelId: payload } : payload ?? null
+      return
+    }
+
+    pendingAddSelection.value = null
+    const nextSelected = targetItem || list[list.length - 1]
+    selectedRowIds.value = new Set([nextSelected.id])
+    lastSelectedId.value = nextSelected.id
+    // 默认选中新建行时，同步触发行点击链路，确保属性面板也刷新到当前行。
+    eventBus.emit('chart-row-click', nextSelected)
   }
 
+  watch(
+    () => items.value.map(item => `${item.id}:${item.modelId}`).join('|'),
+    () => {
+      if (!pendingAddSelection.value) return
+      selectLastRow(pendingAddSelection.value)
+    }
+  )
+
   /**
    * 同步“单行选中”状态
    * 供属性面板等只关心单选对象的模块使用

package/src/utils/keyboardUtils.ts

@@ -3,6 +3,7 @@ import { eventBus } from '../store';
 import _ from 'lodash';
 import { guardOperate } from './license-guard';
 import { ContextMenuUtils } from './contextMenuUtils';
+import { adjustCanvasToFitAllShapes } from './diagram';
 
 // 定义快捷键处理函数类型
 type KeyboardEventHandler = (e: KeyboardEvent) => void;
@@ -303,6 +304,7 @@ export const createKeyboardHandler = (config: KeyboardConfig): KeyboardEventHand
       const selectedShapes = graphStore.selectedIds
         .map(id => graphStore.shapeMap.get(id))
         .filter((shape): shape is NonNullable<typeof shape> => shape != null);
+      const hasNestedSelection = selectedShapes.some(shape => Boolean(shape.parenShapeId));
 
       // ==================== 防抖机制:记录初始状态 ====================
       // 在第一次移动时记录初始bounds
@@ -407,6 +409,17 @@ export const createKeyboardHandler = (config: KeyboardConfig): KeyboardEventHand
 
       // ==================== 防抖机制:重置定时器 ====================
       // 清除之前的定时器
+      // 键盘移动嵌套图元后，也要同步扩展父图元，保持与鼠标拖拽行为一致。
+      if (hasNestedSelection) {
+        selectedShapes.forEach(shape => {
+          const currentShape = graphStore.shapeMap.get(shape.id);
+          if (currentShape?.parenShapeId) {
+            graphStore.expandParentAndEmitSizeUpdateByChild(currentShape);
+          }
+        });
+        adjustCanvasToFitAllShapes();
+      }
+
       if (keyboardMoveTimer !== null) {
         window.clearTimeout(keyboardMoveTimer);
       }