修改按键绑定机制

package-lock.json

@@ -10085,11 +10085,6 @@
         "minimist": "^1.2.5"
       }
     },
-    "mousetrap": {
-      "version": "1.6.5",
-      "resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz",
-      "integrity": "sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA=="
-    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",

package.json

@@ -223,7 +223,6 @@
     "image-size": "^0.8.3",
     "js-htmlencode": "^0.3.0",
     "lrc-file-parser": "^1.0.3",
-    "mousetrap": "^1.6.5",
     "needle": "^2.4.1",
     "node-id3": "^0.1.16",
     "request": "^2.88.2",

src/renderer/components/material/SongList.vue

@@ -121,8 +121,6 @@ export default {
       keyEvent: {
         isShiftDown: false,
         isModDown: false,
-        isADown: false,
-        aDownTimeout: null,
       },
     }
   },
@@ -139,7 +137,6 @@ export default {
       window.eventHub.$on('key_mod_down', this.handle_key_mod_down)
       window.eventHub.$on('key_mod_up', this.handle_key_mod_up)
       window.eventHub.$on('key_mod+a_down', this.handle_key_mod_a_down)
-      window.eventHub.$on('key_mod+a_up', this.handle_key_mod_a_up)
     },
     unlistenEvent() {
       window.eventHub.$off('key_shift_down', this.handle_key_shift_down)
@@ -147,7 +144,6 @@ export default {
       window.eventHub.$off('key_mod_down', this.handle_key_mod_down)
       window.eventHub.$off('key_mod_up', this.handle_key_mod_up)
       window.eventHub.$off('key_mod+a_down', this.handle_key_mod_a_down)
-      window.eventHub.$off('key_mod+a_up', this.handle_key_mod_a_up)
     },
     handle_key_shift_down() {
       if (!this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = true
@@ -161,26 +157,10 @@ export default {
     handle_key_mod_up() {
       if (this.keyEvent.isModDown) this.keyEvent.isModDown = false
     },
-    handle_key_mod_a_down() {
-      if (!this.keyEvent.isADown) {
-        this.keyEvent.isModDown = false
-        this.keyEvent.isADown = true
-        this.handleSelectAllData()
-        if (this.keyEvent.aDownTimeout) clearTimeout(this.keyEvent.aDownTimeout)
-        this.keyEvent.aDownTimeout = setTimeout(() => {
-          this.keyEvent.aDownTimeout = null
-          this.keyEvent.isADown = false
-        }, 500)
-      }
-    },
-    handle_key_mod_a_up() {
-      if (this.keyEvent.isADown) {
-        if (this.keyEvent.aDownTimeout) {
-          clearTimeout(this.keyEvent.aDownTimeout)
-          this.keyEvent.aDownTimeout = null
-        }
-        this.keyEvent.isADown = false
-      }
+    handle_key_mod_a_down({ event }) {
+      if (event.repeat) return
+      this.keyEvent.isModDown = false
+      this.handleSelectAllData()
     },
     handleDoubleClick(event, index) {
       if (event.target.classList.contains('select')) return

src/renderer/config/bindkey.js

@@ -1,44 +0,0 @@
-import mousetrap from 'mousetrap'
-
-let eventHub
-
-const bindKeys = [
-  'shift',
-  'mod',
-  'mod+a',
-]
-
-const bindKey = () => {
-  mousetrap.reset()
-  for (const key of bindKeys) {
-    mousetrap.bind(key, (event, combo) => {
-      eventHub.$emit(`key_${key}_down`, { event, combo })
-      return false
-    }, 'keydown')
-    mousetrap.bind(key, (event, combo) => {
-      eventHub.$emit(`key_${key}_up`, { event, combo })
-      return false
-    }, 'keyup')
-  }
-}
-
-const unbindKey = () => {
-  for (const key of bindKeys) {
-    mousetrap.unbind(key, 'keydown')
-    mousetrap.unbind(key, 'keyup')
-  }
-}
-
-const handleFocus = () => {
-  for (const key of bindKeys) {
-    eventHub.$emit(`key_${key}_up`, { combo: key })
-  }
-}
-
-export default () => {
-  eventHub = window.eventHub
-
-  eventHub.$on('bindKey', bindKey)
-  eventHub.$on('unbindKey', unbindKey)
-  eventHub.$on('focus', handleFocus)
-}

src/renderer/config/event.js

@@ -1,11 +1,18 @@
 import Vue from 'vue'
-import bindkey from './bindkey'
+import keyBind from '../utils/keyBind'
 import { rendererOn } from '../../common/ipc'
 
-window.eventHub = new Vue()
+const eventHub = window.eventHub = new Vue()
 
-bindkey()
+eventHub.$on('bindKey', () => {
+  keyBind.bindKey((key, type, event, keys) => {
+    // console.log(`key_${key}_${type}`)
+    eventHub.$emit(`key_${key}_${type}`, { event, keys, key })
+  })
+})
+eventHub.$on('unbindKey', keyBind.unbindKey)
 
 rendererOn('focus', () => {
-  window.eventHub.$emit('focus')
+  keyBind.clearDownKeys()
+  eventHub.$emit('focus')
 })

src/renderer/utils/keyBind.js

@@ -0,0 +1,109 @@
+import { isMac, isWin } from '../../common/utils'
+
+const downKeys = new Set()
+
+const handleEvent = (type, event, keys) => {
+  if (isWin) {
+    let index = keys.indexOf('ctrl')
+    if (index > -1) keys.splice(index, 1, 'mod')
+  } else if (isMac) {
+    let index = keys.indexOf('meta')
+    if (index > -1) keys.splice(index, 1, 'mod')
+  }
+  let key = keys.join('+')
+
+  switch (type) {
+    case 'down':
+      downKeys.add(key)
+      break
+    case 'up':
+      downKeys.delete(key)
+      break
+  }
+  handleSendEvent(key, type, event, keys)
+}
+
+// 修饰键处理
+const eventModifiers = event => {
+  let modifiers = []
+  if (event.ctrlKey) modifiers.push('ctrl')
+  if (event.shiftKey) modifiers.push('shift')
+  if (event.altKey) modifiers.push('alt')
+  if (event.metaKey) modifiers.push('meta')
+
+  return modifiers
+}
+
+// 是否忽略事件（表单元素等默认忽略）
+const assertStopCallback = element => {
+  // if the element has the class "keybind" then no need to stop
+  if (element.classList.contains('key-bind')) return false
+
+  // stop for input, select, and textarea
+  switch (element.tagName) {
+    case 'INPUT':
+    case 'SELECT':
+    case 'TEXTAREA':
+      return true
+    default:
+      return element.isContentEditable
+  }
+}
+
+const handleKeyDown = event => {
+  if (assertStopCallback(event.target)) return
+  event.preventDefault()
+  let keys = eventModifiers(event)
+  switch (event.key) {
+    case 'Control':
+    case 'Alt':
+    case 'Meta':
+    case 'Shift':
+      break
+    default:
+      keys.push(event.key)
+      break
+  }
+  handleEvent('down', event, keys)
+}
+
+const handleKeyUp = event => {
+  if (assertStopCallback(event.target)) return
+  event.preventDefault()
+  let keys = eventModifiers(event)
+  switch (event.key) {
+    case 'Control':
+      keys.push('ctrl')
+      break
+    default:
+      keys.push(event.key.toLowerCase())
+      break
+  }
+  handleEvent('up', event, keys)
+}
+
+let handleSendEvent
+
+const bindKey = (handle = () => {}) => {
+  handleSendEvent = handle
+  document.addEventListener('keydown', handleKeyDown)
+  document.addEventListener('keyup', handleKeyUp)
+}
+
+const unbindKey = () => {
+  document.removeEventListener('keydown', handleKeyDown)
+  document.removeEventListener('keyup', handleKeyUp)
+}
+
+const clearDownKeys = () => {
+  for (const key of downKeys) {
+    handleSendEvent(key, 'up')
+  }
+  downKeys.clear()
+}
+
+export default {
+  bindKey,
+  unbindKey,
+  clearDownKeys,
+}

src/renderer/views/Download.vue

@@ -73,8 +73,6 @@ export default {
       keyEvent: {
         isShiftDown: false,
         isModDown: false,
-        isADown: false,
-        aDownTimeout: null,
       },
     }
   },
@@ -135,7 +133,6 @@ export default {
       window.eventHub.$on('key_mod_down', this.handle_key_mod_down)
       window.eventHub.$on('key_mod_up', this.handle_key_mod_up)
       window.eventHub.$on('key_mod+a_down', this.handle_key_mod_a_down)
-      window.eventHub.$on('key_mod+a_up', this.handle_key_mod_a_up)
     },
     unlistenEvent() {
       window.eventHub.$off('key_shift_down', this.handle_key_shift_down)
@@ -143,7 +140,6 @@ export default {
       window.eventHub.$off('key_mod_down', this.handle_key_mod_down)
       window.eventHub.$off('key_mod_up', this.handle_key_mod_up)
       window.eventHub.$off('key_mod+a_down', this.handle_key_mod_a_down)
-      window.eventHub.$off('key_mod+a_up', this.handle_key_mod_a_up)
     },
     handle_key_shift_down() {
       if (!this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = true
@@ -157,26 +153,10 @@ export default {
     handle_key_mod_up() {
       if (this.keyEvent.isModDown) this.keyEvent.isModDown = false
     },
-    handle_key_mod_a_down() {
-      if (!this.keyEvent.isADown) {
-        this.keyEvent.isModDown = false
-        this.keyEvent.isADown = true
-        this.handleSelectAllData()
-        if (this.keyEvent.aDownTimeout) clearTimeout(this.keyEvent.aDownTimeout)
-        this.keyEvent.aDownTimeout = setTimeout(() => {
-          this.keyEvent.aDownTimeout = null
-          this.keyEvent.isADown = false
-        }, 500)
-      }
-    },
-    handle_key_mod_a_up() {
-      if (this.keyEvent.isADown) {
-        if (this.keyEvent.aDownTimeout) {
-          clearTimeout(this.keyEvent.aDownTimeout)
-          this.keyEvent.aDownTimeout = null
-        }
-        this.keyEvent.isADown = false
-      }
+    handle_key_mod_a_down({ event }) {
+      if (event.repeat) return
+      this.keyEvent.isModDown = false
+      this.handleSelectAllData()
     },
     handleDoubleClick(event, index) {
       if (event.target.classList.contains('select')) return

src/renderer/views/List.vue

@@ -71,8 +71,6 @@ export default {
       keyEvent: {
         isShiftDown: false,
         isModDown: false,
-        isADown: false,
-        aDownTimeout: null,
       },
     }
   },
@@ -194,7 +192,6 @@ export default {
       window.eventHub.$on('key_mod_down', this.handle_key_mod_down)
       window.eventHub.$on('key_mod_up', this.handle_key_mod_up)
       window.eventHub.$on('key_mod+a_down', this.handle_key_mod_a_down)
-      window.eventHub.$on('key_mod+a_up', this.handle_key_mod_a_up)
     },
     unlistenEvent() {
       window.eventHub.$off('key_shift_down', this.handle_key_shift_down)
@@ -202,7 +199,6 @@ export default {
       window.eventHub.$off('key_mod_down', this.handle_key_mod_down)
       window.eventHub.$off('key_mod_up', this.handle_key_mod_up)
       window.eventHub.$off('key_mod+a_down', this.handle_key_mod_a_down)
-      window.eventHub.$off('key_mod+a_up', this.handle_key_mod_a_up)
     },
     handle_key_shift_down() {
       if (!this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = true
@@ -216,26 +212,10 @@ export default {
     handle_key_mod_up() {
       if (this.keyEvent.isModDown) this.keyEvent.isModDown = false
     },
-    handle_key_mod_a_down() {
-      if (!this.keyEvent.isADown) {
-        this.keyEvent.isModDown = false
-        this.keyEvent.isADown = true
-        this.handleSelectAllData()
-        if (this.keyEvent.aDownTimeout) clearTimeout(this.keyEvent.aDownTimeout)
-        this.keyEvent.aDownTimeout = setTimeout(() => {
-          this.keyEvent.aDownTimeout = null
-          this.keyEvent.isADown = false
-        }, 500)
-      }
-    },
-    handle_key_mod_a_up() {
-      if (this.keyEvent.isADown) {
-        if (this.keyEvent.aDownTimeout) {
-          clearTimeout(this.keyEvent.aDownTimeout)
-          this.keyEvent.aDownTimeout = null
-        }
-        this.keyEvent.isADown = false
-      }
+    handle_key_mod_a_down({ event }) {
+      if (event.repeat) return
+      this.keyEvent.isModDown = false
+      this.handleSelectAllData()
     },
     handleDelayShow() {
       this.clearDelayTimeout()

src/renderer/views/Search.vue

@@ -81,8 +81,6 @@ export default {
       keyEvent: {
         isShiftDown: false,
         isModDown: false,
-        isADown: false,
-        aDownTimeout: null,
       },
     }
   },
@@ -172,7 +170,6 @@ export default {
       window.eventHub.$on('key_mod_down', this.handle_key_mod_down)
       window.eventHub.$on('key_mod_up', this.handle_key_mod_up)
       window.eventHub.$on('key_mod+a_down', this.handle_key_mod_a_down)
-      window.eventHub.$on('key_mod+a_up', this.handle_key_mod_a_up)
     },
     unlistenEvent() {
       window.eventHub.$off('key_shift_down', this.handle_key_shift_down)
@@ -180,7 +177,6 @@ export default {
       window.eventHub.$off('key_mod_down', this.handle_key_mod_down)
       window.eventHub.$off('key_mod_up', this.handle_key_mod_up)
       window.eventHub.$off('key_mod+a_down', this.handle_key_mod_a_down)
-      window.eventHub.$off('key_mod+a_up', this.handle_key_mod_a_up)
     },
     handle_key_shift_down() {
       if (!this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = true
@@ -194,26 +190,10 @@ export default {
     handle_key_mod_up() {
       if (this.keyEvent.isModDown) this.keyEvent.isModDown = false
     },
-    handle_key_mod_a_down() {
-      if (!this.keyEvent.isADown) {
-        this.keyEvent.isModDown = false
-        this.keyEvent.isADown = true
-        this.handleSelectAllData()
-        if (this.keyEvent.aDownTimeout) clearTimeout(this.keyEvent.aDownTimeout)
-        this.keyEvent.aDownTimeout = setTimeout(() => {
-          this.keyEvent.aDownTimeout = null
-          this.keyEvent.isADown = false
-        }, 500)
-      }
-    },
-    handle_key_mod_a_up() {
-      if (this.keyEvent.isADown) {
-        if (this.keyEvent.aDownTimeout) {
-          clearTimeout(this.keyEvent.aDownTimeout)
-          this.keyEvent.aDownTimeout = null
-        }
-        this.keyEvent.isADown = false
-      }
+    handle_key_mod_a_down({ event }) {
+      if (event.repeat) return
+      this.keyEvent.isModDown = false
+      this.handleSelectAllData()
     },
     handleSearch(text, page) {
       if (text === '') return this.clearList()