shalu-system-designer/apps/flowchart-designer/src/components/nodes/PopoverNode.tsx

import { Graph, Node } from "@antv/x6";
import React from "react";
import NodeMenu from "../NodeMenu";
import { Popover } from "antd";

export default function PopoverNode({
  node,
  graph,
}: {
  node: Node;
  graph: Graph;
}) {
  const { hideNodes = [] } = node.getData();
  const handleChange = (addNode?: Node) => {
    node.prop("addedNode", { addNode });
  };

  const handleChangeOpen = (open: boolean) => {
    if (!open) {
      node.prop("closedPopover", {});
      node.removeProp("closedPopover");
      node.removeProp("addedNode");
      setTimeout(() => {
        graph.removeCells([node]);
      }, 300);
    }
  };

  return (
    <div className="w-full h-full">
      <Popover
        content={
          <NodeMenu
            graph={graph}
            onChange={handleChange}
            position={node.position()}
            hideNodes={hideNodes}
          />
        }
        getPopupContainer={(n) => n}
        trigger={"click"}
        placement="bottom"
        arrow={false}
        defaultOpen={true}
        onOpenChange={handleChangeOpen}
      ></Popover>
    </div>
  );
}