From bc0c8b26015c40e8a4f56b8649d05013f6bb501b Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Wed, 17 Nov 2021 21:19:13 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E4=B8=8B=E5=88=92=E7=BA=BF=E3=80=81?= =?UTF-8?q?=E5=88=A0=E9=99=A4=E7=BA=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- .../images/{deleteline.svg => strikeout.svg} | 0 src/editor/core/command/Command.ts | 12 ++++++++++ src/editor/core/command/CommandAdapt.ts | 20 ++++++++++++++++ src/editor/core/draw/Draw.ts | 14 +++++++++++ src/editor/core/draw/Strikeout.ts | 24 +++++++++++++++++++ src/editor/core/draw/Underline.ts | 24 +++++++++++++++++++ src/editor/index.ts | 2 ++ src/editor/interface/Editor.ts | 2 ++ src/main.ts | 8 +++++++ src/style.css | 4 ++-- 11 files changed, 109 insertions(+), 3 deletions(-) rename src/assets/images/{deleteline.svg => strikeout.svg} (100%) create mode 100644 src/editor/core/draw/Strikeout.ts create mode 100644 src/editor/core/draw/Underline.ts diff --git a/index.html b/index.html index 166f7a8..1303bb4 100644 --- a/index.html +++ b/index.html @@ -42,7 +42,7 @@
-
+
diff --git a/src/assets/images/deleteline.svg b/src/assets/images/strikeout.svg similarity index 100% rename from src/assets/images/deleteline.svg rename to src/assets/images/strikeout.svg diff --git a/src/editor/core/command/Command.ts b/src/editor/core/command/Command.ts index 9391095..c955bae 100644 --- a/src/editor/core/command/Command.ts +++ b/src/editor/core/command/Command.ts @@ -10,6 +10,8 @@ export class Command { private static sizeMinus: Function private static bold: Function private static italic: Function + private static underline: Function + private static strikeout: Function private static search: Function private static print: Function @@ -22,6 +24,8 @@ export class Command { Command.sizeMinus = adapt.sizeMinus.bind(adapt) Command.bold = adapt.bold.bind(adapt) Command.italic = adapt.italic.bind(adapt) + Command.underline = adapt.underline.bind(adapt) + Command.strikeout = adapt.strikeout.bind(adapt) Command.search = adapt.search.bind(adapt) Command.print = adapt.print.bind(adapt) } @@ -60,6 +64,14 @@ export class Command { return Command.italic() } + public executeUnderline() { + return Command.underline() + } + + public executeStrikeout() { + return Command.strikeout() + } + // 搜索、打印 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 a7c3f6f..31f6a9a 100644 --- a/src/editor/core/command/CommandAdapt.ts +++ b/src/editor/core/command/CommandAdapt.ts @@ -110,6 +110,26 @@ export class CommandAdapt { this.draw.render({ isSetCursor: false }) } + public underline() { + const selection = this.range.getSelection() + if (!selection) return + const noUnderlineIndex = selection.findIndex(s => !s.underline) + selection.forEach(el => { + el.underline = !!~noUnderlineIndex + }) + this.draw.render({ isSetCursor: false }) + } + + public strikeout() { + const selection = this.range.getSelection() + if (!selection) return + const noStrikeoutIndex = selection.findIndex(s => !s.strikeout) + selection.forEach(el => { + el.strikeout = !!~noStrikeoutIndex + }) + this.draw.render({ isSetCursor: false }) + } + public search(payload: string | null) { if (payload) { const elementList = this.draw.getElementList() diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index 148e12f..f18358a 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -13,6 +13,8 @@ import { RangeManager } from "../range/RangeManager" import { Background } from "./Background" import { Margin } from "./Margin" import { Search } from "./Search" +import { Strikeout } from "./Strikeout" +import { Underline } from "./Underline" export class Draw { @@ -27,6 +29,8 @@ export class Draw { private margin: Margin private background: Background private search: Search + private underline: Underline + private strikeout: Strikeout private historyManager: HistoryManager private rowCount: number @@ -45,6 +49,8 @@ export class Draw { this.margin = new Margin(ctx, options) this.background = new Background(ctx) this.search = new Search(ctx, options, this) + this.underline = new Underline(ctx, options) + this.strikeout = new Strikeout(ctx, options) const canvasEvent = new CanvasEvent(canvas, this) this.cursor = new Cursor(canvas, this, canvasEvent) @@ -204,6 +210,14 @@ export class Draw { if (startIndex < index && index <= endIndex) { this.range.drawRange(x, y, metrics.width, curRow.height) } + // 下划线绘制 + if (element.underline) { + this.underline.render(x, y + curRow.height, metrics.width) + } + // 删除线绘制 + if (element.strikeout) { + this.strikeout.render(x, y + curRow.height / 2, metrics.width) + } index++ x += metrics.width this.ctx.restore() diff --git a/src/editor/core/draw/Strikeout.ts b/src/editor/core/draw/Strikeout.ts new file mode 100644 index 0000000..6b35ef8 --- /dev/null +++ b/src/editor/core/draw/Strikeout.ts @@ -0,0 +1,24 @@ +import { IEditorOption } from "../../interface/Editor" + +export class Strikeout { + + private ctx: CanvasRenderingContext2D + private options: Required + + constructor(ctx: CanvasRenderingContext2D, options: Required) { + this.ctx = ctx + this.options = options + } + + render(x: number, y: number, width: number) { + const { strikeoutColor } = this.options + this.ctx.save() + this.ctx.strokeStyle = strikeoutColor + this.ctx.beginPath() + this.ctx.moveTo(x, y) + this.ctx.lineTo(x + width, y) + this.ctx.stroke() + this.ctx.restore() + } + +} \ No newline at end of file diff --git a/src/editor/core/draw/Underline.ts b/src/editor/core/draw/Underline.ts new file mode 100644 index 0000000..cb63f44 --- /dev/null +++ b/src/editor/core/draw/Underline.ts @@ -0,0 +1,24 @@ +import { IEditorOption } from "../../interface/Editor" + +export class Underline { + + private ctx: CanvasRenderingContext2D + private options: Required + + constructor(ctx: CanvasRenderingContext2D, options: Required) { + this.ctx = ctx + this.options = options + } + + render(x: number, y: number, width: number) { + const { underlineColor } = this.options + this.ctx.save() + this.ctx.strokeStyle = underlineColor + this.ctx.beginPath() + this.ctx.moveTo(x, y) + this.ctx.lineTo(x + width, y) + this.ctx.stroke() + this.ctx.restore() + } + +} \ No newline at end of file diff --git a/src/editor/index.ts b/src/editor/index.ts index 5bd51d6..646a4bd 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -15,6 +15,8 @@ export default class Editor { defaultType: 'TEXT', defaultFont: 'Yahei', defaultSize: 16, + underlineColor: '#000000', + strikeoutColor: '#FF0000', rangeAlpha: 0.6, rangeColor: '#AECBFA', searchMatchAlpha: 0.6, diff --git a/src/editor/interface/Editor.ts b/src/editor/interface/Editor.ts index d591681..3493398 100644 --- a/src/editor/interface/Editor.ts +++ b/src/editor/interface/Editor.ts @@ -2,6 +2,8 @@ export interface IEditorOption { defaultType?: string; defaultFont?: string; defaultSize?: number; + underlineColor?: string; + strikeoutColor?: string; rangeColor?: string; rangeAlpha?: number; searchMatchColor?: string; diff --git a/src/main.ts b/src/main.ts index f3b45e8..397c6e2 100644 --- a/src/main.ts +++ b/src/main.ts @@ -80,6 +80,14 @@ window.onload = function () { console.log('italic') instance.command.executeItalic() } + document.querySelector('.menu-item__underline')!.onclick = function () { + console.log('underline') + instance.command.executeUnderline() + } + document.querySelector('.menu-item__strikeout')!.onclick = function () { + console.log('strikeout') + instance.command.executeStrikeout() + } // 搜索、打印 const collspanDom = document.querySelector('.menu-item__search__collapse') diff --git a/src/style.css b/src/style.css index 2ede447..2957ecf 100644 --- a/src/style.css +++ b/src/style.css @@ -100,8 +100,8 @@ body { background-image: url('./assets/images/underline.svg'); } -.menu-item__deleteline i { - background-image: url('./assets/images/deleteline.svg'); +.menu-item__strikeout i { + background-image: url('./assets/images/strikeout.svg'); } .menu-item__color,