From c1cb37c56ee80526a082edc9dd4cde310a9284cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E4=BA=91=E9=A3=9E?= Date: Fri, 14 Jan 2022 23:29:32 +0800 Subject: [PATCH] feat:add separator --- index.html | 3 +++ src/assets/images/separator.svg | 1 + src/editor/core/command/Command.ts | 6 +++++ src/editor/core/command/CommandAdapt.ts | 16 +++++++++++++ src/editor/core/draw/Draw.ts | 10 +++++++++ src/editor/core/draw/particle/Separator.ts | 26 ++++++++++++++++++++++ src/editor/dataset/enum/Element.ts | 3 ++- src/main.ts | 19 +++++++++++----- src/style.css | 4 ++++ 9 files changed, 82 insertions(+), 6 deletions(-) create mode 100644 src/assets/images/separator.svg create mode 100644 src/editor/core/draw/particle/Separator.ts diff --git a/index.html b/index.html index 335df87..44a07f8 100644 --- a/index.html +++ b/index.html @@ -120,6 +120,9 @@
+
+ +
diff --git a/src/assets/images/separator.svg b/src/assets/images/separator.svg new file mode 100644 index 0000000..58225e9 --- /dev/null +++ b/src/assets/images/separator.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 0cff768..f434299 100644 --- a/src/editor/core/command/Command.ts +++ b/src/editor/core/command/Command.ts @@ -40,6 +40,7 @@ export class Command { private static cancelMergeTableCell: Function private static image: Function private static hyperlink: Function + private static separator: Function private static search: Function private static print: Function private static pageScaleRecovery: Function @@ -82,6 +83,7 @@ export class Command { Command.cancelMergeTableCell = adapt.cancelMergeTableCell.bind(adapt) Command.image = adapt.image.bind(adapt) Command.hyperlink = adapt.hyperlink.bind(adapt) + Command.separator = adapt.separator.bind(adapt) Command.search = adapt.search.bind(adapt) Command.print = adapt.print.bind(adapt) Command.pageScaleRecovery = adapt.pageScaleRecovery.bind(adapt) @@ -233,6 +235,10 @@ export class Command { return Command.image(payload) } + public executeSeparator() { + return Command.separator() + } + public executeSearch(payload: string | null) { return Command.search(payload) } diff --git a/src/editor/core/command/CommandAdapt.ts b/src/editor/core/command/CommandAdapt.ts index a5a3ac0..8e649fe 100644 --- a/src/editor/core/command/CommandAdapt.ts +++ b/src/editor/core/command/CommandAdapt.ts @@ -890,6 +890,22 @@ export class CommandAdapt { this.draw.render({ curIndex }) } + public separator() { + const { startIndex, endIndex } = this.range.getRange() + if (!~startIndex && !~endIndex) return + const elementList = this.draw.getElementList() + // 光标后是否存在分割线 + if (elementList[endIndex]?.type === ElementType.SEPARATOR) return + const element: IElement = { + value: '\n', + type: ElementType.SEPARATOR + } + const curIndex = startIndex + 1 + elementList.splice(curIndex, 0, element) + this.range.setRange(curIndex, curIndex) + this.draw.render({ curIndex }) + } + public image(payload: IDrawImagePayload) { const { startIndex, endIndex } = this.range.getRange() if (!~startIndex && !~endIndex) return diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index f2cdfd7..722386c 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -30,6 +30,7 @@ import { HyperlinkParticle } from "./particle/HyperlinkParticle" import { Header } from "./frame/Header" import { SuperscriptParticle } from "./particle/Superscript" import { SubscriptParticle } from "./particle/Subscript" +import { SeparatorParticle } from "./particle/Separator" export class Draw { @@ -60,6 +61,7 @@ export class Draw { private pageNumber: PageNumber private header: Header private hyperlinkParticle: HyperlinkParticle + private separatorParticle: SeparatorParticle private superscriptParticle: SuperscriptParticle private subscriptParticle: SubscriptParticle @@ -102,6 +104,7 @@ export class Draw { this.pageNumber = new PageNumber(this) this.header = new Header(this) this.hyperlinkParticle = new HyperlinkParticle(this) + this.separatorParticle = new SeparatorParticle(this) this.superscriptParticle = new SuperscriptParticle() this.subscriptParticle = new SubscriptParticle() @@ -443,6 +446,11 @@ export class Draw { metrics.height = elementHeight metrics.boundingBoxDescent = elementHeight metrics.boundingBoxAscent = 0 + } else if (element.type === ElementType.SEPARATOR) { + metrics.width = innerWidth + metrics.height = this.options.defaultSize + metrics.boundingBoxAscent = -rowMargin + metrics.boundingBoxDescent = -rowMargin } else { // 设置上下标真实字体尺寸 const size = element.size || this.options.defaultSize @@ -570,6 +578,8 @@ export class Draw { } else if (element.type === ElementType.SUBSCRIPT) { this.textParticle.complete() this.subscriptParticle.render(ctx, element, x, y + offsetY) + } else if (element.type === ElementType.SEPARATOR) { + this.separatorParticle.render(ctx, element, x, y) } else { this.textParticle.record(ctx, element, x, y + offsetY) } diff --git a/src/editor/core/draw/particle/Separator.ts b/src/editor/core/draw/particle/Separator.ts new file mode 100644 index 0000000..4eb5210 --- /dev/null +++ b/src/editor/core/draw/particle/Separator.ts @@ -0,0 +1,26 @@ +import { IRowElement } from "../../../interface/Row" +import { Draw } from "../Draw" + +export class SeparatorParticle { + + private draw: Draw + + constructor(draw: Draw) { + this.draw = draw + } + + public render(ctx: CanvasRenderingContext2D, element: IRowElement, x: number, y: number) { + const innerWidth = this.draw.getInnerWidth() + ctx.save() + if (element.color) { + ctx.strokeStyle = element.color + } + ctx.translate(0.5, 0.5) + ctx.beginPath() + ctx.moveTo(x, y) + ctx.lineTo(x + innerWidth, y) + ctx.stroke() + 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 e2a10f1..5869710 100644 --- a/src/editor/dataset/enum/Element.ts +++ b/src/editor/dataset/enum/Element.ts @@ -4,5 +4,6 @@ export enum ElementType { TABLE = 'table', HYPERLINK = 'hyperlink', SUPERSCRIPT = 'superscript', - SUBSCRIPT = 'subscript' + SUBSCRIPT = 'subscript', + SEPARATOR = 'separator' } \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 9579e7f..7ab6aff 100644 --- a/src/main.ts +++ b/src/main.ts @@ -63,7 +63,11 @@ window.onload = function () { size: 16 } }) - data.splice(137, 0, { + data.splice(8, 0, { + value: '\n', + type: ElementType.SEPARATOR + }) + data.splice(138, 0, { type: ElementType.HYPERLINK, value: '', valueList: [{ @@ -81,16 +85,16 @@ window.onload = function () { }], url: 'https://hufe.club/canvas-editor' }) - data.splice(378, 0, { - value: '危', + data.splice(379, 0, { + value: '∆', color: '#FF0000', type: ElementType.SUBSCRIPT }) - data.splice(466, 0, { + data.splice(467, 0, { value: '9', type: ElementType.SUPERSCRIPT }) - data.splice(592, 0, { + data.splice(593, 0, { value: `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFkAAAAgCAYAAAB5JtSmAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAQ0SURBVGhD7dhrUSNBFAVgvKACEVjAAhJQgAIUYAABGEAABvgfAdn6UnWou01PppOZhIXNj1P9vo9zH5PK1Waz2V5wWlxIPgMuJJ8Bi0h+fn7eXl9fb29ubrYPDw/dO/8DHh8fu/vB4kym4Orqaofb29vund8OSSbhemewSrugBMnG3vlvw9vb265yn56edmtz/t/f33+5C8MkixQSZSsl9UzLOHUmcwTYAN/Rpl5eXnY+pnIB0Xd3d7s5m3rvDsrkCGszNiQ7r/tr4v39fSc/uipOqRcqufTHBiO78GGdzG5xcLtIFmVde7L9NsvXRo9s84+Pj+79pUAwn5GcD1wIz5r+fYGeJdnjGiF9hwL7iWAcfX19/evtKVHJXrtN8Rf4A3TVczqhrut5i1mSZQgnIriSWtdzP2N+EvIhi3/GWqHWtWXuy2IYbheiKarJZIZknkxyrryc2Utrgal+9S8iScUXIx/3kcxfe/jotcuDezLFlIbARDrzHpytXdKnQr4xyc74Vu9YV5Ih2Q/tT7mDSEYw5ZU4wu3nJx64k/1z9umlUG0hah/JSbC6Jzi5exDJWoTHERoBxu8uf/pT1j3HDkUIJitjbRfRA/iwVzlgy1RCfSF5ili9xj7BUWKs9wJZ3MpditYu+lsc+/PRx53cVF9Pdg/syE9Hb6cS75PkmhUEUFofmTvLGEXKimHueJP9Y3swWQwGLUiA9xEbHKuvgs4pPe1+1myTAKlw81buJ8kigjAXKauXPLQPhEYgJSEYsgdTUR0BmTVgc6C359wcvKGnBrGO8dO5VlD1ZZ519nrBHvrwKVMCas9hgL0YUI2wV98fC4FqCWizzXyqF44A0ZKLHkilgvPs1zbiTuZIdZ414KvqGCKZYx4zple+MSrrJVncAyL02/TOqncJwVMglx5zI4QDZ5WPvBGEcNP+7TlEcqJIAQFGsIdQjmZt7MlYA5yiI3pOQTCQXUm2TuVmXgmewxDJQDgl6deJJoU5y7p9uwZagmu1mCvbNoOOBfkhOf6lRZjzPb8qRjBMMiUhM9GNMZQq5/oRXBP7Mlj/i12A7EMIaJGqDcl8I79+/N1xTvdINQ2TDAQSvI9Md479vdqCHKSFQKAfEmgBqCTDkjaSgOZXQkg2jy1ti0xApnBQJo/0obQRipeQXbN3CmxKGQch5xgki4Efghl/kFqzPD//2DnXIodIRpaoETaXxcmwGNO7N4I2Oyuc6b+xK/tL9IH3kY/E+r1JdST4yM+7VUiuJbuPZHBeHZcNvXtziMMV9mRuvUOX8Vg9IFjRx9dUYM3s2oJyNx9ahFfSWwyRHKHG3nmL2q/mojyFVAWnEdi2Hg7OBXwUCCKr1QEtoe0+/9jI3xqIiuF2QRD0zqcwpfQnge9TVSI4tWrNe79shj98F0xDC0N4bTUVF5LPgAvJJ8dm+wcP2iJuZNdC5QAAAABJRU5ErkJggg==`, width: 89, height: 32, @@ -460,6 +464,11 @@ window.onload = function () { } }) } + const separatorDom = document.querySelector('.menu-item__separator')! + separatorDom.onclick = function () { + console.log('separator') + instance.command.executeSeparator() + } const collspanDom = document.querySelector('.menu-item__search__collapse') const searchInputDom = document.querySelector('.menu-item__search__collapse__search input') document.querySelector('.menu-item__search')!.onclick = function () { diff --git a/src/style.css b/src/style.css index f528b0f..4637f8c 100644 --- a/src/style.css +++ b/src/style.css @@ -369,6 +369,10 @@ ul { background-image: url('./assets/images/hyperlink.svg'); } +.menu-item__separator i { + background-image: url('./assets/images/separator.svg'); +} + .menu-item__search { position: relative; }