shalu-system-designer/apps/designer/src/components/basic/braces.tsx

import { CompoundedComponent } from "@/types";
import { register } from "@antv/x6-react-shape";
import { Node } from "@antv/x6";
import { ports, defaultData } from "../data";
import CustomInput from "../CustomInput";
import { useSizeHook, useShapeProps } from "@/hooks";
const component = ({ node }: { node: Node }) => {
  const { label, text, fill, stroke, opacity } = node.getData();
  const { size, ref } = useSizeHook();
  const {
    fillContent,
    defsContent,
    strokeColor,
    strokeWidth,
    strokeDasharray,
  } = useShapeProps(fill, size, stroke);

  const { width: w, height: h } = size;

  return (
    <>
      <div
        className="relative text-0 w-full h-full"
        ref={ref}
        style={{ opacity: opacity / 100 }}
      >
        <CustomInput value={label} styles={text} node={node} />
        <svg
          className="w-full h-full"
          viewBox={`0 0 ${size?.width} ${size?.height}`}
          xmlns="http://www.w3.org/2000/svg"
        >
          <defs>{defsContent}</defs>
          <path
            d={`
              M ${Math.min(w*0.2,18)},${strokeWidth}
              Q ${Math.min(w*0.1,9)},${strokeWidth} ${Math.min(w*0.1,9)},${Math.min(h*0.1,9)}
              L ${Math.min(w*0.1,9)},${h*0.5-Math.min(h*0.1,9)}
              Q ${Math.min(w*0.1,9)},${h/2} ${strokeWidth},${h/2}
              Q ${Math.min(w*0.1,9)},${h/2} ${Math.min(w*0.1,9)},${h*0.5+Math.min(h*0.1,9)}
              L ${Math.min(w*0.1,9)},${h-Math.min(h*0.1,9)}
              Q ${Math.min(w*0.1,9)},${h} ${Math.min(w*0.2,18)},${h - strokeWidth}
              M ${w-Math.min(w*0.2,18)},${strokeWidth}
              Q ${w-Math.min(w*0.1,9)},${strokeWidth} ${w-Math.min(w*0.1,9)},${Math.min(h*0.1,9)}
              L ${w-Math.min(w*0.1,9)},${h*0.5-Math.min(h*0.1,9)}
              Q ${w-Math.min(w*0.1,9)},${h/2} ${w-strokeWidth},${h/2}
              Q ${w-Math.min(w*0.1,9)},${h/2} ${w-Math.min(w*0.1,9)},${h*0.5+Math.min(h*0.1,9)}
              L ${w-Math.min(w*0.1,9)},${h-Math.min(h*0.1,9)}
              Q ${w-Math.min(w*0.1,9)},${h} ${w-Math.min(w*0.2,18)},${h - strokeWidth}
            `}
            fill={fillContent}
            stroke={strokeColor}
            strokeDasharray={strokeDasharray}
            strokeWidth={strokeWidth}
          />
        </svg>
      </div>
    </>
  );
};

register({
  shape: "custom-react-braces",
  width: 200,
  height: 140,
  effect: ["data"],
  component: component,
});

const braces: CompoundedComponent = {
  name: "大括号",
  icon: require("./image/braces.png"),
  node: {
    shape: "custom-react-braces",
    data: {
      label: "",
      ...defaultData,
    },
    ports,
  },
};

export default braces;