@studiometa/js-toolkit 2.4.6 → 2.5.0

package/Base/managers/EventsManager.cjs

@@ -41,19 +41,27 @@ var import_utils2 = require("../utils.cjs");
 var import_AbstractManager = __toESM(require("./AbstractManager.cjs"), 1);
 var import_RefsManager = require("./RefsManager.cjs");
 var names = /* @__PURE__ */ new Map();
+var normalizeRegex1 = /[A-Z]([A-Z].*)/g;
+var normalizeRegex2 = /[^a-zA-Z\d\s:]/g;
+var normalizeRegex3 = /(^\w|\s+\w)/g;
 function normalizeName(name) {
   if (!names.has(name)) {
     names.set(
       name,
-      name.replace(/[A-Z]([A-Z].*)/g, (c) => c.toLowerCase()).replace(/[^a-zA-Z\d\s:]/g, " ").replace(/(^\w|\s+\w)/g, (c) => c.trim().toUpperCase()).trim()
+      name.replace(normalizeRegex1, (c) => c.toLowerCase()).replace(normalizeRegex2, " ").replace(normalizeRegex3, (c) => c.trim().toUpperCase()).trim()
     );
   }
   return names.get(name);
 }
 var eventNames = /* @__PURE__ */ new Map();
+var normalizeEventRegex1 = /[A-Z]/g;
+var normalizeEventRegex2 = /^-/;
 function normalizeEventName(name) {
   if (!eventNames.has(name)) {
-    eventNames.set(name, name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`).replace(/^-/, ""));
+    eventNames.set(
+      name,
+      name.replace(normalizeEventRegex1, (c) => `-${c.toLowerCase()}`).replace(normalizeEventRegex2, "")
+    );
   }
   return eventNames.get(name);
 }
@@ -100,13 +108,29 @@ function manageChild(that, name, instance, mode = "add") {
     instance[action](event, that.__childrenHandler);
   });
 }
+var isDocumentRegex = /^onDocument[A-Z][a-z]+/;
+var isWindowRegex = /^onWindow[A-Z][a-z]+/;
+var methodIsDocument = (method) => isDocumentRegex.test(method);
+var methodIsWindow = (method) => isWindowRegex.test(method);
+var methodIsGlobal = (method) => methodIsWindow(method) || methodIsDocument(method);
+var getGlobalEventTarget = (method) => methodIsDocument(method) ? document : window;
 function manageRootElement(that, mode = "add") {
   const modeMethod = `${mode}EventListener`;
   const methods = getEventMethodsByName(that);
   const { __base: base, __config: config } = that;
-  methods.map((method) => getEventNameByMethod(method)).filter((event) => (0, import_utils2.eventIsDefinedInConfig)(event, config) || (0, import_utils2.eventIsNative)(event, base.$el)).forEach((event) => {
-    const target = (0, import_utils2.getEventTarget)(base, event, config);
-    target[modeMethod](event, that.__rootElementHandler);
+  methods.forEach((method) => {
+    let event = getEventNameByMethod(method);
+    if ((0, import_utils2.eventIsDefinedInConfig)(event, config) || (0, import_utils2.eventIsNative)(event, base.$el)) {
+      const target = (0, import_utils2.getEventTarget)(base, event, config);
+      target[modeMethod](event, that.__rootElementHandler);
+    } else if (methodIsGlobal(method)) {
+      event = getEventNameByMethod(method, methodIsDocument(method) ? "document" : "window");
+      const target = getGlobalEventTarget(method);
+      target[modeMethod](
+        event,
+        methodIsDocument(method) ? that.__documentHandler : that.__windowHandler
+      );
+    }
   });
 }
 var EventsManager = class extends import_AbstractManager.default {
@@ -124,6 +148,20 @@ var EventsManager = class extends import_AbstractManager.default {
         }
       }
     });
+    __publicField(this, "__documentHandler", {
+      handleEvent: (event) => {
+        const normalizedEventName = normalizeName(event.type);
+        const method = `onDocument${normalizedEventName}`;
+        this.__base[method](event);
+      }
+    });
+    __publicField(this, "__windowHandler", {
+      handleEvent: (event) => {
+        const normalizedEventName = normalizeName(event.type);
+        const method = `onWindow${normalizedEventName}`;
+        this.__base[method](event);
+      }
+    });
     __publicField(this, "__refsHandler", {
       handleEvent: (event) => {
         const ref = event.currentTarget;
@@ -159,7 +197,9 @@ var EventsManager = class extends import_AbstractManager.default {
       "__methodsCache",
       "__rootElementHandler",
       "__refsHandler",
-      "__childrenHandler"
+      "__childrenHandler",
+      "__documentHandler",
+      "__windowHandler"
     ]);
   }
   bindRef(name, elements) {

package/Base/managers/EventsManager.d.ts

@@ -39,6 +39,30 @@ export default class EventsManager extends AbstractManager {
      * Event listener object for the root element.
      */
     __rootElementHandler: EventListenerObject;
+    /**
+     * Event listener object for the root element.
+     *
+     * @type {EventListenerObject}
+     */
+    __documentHandler: {
+        /**
+         * @param   {Event|CustomEvent} event
+         * @returns {void}
+         */
+        handleEvent: (event: any) => void;
+    };
+    /**
+     * Event listener object for the root element.
+     *
+     * @type {EventListenerObject}
+     */
+    __windowHandler: {
+        /**
+         * @param   {Event|CustomEvent} event
+         * @returns {void}
+         */
+        handleEvent: (event: any) => void;
+    };
     /**
      * Event listener object for the refs.
      */

package/Base/managers/EventsManager.js

@@ -10,19 +10,27 @@ import { getEventTarget, eventIsNative, eventIsDefinedInConfig } from "../utils.
 import AbstractManager from "./AbstractManager.js";
 import { normalizeRefName } from "./RefsManager.js";
 const names = /* @__PURE__ */ new Map();
+const normalizeRegex1 = /[A-Z]([A-Z].*)/g;
+const normalizeRegex2 = /[^a-zA-Z\d\s:]/g;
+const normalizeRegex3 = /(^\w|\s+\w)/g;
 function normalizeName(name) {
   if (!names.has(name)) {
     names.set(
       name,
-      name.replace(/[A-Z]([A-Z].*)/g, (c) => c.toLowerCase()).replace(/[^a-zA-Z\d\s:]/g, " ").replace(/(^\w|\s+\w)/g, (c) => c.trim().toUpperCase()).trim()
+      name.replace(normalizeRegex1, (c) => c.toLowerCase()).replace(normalizeRegex2, " ").replace(normalizeRegex3, (c) => c.trim().toUpperCase()).trim()
     );
   }
   return names.get(name);
 }
 const eventNames = /* @__PURE__ */ new Map();
+const normalizeEventRegex1 = /[A-Z]/g;
+const normalizeEventRegex2 = /^-/;
 function normalizeEventName(name) {
   if (!eventNames.has(name)) {
-    eventNames.set(name, name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`).replace(/^-/, ""));
+    eventNames.set(
+      name,
+      name.replace(normalizeEventRegex1, (c) => `-${c.toLowerCase()}`).replace(normalizeEventRegex2, "")
+    );
   }
   return eventNames.get(name);
 }
@@ -69,13 +77,29 @@ function manageChild(that, name, instance, mode = "add") {
     instance[action](event, that.__childrenHandler);
   });
 }
+const isDocumentRegex = /^onDocument[A-Z][a-z]+/;
+const isWindowRegex = /^onWindow[A-Z][a-z]+/;
+const methodIsDocument = (method) => isDocumentRegex.test(method);
+const methodIsWindow = (method) => isWindowRegex.test(method);
+const methodIsGlobal = (method) => methodIsWindow(method) || methodIsDocument(method);
+const getGlobalEventTarget = (method) => methodIsDocument(method) ? document : window;
 function manageRootElement(that, mode = "add") {
   const modeMethod = `${mode}EventListener`;
   const methods = getEventMethodsByName(that);
   const { __base: base, __config: config } = that;
-  methods.map((method) => getEventNameByMethod(method)).filter((event) => eventIsDefinedInConfig(event, config) || eventIsNative(event, base.$el)).forEach((event) => {
-    const target = getEventTarget(base, event, config);
-    target[modeMethod](event, that.__rootElementHandler);
+  methods.forEach((method) => {
+    let event = getEventNameByMethod(method);
+    if (eventIsDefinedInConfig(event, config) || eventIsNative(event, base.$el)) {
+      const target = getEventTarget(base, event, config);
+      target[modeMethod](event, that.__rootElementHandler);
+    } else if (methodIsGlobal(method)) {
+      event = getEventNameByMethod(method, methodIsDocument(method) ? "document" : "window");
+      const target = getGlobalEventTarget(method);
+      target[modeMethod](
+        event,
+        methodIsDocument(method) ? that.__documentHandler : that.__windowHandler
+      );
+    }
   });
 }
 class EventsManager extends AbstractManager {
@@ -93,6 +117,20 @@ class EventsManager extends AbstractManager {
         }
       }
     });
+    __publicField(this, "__documentHandler", {
+      handleEvent: (event) => {
+        const normalizedEventName = normalizeName(event.type);
+        const method = `onDocument${normalizedEventName}`;
+        this.__base[method](event);
+      }
+    });
+    __publicField(this, "__windowHandler", {
+      handleEvent: (event) => {
+        const normalizedEventName = normalizeName(event.type);
+        const method = `onWindow${normalizedEventName}`;
+        this.__base[method](event);
+      }
+    });
     __publicField(this, "__refsHandler", {
       handleEvent: (event) => {
         const ref = event.currentTarget;
@@ -128,7 +166,9 @@ class EventsManager extends AbstractManager {
       "__methodsCache",
       "__rootElementHandler",
       "__refsHandler",
-      "__childrenHandler"
+      "__childrenHandler",
+      "__documentHandler",
+      "__windowHandler"
     ]);
   }
   bindRef(name, elements) {

package/helpers/getClosestParent.cjs

@@ -0,0 +1,48 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/js-toolkit/helpers/getClosestParent.ts
+var getClosestParent_exports = {};
+__export(getClosestParent_exports, {
+  default: () => getClosestParent
+});
+module.exports = __toCommonJS(getClosestParent_exports);
+var import_getInstanceFromElement = __toESM(require("./getInstanceFromElement.cjs"), 1);
+function walkAncestorsWhile(element, condition, limit = 1e3) {
+  let parent = element.parentElement;
+  let count = 0;
+  while (parent && condition(parent) && count < limit) {
+    parent = parent.parentElement;
+    count += 1;
+  }
+  return parent;
+}
+function getClosestParent(childInstance, ParentConstructor) {
+  const parentEl = walkAncestorsWhile(
+    childInstance.$el,
+    (element) => !(0, import_getInstanceFromElement.default)(element, ParentConstructor)
+  );
+  return parentEl ? (0, import_getInstanceFromElement.default)(parentEl, ParentConstructor) : null;
+}
+if (module.exports.default) module.exports = module.exports.default;

package/helpers/getClosestParent.d.ts

@@ -0,0 +1,5 @@
+import type { Base, BaseConstructor } from '../Base/index.js';
+/**
+ * Get the closest parent of a component.
+ */
+export default function getClosestParent<T extends BaseConstructor>(childInstance: Base, ParentConstructor: T): InstanceType<T>;

package/helpers/getClosestParent.js

@@ -0,0 +1,20 @@
+import getInstanceFromElement from "./getInstanceFromElement.js";
+function walkAncestorsWhile(element, condition, limit = 1e3) {
+  let parent = element.parentElement;
+  let count = 0;
+  while (parent && condition(parent) && count < limit) {
+    parent = parent.parentElement;
+    count += 1;
+  }
+  return parent;
+}
+function getClosestParent(childInstance, ParentConstructor) {
+  const parentEl = walkAncestorsWhile(
+    childInstance.$el,
+    (element) => !getInstanceFromElement(element, ParentConstructor)
+  );
+  return parentEl ? getInstanceFromElement(parentEl, ParentConstructor) : null;
+}
+export {
+  getClosestParent as default
+};

package/helpers/index.cjs

@@ -27,14 +27,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var helpers_exports = {};
 __export(helpers_exports, {
   createApp: () => import_createApp.default,
+  getClosestParent: () => import_getClosestParent.default,
   getInstanceFromElement: () => import_getInstanceFromElement.default,
   importOnInteraction: () => import_importOnInteraction.default,
   importWhenIdle: () => import_importWhenIdle.default,
   importWhenVisible: () => import_importWhenVisible.default
 });
 module.exports = __toCommonJS(helpers_exports);
-var import_createApp = __toESM(require("./createApp.cjs"), 1);
 __reExport(helpers_exports, require("./getDirectChildren.cjs"), module.exports);
+var import_createApp = __toESM(require("./createApp.cjs"), 1);
+var import_getClosestParent = __toESM(require("./getClosestParent.cjs"), 1);
 var import_getInstanceFromElement = __toESM(require("./getInstanceFromElement.cjs"), 1);
 var import_importOnInteraction = __toESM(require("./importOnInteraction.cjs"), 1);
 var import_importWhenIdle = __toESM(require("./importWhenIdle.cjs"), 1);

package/helpers/index.d.ts

@@ -1,5 +1,6 @@
-export { default as createApp } from './createApp.js';
 export * from './getDirectChildren.js';
+export { default as createApp } from './createApp.js';
+export { default as getClosestParent } from './getClosestParent.js';
 export { default as getInstanceFromElement } from './getInstanceFromElement.js';
 export { default as importOnInteraction } from './importOnInteraction.js';
 export { default as importWhenIdle } from './importWhenIdle.js';

package/helpers/index.js

@@ -1,13 +1,15 @@
-import { default as default2 } from "./createApp.js";
 export * from "./getDirectChildren.js";
-import { default as default3 } from "./getInstanceFromElement.js";
-import { default as default4 } from "./importOnInteraction.js";
-import { default as default5 } from "./importWhenIdle.js";
-import { default as default6 } from "./importWhenVisible.js";
+import { default as default2 } from "./createApp.js";
+import { default as default3 } from "./getClosestParent.js";
+import { default as default4 } from "./getInstanceFromElement.js";
+import { default as default5 } from "./importOnInteraction.js";
+import { default as default6 } from "./importWhenIdle.js";
+import { default as default7 } from "./importWhenVisible.js";
 export {
   default2 as createApp,
-  default3 as getInstanceFromElement,
-  default4 as importOnInteraction,
-  default5 as importWhenIdle,
-  default6 as importWhenVisible
+  default3 as getClosestParent,
+  default4 as getInstanceFromElement,
+  default5 as importOnInteraction,
+  default6 as importWhenIdle,
+  default7 as importWhenVisible
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit",
-  "version": "2.4.6",
+  "version": "2.5.0",
   "description": "A set of useful little bits of JavaScript to boost your project! 🚀",
   "publishConfig": {
     "access": "public"
@@ -24,12 +24,14 @@
     ".": {
       "import": "./index.js",
       "require": "./index.cjs",
-      "types": "./index.d.ts"
+      "types": "./index.d.ts",
+      "default": "./index.js"
     },
     "./utils": {
       "import": "./utils/index.js",
       "require": "./utils/index.cjs",
-      "types": "./utils/index.d.ts"
+      "types": "./utils/index.d.ts",
+      "default": "./utils/index.js"
     }
   },
   "keywords": [

package/services/drag.cjs

@@ -29,9 +29,9 @@ __export(drag_exports, {
 });
 module.exports = __toCommonJS(drag_exports);
 var import_service = require("./service.cjs");
-var import_pointer = __toESM(require("./pointer.cjs"), 1);
 var import_raf = __toESM(require("./raf.cjs"), 1);
 var import_inertiaFinalValue = __toESM(require("../utils/math/inertiaFinalValue.cjs"), 1);
+var import_utils = require("../utils/index.cjs");
 var MODES = {
   START: "start",
   DRAG: "drag",
@@ -40,13 +40,26 @@ var MODES = {
   STOP: "stop"
 };
 var count = 0;
+var events = ["pointerdown", "pointerup"];
+var passiveEventOptions = { passive: true };
+function getEventPosition(event) {
+  const eventOrTouch = (0, import_utils.isDefined)(event.touches) ? event.touches[0] : event;
+  return {
+    x: eventOrTouch.clientX,
+    y: eventOrTouch.clientY
+  };
+}
 function createDragService(target, { dampFactor = 0.85, dragTreshold = 10 } = {}) {
   count += 1;
   const id = `drag-${count}`;
+  let previousEvent;
   function shouldPreventClick() {
     return Math.abs(props.distance.x) > dragTreshold || Math.abs(props.distance.y) > dragTreshold;
   }
   function start(x, y) {
+    if (props.isGrabbing) {
+      return;
+    }
     props.x = x;
     props.y = y;
     props.origin.x = x;
@@ -60,8 +73,12 @@ function createDragService(target, { dampFactor = 0.85, dragTreshold = 10 } = {}
     props.mode = MODES.START;
     props.isGrabbing = true;
     trigger(props);
+    document.addEventListener("touchmove", handleEvent, passiveEventOptions);
+    document.addEventListener("mousemove", handleEvent, passiveEventOptions);
   }
   function drop() {
+    document.removeEventListener("touchmove", handleEvent);
+    document.removeEventListener("mousemove", handleEvent);
     props.isGrabbing = false;
     props.mode = MODES.DROP;
     props.hasInertia = true;
@@ -76,6 +93,7 @@ function createDragService(target, { dampFactor = 0.85, dragTreshold = 10 } = {}
   }
   function stop() {
     (0, import_raf.default)().remove(id);
+    props.isGrabbing = false;
     props.hasInertia = false;
     props.mode = MODES.STOP;
     trigger(props);
@@ -97,41 +115,51 @@ function createDragService(target, { dampFactor = 0.85, dragTreshold = 10 } = {}
       }
     }
   }
-  function pointerHandler(pointerProps) {
+  function drag(event) {
     if (props.isGrabbing) {
-      props.x = pointerProps.x;
-      props.y = pointerProps.y;
-      props.delta.x = pointerProps.delta.x;
-      props.delta.y = pointerProps.delta.y;
-      props.final.x = pointerProps.x;
-      props.final.y = pointerProps.y;
+      const position = getEventPosition(event);
+      props.x = position.x;
+      props.y = position.y;
+      if (previousEvent) {
+        const previousPosition = getEventPosition(previousEvent);
+        props.delta.x = position.x - previousPosition.x;
+        props.delta.y = position.y - previousPosition.y;
+      }
+      props.final.x = position.x;
+      props.final.y = position.y;
       props.distance.x = props.x - props.origin.x;
       props.distance.y = props.y - props.origin.y;
       if (props.mode !== MODES.DRAG) {
         props.mode = MODES.DRAG;
       }
       trigger(props);
-      if (!pointerProps.isDown) {
-        drop();
-      }
+      previousEvent = event;
     }
   }
   function handleEvent(event) {
-    if (event.type === "dragstart") {
-      event.preventDefault();
-      return;
-    }
-    if (event.type === "click") {
-      if (shouldPreventClick()) {
-        event.stopImmediatePropagation();
-        event.stopPropagation();
+    switch (event.type) {
+      case "dragstart":
         event.preventDefault();
-      }
-      return;
+        break;
+      case "click":
+        if (shouldPreventClick()) {
+          event.stopImmediatePropagation();
+          event.stopPropagation();
+          event.preventDefault();
+        }
+        break;
+      case "pointerup":
+        drop();
+        break;
+      case "touchmove":
+      case "mousemove":
+        drag(event);
+        break;
+      default:
+        if (event.button === 0) {
+          start(event.x, event.y);
+        }
     }
-    const x = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
-    const y = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
-    start(x, y);
   }
   const { add, remove, has, trigger, props } = (0, import_service.useService)({
     props: {
@@ -159,21 +187,18 @@ function createDragService(target, { dampFactor = 0.85, dragTreshold = 10 } = {}
       }
     },
     init() {
-      const options = { passive: true };
-      props.target.addEventListener("mousedown", handleEvent, options);
-      props.target.addEventListener("touchstart", handleEvent, options);
-      props.target.addEventListener("dragstart", handleEvent, { capture: true });
-      props.target.addEventListener("click", handleEvent, { capture: true });
-      const pointer = (0, import_pointer.default)();
-      pointer.add(id, pointerHandler);
+      events.forEach((event) => {
+        target.addEventListener(event, handleEvent, passiveEventOptions);
+      });
+      target.addEventListener("dragstart", handleEvent, { capture: true });
+      target.addEventListener("click", handleEvent, { capture: true });
     },
     kill() {
-      props.target.removeEventListener("mousedown", handleEvent);
-      props.target.removeEventListener("touchstart", handleEvent);
-      props.target.removeEventListener("dragstart", handleEvent);
-      props.target.removeEventListener("click", handleEvent);
-      const pointer = (0, import_pointer.default)();
-      pointer.remove(id);
+      events.forEach((event) => {
+        target.removeEventListener(event, handleEvent);
+      });
+      target.removeEventListener("dragstart", handleEvent);
+      target.removeEventListener("click", handleEvent);
     }
   });
   return {

package/services/drag.js

@@ -1,7 +1,7 @@
 import { useService } from "./service.js";
-import usePointer from "./pointer.js";
 import useRaf from "./raf.js";
 import inertiaFinalValue from "../utils/math/inertiaFinalValue.js";
+import { isDefined } from "../utils/index.js";
 const MODES = {
   START: "start",
   DRAG: "drag",
@@ -10,13 +10,26 @@ const MODES = {
   STOP: "stop"
 };
 let count = 0;
+const events = ["pointerdown", "pointerup"];
+const passiveEventOptions = { passive: true };
+function getEventPosition(event) {
+  const eventOrTouch = isDefined(event.touches) ? event.touches[0] : event;
+  return {
+    x: eventOrTouch.clientX,
+    y: eventOrTouch.clientY
+  };
+}
 function createDragService(target, { dampFactor = 0.85, dragTreshold = 10 } = {}) {
   count += 1;
   const id = `drag-${count}`;
+  let previousEvent;
   function shouldPreventClick() {
     return Math.abs(props.distance.x) > dragTreshold || Math.abs(props.distance.y) > dragTreshold;
   }
   function start(x, y) {
+    if (props.isGrabbing) {
+      return;
+    }
     props.x = x;
     props.y = y;
     props.origin.x = x;
@@ -30,8 +43,12 @@ function createDragService(target, { dampFactor = 0.85, dragTreshold = 10 } = {}
     props.mode = MODES.START;
     props.isGrabbing = true;
     trigger(props);
+    document.addEventListener("touchmove", handleEvent, passiveEventOptions);
+    document.addEventListener("mousemove", handleEvent, passiveEventOptions);
   }
   function drop() {
+    document.removeEventListener("touchmove", handleEvent);
+    document.removeEventListener("mousemove", handleEvent);
     props.isGrabbing = false;
     props.mode = MODES.DROP;
     props.hasInertia = true;
@@ -46,6 +63,7 @@ function createDragService(target, { dampFactor = 0.85, dragTreshold = 10 } = {}
   }
   function stop() {
     useRaf().remove(id);
+    props.isGrabbing = false;
     props.hasInertia = false;
     props.mode = MODES.STOP;
     trigger(props);
@@ -67,41 +85,51 @@ function createDragService(target, { dampFactor = 0.85, dragTreshold = 10 } = {}
       }
     }
   }
-  function pointerHandler(pointerProps) {
+  function drag(event) {
     if (props.isGrabbing) {
-      props.x = pointerProps.x;
-      props.y = pointerProps.y;
-      props.delta.x = pointerProps.delta.x;
-      props.delta.y = pointerProps.delta.y;
-      props.final.x = pointerProps.x;
-      props.final.y = pointerProps.y;
+      const position = getEventPosition(event);
+      props.x = position.x;
+      props.y = position.y;
+      if (previousEvent) {
+        const previousPosition = getEventPosition(previousEvent);
+        props.delta.x = position.x - previousPosition.x;
+        props.delta.y = position.y - previousPosition.y;
+      }
+      props.final.x = position.x;
+      props.final.y = position.y;
       props.distance.x = props.x - props.origin.x;
       props.distance.y = props.y - props.origin.y;
       if (props.mode !== MODES.DRAG) {
         props.mode = MODES.DRAG;
       }
       trigger(props);
-      if (!pointerProps.isDown) {
-        drop();
-      }
+      previousEvent = event;
     }
   }
   function handleEvent(event) {
-    if (event.type === "dragstart") {
-      event.preventDefault();
-      return;
-    }
-    if (event.type === "click") {
-      if (shouldPreventClick()) {
-        event.stopImmediatePropagation();
-        event.stopPropagation();
+    switch (event.type) {
+      case "dragstart":
         event.preventDefault();
-      }
-      return;
+        break;
+      case "click":
+        if (shouldPreventClick()) {
+          event.stopImmediatePropagation();
+          event.stopPropagation();
+          event.preventDefault();
+        }
+        break;
+      case "pointerup":
+        drop();
+        break;
+      case "touchmove":
+      case "mousemove":
+        drag(event);
+        break;
+      default:
+        if (event.button === 0) {
+          start(event.x, event.y);
+        }
     }
-    const x = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
-    const y = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
-    start(x, y);
   }
   const { add, remove, has, trigger, props } = useService({
     props: {
@@ -129,21 +157,18 @@ function createDragService(target, { dampFactor = 0.85, dragTreshold = 10 } = {}
       }
     },
     init() {
-      const options = { passive: true };
-      props.target.addEventListener("mousedown", handleEvent, options);
-      props.target.addEventListener("touchstart", handleEvent, options);
-      props.target.addEventListener("dragstart", handleEvent, { capture: true });
-      props.target.addEventListener("click", handleEvent, { capture: true });
-      const pointer = usePointer();
-      pointer.add(id, pointerHandler);
+      events.forEach((event) => {
+        target.addEventListener(event, handleEvent, passiveEventOptions);
+      });
+      target.addEventListener("dragstart", handleEvent, { capture: true });
+      target.addEventListener("click", handleEvent, { capture: true });
     },
     kill() {
-      props.target.removeEventListener("mousedown", handleEvent);
-      props.target.removeEventListener("touchstart", handleEvent);
-      props.target.removeEventListener("dragstart", handleEvent);
-      props.target.removeEventListener("click", handleEvent);
-      const pointer = usePointer();
-      pointer.remove(id);
+      events.forEach((event) => {
+        target.removeEventListener(event, handleEvent);
+      });
+      target.removeEventListener("dragstart", handleEvent);
+      target.removeEventListener("click", handleEvent);
     }
   });
   return {