react-maintop-pattern

美登高排版画布的 React 适配层。

• 画布模型、渲染、SVG 导出与滚动条算法来自 @canvas-components/maintop-pattern。
• 弹窗、表单、输入和提示统一使用 @canvas-components/react-components。
• 历史记录表格使用 @canvas-components/react-list-table。
• 不依赖第三方 UI 运行时。

安装

pnpm add @canvas-components/react-maintop-pattern @canvas-components/maintop-pattern

React 示例

import { useEffect, useRef } from "react";
import {
  ReactMaintopPattern,
  type ReactMaintopPatternRef,
} from "@canvas-components/react-maintop-pattern";

export function PatternEditor() {
  const patternRef = useRef<ReactMaintopPatternRef>(null);

  useEffect(() => {
    patternRef.current?.loadPattern("008X012X018024042081");
  }, []);

  return (
    <ReactMaintopPattern
      ref={patternRef}
      horizontalScaleSize={36}
      verticalScaleSize={24}
      step={22}
      rightPadding={40}
      topPadding={20}
      thickness={36}
      canvasRightMargin={56}
      canvasTopMargin={32}
      defaultRight={false}
      defaultBottom={false}
      majorInterval={5}
      midInterval={2}
      width="100%"
      height={520}
      showScrollbar
      onHoverGridChange={(coord) => console.log("当前经纬", coord)}
    />
  );
}

Ref API

• loadPattern / getBeforeOpenPattern：加载或读取未展开版纹。
• getAfterOpenPattern：读取循环展开后的版纹。
• loadLoops / loadMemos：加载循环段与经纬备注。
• getPatternInfo / loadPatternInfo：整体读取或恢复版纹状态。
• exportImage / exportSvg：导出位图或 SVG。