feat: add line number option #734

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
   }
 }