From 59fd84c94c2cba1227f207b559bd18fd2fa50c95 Mon Sep 17 00:00:00 2001
From: Hufe921 <huangyunfeihufe@hotmail.com>
Date: Wed, 17 Nov 2021 20:41:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=AD=97=E4=BD=93=E6=96=9C=E4=BD=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/editor/core/command/Command.ts      |  6 ++++++
 src/editor/core/command/CommandAdapt.ts | 10 ++++++++++
 src/editor/core/draw/Draw.ts            | 10 +++++++---
 src/main.ts                             |  4 ++++
 4 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/editor/core/command/Command.ts b/src/editor/core/command/Command.ts
index 1ae0d0a..9391095 100644
--- a/src/editor/core/command/Command.ts
+++ b/src/editor/core/command/Command.ts
@@ -9,6 +9,7 @@ export class Command {
   private static sizeAdd: Function
   private static sizeMinus: Function
   private static bold: Function
+  private static italic: Function
   private static search: Function
   private static print: Function
 
@@ -20,6 +21,7 @@ export class Command {
     Command.sizeAdd = adapt.sizeAdd.bind(adapt)
     Command.sizeMinus = adapt.sizeMinus.bind(adapt)
     Command.bold = adapt.bold.bind(adapt)
+    Command.italic = adapt.italic.bind(adapt)
     Command.search = adapt.search.bind(adapt)
     Command.print = adapt.print.bind(adapt)
   }
@@ -54,6 +56,10 @@ export class Command {
     return Command.bold()
   }
 
+  public executeItalic() {
+    return Command.italic()
+  }
+
   // 搜索、打印
   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 1b154f7..a7c3f6f 100644
--- a/src/editor/core/command/CommandAdapt.ts
+++ b/src/editor/core/command/CommandAdapt.ts
@@ -100,6 +100,16 @@ export class CommandAdapt {
     this.draw.render({ isSetCursor: false })
   }
 
+  public italic() {
+    const selection = this.range.getSelection()
+    if (!selection) return
+    const noItalicIndex = selection.findIndex(s => !s.italic)
+    selection.forEach(el => {
+      el.italic = !!~noItalicIndex
+    })
+    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 190eff6..148e12f 100644
--- a/src/editor/core/draw/Draw.ts
+++ b/src/editor/core/draw/Draw.ts
@@ -108,6 +108,11 @@ export class Draw {
     this.searchMatchList = payload
   }
 
+  private getFont(el: IElement): string {
+    const { defaultSize, defaultFont } = this.options
+    return `${el.italic ? 'italic ' : ''}${el.bold ? 'bold ' : ''}${el.size || defaultSize}px ${el.font || defaultFont}`
+  }
+
   public render(payload?: IDrawOption) {
     let { curIndex, isSubmitHistory = true, isSetCursor = true } = payload || {}
     // 清除光标
@@ -116,7 +121,6 @@ export class Draw {
     this.position.setPositionList([])
     const positionList = this.position.getPositionList()
     // 基础信息
-    const { defaultSize, defaultFont } = this.options
     const canvasRect = this.canvas.getBoundingClientRect()
     // 绘制背景
     this.background.render(canvasRect)
@@ -140,7 +144,7 @@ export class Draw {
       this.ctx.save()
       const curRow: IRow = rowList[rowList.length - 1]
       const element = this.elementList[i]
-      this.ctx.font = `${element.bold ? 'bold ' : ''}${element.size || defaultSize}px ${element.font || defaultFont}`
+      this.ctx.font = this.getFont(element)
       const metrics = this.ctx.measureText(element.value)
       const width = metrics.width
       const fontBoundingBoxAscent = metrics.fontBoundingBoxAscent
@@ -174,7 +178,7 @@ export class Draw {
         this.ctx.save()
         const element = curRow.elementList[j]
         const metrics = element.metrics
-        this.ctx.font = `${element.bold ? 'bold ' : ''}${element.size || defaultSize}px ${element.font || defaultFont}`
+        this.ctx.font = this.getFont(element)
         if (element.color) {
           this.ctx.fillStyle = element.color
         }
diff --git a/src/main.ts b/src/main.ts
index 4d2c5bb..f3b45e8 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -76,6 +76,10 @@ window.onload = function () {
     console.log('bold')
     instance.command.executeBold()
   }
+  document.querySelector<HTMLDivElement>('.menu-item__italic')!.onclick = function () {
+    console.log('italic')
+    instance.command.executeItalic()
+  }
 
   // 搜索、打印
   const collspanDom = document.querySelector<HTMLDivElement>('.menu-item__search__collapse')