Merge pull request #134 from MaxChu23/add-scroll-margins

Add scroll margins
simonwep · Sep 4, 2021 · 6339917 · 6339917
2 parents 5540eed + 17e36ca
commit 6339917
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 18 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -10,6 +10,7 @@
         "eslint:recommended"
     ],
     "rules": {
-        "no-console": "error"
+        "no-console": "error",
+        "object-curly-spacing": ["error", "never"]
     }
 }
diff --git a/packages/vanilla/README.md b/packages/vanilla/README.md
@@ -143,7 +143,12 @@ const selection = new SelectionArea({
 
             // Browsers handle mouse-wheel events differently, this number will be used as 
             // numerator to calculate the mount of px while scrolling manually: manualScrollSpeed / scrollSpeedDivider.
-            manualSpeed: 750
+            manualSpeed: 750,
+
+            // This property defines the virtual inset margins from the borders of the container
+            // component that, when crossed by the mouse/touch, trigger the scrolling. Useful for
+            // fullscreen containers.
+            startScrollMargins: {x: 0, y: 0}
         }
     },
 

diff --git a/packages/vanilla/src/index.ts b/packages/vanilla/src/index.ts
@@ -65,7 +65,8 @@ export default class SelectionArea extends EventTarget<SelectionEvents> {
                 startThreshold: {x: 10, y: 10},
                 scrolling: {
                     speedDivider: 10,
-                    manualSpeed: 750
+                    manualSpeed: 750,
+                    startScrollMargins: {x: 0, y: 0}
                 }
             },
 
@@ -455,28 +456,29 @@ export default class SelectionArea extends EventTarget<SelectionEvents> {
     }
 
     _recalculateSelectionAreaRect(): void {
-        const {_scrollSpeed, _areaLocation, _areaRect, _targetElement, _targetRect} = this;
+        const {_scrollSpeed, _areaLocation, _areaRect, _targetElement, _targetRect, _options} = this;
         const {scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth} = _targetElement as Element;
         const brect = _targetRect as DOMRect;
         const {x1, y1} = _areaLocation;
         let {x2, y2} = _areaLocation;
-
-        if (x2 < brect.left) {
-            _scrollSpeed.x = scrollLeft ? -abs(brect.left - x2) : 0;
-            x2 = brect.left;
-        } else if (x2 > brect.right) {
-            _scrollSpeed.x = scrollWidth - scrollLeft - clientWidth ? abs(brect.left + brect.width - x2) : 0;
-            x2 = brect.right;
+        const {behaviour: {scrolling: {startScrollMargins}}} = _options
+
+        if (x2 < brect.left + startScrollMargins.x) {
+            _scrollSpeed.x = scrollLeft ? -abs(brect.left - x2 + startScrollMargins.x) : 0;
+            x2 = x2 < brect.left ? brect.left : x2
+        } else if (x2 > brect.right - startScrollMargins.x) {
+            _scrollSpeed.x = scrollWidth - scrollLeft - clientWidth ? abs(brect.left + brect.width - x2 - startScrollMargins.x) : 0;
+            x2 = x2 > brect.right ? brect.right : x2
         } else {
             _scrollSpeed.x = 0;
         }
 
-        if (y2 < brect.top) {
-            _scrollSpeed.y = scrollTop ? -abs(brect.top - y2) : 0;
-            y2 = brect.top;
-        } else if (y2 > brect.bottom) {
-            _scrollSpeed.y = scrollHeight - scrollTop - clientHeight ? abs(brect.top + brect.height - y2) : 0;
-            y2 = brect.bottom;
+        if (y2 < brect.top + startScrollMargins.y) {
+            _scrollSpeed.y = scrollTop ? -abs(brect.top - y2 + startScrollMargins.y) : 0;
+            y2 = y2 < brect.top ? brect.top : y2
+        } else if (y2 > brect.bottom - startScrollMargins.y) {
+            _scrollSpeed.y = scrollHeight - scrollTop - clientHeight ? abs(brect.top + brect.height - y2 - startScrollMargins.y) : 0;
+            y2 = y2 > brect.bottom ? brect.bottom : y2
         } else {
             _scrollSpeed.y = 0;
         }

diff --git a/packages/vanilla/src/types.ts b/packages/vanilla/src/types.ts
@@ -51,6 +51,7 @@ export type OverlapMode = 'keep' | 'drop' | 'invert';
 export interface Scrolling {
     speedDivider: number;
     manualSpeed: number;
+    startScrollMargins: {x: number, y: number}
 }
 
 export interface SingleTap {

diff --git a/packages/vue/demo/index.ts b/packages/vue/demo/index.ts
@@ -1,4 +1,4 @@
-import { createApp } from 'vue'
+import {createApp} from 'vue'
 import App from './App.vue'
 
 createApp(App).mount('#root')