From 4987723f27684a3f4ba4e9952b75c16926f4a07b Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Mon, 3 Apr 2023 21:29:08 +0800 Subject: [PATCH] feat: add page number format option --- src/editor/core/draw/Draw.ts | 4 ++++ src/editor/core/draw/frame/PageNumber.ts | 20 ++++++++++++++++++-- src/editor/dataset/constant/PageNumber.ts | 10 +++++++++- src/editor/dataset/enum/Common.ts | 5 +++++ src/editor/index.ts | 5 +++-- src/editor/interface/PageNumber.ts | 3 +++ src/editor/utils/index.ts | 20 ++++++++++++++++++++ src/mock.ts | 3 +++ 8 files changed, 65 insertions(+), 5 deletions(-) diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index 90d68c9..1e5813f 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -331,6 +331,10 @@ export class Draw { return this.pageList } + public getPageCount(): number { + return this.pageList.length + } + public getTableRowList(sourceElementList: IElement[]): IRow[] { const positionContext = this.position.getPositionContext() const { index, trIndex, tdIndex } = positionContext diff --git a/src/editor/core/draw/frame/PageNumber.ts b/src/editor/core/draw/frame/PageNumber.ts index fcecdc0..f00f2fd 100644 --- a/src/editor/core/draw/frame/PageNumber.ts +++ b/src/editor/core/draw/frame/PageNumber.ts @@ -1,7 +1,10 @@ +import { FORMAT_PLACEHOLDER } from '../../../dataset/constant/PageNumber' +import { NumberType } from '../../../dataset/enum/Common' import { PageMode } from '../../../dataset/enum/Editor' import { RowFlex } from '../../../dataset/enum/Row' import { DeepRequired } from '../../../interface/Common' import { IEditorOption } from '../../../interface/Editor' +import { convertNumberToChinese } from '../../../utils' import { Draw } from '../Draw' export class PageNumber { @@ -15,8 +18,21 @@ export class PageNumber { } public render(ctx: CanvasRenderingContext2D, pageNo: number) { - const { pageNumber: { size, font, color, rowFlex }, scale, pageMode } = this.options - const text = `${pageNo + 1}` + const { pageNumber: { size, font, color, rowFlex, numberType, format }, scale, pageMode } = this.options + // 处理页码格式 + let text = format + const pageNoReg = new RegExp(FORMAT_PLACEHOLDER.PAGE_NO) + if (pageNoReg.test(text)) { + const realPageNo = pageNo + 1 + const pageNoText = numberType === NumberType.CHINESE ? convertNumberToChinese(realPageNo) : `${realPageNo}` + text = text.replace(pageNoReg, pageNoText) + } + const pageCountReg = new RegExp(FORMAT_PLACEHOLDER.PAGE_COUNT) + if (pageCountReg.test(text)) { + const pageCount = this.draw.getPageCount() + const pageCountText = numberType === NumberType.CHINESE ? convertNumberToChinese(pageCount) : `${pageCount}` + text = text.replace(pageCountReg, pageCountText) + } const width = this.draw.getWidth() // 计算y位置 const height = pageMode === PageMode.CONTINUITY diff --git a/src/editor/dataset/constant/PageNumber.ts b/src/editor/dataset/constant/PageNumber.ts index 42b7ce0..cd44168 100644 --- a/src/editor/dataset/constant/PageNumber.ts +++ b/src/editor/dataset/constant/PageNumber.ts @@ -1,10 +1,18 @@ import { IPageNumber } from '../../interface/PageNumber' +import { NumberType } from '../enum/Common' import { RowFlex } from '../enum/Row' +export const FORMAT_PLACEHOLDER = { + PAGE_NO: '{pageNo}', + PAGE_COUNT: '{pageCount}' +} + export const defaultPageNumberOption: Readonly> = { bottom: 60, size: 12, font: 'Yahei', color: '#000000', - rowFlex: RowFlex.CENTER + rowFlex: RowFlex.CENTER, + format: FORMAT_PLACEHOLDER.PAGE_NO, + numberType: NumberType.ARABIC } \ No newline at end of file diff --git a/src/editor/dataset/enum/Common.ts b/src/editor/dataset/enum/Common.ts index c4c3b52..72029ee 100644 --- a/src/editor/dataset/enum/Common.ts +++ b/src/editor/dataset/enum/Common.ts @@ -2,4 +2,9 @@ export enum MaxHeightRatio { HALF = 'half', ONE_THIRD = 'one-third', QUARTER = 'quarter' +} + +export enum NumberType { + ARABIC = 'arabic', + CHINESE = 'chinese' } \ No newline at end of file diff --git a/src/editor/index.ts b/src/editor/index.ts index 09b92d9..3e7f7b4 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -37,7 +37,7 @@ import { VerticalAlign } from './dataset/enum/VerticalAlign' import { TableBorder } from './dataset/enum/table/Table' import { IFooter } from './interface/Footer' import { defaultFooterOption } from './dataset/constant/Footer' -import { MaxHeightRatio } from './dataset/enum/Common' +import { MaxHeightRatio, NumberType } from './dataset/enum/Common' export default class Editor { @@ -189,7 +189,8 @@ export { BlockType, PaperDirection, TableBorder, - MaxHeightRatio + MaxHeightRatio, + NumberType } // 对外类型 diff --git a/src/editor/interface/PageNumber.ts b/src/editor/interface/PageNumber.ts index 7a7f973..4b41776 100644 --- a/src/editor/interface/PageNumber.ts +++ b/src/editor/interface/PageNumber.ts @@ -1,3 +1,4 @@ +import { NumberType } from '../dataset/enum/Common' import { RowFlex } from '../dataset/enum/Row' export interface IPageNumber { @@ -6,4 +7,6 @@ export interface IPageNumber { font?: string; color?: string; rowFlex?: RowFlex; + format?: string; + numberType?: NumberType; } \ No newline at end of file diff --git a/src/editor/utils/index.ts b/src/editor/utils/index.ts index a5510b2..ac3de24 100644 --- a/src/editor/utils/index.ts +++ b/src/editor/utils/index.ts @@ -117,4 +117,24 @@ export function nextTick(fn: Function) { setTimeout(() => { fn() }, 0) +} + +export function convertNumberToChinese(num: number) { + const chineseNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'] + const chineseUnit = ['', '十', '百', '千', '万', '十', '百', '千', '亿', '十', '百', '千', '万', '十', '百', '千', '亿'] + if (!num || isNaN(num)) return '零' + const numStr = num.toString().split('') + let result = '' + for (let i = 0; i < numStr.length; i++) { + const desIndex = numStr.length - 1 - i + result = `${chineseUnit[i]}${result}` + result = `${chineseNum[Number(numStr[desIndex])]}${result}` + } + result = result.replace(/零(千|百|十)/g, '零').replace(/十零/g, '十') + result = result.replace(/零+/g, '零') + result = result.replace(/零亿/g, '亿').replace(/零万/g, '万') + result = result.replace(/亿万/g, '亿') + result = result.replace(/零+$/, '') + result = result.replace(/^一十/g, '十') + return result } \ No newline at end of file diff --git a/src/mock.ts b/src/mock.ts index 9f9b704..6e99309 100644 --- a/src/mock.ts +++ b/src/mock.ts @@ -295,5 +295,8 @@ export const options: IEditorOption = { watermark: { data: 'CANVAS-EDITOR', size: 120 + }, + pageNumber: { + format: '第{pageNo}页/共{pageCount}页' } } \ No newline at end of file