123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132 |
- 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,
- });
|