@canvas-components/react-maintop-pattern 0.0.0-stage → 0.1.1

package/dist/index.js

@@ -0,0 +1,3612 @@
+import React, { forwardRef, useMemo, useRef, useEffect, useCallback, useState, useImperativeHandle, memo } from 'react';
+import { ReactFlex, ReactTooltip, ReactButton, reactMessage, ReactModal, ReactForm, ReactRadio, ReactRow, ReactCol, ReactInputNumber, ReactSelect, ReactTextArea } from '@canvas-components/react-components';
+import { useEventListener, useDebounceFn, useSize, useHistoryTravel } from 'ahooks';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { exportDrawingBoardSvg, computeCanvasScrollbarLayout, drawCanvasScrollbars, RulerRenderer, GridModel, resolveCanvasScrollbarDragPosition, hitTestCanvasScrollbar } from '@canvas-components/maintop-pattern';
+import { ReactListTable } from '@canvas-components/react-list-table';
+
+// src/components/drawing-board.tsx
+
+// src/styles.ts
+var STYLES = {
+  rulerWrapper: {
+    borderRadius: "4px",
+    overflow: "hidden",
+    backgroundColor: "#fff",
+    height: "650px",
+    flex: 1,
+    minWidth: 0,
+    position: "relative",
+    cursor: "grab",
+    // overscrollBehavior: 'contain' as const,
+    userSelect: "none"
+  },
+  boardWrapper: {
+    width: "100%",
+    overflow: "hidden"
+  },
+  gridContainer: {
+    flex: 1,
+    minWidth: 0
+  },
+  gridHeader: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "flex-start",
+    width: "100%",
+    minWidth: 0
+  },
+  canvas: {
+    display: "block"
+  }};
+var ICON_PATHS = {
+  aim: [
+    "M952 474H829.8C812.5 327.6 696.4 211.5 550 194.2V72c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v122.2C327.6 211.5 211.5 327.6 194.2 474H72c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h122.2C211.5 696.4 327.6 812.5 474 829.8V952c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V829.8C696.4 812.5 812.5 696.4 829.8 550H952c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zM512 756c-134.8 0-244-109.2-244-244s109.2-244 244-244 244 109.2 244 244-109.2 244-244 244z",
+    "M512 392c-32.1 0-62.1 12.4-84.8 35.2-22.7 22.7-35.2 52.7-35.2 84.8s12.5 62.1 35.2 84.8C449.9 619.4 480 632 512 632s62.1-12.5 84.8-35.2C619.4 574.1 632 544 632 512s-12.5-62.1-35.2-84.8A118.57 118.57 0 00512 392z"
+  ],
+  arrowsAlt: [
+    "M855 160.1l-189.2 23.5c-6.6.8-9.3 8.8-4.7 13.5l54.7 54.7-153.5 153.5a8.03 8.03 0 000 11.3l45.1 45.1c3.1 3.1 8.2 3.1 11.3 0l153.6-153.6 54.7 54.7a7.94 7.94 0 0013.5-4.7L863.9 169a7.9 7.9 0 00-8.9-8.9zM416.6 562.3a8.03 8.03 0 00-11.3 0L251.8 715.9l-54.7-54.7a7.94 7.94 0 00-13.5 4.7L160.1 855c-.6 5.2 3.7 9.5 8.9 8.9l189.2-23.5c6.6-.8 9.3-8.8 4.7-13.5l-54.7-54.7 153.6-153.6c3.1-3.1 3.1-8.2 0-11.3l-45.2-45z"
+  ],
+  borderInner: [
+    "M872 476H548V144h-72v332H152c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h324v332h72V548h324c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-166h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 498h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-664h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 498h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM650 216h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm56 592h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-332 0h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-56-592h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-166 0h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm56 592h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-56-426h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm56 260h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z"
+  ],
+  clear: [
+    "M899.1 869.6l-53-305.6H864c14.4 0 26-11.6 26-26V346c0-14.4-11.6-26-26-26H618V138c0-14.4-11.6-26-26-26H432c-14.4 0-26 11.6-26 26v182H160c-14.4 0-26 11.6-26 26v192c0 14.4 11.6 26 26 26h17.9l-53 305.6a25.95 25.95 0 0025.6 30.4h723c1.5 0 3-.1 4.4-.4a25.88 25.88 0 0021.2-30zM204 390h272V182h72v208h272v104H204V390zm468 440V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H416V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H202.8l45.1-260H776l45.1 260H672z"
+  ],
+  closeCircle: [
+    "M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm0 76c-205.4 0-372 166.6-372 372s166.6 372 372 372 372-166.6 372-372-166.6-372-372-372zm128.01 198.83c.03 0 .05.01.09.06l45.02 45.01a.2.2 0 01.05.09.12.12 0 010 .07c0 .02-.01.04-.05.08L557.25 512l127.87 127.86a.27.27 0 01.05.06v.02a.12.12 0 010 .07c0 .03-.01.05-.05.09l-45.02 45.02a.2.2 0 01-.09.05.12.12 0 01-.07 0c-.02 0-.04-.01-.08-.05L512 557.25 384.14 685.12c-.04.04-.06.05-.08.05a.12.12 0 01-.07 0c-.03 0-.05-.01-.09-.05l-45.02-45.02a.2.2 0 01-.05-.09.12.12 0 010-.07c0-.02.01-.04.06-.08L466.75 512 338.88 384.14a.27.27 0 01-.05-.06l-.01-.02a.12.12 0 010-.07c0-.03.01-.05.05-.09l45.02-45.02a.2.2 0 01.09-.05.12.12 0 01.07 0c.02 0 .04.01.08.06L512 466.75l127.86-127.86c.04-.05.06-.06.08-.06a.12.12 0 01.07 0z"
+  ],
+  closeSquare: [
+    "M880 112c17.7 0 32 14.3 32 32v736c0 17.7-14.3 32-32 32H144c-17.7 0-32-14.3-32-32V144c0-17.7 14.3-32 32-32zm-40 72H184v656h656V184zM640.01 338.83c.03 0 .05.01.09.06l45.02 45.01a.2.2 0 01.05.09.12.12 0 010 .07c0 .02-.01.04-.05.08L557.25 512l127.87 127.86a.27.27 0 01.05.06v.02a.12.12 0 010 .07c0 .03-.01.05-.05.09l-45.02 45.02a.2.2 0 01-.09.05.12.12 0 01-.07 0c-.02 0-.04-.01-.08-.05L512 557.25 384.14 685.12c-.04.04-.06.05-.08.05a.12.12 0 01-.07 0c-.03 0-.05-.01-.09-.05l-45.02-45.02a.2.2 0 01-.05-.09.12.12 0 010-.07c0-.02.01-.04.06-.08L466.75 512 338.88 384.14a.27.27 0 01-.05-.06l-.01-.02a.12.12 0 010-.07c0-.03.01-.05.05-.09l45.02-45.02a.2.2 0 01.09-.05.12.12 0 01.07 0c.02 0 .04.01.08.06L512 466.75l127.86-127.86c.04-.05.06-.06.08-.06a.12.12 0 01.07 0z"
+  ],
+  copy: [
+    "M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
+  ],
+  delete: [
+    "M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
+  ],
+  diff: [
+    "M476 399.1c0-3.9-3.1-7.1-7-7.1h-42c-3.8 0-7 3.2-7 7.1V484h-84.5c-4.1 0-7.5 3.1-7.5 7v42c0 3.8 3.4 7 7.5 7H420v84.9c0 3.9 3.2 7.1 7 7.1h42c3.9 0 7-3.2 7-7.1V540h84.5c4.1 0 7.5-3.2 7.5-7v-42c0-3.9-3.4-7-7.5-7H476v-84.9zM560.5 704h-225c-4.1 0-7.5 3.2-7.5 7v42c0 3.8 3.4 7 7.5 7h225c4.1 0 7.5-3.2 7.5-7v-42c0-3.8-3.4-7-7.5-7zm-7.1-502.6c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v704c0 17.7 14.3 32 32 32h512c17.7 0 32-14.3 32-32V397.3c0-8.5-3.4-16.6-9.4-22.6L553.4 201.4zM664 888H232V264h282.2L664 413.8V888zm190.2-581.4L611.3 72.9c-6-5.7-13.9-8.9-22.2-8.9H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h277l219 210.6V824c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V329.6c0-8.7-3.5-17-9.8-23z"
+  ],
+  edit: [
+    "M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
+  ],
+  eye: [
+    "M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+  ],
+  history: [
+    "M536.1 273H488c-4.4 0-8 3.6-8 8v275.3c0 2.6 1.2 5 3.3 6.5l165.3 120.7c3.6 2.6 8.6 1.9 11.2-1.7l28.6-39c2.7-3.7 1.9-8.7-1.7-11.2L544.1 528.5V281c0-4.4-3.6-8-8-8zm219.8 75.2l156.8 38.3c5 1.2 9.9-2.6 9.9-7.7l.8-161.5c0-6.7-7.7-10.5-12.9-6.3L752.9 334.1a8 8 0 003 14.1zm167.7 301.1l-56.7-19.5a8 8 0 00-10.1 4.8c-1.9 5.1-3.9 10.1-6 15.1-17.8 42.1-43.3 80-75.9 112.5a353 353 0 01-112.5 75.9 352.18 352.18 0 01-137.7 27.8c-47.8 0-94.1-9.3-137.7-27.8a353 353 0 01-112.5-75.9c-32.5-32.5-58-70.4-75.9-112.5A353.44 353.44 0 01171 512c0-47.8 9.3-94.2 27.8-137.8 17.8-42.1 43.3-80 75.9-112.5a353 353 0 01112.5-75.9C430.6 167.3 477 158 524.8 158s94.1 9.3 137.7 27.8A353 353 0 01775 261.7c10.2 10.3 19.8 21 28.6 32.3l59.8-46.8C784.7 146.6 662.2 81.9 524.6 82 285 82.1 92.6 276.7 95 516.4 97.4 751.9 288.9 942 524.8 942c185.5 0 343.5-117.6 403.7-282.3 1.5-4.2-.7-8.9-4.9-10.4z"
+  ],
+  mergeCells: [
+    "M482.2 508.4L331.3 389c-3-2.4-7.3-.2-7.3 3.6V478H184V184h204v128c0 2.2 1.8 4 4 4h60c2.2 0 4-1.8 4-4V144c0-15.5-12.5-28-28-28H144c-15.5 0-28 12.5-28 28v736c0 15.5 12.5 28 28 28h284c15.5 0 28-12.5 28-28V712c0-2.2-1.8-4-4-4h-60c-2.2 0-4 1.8-4 4v128H184V546h140v85.4c0 3.8 4.4 6 7.3 3.6l150.9-119.4a4.5 4.5 0 000-7.2zM880 116H596c-15.5 0-28 12.5-28 28v168c0 2.2 1.8 4 4 4h60c2.2 0 4-1.8 4-4V184h204v294H700v-85.4c0-3.8-4.3-6-7.3-3.6l-151 119.4a4.52 4.52 0 000 7.1l151 119.5c2.9 2.3 7.3.2 7.3-3.6V546h140v294H636V712c0-2.2-1.8-4-4-4h-60c-2.2 0-4 1.8-4 4v168c0 15.5 12.5 28 28 28h284c15.5 0 28-12.5 28-28V144c0-15.5-12.5-28-28-28z"
+  ],
+  plusCircle: [
+    "M696 480H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z",
+    "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+  ],
+  redo: [
+    "M758.2 839.1C851.8 765.9 912 651.9 912 523.9 912 303 733.5 124.3 512.6 124 291.4 123.7 112 302.8 112 523.9c0 125.2 57.5 236.9 147.6 310.2 3.5 2.8 8.6 2.2 11.4-1.3l39.4-50.5c2.7-3.4 2.1-8.3-1.2-11.1-8.1-6.6-15.9-13.7-23.4-21.2a318.64 318.64 0 01-68.6-101.7C200.4 609 192 567.1 192 523.9s8.4-85.1 25.1-124.5c16.1-38.1 39.2-72.3 68.6-101.7 29.4-29.4 63.6-52.5 101.7-68.6C426.9 212.4 468.8 204 512 204s85.1 8.4 124.5 25.1c38.1 16.1 72.3 39.2 101.7 68.6 29.4 29.4 52.5 63.6 68.6 101.7 16.7 39.4 25.1 81.3 25.1 124.5s-8.4 85.1-25.1 124.5a318.64 318.64 0 01-68.6 101.7c-9.3 9.3-19.1 18-29.3 26L668.2 724a8 8 0 00-14.1 3l-39.6 162.2c-1.2 5 2.6 9.9 7.7 9.9l167 .8c6.7 0 10.5-7.7 6.3-12.9l-37.3-47.9z"
+  ],
+  scissor: [
+    "M567.1 512l318.5-319.3c5-5 1.5-13.7-5.6-13.7h-90.5c-2.1 0-4.2.8-5.6 2.3l-273.3 274-90.2-90.5c12.5-22.1 19.7-47.6 19.7-74.8 0-83.9-68.1-152-152-152s-152 68.1-152 152 68.1 152 152 152c27.7 0 53.6-7.4 75.9-20.3l90 90.3-90.1 90.3A151.04 151.04 0 00288 582c-83.9 0-152 68.1-152 152s68.1 152 152 152 152-68.1 152-152c0-27.2-7.2-52.7-19.7-74.8l90.2-90.5 273.3 274c1.5 1.5 3.5 2.3 5.6 2.3H880c7.1 0 10.7-8.6 5.6-13.7L567.1 512zM288 370c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80zm0 444c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
+  ],
+  select: [
+    "M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h360c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H184V184h656v320c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V144c0-17.7-14.3-32-32-32zM653.3 599.4l52.2-52.2a8.01 8.01 0 00-4.7-13.6l-179.4-21c-5.1-.6-9.5 3.7-8.9 8.9l21 179.4c.8 6.6 8.9 9.4 13.6 4.7l52.4-52.4 256.2 256.2c3.1 3.1 8.2 3.1 11.3 0l42.4-42.4c3.1-3.1 3.1-8.2 0-11.3L653.3 599.4z"
+  ],
+  shrink: [
+    "M881.7 187.4l-45.1-45.1a8.03 8.03 0 00-11.3 0L667.8 299.9l-54.7-54.7a7.94 7.94 0 00-13.5 4.7L576.1 439c-.6 5.2 3.7 9.5 8.9 8.9l189.2-23.5c6.6-.8 9.3-8.8 4.7-13.5l-54.7-54.7 157.6-157.6c3-3 3-8.1-.1-11.2zM439 576.1l-189.2 23.5c-6.6.8-9.3 8.9-4.7 13.5l54.7 54.7-157.5 157.5a8.03 8.03 0 000 11.3l45.1 45.1c3.1 3.1 8.2 3.1 11.3 0l157.6-157.6 54.7 54.7a7.94 7.94 0 0013.5-4.7L447.9 585a7.9 7.9 0 00-8.9-8.9z"
+  ],
+  undo: [
+    "M511.4 124C290.5 124.3 112 303 112 523.9c0 128 60.2 242 153.8 315.2l-37.5 48c-4.1 5.3-.3 13 6.3 12.9l167-.8c5.2 0 9-4.9 7.7-9.9L369.8 727a8 8 0 00-14.1-3L315 776.1c-10.2-8-20-16.7-29.3-26a318.64 318.64 0 01-68.6-101.7C200.4 609 192 567.1 192 523.9s8.4-85.1 25.1-124.5c16.1-38.1 39.2-72.3 68.6-101.7 29.4-29.4 63.6-52.5 101.7-68.6C426.9 212.4 468.8 204 512 204s85.1 8.4 124.5 25.1c38.1 16.1 72.3 39.2 101.7 68.6 29.4 29.4 52.5 63.6 68.6 101.7 16.7 39.4 25.1 81.3 25.1 124.5s-8.4 85.1-25.1 124.5a318.64 318.64 0 01-68.6 101.7c-7.5 7.5-15.3 14.5-23.4 21.2a7.93 7.93 0 00-1.2 11.1l39.4 50.5c2.8 3.5 7.9 4.1 11.4 1.3C854.5 760.8 912 649.1 912 523.9c0-221.1-179.4-400.2-400.6-399.9z"
+  ]
+};
+function PatternIcon({
+  name,
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      style: {
+        display: "inline-flex",
+        width: 16,
+        height: 16,
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: 14,
+        lineHeight: 1,
+        ...style
+      },
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          viewBox: "64 64 896 896",
+          focusable: "false",
+          width: "1em",
+          height: "1em",
+          fill: "currentColor",
+          fillRule: name === "closeCircle" || name === "closeSquare" ? "evenodd" : void 0,
+          children: ICON_PATHS[name].map((path) => /* @__PURE__ */ jsx("path", { d: path }, path))
+        }
+      )
+    }
+  );
+}
+var createPatternIcon = (name) => function MaintopPatternIcon(props) {
+  return /* @__PURE__ */ jsx(PatternIcon, { ...props, name });
+};
+var AimOutlined = createPatternIcon("aim");
+var ArrowsAltOutlined = createPatternIcon("arrowsAlt");
+var BorderInnerOutlined = createPatternIcon("borderInner");
+var ClearOutlined = createPatternIcon("clear");
+var CloseCircleOutlined = createPatternIcon("closeCircle");
+var CloseSquareOutlined = createPatternIcon("closeSquare");
+var CopyOutlined = createPatternIcon("copy");
+var DeleteOutlined = createPatternIcon("delete");
+var DiffOutlined = createPatternIcon("diff");
+var EditOutlined = createPatternIcon("edit");
+var EyeOutlined = createPatternIcon("eye");
+var HistoryOutlined = createPatternIcon("history");
+var MergeCellsOutlined = createPatternIcon("mergeCells");
+var PlusCircleOutlined = createPatternIcon("plusCircle");
+var RedoOutlined = createPatternIcon("redo");
+var ScissorOutlined = createPatternIcon("scissor");
+var SelectOutlined = createPatternIcon("select");
+var ShrinkOutlined = createPatternIcon("shrink");
+var UndoOutlined = createPatternIcon("undo");
+var Toolbar = React.memo(
+  ({ items, isExpanded, height = 650 }) => {
+    return /* @__PURE__ */ jsx(ReactFlex, { vertical: true, justify: "space-between", style: { height }, children: items.map((item) => {
+      const isLoopToggle = item.text === "\u6536\u8D77\u5FAA\u73AF" || item.text === "\u5C55\u5F00\u5FAA\u73AF";
+      const isDisabled = isExpanded ? !isLoopToggle : item.disabled;
+      return /* @__PURE__ */ jsx(
+        ReactTooltip,
+        {
+          title: item.text,
+          destroyTooltipOnHide: true,
+          placement: "right",
+          children: /* @__PURE__ */ jsx(
+            ReactButton,
+            {
+              icon: item.icon,
+              onClick: item.onClick,
+              disabled: isDisabled,
+              size: "small"
+            }
+          )
+        },
+        item.text
+      );
+    }) });
+  }
+);
+var toolbar_default = Toolbar;
+var SCROLLBAR_THICKNESS = 12;
+function getRangeLevel(current, items, preferLargerOutside) {
+  return items.filter((other) => {
+    if (other.id === current.id) return false;
+    const hasIntersection = !(other.endPos < current.startPos || other.startPos > current.endPos);
+    if (!hasIntersection) return false;
+    const otherWidth = other.endPos - other.startPos;
+    const selfWidth = current.endPos - current.startPos;
+    if (otherWidth < selfWidth) return !preferLargerOutside;
+    if (otherWidth > selfWidth) return preferLargerOutside;
+    return other.id < current.id;
+  }).length;
+}
+function getMaxRangeLevel(items, preferLargerOutside) {
+  if (items.length === 0) return -1;
+  return Math.max(
+    ...items.map((item) => getRangeLevel(item, items, preferLargerOutside))
+  );
+}
+function createTextMeasurer() {
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  return (text, font) => {
+    if (!ctx) {
+      return text.length * 10;
+    }
+    ctx.font = font;
+    return ctx.measureText(text).width;
+  };
+}
+function estimateExportRightMargin(params) {
+  const {
+    baseRightMargin,
+    step,
+    loops = [],
+    memos = [],
+    printMode = false,
+    loopFontSize = 10
+  } = params;
+  const measureText = createTextMeasurer();
+  const safePadding = Math.max(Math.ceil(step / 2), 8);
+  let required = baseRightMargin + safePadding;
+  const yLoops = loops.filter((loop) => loop.type === "y");
+  if (yLoops.length > 0) {
+    const maxLevel = getMaxRangeLevel(yLoops, false);
+    const maxLabelWidth = Math.max(
+      ...yLoops.map(
+        (loop, index) => measureText(
+          printMode ? `${loop.count}\u6B21` : `${loop.count}\u6B21[${index + 1}]`,
+          `${loopFontSize}px sans-serif`
+        )
+      ),
+      0
+    );
+    required = Math.max(
+      required,
+      5 + Math.max(0, maxLevel) * 30 + 6 + loopFontSize + maxLabelWidth / 2 + 20
+    );
+    if (printMode) {
+      required = Math.max(
+        required,
+        11 + measureText("9999", `${loopFontSize}px sans-serif`) + 12
+      );
+    }
+  }
+  const yMemos = memos.filter((memo2) => memo2.type === "y");
+  if (yMemos.length > 0) {
+    const maxLoopLevel = getMaxRangeLevel(yLoops, false);
+    const loopOccupiedWidth = maxLoopLevel >= 0 ? (maxLoopLevel + 1) * 30 + 20 : 0;
+    const maxMemoLevel = getMaxRangeLevel(yMemos, false);
+    const maxMemoWidth = Math.max(
+      ...yMemos.map((memo2) => measureText(memo2.content, "10px sans-serif")),
+      0
+    );
+    required = Math.max(
+      required,
+      15 + loopOccupiedWidth + Math.max(0, maxMemoLevel) * 30 + maxMemoWidth + 20
+    );
+  }
+  return Math.ceil(required);
+}
+function buildSvgScene(props, forceExpanded) {
+  const vScaleSize = props.verticalScaleSize ?? props.horizontalScaleSize ?? 20;
+  const thickness = props.thickness ?? 60;
+  const step = props.step ?? 10;
+  const padding = props.padding ?? 0;
+  const topPadding = props.topPadding ?? 0;
+  const rightMargin = props.canvasRightMargin ?? 50;
+  const topMargin = props.canvasTopMargin ?? 0;
+  const isExpandedToUse = forceExpanded !== void 0 ? forceExpanded : props.isExpanded ?? false;
+  let exportMarks = props.gridMarks;
+  if (isExpandedToUse && !props.isExpanded) {
+    let tempMarks = { ...props.gridMarks };
+    const loopsConfig = props.loops ?? [];
+    const rowLoops = loopsConfig.filter((l) => l.type === "y");
+    const colLoops = loopsConfig.filter((l) => l.type === "x");
+    rowLoops.sort((a, b) => b.startPos - a.startPos).forEach((loop) => {
+      tempMarks = GridModel.duplicateRows(
+        tempMarks,
+        loop.startPos,
+        loop.endPos,
+        loop.startPos,
+        loop.count,
+        999999
+      );
+    });
+    colLoops.sort((a, b) => b.startPos - a.startPos).forEach((loop) => {
+      tempMarks = GridModel.duplicateCols(
+        tempMarks,
+        loop.startPos,
+        loop.endPos,
+        loop.startPos,
+        loop.count,
+        999999
+      );
+    });
+    exportMarks = tempMarks;
+  }
+  let maxX = -1;
+  let maxY = -1;
+  Object.keys(exportMarks).forEach((key) => {
+    const [x, y] = key.split(",").map(Number);
+    maxX = Math.max(maxX, x);
+    maxY = Math.max(maxY, y);
+  });
+  if (!isExpandedToUse) {
+    (props.loops ?? []).forEach((loop) => {
+      if (loop.type === "x") {
+        maxX = Math.max(maxX, loop.endPos);
+      } else {
+        maxY = Math.max(maxY, loop.endPos);
+      }
+    });
+    (props.memos ?? []).forEach((memo2) => {
+      if (memo2.type === "x") {
+        maxX = Math.max(maxX, memo2.endPos);
+      } else {
+        maxY = Math.max(maxY, memo2.endPos);
+      }
+    });
+  }
+  const exportHScale = props.printMode ? props.horizontalScaleSize ?? 20 : maxX === -1 ? props.horizontalScaleSize ?? 20 : maxX + 1;
+  const exportVScale = props.printMode ? props.verticalScaleSize ?? props.horizontalScaleSize ?? 20 : maxY === -1 ? vScaleSize : maxY + 1;
+  const exportRightMargin = estimateExportRightMargin({
+    baseRightMargin: rightMargin,
+    step,
+    loops: props.loops ?? [],
+    memos: props.memos ?? [],
+    printMode: props.printMode,
+    loopFontSize: props.loopFontSize
+  });
+  const fullWidth = thickness + exportHScale * step + padding + exportRightMargin;
+  const fullHeight = thickness + exportVScale * step + padding + topPadding + topMargin;
+  return {
+    width: fullWidth,
+    height: fullHeight,
+    options: {
+      width: fullWidth,
+      height: fullHeight,
+      scrollLeft: 0,
+      scrollTop: 0,
+      horizontalScaleSize: exportHScale,
+      verticalScaleSize: exportVScale,
+      thickness,
+      step,
+      minorTickInterval: props.midTickInterval ?? 5,
+      majorTickInterval: props.majorTickInterval ?? 10,
+      padding,
+      topPadding,
+      gridMarks: exportMarks,
+      hoverX: null,
+      hoverY: null,
+      hoveredGridCoord: null,
+      isSelecting: false,
+      selectionStart: null,
+      selectionCurrent: null,
+      rightMargin: exportRightMargin,
+      topMargin,
+      showCursor: false,
+      loops: props.loops ?? [],
+      memos: props.memos ?? [],
+      isExpanded: isExpandedToUse,
+      midTickFontSize: props.midTickFontSize,
+      majorTickFontSize: props.majorTickFontSize,
+      loopFontSize: props.loopFontSize,
+      printMode: props.printMode,
+      markPointFontSize: props.markPointFontSize,
+      loopWingOffset: props.loopWingOffset,
+      minorTickLength: props.midTickLength,
+      majorTickLength: props.majorTickLength,
+      smallTickLength: props.smallTickLength,
+      showSmallTickText: props.showSmallTickText,
+      smallTickFontSize: props.smallTickFontSize,
+      hoverEffectColor: props.hoverEffectColor,
+      markSelectColor: props.markSelectColor,
+      markCheckedColor: props.markCheckedColor,
+      markPointColor: props.markPointColor,
+      cursorColor: props.cursorColor,
+      mainGridColor: props.mainGridColor,
+      minorTickColor: props.minorTickColor,
+      rulerBgColor: props.rulerBgColor,
+      rulerTextColor: props.rulerTextColor,
+      rulerTickColor: props.rulerTickColor,
+      rulerBorderColor: props.rulerBorderColor,
+      loopIndicatorColor: props.loopIndicatorColor,
+      loopTextColor: props.loopTextColor,
+      loopTickExtension: props.loopTickExtension,
+      showLoopArrow: props.showLoopArrow,
+      loopArrowSize: props.loopArrowSize,
+      showInnerLoopEndpoints: props.showInnerLoopEndpoints
+    }
+  };
+}
+var Grid = forwardRef((props, ref) => {
+  const {
+    width,
+    height,
+    scrollLeft,
+    scrollTop: rawScrollTop,
+    showScrollbar = true,
+    scrollbarTotalWidth,
+    scrollbarTotalHeight,
+    horizontalScaleSize = 50,
+    verticalScaleSize = 50,
+    thickness = 40,
+    step = 10,
+    midTickInterval = 5,
+    majorTickInterval = 10,
+    padding = 20,
+    topPadding = 0,
+    gridMarks,
+    canvasRightMargin = 0,
+    canvasTopMargin = 0,
+    readonly = false,
+    showCursor = true,
+    loops = [],
+    memos = [],
+    isExpanded = false,
+    loopFontSize,
+    midTickLength,
+    majorTickLength,
+    smallTickLength,
+    showSmallTickText,
+    smallTickFontSize,
+    hoverEffectColor,
+    markSelectColor,
+    markCheckedColor,
+    markPointColor,
+    majorTickFontSize,
+    midTickFontSize,
+    markPointFontSize,
+    printMode = false,
+    loopWingOffset,
+    loopIndicatorColor,
+    loopTextColor,
+    cursorColor,
+    mainGridColor,
+    minorTickColor,
+    rulerBgColor,
+    rulerTextColor,
+    rulerTickColor,
+    rulerBorderColor,
+    loopTickExtension,
+    showLoopArrow,
+    loopArrowSize,
+    showInnerLoopEndpoints,
+    onGirdClick
+  } = props;
+  const svgScene = useMemo(() => {
+    if (!printMode) return null;
+    const scene = buildSvgScene(props);
+    const result = exportDrawingBoardSvg(scene.options);
+    return {
+      ...scene,
+      svg: result.svg
+    };
+  }, [props, printMode]);
+  const logicalTotalHeight = thickness + (verticalScaleSize || horizontalScaleSize) * step + padding + topPadding;
+  const contentHeight = Math.max(
+    height - (showScrollbar ? SCROLLBAR_THICKNESS : 0),
+    0
+  );
+  const calculatedScrollTop = logicalTotalHeight < contentHeight ? logicalTotalHeight - contentHeight : rawScrollTop;
+  const canvasRef = useRef(null);
+  const rendererRef = useRef(null);
+  const hoverState = useRef({
+    x: null,
+    y: null,
+    coord: null
+  });
+  const selectionState = useRef({
+    isSelecting: false,
+    start: null,
+    current: null
+  });
+  const clickStartPos = useRef({ x: 0, y: 0 });
+  const scrollbarDragRef = useRef(null);
+  const scrollbarInteractionRef = useRef(false);
+  const propsRef = useRef(props);
+  useEffect(() => {
+    propsRef.current = props;
+  }, [props]);
+  const getScrollbarLayouts = useCallback(() => {
+    const p = propsRef.current;
+    if (p.printMode || !p.showScrollbar) {
+      return { horizontal: null, vertical: null };
+    }
+    return {
+      horizontal: computeCanvasScrollbarLayout({
+        orientation: "horizontal",
+        totalSize: p.scrollbarTotalWidth ?? p.width,
+        viewportSize: p.width,
+        scrollPos: p.scrollLeft,
+        thickness: SCROLLBAR_THICKNESS
+      }),
+      vertical: computeCanvasScrollbarLayout({
+        orientation: "vertical",
+        totalSize: p.scrollbarTotalHeight ?? p.height,
+        viewportSize: Math.max(
+          p.height - SCROLLBAR_THICKNESS - (p.canvasTopMargin ?? 0),
+          0
+        ),
+        scrollPos: p.scrollTop,
+        thickness: SCROLLBAR_THICKNESS
+      })
+    };
+  }, []);
+  const [isSpacePressed, setIsSpacePressed] = useState(false);
+  useEventListener("keydown", (e) => {
+    if (e.code === "Space" && !e.repeat) {
+      setIsSpacePressed(true);
+    }
+  });
+  useEventListener("keyup", (e) => {
+    if (e.code === "Space") {
+      setIsSpacePressed(false);
+    }
+  });
+  const renderRafRef = useRef(null);
+  const requestRender = useCallback(() => {
+    if (renderRafRef.current) return;
+    renderRafRef.current = requestAnimationFrame(() => {
+      renderRafRef.current = null;
+      if (!rendererRef.current) return;
+      const p = propsRef.current;
+      const vScaleSize = p.verticalScaleSize ?? p.horizontalScaleSize ?? 20;
+      rendererRef.current.render({
+        width: p.width,
+        height: p.height,
+        bottomInset: p.showScrollbar ? SCROLLBAR_THICKNESS : 0,
+        scrollLeft: p.scrollLeft,
+        scrollTop: calculatedScrollTop,
+        horizontalScaleSize: p.horizontalScaleSize ?? 20,
+        verticalScaleSize: vScaleSize,
+        thickness: p.thickness ?? 60,
+        step: p.step ?? 10,
+        minorTickInterval: p.midTickInterval ?? 5,
+        majorTickInterval: p.majorTickInterval ?? 10,
+        padding: p.padding ?? 40,
+        topPadding: p.topPadding ?? 40,
+        gridMarks: p.gridMarks,
+        hoverX: hoverState.current.x,
+        hoverY: hoverState.current.y,
+        hoveredGridCoord: hoverState.current.coord,
+        isSelecting: selectionState.current.isSelecting,
+        selectionStart: selectionState.current.start,
+        selectionCurrent: selectionState.current.current,
+        rightMargin: p.canvasRightMargin ?? 50,
+        topMargin: p.canvasTopMargin ?? 0,
+        showCursor: p.showCursor ?? true,
+        loops: p.loops ?? [],
+        memos: p.memos ?? [],
+        isExpanded: p.isExpanded ?? false,
+        midTickFontSize: p.midTickFontSize,
+        majorTickFontSize: p.majorTickFontSize,
+        loopFontSize: p.loopFontSize,
+        printMode: p.printMode,
+        markPointFontSize: p.markPointFontSize,
+        loopWingOffset: p.loopWingOffset,
+        minorTickLength: p.midTickLength,
+        majorTickLength: p.majorTickLength,
+        smallTickLength: p.smallTickLength,
+        showSmallTickText: p.showSmallTickText,
+        smallTickFontSize: p.smallTickFontSize,
+        hoverEffectColor: p.hoverEffectColor,
+        markSelectColor: p.markSelectColor,
+        markCheckedColor: p.markCheckedColor,
+        markPointColor: p.markPointColor,
+        cursorColor: p.cursorColor,
+        mainGridColor: p.mainGridColor,
+        minorTickColor: p.minorTickColor,
+        rulerBgColor: p.rulerBgColor,
+        rulerTextColor: p.rulerTextColor,
+        rulerTickColor: p.rulerTickColor,
+        rulerBorderColor: p.rulerBorderColor,
+        loopIndicatorColor: p.loopIndicatorColor,
+        loopTextColor: p.loopTextColor,
+        loopTickExtension: p.loopTickExtension,
+        showLoopArrow: p.showLoopArrow,
+        loopArrowSize: p.loopArrowSize,
+        showInnerLoopEndpoints: p.showInnerLoopEndpoints
+      });
+      const canvas = canvasRef.current;
+      const context = canvas?.getContext("2d");
+      if (context) {
+        const layouts = getScrollbarLayouts();
+        drawCanvasScrollbars(
+          context,
+          [
+            ...layouts.horizontal ? [
+              {
+                layout: layouts.horizontal,
+                offsetY: p.height - SCROLLBAR_THICKNESS
+              }
+            ] : [],
+            ...layouts.vertical ? [
+              {
+                layout: layouts.vertical,
+                offsetX: p.width - SCROLLBAR_THICKNESS
+              }
+            ] : []
+          ],
+          {},
+          false
+        );
+      }
+    });
+  }, [calculatedScrollTop, getScrollbarLayouts]);
+  useEffect(() => {
+    return () => {
+      if (renderRafRef.current) {
+        cancelAnimationFrame(renderRafRef.current);
+        renderRafRef.current = null;
+      }
+    };
+  }, []);
+  const getGridFromCoord = (clientX, clientY) => {
+    const rect = canvasRef.current?.getBoundingClientRect();
+    if (!rect) return null;
+    const p = propsRef.current;
+    const vScaleSize = p.verticalScaleSize ?? p.horizontalScaleSize ?? 20;
+    const s = p.step ?? 10;
+    const pad = p.padding ?? 40;
+    const topPad = p.topPadding ?? 40;
+    const thick = p.thickness ?? 60;
+    const lTotalHeight = thick + vScaleSize * s + pad + topPad;
+    const renderHeight = Math.max(
+      p.height - (p.showScrollbar ? SCROLLBAR_THICKNESS : 0),
+      0
+    );
+    const effectiveScrollTop = lTotalHeight < renderHeight ? lTotalHeight - renderHeight : p.scrollTop;
+    const pixelX = clientX - rect.left;
+    const pixelY = clientY - rect.top;
+    if (p.showScrollbar && pixelY >= renderHeight) return null;
+    const x = pixelX + p.scrollLeft - thick - pad;
+    const colIndex = Math.floor(x / s);
+    const yVal = vScaleSize * s + topPad - (pixelY + effectiveScrollTop - (p.canvasTopMargin ?? 0));
+    const rowIndex = Math.floor(yVal / s);
+    const hScale = p.horizontalScaleSize ?? 20;
+    if (colIndex >= 0 && colIndex < hScale && rowIndex >= 0 && rowIndex < vScaleSize) {
+      return { x: colIndex, y: rowIndex };
+    }
+    return null;
+  };
+  const autoScrollRaf = useRef(null);
+  const autoScrollSpeed = useRef({ x: 0, y: 0 });
+  const AUTO_SCROLL_SPEED = 10;
+  const stopAutoScroll = () => {
+    if (autoScrollRaf.current) {
+      cancelAnimationFrame(autoScrollRaf.current);
+      autoScrollRaf.current = null;
+    }
+  };
+  const performAutoScroll = () => {
+    const { x, y } = autoScrollSpeed.current;
+    if (x === 0 && y === 0) {
+      stopAutoScroll();
+      return;
+    }
+    if (propsRef.current.onScrollRequest) {
+      propsRef.current.onScrollRequest(x, y);
+    }
+    autoScrollRaf.current = requestAnimationFrame(performAutoScroll);
+  };
+  useEffect(() => {
+    return () => stopAutoScroll();
+  }, []);
+  const { run: checkMaxGrid } = useDebounceFn(
+    (marks) => {
+      const onMaxGridChange = propsRef.current.onMaxGridChange;
+      if (!onMaxGridChange) return;
+      const keys = Object.keys(marks);
+      if (keys.length === 0) {
+        onMaxGridChange(null);
+        return;
+      }
+      let maxX = -1;
+      let maxY = -1;
+      for (const key of keys) {
+        const commaIndex = key.indexOf(",");
+        const x = parseInt(key.slice(0, commaIndex), 10);
+        const y = parseInt(key.slice(commaIndex + 1), 10);
+        if (x > maxX) maxX = x;
+        if (y > maxY) maxY = y;
+      }
+      if (maxX !== -1 && maxY !== -1) {
+        onMaxGridChange({ x: maxX + 1, y: maxY + 1 });
+      } else {
+        onMaxGridChange(null);
+      }
+    },
+    { wait: 300 }
+  );
+  useEffect(() => {
+    checkMaxGrid(gridMarks);
+  }, [gridMarks, checkMaxGrid]);
+  const lastMousePos = useRef(null);
+  useEffect(() => {
+    if (selectionState.current.isSelecting && selectionState.current.start && lastMousePos.current) {
+      const coord = getGridFromCoord(
+        lastMousePos.current.x,
+        lastMousePos.current.y
+      );
+      if (coord) {
+        selectionState.current.current = coord;
+      }
+    }
+    requestRender();
+  }, [
+    width,
+    height,
+    scrollLeft,
+    rawScrollTop,
+    // 内部衍生逻辑处理了严格相等性检查
+    showScrollbar,
+    scrollbarTotalWidth,
+    scrollbarTotalHeight,
+    horizontalScaleSize,
+    verticalScaleSize,
+    thickness,
+    step,
+    midTickInterval,
+    majorTickInterval,
+    padding,
+    topPadding,
+    gridMarks,
+    canvasRightMargin,
+    canvasTopMargin,
+    readonly,
+    showCursor,
+    loops,
+    memos,
+    isExpanded,
+    isExpanded,
+    requestRender,
+    loopFontSize,
+    midTickLength,
+    majorTickLength,
+    smallTickLength,
+    showSmallTickText,
+    smallTickFontSize,
+    hoverEffectColor,
+    markSelectColor,
+    markCheckedColor,
+    markPointColor,
+    cursorColor,
+    mainGridColor,
+    minorTickColor,
+    rulerBgColor,
+    rulerTextColor,
+    rulerTickColor,
+    rulerBorderColor,
+    loopTickExtension,
+    showLoopArrow,
+    loopArrowSize,
+    showInnerLoopEndpoints,
+    majorTickFontSize,
+    midTickFontSize,
+    markPointFontSize,
+    loopWingOffset,
+    loopIndicatorColor,
+    loopTextColor
+  ]);
+  useEffect(() => {
+    if (canvasRef.current && !rendererRef.current) {
+      rendererRef.current = new RulerRenderer(canvasRef.current);
+      requestRender();
+    }
+  }, [requestRender]);
+  const getScrollbarHit = (clientX, clientY) => {
+    const rect = canvasRef.current?.getBoundingClientRect();
+    if (!rect) return null;
+    const x = clientX - rect.left;
+    const y = clientY - rect.top;
+    const layouts = getScrollbarLayouts();
+    if (layouts.vertical && x >= propsRef.current.width - SCROLLBAR_THICKNESS) {
+      const part = hitTestCanvasScrollbar(
+        layouts.vertical,
+        x - (propsRef.current.width - SCROLLBAR_THICKNESS),
+        y
+      );
+      if (part) {
+        return {
+          orientation: "vertical",
+          layout: layouts.vertical,
+          part,
+          pointer: y
+        };
+      }
+    }
+    if (layouts.horizontal && y >= propsRef.current.height - SCROLLBAR_THICKNESS) {
+      const part = hitTestCanvasScrollbar(
+        layouts.horizontal,
+        x,
+        y - (propsRef.current.height - SCROLLBAR_THICKNESS)
+      );
+      if (part) {
+        return {
+          orientation: "horizontal",
+          layout: layouts.horizontal,
+          part,
+          pointer: x
+        };
+      }
+    }
+    return null;
+  };
+  const handleMouseMove = (e) => {
+    const scrollbarDrag = scrollbarDragRef.current;
+    if (scrollbarDrag) {
+      const rect2 = canvasRef.current?.getBoundingClientRect();
+      if (!rect2) return;
+      const pointer = scrollbarDrag.orientation === "horizontal" ? e.clientX - rect2.left : e.clientY - rect2.top;
+      const nextPosition = resolveCanvasScrollbarDragPosition(
+        scrollbarDrag.layout,
+        scrollbarDrag.startScroll,
+        pointer - scrollbarDrag.startPointer
+      );
+      if (scrollbarDrag.orientation === "horizontal") {
+        propsRef.current.onHorizontalScroll?.(nextPosition);
+      } else {
+        propsRef.current.onVerticalScroll?.(nextPosition);
+      }
+      e.stopPropagation();
+      return;
+    }
+    const rect = canvasRef.current?.getBoundingClientRect();
+    if (rect) {
+      const newHoverX = e.clientX - rect.left;
+      const newHoverY = e.clientY - rect.top;
+      hoverState.current.x = newHoverX;
+      hoverState.current.y = newHoverY;
+      lastMousePos.current = { x: e.clientX, y: e.clientY };
+      const coord = getGridFromCoord(e.clientX, e.clientY);
+      const oldCoord = hoverState.current.coord;
+      let coordChanged = false;
+      if (coord?.x !== oldCoord?.x || coord?.y !== oldCoord?.y) {
+        hoverState.current.coord = coord;
+        coordChanged = true;
+      } else if (!coord && oldCoord) {
+        hoverState.current.coord = null;
+        coordChanged = true;
+      }
+      if (coordChanged && propsRef.current.onHoverGridChange) {
+        propsRef.current.onHoverGridChange(coord ?? null);
+      }
+    } else {
+      hoverState.current.x = null;
+      hoverState.current.y = null;
+    }
+    if (selectionState.current.isSelecting && selectionState.current.start) {
+      const coord = getGridFromCoord(e.clientX, e.clientY);
+      if (coord) {
+        selectionState.current.current = coord;
+      }
+      if (rect) {
+        const margin = 20;
+        let sx = 0;
+        let sy = 0;
+        if (e.clientX < rect.left + margin) sx = -AUTO_SCROLL_SPEED;
+        else if (e.clientX > rect.right - margin) sx = AUTO_SCROLL_SPEED;
+        if (e.clientY < rect.top + margin) sy = -AUTO_SCROLL_SPEED;
+        else if (e.clientY > rect.bottom - margin - (propsRef.current.showScrollbar ? SCROLLBAR_THICKNESS : 0))
+          sy = AUTO_SCROLL_SPEED;
+        if (sx !== 0 || sy !== 0) {
+          autoScrollSpeed.current = { x: sx, y: sy };
+          if (!autoScrollRaf.current) {
+            performAutoScroll();
+          }
+        } else {
+          stopAutoScroll();
+        }
+      }
+    }
+    requestRender();
+  };
+  const handleCanvasMouseDown = (e) => {
+    const scrollbarHit = getScrollbarHit(e.clientX, e.clientY);
+    if (e.button === 0 && scrollbarHit) {
+      const p = propsRef.current;
+      const scrollPos = scrollbarHit.orientation === "horizontal" ? p.scrollLeft : p.scrollTop;
+      const viewportSize = scrollbarHit.orientation === "horizontal" ? p.width : Math.max(
+        p.height - SCROLLBAR_THICKNESS - (p.canvasTopMargin ?? 0),
+        0
+      );
+      const onScroll = scrollbarHit.orientation === "horizontal" ? p.onHorizontalScroll : p.onVerticalScroll;
+      const pageSize = Math.max(viewportSize * 0.9, 1);
+      scrollbarInteractionRef.current = true;
+      clickStartPos.current = { x: e.clientX, y: e.clientY };
+      e.preventDefault();
+      e.stopPropagation();
+      if (scrollbarHit.part === "thumb") {
+        scrollbarDragRef.current = {
+          orientation: scrollbarHit.orientation,
+          layout: scrollbarHit.layout,
+          startPointer: scrollbarHit.pointer,
+          startScroll: scrollPos
+        };
+      } else if (scrollbarHit.part === "decrease") {
+        onScroll?.(Math.max(scrollPos - Math.max(viewportSize * 0.1, 1), 0));
+      } else if (scrollbarHit.part === "increase") {
+        onScroll?.(
+          Math.min(
+            scrollPos + Math.max(viewportSize * 0.1, 1),
+            scrollbarHit.layout.maxScroll
+          )
+        );
+      } else if (scrollbarHit.part === "track-before") {
+        onScroll?.(Math.max(scrollPos - pageSize, 0));
+      } else if (scrollbarHit.part === "track-after") {
+        onScroll?.(
+          Math.min(scrollPos + pageSize, scrollbarHit.layout.maxScroll)
+        );
+      }
+      return;
+    }
+    if (propsRef.current.readonly) return;
+    if (e.button === 0 && !isSpacePressed) {
+      const coord = getGridFromCoord(e.clientX, e.clientY);
+      if (coord) {
+        e.stopPropagation();
+        selectionState.current.isSelecting = true;
+        selectionState.current.start = coord;
+        selectionState.current.current = coord;
+        requestRender();
+      }
+    }
+    clickStartPos.current = { x: e.clientX, y: e.clientY };
+  };
+  useEventListener("mouseup", () => {
+    scrollbarDragRef.current = null;
+    const { isSelecting, start, current } = selectionState.current;
+    if (isSelecting && start && current) {
+      const x1 = Math.min(start.x, current.x);
+      const x2 = Math.max(start.x, current.x);
+      const y1 = Math.min(start.y, current.y);
+      const y2 = Math.max(start.y, current.y);
+      if (x1 === x2 && y1 === y2) ; else {
+        propsRef.current.onGridMarksChange(
+          (prev) => GridModel.markRange(prev, x1, y1, x2, y2, 1)
+        );
+      }
+      selectionState.current.isSelecting = false;
+      selectionState.current.start = null;
+      selectionState.current.current = null;
+      stopAutoScroll();
+      requestRender();
+    } else if (isSelecting) {
+      selectionState.current.isSelecting = false;
+      selectionState.current.start = null;
+      selectionState.current.current = null;
+      stopAutoScroll();
+      requestRender();
+    }
+  });
+  const handleCanvasClick = (e) => {
+    if (scrollbarInteractionRef.current) {
+      scrollbarInteractionRef.current = false;
+      return;
+    }
+    if (propsRef.current.readonly) return;
+    const dist = Math.hypot(
+      e.clientX - clickStartPos.current.x,
+      e.clientY - clickStartPos.current.y
+    );
+    if (dist > 5) return;
+    const coord = getGridFromCoord(e.clientX, e.clientY);
+    if (coord) {
+      propsRef.current.onGridMarksChange(
+        (prev) => GridModel.toggleCell(
+          prev,
+          coord.x,
+          coord.y,
+          propsRef.current.isClickModeEnabled
+        )
+      );
+    }
+  };
+  const handleMouseLeave = () => {
+    hoverState.current.x = null;
+    hoverState.current.y = null;
+    requestRender();
+  };
+  useImperativeHandle(ref, () => ({
+    toDataURL: (type = "image/png", quality, forceExpanded) => {
+      const p = propsRef.current;
+      const vScaleSize = p.verticalScaleSize ?? p.horizontalScaleSize ?? 20;
+      const thickness2 = p.thickness ?? 60;
+      const step2 = p.step ?? 10;
+      const padding2 = p.padding ?? 0;
+      const topPadding2 = p.topPadding ?? 0;
+      const rightMargin = p.canvasRightMargin ?? 50;
+      const topMargin = p.canvasTopMargin ?? 0;
+      const isExpandedToUse = forceExpanded !== void 0 ? forceExpanded : p.isExpanded ?? false;
+      let exportMarks = p.gridMarks;
+      if (isExpandedToUse && !p.isExpanded) {
+        let tempMarks = { ...p.gridMarks };
+        const loopsConfig = p.loops ?? [];
+        const rowLoops = loopsConfig.filter((l) => l.type === "y");
+        const colLoops = loopsConfig.filter((l) => l.type === "x");
+        rowLoops.sort((a, b) => b.startPos - a.startPos).forEach((loop) => {
+          tempMarks = GridModel.duplicateRows(
+            tempMarks,
+            loop.startPos,
+            loop.endPos,
+            loop.startPos,
+            // 插入位置
+            loop.count,
+            999999
+            // 导出时不限制上限
+          );
+        });
+        colLoops.sort((a, b) => b.startPos - a.startPos).forEach((loop) => {
+          tempMarks = GridModel.duplicateCols(
+            tempMarks,
+            loop.startPos,
+            loop.endPos,
+            loop.startPos,
+            // 插入位置
+            loop.count,
+            999999
+            // 导出时不限制上限
+          );
+        });
+        exportMarks = tempMarks;
+      }
+      let maxX = -1;
+      let maxY = -1;
+      Object.keys(exportMarks).forEach((key) => {
+        const [x, y] = key.split(",").map(Number);
+        maxX = Math.max(maxX, x);
+        maxY = Math.max(maxY, y);
+      });
+      if (!isExpandedToUse) {
+        (p.loops ?? []).forEach((loop) => {
+          if (loop.type === "x") {
+            maxX = Math.max(maxX, loop.endPos);
+          } else {
+            maxY = Math.max(maxY, loop.endPos);
+          }
+        });
+        (p.memos ?? []).forEach((memo2) => {
+          if (memo2.type === "x") {
+            maxX = Math.max(maxX, memo2.endPos);
+          } else {
+            maxY = Math.max(maxY, memo2.endPos);
+          }
+        });
+      }
+      const exportHScale = maxX === -1 ? p.horizontalScaleSize ?? 20 : maxX + 1;
+      const exportVScale = maxY === -1 ? vScaleSize : maxY + 1;
+      const exportRightMargin = estimateExportRightMargin({
+        baseRightMargin: rightMargin,
+        step: step2,
+        loops: p.loops ?? [],
+        memos: p.memos ?? [],
+        printMode: p.printMode,
+        loopFontSize: p.loopFontSize
+      });
+      const exportDpr = p.printMode ? 4 : 2;
+      let fullWidth = thickness2 + exportHScale * step2 + padding2 + exportRightMargin;
+      let fullHeight = thickness2 + exportVScale * step2 + padding2 + topPadding2 + topMargin;
+      const MAX_CANVAS_SIZE = 16e3;
+      if (fullHeight > MAX_CANVAS_SIZE || fullWidth > MAX_CANVAS_SIZE) {
+        console.warn("Canvas size exceeds limit, image will be truncated.");
+        fullWidth = Math.min(fullWidth, MAX_CANVAS_SIZE);
+        fullHeight = Math.min(fullHeight, MAX_CANVAS_SIZE);
+      }
+      const offscreenCanvas = document.createElement("canvas");
+      const offscreenRenderer = new RulerRenderer(offscreenCanvas);
+      offscreenRenderer.render({
+        width: fullWidth,
+        height: fullHeight,
+        scrollLeft: 0,
+        scrollTop: 0,
+        horizontalScaleSize: exportHScale,
+        verticalScaleSize: exportVScale,
+        thickness: thickness2,
+        step: step2,
+        minorTickInterval: p.midTickInterval ?? 5,
+        majorTickInterval: p.majorTickInterval ?? 10,
+        padding: padding2,
+        topPadding: topPadding2,
+        gridMarks: exportMarks,
+        hoverX: null,
+        hoverY: null,
+        hoveredGridCoord: null,
+        isSelecting: false,
+        selectionStart: null,
+        selectionCurrent: null,
+        rightMargin: exportRightMargin,
+        topMargin,
+        showCursor: false,
+        loops: p.loops ?? [],
+        memos: p.memos ?? [],
+        isExpanded: isExpandedToUse,
+        dpr: exportDpr,
+        midTickFontSize: p.midTickFontSize,
+        majorTickFontSize: p.majorTickFontSize,
+        loopFontSize: p.loopFontSize,
+        printMode: p.printMode,
+        markPointFontSize: p.markPointFontSize,
+        loopWingOffset: p.loopWingOffset,
+        minorTickLength: p.midTickLength,
+        majorTickLength: p.majorTickLength,
+        smallTickLength: p.smallTickLength,
+        showSmallTickText: p.showSmallTickText,
+        smallTickFontSize: p.smallTickFontSize,
+        hoverEffectColor: p.hoverEffectColor,
+        markSelectColor: p.markSelectColor,
+        markCheckedColor: p.markCheckedColor,
+        markPointColor: p.markPointColor,
+        cursorColor: p.cursorColor,
+        mainGridColor: p.mainGridColor,
+        minorTickColor: p.minorTickColor,
+        rulerBgColor: p.rulerBgColor,
+        rulerTextColor: p.rulerTextColor,
+        rulerTickColor: p.rulerTickColor,
+        rulerBorderColor: p.rulerBorderColor,
+        loopIndicatorColor: p.loopIndicatorColor,
+        loopTextColor: p.loopTextColor,
+        loopTickExtension: p.loopTickExtension,
+        showLoopArrow: p.showLoopArrow,
+        loopArrowSize: p.loopArrowSize,
+        showInnerLoopEndpoints: p.showInnerLoopEndpoints
+      });
+      return {
+        url: offscreenCanvas.toDataURL(type, quality),
+        width: offscreenCanvas.width,
+        height: offscreenCanvas.height,
+        dpi: exportDpr * 96
+      };
+    },
+    toSVG: (forceExpanded) => {
+      const p = propsRef.current;
+      const scene = buildSvgScene(p, forceExpanded);
+      const { svg, width: width2, height: height2 } = exportDrawingBoardSvg(scene.options);
+      return {
+        svg,
+        url: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`,
+        width: width2,
+        height: height2
+      };
+    }
+  }));
+  if (printMode && svgScene) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          width: svgScene.width,
+          height: svgScene.height,
+          lineHeight: 0,
+          flex: "0 0 auto"
+        },
+        dangerouslySetInnerHTML: { __html: svgScene.svg }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref: canvasRef,
+      style: {
+        ...STYLES.canvas,
+        cursor: isSpacePressed ? "grab" : "crosshair",
+        width,
+        height
+      },
+      onMouseMove: handleMouseMove,
+      onMouseDown: handleCanvasMouseDown,
+      onClick: handleCanvasClick,
+      onMouseLeave: handleMouseLeave,
+      onClickCapture: () => {
+        if (!scrollbarInteractionRef.current) onGirdClick?.();
+      }
+    }
+  );
+});
+var grid_default = React.memo(Grid);
+
+// src/components/wheel-scroll.ts
+var WHEEL_DELTA_MODE_PIXEL = 0;
+var WHEEL_DELTA_MODE_LINE = 1;
+var WHEEL_DELTA_MODE_PAGE = 2;
+function normalizeWheelDeltaToPixels(options) {
+  const delta = Number.isFinite(options.delta) ? options.delta : 0;
+  if (options.deltaMode === WHEEL_DELTA_MODE_LINE) {
+    return delta * Math.max(options.lineHeight, 1);
+  }
+  if (options.deltaMode === WHEEL_DELTA_MODE_PAGE) {
+    return delta * Math.max(options.pageSize, 1);
+  }
+  return delta;
+}
+function softenWheelDeltaPixels(options) {
+  const { delta, deltaMode } = options;
+  if (delta === 0) return 0;
+  const absoluteDelta = Math.abs(delta);
+  const lineHeight = Math.max(options.lineHeight, 1);
+  if (deltaMode === WHEEL_DELTA_MODE_PIXEL && absoluteDelta >= 80 && absoluteDelta <= 160) {
+    return delta * 0.42;
+  }
+  if (deltaMode === WHEEL_DELTA_MODE_LINE) {
+    const maxStep = Math.max(lineHeight * 0.75, 24);
+    if (absoluteDelta <= maxStep) return delta * 0.72;
+    return Math.sign(delta) * (maxStep + (absoluteDelta - maxStep) * 0.35);
+  }
+  const softThreshold = Math.max(lineHeight * 1.25, 48);
+  if (absoluteDelta <= softThreshold) return delta;
+  return Math.sign(delta) * (softThreshold + (absoluteDelta - softThreshold) * 0.4);
+}
+function resolveWheelScrollDelta({
+  deltaX,
+  deltaY,
+  deltaMode,
+  shiftKey,
+  lineHeight,
+  pageWidth,
+  pageHeight
+}) {
+  const left = softenWheelDeltaPixels({
+    delta: normalizeWheelDeltaToPixels({
+      delta: deltaX,
+      deltaMode,
+      lineHeight,
+      pageSize: pageWidth
+    }),
+    deltaMode,
+    lineHeight
+  });
+  const top = softenWheelDeltaPixels({
+    delta: normalizeWheelDeltaToPixels({
+      delta: deltaY,
+      deltaMode,
+      lineHeight,
+      pageSize: pageHeight
+    }),
+    deltaMode,
+    lineHeight
+  });
+  return shiftKey ? { left: left + top, top: 0 } : { left, top };
+}
+function shouldApplyWheelDeltaImmediately(options) {
+  return options.deltaMode === WHEEL_DELTA_MODE_PIXEL && Math.abs(options.deltaX) < 40 && Math.abs(options.deltaY) < 40;
+}
+function advanceWheelScrollSmoothing(options) {
+  const timeConstant = Math.max(options.timeConstantMs ?? 92, 1);
+  const deltaMs = Math.max(Math.min(options.deltaMs, 64), 0);
+  const alpha = 1 - Math.exp(-deltaMs / timeConstant);
+  const next = {
+    left: options.current.left + (options.target.left - options.current.left) * alpha,
+    top: options.current.top + (options.target.top - options.current.top) * alpha
+  };
+  const done = Math.abs(options.target.left - next.left) < 0.35 && Math.abs(options.target.top - next.top) < 0.35;
+  return {
+    next: done ? options.target : next,
+    done
+  };
+}
+var columns = [
+  { title: "\u5E8F\u53F7", dataIndex: "id", key: "id", width: 80 },
+  { title: "\u65F6\u95F4", dataIndex: "time", key: "time", width: 120 },
+  { title: "\u64CD\u4F5C\u5185\u5BB9", dataIndex: "content", key: "content" }
+];
+function HistoryModal({ open, onCancel, onClear, logs }) {
+  return /* @__PURE__ */ jsx(
+    ReactModal,
+    {
+      title: "\u64CD\u4F5C\u5386\u53F2",
+      open,
+      onCancel,
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ReactButton, { onClick: onClear, danger: true, children: "\u6E05\u7A7A\u5386\u53F2" }),
+        /* @__PURE__ */ jsx(ReactButton, { type: "primary", onClick: onCancel, children: "\u5173\u95ED" })
+      ] }),
+      width: 600,
+      children: /* @__PURE__ */ jsx(
+        ReactListTable,
+        {
+          dataSource: logs,
+          columns,
+          rowKey: "id",
+          height: 400,
+          scroll: { y: 400 },
+          rowHeight: 32,
+          toolbar: false
+        }
+      )
+    }
+  );
+}
+var history_modal_default = memo(HistoryModal);
+var BatchCopyModal = ({
+  open,
+  onCancel,
+  onOk
+}) => {
+  const [duplicateForm] = ReactForm.useForm();
+  const duplicateType = ReactForm.useWatch("type", duplicateForm);
+  const handleOk = () => {
+    duplicateForm.validateFields().then((values) => {
+      onOk(values);
+    }).catch((info) => {
+      console.log("Validate Failed:", info);
+    });
+  };
+  const afterOpenChange = (visible) => {
+    if (visible) {
+      duplicateForm.resetFields();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    ReactModal,
+    {
+      title: "\u590D\u5236\u7ECF\u7EAC",
+      open,
+      onOk: handleOk,
+      onCancel,
+      afterOpenChange,
+      width: 400,
+      children: /* @__PURE__ */ jsxs(
+        ReactForm,
+        {
+          form: duplicateForm,
+          layout: "vertical",
+          initialValues: {
+            type: "y",
+            count: 1,
+            startPos: 1,
+            endPos: 1,
+            insertPos: 1
+          },
+          children: [
+            /* @__PURE__ */ jsx(ReactForm.Item, { label: "\u7C7B\u578B", name: "type", children: /* @__PURE__ */ jsxs(ReactRadio.Group, { children: [
+              /* @__PURE__ */ jsx(ReactRadio, { value: "y", children: "\u7EAC" }),
+              /* @__PURE__ */ jsx(ReactRadio, { value: "x", children: "\u7ECF" })
+            ] }) }),
+            /* @__PURE__ */ jsxs(ReactRow, { gutter: 16, children: [
+              /* @__PURE__ */ jsx(ReactCol, { span: 12, children: /* @__PURE__ */ jsx(
+                ReactForm.Item,
+                {
+                  label: duplicateType === "y" ? "\u63D2\u5165\u884C" : "\u63D2\u5165\u5217",
+                  name: "insertPos",
+                  rules: [{ required: true, message: "\u8BF7\u8F93\u5165\u63D2\u5165\u4F4D\u7F6E" }],
+                  children: /* @__PURE__ */ jsx(ReactInputNumber, { min: 1, style: { width: "100%" } })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(ReactCol, { span: 12, children: /* @__PURE__ */ jsx(
+                ReactForm.Item,
+                {
+                  label: "\u590D\u5236\u6B21\u6570",
+                  name: "count",
+                  rules: [{ required: true, message: "\u8BF7\u8F93\u5165\u6B21\u6570" }],
+                  children: /* @__PURE__ */ jsx(ReactInputNumber, { min: 1, style: { width: "100%" } })
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsxs(ReactRow, { gutter: 16, children: [
+              /* @__PURE__ */ jsx(ReactCol, { span: 12, children: /* @__PURE__ */ jsx(
+                ReactForm.Item,
+                {
+                  label: duplicateType === "y" ? "\u5F00\u59CB\u884C" : "\u5F00\u59CB\u5217",
+                  name: "startPos",
+                  rules: [{ required: true, message: "\u8BF7\u8F93\u5165\u5F00\u59CB\u4F4D\u7F6E" }],
+                  children: /* @__PURE__ */ jsx(ReactInputNumber, { min: 1, style: { width: "100%" } })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(ReactCol, { span: 12, children: /* @__PURE__ */ jsx(
+                ReactForm.Item,
+                {
+                  label: duplicateType === "y" ? "\u7ED3\u675F\u884C" : "\u7ED3\u675F\u5217",
+                  name: "endPos",
+                  dependencies: ["startPos"],
+                  rules: [
+                    { required: true, message: "\u8BF7\u8F93\u5165\u7ED3\u675F\u4F4D\u7F6E" },
+                    ({ getFieldValue }) => ({
+                      validator(_, value) {
+                        const start = getFieldValue("startPos");
+                        if (typeof start === "number" && typeof value === "number" && value < start) {
+                          return Promise.reject(
+                            new Error("\u7ED3\u675F\u4F4D\u7F6E\u4E0D\u80FD\u5C0F\u4E8E\u5F00\u59CB\u4F4D\u7F6E")
+                          );
+                        }
+                        return Promise.resolve();
+                      }
+                    })
+                  ],
+                  children: /* @__PURE__ */ jsx(ReactInputNumber, { min: 1, style: { width: "100%" } })
+                }
+              ) })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+var batch_copy_modal_default = BatchCopyModal;
+var CreateLoopModal = ({
+  open,
+  onCancel,
+  onSubmit,
+  verticalScaleSize,
+  horizontalScaleSize
+}) => {
+  const [form] = ReactForm.useForm();
+  const type = ReactForm.useWatch("type", form);
+  const handleOk = () => {
+    form.validateFields().then((values) => {
+      onSubmit(values);
+    }).catch((info) => {
+      console.log("Validate Failed:", info);
+    });
+  };
+  const afterOpenChange = (visible) => {
+    if (visible) {
+      form.resetFields();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    ReactModal,
+    {
+      title: "\u65B0\u5EFA\u5FAA\u73AF",
+      open,
+      onOk: handleOk,
+      onCancel,
+      afterOpenChange,
+      width: 400,
+      children: /* @__PURE__ */ jsxs(
+        ReactForm,
+        {
+          form,
+          layout: "vertical",
+          initialValues: { type: "y", count: 2, startPos: 1, endPos: 1 },
+          children: [
+            /* @__PURE__ */ jsx(ReactForm.Item, { label: "\u7C7B\u578B", name: "type", children: /* @__PURE__ */ jsxs(ReactRadio.Group, { children: [
+              /* @__PURE__ */ jsx(ReactRadio, { value: "y", children: "\u7EAC" }),
+              /* @__PURE__ */ jsx(ReactRadio, { value: "x", children: "\u7ECF" })
+            ] }) }),
+            /* @__PURE__ */ jsxs(ReactRow, { gutter: 16, children: [
+              /* @__PURE__ */ jsx(ReactCol, { span: 12, children: /* @__PURE__ */ jsx(
+                ReactForm.Item,
+                {
+                  label: type === "y" ? "\u5F00\u59CB\u884C" : "\u5F00\u59CB\u5217",
+                  name: "startPos",
+                  rules: [{ required: true, message: "\u8BF7\u8F93\u5165\u5F00\u59CB\u4F4D\u7F6E" }],
+                  children: /* @__PURE__ */ jsx(
+                    ReactInputNumber,
+                    {
+                      min: 1,
+                      max: type === "y" ? verticalScaleSize : horizontalScaleSize,
+                      style: { width: "100%" }
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsx(ReactCol, { span: 12, children: /* @__PURE__ */ jsx(
+                ReactForm.Item,
+                {
+                  label: type === "y" ? "\u7ED3\u675F\u884C" : "\u7ED3\u675F\u5217",
+                  name: "endPos",
+                  dependencies: ["startPos"],
+                  rules: [
+                    { required: true, message: "\u8BF7\u8F93\u5165\u7ED3\u675F\u4F4D\u7F6E" },
+                    ({ getFieldValue }) => ({
+                      validator(_, value) {
+                        const start = getFieldValue("startPos");
+                        const max = type === "y" ? verticalScaleSize : horizontalScaleSize;
+                        if (typeof start === "number" && typeof value === "number" && value < start) {
+                          return Promise.reject(
+                            new Error("\u7ED3\u675F\u4F4D\u7F6E\u4E0D\u80FD\u5C0F\u4E8E\u5F00\u59CB\u4F4D\u7F6E")
+                          );
+                        }
+                        if (typeof value === "number" && value > max) {
+                          return Promise.reject(
+                            new Error(`\u7ED3\u675F\u4F4D\u7F6E\u4E0D\u80FD\u5927\u4E8E ${max}`)
+                          );
+                        }
+                        return Promise.resolve();
+                      }
+                    })
+                  ],
+                  children: /* @__PURE__ */ jsx(
+                    ReactInputNumber,
+                    {
+                      min: 1,
+                      max: type === "y" ? verticalScaleSize : horizontalScaleSize,
+                      style: { width: "100%" }
+                    }
+                  )
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsx(
+              ReactForm.Item,
+              {
+                label: "\u5FAA\u73AF\u6B21\u6570",
+                name: "count",
+                rules: [
+                  { required: true, message: "\u8BF7\u8F93\u5165\u6B21\u6570" },
+                  { type: "number", min: 2, message: "\u5FAA\u73AF\u6B21\u6570\u4E0D\u80FD\u5C0F\u4E8E 2" },
+                  { type: "integer", message: "\u5FAA\u73AF\u6B21\u6570\u5FC5\u987B\u662F\u6574\u6570" }
+                ],
+                children: /* @__PURE__ */ jsx(ReactInputNumber, { min: 2, style: { width: "100%" } })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+var create_loop_modal_default = CreateLoopModal;
+var EditLoopModal = ({
+  open,
+  onCancel,
+  onSubmit,
+  loops,
+  loopsInSelection,
+  verticalScaleSize,
+  horizontalScaleSize
+}) => {
+  const [form] = ReactForm.useForm();
+  const type = ReactForm.useWatch("type", form);
+  const handleOk = () => {
+    form.validateFields().then((values) => {
+      onSubmit(values);
+    }).catch((info) => {
+      console.log("Validate Failed:", info);
+    });
+  };
+  const handleLoopSelect = (val) => {
+    const loop = loops.find((l) => l.id === val);
+    if (loop) {
+      form.setFieldsValue({
+        startPos: loop.startPos + 1,
+        endPos: loop.endPos + 1,
+        count: loop.count
+      });
+    }
+  };
+  const afterOpenChange = (visible) => {
+    if (visible) {
+      form.resetFields();
+      const preferredLoops = loopsInSelection.length > 0 ? loopsInSelection : loops;
+      const yLoops = preferredLoops.filter((l) => l.type === "y");
+      const xLoops = preferredLoops.filter((l) => l.type === "x");
+      let targetType = "y";
+      if (yLoops.length === 0 && xLoops.length > 0) {
+        targetType = "x";
+      }
+      form.setFieldsValue({
+        type: targetType,
+        count: 2
+      });
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    ReactModal,
+    {
+      title: "\u7F16\u8F91\u5FAA\u73AF",
+      open,
+      onOk: handleOk,
+      onCancel,
+      afterOpenChange,
+      width: 400,
+      children: /* @__PURE__ */ jsxs(ReactForm, { form, layout: "vertical", children: [
+        /* @__PURE__ */ jsx(ReactForm.Item, { label: "\u7C7B\u578B", name: "type", initialValue: "y", children: /* @__PURE__ */ jsxs(
+          ReactRadio.Group,
+          {
+            onChange: () => {
+              form.setFieldsValue({
+                loopId: void 0,
+                startPos: void 0,
+                endPos: void 0,
+                count: void 0
+              });
+            },
+            children: [
+              /* @__PURE__ */ jsx(ReactRadio, { value: "y", children: "\u7EAC" }),
+              /* @__PURE__ */ jsx(ReactRadio, { value: "x", children: "\u7ECF" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          ReactForm.Item,
+          {
+            label: "\u5FAA\u73AF\u5E8F\u53F7",
+            name: "loopId",
+            rules: [{ required: true, message: "\u8BF7\u9009\u62E9\u5FAA\u73AF" }],
+            children: /* @__PURE__ */ jsx(
+              ReactSelect,
+              {
+                placeholder: "\u8BF7\u9009\u62E9\u5FAA\u73AF\u5E8F\u53F7",
+                onChange: handleLoopSelect,
+                options: loops.filter((loop) => loop.type === type).map((loop) => ({
+                  value: loop.id,
+                  label: `\u5E8F\u53F7 ${loops.findIndex((item) => item.id === loop.id) + 1} (\u8303\u56F4 ${loop.startPos + 1}-${loop.endPos + 1})`
+                }))
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(ReactRow, { gutter: 16, children: [
+          /* @__PURE__ */ jsx(ReactCol, { span: 12, children: /* @__PURE__ */ jsx(
+            ReactForm.Item,
+            {
+              label: type === "y" ? "\u5F00\u59CB\u884C" : "\u5F00\u59CB\u5217",
+              name: "startPos",
+              rules: [{ required: true, message: "\u8BF7\u8F93\u5165\u5F00\u59CB\u4F4D\u7F6E" }],
+              children: /* @__PURE__ */ jsx(
+                ReactInputNumber,
+                {
+                  min: 1,
+                  max: type === "y" ? verticalScaleSize : horizontalScaleSize,
+                  style: { width: "100%" }
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ReactCol, { span: 12, children: /* @__PURE__ */ jsx(
+            ReactForm.Item,
+            {
+              label: type === "y" ? "\u7ED3\u675F\u884C" : "\u7ED3\u675F\u5217",
+              name: "endPos",
+              dependencies: ["startPos"],
+              rules: [
+                { required: true, message: "\u8BF7\u8F93\u5165\u7ED3\u675F\u4F4D\u7F6E" },
+                ({ getFieldValue }) => ({
+                  validator(_, value) {
+                    const start = getFieldValue("startPos");
+                    const max = type === "y" ? verticalScaleSize : horizontalScaleSize;
+                    if (typeof start === "number" && typeof value === "number" && value < start) {
+                      return Promise.reject(
+                        new Error("\u7ED3\u675F\u4F4D\u7F6E\u4E0D\u80FD\u5C0F\u4E8E\u5F00\u59CB\u4F4D\u7F6E")
+                      );
+                    }
+                    if (typeof value === "number" && value > max) {
+                      return Promise.reject(
+                        new Error(`\u7ED3\u675F\u4F4D\u7F6E\u4E0D\u80FD\u5927\u4E8E ${max}`)
+                      );
+                    }
+                    return Promise.resolve();
+                  }
+                })
+              ],
+              children: /* @__PURE__ */ jsx(
+                ReactInputNumber,
+                {
+                  min: 1,
+                  max: type === "y" ? verticalScaleSize : horizontalScaleSize,
+                  style: { width: "100%" }
+                }
+              )
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          ReactForm.Item,
+          {
+            label: "\u5FAA\u73AF\u6B21\u6570",
+            name: "count",
+            rules: [
+              { required: true, message: "\u8BF7\u8F93\u5165\u6B21\u6570" },
+              { type: "number", min: 2, message: "\u5FAA\u73AF\u6B21\u6570\u4E0D\u80FD\u5C0F\u4E8E 2" },
+              { type: "integer", message: "\u5FAA\u73AF\u6B21\u6570\u5FC5\u987B\u662F\u6574\u6570" }
+            ],
+            children: /* @__PURE__ */ jsx(ReactInputNumber, { min: 2, style: { width: "100%" } })
+          }
+        )
+      ] })
+    }
+  );
+};
+var edit_loop_modal_default = EditLoopModal;
+var DeleteLoopModal = ({
+  open,
+  onCancel,
+  onSubmit,
+  loops,
+  loopsInSelection
+}) => {
+  const [form] = ReactForm.useForm();
+  const type = ReactForm.useWatch("type", form);
+  const handleOk = () => {
+    form.validateFields().then((values) => {
+      onSubmit(values);
+    }).catch((info) => {
+      console.log("Validate Failed:", info);
+    });
+  };
+  const afterOpenChange = (visible) => {
+    if (visible) {
+      form.resetFields();
+      const preferredLoops = loopsInSelection.length > 0 ? loopsInSelection : loops;
+      const yLoops = preferredLoops.filter((l) => l.type === "y");
+      const xLoops = preferredLoops.filter((l) => l.type === "x");
+      let targetType = "y";
+      if (yLoops.length === 0 && xLoops.length > 0) {
+        targetType = "x";
+      }
+      form.setFieldsValue({ type: targetType });
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    ReactModal,
+    {
+      title: "\u5220\u9664\u5FAA\u73AF",
+      open,
+      onOk: handleOk,
+      onCancel,
+      afterOpenChange,
+      width: 400,
+      children: /* @__PURE__ */ jsxs(ReactForm, { form, layout: "vertical", children: [
+        /* @__PURE__ */ jsx(ReactForm.Item, { label: "\u7C7B\u578B", name: "type", initialValue: "y", children: /* @__PURE__ */ jsxs(
+          ReactRadio.Group,
+          {
+            onChange: () => {
+              form.setFieldsValue({ loopId: void 0 });
+            },
+            children: [
+              /* @__PURE__ */ jsx(ReactRadio, { value: "y", children: "\u7EAC" }),
+              /* @__PURE__ */ jsx(ReactRadio, { value: "x", children: "\u7ECF" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          ReactForm.Item,
+          {
+            label: "\u5FAA\u73AF\u5E8F\u53F7",
+            name: "loopId",
+            rules: [{ required: true, message: "\u8BF7\u9009\u62E9\u8981\u5220\u9664\u7684\u5FAA\u73AF" }],
+            children: /* @__PURE__ */ jsx(
+              ReactSelect,
+              {
+                placeholder: "\u8BF7\u9009\u62E9\u5FAA\u73AF\u5E8F\u53F7",
+                options: loops.filter((loop) => loop.type === type).map((loop) => ({
+                  value: loop.id,
+                  label: `\u5E8F\u53F7 ${loops.findIndex((item) => item.id === loop.id) + 1} (\u8303\u56F4 ${loop.startPos + 1}-${loop.endPos + 1})`
+                }))
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+};
+var delete_loop_modal_default = DeleteLoopModal;
+var InsertJingWeiModal = ({
+  open,
+  onCancel,
+  onOk,
+  verticalScaleSize,
+  horizontalScaleSize
+}) => {
+  const [form] = ReactForm.useForm();
+  const type = ReactForm.useWatch("type", form) || "y";
+  const handleOk = () => {
+    form.validateFields().then((values) => {
+      onOk(values);
+    }).catch((info) => {
+      console.log("Validate Failed:", info);
+    });
+  };
+  const afterOpenChange = (visible) => {
+    if (visible) {
+      form.resetFields();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    ReactModal,
+    {
+      title: "\u63D2\u5165\u7ECF\u7EAC",
+      open,
+      onOk: handleOk,
+      onCancel,
+      afterOpenChange,
+      width: 400,
+      destroyOnClose: true,
+      children: /* @__PURE__ */ jsxs(
+        ReactForm,
+        {
+          form,
+          layout: "vertical",
+          initialValues: { type: "y", count: 1 },
+          children: [
+            /* @__PURE__ */ jsx(ReactForm.Item, { label: "\u7C7B\u578B", name: "type", children: /* @__PURE__ */ jsxs(ReactRadio.Group, { children: [
+              /* @__PURE__ */ jsx(ReactRadio, { value: "y", children: "\u7EAC" }),
+              /* @__PURE__ */ jsx(ReactRadio, { value: "x", children: "\u7ECF" })
+            ] }) }),
+            /* @__PURE__ */ jsx(
+              ReactForm.Item,
+              {
+                label: "\u63D2\u5165\u4F4D\u7F6E",
+                name: "insertPos",
+                rules: [{ required: true, message: "\u8BF7\u8F93\u5165\u63D2\u5165\u4F4D\u7F6E" }],
+                children: /* @__PURE__ */ jsx(
+                  ReactInputNumber,
+                  {
+                    min: 1,
+                    max: type === "y" ? verticalScaleSize : horizontalScaleSize,
+                    style: { width: "100%" },
+                    placeholder: "\u63D2\u5165\u8D77\u59CB\u70B9"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ReactForm.Item,
+              {
+                label: "\u63D2\u5165\u6570\u91CF",
+                name: "count",
+                rules: [{ required: true, message: "\u8BF7\u8F93\u5165\u63D2\u5165\u6570\u91CF" }],
+                children: /* @__PURE__ */ jsx(ReactInputNumber, { min: 1, style: { width: "100%" } })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+var insert_jing_wei_modal_default = InsertJingWeiModal;
+var DeleteJingWeiModal = ({
+  open,
+  onCancel,
+  onOk,
+  verticalScaleSize,
+  horizontalScaleSize
+}) => {
+  const [form] = ReactForm.useForm();
+  const type = ReactForm.useWatch("type", form) || "y";
+  const handleOk = () => {
+    form.validateFields().then((values) => {
+      onOk(values);
+    }).catch((info) => {
+      console.log("Validate Failed:", info);
+    });
+  };
+  const afterOpenChange = (visible) => {
+    if (visible) {
+      form.resetFields();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    ReactModal,
+    {
+      title: "\u5220\u9664\u7ECF\u7EAC",
+      open,
+      onOk: handleOk,
+      onCancel,
+      afterOpenChange,
+      width: 400,
+      destroyOnClose: true,
+      children: /* @__PURE__ */ jsxs(
+        ReactForm,
+        {
+          form,
+          layout: "vertical",
+          initialValues: { type: "y", startPos: 1, endPos: 1 },
+          children: [
+            /* @__PURE__ */ jsx(ReactForm.Item, { label: "\u7C7B\u578B", name: "type", children: /* @__PURE__ */ jsxs(ReactRadio.Group, { children: [
+              /* @__PURE__ */ jsx(ReactRadio, { value: "y", children: "\u7EAC" }),
+              /* @__PURE__ */ jsx(ReactRadio, { value: "x", children: "\u7ECF" })
+            ] }) }),
+            /* @__PURE__ */ jsxs(ReactRow, { gutter: 16, children: [
+              /* @__PURE__ */ jsx(ReactCol, { span: 12, children: /* @__PURE__ */ jsx(
+                ReactForm.Item,
+                {
+                  label: type === "y" ? "\u5F00\u59CB\u884C" : "\u5F00\u59CB\u5217",
+                  name: "startPos",
+                  rules: [{ required: true, message: "\u8BF7\u8F93\u5165\u5F00\u59CB\u4F4D\u7F6E" }],
+                  children: /* @__PURE__ */ jsx(
+                    ReactInputNumber,
+                    {
+                      min: 1,
+                      max: type === "y" ? verticalScaleSize : horizontalScaleSize,
+                      style: { width: "100%" },
+                      placeholder: "\u5F00\u59CB\u4F4D\u7F6E"
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsx(ReactCol, { span: 12, children: /* @__PURE__ */ jsx(
+                ReactForm.Item,
+                {
+                  label: type === "y" ? "\u7ED3\u675F\u884C" : "\u7ED3\u675F\u5217",
+                  name: "endPos",
+                  dependencies: ["startPos"],
+                  rules: [
+                    { required: true, message: "\u8BF7\u8F93\u5165\u7ED3\u675F\u4F4D\u7F6E" },
+                    ({ getFieldValue }) => ({
+                      validator(_, value) {
+                        const start = getFieldValue("startPos");
+                        if (typeof start === "number" && typeof value === "number" && value < start) {
+                          return Promise.reject(
+                            new Error("\u7ED3\u675F\u4F4D\u7F6E\u4E0D\u80FD\u5C0F\u4E8E\u5F00\u59CB\u4F4D\u7F6E")
+                          );
+                        }
+                        return Promise.resolve();
+                      }
+                    })
+                  ],
+                  children: /* @__PURE__ */ jsx(
+                    ReactInputNumber,
+                    {
+                      min: 1,
+                      max: type === "y" ? verticalScaleSize : horizontalScaleSize,
+                      style: { width: "100%" },
+                      placeholder: "\u7ED3\u675F\u4F4D\u7F6E"
+                    }
+                  )
+                }
+              ) })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+var delete_jing_wei_modal_default = DeleteJingWeiModal;
+var CreateMemoModal = ({
+  open,
+  onCancel,
+  onSubmit,
+  verticalScaleSize,
+  horizontalScaleSize
+}) => {
+  const [form] = ReactForm.useForm();
+  const type = ReactForm.useWatch("type", form);
+  const handleOk = () => {
+    form.validateFields().then((values) => {
+      onSubmit(values);
+    }).catch((info) => {
+      console.log("Validate Failed:", info);
+    });
+  };
+  const afterOpenChange = (visible) => {
+    if (visible) {
+      form.resetFields();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    ReactModal,
+    {
+      title: "\u65B0\u5EFA\u5907\u6CE8",
+      open,
+      onOk: handleOk,
+      onCancel,
+      afterOpenChange,
+      width: 400,
+      children: /* @__PURE__ */ jsxs(
+        ReactForm,
+        {
+          form,
+          layout: "vertical",
+          initialValues: { type: "y", startPos: 1, endPos: 1 },
+          children: [
+            /* @__PURE__ */ jsx(ReactForm.Item, { label: "\u7C7B\u578B", name: "type", children: /* @__PURE__ */ jsxs(ReactRadio.Group, { children: [
+              /* @__PURE__ */ jsx(ReactRadio, { value: "y", children: "\u7EAC" }),
+              /* @__PURE__ */ jsx(ReactRadio, { value: "x", children: "\u7ECF" })
+            ] }) }),
+            /* @__PURE__ */ jsxs(ReactRow, { gutter: 16, children: [
+              /* @__PURE__ */ jsx(ReactCol, { span: 12, children: /* @__PURE__ */ jsx(
+                ReactForm.Item,
+                {
+                  label: type === "y" ? "\u5F00\u59CB\u884C" : "\u5F00\u59CB\u5217",
+                  name: "startPos",
+                  rules: [{ required: true, message: "\u8BF7\u8F93\u5165\u5F00\u59CB\u4F4D\u7F6E" }],
+                  children: /* @__PURE__ */ jsx(
+                    ReactInputNumber,
+                    {
+                      min: 1,
+                      max: type === "y" ? verticalScaleSize : horizontalScaleSize,
+                      style: { width: "100%" }
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsx(ReactCol, { span: 12, children: /* @__PURE__ */ jsx(
+                ReactForm.Item,
+                {
+                  label: type === "y" ? "\u7ED3\u675F\u884C" : "\u7ED3\u675F\u5217",
+                  name: "endPos",
+                  dependencies: ["startPos"],
+                  rules: [
+                    { required: true, message: "\u8BF7\u8F93\u5165\u7ED3\u675F\u4F4D\u7F6E" },
+                    ({ getFieldValue }) => ({
+                      validator(_, value) {
+                        const start = getFieldValue("startPos");
+                        const max = type === "y" ? verticalScaleSize : horizontalScaleSize;
+                        if (typeof start === "number" && typeof value === "number" && value < start) {
+                          return Promise.reject(
+                            new Error("\u7ED3\u675F\u4F4D\u7F6E\u4E0D\u80FD\u5C0F\u4E8E\u5F00\u59CB\u4F4D\u7F6E")
+                          );
+                        }
+                        if (typeof value === "number" && value > max) {
+                          return Promise.reject(
+                            new Error(`\u7ED3\u675F\u4F4D\u7F6E\u4E0D\u80FD\u5927\u4E8E ${max}`)
+                          );
+                        }
+                        return Promise.resolve();
+                      }
+                    })
+                  ],
+                  children: /* @__PURE__ */ jsx(
+                    ReactInputNumber,
+                    {
+                      min: 1,
+                      max: type === "y" ? verticalScaleSize : horizontalScaleSize,
+                      style: { width: "100%" }
+                    }
+                  )
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsx(
+              ReactForm.Item,
+              {
+                label: "\u5907\u6CE8\u5185\u5BB9",
+                name: "content",
+                rules: [{ required: true, message: "\u8BF7\u8F93\u5165\u5907\u6CE8\u5185\u5BB9" }],
+                children: /* @__PURE__ */ jsx(ReactTextArea, { rows: 3, placeholder: "\u8BF7\u8F93\u5165\u5907\u6CE8..." })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+var create_memo_modal_default = CreateMemoModal;
+var DeleteMemoModal = ({
+  open,
+  onCancel,
+  onSubmit,
+  memosInSelection
+}) => {
+  const [form] = ReactForm.useForm();
+  const type = ReactForm.useWatch("type", form);
+  const handleOk = () => {
+    form.validateFields().then((values) => {
+      onSubmit(values);
+    }).catch((info) => {
+      console.log("Validate Failed:", info);
+    });
+  };
+  const afterOpenChange = (visible) => {
+    if (visible) {
+      form.resetFields();
+      const yMemos = memosInSelection.filter((m) => m.type === "y");
+      const xMemos = memosInSelection.filter((m) => m.type === "x");
+      let targetType = "y";
+      if (yMemos.length === 0 && xMemos.length > 0) {
+        targetType = "x";
+      }
+      form.setFieldsValue({ type: targetType });
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    ReactModal,
+    {
+      title: "\u5220\u9664\u5907\u6CE8",
+      open,
+      onOk: handleOk,
+      onCancel,
+      afterOpenChange,
+      width: 400,
+      children: /* @__PURE__ */ jsxs(ReactForm, { form, layout: "vertical", children: [
+        /* @__PURE__ */ jsx(ReactForm.Item, { label: "\u7C7B\u578B", name: "type", initialValue: "y", children: /* @__PURE__ */ jsxs(
+          ReactRadio.Group,
+          {
+            onChange: () => {
+              form.setFieldsValue({ memoId: void 0 });
+            },
+            children: [
+              /* @__PURE__ */ jsx(ReactRadio, { value: "y", children: "\u7EAC" }),
+              /* @__PURE__ */ jsx(ReactRadio, { value: "x", children: "\u7ECF" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          ReactForm.Item,
+          {
+            label: "\u5907\u6CE8",
+            name: "memoId",
+            rules: [{ required: true, message: "\u8BF7\u9009\u62E9\u8981\u5220\u9664\u7684\u5907\u6CE8" }],
+            children: /* @__PURE__ */ jsx(
+              ReactSelect,
+              {
+                placeholder: "\u8BF7\u9009\u62E9\u5907\u6CE8",
+                options: memosInSelection.filter((memo2) => memo2.type === type).map((memo2) => ({
+                  value: memo2.id,
+                  label: `\u8303\u56F4 ${memo2.startPos + 1}-${memo2.endPos + 1}: ${memo2.content.length > 10 ? `${memo2.content.slice(0, 10)}...` : memo2.content}`
+                }))
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+};
+var delete_memo_modal_default = DeleteMemoModal;
+var SCROLLBAR_THICKNESS2 = 12;
+var DrawingBoard = forwardRef(
+  ({
+    horizontalScaleSize,
+    verticalScaleSize = horizontalScaleSize,
+    step,
+    rightPadding,
+    topPadding,
+    thickness,
+    canvasRightMargin,
+    canvasTopMargin,
+    defaultRight,
+    defaultBottom,
+    majorInterval,
+    midInterval,
+    onHoverGridChange,
+    onMaxGridChange,
+    onMaxGridExpandedChange,
+    readonly = false,
+    showCursor = true,
+    width = "100%",
+    height = 650,
+    showScrollbar = true,
+    midTickFontSize,
+    majorTickFontSize,
+    loopFontSize,
+    printMode = false,
+    markPointFontSize,
+    loopWingOffset,
+    midTickLength,
+    majorTickLength,
+    smallTickLength,
+    showSmallTickText,
+    smallTickFontSize,
+    hoverEffectColor,
+    markSelectColor,
+    markCheckedColor,
+    markPointColor,
+    cursorColor,
+    mainGridColor,
+    minorTickColor,
+    rulerBgColor,
+    rulerTextColor,
+    rulerTickColor,
+    rulerBorderColor,
+    loopIndicatorColor,
+    loopTextColor,
+    loopTickExtension,
+    showLoopArrow = true,
+    loopArrowSize,
+    showInnerLoopEndpoints,
+    onGirdClick
+  }, ref) => {
+    const viewportRef = useRef(null);
+    const gridRef = useRef(null);
+    const size = useSize(viewportRef);
+    const viewportWidth = size?.width || 0;
+    const viewportHeight = size?.height || 0;
+    const hasInitialScrolledY = useRef(false);
+    useEffect(() => {
+      hasInitialScrolledY.current = false;
+    }, [defaultBottom]);
+    const [scrollLeft, setScrollLeft] = useState(0);
+    const [scrollTop, setScrollTop] = useState(0);
+    const scrollPositionRef = useRef({ left: 0, top: 0 });
+    const wheelScrollTargetRef = useRef(null);
+    const wheelScrollFrameRef = useRef(null);
+    const wheelScrollLastTimeRef = useRef(0);
+    useEffect(() => {
+      scrollPositionRef.current = { left: scrollLeft, top: scrollTop };
+    }, [scrollLeft, scrollTop]);
+    const stopWheelScrollSmoothing = useCallback(() => {
+      if (wheelScrollFrameRef.current !== null) {
+        cancelAnimationFrame(wheelScrollFrameRef.current);
+        wheelScrollFrameRef.current = null;
+      }
+      wheelScrollTargetRef.current = null;
+      wheelScrollLastTimeRef.current = 0;
+    }, []);
+    const applyWheelScrollPosition = useCallback(
+      (position) => {
+        scrollPositionRef.current = position;
+        setScrollLeft(position.left);
+        setScrollTop(position.top);
+      },
+      []
+    );
+    const advanceWheelScroll = useCallback(
+      function advance(timestamp) {
+        wheelScrollFrameRef.current = null;
+        const target = wheelScrollTargetRef.current;
+        if (!target) return;
+        const deltaMs = Math.max(timestamp - wheelScrollLastTimeRef.current, 0);
+        wheelScrollLastTimeRef.current = timestamp;
+        const result = advanceWheelScrollSmoothing({
+          current: scrollPositionRef.current,
+          target,
+          deltaMs
+        });
+        applyWheelScrollPosition(result.next);
+        if (result.done) {
+          wheelScrollTargetRef.current = null;
+          wheelScrollLastTimeRef.current = 0;
+          return;
+        }
+        wheelScrollFrameRef.current = requestAnimationFrame(advance);
+      },
+      [applyWheelScrollPosition]
+    );
+    const startWheelScrollSmoothing = useCallback(
+      (target) => {
+        wheelScrollTargetRef.current = target;
+        if (wheelScrollFrameRef.current !== null) return;
+        wheelScrollLastTimeRef.current = performance.now();
+        wheelScrollFrameRef.current = requestAnimationFrame(advanceWheelScroll);
+      },
+      [advanceWheelScroll]
+    );
+    useEffect(
+      () => () => {
+        stopWheelScrollSmoothing();
+      },
+      [stopWheelScrollSmoothing]
+    );
+    const {
+      value: gridMarks = {},
+      setValue: setGridMarksRaw,
+      back,
+      forward,
+      reset,
+      backLength,
+      forwardLength
+    } = useHistoryTravel({});
+    const gridMarksRef = useRef(gridMarks);
+    useEffect(() => {
+      gridMarksRef.current = gridMarks;
+    }, [gridMarks]);
+    const setGridMarks = useCallback(
+      (valOrFn) => {
+        if (typeof valOrFn === "function") {
+          setGridMarksRaw(valOrFn(gridMarksRef.current));
+        } else {
+          setGridMarksRaw(valOrFn);
+        }
+      },
+      [setGridMarksRaw]
+    );
+    const canUndo = backLength > 0;
+    const canRedo = forwardLength > 0;
+    const onUndo = back;
+    const onRedo = forward;
+    const [clipboard, setClipboard] = useState(null);
+    const [copyModalOpen, setCopyModalOpen] = useState(false);
+    const [loopModalOpen, setLoopModalOpen] = useState(false);
+    const [editLoopModalOpen, setEditLoopModalOpen] = useState(false);
+    const [deleteLoopModalOpen, setDeleteLoopModalOpen] = useState(false);
+    const [insertModalOpen, setInsertModalOpen] = useState(false);
+    const [deleteJingWeiModalOpen, setDeleteJingWeiModalOpen] = useState(false);
+    const [memos, setMemos] = useState([]);
+    const [memoModalOpen, setMemoModalOpen] = useState(false);
+    const [deleteMemoModalOpen, setDeleteMemoModalOpen] = useState(false);
+    const [loops, setLoops] = useState([]);
+    const orderedLoops = useMemo(() => {
+      const rowLoops = loops.filter((l) => l.type === "y");
+      const colLoops = loops.filter((l) => l.type === "x");
+      const sortFn = (a, b) => b.endPos - b.startPos - (a.endPos - a.startPos);
+      return [...rowLoops.sort(sortFn), ...colLoops.sort(sortFn)];
+    }, [loops]);
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [baseMarks, setBaseMarks] = useState(null);
+    const [isClickModeEnabled, setIsClickModeEnabled] = useState(true);
+    const [historyLogs, setHistoryLogs] = useState([]);
+    const [isHistoryModalOpen, setIsHistoryModalOpen] = useState(false);
+    const addLog = useCallback((content) => {
+      const now = /* @__PURE__ */ new Date();
+      const timeStr = now.toLocaleTimeString();
+      setHistoryLogs((prev) => [
+        {
+          id: prev.length + 1,
+          time: timeStr,
+          content
+        },
+        ...prev
+      ]);
+    }, []);
+    const clearLogs = useCallback(() => {
+      setHistoryLogs([]);
+    }, []);
+    const contentBounds = useMemo(() => {
+      let maxX = -1;
+      let maxY = -1;
+      Object.keys(gridMarks).forEach((key) => {
+        const [x, y] = key.split(",").map(Number);
+        maxX = Math.max(maxX, x);
+        maxY = Math.max(maxY, y);
+      });
+      if (!isExpanded) {
+        loops.forEach((loop) => {
+          if (loop.type === "x") {
+            maxX = Math.max(maxX, loop.endPos);
+          } else {
+            maxY = Math.max(maxY, loop.endPos);
+          }
+        });
+        memos.forEach((memo2) => {
+          if (memo2.type === "x") {
+            maxX = Math.max(maxX, memo2.endPos);
+          } else {
+            maxY = Math.max(maxY, memo2.endPos);
+          }
+        });
+      }
+      return { maxX, maxY };
+    }, [gridMarks, loops, memos, isExpanded]);
+    useEffect(() => {
+      if (!onMaxGridExpandedChange) return;
+      const { maxX, maxY } = contentBounds;
+      let baseX = maxX;
+      let baseY = maxY;
+      if (baseX < 0) {
+        baseX = (horizontalScaleSize || 0) - 1;
+      }
+      if (baseY < 0) {
+        baseY = (verticalScaleSize || 0) - 1;
+      }
+      const yLoops = loops.filter((l) => l.type === "y");
+      const xLoops = loops.filter((l) => l.type === "x");
+      const getExpandedPos = (targetPos, curLoops) => {
+        let cur = targetPos;
+        const sortedLoops = [...curLoops].sort((a, b) => {
+          const sizeA = a.endPos - a.startPos;
+          const sizeB = b.endPos - b.startPos;
+          if (sizeA !== sizeB) return sizeA - sizeB;
+          return a.startPos - b.startPos;
+        });
+        const workingLoops = sortedLoops.map((l) => ({ ...l }));
+        for (let i = 0; i < workingLoops.length; i++) {
+          const loop = workingLoops[i];
+          const loopLen = loop.endPos - loop.startPos + 1;
+          const expands = loopLen * (loop.count - 1);
+          if (cur > loop.endPos) {
+            cur += expands;
+          } else if (cur >= loop.startPos && cur <= loop.endPos) {
+            const insideOffset = cur - loop.startPos;
+            cur = loop.startPos + insideOffset + expands;
+          }
+          const insertAt = loop.endPos + 1;
+          for (let j = i + 1; j < workingLoops.length; j++) {
+            const other = workingLoops[j];
+            if (insertAt <= other.startPos) {
+              other.startPos += expands;
+              other.endPos += expands;
+            } else if (other.startPos < insertAt && insertAt <= other.endPos + 1) {
+              other.endPos += expands;
+            }
+          }
+        }
+        return cur;
+      };
+      const maxRow = isExpanded ? baseY + 1 : baseY >= 0 ? getExpandedPos(baseY, yLoops) + 1 : 0;
+      const maxCol = isExpanded ? baseX + 1 : baseX >= 0 ? getExpandedPos(baseX, xLoops) + 1 : 0;
+      if (loops.length === 0) {
+        onMaxGridExpandedChange(null);
+      } else {
+        onMaxGridExpandedChange({ x: maxCol, y: maxRow });
+      }
+    }, [
+      contentBounds,
+      loops,
+      isExpanded,
+      horizontalScaleSize,
+      verticalScaleSize,
+      onMaxGridExpandedChange
+    ]);
+    const displayHorizontalScaleSize = useMemo(() => {
+      if (!printMode) return horizontalScaleSize;
+      const { maxX } = contentBounds;
+      if (maxX === -1) return horizontalScaleSize;
+      return Math.min(horizontalScaleSize, maxX + 1);
+    }, [printMode, horizontalScaleSize, contentBounds]);
+    const displayVerticalScaleSize = useMemo(() => {
+      if (!printMode) return verticalScaleSize;
+      const { maxY } = contentBounds;
+      if (maxY === -1) return verticalScaleSize;
+      return Math.min(verticalScaleSize, maxY + 1);
+    }, [printMode, verticalScaleSize, contentBounds]);
+    const totalWidth = useMemo(
+      () => thickness + displayHorizontalScaleSize * step + rightPadding,
+      [thickness, displayHorizontalScaleSize, step, rightPadding]
+    );
+    const totalHeight = useMemo(
+      () => thickness + displayVerticalScaleSize * step + topPadding,
+      [thickness, displayVerticalScaleSize, step, topPadding]
+    );
+    const computedWidth = useMemo(() => {
+      if (!printMode) return width;
+      return width;
+    }, [printMode, width, totalWidth, canvasRightMargin]);
+    const computedHeight = useMemo(() => {
+      if (!printMode) return height;
+      return height;
+    }, [printMode, height, totalHeight, canvasTopMargin]);
+    const printModeBottomPending = useRef(false);
+    useEffect(() => {
+      printModeBottomPending.current = true;
+    }, [printMode]);
+    useEffect(() => {
+      stopWheelScrollSmoothing();
+      const handle = requestAnimationFrame(() => {
+        if (viewportWidth > 0) {
+          const maxScrollX = Math.max(
+            0,
+            totalWidth - (viewportWidth - canvasRightMargin)
+          );
+          setScrollLeft((previous) => {
+            const next = defaultRight ? maxScrollX : Math.min(previous, maxScrollX);
+            scrollPositionRef.current.left = next;
+            return next;
+          });
+        } else {
+          scrollPositionRef.current.left = 0;
+          setScrollLeft(0);
+        }
+        if (viewportHeight > 0) {
+          const maxScrollY = Math.max(
+            0,
+            totalHeight - (viewportHeight - canvasTopMargin - (showScrollbar ? SCROLLBAR_THICKNESS2 : 0))
+          );
+          setScrollTop((previous) => {
+            let next = Math.min(previous, maxScrollY);
+            if (printModeBottomPending.current) {
+              next = maxScrollY;
+              printModeBottomPending.current = false;
+            } else if (defaultBottom && !hasInitialScrolledY.current && maxScrollY > 0) {
+              next = maxScrollY;
+              hasInitialScrolledY.current = true;
+            }
+            scrollPositionRef.current.top = next;
+            return next;
+          });
+        } else {
+          scrollPositionRef.current.top = 0;
+          setScrollTop(0);
+        }
+      });
+      return () => cancelAnimationFrame(handle);
+    }, [
+      totalWidth,
+      totalHeight,
+      viewportWidth,
+      viewportHeight,
+      defaultBottom,
+      defaultRight,
+      canvasRightMargin,
+      canvasTopMargin,
+      printMode,
+      showScrollbar,
+      stopWheelScrollSmoothing
+    ]);
+    const isContentDragging = useRef(false);
+    const contentStartPos = useRef({ x: 0, y: 0 });
+    const contentStartScroll = useRef({ left: 0, top: 0 });
+    const autoScrollRaf = useRef(null);
+    const autoScrollSpeed = useRef({ x: 0, y: 0 });
+    const AUTO_SCROLL_SPEED = 10;
+    const stopAutoScroll = () => {
+      if (autoScrollRaf.current) {
+        cancelAnimationFrame(autoScrollRaf.current);
+        autoScrollRaf.current = null;
+      }
+    };
+    const performAutoScroll = () => {
+      const { x: speedX, y: speedY } = autoScrollSpeed.current;
+      if (speedX === 0 && speedY === 0) {
+        stopAutoScroll();
+        return;
+      }
+      setScrollLeft((prev) => {
+        const maxScrollX = Math.max(
+          0,
+          totalWidth - (viewportWidth - canvasRightMargin)
+        );
+        const next = Math.min(Math.max(prev + speedX, 0), maxScrollX);
+        if (next !== prev) {
+          contentStartScroll.current.left += speedX;
+        }
+        return next;
+      });
+      setScrollTop((prev) => {
+        const maxScrollY = Math.max(
+          0,
+          totalHeight - (viewportHeight - canvasTopMargin - (showScrollbar ? SCROLLBAR_THICKNESS2 : 0))
+        );
+        const next = Math.min(Math.max(prev + speedY, 0), maxScrollY);
+        if (next !== prev) {
+          contentStartScroll.current.top += speedY;
+        }
+        return next;
+      });
+      autoScrollRaf.current = requestAnimationFrame(performAutoScroll);
+    };
+    const handleContentMouseDown = (e) => {
+      stopWheelScrollSmoothing();
+      isContentDragging.current = true;
+      contentStartPos.current = { x: e.clientX, y: e.clientY };
+      contentStartScroll.current = { left: scrollLeft, top: scrollTop };
+    };
+    useEventListener("mousemove", (e) => {
+      if (!isContentDragging.current) return;
+      const deltaX = e.clientX - contentStartPos.current.x;
+      const deltaY = e.clientY - contentStartPos.current.y;
+      const maxScrollX = Math.max(
+        0,
+        totalWidth - (viewportWidth - canvasRightMargin)
+      );
+      const maxScrollY = Math.max(
+        0,
+        totalHeight - (viewportHeight - canvasTopMargin - (showScrollbar ? SCROLLBAR_THICKNESS2 : 0))
+      );
+      const newScrollLeft = contentStartScroll.current.left - deltaX;
+      const newScrollTop = contentStartScroll.current.top + deltaY;
+      if (viewportRef.current) {
+        const rect = viewportRef.current.getBoundingClientRect();
+        const margin = 0;
+        let sx = 0;
+        let sy = 0;
+        if (e.clientY < rect.top - margin) sy = -AUTO_SCROLL_SPEED;
+        else if (e.clientY > rect.bottom + margin) sy = AUTO_SCROLL_SPEED;
+        if (e.clientX < rect.left - margin) sx = -AUTO_SCROLL_SPEED;
+        else if (e.clientX > rect.right + margin) sx = AUTO_SCROLL_SPEED;
+        if (sx !== 0 || sy !== 0) {
+          autoScrollSpeed.current = { x: sx, y: sy };
+          if (!autoScrollRaf.current) {
+            autoScrollRaf.current = requestAnimationFrame(performAutoScroll);
+          }
+        } else {
+          stopAutoScroll();
+        }
+      }
+      setScrollLeft(Math.min(Math.max(newScrollLeft, 0), maxScrollX));
+      setScrollTop(Math.min(Math.max(newScrollTop, 0), maxScrollY));
+    });
+    useEventListener("mouseup", () => {
+      if (isContentDragging.current) {
+        isContentDragging.current = false;
+        stopAutoScroll();
+      }
+    });
+    useEventListener(
+      "wheel",
+      (e) => {
+        const maxScrollX = Math.max(
+          0,
+          totalWidth - (viewportWidth - canvasRightMargin)
+        );
+        const maxScrollY = Math.max(
+          0,
+          totalHeight - (viewportHeight - canvasTopMargin - (showScrollbar ? SCROLLBAR_THICKNESS2 : 0))
+        );
+        const delta = resolveWheelScrollDelta({
+          deltaX: e.deltaX,
+          deltaY: e.deltaY,
+          deltaMode: e.deltaMode,
+          shiftKey: e.shiftKey,
+          lineHeight: step,
+          pageWidth: Math.max(viewportWidth - canvasRightMargin, step),
+          pageHeight: Math.max(
+            viewportHeight - canvasTopMargin - (showScrollbar ? SCROLLBAR_THICKNESS2 : 0),
+            step
+          )
+        });
+        const canScrollX = maxScrollX > 0 && delta.left !== 0;
+        const canScrollY = maxScrollY > 0 && delta.top !== 0;
+        if (!canScrollX && !canScrollY) return;
+        e.preventDefault();
+        e.stopPropagation();
+        const basePosition = wheelScrollTargetRef.current ?? scrollPositionRef.current;
+        const nextTarget = {
+          left: canScrollX ? Math.min(Math.max(basePosition.left + delta.left, 0), maxScrollX) : basePosition.left,
+          top: canScrollY ? Math.min(Math.max(basePosition.top + delta.top, 0), maxScrollY) : basePosition.top
+        };
+        if (shouldApplyWheelDeltaImmediately({
+          deltaX: e.deltaX,
+          deltaY: e.deltaY,
+          deltaMode: e.deltaMode
+        })) {
+          stopWheelScrollSmoothing();
+          applyWheelScrollPosition(nextTarget);
+          return;
+        }
+        startWheelScrollSmoothing(nextTarget);
+      },
+      { target: viewportRef, passive: false }
+    );
+    const handleSelectAll = useCallback(() => {
+      setGridMarks((prev) => GridModel.selectAll(prev));
+      addLog("\u5168\u9009");
+    }, [setGridMarks, addLog]);
+    const handleClearSelect = useCallback(() => {
+      setGridMarks((prev) => GridModel.deleteSelectionContent(prev));
+      addLog("\u6E05\u9664\u9009\u533A\u5185\u5BB9");
+    }, [setGridMarks, addLog]);
+    const handleClearAll = useCallback(() => {
+      setGridMarks(GridModel.clearAll());
+      addLog("\u5168\u90E8\u6E05\u9664");
+    }, [setGridMarks, addLog]);
+    const handleShowBack = useCallback(() => {
+      setGridMarks((prev) => GridModel.showBack(prev));
+      addLog("\u663E\u793A\u53CD\u9762");
+    }, [setGridMarks, addLog]);
+    const handleOpenHistory = useCallback(() => {
+      setIsHistoryModalOpen(true);
+    }, []);
+    const handleUndoClick = useCallback(() => {
+      if (canUndo) {
+        onUndo();
+        addLog("\u64A4\u9500");
+      }
+    }, [canUndo, onUndo, addLog]);
+    const handleRedoClick = useCallback(() => {
+      if (canRedo) {
+        onRedo();
+        addLog("\u91CD\u505A");
+      }
+    }, [canRedo, onRedo, addLog]);
+    const onScrollRequest = useCallback(
+      (dx, dy) => {
+        const maxScrollX = Math.max(
+          0,
+          totalWidth - (viewportWidth - canvasRightMargin)
+        );
+        const maxScrollY = Math.max(
+          0,
+          totalHeight - (viewportHeight - canvasTopMargin - (showScrollbar ? SCROLLBAR_THICKNESS2 : 0))
+        );
+        setScrollLeft((prev) => Math.min(Math.max(prev + dx, 0), maxScrollX));
+        setScrollTop((prev) => Math.min(Math.max(prev + dy, 0), maxScrollY));
+      },
+      [
+        totalWidth,
+        totalHeight,
+        viewportWidth,
+        viewportHeight,
+        canvasRightMargin,
+        canvasTopMargin,
+        showScrollbar
+      ]
+    );
+    const handleCopy = useCallback(() => {
+      const cp = GridModel.copy(gridMarks);
+      if (cp) {
+        setClipboard(cp);
+        addLog("\u590D\u5236");
+      }
+    }, [gridMarks, addLog]);
+    const handleCut = useCallback(() => {
+      const res = GridModel.cut(gridMarks);
+      if (res) {
+        setGridMarks(res.nextMarks);
+        setClipboard(res.clipboard);
+        addLog("\u526A\u5207");
+      }
+    }, [gridMarks, setGridMarks, addLog]);
+    const handlePaste = useCallback(() => {
+      if (clipboard) {
+        setGridMarks(
+          (prev) => GridModel.paste(
+            prev,
+            clipboard,
+            horizontalScaleSize,
+            verticalScaleSize
+          )
+        );
+        addLog("\u7C98\u8D34");
+      }
+    }, [
+      clipboard,
+      horizontalScaleSize,
+      verticalScaleSize,
+      setGridMarks,
+      addLog
+    ]);
+    const handleDuplicateSubmit = useCallback(
+      (values) => {
+        const { insertPos, startPos, endPos, count, type } = values;
+        const s = startPos - 1;
+        const e = endPos - 1;
+        const at = insertPos - 1;
+        if (type === "y") {
+          setGridMarks(
+            (prev) => GridModel.duplicateRows(prev, s, e, at, count, verticalScaleSize)
+          );
+        } else {
+          setGridMarks(
+            (prev) => GridModel.duplicateCols(prev, s, e, at, count, horizontalScaleSize)
+          );
+        }
+        addLog(
+          `\u590D\u5236${type === "y" ? "\u7EAC" : "\u7ECF"} (${startPos}-${endPos} -> \u63D2\u5165\u81F3:${insertPos} \u6B21\u6570:${count})`
+        );
+        setCopyModalOpen(false);
+      },
+      [verticalScaleSize, horizontalScaleSize, setGridMarks, addLog]
+    );
+    const handleInsertSubmit = useCallback(
+      (values) => {
+        const { insertPos, count, type } = values;
+        const s = insertPos - 1;
+        const blockSize = 1;
+        if (type === "y") {
+          setGridMarks(
+            (prev) => GridModel.insertBlankRows(
+              prev,
+              s,
+              blockSize,
+              count,
+              verticalScaleSize
+            )
+          );
+        } else {
+          setGridMarks(
+            (prev) => GridModel.insertBlankCols(
+              prev,
+              s,
+              blockSize,
+              count,
+              horizontalScaleSize
+            )
+          );
+        }
+        addLog(
+          `\u63D2\u5165\u7A7A\u767D${type === "y" ? "\u7EAC" : "\u7ECF"} (\u4F4D\u7F6E:${insertPos} \u6570\u91CF:${count})`
+        );
+        setInsertModalOpen(false);
+      },
+      [verticalScaleSize, horizontalScaleSize, setGridMarks, addLog]
+    );
+    const handleDeleteJingWeiSubmit = useCallback(
+      (values) => {
+        const { startPos, endPos, type } = values;
+        const s = startPos - 1;
+        const e = endPos - 1;
+        const shiftAmount = e - s + 1;
+        if (type === "y") {
+          setGridMarks((prev) => GridModel.deleteRows(prev, s, e));
+        } else {
+          setGridMarks((prev) => GridModel.deleteCols(prev, s, e));
+        }
+        setLoops((prev) => {
+          return prev.map((loop) => {
+            if (loop.type !== type) return loop;
+            let newStart = loop.startPos;
+            let newEnd = loop.endPos;
+            if (loop.startPos >= s && loop.startPos <= e) {
+              newStart = s;
+            } else if (loop.startPos > e) {
+              newStart = loop.startPos - shiftAmount;
+            }
+            if (loop.endPos >= s && loop.endPos <= e) {
+              newEnd = s - 1;
+            } else if (loop.endPos > e) {
+              newEnd = loop.endPos - shiftAmount;
+            }
+            if (newStart > newEnd) return null;
+            return { ...loop, startPos: newStart, endPos: newEnd };
+          }).filter(Boolean);
+        });
+        setMemos((prev) => {
+          return prev.map((memo2) => {
+            if (memo2.type !== type) return memo2;
+            let newStart = memo2.startPos;
+            let newEnd = memo2.endPos;
+            if (memo2.startPos >= s && memo2.startPos <= e) {
+              newStart = s;
+            } else if (memo2.startPos > e) {
+              newStart = memo2.startPos - shiftAmount;
+            }
+            if (memo2.endPos >= s && memo2.endPos <= e) {
+              newEnd = s - 1;
+            } else if (memo2.endPos > e) {
+              newEnd = memo2.endPos - shiftAmount;
+            }
+            if (newStart > newEnd) return null;
+            return { ...memo2, startPos: newStart, endPos: newEnd };
+          }).filter(Boolean);
+        });
+        addLog(
+          `\u5220\u9664${type === "y" ? "\u7EAC" : "\u7ECF"} (\u4F4D\u7F6E:${startPos}-${endPos})`
+        );
+        setDeleteJingWeiModalOpen(false);
+      },
+      [
+        verticalScaleSize,
+        horizontalScaleSize,
+        setGridMarks,
+        setLoops,
+        setMemos,
+        addLog
+      ]
+    );
+    const handleLoopSubmit = useCallback(
+      (values) => {
+        const { startPos, endPos, count, type } = values;
+        const s = startPos - 1;
+        const e = endPos - 1;
+        const hasPartialOverlap = loops.some((loop) => {
+          if (loop.type !== type) return false;
+          const s1 = loop.startPos;
+          const e1 = loop.endPos;
+          const s2 = s;
+          const e2 = e;
+          const hasIntersection = !(e2 < s1 || s2 > e1);
+          if (!hasIntersection) return false;
+          const isNested = s2 >= s1 && e2 <= e1 || s1 >= s2 && e1 <= e2;
+          return !isNested;
+        });
+        if (hasPartialOverlap) {
+          reactMessage.error("\u6240\u9009\u8303\u56F4\u4E0E\u73B0\u6709\u5FAA\u73AF\u5B58\u5728\u975E\u6CD5\u4EA4\u53C9\uFF0C\u8BF7\u91CD\u65B0\u9009\u62E9");
+          return;
+        }
+        const newLoop = {
+          id: Date.now().toString(),
+          type,
+          startPos: s,
+          endPos: e,
+          count
+        };
+        setLoops((prev) => [...prev, newLoop]);
+        addLog(
+          `\u6DFB\u52A0\u5FAA\u73AF (${type === "y" ? "\u7EAC" : "\u7ECF"} ${startPos}-${endPos} x${count})`
+        );
+        setLoopModalOpen(false);
+      },
+      [loops, addLog]
+    );
+    const handleEditLoopSubmit = useCallback(
+      (values) => {
+        const { loopId, startPos, endPos, count, type } = values;
+        const s = startPos - 1;
+        const e = endPos - 1;
+        const hasPartialOverlap = loops.some((loop) => {
+          if (loop.id === loopId) return false;
+          if (loop.type !== type) return false;
+          const s1 = loop.startPos;
+          const e1 = loop.endPos;
+          const s2 = s;
+          const e2 = e;
+          const hasIntersection = !(e2 < s1 || s2 > e1);
+          if (!hasIntersection) return false;
+          const isNested = s2 >= s1 && e2 <= e1 || s1 >= s2 && e1 <= e2;
+          return !isNested;
+        });
+        if (hasPartialOverlap) {
+          reactMessage.error("\u4FEE\u6539\u540E\u7684\u8303\u56F4\u4E0E\u73B0\u6709\u5FAA\u73AF\u5B58\u5728\u975E\u6CD5\u4EA4\u53C9\uFF0C\u8BF7\u91CD\u65B0\u9009\u62E9");
+          return;
+        }
+        setLoops(
+          (prev) => prev.map((loop) => {
+            if (loop.id === loopId) {
+              return {
+                ...loop,
+                startPos: s,
+                endPos: e,
+                count
+              };
+            }
+            return loop;
+          })
+        );
+        addLog(
+          `\u7F16\u8F91\u5FAA\u73AF (${type === "y" ? "\u7EAC" : "\u7ECF"} ${startPos}-${endPos} x${count})`
+        );
+        setEditLoopModalOpen(false);
+      },
+      [loops, addLog]
+    );
+    const selectionBounds = useMemo(
+      () => GridModel.getSelectionBounds(gridMarks),
+      [gridMarks]
+    );
+    const loopsInSelection = useMemo(() => {
+      if (!selectionBounds) return [];
+      const { minX, maxX, minY, maxY } = selectionBounds;
+      return loops.map((l, idx) => ({ ...l, globalIndex: idx + 1 })).filter((loop) => {
+        if (loop.type === "y") {
+          return !(maxY < loop.startPos || minY > loop.endPos);
+        } else {
+          return !(maxX < loop.startPos || minX > loop.endPos);
+        }
+      });
+    }, [selectionBounds, loops]);
+    const memosInSelection = useMemo(() => {
+      if (!selectionBounds) return [];
+      const { minX, maxX, minY, maxY } = selectionBounds;
+      return memos.map((m, idx) => ({ ...m, globalIndex: idx + 1 })).filter((memo2) => {
+        if (memo2.type === "y") {
+          return !(maxY < memo2.startPos || minY > memo2.endPos);
+        } else {
+          return !(maxX < memo2.startPos || minX > memo2.endPos);
+        }
+      });
+    }, [selectionBounds, memos]);
+    const handleOpenEditLoop = useCallback(() => {
+      setEditLoopModalOpen(true);
+    }, []);
+    const handleOpenDeleteLoop = useCallback(() => {
+      setDeleteLoopModalOpen(true);
+    }, []);
+    const handleDeleteLoopSubmit = useCallback(
+      (values) => {
+        const { loopId } = values;
+        setLoops((prev) => prev.filter((loop) => loop.id !== loopId));
+        addLog("\u5220\u9664\u5FAA\u73AF");
+        setDeleteLoopModalOpen(false);
+      },
+      [addLog]
+    );
+    const handleMemoSubmit = useCallback(
+      (values) => {
+        const { startPos, endPos, content, type } = values;
+        const s = startPos - 1;
+        const e = endPos - 1;
+        memos.some((m) => {
+          if (m.type !== type) return false;
+          return !(e < m.startPos || s > m.endPos);
+        });
+        const newMemo = {
+          id: Date.now().toString(),
+          type,
+          startPos: s,
+          endPos: e,
+          content
+        };
+        setMemos((prev) => [...prev, newMemo]);
+        addLog(
+          `\u65B0\u5EFA\u5907\u6CE8 (${type === "y" ? "\u7EAC" : "\u7ECF"} ${startPos}-${endPos})`
+        );
+        setMemoModalOpen(false);
+      },
+      [memos, addLog]
+    );
+    const handleOpenDeleteMemo = useCallback(() => {
+      setDeleteMemoModalOpen(true);
+    }, []);
+    const handleDeleteMemoSubmit = useCallback(
+      (values) => {
+        const { memoId } = values;
+        setMemos((prev) => prev.filter((m) => m.id !== memoId));
+        addLog("\u5220\u9664\u5907\u6CE8");
+        setDeleteMemoModalOpen(false);
+      },
+      [addLog]
+    );
+    const getBeforeOpenPattern = () => {
+      if (isExpanded && baseMarks) {
+        return GridModel.binaryToPatternDesignString(baseMarks, loops);
+      }
+      return GridModel.binaryToPatternDesignString(gridMarks, loops);
+    };
+    const getAfterOpenPattern = () => {
+      if (isExpanded) {
+        return GridModel.binaryToPatternDesignString(gridMarks);
+      }
+      if (loops.length > 0) {
+        let tempMarks = { ...gridMarks };
+        const rowLoops = loops.filter((l) => l.type === "y").map((l) => ({ ...l })).sort((a, b) => a.endPos - a.startPos - (b.endPos - b.startPos));
+        for (let i = 0; i < rowLoops.length; i++) {
+          const current = rowLoops[i];
+          tempMarks = GridModel.createLoopRows(
+            tempMarks,
+            current.startPos,
+            current.endPos,
+            current.count,
+            verticalScaleSize
+          );
+          const height2 = current.endPos - current.startPos + 1;
+          const totalShift = height2 * (current.count - 1);
+          const insertAt = current.endPos + 1;
+          for (let j = i + 1; j < rowLoops.length; j++) {
+            const other = rowLoops[j];
+            if (insertAt <= other.startPos) {
+              other.startPos += totalShift;
+              other.endPos += totalShift;
+            } else if (other.startPos < insertAt && insertAt <= other.endPos + 1) {
+              other.endPos += totalShift;
+            }
+          }
+        }
+        const colLoops = loops.filter((l) => l.type === "x").map((l) => ({ ...l })).sort((a, b) => a.endPos - a.startPos - (b.endPos - b.startPos));
+        for (let i = 0; i < colLoops.length; i++) {
+          const current = colLoops[i];
+          tempMarks = GridModel.createLoopCols(
+            tempMarks,
+            current.startPos,
+            current.endPos,
+            current.count,
+            horizontalScaleSize
+          );
+          const width2 = current.endPos - current.startPos + 1;
+          const totalShift = width2 * (current.count - 1);
+          const insertAt = current.endPos + 1;
+          for (let j = i + 1; j < colLoops.length; j++) {
+            const other = colLoops[j];
+            if (insertAt <= other.startPos) {
+              other.startPos += totalShift;
+              other.endPos += totalShift;
+            } else if (other.startPos < insertAt && insertAt <= other.endPos + 1) {
+              other.endPos += totalShift;
+            }
+          }
+        }
+        return GridModel.binaryToPatternDesignString(tempMarks);
+      }
+      return GridModel.binaryToPatternDesignString(gridMarks);
+    };
+    const loadPattern = (patternString, parseLoops = false) => {
+      if (!patternString) return;
+      try {
+        const {
+          point,
+          row,
+          column,
+          loops: parsedLoops
+        } = GridModel.parsePatternDesignString(patternString);
+        const marks = { ...point };
+        const loadedLoops = [];
+        if (parsedLoops && parsedLoops.length > 0) {
+          loadedLoops.push(...parsedLoops);
+        }
+        let curRows = row;
+        let curCols = column;
+        if (parseLoops && loadedLoops.length === 0) {
+          const rowLoop = GridModel.detectRowLoop(marks, curRows, curCols);
+          if (rowLoop) {
+            loadedLoops.push({
+              id: Date.now().toString() + "-row",
+              ...rowLoop
+            });
+            curRows = rowLoop.endPos + 1;
+            Object.keys(marks).forEach((key) => {
+              const [, y] = key.split(",").map(Number);
+              if (y >= curRows) {
+                delete marks[key];
+              }
+            });
+          }
+          const colLoop = GridModel.detectColLoop(marks, curRows, curCols);
+          if (colLoop) {
+            loadedLoops.push({
+              id: Date.now().toString() + "-col",
+              ...colLoop
+            });
+            curCols = colLoop.endPos + 1;
+            Object.keys(marks).forEach((key) => {
+              const [x] = key.split(",").map(Number);
+              if (x >= curCols) {
+                delete marks[key];
+              }
+            });
+          }
+        }
+        reset(marks);
+        setLoops(loadedLoops);
+        setMemos([]);
+        setHistoryLogs([]);
+        setBaseMarks(null);
+        setIsExpanded(false);
+        addLog("\u52A0\u8F7D\u6392\u7248");
+      } catch (e) {
+        console.error("Failed to load pattern:", e);
+        reactMessage.error("\u6392\u7248\u89E3\u6790\u5931\u8D25");
+      }
+    };
+    useImperativeHandle(ref, () => ({
+      getBeforeOpenPattern,
+      getAfterOpenPattern,
+      loadPattern,
+      exportImage: (type, quality, forceExpanded) => {
+        return gridRef.current?.toDataURL(type, quality, forceExpanded) || {
+          url: "",
+          width: 0,
+          height: 0,
+          dpi: 0
+        };
+      },
+      exportSvg: (forceExpanded) => {
+        return gridRef.current?.toSVG(forceExpanded) || {
+          svg: "",
+          url: "",
+          width: 0,
+          height: 0
+        };
+      },
+      getMemos: () => {
+        return memos;
+      },
+      loadMemos: (memos2) => {
+        setMemos(memos2);
+        addLog("\u52A0\u8F7D\u5907\u6CE8");
+      },
+      getLoops: () => {
+        return loops;
+      },
+      loadLoops: (newLoops) => {
+        setLoops(newLoops);
+        addLog("\u52A0\u8F7D\u5FAA\u73AF");
+      },
+      getPatternInfo: () => {
+        return {
+          beforeOpenPattern: getBeforeOpenPattern(),
+          pattern: getAfterOpenPattern(),
+          loops: [...loops],
+          memos: [...memos],
+          historyLogs: [...historyLogs]
+        };
+      },
+      loadPatternInfo: ({ loops: loops2, memos: memos2, beforeOpenPattern }) => {
+        loadPattern(beforeOpenPattern, false);
+        setLoops(loops2);
+        setMemos(memos2);
+      },
+      loadPatterInfo: ({ loops: loops2, memos: memos2, beforeOpenPattern }) => {
+        loadPattern(beforeOpenPattern, false);
+        setLoops(loops2);
+        setMemos(memos2);
+      }
+    }));
+    const handleExpandLoops = useCallback(() => {
+      if (loops.length === 0) return;
+      setBaseMarks(gridMarks);
+      let currentMarks = { ...gridMarks };
+      const rowLoops = loops.filter((l) => l.type === "y").map((l) => ({ ...l })).sort((a, b) => a.endPos - a.startPos - (b.endPos - b.startPos));
+      for (let i = 0; i < rowLoops.length; i++) {
+        const current = rowLoops[i];
+        currentMarks = GridModel.createLoopRows(
+          currentMarks,
+          current.startPos,
+          current.endPos,
+          current.count,
+          verticalScaleSize
+        );
+        const height2 = current.endPos - current.startPos + 1;
+        const totalShift = height2 * (current.count - 1);
+        const insertAt = current.endPos + 1;
+        for (let j = i + 1; j < rowLoops.length; j++) {
+          const other = rowLoops[j];
+          if (insertAt <= other.startPos) {
+            other.startPos += totalShift;
+            other.endPos += totalShift;
+          } else if (other.startPos < insertAt && insertAt <= other.endPos + 1) {
+            other.endPos += totalShift;
+          }
+        }
+      }
+      const colLoops = loops.filter((l) => l.type === "x").map((l) => ({ ...l })).sort((a, b) => a.endPos - a.startPos - (b.endPos - b.startPos));
+      for (let i = 0; i < colLoops.length; i++) {
+        const current = colLoops[i];
+        currentMarks = GridModel.createLoopCols(
+          currentMarks,
+          current.startPos,
+          current.endPos,
+          current.count,
+          horizontalScaleSize
+        );
+        const width2 = current.endPos - current.startPos + 1;
+        const totalShift = width2 * (current.count - 1);
+        const insertAt = current.endPos + 1;
+        for (let j = i + 1; j < colLoops.length; j++) {
+          const other = colLoops[j];
+          if (insertAt <= other.startPos) {
+            other.startPos += totalShift;
+            other.endPos += totalShift;
+          } else if (other.startPos < insertAt && insertAt <= other.endPos + 1) {
+            other.endPos += totalShift;
+          }
+        }
+      }
+      setGridMarks(currentMarks);
+      setIsExpanded(true);
+      addLog("\u5C55\u5F00\u5FAA\u73AF");
+    }, [
+      loops,
+      gridMarks,
+      verticalScaleSize,
+      horizontalScaleSize,
+      setGridMarks,
+      addLog
+    ]);
+    const handleShrinkLoops = useCallback(() => {
+      if (baseMarks) {
+        setGridMarks(baseMarks);
+        setBaseMarks(null);
+      }
+      setIsExpanded(false);
+      addLog("\u6536\u8D77\u5FAA\u73AF");
+    }, [baseMarks, setGridMarks, addLog]);
+    const handleSelectMode = useCallback(() => {
+      setIsClickModeEnabled(!isClickModeEnabled);
+      addLog(isClickModeEnabled ? "\u5355\u51FB\u6A21\u5F0F" : "\u53CC\u51FB\u6A21\u5F0F");
+    }, [isClickModeEnabled, setIsClickModeEnabled, addLog]);
+    const menuItems = useMemo(
+      () => [
+        {
+          text: isClickModeEnabled ? "\u5355\u51FB\u6A21\u5F0F" : "\u53CC\u51FB\u6A21\u5F0F",
+          icon: /* @__PURE__ */ jsx(
+            AimOutlined,
+            {
+              style: { color: isClickModeEnabled ? "#1890FF" : "#000" }
+            }
+          ),
+          onClick: handleSelectMode
+        },
+        {
+          text: "\u5168\u9009",
+          icon: /* @__PURE__ */ jsx(SelectOutlined, {}),
+          onClick: handleSelectAll
+        },
+        {
+          text: "\u6E05\u9664\u9009\u62E9",
+          icon: /* @__PURE__ */ jsx(CloseSquareOutlined, {}),
+          onClick: handleClearSelect
+        },
+        {
+          text: "\u5168\u90E8\u6E05\u9664",
+          icon: /* @__PURE__ */ jsx(ClearOutlined, {}),
+          onClick: handleClearAll
+        },
+        {
+          text: "\u663E\u793A\u53CD\u9762",
+          icon: /* @__PURE__ */ jsx(EyeOutlined, {}),
+          onClick: handleShowBack
+        },
+        { text: "\u526A\u5207", icon: /* @__PURE__ */ jsx(ScissorOutlined, {}), onClick: handleCut },
+        { text: "\u590D\u5236", icon: /* @__PURE__ */ jsx(CopyOutlined, {}), onClick: handleCopy },
+        {
+          text: "\u7C98\u8D34",
+          icon: /* @__PURE__ */ jsx(DiffOutlined, {}),
+          onClick: handlePaste,
+          disabled: !clipboard
+        },
+        {
+          text: "\u590D\u5236\u7ECF\u7EAC",
+          icon: /* @__PURE__ */ jsx(MergeCellsOutlined, {}),
+          onClick: () => setCopyModalOpen(true)
+        },
+        {
+          text: "\u63D2\u5165\u7ECF\u7EAC",
+          icon: /* @__PURE__ */ jsx(BorderInnerOutlined, {}),
+          onClick: () => setInsertModalOpen(true)
+        },
+        {
+          text: "\u5220\u9664\u7ECF\u7EAC",
+          icon: /* @__PURE__ */ jsx(DeleteOutlined, {}),
+          onClick: () => setDeleteJingWeiModalOpen(true)
+        },
+        {
+          text: "\u64A4\u9500",
+          icon: /* @__PURE__ */ jsx(UndoOutlined, {}),
+          onClick: handleUndoClick,
+          disabled: !canUndo
+        },
+        {
+          text: "\u91CD\u505A",
+          icon: /* @__PURE__ */ jsx(RedoOutlined, {}),
+          onClick: handleRedoClick,
+          disabled: !canRedo
+        },
+        {
+          text: "\u5386\u53F2",
+          icon: /* @__PURE__ */ jsx(HistoryOutlined, {}),
+          onClick: handleOpenHistory
+        },
+        {
+          text: "\u65B0\u5EFA\u5FAA\u73AF",
+          icon: /* @__PURE__ */ jsx(PlusCircleOutlined, {}),
+          onClick: () => setLoopModalOpen(true)
+        },
+        {
+          text: "\u7F16\u8F91\u5FAA\u73AF",
+          icon: /* @__PURE__ */ jsx(EditOutlined, {}),
+          onClick: handleOpenEditLoop
+        },
+        {
+          text: "\u5220\u9664\u5FAA\u73AF",
+          icon: /* @__PURE__ */ jsx(CloseCircleOutlined, {}),
+          onClick: handleOpenDeleteLoop
+        },
+        {
+          text: isExpanded ? "\u6536\u8D77\u5FAA\u73AF" : "\u5C55\u5F00\u5FAA\u73AF",
+          icon: isExpanded ? /* @__PURE__ */ jsx(ShrinkOutlined, {}) : /* @__PURE__ */ jsx(ArrowsAltOutlined, {}),
+          onClick: isExpanded ? handleShrinkLoops : handleExpandLoops,
+          disabled: !isExpanded && loops.length === 0
+        }
+        // {
+        //   text: '新建备注',
+        //   icon: <PlusOutlined />,
+        //   onClick: () => setMemoModalOpen(true),
+        // },
+        // {
+        //   text: '删除备注',
+        //   icon: <CloseOutlined />,
+        //   disabled: memosInSelection.length === 0,
+        //   onClick: handleOpenDeleteMemo,
+        // },
+      ],
+      [
+        handleSelectAll,
+        handleClearSelect,
+        handleClearAll,
+        handleShowBack,
+        handleCut,
+        handleCopy,
+        handlePaste,
+        clipboard,
+        canUndo,
+        handleUndoClick,
+        canRedo,
+        handleRedoClick,
+        handleOpenHistory,
+        loopsInSelection.length,
+        handleOpenEditLoop,
+        handleOpenDeleteLoop,
+        isExpanded,
+        handleShrinkLoops,
+        handleExpandLoops,
+        loops.length,
+        memosInSelection.length,
+        handleOpenDeleteMemo,
+        isClickModeEnabled,
+        handleSelectMode
+      ]
+    );
+    const onGridMarksChange = useCallback(
+      (newMarksOrFn) => {
+        setGridMarks(newMarksOrFn);
+        addLog("\u7ED8\u5236/\u7F16\u8F91");
+      },
+      [addLog, setGridMarks]
+    );
+    const hasContentInPrintArea = useMemo(() => {
+      if (!printMode) return true;
+      let has = false;
+      Object.keys(gridMarks).forEach((key) => {
+        const [x, y] = key.split(",").map(Number);
+        if (x < horizontalScaleSize && y < verticalScaleSize) {
+          has = true;
+        }
+      });
+      loops.forEach((loop) => {
+        if (loop.type === "x" && loop.startPos < horizontalScaleSize)
+          has = true;
+        if (loop.type === "y" && loop.startPos < verticalScaleSize) has = true;
+      });
+      memos.forEach((memo2) => {
+        if (memo2.type === "x" && memo2.startPos < horizontalScaleSize)
+          has = true;
+        if (memo2.type === "y" && memo2.startPos < verticalScaleSize) has = true;
+      });
+      return has;
+    }, [
+      printMode,
+      gridMarks,
+      loops,
+      memos,
+      horizontalScaleSize,
+      verticalScaleSize
+    ]);
+    useEffect(() => {
+      if (printMode && !hasContentInPrintArea && onMaxGridChange) {
+        const keys = Object.keys(gridMarks);
+        if (keys.length === 0) {
+          onMaxGridChange(null);
+          return;
+        }
+        let maxX = -1;
+        let maxY = -1;
+        for (const key of keys) {
+          const commaIndex = key.indexOf(",");
+          const x = parseInt(key.slice(0, commaIndex), 10);
+          const y = parseInt(key.slice(commaIndex + 1), 10);
+          if (x > maxX) maxX = x;
+          if (y > maxY) maxY = y;
+        }
+        if (maxX !== -1 && maxY !== -1) {
+          onMaxGridChange({ x: maxX + 1, y: maxY + 1 });
+        } else {
+          onMaxGridChange(null);
+        }
+      }
+    }, [printMode, hasContentInPrintArea, gridMarks, onMaxGridChange]);
+    if (printMode && !hasContentInPrintArea) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs(
+      ReactFlex,
+      {
+        gap: 12,
+        style: {
+          ...STYLES.boardWrapper,
+          width: computedWidth,
+          height: computedHeight
+        },
+        children: [
+          !readonly && !printMode && /* @__PURE__ */ jsx(toolbar_default, { items: menuItems, isExpanded, height }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                ...STYLES.gridContainer,
+                display: "flex",
+                flexDirection: "column",
+                height: "100%"
+              },
+              children: /* @__PURE__ */ jsx("div", { style: { ...STYLES.gridHeader, flex: 1, minHeight: 0 }, children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    flex: 1,
+                    minWidth: 0,
+                    height: "100%"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ref: viewportRef,
+                      onMouseDown: handleContentMouseDown,
+                      style: {
+                        ...STYLES.rulerWrapper,
+                        flex: 1,
+                        height: "unset"
+                        // 由 flex 决定高度
+                      },
+                      children: viewportWidth > 0 && viewportHeight > 0 && /* @__PURE__ */ jsx(
+                        grid_default,
+                        {
+                          ref: gridRef,
+                          width: viewportWidth,
+                          height: viewportHeight,
+                          scrollLeft,
+                          scrollTop,
+                          showScrollbar,
+                          scrollbarTotalWidth: totalWidth + canvasRightMargin,
+                          scrollbarTotalHeight: totalHeight,
+                          onHorizontalScroll: setScrollLeft,
+                          onVerticalScroll: setScrollTop,
+                          horizontalScaleSize: displayHorizontalScaleSize,
+                          verticalScaleSize: displayVerticalScaleSize,
+                          thickness,
+                          step,
+                          majorTickInterval: majorInterval,
+                          midTickInterval: midInterval,
+                          padding: 0,
+                          topPadding,
+                          onScrollRequest,
+                          onHoverGridChange,
+                          gridMarks,
+                          onGridMarksChange,
+                          canvasRightMargin,
+                          canvasTopMargin,
+                          readonly,
+                          showCursor,
+                          loops: orderedLoops,
+                          memos,
+                          isExpanded,
+                          isClickModeEnabled,
+                          midTickFontSize,
+                          majorTickFontSize,
+                          loopFontSize,
+                          onMaxGridChange,
+                          printMode,
+                          markPointFontSize,
+                          loopWingOffset,
+                          midTickLength,
+                          majorTickLength,
+                          smallTickLength,
+                          showSmallTickText,
+                          smallTickFontSize,
+                          hoverEffectColor,
+                          markSelectColor,
+                          markCheckedColor,
+                          markPointColor,
+                          cursorColor,
+                          mainGridColor,
+                          minorTickColor,
+                          rulerBgColor,
+                          rulerTextColor,
+                          rulerTickColor,
+                          rulerBorderColor,
+                          loopIndicatorColor,
+                          loopTextColor,
+                          loopTickExtension,
+                          showLoopArrow,
+                          loopArrowSize,
+                          showInnerLoopEndpoints,
+                          onGirdClick
+                        }
+                      )
+                    }
+                  )
+                }
+              ) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            history_modal_default,
+            {
+              open: isHistoryModalOpen,
+              onCancel: () => setIsHistoryModalOpen(false),
+              onClear: clearLogs,
+              logs: historyLogs
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            batch_copy_modal_default,
+            {
+              open: copyModalOpen,
+              onCancel: () => setCopyModalOpen(false),
+              onOk: handleDuplicateSubmit
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            insert_jing_wei_modal_default,
+            {
+              open: insertModalOpen,
+              onCancel: () => setInsertModalOpen(false),
+              onOk: handleInsertSubmit,
+              verticalScaleSize,
+              horizontalScaleSize
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            delete_jing_wei_modal_default,
+            {
+              open: deleteJingWeiModalOpen,
+              onCancel: () => setDeleteJingWeiModalOpen(false),
+              onOk: handleDeleteJingWeiSubmit,
+              verticalScaleSize,
+              horizontalScaleSize
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            create_loop_modal_default,
+            {
+              open: loopModalOpen,
+              onCancel: () => setLoopModalOpen(false),
+              onSubmit: handleLoopSubmit,
+              verticalScaleSize,
+              horizontalScaleSize
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            edit_loop_modal_default,
+            {
+              open: editLoopModalOpen,
+              onCancel: () => setEditLoopModalOpen(false),
+              onSubmit: handleEditLoopSubmit,
+              loops,
+              loopsInSelection,
+              verticalScaleSize,
+              horizontalScaleSize
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            delete_loop_modal_default,
+            {
+              open: deleteLoopModalOpen,
+              onCancel: () => setDeleteLoopModalOpen(false),
+              onSubmit: handleDeleteLoopSubmit,
+              loops,
+              loopsInSelection
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            create_memo_modal_default,
+            {
+              open: memoModalOpen,
+              onCancel: () => setMemoModalOpen(false),
+              onSubmit: handleMemoSubmit,
+              verticalScaleSize,
+              horizontalScaleSize
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            delete_memo_modal_default,
+            {
+              open: deleteMemoModalOpen,
+              onCancel: () => setDeleteMemoModalOpen(false),
+              onSubmit: handleDeleteMemoSubmit,
+              memosInSelection
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var drawing_board_default = DrawingBoard;
+
+export { drawing_board_default as DrawingBoard, grid_default as MaintopPatternGrid, drawing_board_default as ReactMaintopPattern, drawing_board_default as default };