shalu-system-designer/apps/flowchart-designer/src/components/nodes/index.ts

import { register } from "@antv/x6-react-shape";
import { NodeType } from "@/enum";

import Start from "./Start";
import And from "./And";
import AutoHandle from "./AutoHandle";
import Decision from "./Decision";
import End from "./End";
import Handle from "./Handle";
import Link from "./Link";
import PopoverNode from "./PopoverNode";

// 通用连接桩
const ports = {
  groups: {
    top: {
      position: 'top',
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: '#5F95FF',
          strokeWidth: 1,
          fill: '#fff',
          style: {
            visibility: 'hidden',
          },
        },
      },
    },
    right: {
      position: 'right',
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: '#5F95FF',
          strokeWidth: 1,
          fill: '#fff',
          style: {
            visibility: 'hidden',
          },
        },
      },
    },
    bottom: {
      position: 'bottom',
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: '#5F95FF',
          strokeWidth: 1,
          fill: '#fff',
          style: {
            visibility: 'hidden',
          },
        },
      },
    },
    left: {
      position: 'left',
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: '#5F95FF',
          strokeWidth: 1,
          fill: '#fff',
          style: {
            visibility: 'hidden',
          },
        },
      },
    },
  },
  items: [
    {
      group: 'top',
    },
    {
      group: 'right',
    },
    {
      group: 'bottom',
    },
    {
      group: 'left',
    },
  ],
}

export const nodes = [
  { name: "start-node", component: Start, type: NodeType.START, data: { name: '开始'} },
  { name: "and-node", component: And, type: NodeType.AND, data: { name: '与'} },
  { name: "autohandle-node", component: AutoHandle, type: NodeType.AUTO_PROCESS, data: { name: '自动处理'} },
  { name: "decision-node", component: Decision, type: NodeType.DECISION, data: { name: '判断'} },
  { name: "end-node", component: End, type: NodeType.END, data: { name: '结束'} },
  { name: "handle-node", component: Handle, type: NodeType.PROCESS, data: { name: '处理'} },
  { name: "link-node", component: Link, type: NodeType.LINK, data: { name: '连接'} },
];

nodes.forEach((node) => {
  register({
    shape: node.name,
    width: 300,
    height: 108,
    effect: ["data"],
    component: node.component,
    ports: {...ports}
  });
});

register({
  shape: 'menu-popover',
  width: 304,
  height: 184,
  component: PopoverNode
});