feat:字体变大变小

src/editor/core/command/Command.ts

@@ -6,6 +6,8 @@ export class Command {
   private static redo: Function
   private static painter: Function
   private static format: Function
+  private static sizeAdd: Function
+  private static sizeMinus: Function
   private static bold: Function
   private static search: Function
   private static print: Function
@@ -15,6 +17,8 @@ export class Command {
     Command.redo = adapt.redo.bind(adapt)
     Command.painter = adapt.painter.bind(adapt)
     Command.format = adapt.format.bind(adapt)
+    Command.sizeAdd = adapt.sizeAdd.bind(adapt)
+    Command.sizeMinus = adapt.sizeMinus.bind(adapt)
     Command.bold = adapt.bold.bind(adapt)
     Command.search = adapt.search.bind(adapt)
     Command.print = adapt.print.bind(adapt)
@@ -38,6 +42,14 @@ export class Command {
   }
 
   // 字体变大、字体变小、加粗、斜体、下划线、删除线、字体颜色、背景色
+  public executeSizeAdd() {
+    return Command.sizeAdd()
+  }
+
+  public executeSizeMinus() {
+    return Command.sizeMinus()
+  }
+
   public executeBold() {
     return Command.bold()
   }

src/editor/core/command/CommandAdapt.ts

@@ -1,4 +1,5 @@
 import { ElementStyleKey } from "../../dataset/enum/ElementStyle"
+import { IEditorOption } from "../../interface/Editor"
 import { IElementStyle } from "../../interface/Element"
 import { printImageBase64 } from "../../utils/print"
 import { Draw } from "../draw/Draw"
@@ -10,11 +11,13 @@ export class CommandAdapt {
   private draw: Draw
   private range: RangeManager
   private historyManager: HistoryManager
+  private options: Required<IEditorOption>
 
   constructor(draw: Draw) {
     this.draw = draw
     this.range = draw.getRange()
     this.historyManager = draw.getHistoryManager()
+    this.options = draw.getOptions()
   }
 
   public undo() {
@@ -55,11 +58,44 @@ export class CommandAdapt {
     this.draw.render({ isSetCursor: false })
   }
 
+  public sizeAdd() {
+    const selection = this.range.getSelection()
+    if (!selection) return
+    const lessThanMaxSizeIndex = selection.findIndex(s => !s.size || s.size + 2 <= 72)
+    const { defaultSize } = this.options
+    if (!~lessThanMaxSizeIndex) return
+    selection.forEach(el => {
+      if (!el.size) {
+        el.size = defaultSize
+      }
+      if (el.size + 2 > 72) return
+      el.size += 2
+    })
+    this.draw.render({ isSetCursor: false })
+  }
+
+  public sizeMinus() {
+    const selection = this.range.getSelection()
+    if (!selection) return
+    const greaterThanMaxSizeIndex = selection.findIndex(s => !s.size || s.size - 2 >= 8)
+    if (!~greaterThanMaxSizeIndex) return
+    const { defaultSize } = this.options
+    selection.forEach(el => {
+      if (!el.size) {
+        el.size = defaultSize
+      }
+      if (el.size - 2 < 8) return
+      el.size -= 2
+    })
+    this.draw.render({ isSetCursor: false })
+  }
+
   public bold() {
     const selection = this.range.getSelection()
     if (!selection) return
+    const noBoldIndex = selection.findIndex(s => !s.bold)
     selection.forEach(el => {
-      el.bold = true
+      el.bold = !!~noBoldIndex
     })
     this.draw.render({ isSetCursor: false })
   }

src/editor/core/draw/Draw.ts

@@ -41,7 +41,7 @@ export class Draw {
 
     this.historyManager = new HistoryManager()
     this.position = new Position(this)
-    this.range = new RangeManager(ctx, elementList, options)
+    this.range = new RangeManager(ctx, options, this)
     this.margin = new Margin(ctx, options)
     this.background = new Background(ctx)
     this.search = new Search(ctx, options, this)
@@ -57,6 +57,10 @@ export class Draw {
     this.searchMatchList = null
   }
 
+  public getOptions(): Required<IEditorOption> {
+    return this.options
+  }
+
   public getHistoryManager(): HistoryManager {
     return this.historyManager
   }

src/editor/core/range/RangeManager.ts

@@ -1,18 +1,19 @@
 import { IEditorOption } from "../../interface/Editor"
 import { IElement } from "../../interface/Element"
 import { IRange } from "../../interface/Range"
+import { Draw } from "../draw/Draw"
 
 export class RangeManager {
 
   private ctx: CanvasRenderingContext2D
-  private elementList: IElement[]
   private options: Required<IEditorOption>
   private range: IRange
+  private draw: Draw
 
-  constructor(ctx: CanvasRenderingContext2D, elementList: IElement[], options: Required<IEditorOption>) {
+  constructor(ctx: CanvasRenderingContext2D, options: Required<IEditorOption>, draw: Draw) {
     this.ctx = ctx
-    this.elementList = elementList
     this.options = options
+    this.draw = draw
     this.range = {
       startIndex: 0,
       endIndex: 0
@@ -26,7 +27,8 @@ export class RangeManager {
   public getSelection(): IElement[] | null {
     const { startIndex, endIndex } = this.range
     if (startIndex === endIndex) return null
-    return this.elementList.slice(startIndex + 1, endIndex + 1)
+    const elementList = this.draw.getElementList()
+    return elementList.slice(startIndex + 1, endIndex + 1)
   }
 
   public setRange(startIndex: number, endIndex: number) {

src/main.ts

@@ -64,6 +64,14 @@ window.onload = function () {
   }
 
   // 字体变大、字体变小、加粗、斜体、下划线、删除线、字体颜色、背景色
+  document.querySelector<HTMLDivElement>('.menu-item__size-add')!.onclick = function () {
+    console.log('size-add')
+    instance.command.executeSizeAdd()
+  }
+  document.querySelector<HTMLDivElement>('.menu-item__size-minus')!.onclick = function () {
+    console.log('size-minus')
+    instance.command.executeSizeMinus()
+  }
   document.querySelector<HTMLDivElement>('.menu-item__bold')!.onclick = function () {
     console.log('bold')
     instance.command.executeBold()