feat: 添加快捷键+更完整的辅助线提示 (#148) add shortcuts for editor and more guidelines

* fix scrollbar show when h-line&v-line visible * remove unused text code * add hotkey to menu tools * 除了left和top，其他四条线(midx,right,midy,bottom)也提示辅助线 * change width and height when point move situation * rename argument and optimize some experience * Fix typo thanks @shihongzhi

feat: 添加快捷键+更完整的辅助线提示 (#148) add shortcuts for editor and more guidelines
* fix scrollbar show when h-line&v-line visible * remove unused text code * add hotkey to menu tools * 除了left和top，其他四条线(midx,right,midy,bottom)也提示辅助线 * change width and height when point move situation * rename argument and optimize some experience * Fix typo thanks @shihongzhi
shihongzhi · GitHub
1 parent a9a71231
Showing 4 changed files with 96 additions and 66 deletions
front-end/h5/package.json
front-end/h5/src/components/core/editor/canvas/edit.js
front-end/h5/src/components/core/editor/index.js
front-end/h5/yarn.lock
@@ -23,6 +23,7 @@
     "core-js": "^2.6.5",
     "element-ui": "^2.13.0",
     "font-awesome": "4.7.0",
+    "hotkeys-js": "^3.7.6",
     "html2canvas": "^1.0.0-rc.3",
     "proxy-agent": "^3.1.0",
     "qrcode": "^1.4.1",
@@ -23,73 +23,97 @@ export default {
     // TODO #!zh: 优化代码
     // generate vertical line
     drawVLine (newLeft) {
-      // this.editingElement.commonStyle.left = newLeft
-      this.setElementPosition({ left: newLeft })
       this.vLines = [{ left: newLeft }]
     },
+    clearVLine () {
+      this.vLines = []
+    },
     // generate horizontal line
     drawHLine (newTop) {
-      // this.editingElement.commonStyle.top = newTop
-      this.setElementPosition({ top: newTop })
       this.hLines = [{ top: newTop }]
     },
-    calcX (newLeft) {
+    clearHLine () {
+      this.hLines = []
+    },
+    calcVHLine (isPointMove) {
       const uuid = this.editingElement.uuid
-      let xCoords = []
-      this.elements.filter(e => e.uuid !== uuid).forEach(e => {
+      const referElements = this.elements.filter(e => e.uuid !== uuid)
+      let referElementsXCoords = []
+      let referElementsYCoords = []
+      referElements.forEach(e => {
         const width = e.commonStyle.width
         const left = e.commonStyle.left
-        xCoords = [
-          ...xCoords,
+        const height = e.commonStyle.height
+        const top = e.commonStyle.top
+
+        referElementsXCoords = [
+          ...referElementsXCoords,
           left,
           left + (width / 2),
           left + width
         ]
-      })
-
-      xCoords.some(x => {
-        if (Math.abs(newLeft - x) <= 5) {
-          this.drawVLine(x)
-          return true
-        } else {
-          this.vLines = []
-        }
-      })
-    },
-    calcY (newTop) {
-      const uuid = this.editingElement.uuid
-      let yCoords = []
-      this.elements.filter(e => e.uuid !== uuid).forEach(e => {
-        const height = e.commonStyle.height
-        const top = e.commonStyle.top
-        yCoords = [
-          ...yCoords,
+        referElementsYCoords = [
+          ...referElementsYCoords,
           top,
           top + (height / 2),
           top + height
         ]
       })
  
-      yCoords.some(y => {
-        if (Math.abs(newTop - y) <= 5) {
-          this.drawHLine(y)
-          return true
-        } else {
-          this.hLines = []
-        }
+      // e代表 editingElement
+      const eleft = this.editingElement.commonStyle.left
+      const etop = this.editingElement.commonStyle.top
+      const ewidth = this.editingElement.commonStyle.width
+      const eheight = this.editingElement.commonStyle.height
+      const exCoords = [eleft + ewidth, eleft + (ewidth / 2), eleft]
+      const eyCoords = [etop + eheight, etop + (eheight / 2), etop]
+      let hasVLine = false
+      let hasHLine = false
+      exCoords.forEach(eX => {
+        referElementsXCoords.forEach(referX => {
+          let offset = referX - eX
+          if (Math.abs(offset) <= 5) {
+            if (isPointMove) {
+              this.setElementPosition({ width: ewidth + offset })
+            } else {
+              this.setElementPosition({ left: eleft + offset })
+            }
+            this.drawVLine(referX)
+            hasVLine = true
+          }
+        })
+      })
+      eyCoords.forEach(eY => {
+        referElementsYCoords.forEach(referY => {
+          let offset = referY - eY
+          if (Math.abs(offset) <= 5) {
+            if (isPointMove) {
+              this.setElementPosition({ height: eheight + offset })
+            } else {
+              this.setElementPosition({ top: etop + offset })
+            }
+            this.drawHLine(referY)
+            hasHLine = true
+          }
+        })
       })
+      if (!hasVLine) {
+        this.clearVLine()
+      }
+      if (!hasHLine) {
+        this.clearHLine()
+      }
     },
     /**
      * #!zh: 在元素移动过程中，计算和生成辅助线
      */
     handleElementMove (pos) {
       this.setElementPosition(pos)
-      this.calcX(pos.left)
-      this.calcY(pos.top)
+      this.calcVHLine(false)
     },
-    handlePointMove ({ top, left }) {
-      this.calcX(left)
-      this.calcY(top)
+    handlePointMove (pos) {
+      this.setElementPosition(pos)
+      this.calcVHLine(true)
     },
     bindContextMenu (e) {
       // 优化右击菜单的显示，去除冗余的无效逻辑
@@ -185,14 +209,16 @@ export default {
                     this.setEditingElement(element)
                   }}
                   // TODO 矩形四周的点叫什么？暂时叫 Point 吧
-                  handlePointMoveProp={pos => {
-                    this.setElementPosition(pos)
-                  }}
+                  handlePointMoveProp={this.handlePointMove}
                   handleElementMoveProp={this.handleElementMove}
                   handleElementMouseUpProp={() => {
+                    this.clearHLine()
+                    this.clearVLine()
                     this.recordElementRect()
                   }}
                   handlePointMouseUpProp={() => {
+                    this.clearHLine()
+                    this.clearVLine()
                     this.recordElementRect()
                   }}
                   nativeOnContextmenu={e => {
 import { mapState, mapActions } from 'vuex'
+import hotkeys from 'hotkeys-js'
 import undoRedoHistory from '../../../store/plugins/undo-redo/History'
  
 import '../styles/index.scss'
@@ -44,58 +45,47 @@ import Feedback from &#39;@/components/common/feedback/index&#39;
 const fixedTools = [
   {
     i18nTooltip: 'editor.fixedTool.undo',
-    'tooltip': '撤消', // TODO 支持快捷键
-    'text': '撤消',
     'icon': 'mail-reply',
-    'action': () => undoRedoHistory.undo()
+    'action': () => undoRedoHistory.undo(),
+    'hotkey': 'ctrl&z,⌘&z'
   },
   {
     i18nTooltip: 'editor.fixedTool.redo',
-    'tooltip': '恢复',
-    'text': '恢复',
     'icon': 'mail-forward',
-    'action': () => undoRedoHistory.redo()
+    'action': () => undoRedoHistory.redo(),
+    'hotkey': 'ctrl&y,⌘&u'
   },
   {
     i18nTooltip: 'editor.fixedTool.preview',
-    'tooltip': '刷新预览',
-    'text': '刷新预览',
     'icon': 'eye',
     'action': function () { this.previewVisible = true }
   },
   {
     i18nTooltip: 'editor.fixedTool.copyCurrentPage',
-    'tooltip': '复制当前页',
-    'text': '复制当前页',
     'icon': 'copy',
-    'action': function () { this.pageManager({ type: 'copy' }) }
+    'action': function () { this.pageManager({ type: 'copy' }) },
+    'hotkey': 'ctrl&c,⌘&c'
   },
   {
     i18nTooltip: 'editor.fixedTool.importPSD',
-    'tooltip': '导入PSD',
-    'text': 'Ps',
     'icon': '',
     'action': '',
     'disabled': true
   },
   {
     i18nTooltip: 'editor.fixedTool.zoomOut',
-    'tooltip': '放大画布',
-    'text': '放大画布',
     'icon': 'plus',
-    'action': function () { this.scaleRate += 0.25 }
+    'action': function () { this.scaleRate += 0.25 },
+    'hotkey': 'ctrl&=,⌘&='
   },
   {
     i18nTooltip: 'editor.fixedTool.zoomIn',
-    'tooltip': '缩小画布',
-    'text': '缩小画布',
     'icon': 'minus',
-    'action': function () { this.scaleRate -= 0.25 }
+    'action': function () { this.scaleRate -= 0.25 },
+    'hotkey': 'ctrl&-,⌘&-'
   },
   {
     i18nTooltip: 'editor.fixedTool.issues',
-    'tooltip': 'issues',
-    'text': '常见问题',
     'icon': 'question',
     'action': function () { window.open('https://github.com/ly525/luban-h5/issues/110') }
   }
@@ -237,6 +227,15 @@ export default {
       // }
     }
   },
+  mounted () {
+    fixedTools.map(tool => {
+      tool.hotkey && hotkeys(tool.hotkey, { splitKey: '&' }, (event, handler) => {
+        event.preventDefault()
+        event.stopPropagation()
+        tool.action && tool.action.call(this)
+      })
+    })
+  },
   render (h) {
     return (
       <a-layout id="luban-editor-layout" style={{ height: '100vh' }}>
@@ -340,10 +339,9 @@ export default {
             <a-button-group style={{ display: 'flex', flexDirection: 'column' }}>
               {
                 fixedTools.map(tool => (
-                  // <a-tooltip effect="dark" placement="left" title={tool.tooltip}>
                   <a-tooltip effect="dark" placement="left" title={this.$t(tool.i18nTooltip)}>
                     <a-button block class="transparent-bg" type="link" size="small" style={{ height: '40px', color: '#000' }} onClick={() => tool.action && tool.action.call(this) } disabled={!!tool.disabled}>
-                      { tool.icon ? <i class={['shortcut-icon', 'fa', `fa-${tool.icon}`]} aria-hidden='true'/> : tool.text }
+                      { tool.icon ? <i class={['shortcut-icon', 'fa', `fa-${tool.icon}`]} aria-hidden='true'/> : this.$t(tool.i18nTooltip) }
                     </a-button>
                     { tool.icon === 'minus' && <div style={{ fontSize: '12px', textAlign: 'center' }}>{this.scaleRate * 100}%</div> }
                   </a-tooltip>
@@ -5071,6 +5071,11 @@ hosted-git-info@^2.1.4:
   resolved "https://registry.npm.taobao.org/hosted-git-info/download/hosted-git-info-2.8.5.tgz#759cfcf2c4d156ade59b0b2dfabddc42a6b9c70c"
   integrity sha1-dZz88sTRVq3lmwst+r3cQqa5xww=
  
+hotkeys-js@^3.7.6:
+  version "3.7.6"
+  resolved "https://registry.npm.taobao.org/hotkeys-js/download/hotkeys-js-3.7.6.tgz#b90ae3453a7be2f2b2bed6ee55cb96443944c77b"
+  integrity sha1-uQrjRTp74vKyvtbuVcuWRDlEx3s=
+
 hpack.js@^2.1.6:
   version "2.1.6"
   resolved "https://registry.npm.taobao.org/hpack.js/download/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"