Add beforedrag event

Closes #135

.eslintrc

@@ -10,6 +10,7 @@
         "eslint:recommended"
     ],
     "rules": {
+        "semi": "error",
         "no-console": "error",
         "object-curly-spacing": ["error", "never"]
     }

packages/vanilla/README.md

@@ -179,9 +179,10 @@ const selection = new SelectionArea({
 
 Use the `on(event, cb)` and `off(event, cb)` functions to bind / unbind event-listener.
 
-| Event          | Description |
-| -------------- | ----------- | 
+| Event | Description |
+| ----- | ----------- | 
 | `beforestart` | The user tapped one of the areas within the specified boundaries. Return `false` to cancel selection immediatly.  |
+| `beforedrag` | Same as `beforestart` but _before_ the user starts selecting by dragging the mouse. Can be used to conditionally allow a selection by dragging. Return `false` to cancel the selection. |
 | `start` | Selection started, here you can decide if you want to keep your previously selected elements. | 
 | `move` | Selection is active, user is moving the pointer around. |
 | `stop` | Selection has stopped. |
@@ -199,6 +200,10 @@ selection.on('beforestart', evt => {
     // });
 
     console.log('beforestart', evt);
+}).on('beforedrag', evt => {
+
+    // Same as 'beforestart' but before a selection via dragging happens.
+    console.log('beforedrag', evt);
 }).on('start', evt => {
 
     // A selection got initiated, you could now clear the previous selection or

packages/vanilla/src/index.ts

@@ -261,6 +261,12 @@ export default class SelectionArea extends EventTarget<SelectionEvents> {
             (thresholdType === 'object' && abs(x - x1) >= (startThreshold as Coordinates).x || abs(y - y1) >= (startThreshold as Coordinates).y)
         ) {
             off(document, ['mousemove', 'touchmove'], this._delayedTapMove, {passive: false});
+
+            if (this._emitEvent('beforedrag', evt) === false) {
+                off(document, ['mouseup', 'touchcancel', 'touchend'], this._onTapStop);
+                return;
+            }
+
             on(document, ['mousemove', 'touchmove'], this._onTapMove, {passive: false});
 
             // Make area element visible
@@ -461,24 +467,24 @@ export default class SelectionArea extends EventTarget<SelectionEvents> {
         const brect = _targetRect as DOMRect;
         const {x1, y1} = _areaLocation;
         let {x2, y2} = _areaLocation;
-        const {behaviour: {scrolling: {startScrollMargins}}} = _options
+        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
+            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
+            x2 = x2 > brect.right ? brect.right : x2;
         } else {
             _scrollSpeed.x = 0;
         }
 
         if (y2 < brect.top + startScrollMargins.y) {
             _scrollSpeed.y = scrollTop ? -abs(brect.top - y2 + startScrollMargins.y) : 0;
-            y2 = y2 < brect.top ? brect.top : y2
+            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
+            y2 = y2 > brect.bottom ? brect.bottom : y2;
         } else {
             _scrollSpeed.y = 0;
         }

packages/vanilla/src/types.ts

@@ -28,6 +28,7 @@ export interface SelectionEvent {
 
 export type SelectionEvents = {
     beforestart: (e: SelectionEvent) => boolean | void;
+    beforedrag: (e: SelectionEvent) => boolean | void;
     start: (e: SelectionEvent) => void;
     move: (e: SelectionEvent) => void
     stop: (e: SelectionEvent) => void;