Merge pull request #81 from Hufe921/feature/shortcut

feat:add richtext shortcut key

index.html

@@ -39,19 +39,19 @@
             </ul>
           </div>
         </div>
-        <div class="menu-item__size-add" title="增大字号">
+        <div class="menu-item__size-add" title="增大字号(Ctrl+[)">
           <i></i>
         </div>
-        <div class="menu-item__size-minus" title="减小字号">
+        <div class="menu-item__size-minus" title="减小字号(Ctrl+])">
           <i></i>
         </div>
-        <div class="menu-item__bold" title="加粗">
+        <div class="menu-item__bold" title="加粗(Ctrl+B)">
           <i></i>
         </div>
-        <div class="menu-item__italic" title="斜体">
+        <div class="menu-item__italic" title="斜体(Ctrl+I)">
           <i></i>
         </div>
-        <div class="menu-item__underline" title="下划线">
+        <div class="menu-item__underline" title="下划线(Ctrl+U)">
           <i></i>
         </div>
         <div class="menu-item__strikeout" title="删除线">
@@ -76,16 +76,16 @@
       </div>
       <div class="menu-divider"></div>
       <div class="menu-item">
-        <div class="menu-item__left" title="左对齐">
+        <div class="menu-item__left" title="左对齐(Ctrl+L)">
           <i></i>
         </div>
-        <div class="menu-item__center" title="居中对齐">
+        <div class="menu-item__center" title="居中对齐(Ctrl+E)">
           <i></i>
         </div>
-        <div class="menu-item__right" title="右对齐">
+        <div class="menu-item__right" title="右对齐(Ctrl+R)">
           <i></i>
         </div>
-        <div class="menu-item__alignment" title="两端对齐">
+        <div class="menu-item__alignment" title="两端对齐(Ctrl+J)">
           <i></i>
         </div>
         <div class="menu-item__row-margin">

src/editor/core/command/CommandAdapt.ts

@@ -183,75 +183,23 @@ export class CommandAdapt {
   }
 
   public sizeAdd() {
-    const isReadonly = this.draw.isReadonly()
+    this.canvasEvent.sizeAdd()
-    if (isReadonly) return
-    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 isReadonly = this.draw.isReadonly()
+    this.canvasEvent.sizeMinus()
-    if (isReadonly) return
-    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 isReadonly = this.draw.isReadonly()
+    this.canvasEvent.bold()
-    if (isReadonly) return
-    const selection = this.range.getSelection()
-    if (!selection) return
-    const noBoldIndex = selection.findIndex(s => !s.bold)
-    selection.forEach(el => {
-      el.bold = !!~noBoldIndex
-    })
-    this.draw.render({ isSetCursor: false })
   }
 
   public italic() {
-    const isReadonly = this.draw.isReadonly()
+    this.canvasEvent.italic()
-    if (isReadonly) return
-    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 underline() {
-    const isReadonly = this.draw.isReadonly()
+    this.canvasEvent.underline()
-    if (isReadonly) return
-    const selection = this.range.getSelection()
-    if (!selection) return
-    const noUnderlineIndex = selection.findIndex(s => !s.underline)
-    selection.forEach(el => {
-      el.underline = !!~noUnderlineIndex
-    })
-    this.draw.render({ isSetCursor: false })
   }
 
   public strikeout() {
@@ -339,29 +287,7 @@ export class CommandAdapt {
   }
 
   public rowFlex(payload: RowFlex) {
-    const isReadonly = this.draw.isReadonly()
+    this.canvasEvent.rowFlex(payload)
-    if (isReadonly) return
-    const { startIndex, endIndex } = this.range.getRange()
-    if (!~startIndex && !~endIndex) return
-    const pageNo = this.draw.getPageNo()
-    const positionList = this.position.getPositionList()
-    // 开始/结束行号
-    const startRowNo = positionList[startIndex].rowNo
-    const endRowNo = positionList[endIndex].rowNo
-    const elementList = this.draw.getElementList()
-    // 当前选区所在行
-    for (let p = 0; p < positionList.length; p++) {
-      const position = positionList[p]
-      if (position.pageNo !== pageNo) continue
-      if (position.rowNo > endRowNo) break
-      if (position.rowNo >= startRowNo && position.rowNo <= endRowNo) {
-        elementList[p].rowFlex = payload
-      }
-    }
-    // 光标定位
-    const isSetCursor = startIndex === endIndex
-    const curIndex = isSetCursor ? endIndex : startIndex
-    this.draw.render({ curIndex, isSetCursor })
   }
 
   public rowMargin(payload: number) {

src/editor/core/event/CanvasEvent.ts

@@ -1,4 +1,4 @@
-import { ElementType, IEditorOption } from '../..'
+import { ElementType, IEditorOption, RowFlex } from '../..'
 import { ZERO } from '../../dataset/constant/Common'
 import { EDITOR_ELEMENT_COPY_ATTR } from '../../dataset/constant/Element'
 import { ElementStyleKey } from '../../dataset/enum/ElementStyle'
@@ -464,6 +464,33 @@ export class CanvasEvent {
         this.listener.saved(this.draw.getValue())
       }
       evt.preventDefault()
+    } else if (evt.ctrlKey && evt.key === KeyMap.LEFT_BRACKET) {
+      this.sizeAdd()
+      evt.preventDefault()
+    } else if (evt.ctrlKey && evt.key === KeyMap.RIGHT_BRACKET) {
+      this.sizeMinus()
+      evt.preventDefault()
+    } else if (evt.ctrlKey && evt.key === KeyMap.B) {
+      this.bold()
+      evt.preventDefault()
+    } else if (evt.ctrlKey && evt.key === KeyMap.I) {
+      this.italic()
+      evt.preventDefault()
+    } else if (evt.ctrlKey && evt.key === KeyMap.U) {
+      this.underline()
+      evt.preventDefault()
+    } else if (evt.ctrlKey && evt.key === KeyMap.L) {
+      this.rowFlex(RowFlex.LEFT)
+      evt.preventDefault()
+    } else if (evt.ctrlKey && evt.key === KeyMap.E) {
+      this.rowFlex(RowFlex.CENTER)
+      evt.preventDefault()
+    } else if (evt.ctrlKey && evt.key === KeyMap.R) {
+      this.rowFlex(RowFlex.RIGHT)
+      evt.preventDefault()
+    } else if (evt.ctrlKey && evt.key === KeyMap.J) {
+      this.rowFlex(RowFlex.ALIGNMENT)
+      evt.preventDefault()
     } else if (evt.key === KeyMap.ESC) {
       this.clearPainterStyle()
     } else if (evt.key === KeyMap.TAB) {
@@ -670,6 +697,104 @@ export class CanvasEvent {
     })
   }
 
+  public sizeAdd() {
+    const isReadonly = this.draw.isReadonly()
+    if (isReadonly) return
+    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 isReadonly = this.draw.isReadonly()
+    if (isReadonly) return
+    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 isReadonly = this.draw.isReadonly()
+    if (isReadonly) return
+    const selection = this.range.getSelection()
+    if (!selection) return
+    const noBoldIndex = selection.findIndex(s => !s.bold)
+    selection.forEach(el => {
+      el.bold = !!~noBoldIndex
+    })
+    this.draw.render({ isSetCursor: false })
+  }
+
+  public italic() {
+    const isReadonly = this.draw.isReadonly()
+    if (isReadonly) return
+    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 underline() {
+    const isReadonly = this.draw.isReadonly()
+    if (isReadonly) return
+    const selection = this.range.getSelection()
+    if (!selection) return
+    const noUnderlineIndex = selection.findIndex(s => !s.underline)
+    selection.forEach(el => {
+      el.underline = !!~noUnderlineIndex
+    })
+    this.draw.render({ isSetCursor: false })
+  }
+
+  public rowFlex(payload: RowFlex) {
+    const isReadonly = this.draw.isReadonly()
+    if (isReadonly) return
+    const { startIndex, endIndex } = this.range.getRange()
+    if (!~startIndex && !~endIndex) return
+    const pageNo = this.draw.getPageNo()
+    const positionList = this.position.getPositionList()
+    // 开始/结束行号
+    const startRowNo = positionList[startIndex].rowNo
+    const endRowNo = positionList[endIndex].rowNo
+    const elementList = this.draw.getElementList()
+    // 当前选区所在行
+    for (let p = 0; p < positionList.length; p++) {
+      const position = positionList[p]
+      if (position.pageNo !== pageNo) continue
+      if (position.rowNo > endRowNo) break
+      if (position.rowNo >= startRowNo && position.rowNo <= endRowNo) {
+        elementList[p].rowFlex = payload
+      }
+    }
+    // 光标定位
+    const isSetCursor = startIndex === endIndex
+    const curIndex = isSetCursor ? endIndex : startIndex
+    this.draw.render({ curIndex, isSetCursor })
+  }
+
   public compositionstart() {
     this.isCompositing = true
   }

src/editor/dataset/enum/KeyMap.ts

@@ -8,9 +8,20 @@ export enum KeyMap {
   Down = 'ArrowDown',
   ESC = 'Escape',
   TAB = 'Tab',
+  LEFT_BRACKET = '[',
+  RIGHT_BRACKET = ']',
   A = 'a',
+  B = 'b',
   C = 'c',
+  E = 'e',
+  F = 'f',
+  I = 'i',
+  J = 'j',
+  L = 'l',
+  P = 'p',
+  R = 'r',
   S = 's',
+  U = 'u',
   X = 'x',
   Y = 'y',
   Z = 'z'