shalu-system-designer/apps/er-designer/src/components/TopicNode.tsx

import React, { useEffect, useMemo, useRef } from "react";
import { register } from "@antv/x6-react-shape";
import { Graph, Node } from "@antv/x6";
import type { TopicAreaInfo } from "@/type";

const TopicAreaNode = ({ node, graph }: { node: Node; graph: Graph }) => {
  const { style, name } = node.getData<TopicAreaInfo>();
  return <div className="w-full h-full" style={style}>
    <p>{name}</p>
  </div>
};

register({
  shape: "topic-node",
  component: TopicAreaNode,
  width: 300,
  height: 300,
  effect: ["data"],
});