@studiometa/js-toolkit 2.2.2 → 2.4.0

package/services/drag.d.ts

@@ -20,52 +20,52 @@ export type PointerServiceProps = import('./pointer.js').PointerServiceProps;
 export type DragLifecycle = 'start' | 'drag' | 'drop' | 'inertia' | 'stop';
 export type DragServiceProps = {
     /**
-     *   The current mode of the dragging logic.
+     * The current mode of the dragging logic.
      */
     mode: DragLifecycle;
     /**
-     *   The target element of the drag.
+     * The target element of the drag.
      */
     target: HTMLElement;
     /**
-     *   Whether the user is currently grabbing the targeted element or not.
+     * Whether the user is currently grabbing the targeted element or not.
      */
     isGrabbing: boolean;
     /**
-     *   Whether the drag currently has inertia or not.
+     * Whether the drag currently has inertia or not.
      */
     hasInertia: boolean;
     /**
-     *   The current horizontal position in the viewport.
+     * The current horizontal position in the viewport.
      */
     x: number;
     /**
-     *   The current vertical position in the viewport.
+     * The current vertical position in the viewport.
      */
     y: number;
     /**
-     *   The delta between the current position and the last.
+     * The delta between the current position and the last.
      */
     delta: {
         x: number;
         y: number;
     };
     /**
-     *   The initial position where the dragging started.
+     * The initial position where the dragging started.
      */
     origin: {
         x: number;
         y: number;
     };
     /**
-     *   The distance from the current position to the origin.
+     * The distance from the current position to the origin.
      */
     distance: {
         x: number;
         y: number;
     };
     /**
-     *   The final position that will be reached at the end of the inertia.
+     * The final position that will be reached at the end of the inertia.
      */
     final: {
         x: number;

package/services/drag.js

@@ -1,10 +1,4 @@
-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 { useService } from "./service.js";
 import usePointer from "./pointer.js";
 import useRaf from "./raf.js";
 import inertiaFinalValue from "../utils/math/inertiaFinalValue.js";
@@ -15,13 +9,103 @@ const MODES = {
   INERTIA: "inertia",
   STOP: "stop"
 };
-let id = 0;
-class Drag extends Service {
-  constructor(target, options = {}) {
-    super();
-    __publicField(this, "id");
-    __publicField(this, "props", {
-      target: null,
+let count = 0;
+function createDragService(target, { dampFactor = 0.85, dragTreshold = 10 } = {}) {
+  count += 1;
+  const id = `drag-${count}`;
+  function shouldPreventClick() {
+    return Math.abs(props.distance.x) > dragTreshold || Math.abs(props.distance.y) > dragTreshold;
+  }
+  function start(x, y) {
+    props.x = x;
+    props.y = y;
+    props.origin.x = x;
+    props.origin.y = y;
+    props.delta.x = 0;
+    props.delta.y = 0;
+    props.distance.x = 0;
+    props.distance.y = 0;
+    props.final.x = x;
+    props.final.y = y;
+    props.mode = MODES.START;
+    props.isGrabbing = true;
+    trigger(props);
+  }
+  function drop() {
+    props.isGrabbing = false;
+    props.mode = MODES.DROP;
+    props.hasInertia = true;
+    props.final.x = inertiaFinalValue(props.x, props.delta.x, dampFactor);
+    props.final.y = inertiaFinalValue(props.y, props.delta.y, dampFactor);
+    trigger(props);
+    setTimeout(() => {
+      const raf = useRaf();
+      raf.remove(id);
+      raf.add(id, rafHandler);
+    }, 0);
+  }
+  function stop() {
+    useRaf().remove(id);
+    props.hasInertia = false;
+    props.mode = MODES.STOP;
+    trigger(props);
+  }
+  function rafHandler() {
+    if (!props.isGrabbing) {
+      props.x += props.delta.x;
+      props.y += props.delta.y;
+      props.distance.x = props.x - props.origin.x;
+      props.distance.y = props.y - props.origin.y;
+      props.delta.x *= dampFactor;
+      props.delta.y *= dampFactor;
+      if (props.mode !== MODES.INERTIA) {
+        props.mode = MODES.INERTIA;
+      }
+      trigger(props);
+      if (Math.abs(props.delta.x) < 0.1 && Math.abs(props.delta.y) < 0.1) {
+        stop();
+      }
+    }
+  }
+  function pointerHandler(pointerProps) {
+    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;
+      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();
+      }
+    }
+  }
+  function handleEvent(event) {
+    if (event.type === "dragstart") {
+      event.preventDefault();
+      return;
+    }
+    if (event.type === "click") {
+      if (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;
+    start(x, y);
+  }
+  const { add, remove, has, trigger, props } = useService({
+    props: {
+      target,
       mode: void 0,
       isGrabbing: false,
       hasInertia: false,
@@ -43,145 +127,38 @@ class Drag extends Service {
         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);
-  }
-  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 = usePointer();
-    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 = 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;
+    },
+    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);
+    },
+    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);
     }
-    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 = inertiaFinalValue(this.props.x, this.props.delta.x, this.options.dampFactor);
-    this.props.final.y = inertiaFinalValue(this.props.y, this.props.delta.y, this.options.dampFactor);
-    this.trigger(this.props);
-    setTimeout(() => {
-      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;
-      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;
-  }
+  });
+  return {
+    add,
+    remove,
+    has,
+    props: () => props
+  };
 }
 const 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);
+  if (!instances.has(target)) {
+    instances.set(target, createDragService(target, options));
   }
-  return drag;
+  return instances.get(target);
 }
 export {
   useDrag as default

package/services/index.cjs

@@ -28,7 +28,8 @@ __export(services_exports, {
   usePointer: () => import_pointer.default,
   useRaf: () => import_raf.default,
   useResize: () => import_resize.default,
-  useScroll: () => import_scroll.default
+  useScroll: () => import_scroll.default,
+  useService: () => import_service.useService
 });
 module.exports = __toCommonJS(services_exports);
 var import_drag = __toESM(require("./drag.cjs"), 1);
@@ -38,4 +39,5 @@ 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);
+var import_service = require("./service.cjs");
 if (module.exports.default) module.exports = module.exports.default;

package/services/index.d.ts

@@ -5,6 +5,7 @@ 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";
+export { useService } from "./service.js";
 export type ServiceInterface<T> = {
     /**
      *   Remove a function from the resize service by its key.

package/services/index.js

@@ -5,6 +5,7 @@ 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";
+import { useService } from "./service.js";
 export {
   default2 as useDrag,
   default3 as useKey,
@@ -12,5 +13,6 @@ export {
   default5 as usePointer,
   default6 as useRaf,
   default7 as useResize,
-  default8 as useScroll
+  default8 as useScroll,
+  useService
 };

package/services/key.cjs

@@ -4,7 +4,6 @@ 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 __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -19,10 +18,6 @@ var __copyProps = (to, from, except, desc) => {
 };
 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, key2, value) => {
-  __defNormalProp(obj, typeof key2 !== "symbol" ? key2 + "" : key2, value);
-  return value;
-};
 
 // packages/js-toolkit/services/key.js
 var key_exports = {};
@@ -30,74 +25,64 @@ __export(key_exports, {
   default: () => useKey
 });
 module.exports = __toCommonJS(key_exports);
-var import_Service = __toESM(require("./Service.cjs"), 1);
+var import_service = require("./service.cjs");
 var import_keyCodes = __toESM(require("../utils/keyCodes.cjs"), 1);
-var Key = class extends import_Service.default {
-  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);
-  }
-  handleEvent(event) {
-    this.updateProps(event);
-    this.trigger(this.props);
-  }
-  kill() {
-    document.removeEventListener("keydown", this);
-    document.removeEventListener("keyup", this);
-  }
-  updateProps(event) {
-    var _a;
-    this.props.event = event;
+function getInitialKeyCodes() {
+  return Object.fromEntries(Object.keys(import_keyCodes.default).map((key2) => [key2, false]));
+}
+function createKeyService() {
+  let previousEvent;
+  function updateProps(event) {
+    props.event = event;
     Object.entries(import_keyCodes.default).forEach(([name, code]) => {
-      this.props[name] = code === event.keyCode;
+      props[name] = code === event.keyCode;
     });
-    if (!this.previousEvent) {
-      this.props.triggered = 0;
+    if (!previousEvent) {
+      props.triggered = 0;
     }
-    if (this.props.event.type === "keydown" && ((_a = this.previousEvent) == null ? void 0 : _a.type) === "keydown") {
-      this.props.triggered += 1;
+    if (props.event.type === "keydown" && (previousEvent == null ? void 0 : previousEvent.type) === "keydown") {
+      props.triggered += 1;
     } else {
-      this.props.triggered = 1;
+      props.triggered = 1;
     }
-    this.previousEvent = this.props.event;
-    this.props.direction = this.props.event.type === "keydown" ? "down" : "up";
-    this.props.isUp = this.props.event.type === "keyup";
-    this.props.isDown = this.props.event.type === "keydown";
-    return this.props;
+    previousEvent = props.event;
+    props.direction = props.event.type === "keydown" ? "down" : "up";
+    props.isUp = props.event.type === "keyup";
+    props.isDown = props.event.type === "keydown";
+    return props;
   }
-};
-var instance;
+  function onKey(event) {
+    trigger(updateProps(event));
+  }
+  const { add, remove, has, trigger, props } = (0, import_service.useService)({
+    props: {
+      event: null,
+      triggered: 0,
+      isUp: false,
+      isDown: false,
+      direction: "none",
+      ...getInitialKeyCodes()
+    },
+    init() {
+      document.addEventListener("keydown", onKey);
+      document.addEventListener("keyup", onKey);
+    },
+    kill() {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("keyup", onKey);
+    }
+  });
+  return {
+    add,
+    remove,
+    has,
+    props: () => props
+  };
+}
 var key;
 function useKey() {
   if (!key) {
-    if (!instance) {
-      instance = new Key();
-    }
-    key = {
-      add: instance.add.bind(instance),
-      remove: instance.remove.bind(instance),
-      has: instance.has.bind(instance),
-      props: instance.updateProps.bind(instance)
-    };
+    key = createKeyService();
   }
   return key;
 }

package/services/key.d.ts

@@ -1,14 +1,6 @@
 /**
  * Use the keyboard service.
  *
- * ```js
- * import { useKey } from '@studiometa/js-toolkit/services';
- * const { add, remove, props } = useKey();
- * add(key, (props) => {});
- * remove(key);
- * props();
- * ```
- *
  * @returns {KeyService}
  */
 export default function useKey(): KeyService;

package/services/key.js

@@ -1,77 +1,61 @@
-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 { useService } from "./service.js";
 import keyCodes from "../utils/keyCodes.js";
-class Key extends Service {
-  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);
-  }
-  handleEvent(event) {
-    this.updateProps(event);
-    this.trigger(this.props);
-  }
-  kill() {
-    document.removeEventListener("keydown", this);
-    document.removeEventListener("keyup", this);
-  }
-  updateProps(event) {
-    var _a;
-    this.props.event = event;
+function getInitialKeyCodes() {
+  return Object.fromEntries(Object.keys(keyCodes).map((key2) => [key2, false]));
+}
+function createKeyService() {
+  let previousEvent;
+  function updateProps(event) {
+    props.event = event;
     Object.entries(keyCodes).forEach(([name, code]) => {
-      this.props[name] = code === event.keyCode;
+      props[name] = code === event.keyCode;
     });
-    if (!this.previousEvent) {
-      this.props.triggered = 0;
+    if (!previousEvent) {
+      props.triggered = 0;
     }
-    if (this.props.event.type === "keydown" && ((_a = this.previousEvent) == null ? void 0 : _a.type) === "keydown") {
-      this.props.triggered += 1;
+    if (props.event.type === "keydown" && (previousEvent == null ? void 0 : previousEvent.type) === "keydown") {
+      props.triggered += 1;
     } else {
-      this.props.triggered = 1;
+      props.triggered = 1;
     }
-    this.previousEvent = this.props.event;
-    this.props.direction = this.props.event.type === "keydown" ? "down" : "up";
-    this.props.isUp = this.props.event.type === "keyup";
-    this.props.isDown = this.props.event.type === "keydown";
-    return this.props;
+    previousEvent = props.event;
+    props.direction = props.event.type === "keydown" ? "down" : "up";
+    props.isUp = props.event.type === "keyup";
+    props.isDown = props.event.type === "keydown";
+    return props;
+  }
+  function onKey(event) {
+    trigger(updateProps(event));
   }
+  const { add, remove, has, trigger, props } = useService({
+    props: {
+      event: null,
+      triggered: 0,
+      isUp: false,
+      isDown: false,
+      direction: "none",
+      ...getInitialKeyCodes()
+    },
+    init() {
+      document.addEventListener("keydown", onKey);
+      document.addEventListener("keyup", onKey);
+    },
+    kill() {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("keyup", onKey);
+    }
+  });
+  return {
+    add,
+    remove,
+    has,
+    props: () => props
+  };
 }
-let instance;
 let key;
 function useKey() {
   if (!key) {
-    if (!instance) {
-      instance = new Key();
-    }
-    key = {
-      add: instance.add.bind(instance),
-      remove: instance.remove.bind(instance),
-      has: instance.has.bind(instance),
-      props: instance.updateProps.bind(instance)
-    };
+    key = createKeyService();
   }
   return key;
 }