From 091a70b2f66e2e28a8b6c07d2415c2ec8852a803 Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Wed, 17 Nov 2021 21:55:54 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E5=AD=97=E4=BD=93=E9=A2=9C=E8=89=B2?= =?UTF-8?q?=E3=80=81=E8=83=8C=E6=99=AF=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 ++ src/editor/core/command/Command.ts | 12 ++++++++++++ src/editor/core/command/CommandAdapt.ts | 20 +++++++++++++++++++- src/editor/core/draw/Draw.ts | 7 +++++++ src/editor/core/draw/Highlight.ts | 22 ++++++++++++++++++++++ src/editor/dataset/enum/ElementStyle.ts | 1 + src/editor/index.ts | 1 + src/editor/interface/Editor.ts | 1 + src/editor/interface/Element.ts | 1 + src/main.ts | 16 ++++++++++++++++ src/style.css | 9 +++++++++ 11 files changed, 91 insertions(+), 1 deletion(-) create mode 100644 src/editor/core/draw/Highlight.ts diff --git a/index.html b/index.html index 1303bb4..0f14722 100644 --- a/index.html +++ b/index.html @@ -48,10 +48,12 @@
+
+
diff --git a/src/editor/core/command/Command.ts b/src/editor/core/command/Command.ts index c955bae..7801381 100644 --- a/src/editor/core/command/Command.ts +++ b/src/editor/core/command/Command.ts @@ -12,6 +12,8 @@ export class Command { private static italic: Function private static underline: Function private static strikeout: Function + private static color: Function + private static highlight: Function private static search: Function private static print: Function @@ -26,6 +28,8 @@ export class Command { Command.italic = adapt.italic.bind(adapt) Command.underline = adapt.underline.bind(adapt) Command.strikeout = adapt.strikeout.bind(adapt) + Command.color = adapt.color.bind(adapt) + Command.highlight = adapt.highlight.bind(adapt) Command.search = adapt.search.bind(adapt) Command.print = adapt.print.bind(adapt) } @@ -72,6 +76,14 @@ export class Command { return Command.strikeout() } + public executeColor(payload: string) { + return Command.color(payload) + } + + public executeHighlight(payload: string) { + return Command.highlight(payload) + } + // 搜索、打印 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 31f6a9a..231baba 100644 --- a/src/editor/core/command/CommandAdapt.ts +++ b/src/editor/core/command/CommandAdapt.ts @@ -33,7 +33,7 @@ export class CommandAdapt { if (!selection) return const painterStyle: IElementStyle = {} selection.forEach(s => { - const painterStyleKeys = ['bold', 'color', 'font', 'size', 'italic', 'underline', 'strikeout'] + const painterStyleKeys = ['bold', 'color', 'highlight', 'font', 'size', 'italic', 'underline', 'strikeout'] painterStyleKeys.forEach(p => { const key = p as keyof typeof ElementStyleKey if (painterStyle[key] === undefined) { @@ -130,6 +130,24 @@ export class CommandAdapt { this.draw.render({ isSetCursor: false }) } + public color(payload: string) { + const selection = this.range.getSelection() + if (!selection) return + selection.forEach(el => { + el.color = payload + }) + this.draw.render({ isSetCursor: false }) + } + + public highlight(payload: string) { + const selection = this.range.getSelection() + if (!selection) return + selection.forEach(el => { + el.highlight = payload + }) + 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 f18358a..d68c997 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -11,6 +11,7 @@ import { HistoryManager } from "../history/HistoryManager" import { Position } from "../position/Position" import { RangeManager } from "../range/RangeManager" import { Background } from "./Background" +import { Highlight } from "./Highlight" import { Margin } from "./Margin" import { Search } from "./Search" import { Strikeout } from "./Strikeout" @@ -31,6 +32,7 @@ export class Draw { private search: Search private underline: Underline private strikeout: Strikeout + private highlight: Highlight private historyManager: HistoryManager private rowCount: number @@ -51,6 +53,7 @@ export class Draw { this.search = new Search(ctx, options, this) this.underline = new Underline(ctx, options) this.strikeout = new Strikeout(ctx, options) + this.highlight = new Highlight(ctx, options) const canvasEvent = new CanvasEvent(canvas, this) this.cursor = new Cursor(canvas, this, canvasEvent) @@ -218,6 +221,10 @@ export class Draw { if (element.strikeout) { this.strikeout.render(x, y + curRow.height / 2, metrics.width) } + // 文本高亮 + if (element.highlight) { + this.highlight.render(element.highlight, x, y, metrics.width, curRow.height) + } index++ x += metrics.width this.ctx.restore() diff --git a/src/editor/core/draw/Highlight.ts b/src/editor/core/draw/Highlight.ts new file mode 100644 index 0000000..9d29669 --- /dev/null +++ b/src/editor/core/draw/Highlight.ts @@ -0,0 +1,22 @@ +import { IEditorOption } from "../../interface/Editor" + +export class Highlight { + + private ctx: CanvasRenderingContext2D + private options: Required + + constructor(ctx: CanvasRenderingContext2D, options: Required) { + this.ctx = ctx + this.options = options + } + + render(color: string, x: number, y: number, width: number, height: number) { + const { highlightAlpha } = this.options + this.ctx.save() + this.ctx.globalAlpha = highlightAlpha + this.ctx.fillStyle = color + this.ctx.fillRect(x, y, width, height) + this.ctx.restore() + } + +} \ No newline at end of file diff --git a/src/editor/dataset/enum/ElementStyle.ts b/src/editor/dataset/enum/ElementStyle.ts index 294852a..89444f7 100644 --- a/src/editor/dataset/enum/ElementStyle.ts +++ b/src/editor/dataset/enum/ElementStyle.ts @@ -5,6 +5,7 @@ export enum ElementStyleKey { height = 'height', bold = 'bold', color = 'color', + highlight = 'highlight', italic = 'italic', underline = 'underline', strikeout = 'strikeout' diff --git a/src/editor/index.ts b/src/editor/index.ts index 646a4bd..830e35a 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -21,6 +21,7 @@ export default class Editor { rangeColor: '#AECBFA', searchMatchAlpha: 0.6, searchMatchColor: '#FFFF00', + highlightAlpha: 0.6, marginIndicatorSize: 35, marginIndicatorColor: '#BABABA', margins: [100, 120, 100, 120], diff --git a/src/editor/interface/Editor.ts b/src/editor/interface/Editor.ts index 3493398..65e7123 100644 --- a/src/editor/interface/Editor.ts +++ b/src/editor/interface/Editor.ts @@ -8,6 +8,7 @@ export interface IEditorOption { rangeAlpha?: number; searchMatchColor?: string; searchMatchAlpha?: number; + highlightAlpha?: number; marginIndicatorSize?: number; marginIndicatorColor?: string, margins?: [top: number, right: number, bootom: number, left: number] diff --git a/src/editor/interface/Element.ts b/src/editor/interface/Element.ts index 77e1fe3..e40ad41 100644 --- a/src/editor/interface/Element.ts +++ b/src/editor/interface/Element.ts @@ -5,6 +5,7 @@ export interface IElementStyle { height?: number; bold?: boolean; color?: string; + highlight?: string; italic?: boolean; underline?: boolean; strikeout?: boolean; diff --git a/src/main.ts b/src/main.ts index 397c6e2..da53f38 100644 --- a/src/main.ts +++ b/src/main.ts @@ -88,6 +88,22 @@ window.onload = function () { console.log('strikeout') instance.command.executeStrikeout() } + const colorDom = document.querySelector('#color') + colorDom!.onchange = function () { + instance.command.executeColor(colorDom!.value) + } + document.querySelector('.menu-item__color')!.onclick = function () { + console.log('color') + colorDom?.click() + } + const highlightDom = document.querySelector('#highlight') + highlightDom!.onchange = function () { + instance.command.executeHighlight(highlightDom!.value) + } + document.querySelector('.menu-item__highlight')!.onclick = function () { + console.log('highlight') + highlightDom?.click() + } // 搜索、打印 const collspanDom = document.querySelector('.menu-item__search__collapse') diff --git a/src/style.css b/src/style.css index 2957ecf..8e4c116 100644 --- a/src/style.css +++ b/src/style.css @@ -110,6 +110,15 @@ body { flex-direction: column; } +.menu-item__color #color, +.menu-item__highlight #highlight { + width: 1px; + height: 1px; + visibility: hidden; + outline: none; + appearance: none; +} + .menu-item__color i { background-image: url('./assets/images/color.svg'); }