@studiometa/js-toolkit 2.0.0-beta.13 → 2.0.0-beta.17

package/services/drag.cjs

@@ -4,6 +4,7 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
@@ -25,6 +26,10 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
     return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
   };
 })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 
 // packages/js-toolkit/services/drag.js
 var drag_exports = {};
@@ -42,40 +47,41 @@ var MODES = {
   INERTIA: "inertia",
   STOP: "stop"
 };
-var instanceIds = 0;
+var id = 0;
 var Drag = class extends import_Service.default {
-  id;
-  props = {
-    target: null,
-    mode: void 0,
-    isGrabbing: false,
-    hasInertia: false,
-    x: 0,
-    y: 0,
-    delta: {
-      x: 0,
-      y: 0
-    },
-    origin: {
-      x: 0,
-      y: 0
-    },
-    distance: {
-      x: 0,
-      y: 0
-    },
-    final: {
-      x: 0,
-      y: 0
-    }
-  };
-  options = {
-    dampFactor: 0.85
-  };
   constructor(target, options = {}) {
     super();
-    instanceIds += 1;
-    this.id = `drag-${instanceIds}`;
+    __publicField(this, "id");
+    __publicField(this, "props", {
+      target: null,
+      mode: void 0,
+      isGrabbing: false,
+      hasInertia: false,
+      x: 0,
+      y: 0,
+      delta: {
+        x: 0,
+        y: 0
+      },
+      origin: {
+        x: 0,
+        y: 0
+      },
+      distance: {
+        x: 0,
+        y: 0
+      },
+      final: {
+        x: 0,
+        y: 0
+      }
+    });
+    __publicField(this, "options", {
+      dampFactor: 0.85,
+      dragTreshold: 10
+    });
+    id += 1;
+    this.id = `drag-${id}`;
     this.props.target = target;
     this.options = { ...this.options, ...options };
     this.pointerHandler = this.pointerHandler.bind(this);
@@ -86,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);
@@ -175,6 +197,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) {
@@ -192,3 +217,4 @@ function useDrag(target, options) {
   return drag;
 }
 module.exports = __toCommonJS(drag_exports);
+if (module.exports.default) module.exports = module.exports.default;

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

@@ -1,3 +1,9 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 import Service from "./Service.js";
 import usePointer from "./pointer.js";
 import useRaf from "./raf.js";
@@ -9,40 +15,41 @@ const MODES = {
   INERTIA: "inertia",
   STOP: "stop"
 };
-let instanceIds = 0;
+let id = 0;
 class Drag extends Service {
-  id;
-  props = {
-    target: null,
-    mode: void 0,
-    isGrabbing: false,
-    hasInertia: false,
-    x: 0,
-    y: 0,
-    delta: {
-      x: 0,
-      y: 0
-    },
-    origin: {
-      x: 0,
-      y: 0
-    },
-    distance: {
-      x: 0,
-      y: 0
-    },
-    final: {
-      x: 0,
-      y: 0
-    }
-  };
-  options = {
-    dampFactor: 0.85
-  };
   constructor(target, options = {}) {
     super();
-    instanceIds += 1;
-    this.id = `drag-${instanceIds}`;
+    __publicField(this, "id");
+    __publicField(this, "props", {
+      target: null,
+      mode: void 0,
+      isGrabbing: false,
+      hasInertia: false,
+      x: 0,
+      y: 0,
+      delta: {
+        x: 0,
+        y: 0
+      },
+      origin: {
+        x: 0,
+        y: 0
+      },
+      distance: {
+        x: 0,
+        y: 0
+      },
+      final: {
+        x: 0,
+        y: 0
+      }
+    });
+    __publicField(this, "options", {
+      dampFactor: 0.85,
+      dragTreshold: 10
+    });
+    id += 1;
+    this.id = `drag-${id}`;
     this.props.target = target;
     this.options = { ...this.options, ...options };
     this.pointerHandler = this.pointerHandler.bind(this);
@@ -53,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);
@@ -142,6 +165,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) {

package/services/index.cjs

@@ -45,3 +45,4 @@ var import_raf = __toESM(require("./raf.cjs"), 1);
 var import_resize = __toESM(require("./resize.cjs"), 1);
 var import_scroll = __toESM(require("./scroll.cjs"), 1);
 module.exports = __toCommonJS(services_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/services/key.cjs

@@ -4,6 +4,7 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key2, value) => key2 in obj ? __defProp(obj, key2, { enumerable: true, configurable: true, writable: true, value }) : obj[key2] = value;
 var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
@@ -25,6 +26,10 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
     return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
   };
 })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __publicField = (obj, key2, value) => {
+  __defNormalProp(obj, typeof key2 !== "symbol" ? key2 + "" : key2, value);
+  return value;
+};
 
 // packages/js-toolkit/services/key.js
 var key_exports = {};
@@ -34,22 +39,25 @@ __export(key_exports, {
 var import_Service = __toESM(require("./Service.cjs"), 1);
 var import_keyCodes = __toESM(require("../utils/keyCodes.cjs"), 1);
 var Key = class extends import_Service.default {
-  previousEvent;
-  props = {
-    event: null,
-    triggered: 0,
-    isUp: false,
-    isDown: false,
-    ENTER: false,
-    SPACE: false,
-    TAB: false,
-    ESC: false,
-    LEFT: false,
-    UP: false,
-    RIGHT: false,
-    DOWN: false,
-    direction: "none"
-  };
+  constructor() {
+    super(...arguments);
+    __publicField(this, "previousEvent");
+    __publicField(this, "props", {
+      event: null,
+      triggered: 0,
+      isUp: false,
+      isDown: false,
+      ENTER: false,
+      SPACE: false,
+      TAB: false,
+      ESC: false,
+      LEFT: false,
+      UP: false,
+      RIGHT: false,
+      DOWN: false,
+      direction: "none"
+    });
+  }
   init() {
     document.addEventListener("keydown", this);
     document.addEventListener("keyup", this);
@@ -63,6 +71,7 @@ var Key = class extends import_Service.default {
     document.removeEventListener("keyup", this);
   }
   updateProps(event) {
+    var _a;
     this.props.event = event;
     Object.entries(import_keyCodes.default).forEach(([name, code]) => {
       this.props[name] = code === event.keyCode;
@@ -70,7 +79,7 @@ var Key = class extends import_Service.default {
     if (!this.previousEvent) {
       this.props.triggered = 0;
     }
-    if (this.props.event.type === "keydown" && this.previousEvent?.type === "keydown") {
+    if (this.props.event.type === "keydown" && ((_a = this.previousEvent) == null ? void 0 : _a.type) === "keydown") {
       this.props.triggered += 1;
     } else {
       this.props.triggered = 1;
@@ -99,3 +108,4 @@ function useKey() {
   return key;
 }
 module.exports = __toCommonJS(key_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/services/key.js

@@ -1,22 +1,31 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key2, value) => key2 in obj ? __defProp(obj, key2, { enumerable: true, configurable: true, writable: true, value }) : obj[key2] = value;
+var __publicField = (obj, key2, value) => {
+  __defNormalProp(obj, typeof key2 !== "symbol" ? key2 + "" : key2, value);
+  return value;
+};
 import Service from "./Service.js";
 import keyCodes from "../utils/keyCodes.js";
 class Key extends Service {
-  previousEvent;
-  props = {
-    event: null,
-    triggered: 0,
-    isUp: false,
-    isDown: false,
-    ENTER: false,
-    SPACE: false,
-    TAB: false,
-    ESC: false,
-    LEFT: false,
-    UP: false,
-    RIGHT: false,
-    DOWN: false,
-    direction: "none"
-  };
+  constructor() {
+    super(...arguments);
+    __publicField(this, "previousEvent");
+    __publicField(this, "props", {
+      event: null,
+      triggered: 0,
+      isUp: false,
+      isDown: false,
+      ENTER: false,
+      SPACE: false,
+      TAB: false,
+      ESC: false,
+      LEFT: false,
+      UP: false,
+      RIGHT: false,
+      DOWN: false,
+      direction: "none"
+    });
+  }
   init() {
     document.addEventListener("keydown", this);
     document.addEventListener("keyup", this);
@@ -30,6 +39,7 @@ class Key extends Service {
     document.removeEventListener("keyup", this);
   }
   updateProps(event) {
+    var _a;
     this.props.event = event;
     Object.entries(keyCodes).forEach(([name, code]) => {
       this.props[name] = code === event.keyCode;
@@ -37,7 +47,7 @@ class Key extends Service {
     if (!this.previousEvent) {
       this.props.triggered = 0;
     }
-    if (this.props.event.type === "keydown" && this.previousEvent?.type === "keydown") {
+    if (this.props.event.type === "keydown" && ((_a = this.previousEvent) == null ? void 0 : _a.type) === "keydown") {
       this.props.triggered += 1;
     } else {
       this.props.triggered = 1;

package/services/load.cjs

@@ -4,6 +4,7 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
@@ -25,6 +26,10 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
     return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
   };
 })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 
 // packages/js-toolkit/services/load.js
 var load_exports = {};
@@ -33,9 +38,12 @@ __export(load_exports, {
 });
 var import_Service = __toESM(require("./Service.cjs"), 1);
 var Load = class extends import_Service.default {
-  props = {
-    time: window.performance.now()
-  };
+  constructor() {
+    super(...arguments);
+    __publicField(this, "props", {
+      time: window.performance.now()
+    });
+  }
   init() {
     window.addEventListener("load", this);
   }
@@ -68,3 +76,4 @@ function useLoad() {
   return load;
 }
 module.exports = __toCommonJS(load_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/services/load.js

@@ -1,8 +1,17 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 import Service from "./Service.js";
 class Load extends Service {
-  props = {
-    time: window.performance.now()
-  };
+  constructor() {
+    super(...arguments);
+    __publicField(this, "props", {
+      time: window.performance.now()
+    });
+  }
   init() {
     window.addEventListener("load", this);
   }

package/services/pointer.cjs

@@ -4,6 +4,7 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
@@ -25,6 +26,10 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
     return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
   };
 })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 
 // packages/js-toolkit/services/pointer.js
 var pointer_exports = {};
@@ -36,33 +41,36 @@ function isTouchEvent(event) {
   return typeof TouchEvent !== "undefined" && event instanceof TouchEvent;
 }
 var Pointer = class extends import_Service.default {
-  props = {
-    event: null,
-    isDown: false,
-    x: window.innerWidth / 2,
-    y: window.innerHeight / 2,
-    changed: {
-      x: false,
-      y: false
-    },
-    last: {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "props", {
+      event: null,
+      isDown: false,
       x: window.innerWidth / 2,
-      y: window.innerHeight / 2
-    },
-    delta: {
-      x: 0,
-      y: 0
-    },
-    progress: {
-      x: 0.5,
-      y: 0.5
-    },
-    max: {
-      x: window.innerWidth,
-      y: window.innerHeight
-    }
-  };
-  hasRaf = false;
+      y: window.innerHeight / 2,
+      changed: {
+        x: false,
+        y: false
+      },
+      last: {
+        x: window.innerWidth / 2,
+        y: window.innerHeight / 2
+      },
+      delta: {
+        x: 0,
+        y: 0
+      },
+      progress: {
+        x: 0.5,
+        y: 0.5
+      },
+      max: {
+        x: window.innerWidth,
+        y: window.innerHeight
+      }
+    });
+    __publicField(this, "hasRaf", false);
+  }
   init() {
     document.documentElement.addEventListener("mouseenter", this, {
       once: true,
@@ -116,14 +124,15 @@ var Pointer = class extends import_Service.default {
     this.trigger(this.props);
   }
   updateProps(event) {
+    var _a, _b;
     this.props.event = event;
     const yLast = this.props.y;
     const xLast = this.props.x;
-    const y = isTouchEvent(event) ? event.touches[0]?.clientY : event.clientY;
+    const y = isTouchEvent(event) ? (_a = event.touches[0]) == null ? void 0 : _a.clientY : event.clientY;
     if (y !== this.props.y) {
       this.props.y = y;
     }
-    const x = isTouchEvent(event) ? event.touches[0]?.clientX : event.clientX;
+    const x = isTouchEvent(event) ? (_b = event.touches[0]) == null ? void 0 : _b.clientX : event.clientX;
     if (x !== this.props.x) {
       this.props.x = x;
     }
@@ -157,3 +166,4 @@ function usePointer() {
   return pointer;
 }
 module.exports = __toCommonJS(pointer_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/services/pointer.js

@@ -1,35 +1,44 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 import Service from "./Service.js";
 function isTouchEvent(event) {
   return typeof TouchEvent !== "undefined" && event instanceof TouchEvent;
 }
 class Pointer extends Service {
-  props = {
-    event: null,
-    isDown: false,
-    x: window.innerWidth / 2,
-    y: window.innerHeight / 2,
-    changed: {
-      x: false,
-      y: false
-    },
-    last: {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "props", {
+      event: null,
+      isDown: false,
       x: window.innerWidth / 2,
-      y: window.innerHeight / 2
-    },
-    delta: {
-      x: 0,
-      y: 0
-    },
-    progress: {
-      x: 0.5,
-      y: 0.5
-    },
-    max: {
-      x: window.innerWidth,
-      y: window.innerHeight
-    }
-  };
-  hasRaf = false;
+      y: window.innerHeight / 2,
+      changed: {
+        x: false,
+        y: false
+      },
+      last: {
+        x: window.innerWidth / 2,
+        y: window.innerHeight / 2
+      },
+      delta: {
+        x: 0,
+        y: 0
+      },
+      progress: {
+        x: 0.5,
+        y: 0.5
+      },
+      max: {
+        x: window.innerWidth,
+        y: window.innerHeight
+      }
+    });
+    __publicField(this, "hasRaf", false);
+  }
   init() {
     document.documentElement.addEventListener("mouseenter", this, {
       once: true,
@@ -83,14 +92,15 @@ class Pointer extends Service {
     this.trigger(this.props);
   }
   updateProps(event) {
+    var _a, _b;
     this.props.event = event;
     const yLast = this.props.y;
     const xLast = this.props.x;
-    const y = isTouchEvent(event) ? event.touches[0]?.clientY : event.clientY;
+    const y = isTouchEvent(event) ? (_a = event.touches[0]) == null ? void 0 : _a.clientY : event.clientY;
     if (y !== this.props.y) {
       this.props.y = y;
     }
-    const x = isTouchEvent(event) ? event.touches[0]?.clientX : event.clientX;
+    const x = isTouchEvent(event) ? (_b = event.touches[0]) == null ? void 0 : _b.clientX : event.clientX;
     if (x !== this.props.x) {
       this.props.x = x;
     }