feat:字体斜体

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)

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

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
         }

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