improve: font size setting api

src/editor/core/command/Command.ts

@@ -22,7 +22,7 @@ export class Command {
   private static applyPainterStyle: CommandAdapt['applyPainterStyle']
   private static format: CommandAdapt['format']
   private static font: CommandAdapt['font']
-  private static sizeSet: CommandAdapt['sizeSet']
+  private static size: CommandAdapt['size']
   private static sizeAdd: CommandAdapt['sizeAdd']
   private static sizeMinus: CommandAdapt['sizeMinus']
   private static bold: CommandAdapt['bold']
@@ -96,7 +96,7 @@ export class Command {
     Command.applyPainterStyle = adapt.applyPainterStyle.bind(adapt)
     Command.format = adapt.format.bind(adapt)
     Command.font = adapt.font.bind(adapt)
-    Command.sizeSet = adapt.sizeSet.bind(adapt)
+    Command.size = adapt.size.bind(adapt)
     Command.sizeAdd = adapt.sizeAdd.bind(adapt)
     Command.sizeMinus = adapt.sizeMinus.bind(adapt)
     Command.bold = adapt.bold.bind(adapt)
@@ -212,8 +212,8 @@ export class Command {
     return Command.font(payload)
   }
 
-  public executeSize(size: number) {
+  public executeSize(payload: number) {
-    return Command.sizeSet(size)
+    return Command.size(payload)
   }
 
   public executeSizeAdd() {

src/editor/core/command/CommandAdapt.ts

@@ -185,54 +185,70 @@ export class CommandAdapt {
     this.draw.render({ isSetCursor: false })
   }
 
-  public sizeSet(size: number) {
+  public size(payload: number) {
+    const { minSize, maxSize, defaultSize } = this.options
+    if (payload < minSize || payload > maxSize) return
     const isReadonly = this.draw.isReadonly()
     if (isReadonly) return
-    const selection = this.range.getSelection()
+    const selection = this.range.getTextLikeSelection()
-    if (!selection) return
+    if (!selection || !selection.length) return
-    const lessThanMaxSizeIndex = selection.findIndex(s => !s.size || s.size + 2 <= 72)
+    let isExistUpdate = false
-    if (!~lessThanMaxSizeIndex) return
     selection.forEach(el => {
-      if (size > 72) return
+      if ((!el.size && payload === defaultSize) || (el.size && el.size === payload)) return
-      el.size = size
+      el.size = payload
+      isExistUpdate = true
     })
-    this.draw.render({ isSetCursor: false })
+    if (isExistUpdate) {
+      this.draw.render({ isSetCursor: false })
+    }
   }
 
   public sizeAdd() {
     const isReadonly = this.draw.isReadonly()
     if (isReadonly) return
-    const selection = this.range.getSelection()
+    const selection = this.range.getTextLikeSelection()
-    if (!selection) return
+    if (!selection || !selection.length) return
-    const lessThanMaxSizeIndex = selection.findIndex(s => !s.size || s.size + 2 <= 72)
+    const { defaultSize, maxSize } = this.options
-    const { defaultSize } = this.options
+    let isExistUpdate = false
-    if (!~lessThanMaxSizeIndex) return
     selection.forEach(el => {
       if (!el.size) {
         el.size = defaultSize
       }
-      if (el.size + 2 > 72) return
+      if (el.size >= maxSize) return
-      el.size += 2
+      if (el.size + 2 > maxSize) {
+        el.size = maxSize
+      } else {
+        el.size += 2
+      }
+      isExistUpdate = true
     })
-    this.draw.render({ isSetCursor: false })
+    if (isExistUpdate) {
+      this.draw.render({ isSetCursor: false })
+    }
   }
 
   public sizeMinus() {
     const isReadonly = this.draw.isReadonly()
     if (isReadonly) return
-    const selection = this.range.getSelection()
+    const selection = this.range.getTextLikeSelection()
-    if (!selection) return
+    if (!selection || !selection.length) return
-    const greaterThanMaxSizeIndex = selection.findIndex(s => !s.size || s.size - 2 >= 8)
+    const { defaultSize, minSize } = this.options
-    if (!~greaterThanMaxSizeIndex) return
+    let isExistUpdate = false
-    const { defaultSize } = this.options
     selection.forEach(el => {
       if (!el.size) {
         el.size = defaultSize
       }
-      if (el.size - 2 < 8) return
+      if (el.size <= minSize) return
-      el.size -= 2
+      if (el.size - 2 < minSize) {
+        el.size = minSize
+      } else {
+        el.size -= 2
+      }
+      isExistUpdate = true
     })
-    this.draw.render({ isSetCursor: false })
+    if (isExistUpdate) {
+      this.draw.render({ isSetCursor: false })
+    }
   }
 
   public bold() {

src/editor/core/range/RangeManager.ts

@@ -1,5 +1,6 @@
 import { ElementType } from '../..'
 import { ZERO } from '../../dataset/constant/Common'
+import { TEXTLIKE_ELEMENT_TYPE } from '../../dataset/constant/Element'
 import { ControlComponent } from '../../dataset/enum/Control'
 import { IEditorOption } from '../../interface/Editor'
 import { IElement } from '../../interface/Element'
@@ -45,6 +46,12 @@ export class RangeManager {
     return elementList.slice(startIndex + 1, endIndex + 1)
   }
 
+  public getTextLikeSelection(): IElement[] | null {
+    const selection = this.getSelection()
+    if (!selection) return null
+    return selection.filter(s => !s.type || TEXTLIKE_ELEMENT_TYPE.includes(s.type))
+  }
+
   // 获取光标所选位置行信息
   public getRangeRow(): RangeRowMap | null {
     const { startIndex, endIndex } = this.range

src/editor/index.ts

@@ -66,6 +66,8 @@ export default class Editor {
       defaultType: 'TEXT',
       defaultFont: 'Yahei',
       defaultSize: 16,
+      minSize: 5,
+      maxSize: 72,
       defaultRowMargin: 1,
       defaultBasicRowMarginHeight: 8,
       defaultTabWidth: 32,

src/editor/interface/Editor.ts

@@ -18,6 +18,8 @@ export interface IEditorOption {
   defaultType?: string;
   defaultFont?: string;
   defaultSize?: number;
+  minSize?: number;
+  maxSize?: number;
   defaultBasicRowMarginHeight?: number;
   defaultRowMargin?: number;
   defaultTabWidth?: number;

src/main.ts

@@ -91,8 +91,7 @@ window.onload = function () {
   }
   sizeOptionDom.onclick = function (evt) {
     const li = evt.target as HTMLLIElement
-    const size = Number(li.dataset.size!) as number
+    instance.command.executeSize(Number(li.dataset.size!))
-    instance.command.executeSize(size)
   }
 
   const sizeAddDom = document.querySelector<HTMLDivElement>('.menu-item__size-add')!
@@ -1003,6 +1002,8 @@ window.onload = function () {
     if (curSizeDom) {
       sizeSelectDom.innerText = curSizeDom.innerText
       curSizeDom.classList.add('active')
+    } else {
+      sizeSelectDom.innerText = `${payload.size}`
     }
     payload.bold ? boldDom.classList.add('active') : boldDom.classList.remove('active')
     payload.italic ? italicDom.classList.add('active') : italicDom.classList.remove('active')

src/style.css

@@ -156,16 +156,19 @@ ul {
   background-color: #e2e6ed;
 }
 
-.menu-item .menu-item__font,.menu-item .menu-item__size {
+.menu-item .menu-item__font {
   width: 65px;
   position: relative;
 }
 
-.menu-item .menu-item__size{
+.menu-item .menu-item__size {
+  width: 50px;
   text-align: center;
+  position: relative;
 }
 
-.menu-item__font .select,.menu-item__size .select {
+.menu-item__font .select,
+.menu-item__size .select {
   width: 100%;
   height: 100%;
 }