PageContainer.tsx 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. import { register } from "@antv/x6-react-shape";
  2. import { Node } from "@antv/x6";
  3. const NodeComponent = ({ node }: { node: Node }) => {
  4. const {
  5. width,
  6. height,
  7. backgroundColor,
  8. showWatermark,
  9. watermarkText,
  10. grid,
  11. gridSize,
  12. } = node.getData<{
  13. isPage: boolean;
  14. width: number;
  15. height: number;
  16. backgroundColor: string;
  17. showWatermark: boolean;
  18. watermarkText: string;
  19. grid: boolean;
  20. gridSize: number;
  21. }>();
  22. const base = 40 + (gridSize - 10) * 4;
  23. return (
  24. <div
  25. className="relative text-0 w-full h-full shadow-md bg-white"
  26. style={{
  27. width,
  28. height,
  29. }}
  30. >
  31. <svg
  32. xmlns="http://www.w3.org/2000/svg"
  33. version="1.1"
  34. xmlnsXlink="http://www.w3.org/1999/xlink"
  35. id="designer_grids"
  36. style={{
  37. width,
  38. height,
  39. display: "block",
  40. backgroundColor,
  41. }}
  42. >
  43. <defs>
  44. <pattern
  45. id="flow_canvas_grid_item"
  46. width={base + 1}
  47. height={base + 1}
  48. patternUnits="userSpaceOnUse"
  49. >
  50. <path
  51. id="flow_canvas_grid_path1"
  52. strokeWidth="1"
  53. fill="none"
  54. d={
  55. grid
  56. ? `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}`
  57. : ""
  58. }
  59. stroke="rgb(242,242,242)"
  60. ></path>
  61. <path
  62. id="flow_canvas_grid_path2"
  63. strokeWidth="1"
  64. fill="none"
  65. d={grid ? `M0 ${base}L${base} ${base}M${base} 0L${base} ${base}` : ""}
  66. stroke="rgb(229,229,229)"
  67. ></path>
  68. </pattern>
  69. <pattern
  70. xmlns="http://www.w3.org/2000/svg"
  71. patternUnits="userSpaceOnUse"
  72. id="flow_canvas_watermark_item"
  73. width="300"
  74. height="300"
  75. >
  76. <text
  77. x="150"
  78. y="100"
  79. fontSize="12"
  80. transform="rotate(-45, 150, 150)"
  81. style={{
  82. dominantBaseline: "middle",
  83. textAnchor: "middle",
  84. fontSize: "12px",
  85. }}
  86. fill="rgb(229,229,229)"
  87. >
  88. {showWatermark && watermarkText}
  89. </text>
  90. </pattern>
  91. </defs>
  92. <rect
  93. id="flow_canvas_grids_box"
  94. width="100%"
  95. height="100%"
  96. fill="url(#flow_canvas_grid_item)"
  97. ></rect>
  98. <rect
  99. id="flow_canvas_watermark_box"
  100. width="100%"
  101. height="100%"
  102. fill="url(#flow_canvas_watermark_item)"
  103. ></rect>
  104. <path
  105. id="flow_canvas_print_line"
  106. strokeWidth="2"
  107. strokeDasharray="5,5"
  108. fill="none"
  109. d=""
  110. stroke="rgb(215,215,215)"
  111. ></path>
  112. <rect
  113. id="flow_canvas_container"
  114. width="100%"
  115. height="100%"
  116. fill="transparent"
  117. ></rect>
  118. </svg>
  119. </div>
  120. );
  121. };
  122. register({
  123. shape: "page-container-node",
  124. width: 100,
  125. height: 100,
  126. component: NodeComponent,
  127. });