Merge pull request dbgate#1454 from dbgate/feature/resize-column

Improve splitter drag functionality and cursor handling

Author: janproch

packages/web/src/datagrid/DataGridCore.svelte

@@ -2500,14 +2500,12 @@
     padding: 0;
     margin: 0;
     background-color: var(--theme-datagrid-headercell-background);
-    overflow: hidden;
   }
   :global(.data-grid-focused) .active-header-cell {
     background-color: var(--theme-datagrid-focused-cell-background);
   }
   .filter-cell {
     text-align: left;
-    overflow: hidden;
     margin: 0;
     padding: 0;
   }

packages/web/src/utility/splitterDrag.ts

@@ -1,10 +1,18 @@
 export default function splitterDrag(node, axes) {
   let resizeStart = null;
+  let prevCursor = null;
+  let prevUserSelect = null;
 
   const handleResizeDown = e => {
+    if (e.button !== 0) return;
+    e.preventDefault();
     resizeStart = e[axes];
+    prevCursor = document.body.style.cursor;
+    prevUserSelect = document.body.style.userSelect;
     document.addEventListener('mousemove', handleResizeMove, true);
     document.addEventListener('mouseup', handleResizeEnd, true);
+    document.body.style.cursor = axes === 'clientX' ? 'col-resize' : 'row-resize';
+    document.body.style.userSelect = 'none';
   };
 
   const handleResizeMove = e => {
@@ -17,11 +25,20 @@ export default function splitterDrag(node, axes) {
       })
     );
   };
+
+  const restoreStyles = () => {
+    document.body.style.cursor = prevCursor;
+    document.body.style.userSelect = prevUserSelect;
+    prevCursor = null;
+    prevUserSelect = null;
+  };
+
   const handleResizeEnd = e => {
     e.preventDefault();
     resizeStart = null;
     document.removeEventListener('mousemove', handleResizeMove, true);
     document.removeEventListener('mouseup', handleResizeEnd, true);
+    restoreStyles();
   };
 
   node.addEventListener('mousedown', handleResizeDown);
@@ -32,6 +49,7 @@ export default function splitterDrag(node, axes) {
       if (resizeStart != null) {
         document.removeEventListener('mousemove', handleResizeMove, true);
         document.removeEventListener('mouseup', handleResizeEnd, true);
+        restoreStyles();
       }
     },
   };