shalu-system-designer/apps/er-designer/src/models/renderer.ts

import { ProjectInfo, RemarkInfo, TableItemType, TopicAreaInfo } from "@/type";
import { Graph } from "@antv/x6";

export const render = (graph: Graph, project: ProjectInfo) => {
  const { tables, relations, topicAreas, remarks } = project;
  // 渲染表格
  const renderTable = (tableItem: TableItemType) => {
    graph.addNode({
      shape: "table-node",
      x: 300,
      y: 100,
      width: 220,
      height: 69,
      id: tableItem.table.id,
      data: tableItem,
      zIndex: 3,
      ports: {
        groups: {
          // 字段名前连接桩
          columnPort: {
            markup: [
              {
                tagName: "rect",
                selector: "rect",
              },
              {
                tagName: "circle",
                selector: "circle",
              },
            ],
            position: {
              name: "absolute",
              args: {
                x: 12,
                y: 42,
              },
            },
          },
        },
      },
    });
  };
  // 渲染主题区域
  const renderTopicArea = (topicArea: TopicAreaInfo) => {
    graph.addNode({
      shape: "topic-node",
      x: 300,
      y: 100,
      width: 200,
      height: 200,
      id: topicArea.id,
      data: topicArea,
      zIndex: 0,
    });
  };
  // 渲染备注
  const renderRemark = (remark: RemarkInfo) => {
    const notice = graph?.addNode({
      shape: "notice-node",
      x: 300,
      y: 100,
      width: 200,
      height: 200,
      id: remark.id,
      data: remark,
      zIndex: 1,
    });
  };
  // 渲染关系
  const renderRelationEdge = (
    id: string,
    source: {
      tableId: string;
      columnId: string;
    },
    target: {
      tableId: string;
      columnId: string;
    }
  ) => {
    // 添加关系连线
    const relationEdge = graph?.addEdge({
      id,
      router: {
        name: "er",
        args: {
          offset: "center",
          direction: "H",
        },
      },
      connector: { name: "rounded" },
      attrs: {
        line: {
          stroke: "#333",
          strokeWidth: 1,
          targetMarker: null,
        },
      },
      source: {
        cell: source.tableId,
        port: source.columnId + "_port2",
        anchor: "left",
      },
      target: {
        cell: target.tableId,
        port: target.columnId + "_port2",
        anchor: "left",
      },
      data: {
        type: "relation",
      },
      defaultLabel: {
        markup: [
          {
            tagName: "circle",
            selector: "bg",
          },
          {
            tagName: "text",
            selector: "txt",
          },
        ],
        attrs: {
          txt: {
            fill: "#fff",
            textAnchor: "middle",
            textVerticalAnchor: "middle",
          },
          bg: {
            ref: "txt",
            fill: "#333",
            r: 10,
            strokeWidth: 0,
          },
        },
      },
    });
    relationEdge?.appendLabel({
      attrs: {
        txt: {
          text: 1,
        },
      },
      position: {
        distance: 25,
      },
    });
    relationEdge?.appendLabel({
      attrs: {
        txt: {
          text: 1,
        },
      },
      position: {
        distance: -25,
      },
    });
  };

  const cells = graph.getCells();

  const allIds = [
    ...tables.map((table) => table.table.id),
    ...topicAreas.map((topicArea) => topicArea.id),
    ...remarks.map((remark) => remark.id),
    ...relations.map((relation) => relation.id),
  ];
  // 移除空数据节点
  cells.forEach((cell) => {
    if (!allIds.includes(cell.id)) {
      cell.remove();
    }
  });
  tables.forEach((tableItem) => {
    if (!graph.getCellById(tableItem.table.id)) {
      renderTable(tableItem);
    }
  });
  topicAreas.forEach((topicArea) => {
    if (!graph.getCellById(topicArea.id)) {
      renderTopicArea(topicArea);
    }
  });
  remarks.forEach((remark) => {
    if (!graph.getCellById(remark.id)) {
      renderRemark(remark);
    }
  });
  // setTimeout(() => {
    
  // }, 100);
  relations.forEach((relation) => {
    if (!graph.getCellById(relation.id)) {
      renderRelationEdge(
        relation.id,
        {
          tableId: relation.primaryTable,
          columnId: relation.primaryKey,
        },
        {
          tableId: relation.foreignTable,
          columnId: relation.foreignKey,
        }
      );
    }
  });
};