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

package/src/index.ts

@@ -14,7 +14,7 @@ export { useGraphStore, eventBus } from './store'
 export { ContextMenuUtils } from './utils/contextMenuUtils'
 
 // 导出类型
-export type { Shape, Bounds, Style, NameObject, TaggedValueLabel, Comparent, GraphEvents } from './types'
+export type { Shape, Bounds, Style, NameObject, TaggedValueLabel, Comparent, GraphEvents, GanttData, GanttColumn, GanttContainsModel } from './types'
 /**
  * 可选的安装参数：允许使用方主动把 pinia 传进来
  */

package/src/render/shape-renderer.ts

@@ -1,6 +1,6 @@
 import type { CSSProperties } from "vue";
 import type { Shape } from "@/types";
-import { ShapeKeyMap, DiagramKeyMap, PinKeyMap, EdgeKeyMap } from "../constants";
+import { ShapeKeyMap, DiagramKeyMap, PinKeyMap, EdgeKeyMap, GanttKeyMap, TableKeyMap, MatrixKeyMap } from "../constants";
 import { getShapeComponentByKey } from "./shape-registry";
 
 // 根据 shapeKey 匹配具体组件 (shapeType: 'shape')
@@ -21,6 +21,24 @@ function getComponentByEdgeKey(shapeKey: string) {
   return getShapeComponentByKey(componentName) || componentName;
 }
 
+// 根据 shapeKey 匹配 Gantt 组件 (shapeType: 'gantt')
+export function getComponentByGanttKey(shapeKey: string) {
+  const componentName = (GanttKeyMap as any)[shapeKey] || shapeKey;
+  return getShapeComponentByKey(componentName) || componentName;
+}
+
+// 根据 shapeKey 匹配 Table 组件 (shapeType: 'table')
+export function getComponentByTableKey(shapeKey: string) {
+  const componentName = (TableKeyMap as any)[shapeKey] || shapeKey;
+  return getShapeComponentByKey(componentName) || componentName;
+}
+
+// 根据 shapeKey 匹配 Matrix 组件 (shapeType: 'matrix')
+export function getComponentByMatrixKey(shapeKey: string) {
+  const componentName = (MatrixKeyMap as any)[shapeKey] || shapeKey;
+  return getShapeComponentByKey(componentName) || componentName;
+}
+
 // 根据 shapeKey 匹配 Edge 组件 (shapeType: 'diagram')
 export function getComponentByDiagramKey(shapeKey: string) {
   const componentName = (DiagramKeyMap as any)[shapeKey] || shapeKey;
@@ -28,6 +46,7 @@ export function getComponentByDiagramKey(shapeKey: string) {
 }
 
 // 根据 shape 读取组件
+// 注意：后端可能对矩阵/表格/甘特图也传 shapeType='diagram'，需按 shapeKey 优先匹配 Matrix/Table/Gantt
 export const getShapeComponent = (shape: Shape) => {
   const { shapeType, shapeKey } = shape;
   switch (shapeType) {
@@ -36,9 +55,18 @@ export const getShapeComponent = (shape: Shape) => {
     case "shape":
       return getComponentByShapeKey(shapeKey);
     case "diagram":
+      if ((MatrixKeyMap as any)[shapeKey]) return getComponentByMatrixKey(shapeKey);
+      if ((TableKeyMap as any)[shapeKey]) return getComponentByTableKey(shapeKey);
+      if ((GanttKeyMap as any)[shapeKey]) return getComponentByGanttKey(shapeKey);
       return getComponentByDiagramKey(shapeKey);
     case "edge":
       return getComponentByEdgeKey(shapeKey);
+    case "gantt":
+      return getComponentByGanttKey(shapeKey);
+    case "table":
+      return getComponentByTableKey(shapeKey);
+    case "matrix":
+      return getComponentByMatrixKey(shapeKey);
     default:
       return "ShapeComponent";
   }
@@ -108,11 +136,43 @@ export function clearEdgeStyleCache(): void {
 }
 
 // 根据 shape 的 bounds 生成样式
+// shapeType 为 diagram 但 shapeKey 对应 Matrix/Table/Gantt 时也使用铺满样式
 export const getShapeStyle = (shape: Shape): CSSProperties => {
-  const { bounds, shapeType } = shape
+  const { bounds, shapeType, shapeKey } = shape
 
   if (shapeType === "edge") return getEdgeShapeStyle(shape)
 
+  const isDiagramAsMatrixOrTableOrGantt =
+    shapeType === "diagram" &&
+    ((MatrixKeyMap as any)[shapeKey] || (TableKeyMap as any)[shapeKey] || (GanttKeyMap as any)[shapeKey])
+  if (isDiagramAsMatrixOrTableOrGantt) {
+    return {
+      position: "relative",
+      width: "100%",
+      height: "100%",
+    }
+  }
+  if (shapeType === "gantt") {
+    return {
+      position: "relative",
+      width: "100%",
+      height: "100%",
+    }
+  }
+  if (shapeType === "table") {
+    return {
+      position: "relative",
+      width: "100%",
+      height: "100%",
+    }
+  }
+  if (shapeType === "matrix") {
+    return {
+      position: "relative",
+      width: "100%",
+      height: "100%",
+    }
+  }
   return {
     position: "absolute",
     left: `${bounds?.x || 0}px`,