multiple column selection

packages/web/src/datagrid/ColumnManager.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import _ from 'lodash';
+  import _, { indexOf } from 'lodash';
   import { GridDisplay } from 'dbgate-datalib';
   import { filterName } from 'dbgate-tools';
   import CloseSearchButton from '../elements/CloseSearchButton.svelte';
@@ -25,6 +25,7 @@
 
   let selectedColumns = [];
   let currentColumnUniqueName = null;
+  let dragStartColumnIndex = null;
 
   $: items = display?.getColumns(filter)?.filter(column => filterName(filter, column.columnName)) || [];
 
@@ -67,9 +68,19 @@
     else if (e.keyCode == keycodes.end) moveIndex(() => items.length - 1);
     else if (e.keyCode == keycodes.pageUp) moveIndex(i => i - 10);
     else if (e.keyCode == keycodes.pageDown) moveIndex(i => i + 10);
+    else if (e.keyCode == keycodes.space) {
+      let checked = null;
+      for (const name of selectedColumns) {
+        const column = items.find(x => x.uniqueName == name);
+        if (column) {
+          if (checked == null) checked = !column.isChecked;
+          display.setColumnVisibility(column.uniquePath, checked);
+        }
+      }
+    }
   }
   function copyToClipboard() {
-    copyTextToClipboard(selectedColumns.join('\r\r'));
+    copyTextToClipboard(selectedColumns.join('\r\n'));
   }
 </script>
 
@@ -117,6 +128,30 @@
         selectedColumns = [column.uniqueName];
         currentColumnUniqueName = column.uniqueName;
       }}
+      on:mousemove={e => {
+        if (e.buttons == 1 && !selectedColumns.includes(column.uniqueName)) {
+          selectedColumns = [...selectedColumns, column.uniqueName];
+          if (domFocusField) domFocusField.focus();
+          currentColumnUniqueName = column.uniqueName;
+          if (!isJsonView) {
+            display.focusColumn(column.uniqueName);
+          }
+        }
+      }}
+      on:mousedown={e => {
+        dragStartColumnIndex = _.findIndex(items, x => x.uniqueName == column.uniqueName);
+        selectedColumns = [column.uniqueName];
+        if (domFocusField) domFocusField.focus();
+        currentColumnUniqueName = column.uniqueName;
+      }}
+      on:setvisibility={e => {
+        for (const name of selectedColumns) {
+          const column = items.find(x => x.uniqueName == name);
+          if (column) {
+            display.setColumnVisibility(column.uniquePath, e.detail);
+          }
+        }
+      }}
     />
   {/each}
 </ManagerInnerContainer>

packages/web/src/datagrid/ColumnManagerRow.svelte

@@ -3,11 +3,14 @@
 
   import FontIcon from '../icons/FontIcon.svelte';
   import ColumnLabel from '../elements/ColumnLabel.svelte';
+  import { createEventDispatcher } from 'svelte';
 
   export let column;
   export let display;
   export let isJsonView = false;
   export let isSelected = false;
+
+  const dispatch = createEventDispatcher();
 </script>
 
 <div
@@ -20,6 +23,9 @@
   }}
   class:isSelected
   on:click
+  on:mousedown
+  on:mousemove
+  on:mouseup
 >
   <span class="expandColumnIcon" style={`margin-right: ${5 + (column.uniquePath.length - 1) * 10}px`}>
     <FontIcon
@@ -33,7 +39,14 @@
     <input
       type="checkbox"
       checked={column.isChecked}
-      on:change={() => display.setColumnVisibility(column.uniquePath, !column.isChecked)}
+      on:click={e => {
+        e.stopPropagation();
+      }}
+      on:change={() => {
+        const newValue = !column.isChecked;
+        display.setColumnVisibility(column.uniquePath, newValue);
+        dispatch('setvisibility', newValue);
+      }}
     />
   {/if}
   <ColumnLabel {...column} />

packages/web/src/utility/keycodes.js

@@ -8,6 +8,7 @@ export default {
   pauseBreak: 19,
   capsLock: 20,
   escape: 27,
+  space: 32,
   pageUp: 33,
   pageDown: 34,
   end: 35,