From 296038a3de7c2d9dbe3b4215482d8d4c0bae4a32 Mon Sep 17 00:00:00 2001
From: Christian Schreier <christian.schreier@flyeralarm-industrialprint.com>
Date: Sat, 31 Jul 2021 12:35:48 +0200
Subject: [PATCH 1/2] enable horizontal scroll with touchpad

---
 packages/web/src/datagrid/DataGridCore.svelte | 78 ++++++++++---------
 1 file changed, 42 insertions(+), 36 deletions(-)

diff --git a/packages/web/src/datagrid/DataGridCore.svelte b/packages/web/src/datagrid/DataGridCore.svelte
index e9e59ac9b..40485c8e0 100644
--- a/packages/web/src/datagrid/DataGridCore.svelte
+++ b/packages/web/src/datagrid/DataGridCore.svelte
@@ -171,7 +171,6 @@
     if (_.isPlainObject(value) || _.isArray(value)) return JSON.stringify(value);
     return value;
   }
-
 </script>
 
 <script lang="ts">
@@ -666,43 +665,52 @@
 
   function handleGridWheel(event) {
     if (event.shiftKey) {
-      let newFirstVisibleColumnScrollIndex = firstVisibleColumnScrollIndex;
-      if (event.deltaY > 0) {
-        newFirstVisibleColumnScrollIndex++;
-      }
-      if (event.deltaY < 0) {
-        newFirstVisibleColumnScrollIndex--;
-      }
-      if (newFirstVisibleColumnScrollIndex > maxScrollColumn) {
-        newFirstVisibleColumnScrollIndex = maxScrollColumn;
-      }
-      if (newFirstVisibleColumnScrollIndex < 0) {
-        newFirstVisibleColumnScrollIndex = 0;
-      }
-      firstVisibleColumnScrollIndex = newFirstVisibleColumnScrollIndex;
-
-      domHorizontalScroll.scroll(newFirstVisibleColumnScrollIndex);
+      scrollHorizontal(event.deltaY, event.deltaX);
     } else {
-      let newFirstVisibleRowScrollIndex = firstVisibleRowScrollIndex;
-      if (event.deltaY > 0) {
-        newFirstVisibleRowScrollIndex += wheelRowCount;
-      }
-      if (event.deltaY < 0) {
-        newFirstVisibleRowScrollIndex -= wheelRowCount;
-      }
-      let rowCount = grider.rowCount;
-      if (newFirstVisibleRowScrollIndex + visibleRowCountLowerBound > rowCount) {
-        newFirstVisibleRowScrollIndex = rowCount - visibleRowCountLowerBound + 1;
-      }
-      if (newFirstVisibleRowScrollIndex < 0) {
-        newFirstVisibleRowScrollIndex = 0;
-      }
-      firstVisibleRowScrollIndex = newFirstVisibleRowScrollIndex;
-
-      domVerticalScroll.scroll(newFirstVisibleRowScrollIndex);
+      scrollHorizontal(event.deltaX, event.deltaY);
+      scrollVertical(event.deltaX, event.deltaY);
     }
   }
 
+  function scrollVertical(deltaX, deltaY) {
+    let newFirstVisibleRowScrollIndex = firstVisibleRowScrollIndex;
+    if (deltaY > 0 && deltaX === -0) {
+      newFirstVisibleRowScrollIndex += wheelRowCount;
+    } else if (deltaY < 0 && deltaX === -0) {
+      newFirstVisibleRowScrollIndex -= wheelRowCount;
+    }
+
+    let rowCount = grider.rowCount;
+    if (newFirstVisibleRowScrollIndex + visibleRowCountLowerBound > rowCount) {
+      newFirstVisibleRowScrollIndex = rowCount - visibleRowCountLowerBound + 1;
+    }
+    if (newFirstVisibleRowScrollIndex < 0) {
+      newFirstVisibleRowScrollIndex = 0;
+    }
+
+    firstVisibleRowScrollIndex = newFirstVisibleRowScrollIndex;
+    domVerticalScroll.scroll(newFirstVisibleRowScrollIndex);
+  }
+
+  function scrollHorizontal(deltaX, deltaY) {
+    let newFirstVisibleColumnScrollIndex = firstVisibleColumnScrollIndex;
+    if (deltaX > 0 && deltaY === -0) {
+      newFirstVisibleColumnScrollIndex++;
+    } else if (deltaX < 0 && deltaY === -0) {
+      newFirstVisibleColumnScrollIndex--;
+    }
+
+    if (newFirstVisibleColumnScrollIndex > maxScrollColumn) {
+      newFirstVisibleColumnScrollIndex = maxScrollColumn;
+    }
+    if (newFirstVisibleColumnScrollIndex < 0) {
+      newFirstVisibleColumnScrollIndex = 0;
+    }
+
+    firstVisibleColumnScrollIndex = newFirstVisibleColumnScrollIndex;
+    domHorizontalScroll.scroll(newFirstVisibleColumnScrollIndex);
+  }
+
   function getSelectedRowIndexes() {
     if (selectedCells.find(x => x[0] == 'header')) return _.range(0, grider.rowCount);
     return _.uniq((selectedCells || []).map(x => x[0])).filter(x => _.isNumber(x));
@@ -980,7 +988,6 @@
   );
 
   const menu = getContextMenu();
-
 </script>
 
 {#if !display || (!isDynamicStructure && (!columns || columns.length == 0))}
@@ -1187,5 +1194,4 @@
     right: 40px;
     bottom: 20px;
   }
-
 </style>

From 2baf9a1446ef0f05aa7e6f87b87ad77be0042372 Mon Sep 17 00:00:00 2001
From: Christian Schreier <christian.schreier@flyeralarm-industrialprint.com>
Date: Sat, 31 Jul 2021 12:37:14 +0200
Subject: [PATCH 2/2] enable scroll in whole table container

---
 packages/web/src/datagrid/DataGridCore.svelte | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/datagrid/DataGridCore.svelte b/packages/web/src/datagrid/DataGridCore.svelte
index 40485c8e0..f88a2ce0f 100644
--- a/packages/web/src/datagrid/DataGridCore.svelte
+++ b/packages/web/src/datagrid/DataGridCore.svelte
@@ -1008,7 +1008,13 @@
     {/each}
   </div>
 {:else}
-  <div class="container" bind:clientWidth={containerWidth} bind:clientHeight={containerHeight} use:contextMenu={menu}>
+  <div
+    class="container"
+    bind:clientWidth={containerWidth}
+    bind:clientHeight={containerHeight}
+    use:contextMenu={menu}
+    on:wheel={handleGridWheel}
+  >
     <input
       type="text"
       class="focus-field"
@@ -1026,7 +1032,6 @@
       on:mousedown={handleGridMouseDown}
       on:mousemove={handleGridMouseMove}
       on:mouseup={handleGridMouseUp}
-      on:wheel={handleGridWheel}
     >
       <thead>
         <tr>