From 0287c1e668a8568949b80020580d643a4d7e9158 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E4=BA=91=E9=A3=9E?= Date: Fri, 25 Feb 2022 16:13:37 +0800 Subject: [PATCH] feat:add page break --- index.html | 3 ++ src/assets/images/page-break.svg | 1 + src/editor/core/command/Command.ts | 6 +++ src/editor/core/command/CommandAdapt.ts | 11 +++++- src/editor/core/draw/Draw.ts | 14 ++++++- src/editor/core/draw/particle/PageBreak.ts | 44 ++++++++++++++++++++++ src/editor/dataset/enum/Element.ts | 3 +- src/editor/interface/Row.ts | 3 +- src/main.ts | 5 +++ src/style.css | 4 ++ 10 files changed, 88 insertions(+), 6 deletions(-) create mode 100644 src/assets/images/page-break.svg create mode 100644 src/editor/core/draw/particle/PageBreak.ts diff --git a/index.html b/index.html index 2acc94c..6e8745c 100644 --- a/index.html +++ b/index.html @@ -157,6 +157,9 @@
+
+ +
diff --git a/src/assets/images/page-break.svg b/src/assets/images/page-break.svg new file mode 100644 index 0000000..c40ec93 --- /dev/null +++ b/src/assets/images/page-break.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/editor/core/command/Command.ts b/src/editor/core/command/Command.ts index 43806af..6802c90 100644 --- a/src/editor/core/command/Command.ts +++ b/src/editor/core/command/Command.ts @@ -42,6 +42,7 @@ export class Command { private static image: Function private static hyperlink: Function private static separator: Function + private static pageBreak: Function private static addWatermark: Function private static deleteWatermark: Function private static search: Function @@ -88,6 +89,7 @@ export class Command { Command.image = adapt.image.bind(adapt) Command.hyperlink = adapt.hyperlink.bind(adapt) Command.separator = adapt.separator.bind(adapt) + Command.pageBreak = adapt.pageBreak.bind(adapt) Command.addWatermark = adapt.addWatermark.bind(adapt) Command.deleteWatermark = adapt.deleteWatermark.bind(adapt) Command.search = adapt.search.bind(adapt) @@ -246,6 +248,10 @@ export class Command { return Command.separator(payload) } + public executePageBreak() { + return Command.pageBreak() + } + public executeAddWatermark(payload: IWatermark) { return Command.addWatermark(payload) } diff --git a/src/editor/core/command/CommandAdapt.ts b/src/editor/core/command/CommandAdapt.ts index 1db2d63..1b92404 100644 --- a/src/editor/core/command/CommandAdapt.ts +++ b/src/editor/core/command/CommandAdapt.ts @@ -1,4 +1,4 @@ -import { ZERO } from "../../dataset/constant/Common" +import { WRAP, ZERO } from "../../dataset/constant/Common" import { EDITOR_ELEMENT_STYLE_ATTR, TEXTLIKE_ELEMENT_TYPE } from "../../dataset/constant/Element" import { defaultWatermarkOption } from "../../dataset/constant/Watermark" import { EditorContext } from "../../dataset/enum/Editor" @@ -905,7 +905,7 @@ export class CommandAdapt { endElement.dashArray = payload } else { const newElement: IElement = { - value: '\n', + value: WRAP, type: ElementType.SEPARATOR, dashArray: payload } @@ -922,6 +922,13 @@ export class CommandAdapt { this.draw.render({ curIndex }) } + public pageBreak() { + this.insertElementList([{ + type: ElementType.PAGE_BREAK, + value: WRAP + }]) + } + public addWatermark(payload: IWatermark) { const options = this.draw.getOptions() const { color, size, opacity, font } = defaultWatermarkOption diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index ec3e791..3c6cbc0 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -31,6 +31,7 @@ import { Header } from "./frame/Header" import { SuperscriptParticle } from "./particle/Superscript" import { SubscriptParticle } from "./particle/Subscript" import { SeparatorParticle } from "./particle/Separator" +import { PageBreakParticle } from "./particle/PageBreak" import { Watermark } from "./frame/Watermark" export class Draw { @@ -64,6 +65,7 @@ export class Draw { private header: Header private hyperlinkParticle: HyperlinkParticle private separatorParticle: SeparatorParticle + private pageBreakParticle: PageBreakParticle private superscriptParticle: SuperscriptParticle private subscriptParticle: SubscriptParticle @@ -108,6 +110,7 @@ export class Draw { this.header = new Header(this) this.hyperlinkParticle = new HyperlinkParticle(this) this.separatorParticle = new SeparatorParticle() + this.pageBreakParticle = new PageBreakParticle(this) this.superscriptParticle = new SuperscriptParticle() this.subscriptParticle = new SubscriptParticle() @@ -512,6 +515,10 @@ export class Draw { metrics.height = this.options.defaultSize metrics.boundingBoxAscent = -rowMargin metrics.boundingBoxDescent = -rowMargin + } else if (element.type === ElementType.PAGE_BREAK) { + element.width = innerWidth + metrics.width = innerWidth + metrics.height = this.options.defaultSize } else { // 设置上下标真实字体尺寸 const size = element.size || this.options.defaultSize @@ -549,7 +556,8 @@ export class Draw { height, elementList: [rowElement], ascent, - rowFlex: rowElement.rowFlex + rowFlex: rowElement.rowFlex, + isPageBreak: element.type === ElementType.PAGE_BREAK }) } else { curRow.width += metrics.width @@ -641,6 +649,8 @@ export class Draw { this.subscriptParticle.render(ctx, element, x, y + offsetY) } else if (element.type === ElementType.SEPARATOR) { this.separatorParticle.render(ctx, element, x, y) + } else if (element.type === ElementType.PAGE_BREAK) { + this.pageBreakParticle.render(ctx, element, x, y) } else { this.textParticle.record(ctx, element, x, y + offsetY) } @@ -788,7 +798,7 @@ export class Draw { let pageRowList: IRow[][] = [[]] for (let i = 0; i < this.rowList.length; i++) { const row = this.rowList[i] - if (row.height + pageHeight > height) { + if (row.height + pageHeight > height || this.rowList[i - 1]?.isPageBreak) { pageHeight = marginHeight + row.height pageRowList.push([row]) pageNo++ diff --git a/src/editor/core/draw/particle/PageBreak.ts b/src/editor/core/draw/particle/PageBreak.ts new file mode 100644 index 0000000..ab69e86 --- /dev/null +++ b/src/editor/core/draw/particle/PageBreak.ts @@ -0,0 +1,44 @@ +import { IEditorOption } from "../../../interface/Editor" +import { IRowElement } from "../../../interface/Row" +import { Draw } from "../Draw" + +export class PageBreakParticle { + + static readonly font: string = 'Yahei' + static readonly fontSize: number = 12 + static readonly displayName: string = '分页符' + static readonly lineDash: number[] = [3, 1] + + private draw: Draw + private options: Required + + constructor(draw: Draw) { + this.draw = draw + this.options = draw.getOptions() + } + + public render(ctx: CanvasRenderingContext2D, element: IRowElement, x: number, y: number) { + const { font, fontSize, displayName, lineDash } = PageBreakParticle + const { scale, defaultRowMargin } = this.options + const size = fontSize * scale + const elementWidth = element.width! + const offsetY = this.draw.getDefaultBasicRowMarginHeight() * defaultRowMargin + ctx.save() + ctx.font = `${size}px ${font}` + const textMeasure = ctx.measureText(displayName) + const halfX = (elementWidth - textMeasure.width) / 2 + // 线段 + ctx.setLineDash(lineDash) + ctx.translate(0, 0.5 + offsetY) + ctx.beginPath() + ctx.moveTo(x, y) + ctx.lineTo(x + halfX, y) + ctx.moveTo(x + halfX + textMeasure.width, y) + ctx.lineTo(x + elementWidth, y) + ctx.stroke() + // 文字 + ctx.fillText(displayName, x + halfX, y + textMeasure.actualBoundingBoxAscent - size / 2) + ctx.restore() + } + +} \ No newline at end of file diff --git a/src/editor/dataset/enum/Element.ts b/src/editor/dataset/enum/Element.ts index 5869710..5c586a9 100644 --- a/src/editor/dataset/enum/Element.ts +++ b/src/editor/dataset/enum/Element.ts @@ -5,5 +5,6 @@ export enum ElementType { HYPERLINK = 'hyperlink', SUPERSCRIPT = 'superscript', SUBSCRIPT = 'subscript', - SEPARATOR = 'separator' + SEPARATOR = 'separator', + PAGE_BREAK = 'pageBreak' } \ No newline at end of file diff --git a/src/editor/interface/Row.ts b/src/editor/interface/Row.ts index 76fd70a..fd5200d 100644 --- a/src/editor/interface/Row.ts +++ b/src/editor/interface/Row.ts @@ -10,6 +10,7 @@ export interface IRow { width: number; height: number; ascent: number; - rowFlex?: RowFlex + rowFlex?: RowFlex; + isPageBreak?: boolean; elementList: IRowElement[]; } diff --git a/src/main.ts b/src/main.ts index 53b38d5..c140917 100644 --- a/src/main.ts +++ b/src/main.ts @@ -488,6 +488,11 @@ window.onload = function () { } instance.command.executeSeparator(payload) } + const pageBreakDom = document.querySelector('.menu-item__page-break')! + pageBreakDom.onclick = function () { + console.log('pageBreak') + instance.command.executePageBreak() + } const watermarkDom = document.querySelector('.menu-item__watermark')! const watermarkOptionDom = watermarkDom.querySelector('.options')! watermarkDom.onclick = function () { diff --git a/src/style.css b/src/style.css index 62fa1d9..fb23197 100644 --- a/src/style.css +++ b/src/style.css @@ -425,6 +425,10 @@ ul { background-image: url('./assets/images/codeblock.svg'); } +.menu-item__page-break i { + background-image: url('./assets/images/page-break.svg'); +} + .menu-item__search { position: relative; }