feat:下划线、删除线

index.html

@@ -42,7 +42,7 @@
         <div class="menu-item__underline">
           <i></i>
         </div>
-        <div class="menu-item__deleteline">
+        <div class="menu-item__strikeout">
           <i></i>
         </div>
         <div class="menu-item__color">

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)

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

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

src/editor/core/draw/Strikeout.ts

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

src/editor/core/draw/Underline.ts

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

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,

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;

src/main.ts

@@ -80,6 +80,14 @@ window.onload = function () {
     console.log('italic')
     instance.command.executeItalic()
   }
+  document.querySelector<HTMLDivElement>('.menu-item__underline')!.onclick = function () {
+    console.log('underline')
+    instance.command.executeUnderline()
+  }
+  document.querySelector<HTMLDivElement>('.menu-item__strikeout')!.onclick = function () {
+    console.log('strikeout')
+    instance.command.executeStrikeout()
+  }
 
   // 搜索、打印
   const collspanDom = document.querySelector<HTMLDivElement>('.menu-item__search__collapse')

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,