diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index 812074a..a9bc980 100644 --- a/src/editor/core/draw/Draw.ts +++ b/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) // 搜索匹配绘制 diff --git a/src/editor/core/draw/frame/Header.ts b/src/editor/core/draw/frame/Header.ts new file mode 100644 index 0000000..dd61edb --- /dev/null +++ b/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 + + constructor(draw: Draw) { + this.draw = draw + this.options = >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() + } + +} \ No newline at end of file diff --git a/src/editor/index.ts b/src/editor/index.ts index 97c8d9a..0098f25 100644 --- a/src/editor/index.ts +++ b/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 = { + data: '', + color: '#AAAAAA', + size: 14, + font: 'Yahei', + ...options.header + } const editorOptions: Required = { 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) // 监听 diff --git a/src/editor/interface/Common.ts b/src/editor/interface/Common.ts new file mode 100644 index 0000000..45c1e75 --- /dev/null +++ b/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 extends Error + ? Required + : T extends Builtin + ? T + : T extends Map + ? Map, DeepRequired> + : T extends ReadonlyMap + ? ReadonlyMap, DeepRequired> + : T extends WeakMap + ? WeakMap, DeepRequired> + : T extends Set + ? Set> + : T extends ReadonlySet + ? ReadonlySet> + : T extends WeakSet + ? WeakSet> + : T extends Promise + ? Promise> + : T extends {} + ? { [K in keyof T]-?: DeepRequired } + : Required \ No newline at end of file diff --git a/src/editor/interface/Editor.ts b/src/editor/interface/Editor.ts index d63f49f..826e60d 100644 --- a/src/editor/interface/Editor.ts +++ b/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 { diff --git a/src/editor/interface/Header.ts b/src/editor/interface/Header.ts new file mode 100644 index 0000000..10b85f9 --- /dev/null +++ b/src/editor/interface/Header.ts @@ -0,0 +1,6 @@ +export interface IHeader { + data: string; + color?: string; + size?: number; + font?: string; +} \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index dc66e01..844a75f 100644 --- a/src/main.ts +++ b/src/main.ts @@ -195,7 +195,10 @@ window.onload = function () { // 初始化编辑器 const container = document.querySelector('.editor')! const instance = new Editor(container, data, { - margins: [100, 120, 100, 120] + margins: [100, 120, 100, 120], + header: { + data: '人民医院门诊' + } }) console.log('实例: ', instance)