@studiometa/js-toolkit 2.0.0-beta.9 → 2.0.0-rc.1

package/services/Service.cjs

@@ -0,0 +1,76 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/js-toolkit/services/Service.js
+var Service_exports = {};
+__export(Service_exports, {
+  default: () => Service
+});
+module.exports = __toCommonJS(Service_exports);
+var Service = class {
+  constructor() {
+    __publicField(this, "props");
+    this.callbacks = /* @__PURE__ */ new Map();
+    this.isInit = false;
+  }
+  updateProps(...args) {
+    this.props = args;
+    throw new Error("The `updateProps` method must be implemented.");
+  }
+  init() {
+    throw new Error("The `init` method must be implemented.");
+  }
+  kill() {
+    throw new Error("The `kill` method must be implemented.");
+  }
+  add(key, callback) {
+    if (this.has(key)) {
+      throw new Error(`A callback with the key \`${key}\` has already been registered.`);
+    }
+    if (this.callbacks.size === 0 && !this.isInit) {
+      this.init();
+      this.isInit = true;
+    }
+    this.callbacks.set(key, callback);
+  }
+  has(key) {
+    return this.callbacks.has(key);
+  }
+  get(key) {
+    return this.callbacks.get(key);
+  }
+  remove(key) {
+    this.callbacks.delete(key);
+    if (this.callbacks.size === 0 && this.isInit) {
+      this.kill();
+      this.isInit = false;
+    }
+  }
+  trigger(...args) {
+    this.callbacks.forEach(function forEachCallback(callback) {
+      callback(...args);
+    });
+    return this;
+  }
+};
+if (module.exports.default) module.exports = module.exports.default;

package/services/Service.js

@@ -1,68 +1,55 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-export default class Service {
+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;
+};
+class Service {
   constructor() {
-    _defineProperty(this, "props", void 0);
-
-    this.callbacks = new Map();
+    __publicField(this, "props");
+    this.callbacks = /* @__PURE__ */ new Map();
     this.isInit = false;
   }
-
-  updateProps() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
+  updateProps(...args) {
     this.props = args;
-    throw new Error('The `updateProps` method must be implemented.');
+    throw new Error("The `updateProps` method must be implemented.");
   }
-
   init() {
-    throw new Error('The `init` method must be implemented.');
+    throw new Error("The `init` method must be implemented.");
   }
-
   kill() {
-    throw new Error('The `kill` method must be implemented.');
+    throw new Error("The `kill` method must be implemented.");
   }
-
   add(key, callback) {
     if (this.has(key)) {
-      throw new Error("A callback with the key `".concat(key, "` has already been registered."));
+      throw new Error(`A callback with the key \`${key}\` has already been registered.`);
     }
-
     if (this.callbacks.size === 0 && !this.isInit) {
       this.init();
       this.isInit = true;
     }
-
     this.callbacks.set(key, callback);
   }
-
   has(key) {
     return this.callbacks.has(key);
   }
-
   get(key) {
     return this.callbacks.get(key);
   }
-
   remove(key) {
     this.callbacks.delete(key);
-
     if (this.callbacks.size === 0 && this.isInit) {
       this.kill();
       this.isInit = false;
     }
   }
-
-  trigger() {
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-
+  trigger(...args) {
     this.callbacks.forEach(function forEachCallback(callback) {
       callback(...args);
     });
     return this;
   }
-
-}
+}
+export {
+  Service as default
+};

package/services/drag.cjs

@@ -0,0 +1,213 @@
+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 __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+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);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/js-toolkit/services/drag.js
+var drag_exports = {};
+__export(drag_exports, {
+  default: () => useDrag
+});
+module.exports = __toCommonJS(drag_exports);
+var import_Service = __toESM(require("./Service.cjs"), 1);
+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 MODES = {
+  START: "start",
+  DRAG: "drag",
+  DROP: "drop",
+  INERTIA: "inertia",
+  STOP: "stop"
+};
+var id = 0;
+var Drag = class extends import_Service.default {
+  constructor(target, options = {}) {
+    super();
+    __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);
+    this.rafHandler = this.rafHandler.bind(this);
+    return this;
+  }
+  init() {
+    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("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);
+  }
+  start(x, y) {
+    this.props.x = x;
+    this.props.y = y;
+    this.props.origin.x = x;
+    this.props.origin.y = y;
+    this.props.delta.x = 0;
+    this.props.delta.y = 0;
+    this.props.distance.x = 0;
+    this.props.distance.y = 0;
+    this.props.final.x = x;
+    this.props.final.y = y;
+    this.props.mode = MODES.START;
+    this.props.isGrabbing = true;
+    this.trigger(this.props);
+  }
+  drop() {
+    this.props.isGrabbing = false;
+    this.props.mode = MODES.DROP;
+    this.props.hasInertia = true;
+    this.props.final.x = (0, import_inertiaFinalValue.default)(this.props.x, this.props.delta.x, this.options.dampFactor);
+    this.props.final.y = (0, import_inertiaFinalValue.default)(this.props.y, this.props.delta.y, this.options.dampFactor);
+    this.trigger(this.props);
+    setTimeout(() => {
+      const raf = (0, import_raf.default)();
+      raf.remove(this.id);
+      raf.add(this.id, this.rafHandler);
+    }, 0);
+  }
+  stop() {
+    (0, import_raf.default)().remove(this.id);
+    this.props.hasInertia = false;
+    this.props.mode = MODES.STOP;
+    this.trigger(this.props);
+  }
+  rafHandler() {
+    if (!this.props.isGrabbing) {
+      this.props.x += this.props.delta.x;
+      this.props.y += this.props.delta.y;
+      this.props.distance.x = this.props.x - this.props.origin.x;
+      this.props.distance.y = this.props.y - this.props.origin.y;
+      this.props.delta.x *= this.options.dampFactor;
+      this.props.delta.y *= this.options.dampFactor;
+      if (this.props.mode !== MODES.INERTIA) {
+        this.props.mode = MODES.INERTIA;
+      }
+      this.trigger(this.props);
+      if (Math.abs(this.props.delta.x) < 0.1 && Math.abs(this.props.delta.y) < 0.1) {
+        this.stop();
+      }
+    }
+  }
+  pointerHandler(props) {
+    if (this.props.isGrabbing) {
+      this.props.x = props.x;
+      this.props.y = props.y;
+      this.props.delta.x = props.delta.x;
+      this.props.delta.y = props.delta.y;
+      this.props.final.x = props.x;
+      this.props.final.y = props.y;
+      this.props.distance.x = this.props.x - this.props.origin.x;
+      this.props.distance.y = this.props.y - this.props.origin.y;
+      if (this.props.mode !== MODES.DRAG) {
+        this.props.mode = MODES.DRAG;
+      }
+      this.trigger(this.props);
+      if (!props.isDown) {
+        this.drop();
+      }
+    }
+  }
+  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) {
+  let drag = instances.get(target);
+  if (!drag) {
+    const instance = new Drag(target, options);
+    drag = {
+      add: instance.add.bind(instance),
+      remove: instance.remove.bind(instance),
+      has: instance.has.bind(instance),
+      props: instance.updateProps.bind(instance)
+    };
+    instances.set(target, drag);
+  }
+  return drag;
+}
+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,32 +1,28 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import Service from './Service.js';
-import usePointer from './pointer.js';
-import useRaf from './raf.js';
-import inertiaFinalValue from '../utils/math/inertiaFinalValue.js';
-var MODES = {
-  START: 'start',
-  DRAG: 'drag',
-  DROP: 'drop',
-  INERTIA: 'inertia',
-  STOP: 'stop'
+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;
 };
-var instanceIds = 0;
-
+import Service from "./Service.js";
+import usePointer from "./pointer.js";
+import useRaf from "./raf.js";
+import inertiaFinalValue from "../utils/math/inertiaFinalValue.js";
+const MODES = {
+  START: "start",
+  DRAG: "drag",
+  DROP: "drop",
+  INERTIA: "inertia",
+  STOP: "stop"
+};
+let id = 0;
 class Drag extends Service {
-  constructor(target) {
-    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  constructor(target, options = {}) {
     super();
-
-    _defineProperty(this, "id", void 0);
-
-    _defineProperty(this, "props", {
+    __publicField(this, "id");
+    __publicField(this, "props", {
       target: null,
-      mode: undefined,
+      mode: void 0,
       isGrabbing: false,
       hasInertia: false,
       x: 0,
@@ -48,45 +44,54 @@ class Drag extends Service {
         y: 0
       }
     });
-
-    _defineProperty(this, "options", {
-      dampFactor: 0.85
+    __publicField(this, "options", {
+      dampFactor: 0.85,
+      dragTreshold: 10
     });
-
-    instanceIds += 1;
-    this.id = "drag-".concat(instanceIds);
+    id += 1;
+    this.id = `drag-${id}`;
     this.props.target = target;
-    this.options = _objectSpread(_objectSpread({}, this.options), options);
+    this.options = { ...this.options, ...options };
     this.pointerHandler = this.pointerHandler.bind(this);
     this.rafHandler = this.rafHandler.bind(this);
     return this;
   }
-
   init() {
-    var options = {
-      passive: true
-    };
-    this.props.target.addEventListener('mousedown', this, options);
-    this.props.target.addEventListener('touchstart', this, options);
-    var pointer = usePointer();
+    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);
-    var pointer = usePointer();
+    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) {
-    var x = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
-    var y = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
+    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);
   }
-
   start(x, y) {
     this.props.x = x;
     this.props.y = y;
@@ -102,7 +107,6 @@ class Drag extends Service {
     this.props.isGrabbing = true;
     this.trigger(this.props);
   }
-
   drop() {
     this.props.isGrabbing = false;
     this.props.mode = MODES.DROP;
@@ -111,19 +115,17 @@ class Drag extends Service {
     this.props.final.y = inertiaFinalValue(this.props.y, this.props.delta.y, this.options.dampFactor);
     this.trigger(this.props);
     setTimeout(() => {
-      var raf = useRaf();
+      const raf = useRaf();
       raf.remove(this.id);
       raf.add(this.id, this.rafHandler);
     }, 0);
   }
-
   stop() {
     useRaf().remove(this.id);
     this.props.hasInertia = false;
     this.props.mode = MODES.STOP;
     this.trigger(this.props);
   }
-
   rafHandler() {
     if (!this.props.isGrabbing) {
       this.props.x += this.props.delta.x;
@@ -132,19 +134,15 @@ class Drag extends Service {
       this.props.distance.y = this.props.y - this.props.origin.y;
       this.props.delta.x *= this.options.dampFactor;
       this.props.delta.y *= this.options.dampFactor;
-
       if (this.props.mode !== MODES.INERTIA) {
         this.props.mode = MODES.INERTIA;
       }
-
       this.trigger(this.props);
-
       if (Math.abs(this.props.delta.x) < 0.1 && Math.abs(this.props.delta.y) < 0.1) {
         this.stop();
       }
     }
   }
-
   pointerHandler(props) {
     if (this.props.isGrabbing) {
       this.props.x = props.x;
@@ -155,31 +153,27 @@ class Drag extends Service {
       this.props.final.y = props.y;
       this.props.distance.x = this.props.x - this.props.origin.x;
       this.props.distance.y = this.props.y - this.props.origin.y;
-
       if (this.props.mode !== MODES.DRAG) {
         this.props.mode = MODES.DRAG;
       }
-
       this.trigger(this.props);
-
       if (!props.isDown) {
         this.drop();
       }
     }
   }
-
   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 = new WeakMap();
-export default function useDrag(target, options) {
-  var drag = instances.get(target);
-
+const instances = /* @__PURE__ */ new WeakMap();
+function useDrag(target, options) {
+  let drag = instances.get(target);
   if (!drag) {
-    var instance = new Drag(target, options);
+    const instance = new Drag(target, options);
     drag = {
       add: instance.add.bind(instance),
       remove: instance.remove.bind(instance),
@@ -188,6 +182,8 @@ export default function useDrag(target, options) {
     };
     instances.set(target, drag);
   }
-
   return drag;
-}
+}
+export {
+  useDrag as default
+};

package/services/index.cjs

@@ -0,0 +1,41 @@
+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/services/index.js
+var services_exports = {};
+__export(services_exports, {
+  useDrag: () => import_drag.default,
+  useKey: () => import_key.default,
+  useLoad: () => import_load.default,
+  usePointer: () => import_pointer.default,
+  useRaf: () => import_raf.default,
+  useResize: () => import_resize.default,
+  useScroll: () => import_scroll.default
+});
+module.exports = __toCommonJS(services_exports);
+var import_drag = __toESM(require("./drag.cjs"), 1);
+var import_key = __toESM(require("./key.cjs"), 1);
+var import_load = __toESM(require("./load.cjs"), 1);
+var import_pointer = __toESM(require("./pointer.cjs"), 1);
+var import_raf = __toESM(require("./raf.cjs"), 1);
+var import_resize = __toESM(require("./resize.cjs"), 1);
+var import_scroll = __toESM(require("./scroll.cjs"), 1);
+if (module.exports.default) module.exports = module.exports.default;

package/services/index.js

@@ -1,7 +1,16 @@
-export { default as useDrag } from './drag.js';
-export { default as useKey } from './key.js';
-export { default as useLoad } from './load.js';
-export { default as usePointer } from './pointer.js';
-export { default as useRaf } from './raf.js';
-export { default as useResize } from './resize.js';
-export { default as useScroll } from './scroll.js';
+import { default as default2 } from "./drag.js";
+import { default as default3 } from "./key.js";
+import { default as default4 } from "./load.js";
+import { default as default5 } from "./pointer.js";
+import { default as default6 } from "./raf.js";
+import { default as default7 } from "./resize.js";
+import { default as default8 } from "./scroll.js";
+export {
+  default2 as useDrag,
+  default3 as useKey,
+  default4 as useLoad,
+  default5 as usePointer,
+  default6 as useRaf,
+  default7 as useResize,
+  default8 as useScroll
+};