Merge pull request #82 from Hufe921/feature/shortcut

feat:strikeout,superscript,subscript shortcut key

index.html

@@ -54,13 +54,13 @@
         <div class="menu-item__underline" title="下划线(Ctrl+U)">
           <i></i>
         </div>
-        <div class="menu-item__strikeout" title="删除线">
+        <div class="menu-item__strikeout" title="删除线(Ctrl+Shift+X)">
           <i></i>
         </div>
-        <div class="menu-item__superscript" title="上标">
+        <div class="menu-item__superscript" title="上标(Ctrl+Shift+.)">
           <i></i>
         </div>
-        <div class="menu-item__subscript" title="下标">
+        <div class="menu-item__subscript" title="下标(Ctrl+Shift+,)">
           <i></i>
         </div>
         <div class="menu-item__color" title="字体颜色">

src/editor/core/command/CommandAdapt.ts

@@ -203,65 +203,15 @@ export class CommandAdapt {
   }
 
   public strikeout() {
-    const isReadonly = this.draw.isReadonly()
+    this.canvasEvent.strikeout()
-    if (isReadonly) return
-    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 superscript() {
-    const isReadonly = this.draw.isReadonly()
+    this.canvasEvent.superscript()
-    if (isReadonly) return
-    const activeControl = this.control.getActiveControl()
-    if (activeControl) return
-    const selection = this.range.getSelection()
-    if (!selection) return
-    const superscriptIndex = selection.findIndex(s => s.type === ElementType.SUPERSCRIPT)
-    selection.forEach(el => {
-      // 取消上标
-      if (~superscriptIndex) {
-        if (el.type === ElementType.SUPERSCRIPT) {
-          el.type = ElementType.TEXT
-          delete el.actualSize
-        }
-      } else {
-        // 设置上标
-        if (!el.type || el.type === ElementType.TEXT || el.type === ElementType.SUBSCRIPT) {
-          el.type = ElementType.SUPERSCRIPT
-        }
-      }
-    })
-    this.draw.render({ isSetCursor: false })
   }
 
   public subscript() {
-    const isReadonly = this.draw.isReadonly()
+    this.canvasEvent.subscript()
-    if (isReadonly) return
-    const activeControl = this.control.getActiveControl()
-    if (activeControl) return
-    const selection = this.range.getSelection()
-    if (!selection) return
-    const subscriptIndex = selection.findIndex(s => s.type === ElementType.SUBSCRIPT)
-    selection.forEach(el => {
-      // 取消下标
-      if (~subscriptIndex) {
-        if (el.type === ElementType.SUBSCRIPT) {
-          el.type = ElementType.TEXT
-          delete el.actualSize
-        }
-      } else {
-        // 设置下标
-        if (!el.type || el.type === ElementType.TEXT || el.type === ElementType.SUPERSCRIPT) {
-          el.type = ElementType.SUBSCRIPT
-        }
-      }
-    })
-    this.draw.render({ isSetCursor: false })
   }
 
   public color(payload: string) {

src/editor/core/event/CanvasEvent.ts

@@ -315,7 +315,8 @@ export class CanvasEvent {
     // 当前激活控件
     const isPartRangeInControlOutside = this.control.isPartRangeInControlOutside()
     const activeControl = this.control.getActiveControl()
-    if (evt.key === KeyMap.Backspace) {
+    const evtKey = evt.key.toLocaleLowerCase()
+    if (evtKey === KeyMap.Backspace) {
       if (isReadonly || isPartRangeInControlOutside) return
       let curIndex: number
       if (activeControl) {
@@ -335,7 +336,7 @@ export class CanvasEvent {
       }
       this.range.setRange(curIndex, curIndex)
       this.draw.render({ curIndex })
-    } else if (evt.key === KeyMap.Delete) {
+    } else if (evtKey === KeyMap.Delete) {
       if (isReadonly || isPartRangeInControlOutside) return
       let curIndex: number
       if (activeControl) {
@@ -352,7 +353,7 @@ export class CanvasEvent {
       }
       this.range.setRange(curIndex, curIndex)
       this.draw.render({ curIndex })
-    } else if (evt.key === KeyMap.Enter) {
+    } else if (evtKey === KeyMap.Enter) {
       if (isReadonly || isPartRangeInControlOutside) return
       // 表格需要上下文信息
       const positionContext = this.position.getPositionContext()
@@ -379,7 +380,7 @@ export class CanvasEvent {
       this.range.setRange(curIndex, curIndex)
       this.draw.render({ curIndex })
       evt.preventDefault()
-    } else if (evt.key === KeyMap.Left) {
+    } else if (evtKey === KeyMap.Left) {
       if (isReadonly) return
       if (index > 0) {
         const curIndex = index - 1
@@ -390,7 +391,7 @@ export class CanvasEvent {
           isComputeRowList: false
         })
       }
-    } else if (evt.key === KeyMap.Right) {
+    } else if (evtKey === KeyMap.Right) {
       if (isReadonly) return
       if (index < position.length - 1) {
         const curIndex = index + 1
@@ -401,12 +402,12 @@ export class CanvasEvent {
           isComputeRowList: false
         })
       }
-    } else if (evt.key === KeyMap.Up || evt.key === KeyMap.Down) {
+    } else if (evtKey === KeyMap.Up || evtKey === KeyMap.Down) {
       if (isReadonly) return
       const { rowNo, index, coordinate: { leftTop, rightTop } } = cursorPosition
-      if ((evt.key === KeyMap.Up && rowNo !== 0) || (evt.key === KeyMap.Down && rowNo !== this.draw.getRowCount())) {
+      if ((evtKey === KeyMap.Up && rowNo !== 0) || (evtKey === KeyMap.Down && rowNo !== this.draw.getRowCount())) {
         // 下一个光标点所在行位置集合
-        const probablePosition = evt.key === KeyMap.Up
+        const probablePosition = evtKey === KeyMap.Up
           ? position.slice(0, index).filter(p => p.rowNo === rowNo - 1)
           : position.slice(index, position.length - 1).filter(p => p.rowNo === rowNo + 1)
         // 查找与当前位置元素点交叉最多的位置
@@ -443,62 +444,60 @@ export class CanvasEvent {
           isComputeRowList: false
         })
       }
-    } else if (evt.ctrlKey && evt.key === KeyMap.Z) {
+    } else if (evt.ctrlKey && evtKey === KeyMap.Z) {
       if (isReadonly) return
       this.historyManager.undo()
       evt.preventDefault()
-    } else if (evt.ctrlKey && evt.key === KeyMap.Y) {
+    } else if (evt.ctrlKey && evtKey === KeyMap.Y) {
       if (isReadonly) return
       this.historyManager.redo()
       evt.preventDefault()
-    } else if (evt.ctrlKey && evt.key === KeyMap.C) {
+    } else if (evt.ctrlKey && evtKey === KeyMap.C) {
       this.copy()
-    } else if (evt.ctrlKey && evt.key === KeyMap.X) {
+    } else if (evt.ctrlKey && evtKey === KeyMap.X) {
       if (isReadonly) return
-      this.cut()
+      if (evt.shiftKey) {
-    } else if (evt.ctrlKey && evt.key === KeyMap.A) {
+        this.strikeout()
+      } else {
+        this.cut()
+      }
+    } else if (evt.ctrlKey && evtKey === KeyMap.A) {
       this.selectAll()
-    } else if (evt.ctrlKey && evt.key === KeyMap.S) {
+    } else if (evt.ctrlKey && evtKey === KeyMap.S) {
       if (isReadonly) return
       if (this.listener.saved) {
         this.listener.saved(this.draw.getValue())
       }
       evt.preventDefault()
-    } else if (evt.ctrlKey && evt.key === KeyMap.LEFT_BRACKET) {
+    } else if (evt.ctrlKey && evtKey === KeyMap.LEFT_BRACKET) {
       this.sizeAdd()
-      evt.preventDefault()
+    } else if (evt.ctrlKey && evtKey === KeyMap.RIGHT_BRACKET) {
-    } else if (evt.ctrlKey && evt.key === KeyMap.RIGHT_BRACKET) {
       this.sizeMinus()
-      evt.preventDefault()
+    } else if (evt.ctrlKey && evtKey === KeyMap.B) {
-    } else if (evt.ctrlKey && evt.key === KeyMap.B) {
       this.bold()
-      evt.preventDefault()
+    } else if (evt.ctrlKey && evtKey === KeyMap.I) {
-    } else if (evt.ctrlKey && evt.key === KeyMap.I) {
       this.italic()
-      evt.preventDefault()
+    } else if (evt.ctrlKey && evtKey === KeyMap.U) {
-    } else if (evt.ctrlKey && evt.key === KeyMap.U) {
       this.underline()
-      evt.preventDefault()
+    } else if (evt.ctrlKey && evt.shiftKey && evtKey === KeyMap.RIGHT_ANGLE_BRACKET) {
-    } else if (evt.ctrlKey && evt.key === KeyMap.L) {
+      this.superscript()
+    } else if (evt.ctrlKey && evt.shiftKey && evtKey === KeyMap.LEFT_ANGLE_BRACKET) {
+      this.subscript()
+    } else if (evt.ctrlKey && evtKey === KeyMap.L) {
       this.rowFlex(RowFlex.LEFT)
-      evt.preventDefault()
+    } else if (evt.ctrlKey && evtKey === KeyMap.E) {
-    } else if (evt.ctrlKey && evt.key === KeyMap.E) {
       this.rowFlex(RowFlex.CENTER)
-      evt.preventDefault()
+    } else if (evt.ctrlKey && evtKey === KeyMap.R) {
-    } else if (evt.ctrlKey && evt.key === KeyMap.R) {
       this.rowFlex(RowFlex.RIGHT)
-      evt.preventDefault()
+    } else if (evt.ctrlKey && evtKey === KeyMap.J) {
-    } else if (evt.ctrlKey && evt.key === KeyMap.J) {
       this.rowFlex(RowFlex.ALIGNMENT)
-      evt.preventDefault()
+    } else if (evtKey === KeyMap.ESC) {
-    } else if (evt.key === KeyMap.ESC) {
       this.clearPainterStyle()
-    } else if (evt.key === KeyMap.TAB) {
+    } else if (evtKey === KeyMap.TAB) {
       this.draw.insertElementList([{
         type: ElementType.TAB,
         value: ''
       }])
-      evt.preventDefault()
     }
   }
 
@@ -769,6 +768,68 @@ export class CanvasEvent {
     this.draw.render({ isSetCursor: false })
   }
 
+  public strikeout() {
+    const isReadonly = this.draw.isReadonly()
+    if (isReadonly) return
+    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 superscript() {
+    const isReadonly = this.draw.isReadonly()
+    if (isReadonly) return
+    const activeControl = this.control.getActiveControl()
+    if (activeControl) return
+    const selection = this.range.getSelection()
+    if (!selection) return
+    const superscriptIndex = selection.findIndex(s => s.type === ElementType.SUPERSCRIPT)
+    selection.forEach(el => {
+      // 取消上标
+      if (~superscriptIndex) {
+        if (el.type === ElementType.SUPERSCRIPT) {
+          el.type = ElementType.TEXT
+          delete el.actualSize
+        }
+      } else {
+        // 设置上标
+        if (!el.type || el.type === ElementType.TEXT || el.type === ElementType.SUBSCRIPT) {
+          el.type = ElementType.SUPERSCRIPT
+        }
+      }
+    })
+    this.draw.render({ isSetCursor: false })
+  }
+
+  public subscript() {
+    const isReadonly = this.draw.isReadonly()
+    if (isReadonly) return
+    const activeControl = this.control.getActiveControl()
+    if (activeControl) return
+    const selection = this.range.getSelection()
+    if (!selection) return
+    const subscriptIndex = selection.findIndex(s => s.type === ElementType.SUBSCRIPT)
+    selection.forEach(el => {
+      // 取消下标
+      if (~subscriptIndex) {
+        if (el.type === ElementType.SUBSCRIPT) {
+          el.type = ElementType.TEXT
+          delete el.actualSize
+        }
+      } else {
+        // 设置下标
+        if (!el.type || el.type === ElementType.TEXT || el.type === ElementType.SUPERSCRIPT) {
+          el.type = ElementType.SUBSCRIPT
+        }
+      }
+    })
+    this.draw.render({ isSetCursor: false })
+  }
+
   public rowFlex(payload: RowFlex) {
     const isReadonly = this.draw.isReadonly()
     if (isReadonly) return

src/editor/dataset/enum/KeyMap.ts

@@ -10,6 +10,10 @@ export enum KeyMap {
   TAB = 'Tab',
   LEFT_BRACKET = '[',
   RIGHT_BRACKET = ']',
+  COMMA = ',',
+  PERIOD = '.',
+  LEFT_ANGLE_BRACKET = '<',
+  RIGHT_ANGLE_BRACKET = '>',
   A = 'a',
   B = 'b',
   C = 'c',