feat:page header

src/editor/core/draw/Draw.ts

@@ -27,6 +27,7 @@ import { TableParticle } from "./particle/table/TableParticle"
 import { ISearchResult } from "../../interface/Search"
 import { TableTool } from "./particle/table/TableTool"
 import { HyperlinkParticle } from "./particle/HyperlinkParticle"
+import { Header } from "./frame/Header"
 
 export class Draw {
 
@@ -55,6 +56,7 @@ export class Draw {
   private tableParticle: TableParticle
   private tableTool: TableTool
   private pageNumber: PageNumber
+  private header: Header
   private hyperlinkParticle: HyperlinkParticle
 
   private rowList: IRow[]
@@ -94,6 +96,7 @@ export class Draw {
     this.tableParticle = new TableParticle(this)
     this.tableTool = new TableTool(this)
     this.pageNumber = new PageNumber(this)
+    this.header = new Header(this)
     this.hyperlinkParticle = new HyperlinkParticle(this)
     new GlobalObserver(this)
 
@@ -143,6 +146,10 @@ export class Draw {
     return this.options.pageNumberBottom * this.options.scale
   }
 
+  public getHeaderTop(): number {
+    return this.options.headerTop * this.options.scale
+  }
+
   public getMarginIndicatorSize(): number {
     return this.options.marginIndicatorSize * this.options.scale
   }
@@ -646,6 +653,8 @@ export class Draw {
     x = drawRowResult.x
     y = drawRowResult.y
     index = drawRowResult.index
+    // 绘制页眉
+    this.header.render(ctx)
     // 绘制页码
     this.pageNumber.render(ctx, pageNo)
     // 搜索匹配绘制

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

@@ -0,0 +1,31 @@
+import { DeepRequired } from "../../../interface/Common"
+import { IEditorOption } from "../../../interface/Editor"
+import { Draw } from "../Draw"
+
+export class Header {
+
+  private draw: Draw
+  private options: DeepRequired<IEditorOption>
+
+  constructor(draw: Draw) {
+    this.draw = draw
+    this.options = <DeepRequired<IEditorOption>>draw.getOptions()
+  }
+
+  public render(ctx: CanvasRenderingContext2D) {
+    const { header: { data, size, color, font }, scale } = this.options
+    if (!data) return
+    const width = this.draw.getWidth()
+    const top = this.draw.getHeaderTop()
+    ctx.save()
+    ctx.fillStyle = color
+    ctx.font = `${size! * scale}px ${font}`
+    // 文字长度
+    const textWidth = ctx.measureText(`${data}`).width
+    // 偏移量
+    const left = (width - textWidth) / 2
+    ctx.fillText(`${data}`, left < 0 ? 0 : left, top)
+    ctx.restore()
+  }
+
+}

src/editor/index.ts

@@ -15,6 +15,7 @@ import { tableMenus } from './core/contextmenu/menus/tableMenus'
 import { IContextMenuContext, IRegisterContextMenu } from './interface/contextmenu/ContextMenu'
 import { EditorComponent } from './dataset/enum/Editor'
 import { EDITOR_COMPONENT } from './dataset/constant/Editor'
+import { IHeader } from './interface/Header'
 
 export default class Editor {
 
@@ -23,6 +24,13 @@ export default class Editor {
   public register: Register
 
   constructor(container: HTMLDivElement, elementList: IElement[], options: IEditorOption = {}) {
+    const headerOptions: Required<IHeader> = {
+      data: '',
+      color: '#AAAAAA',
+      size: 14,
+      font: 'Yahei',
+      ...options.header
+    }
     const editorOptions: Required<IEditorOption> = {
       defaultType: 'TEXT',
       defaultFont: 'Yahei',
@@ -52,7 +60,9 @@ export default class Editor {
       tdPadding: 5,
       defaultTdHeight: 40,
       defaultHyperlinkColor: '#0000FF',
-      ...options
+      headerTop: 50,
+      ...options,
+      header: headerOptions
     }
     formatElementList(elementList)
     // 监听

src/editor/interface/Common.ts

@@ -0,0 +1,25 @@
+export type Primitive = string | number | boolean | bigint | symbol | undefined | null
+
+export type Builtin = Primitive | Function | Date | Error | RegExp
+
+export type DeepRequired<T> = T extends Error
+  ? Required<T>
+  : T extends Builtin
+  ? T
+  : T extends Map<infer K, infer V>
+  ? Map<DeepRequired<K>, DeepRequired<V>>
+  : T extends ReadonlyMap<infer K, infer V>
+  ? ReadonlyMap<DeepRequired<K>, DeepRequired<V>>
+  : T extends WeakMap<infer K, infer V>
+  ? WeakMap<DeepRequired<K>, DeepRequired<V>>
+  : T extends Set<infer U>
+  ? Set<DeepRequired<U>>
+  : T extends ReadonlySet<infer U>
+  ? ReadonlySet<DeepRequired<U>>
+  : T extends WeakSet<infer U>
+  ? WeakSet<DeepRequired<U>>
+  : T extends Promise<infer U>
+  ? Promise<DeepRequired<U>>
+  : T extends {}
+  ? { [K in keyof T]-?: DeepRequired<T[K]> }
+  : Required<T>

src/editor/interface/Editor.ts

@@ -1,4 +1,5 @@
 import { IElement } from ".."
+import { IHeader } from "./Header"
 
 export interface IEditorOption {
   defaultType?: string;
@@ -29,6 +30,8 @@ export interface IEditorOption {
   tdPadding?: number;
   defaultTdHeight?: number;
   defaultHyperlinkColor?: string;
+  headerTop?: number;
+  header?: IHeader;
 }
 
 export interface IEditorResult {

src/editor/interface/Header.ts

@@ -0,0 +1,6 @@
+export interface IHeader {
+  data: string;
+  color?: string;
+  size?: number;
+  font?: string;
+}

src/main.ts

@@ -195,7 +195,10 @@ window.onload = function () {
   // 初始化编辑器
   const container = document.querySelector<HTMLDivElement>('.editor')!
   const instance = new Editor(container, <IElement[]>data, {
-    margins: [100, 120, 100, 120]
+    margins: [100, 120, 100, 120],
+    header: {
+      data: '人民医院门诊'
+    }
   })
   console.log('实例: ', instance)