feat:add richtext shortcut key

3 years ago · 3e7952fd98
parent 951f3db37c
commit 3e7952fd98
4 changed files with 152 additions and 90 deletions
--- a/index.html
+++ b/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">
--- a/src/editor/core/command/CommandAdapt.ts
+++ b/src/editor/core/command/CommandAdapt.ts
@ -183,75 +183,23 @@ export class CommandAdapt {
  }

  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 })
+    this.canvasEvent.sizeAdd()
  }

  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 })
+    this.canvasEvent.sizeMinus()
  }

  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 })
+    this.canvasEvent.bold()
  }

  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 })
+    this.canvasEvent.italic()
  }

  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 })
+    this.canvasEvent.underline()
  }

  public strikeout() {
@ -339,29 +287,7 @@ export class CommandAdapt {
  }

  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 })
+    this.canvasEvent.rowFlex(payload)
  }

  public rowMargin(payload: number) {
--- a/src/editor/core/event/CanvasEvent.ts
+++ b/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
  }
--- a/src/editor/dataset/enum/KeyMap.ts
+++ b/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'