feat: adds keyboard shortcuts

components.d.ts

@@ -49,6 +49,7 @@ declare module 'vue' {
     BedScrewsAdjustDialog: typeof import('./src/components/common/BedScrewsAdjustDialog.vue')['default']
     CollapsableCard: typeof import('./src/components/common/CollapsableCard.vue')['default']
     FlashMessage: typeof import('./src/components/common/FlashMessage.vue')['default']
+    KeyboardShortcutsDialog: typeof import('./src/components/common/KeyboardShortcutsDialog.vue')['default']
     KlippyStatusCard: typeof import('./src/components/common/KlippyStatusCard.vue')['default']
     ManualProbeDialog: typeof import('./src/components/common/ManualProbeDialog.vue')['default']
     PeripheralsDialog: typeof import('./src/components/common/PeripheralsDialog.vue')['default']

src/App.vue

@@ -85,6 +85,7 @@
       <updating-dialog />
       <spool-selection-dialog />
       <action-command-prompt-dialog />
+      <keyboard-shortcuts-dialog />
     </v-main>
 
     <app-footer />
@@ -110,6 +111,7 @@ import type { FlashMessage } from '@/types'
 import { getFilesFromDataTransfer, hasFilesInDataTransfer } from './util/file-system-entry'
 import type { ThemeConfig } from '@/store/config/types'
 import ActionCommandPromptDialog from './components/common/ActionCommandPromptDialog.vue'
+import KeyboardShortcutsDialog from './components/common/KeyboardShortcutsDialog.vue'
 
 @Component<App>({
   metaInfo () {
@@ -122,13 +124,13 @@ import ActionCommandPromptDialog from './components/common/ActionCommandPromptDi
   components: {
     SpoolSelectionDialog,
     FileSystemDownloadDialog,
-    ActionCommandPromptDialog
+    ActionCommandPromptDialog,
+    KeyboardShortcutsDialog
   }
 })
 export default class App extends Mixins(StateMixin, FilesMixin, BrowserMixin) {
   toolsdrawer: boolean | null = null
   navdrawer: boolean | null = null
-  showUpdateUI = false
   dragState = false
   customBackgroundImageStyle: Record<string, string> = {}
 
@@ -317,11 +319,16 @@ export default class App extends Mixins(StateMixin, FilesMixin, BrowserMixin) {
     }
   }
 
+  get enableKeyboardShortcuts (): boolean {
+    return this.$store.state.config.uiSettings.general.enableKeyboardShortcuts
+  }
+
   mounted () {
     window.addEventListener('dragover', this.handleDragOver)
     window.addEventListener('dragenter', this.handleDragEnter)
     window.addEventListener('dragleave', this.handleDragLeave)
     window.addEventListener('drop', this.handleDrop)
+    window.addEventListener('keydown', this.handleKeyDown, false)
 
     // this.onLoadLocale(this.$i18n.locale)
     EventBus.bus.$on('flashMessage', (payload: FlashMessage) => {
@@ -354,6 +361,7 @@ export default class App extends Mixins(StateMixin, FilesMixin, BrowserMixin) {
     window.removeEventListener('dragenter', this.handleDragEnter)
     window.removeEventListener('dragleave', this.handleDragLeave)
     window.removeEventListener('drop', this.handleDrop)
+    window.removeEventListener('keydown', this.handleKeyDown)
   }
 
   handleToolsDrawerChange () {
@@ -425,6 +433,21 @@ export default class App extends Mixins(StateMixin, FilesMixin, BrowserMixin) {
       }
     }
   }
+
+  handleKeyDown (event: KeyboardEvent) {
+    const { key, shiftKey, ctrlKey } = event
+
+    if (
+      this.enableKeyboardShortcuts &&
+      key === 'F12' &&
+      shiftKey &&
+      ctrlKey
+    ) {
+      event.preventDefault()
+
+      this.emergencyStop()
+    }
+  }
 }
 </script>
 

src/components/common/KeyboardShortcutsDialog.vue

@@ -0,0 +1,125 @@
+<template>
+  <app-dialog
+    v-model="open"
+    :title="$t('app.keyboard_shortcuts.title.keyboard_shortcuts')"
+    max-width="400"
+    no-actions
+  >
+    <v-card-text class="pa-0">
+      <v-card flat>
+        <v-card-title>{{ $t('app.keyboard_shortcuts.label.navigation') }}</v-card-title>
+
+        <v-simple-table dense>
+          <tbody>
+            <tr>
+              <th>{{ $t('app.general.title.home') }}</th>
+              <td><kbd>{{ keyboardShortcuts.home }}</kbd></td>
+            </tr>
+            <tr>
+              <th>{{ $t('app.general.title.console') }}</th>
+              <td><kbd>{{ keyboardShortcuts.console }}</kbd></td>
+            </tr>
+            <tr>
+              <th>{{ $t('app.general.title.gcode_preview') }}</th>
+              <td><kbd>{{ keyboardShortcuts.preview }}</kbd></td>
+            </tr>
+            <tr>
+              <th>{{ $t('app.general.title.jobs') }}</th>
+              <td><kbd>{{ keyboardShortcuts.jobs }}</kbd></td>
+            </tr>
+            <tr>
+              <th>{{ $t('app.general.title.history') }}</th>
+              <td><kbd>{{ keyboardShortcuts.history }}</kbd></td>
+            </tr>
+            <tr>
+              <th>{{ $t('app.general.title.timelapse') }}</th>
+              <td><kbd>{{ keyboardShortcuts.timelapse }}</kbd></td>
+            </tr>
+            <tr>
+              <th>{{ $t('app.general.title.tune') }}</th>
+              <td><kbd>{{ keyboardShortcuts.tune }}</kbd></td>
+            </tr>
+            <tr>
+              <th>{{ $t('app.general.title.diagnostics') }}</th>
+              <td><kbd>{{ keyboardShortcuts.diagnostics }}</kbd></td>
+            </tr>
+            <tr>
+              <th>{{ $t('app.general.title.configure') }}</th>
+              <td><kbd>{{ keyboardShortcuts.configure }}</kbd></td>
+            </tr>
+            <tr>
+              <th>{{ $t('app.general.title.system') }}</th>
+              <td><kbd>{{ keyboardShortcuts.system }}</kbd></td>
+            </tr>
+            <tr>
+              <th>{{ $t('app.general.title.settings') }}</th>
+              <td><kbd>{{ keyboardShortcuts.settings }}</kbd></td>
+            </tr>
+          </tbody>
+        </v-simple-table>
+      </v-card>
+
+      <v-card flat>
+        <v-card-title>{{ $t('app.keyboard_shortcuts.label.actions') }}</v-card-title>
+
+        <v-simple-table dense>
+          <tbody>
+            <tr>
+              <th>{{ $t('app.general.tooltip.estop') }}</th>
+              <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>F12</kbd></td>
+            </tr>
+            <tr>
+              <th>{{ $t('app.keyboard_shortcuts.label.open_keyboard_shortcut_help') }}</th>
+              <td><kbd>?</kbd></td>
+            </tr>
+          </tbody>
+        </v-simple-table>
+      </v-card>
+    </v-card-text>
+  </app-dialog>
+</template>
+
+<script lang="ts">
+import { Globals } from '@/globals'
+import eventTargetIsContentEditable from '@/util/event-target-is-content-editable'
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component({})
+export default class KeyboardShortcutsDialog extends Vue {
+  open = false
+
+  get keyboardShortcuts () {
+    return Globals.KEYBOARD_SHORTCUTS
+  }
+
+  get enableKeyboardShortcuts (): boolean {
+    return this.$store.state.config.uiSettings.general.enableKeyboardShortcuts
+  }
+
+  handleKeyDown (event: KeyboardEvent) {
+    if (!this.enableKeyboardShortcuts) {
+      return
+    }
+
+    const { key, ctrlKey } = event
+
+    if (
+      key === '?' &&
+      !ctrlKey &&
+      !eventTargetIsContentEditable(event)
+    ) {
+      event.preventDefault()
+
+      this.open = true
+    }
+  }
+
+  created () {
+    window.addEventListener('keydown', this.handleKeyDown, false)
+  }
+
+  beforeDestroy () {
+    window.removeEventListener('keydown', this.handleKeyDown)
+  }
+}
+</script>

src/components/layout/AppBar.vue

@@ -65,7 +65,13 @@
               </v-icon>
             </app-btn>
           </template>
-          <span>{{ $t('app.general.tooltip.estop') }}</span>
+          <span>
+            {{ $t('app.general.tooltip.estop') }}
+            <template v-if="enableKeyboardShortcuts">
+              <br>
+              <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>F12</kbd>
+            </template>
+          </span>
         </v-tooltip>
       </div>
 
@@ -335,6 +341,10 @@ export default class AppBar extends Mixins(StateMixin, ServicesMixin, FilesMixin
     return true
   }
 
+  get enableKeyboardShortcuts (): boolean {
+    return this.$store.state.config.uiSettings.general.enableKeyboardShortcuts
+  }
+
   handleExitLayout () {
     this.$store.commit('config/setLayoutMode', false)
   }

src/components/settings/GeneralSettings.vue

@@ -66,6 +66,17 @@
 
       <v-divider />
 
+      <app-setting :title="$t('app.setting.label.keyboard_shortcuts')">
+        <v-switch
+          v-model="enableKeyboardShortcuts"
+          hide-details
+          class="mb-5"
+          @click.native.stop
+        />
+      </app-setting>
+
+      <v-divider />
+
       <app-setting :title="$t('app.setting.label.confirm_on_estop')">
         <v-switch
           v-model="confirmOnEstop"
@@ -302,6 +313,18 @@ export default class GeneralSettings extends Mixins(StateMixin) {
       }))
   }
 
+  get enableKeyboardShortcuts (): boolean {
+    return this.$store.state.config.uiSettings.general.enableKeyboardShortcuts
+  }
+
+  set enableKeyboardShortcuts (value: boolean) {
+    this.$store.dispatch('config/saveByPath', {
+      path: 'uiSettings.general.enableKeyboardShortcuts',
+      value,
+      server: true
+    })
+  }
+
   get confirmOnEstop () {
     return this.$store.state.config.uiSettings.general.confirmOnEstop
   }

src/components/ui/AppNavItem.vue

@@ -21,51 +21,85 @@
         </v-list-item-content>
       </v-list-item>
     </template>
-    <span><slot /></span>
+    <span>
+      <slot />
+      <kbd
+        v-if="accelerator && enableKeyboardShortcuts"
+        class="ml-2"
+      >{{ accelerator }}</kbd>
+    </span>
   </v-tooltip>
-
-  <!-- <v-tooltip right :disabled="isMobileViewport">
-    <template v-slot:activator="{ attrs, on }">
-      <router-link
-        :to="to"
-        :exact="exact"
-        custom
-        v-slot="{ navigate, isActive }"
-      >
-        <button
-          v-bind="attrs"
-          v-on="on"
-          v-ripple
-          @click="navigate"
-          :class="{ 'active': isActive }"
-        >
-          <v-icon>{{ icon }}</v-icon>
-        </button>
-      </router-link>
-    </template>
-    <slot></slot>
-  </v-tooltip> -->
 </template>
 
 <script lang="ts">
 import { Component, Mixins, Prop } from 'vue-property-decorator'
 
 import StateMixin from '@/mixins/state'
 import BrowserMixin from '@/mixins/browser'
+import eventTargetIsContentEditable from '@/util/event-target-is-content-editable'
+import { Globals } from '@/globals'
+import isKeyOf from '@/util/is-key-of'
 
 @Component({})
 export default class AppNavItem extends Mixins(StateMixin, BrowserMixin) {
   @Prop({ type: String })
   readonly title!: string
 
   @Prop({ type: String })
-  readonly to?: string
+  readonly to!: string
 
   @Prop({ type: Boolean })
   readonly exact?: boolean
 
   @Prop({ type: String })
   readonly icon?: string
+
+  get accelerator (): string | undefined {
+    if (this.to) {
+      const destination = this.to === '/'
+        ? 'home'
+        : this.to.substring(1)
+
+      return isKeyOf(destination, Globals.KEYBOARD_SHORTCUTS)
+        ? Globals.KEYBOARD_SHORTCUTS[destination]
+        : undefined
+    }
+  }
+
+  get enableKeyboardShortcuts (): boolean {
+    return this.$store.state.config.uiSettings.general.enableKeyboardShortcuts
+  }
+
+  handleKeyDown (event: KeyboardEvent) {
+    if (
+      !this.enableKeyboardShortcuts ||
+      !this.accelerator
+    ) {
+      return
+    }
+
+    const { key, shiftKey, ctrlKey } = event
+
+    if (
+      key === this.accelerator &&
+      !shiftKey &&
+      !ctrlKey &&
+      !eventTargetIsContentEditable(event) &&
+      this.$router.currentRoute.path !== this.to
+    ) {
+      event.preventDefault()
+
+      this.$router.push(this.to)
+    }
+  }
+
+  mounted () {
+    window.addEventListener('keydown', this.handleKeyDown, false)
+  }
+
+  beforeDestroy () {
+    window.removeEventListener('keydown', this.handleKeyDown)
+  }
 }
 
 </script>