keyboard commands

packages/web/src/App.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
+  import CommandListener from './commands/CommandListener.svelte';
+
   import PluginsProvider from './plugins/PluginsProvider.svelte';
   import Screen from './Screen.svelte';
 </script>
 
 <PluginsProvider />
+<CommandListener />
 <Screen />

packages/web/src/commands/CommandListener.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { commands } from '../stores';
+  import { get } from 'svelte/store';
+
+  function handleKeyDown(e) {
+    let keyText = '';
+    if (e.ctrlKey) keyText += 'Ctrl+';
+    if (e.shiftKey) keyText += 'Shift+';
+    if (e.altKey) keyText += 'Alt+';
+    keyText += e.key;
+
+    // console.log('keyText', keyText);
+
+    const commandsValue = get(commands);
+    const command: any = Object.values(commandsValue).find(
+      (x: any) => x.enabled && x.keyText && x.keyText.toLowerCase() == keyText.toLowerCase()
+    );
+
+    if (command) {
+      e.preventDefault();
+      command.onClick();
+    }
+  }
+</script>
+
+<svelte:window on:keydown={handleKeyDown} />

packages/web/src/commands/CommandPalette.svelte

@@ -2,7 +2,9 @@
   registerCommand({
     id: 'commandPalette.show',
     text: 'Command palette: Show',
+    keyText: 'F1',
     onClick: () => visibleCommandPalette.set(true),
+    enabledStore: derived(visibleCommandPalette, $visibleCommandPalette => !$visibleCommandPalette),
   });
 </script>
 
@@ -10,6 +12,7 @@
   import { filterName } from 'dbgate-datalib';
 
   import _ from 'lodash';
+  import { derived } from 'svelte/store';
   import { onMount } from 'svelte';
   import { commands, visibleCommandPalette } from '../stores';
   import { clickOutside } from '../utility/clickOutside';
@@ -24,7 +27,10 @@
 
   onMount(() => domInput.focus());
 
-  $: sortedComands = _.sortBy(Object.values($commands), 'text');
+  $: sortedComands = _.sortBy(
+    Object.values($commands).filter(x => x.enabled),
+    'text'
+  );
 
   $: filteredItems = (parentCommand ? parentCommand.getSubCommands() : sortedComands).filter(x =>
     filterName(filter, x.text)
@@ -55,7 +61,10 @@
   </div>
   {#each filteredItems as command, index}
     <div class="command" class:selected={index == selectedIndex} on:click={() => handleCommand(command)}>
-      {command.text}
+      <div>{command.text}</div>
+      {#if command.keyText}
+        <div class="shortcut">{command.keyText}</div>
+      {/if}
     </div>
   {/each}
 </div>
@@ -75,6 +84,8 @@
   }
   .command {
     padding: 5px;
+    display: flex;
+    justify-content: space-between;
   }
   .command:hover {
     background: var(--theme-bg-3);
@@ -82,4 +93,7 @@
   .command.selected {
     background: var(--theme-bg-selected);
   }
+  .shortcut {
+    background: var(--theme-bg-3);
+  }
 </style>

packages/web/src/commands/registerCommand.ts

@@ -8,6 +8,7 @@ export interface SubCommand {
 export interface GlobalCommand {
   id: string;
   text: string;
+  keyText?: string;
   getSubCommands?: () => SubCommand[];
   onClick?: Function;
   enabledStore?: any;

packages/web/src/datagrid/DataGridCore.svelte

@@ -1,6 +1,20 @@
+<script lang="ts" context="module">
+  const currentDataGrid = writable(null);
+
+  registerCommand({
+    id: 'dataGrid.refresh',
+    text: 'Data grid: Refresh',
+    keyText: 'F5',
+    enabledStore: derived([currentDataGrid], ([grid]) => grid != null),
+    onClick: () => get(currentDataGrid).refresh(),
+  });
+</script>
+
 <script lang="ts">
   import { GridDisplay } from 'dbgate-datalib';
   import _ from 'lodash';
+  import { writable, get, derived } from 'svelte/store';
+  import registerCommand from '../commands/registerCommand';
   import ColumnHeaderControl from './ColumnHeaderControl.svelte';
   import DataGridRow from './DataGridRow.svelte';
   import {
@@ -20,6 +34,7 @@
   export let conid = undefined;
   export let database = undefined;
   export let frameSelection = undefined;
+  export let instance = undefined;
 
   const wheelRowCount = 5;
 
@@ -186,10 +201,21 @@
 
     domVerticalScroll.scroll(newFirstVisibleRowScrollIndex);
   }
+
+  export function refresh() {
+    display.reload();
+  }
 </script>
 
 <div class="container" bind:clientWidth={containerWidth} bind:clientHeight={containerHeight}>
-  <input type="text" class="focus-field" bind:this={domFocusField} />
+  <input
+    type="text"
+    class="focus-field"
+    bind:this={domFocusField}
+    on:focus={() => {
+      currentDataGrid.set(instance);
+    }}
+  />
   <table
     class="table"
     on:mousedown={handleGridMouseDown}

packages/web/src/datagrid/DataGridRow.svelte

@@ -11,6 +11,7 @@
   export let frameSelection = undefined;
   export let selectedCells = undefined;
   export let autofillSelectedCells = undefined;
+  export let autofillMarkerCell = undefined;
 
   $: rowData = grider.getRowData(rowIndex);
   $: rowStatus = grider.getRowStatus(rowIndex);

packages/web/src/datagrid/LoadingDataGridCore.svelte

@@ -5,6 +5,7 @@
   export let dataPageAvailable;
   export let loadRowCount;
   export let grider;
+  export let display;
   // export let griderFactory;
 
   export let loadedRows = [];
@@ -14,6 +15,7 @@
   let allRowCount = null;
   let errorMessage = null;
   let loadNextDataToken = 0;
+  let domComponent;
 
   async function loadNextData() {
     if (isLoading) return;
@@ -65,6 +67,26 @@
       }
     }
   }
+
+  function reload() {
+    allRowCount = null;
+    isLoading = false;
+    loadedRows = [];
+    isLoadedAll = false;
+    loadedTime = new Date().getTime();
+    errorMessage = null;
+    loadNextDataToken = 0;
+  }
+
+  $: if (display.cache.refreshTime > loadedTime) {
+    reload();
+  }
 </script>
 
-<DataGridCore {...$$props} loadNextData={handleLoadNextData} {grider} />
+<DataGridCore
+  {...$$props}
+  loadNextData={handleLoadNextData}
+  {grider}
+  bind:this={domComponent}
+  instance={domComponent}
+/>

packages/web/src/stores.ts

@@ -1,4 +1,4 @@
-import { writable } from 'svelte/store';
+import { writable, derived } from 'svelte/store';
 import { ExtensionsDirectory } from 'dbgate-types';
 
 interface TabDefinition {
@@ -28,5 +28,6 @@ export const extensions = writable<ExtensionsDirectory>(null);
 export const visibleCommandPalette = writable(false);
 export const commands = writable({});
 export const currentTheme = writableWithStorage('theme-light', 'currentTheme');
+export const activeTabId = derived([openedTabs], ([$openedTabs]) => $openedTabs.find(x => x.selected)?.tabid);
 
 // export const leftPanelWidth = writable(300);

packages/web/src/widgets/WidgetIconPanel.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { update } from 'lodash';
   import FontIcon from '../icons/FontIcon.svelte';
   import { selectedWidget, visibleCommandPalette } from '../stores';