shalu-system-designer/apps/designer/src/components/PageContainer.tsx

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

const NodeComponent = ({ node }: { node: Node }) => {
  const {
    width,
    height,
    backgroundColor,
    showWatermark,
    watermarkText,
    grid,
    gridSize,
  } = node.getData<{
    isPage: boolean;
    width: number;
    height: number;
    backgroundColor: string;
    showWatermark: boolean;
    watermarkText: string;
    grid: boolean;
    gridSize: number;
  }>();

  const base = 40 + (gridSize - 10) * 4;

  return (
    <div
      className="relative text-0 w-full h-full shadow-md bg-white"
      style={{
        width,
        height,
      }}
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        version="1.1"
        xmlnsXlink="http://www.w3.org/1999/xlink"
        id="designer_grids"
        style={{
          width,
          height,
          display: "block",
          backgroundColor,
        }}
      >
        <defs>
          <pattern
            id="flow_canvas_grid_item"
            width={base + 1}
            height={base + 1}
            patternUnits="userSpaceOnUse"
          >
            <path
              id="flow_canvas_grid_path1"
              strokeWidth="1"
              fill="none"
              d={
                grid
                  ? `M0 ${gridSize}L${base} ${gridSize}M${gridSize} 0L${gridSize} ${base}M0 ${gridSize * 2}L${base} ${gridSize * 2}M${gridSize * 2} 0L${gridSize * 2} ${base}M0 ${gridSize * 3}L${base} ${gridSize * 3}M${gridSize * 3} 0L${gridSize * 3} ${base}`
                  : ""
              }
              stroke="rgb(242,242,242)"
            ></path>
            <path
              id="flow_canvas_grid_path2"
              strokeWidth="1"
              fill="none"
              d={grid ? `M0 ${base}L${base} ${base}M${base} 0L${base} ${base}` : ""}
              stroke="rgb(229,229,229)"
            ></path>
          </pattern>
          <pattern
            xmlns="http://www.w3.org/2000/svg"
            patternUnits="userSpaceOnUse"
            id="flow_canvas_watermark_item"
            width="300"
            height="300"
          >
            <text
              x="150"
              y="100"
              fontSize="12"
              transform="rotate(-45, 150, 150)"
              style={{
                dominantBaseline: "middle",
                textAnchor: "middle",
                fontSize: "12px",
              }}
              fill="rgb(229,229,229)"
            >
              {showWatermark && watermarkText}
            </text>
          </pattern>
        </defs>
        <rect
          id="flow_canvas_grids_box"
          width="100%"
          height="100%"
          fill="url(#flow_canvas_grid_item)"
        ></rect>
        <rect
          id="flow_canvas_watermark_box"
          width="100%"
          height="100%"
          fill="url(#flow_canvas_watermark_item)"
        ></rect>
        <path
          id="flow_canvas_print_line"
          strokeWidth="2"
          strokeDasharray="5,5"
          fill="none"
          d=""
          stroke="rgb(215,215,215)"
        ></path>
        <rect
          id="flow_canvas_container"
          width="100%"
          height="100%"
          fill="transparent"
        ></rect>
      </svg>
    </div>
  );
};

register({
  shape: "page-container-node",
  width: 100,
  height: 100,
  component: NodeComponent,
});