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

package/dist/index.d.cts

@@ -0,0 +1,382 @@
+import React from 'react';
+import { LoopConfig, MemoConfig, GridMarks } from '@canvas-components/maintop-pattern';
+export { DeleteJingWeiValues, DeleteLoopValues, DeleteMemoValues, DuplicateValues, EditLoopValues, GridMarks, InsertValues, LoopConfig, LoopValues, MemoConfig, MemoValues } from '@canvas-components/maintop-pattern';
+
+interface HistoryLog {
+    id: number;
+    time: string;
+    content: string;
+}
+
+interface DrawingBoardRef {
+    /** 获取当前生成的排版字符串（未展开计算） */
+    getBeforeOpenPattern: () => string;
+    /** 获取当前生成的排版字符串（已展开计算） */
+    getAfterOpenPattern: () => string;
+    /** 加载排版字符串并重置画布状态 */
+    loadPattern: (pattern: string, parseLoops?: boolean) => void;
+    /** 将当前画布内容导出为图片 */
+    exportImage: (type?: string, quality?: number, forceExpanded?: boolean) => {
+        url: string;
+        width: number;
+        height: number;
+        dpi: number;
+    };
+    /** 将当前画布内容导出为 SVG */
+    exportSvg: (forceExpanded?: boolean) => {
+        svg: string;
+        url: string;
+        width: number;
+        height: number;
+    };
+    /** 获得当前所有循环配置 */
+    getLoops: () => LoopConfig[];
+    /** 加载循环配置 */
+    loadLoops: (loops: LoopConfig[]) => void;
+    /** 获得当前所有备注配置 */
+    getMemos: () => MemoConfig[];
+    /** 加载备注配置 */
+    loadMemos: (memos: MemoConfig[]) => void;
+    /** 获取整个排版信息 */
+    getPatternInfo: () => {
+        /** 展开之前的排版字符串 */
+        beforeOpenPattern: string;
+        /** 展开之后的排版字符串 */
+        pattern: string;
+        /** 循环配置 */
+        loops: LoopConfig[];
+        /** 备注配置 */
+        memos: MemoConfig[];
+        /** 历史记录 */
+        historyLogs: HistoryLog[];
+    };
+    /** 加载排版信息。 */
+    loadPatternInfo: (info: {
+        /** 展开之前的排版字符串 */
+        beforeOpenPattern: string;
+        /** 循环配置 */
+        loops: LoopConfig[];
+        /** 备注配置 */
+        memos: MemoConfig[];
+    }) => void;
+    /** @deprecated 请使用 loadPatternInfo。 */
+    loadPatterInfo: DrawingBoardRef["loadPatternInfo"];
+}
+/**
+ * DrawingBoard 组件的 Props 接口
+ *
+ * 定义了 DrawingBoard 组件所需的所有属性及其用途。
+ */
+interface DrawingBoardProps {
+    /**
+     * 刻度总数，决定画布的逻辑宽度。
+     */
+    horizontalScaleSize: number;
+    /**
+     * 垂直刻度总数，决定画布的逻辑高度。
+     * @default horizontalScaleSize
+     */
+    verticalScaleSize?: number;
+    /**
+     * 每个刻度的像素间距。
+     */
+    step: number;
+    /**
+     * 右侧留白距离。
+     */
+    rightPadding: number;
+    /**
+     * 顶部留白距离。
+     */
+    topPadding: number;
+    /**
+     * 标尺厚度（单位：px）。
+     */
+    thickness: number;
+    /**
+     * Canvas 右边距。
+     */
+    canvasRightMargin: number;
+    /**
+     * Canvas 顶边距。
+     */
+    canvasTopMargin: number;
+    /**
+     * 是否默认滚动到右侧。
+     */
+    defaultRight: boolean;
+    /**
+     * 是否默认滚动到底部。
+     */
+    defaultBottom: boolean;
+    /**
+     * 主刻度间隔。
+     */
+    majorInterval: number;
+    /**
+     * 中间刻度间隔。
+     */
+    midInterval: number;
+    /**
+     * 悬停网格坐标改变的回调函数。
+     */
+    onHoverGridChange?: (coord: {
+        x: number;
+        y: number;
+    } | null) => void;
+    /**
+     * 最大网格坐标改变的回调函数。
+     */
+    onMaxGridChange?: (coord: {
+        x: number;
+        y: number;
+    } | null) => void;
+    /**
+     * 最大网格坐标改变的回调函数
+     * 存在循环时，计算循环之后的最大坐标
+     * 返回null 说明没有循环 采用 onMaxGridChange 获取最大的坐标
+     */
+    onMaxGridExpandedChange?: (coord: {
+        x: number;
+        y: number;
+    } | null) => void;
+    /**
+     * 是否只读，true时不展示左侧控制菜单
+     */
+    readonly?: boolean;
+    /**
+     * 是否展示光标
+     * @default true
+     */
+    showCursor?: boolean;
+    /**
+     * 画布外层容器宽度
+     * @default '100%'
+     */
+    width?: string | number;
+    /**
+     * 画布外层容器高度
+     * @default 650
+     */
+    height?: string | number;
+    /**
+     * 是否显示滚动条
+     * @default true
+     */
+    showScrollbar?: boolean;
+    /**
+     * 中刻度线数字大小
+     */
+    midTickFontSize?: number;
+    /**
+     * 大刻度线数字大小
+     */
+    majorTickFontSize?: number;
+    /**
+     * 循环标记字号
+     */
+    loopFontSize?: number;
+    /**
+     * 是否为打印模式
+     */
+    printMode?: boolean;
+    /**
+     * 打印模式下的选择网格绘制字体大小
+     */
+    markPointFontSize?: number;
+    /** 循环符号横向向内收缩偏移量 (默认2px) */
+    loopWingOffset?: number;
+    /** 中刻度线长度 */
+    midTickLength?: number;
+    /** 大刻度线长度 */
+    majorTickLength?: number;
+    /** 小刻度线长度 */
+    smallTickLength?: number;
+    /** 是否展示小刻度数字 */
+    showSmallTickText?: boolean;
+    /** 小刻度线数字大小 */
+    smallTickFontSize?: number;
+    /** 鼠标悬停单元格填充颜色 */
+    hoverEffectColor?: string;
+    /** 状态1网格填充颜色 (蓝色) */
+    markSelectColor?: string;
+    /** 状态2网格填充颜色 (红色) */
+    markCheckedColor?: string;
+    /** 网格标点红X或打印模式字体颜色 */
+    markPointColor?: string;
+    /** 鼠标指针十字线颜色 */
+    cursorColor?: string;
+    /** 主网格线颜色 */
+    mainGridColor?: string;
+    /** 标尺背景颜色 */
+    rulerBgColor?: string;
+    /** 标尺文字颜色 */
+    rulerTextColor?: string;
+    /** 标尺刻度线颜色 */
+    rulerTickColor?: string;
+    /** 标尺分割线颜色 (标尺与网格的边界) */
+    rulerBorderColor?: string;
+    /** 循环指示器连线颜色 */
+    loopIndicatorColor?: string;
+    /** 循环指示器文字颜色 */
+    loopTextColor?: string;
+    /** 次网格线颜色 */
+    minorTickColor?: string;
+    /** 循环指示器端点反向延长长度 */
+    loopTickExtension?: number;
+    /** 是否显示循环指标连端箭头 */
+    showLoopArrow?: boolean;
+    /** 循环箭头尺寸 */
+    loopArrowSize?: number;
+    /** 是否展示嵌套循环内部的端点数字 */
+    showInnerLoopEndpoints?: boolean;
+    /** 单元格点击事件 */
+    onGirdClick?: () => void;
+}
+declare const DrawingBoard: React.ForwardRefExoticComponent<DrawingBoardProps & React.RefAttributes<DrawingBoardRef>>;
+
+interface GridRef {
+    /** 将当前画布内容导出为图片信息 */
+    toDataURL: (type?: string, quality?: number, forceExpanded?: boolean) => {
+        url: string;
+        width: number;
+        height: number;
+        dpi: number;
+    };
+    /** 将当前画布内容导出为 SVG */
+    toSVG: (forceExpanded?: boolean) => {
+        svg: string;
+        url: string;
+        width: number;
+        height: number;
+    };
+}
+interface GridProps {
+    /** 视口宽度 */
+    width: number;
+    /** 视口高度 */
+    height: number;
+    /** 水平滚动偏移量 */
+    scrollLeft: number;
+    /** 垂直滚动偏移量 */
+    scrollTop: number;
+    /** 是否在主 Canvas 中绘制滚动条。 */
+    showScrollbar?: boolean;
+    /** 横向内容总尺寸。 */
+    scrollbarTotalWidth?: number;
+    /** 纵向内容总尺寸。 */
+    scrollbarTotalHeight?: number;
+    /** 横向滚动位置变更回调。 */
+    onHorizontalScroll?: (position: number) => void;
+    /** 纵向滚动位置变更回调。 */
+    onVerticalScroll?: (position: number) => void;
+    /** 水平标尺总刻度数 */
+    horizontalScaleSize?: number;
+    /** 垂直标尺总刻度数 */
+    verticalScaleSize?: number;
+    /** 标尺厚度 (原 height) */
+    thickness?: number;
+    /** 基础刻度间隔 (px) */
+    step?: number;
+    /** 中刻度出现的频率 */
+    midTickInterval?: number;
+    /** 主刻度出现的频率 */
+    majorTickInterval?: number;
+    /** 两端留白 */
+    padding?: number;
+    /** 顶部留白 */
+    topPadding?: number;
+    /** 滚动请求回调 */
+    onScrollRequest?: (deltaX: number, deltaY: number) => void;
+    /** 鼠标悬停网格坐标变化回调 */
+    onHoverGridChange?: (coord: {
+        x: number;
+        y: number;
+    } | null) => void;
+    /** 最大网格坐标改变的回调函数 */
+    onMaxGridChange?: (coord: {
+        x: number;
+        y: number;
+    } | null) => void;
+    /** 网格标记数据 */
+    gridMarks: GridMarks;
+    /** 网格标记数据变更回调 */
+    onGridMarksChange: React.Dispatch<React.SetStateAction<GridMarks>>;
+    /** 画布右侧留白 */
+    canvasRightMargin?: number;
+    /** 画布顶部留白 */
+    canvasTopMargin?: number;
+    /** 是否只读 */
+    readonly?: boolean;
+    /** 是否显示光标 */
+    showCursor?: boolean;
+    /** 循环配置数组 */
+    loops?: LoopConfig[];
+    /** 备忘录配置数组 */
+    memos?: MemoConfig[];
+    /** 是否处于展开状态 */
+    isExpanded?: boolean;
+    /** 中刻度线数字大小 */
+    midTickFontSize?: number;
+    /** 大刻度线数字大小 */
+    majorTickFontSize?: number;
+    /** 循环标记字号 */
+    loopFontSize?: number;
+    /** 点击操作模式是否启用 */
+    isClickModeEnabled?: boolean;
+    /** 是否为打印模式 */
+    printMode?: boolean;
+    /** 打印模式下的字体大小 */
+    markPointFontSize?: number;
+    /** 循环符号横向侧翼向内收缩偏移量 */
+    loopWingOffset?: number;
+    /** 中刻度线长度 */
+    midTickLength?: number;
+    /** 大刻度线长度 */
+    majorTickLength?: number;
+    /** 小刻度线长度 */
+    smallTickLength?: number;
+    /** 是否展示小刻度数字 */
+    showSmallTickText?: boolean;
+    /** 小刻度小数字大小 */
+    smallTickFontSize?: number;
+    /** 鼠标悬停单元格填充颜色 */
+    hoverEffectColor?: string;
+    /** 状态1网格填充颜色 (蓝色) */
+    markSelectColor?: string;
+    /** 状态2网格填充颜色 (红色) */
+    markCheckedColor?: string;
+    /** 网格标点红X或打印模式字体颜色 */
+    markPointColor?: string;
+    /** 鼠标指针十字线颜色 */
+    cursorColor?: string;
+    /** 主网格线颜色 */
+    mainGridColor?: string;
+    /** 标尺背景颜色 */
+    rulerBgColor?: string;
+    /** 标尺文字颜色 */
+    rulerTextColor?: string;
+    /** 标尺刻度线颜色 */
+    rulerTickColor?: string;
+    /** 标尺分割线颜色 (标尺与网格的边界) */
+    rulerBorderColor?: string;
+    /** 次网格线颜色 */
+    minorTickColor?: string;
+    /** 循环指示器连线颜色 */
+    loopIndicatorColor?: string;
+    /** 循环指示器文字颜色 */
+    loopTextColor?: string;
+    /** 循环指示器端点反向延长长度 */
+    loopTickExtension?: number;
+    /** 是否显示循环指标连端箭头 */
+    showLoopArrow?: boolean;
+    /** 循环箭头尺寸 */
+    loopArrowSize?: number;
+    /** 是否展示嵌套循环内部的端点数字 */
+    showInnerLoopEndpoints?: boolean;
+    /** 单元格点击事件 */
+    onGirdClick?: () => void;
+}
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<GridProps & React.RefAttributes<GridRef>>>;
+
+export { DrawingBoard, type DrawingBoardProps, type DrawingBoardRef, type GridProps, type GridRef, type HistoryLog, _default as MaintopPatternGrid, DrawingBoard as ReactMaintopPattern, type DrawingBoardProps as ReactMaintopPatternProps, type DrawingBoardRef as ReactMaintopPatternRef, DrawingBoard as default };