import { CompoundedComponent } from "@/types";
import { register } from "@antv/x6-react-shape";
import { Graph, Node } from "@antv/x6";

const component = ({ node, graph }: { node: Node, graph: Graph }) => {

  return (
    <>
      <div
        className="relative text-0 w-0 h-full border-solid border-1 border-solid-color"
      >
       <span className="absolute w-14px left-2px top-0px text-12px">阶段</span>
      </div>
    </>
  );
};

register({
  shape: "custom-react-verticalSeparator",
  width: 2,
  height: 270,
  effect: ["data"],
  component: component,
});

const verticalSeparator: CompoundedComponent = {
  name: "分隔符(需拖动到水平泳池上)",
  icon: require("./image/verticalSeparator.png"),
  node: {
    shape: "custom-react-verticalSeparator",
    data: {
      label: "",
      // 分割符
      isSeparator: true,
      // 分割方向
      separatorDiration: "vertical",
      // 忽略拖动
      ignoreDrag: true,
      // 不用创建
      noCreate: true,
    },
  },
};

export default verticalSeparator;
