@studiometa/js-toolkit 2.0.0-beta.15 → 2.0.0-beta.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit",
-  "version": "2.0.0-beta.15",
+  "version": "2.0.0-beta.16",
   "description": "A set of useful little bits of JavaScript to boost your project! 🚀",
   "publishConfig": {
     "access": "public"

package/services/drag.cjs

@@ -47,7 +47,7 @@ var MODES = {
   INERTIA: "inertia",
   STOP: "stop"
 };
-var instanceIds = 0;
+var id = 0;
 var Drag = class extends import_Service.default {
   constructor(target, options = {}) {
     super();
@@ -77,10 +77,11 @@ var Drag = class extends import_Service.default {
       }
     });
     __publicField(this, "options", {
-      dampFactor: 0.85
+      dampFactor: 0.85,
+      dragTreshold: 10
     });
-    instanceIds += 1;
-    this.id = `drag-${instanceIds}`;
+    id += 1;
+    this.id = `drag-${id}`;
     this.props.target = target;
     this.options = { ...this.options, ...options };
     this.pointerHandler = this.pointerHandler.bind(this);
@@ -91,18 +92,34 @@ var Drag = class extends import_Service.default {
     const options = { passive: true };
     this.props.target.addEventListener("mousedown", this, options);
     this.props.target.addEventListener("touchstart", this, options);
+    this.props.target.addEventListener("dragstart", this, { capture: true });
+    this.props.target.addEventListener("click", this, { capture: true });
     const pointer = (0, import_pointer.default)();
     pointer.add(this.id, this.pointerHandler);
     return this;
   }
   kill() {
-    this.props.target.removeEventListener("mousemove", this);
-    this.props.target.removeEventListener("touchmove", this);
+    this.props.target.removeEventListener("mousedown", this);
+    this.props.target.removeEventListener("touchstart", this);
+    this.props.target.removeEventListener("dragstart", this);
+    this.props.target.removeEventListener("click", this);
     const pointer = (0, import_pointer.default)();
     pointer.remove(this.id);
     return this;
   }
   handleEvent(event) {
+    if (event.type === "dragstart") {
+      event.preventDefault();
+      return;
+    }
+    if (event.type === "click") {
+      if (this.__shouldPreventClick) {
+        event.stopImmediatePropagation();
+        event.stopPropagation();
+        event.preventDefault();
+      }
+      return;
+    }
     const x = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
     const y = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
     this.start(x, y);
@@ -159,6 +176,7 @@ var Drag = class extends import_Service.default {
     }
   }
   pointerHandler(props) {
+    props.event.preventDefault();
     if (this.props.isGrabbing) {
       this.props.x = props.x;
       this.props.y = props.y;
@@ -180,6 +198,9 @@ var Drag = class extends import_Service.default {
   updateProps() {
     return this.props;
   }
+  get __shouldPreventClick() {
+    return Math.abs(this.props.distance.x) > this.options.dragTreshold || Math.abs(this.props.distance.y) > this.options.dragTreshold;
+  }
 };
 var instances = /* @__PURE__ */ new WeakMap();
 function useDrag(target, options) {

package/services/drag.d.ts

@@ -74,4 +74,5 @@ export type DragServiceProps = {
 };
 export type DragServiceOptions = {
     dampFactor?: number | undefined;
+    dragTreshold?: number | undefined;
 };

package/services/drag.js

@@ -15,7 +15,7 @@ const MODES = {
   INERTIA: "inertia",
   STOP: "stop"
 };
-let instanceIds = 0;
+let id = 0;
 class Drag extends Service {
   constructor(target, options = {}) {
     super();
@@ -45,10 +45,11 @@ class Drag extends Service {
       }
     });
     __publicField(this, "options", {
-      dampFactor: 0.85
+      dampFactor: 0.85,
+      dragTreshold: 10
     });
-    instanceIds += 1;
-    this.id = `drag-${instanceIds}`;
+    id += 1;
+    this.id = `drag-${id}`;
     this.props.target = target;
     this.options = { ...this.options, ...options };
     this.pointerHandler = this.pointerHandler.bind(this);
@@ -59,18 +60,34 @@ class Drag extends Service {
     const options = { passive: true };
     this.props.target.addEventListener("mousedown", this, options);
     this.props.target.addEventListener("touchstart", this, options);
+    this.props.target.addEventListener("dragstart", this, { capture: true });
+    this.props.target.addEventListener("click", this, { capture: true });
     const pointer = usePointer();
     pointer.add(this.id, this.pointerHandler);
     return this;
   }
   kill() {
-    this.props.target.removeEventListener("mousemove", this);
-    this.props.target.removeEventListener("touchmove", this);
+    this.props.target.removeEventListener("mousedown", this);
+    this.props.target.removeEventListener("touchstart", this);
+    this.props.target.removeEventListener("dragstart", this);
+    this.props.target.removeEventListener("click", this);
     const pointer = usePointer();
     pointer.remove(this.id);
     return this;
   }
   handleEvent(event) {
+    if (event.type === "dragstart") {
+      event.preventDefault();
+      return;
+    }
+    if (event.type === "click") {
+      if (this.__shouldPreventClick) {
+        event.stopImmediatePropagation();
+        event.stopPropagation();
+        event.preventDefault();
+      }
+      return;
+    }
     const x = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
     const y = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
     this.start(x, y);
@@ -127,6 +144,7 @@ class Drag extends Service {
     }
   }
   pointerHandler(props) {
+    props.event.preventDefault();
     if (this.props.isGrabbing) {
       this.props.x = props.x;
       this.props.y = props.y;
@@ -148,6 +166,9 @@ class Drag extends Service {
   updateProps() {
     return this.props;
   }
+  get __shouldPreventClick() {
+    return Math.abs(this.props.distance.x) > this.options.dragTreshold || Math.abs(this.props.distance.y) > this.options.dragTreshold;
+  }
 }
 const instances = /* @__PURE__ */ new WeakMap();
 function useDrag(target, options) {