feat: add line number option #734

docs/en/guide/option.md

@@ -71,6 +71,7 @@ interface IEditorOption {
   background?: IBackgroundOption // Background option. {color?:string; image?:string; size?:BackgroundSize; repeat?:BackgroundRepeat; applyPageNumbers?:number[]}。default: {color: '#FFFFFF'}
   lineBreak?: ILineBreakOption // LineBreak option. {disabled?:boolean; color?:string; lineWidth?:number;}
   separator?: ISeparatorOption // Separator option. {lineWidth?:number; strokeStyle?:string;}
+  lineNumber?: ILineNumberOption // LineNumber option. {size?:number; font?:string; color?:string; disabled?:boolean; right?:number}
 }
 ```
 
@@ -109,11 +110,11 @@ interface IFooter {
 ```typescript
 interface IPageNumber {
   bottom?: number // The size from the bottom of the page.default: 60
-  size?: number // font size.default: 12
-  font?: string // font.default: Microsoft YaHei
-  color?: string // font color.default: #000000
-  rowFlex?: RowFlex // Line alignment.default: CENTER
-  format?: string // Page number format.default: {pageNo}。example：{pageNo}/{pageCount}
+  size?: number // font size. default: 12
+  font?: string // font. default: Microsoft YaHei
+  color?: string // font color. default: #000000
+  rowFlex?: RowFlex // Line alignment. default: CENTER
+  format?: string // Page number format. default: {pageNo}。example：{pageNo}/{pageCount}
   numberType?: NumberType // The numeric type. default: ARABIC
   disabled?: boolean // Whether to disable
   startPageNo?: number // Start page number.default: 1
@@ -127,10 +128,10 @@ interface IPageNumber {
 ```typescript
 interface IWatermark {
   data: string // text.
-  color?: string // color.default: #AEB5C0
-  opacity?: number // transparency.default: 0.3
-  size?: number // font size.default: 200
-  font?: string // font.default: Microsoft YaHei
+  color?: string // color. default: #AEB5C0
+  opacity?: number // transparency. default: 0.3
+  size?: number // font size. default: 200
+  font?: string // font. default: Microsoft YaHei
 }
 ```
 
@@ -139,9 +140,22 @@ interface IWatermark {
 ```typescript
 interface IPlaceholder {
   data: string // text.
-  color?: string // color.default: #DCDFE6
-  opacity?: number // transparency.default: 1
-  size?: number // font size.default: 16
-  font?: string // font.default: Microsoft YaHei
+  color?: string // color. default: #DCDFE6
+  opacity?: number // transparency. default: 1
+  size?: number // font size. default: 16
+  font?: string // font. default: Microsoft YaHei
+}
+```
+
+## LineNumber Configuration
+
+```typescript
+interface ILineNumberOption {
+  size?: number // font size. default: 12
+  font?: string // font. default: Microsoft YaHei
+  color?: string // color. default: #000000
+  disabled?: boolean // Whether to disable. default: false
+  right?: number // Distance from the main text. default: 20
+  type?: LineNumberType // Number type (renumber each page, consecutive numbering). default: continuity
 }
 ```

docs/guide/option.md

@@ -71,6 +71,7 @@ interface IEditorOption {
   background?: IBackgroundOption // 背景配置。{color?:string; image?:string; size?:BackgroundSize; repeat?:BackgroundRepeat; applyPageNumbers?:number[]}。默认：{color: '#FFFFFF'}
   lineBreak?: ILineBreakOption // 换行符配置。{disabled?:boolean; color?:string; lineWidth?:number;}
   separator?: ISeparatorOption // 分隔符配置。{lineWidth?:number; strokeStyle?:string;}
+  lineNumber?: ILineNumberOption // 行号配置。{size?:number; font?:string; color?:string; disabled?:boolean; right?:number}
 }
 ```
 
@@ -145,3 +146,16 @@ interface IPlaceholder {
   font?: string // 字体。默认：Microsoft YaHei
 }
 ```
+
+## 行号配置
+
+```typescript
+interface ILineNumberOption {
+  size?: number // 字体大小。默认：12
+  font?: string // 字体。默认：Microsoft YaHei
+  color?: string // 颜色。默认：#000000
+  disabled?: boolean // 是否禁用。默认：true
+  right?: number // 距离正文距离。默认：20
+  type?: LineNumberType // 编号类型（每页重新编号、连续编号）。默认：连续编号
+}
+```

src/editor/core/draw/Draw.ts

@@ -101,6 +101,7 @@ import { ImageDisplay } from '../../dataset/enum/Common'
 import { PUNCTUATION_REG } from '../../dataset/constant/Regular'
 import { LineBreakParticle } from './particle/LineBreakParticle'
 import { MouseObserver } from '../observer/MouseObserver'
+import { LineNumber } from './frame/LineNumber'
 
 export class Draw {
   private container: HTMLDivElement
@@ -138,6 +139,7 @@ export class Draw {
   private tableParticle: TableParticle
   private tableTool: TableTool
   private pageNumber: PageNumber
+  private lineNumber: LineNumber
   private waterMark: Watermark
   private placeholder: Placeholder
   private header: Header
@@ -213,6 +215,7 @@ export class Draw {
     this.tableParticle = new TableParticle(this)
     this.tableTool = new TableTool(this)
     this.pageNumber = new PageNumber(this)
+    this.lineNumber = new LineNumber(this)
     this.waterMark = new Watermark(this)
     this.placeholder = new Placeholder(this)
     this.header = new Header(this, data.header)
@@ -549,6 +552,10 @@ export class Draw {
     return this.lineBreakParticle
   }
 
+  public getTextParticle(): TextParticle {
+    return this.textParticle
+  }
+
   public getHeaderElementList(): IElement[] {
     return this.header.getElementList()
   }
@@ -1194,6 +1201,7 @@ export class Draw {
         ascent: 0,
         elementList: [],
         startIndex: 0,
+        rowIndex: 0,
         rowFlex: elementList?.[0]?.rowFlex || elementList?.[1]?.rowFlex
       })
     }
@@ -1645,6 +1653,7 @@ export class Draw {
           startIndex: i,
           elementList: [rowElement],
           ascent,
+          rowIndex: curRow.rowIndex + 1,
           rowFlex: elementList[i]?.rowFlex || elementList[i + 1]?.rowFlex,
           isPageBreak: element.type === ElementType.PAGE_BREAK
         }
@@ -2186,7 +2195,8 @@ export class Draw {
 
   private _drawPage(payload: IDrawPagePayload) {
     const { elementList, positionList, rowList, pageNo } = payload
-    const { inactiveAlpha, pageMode, header, footer, pageNumber } = this.options
+    const { inactiveAlpha, pageMode, header, footer, pageNumber, lineNumber } =
+      this.options
     const innerWidth = this.getInnerWidth()
     const ctx = this.ctxList[pageNo]
     // 判断当前激活区域-非正文区域时元素透明度降低
@@ -2247,6 +2257,10 @@ export class Draw {
     if (this.elementList.length <= 1 && !this.elementList[0]?.listId) {
       this.placeholder.render(ctx)
     }
+    // 渲染行数
+    if (!lineNumber.disabled) {
+      this.lineNumber.render(ctx, pageNo)
+    }
   }
 
   private _disconnectLazyRender() {

src/editor/core/draw/frame/LineNumber.ts

@@ -0,0 +1,43 @@
+import { LineNumberType } from '../../../dataset/enum/LineNumber'
+import { DeepRequired } from '../../../interface/Common'
+import { IEditorOption } from '../../../interface/Editor'
+import { Draw } from '../Draw'
+
+export class LineNumber {
+  private draw: Draw
+  private options: DeepRequired<IEditorOption>
+
+  constructor(draw: Draw) {
+    this.draw = draw
+    this.options = draw.getOptions()
+  }
+
+  public render(ctx: CanvasRenderingContext2D, pageNo: number) {
+    const {
+      scale,
+      lineNumber: { color, size, font, right, type }
+    } = this.options
+    const textParticle = this.draw.getTextParticle()
+    const margins = this.draw.getMargins()
+    const positionList = this.draw.getPosition().getOriginalMainPositionList()
+    const pageRowList = this.draw.getPageRowList()
+    const rowList = pageRowList[pageNo]
+    ctx.save()
+    ctx.fillStyle = color
+    ctx.font = `${size * scale}px ${font}`
+    for (let i = 0; i < rowList.length; i++) {
+      const row = rowList[i]
+      const {
+        coordinate: { leftBottom }
+      } = positionList[row.startIndex]
+      const seq = type === LineNumberType.PAGE ? i + 1 : row.rowIndex + 1
+      const textMetrics = textParticle.measureText(ctx, {
+        value: `${seq}`
+      })
+      const x = margins[3] - (textMetrics.width + right) * scale
+      const y = leftBottom[1] - textMetrics.actualBoundingBoxAscent * scale
+      ctx.fillText(`${seq}`, x, y)
+    }
+    ctx.restore()
+  }
+}

src/editor/dataset/constant/LineNumber.ts

@@ -0,0 +1,11 @@
+import { ILineNumberOption } from '../../interface/LineNumber'
+import { LineNumberType } from '../enum/LineNumber'
+
+export const defaultLineNumberOption: Readonly<Required<ILineNumberOption>> = {
+  size: 12,
+  font: 'Microsoft YaHei',
+  color: '#000000',
+  disabled: true,
+  right: 20,
+  type: LineNumberType.CONTINUITY
+}

src/editor/dataset/enum/LineNumber.ts

@@ -0,0 +1,4 @@
+export enum LineNumberType {
+  PAGE = 'page',
+  CONTINUITY = 'continuity'
+}

src/editor/index.ts

@@ -52,6 +52,7 @@ import { deepClone, splitText } from './utils'
 import { BackgroundRepeat, BackgroundSize } from './dataset/enum/Background'
 import { TextDecorationStyle } from './dataset/enum/Text'
 import { mergeOption } from './utils/option'
+import { LineNumberType } from './dataset/enum/LineNumber'
 
 export default class Editor {
   public command: Command
@@ -169,7 +170,8 @@ export {
   ControlIndentation,
   BackgroundRepeat,
   BackgroundSize,
-  TextDecorationStyle
+  TextDecorationStyle,
+  LineNumberType
 }
 
 // 对外类型

src/editor/interface/Editor.ts

@@ -24,6 +24,7 @@ import { IWatermark } from './Watermark'
 import { IZoneOption } from './Zone'
 import { ISeparatorOption } from './Separator'
 import { ITableOption } from './table/Table'
+import { ILineNumberOption } from './LineNumber'
 
 export interface IEditorData {
   header?: IElement[]
@@ -89,6 +90,7 @@ export interface IEditorOption {
   background?: IBackgroundOption
   lineBreak?: ILineBreakOption
   separator?: ISeparatorOption
+  lineNumber?: ILineNumberOption
 }
 
 export interface IEditorResult {

src/editor/interface/LineNumber.ts

@@ -0,0 +1,10 @@
+import { LineNumberType } from '../dataset/enum/LineNumber'
+
+export interface ILineNumberOption {
+  size?: number
+  font?: string
+  color?: string
+  disabled?: boolean
+  right?: number
+  type?: LineNumberType
+}

src/editor/interface/Row.ts

@@ -19,4 +19,5 @@ export interface IRow {
   offsetX?: number
   elementList: IRowElement[]
   isWidthNotEnough?: boolean
+  rowIndex: number
 }

src/editor/utils/option.ts

@@ -16,6 +16,7 @@ import { defaultTableOption } from '../dataset/constant/Table'
 import { defaultTitleOption } from '../dataset/constant/Title'
 import { defaultWatermarkOption } from '../dataset/constant/Watermark'
 import { defaultZoneOption } from '../dataset/constant/Zone'
+import { defaultLineNumberOption } from '../dataset/constant/LineNumber'
 import { IBackgroundOption } from '../interface/Background'
 import { ICheckboxOption } from '../interface/Checkbox'
 import { DeepRequired } from '../interface/Common'
@@ -35,6 +36,7 @@ import { ITableOption } from '../interface/table/Table'
 import { ITitleOption } from '../interface/Title'
 import { IWatermark } from '../interface/Watermark'
 import { IZoneOption } from '../interface/Zone'
+import { ILineNumberOption } from '../interface/LineNumber'
 import {
   EditorMode,
   PageMode,
@@ -114,6 +116,10 @@ export function mergeOption(
     ...defaultSeparatorOption,
     ...options.separator
   }
+  const lineNumberOptions: Required<ILineNumberOption> = {
+    ...defaultLineNumberOption,
+    ...options.lineNumber
+  }
 
   return {
     mode: EditorMode.EDIT,
@@ -173,6 +179,7 @@ export function mergeOption(
     zone: zoneOptions,
     background: backgroundOptions,
     lineBreak: lineBreakOptions,
-    separator: separatorOptions
+    separator: separatorOptions,
+    lineNumber: lineNumberOptions
   }
 }