feat:字体颜色、背景色

index.html

@@ -48,10 +48,12 @@
         <div class="menu-item__color">
           <i></i>
           <span></span>
+          <input type="color" id="color" />
         </div>
         <div class="menu-item__highlight">
           <i></i>
           <span></span>
+          <input type="color" id="highlight">
         </div>
       </div>
       <div class="menu-divider"></div>

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)

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()

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()

src/editor/core/draw/Highlight.ts

@@ -0,0 +1,22 @@
+import { IEditorOption } from "../../interface/Editor"
+
+export class Highlight {
+
+  private ctx: CanvasRenderingContext2D
+  private options: Required<IEditorOption>
+
+  constructor(ctx: CanvasRenderingContext2D, options: Required<IEditorOption>) {
+    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()
+  }
+
+}

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'

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],

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]

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;

src/main.ts

@@ -88,6 +88,22 @@ window.onload = function () {
     console.log('strikeout')
     instance.command.executeStrikeout()
   }
+  const colorDom = document.querySelector<HTMLInputElement>('#color')
+  colorDom!.onchange = function () {
+    instance.command.executeColor(colorDom!.value)
+  }
+  document.querySelector<HTMLDivElement>('.menu-item__color')!.onclick = function () {
+    console.log('color')
+    colorDom?.click()
+  }
+  const highlightDom = document.querySelector<HTMLInputElement>('#highlight')
+  highlightDom!.onchange = function () {
+    instance.command.executeHighlight(highlightDom!.value)
+  }
+  document.querySelector<HTMLDivElement>('.menu-item__highlight')!.onclick = function () {
+    console.log('highlight')
+    highlightDom?.click()
+  }
 
   // 搜索、打印
   const collspanDom = document.querySelector<HTMLDivElement>('.menu-item__search__collapse')

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');
 }