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

package/services/drag.js

@@ -1,216 +1,163 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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'
+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"
 };
-var instanceIds = 0;
-
+let instanceIds = 0;
 class Drag extends Service {
-  constructor(target) {
-    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    super();
-
-    _defineProperty(this, "id", void 0);
-
-    _defineProperty(this, "target", void 0);
-
-    _defineProperty(this, "mode", void 0);
-
-    _defineProperty(this, "isGrabbing", false);
-
-    _defineProperty(this, "hasInertia", false);
-
-    _defineProperty(this, "x", 0);
-
-    _defineProperty(this, "y", 0);
-
-    _defineProperty(this, "delta", {
+  id;
+  props = {
+    target: null,
+    mode: void 0,
+    isGrabbing: false,
+    hasInertia: false,
+    x: 0,
+    y: 0,
+    delta: {
       x: 0,
       y: 0
-    });
-
-    _defineProperty(this, "origin", {
+    },
+    origin: {
       x: 0,
       y: 0
-    });
-
-    _defineProperty(this, "distance", {
+    },
+    distance: {
       x: 0,
       y: 0
-    });
-
-    _defineProperty(this, "final", {
+    },
+    final: {
       x: 0,
       y: 0
-    });
-
-    _defineProperty(this, "options", {
-      dampFactor: 0.85
-    });
-
+    }
+  };
+  options = {
+    dampFactor: 0.85
+  };
+  constructor(target, options = {}) {
+    super();
     instanceIds += 1;
-    this.id = "drag-".concat(instanceIds);
-    this.target = target;
-    this.options = _objectSpread(_objectSpread({}, this.options), options);
+    this.id = `drag-${instanceIds}`;
+    this.props.target = target;
+    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.target.addEventListener('mousedown', this, options);
-    this.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);
+    const pointer = usePointer();
     pointer.add(this.id, this.pointerHandler);
     return this;
   }
-
   kill() {
-    this.target.removeEventListener('mousemove', this);
-    this.target.removeEventListener('touchmove', this);
-    var pointer = usePointer();
+    this.props.target.removeEventListener("mousemove", this);
+    this.props.target.removeEventListener("touchmove", 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;
+    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.x = x;
-    this.y = y;
-    this.origin.x = x;
-    this.origin.y = y;
-    this.delta.x = 0;
-    this.delta.y = 0;
-    this.distance.x = 0;
-    this.distance.y = 0;
-    this.final.x = x;
-    this.final.y = y;
-    this.mode = MODES.START;
-    this.isGrabbing = true;
+    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.isGrabbing = false;
-    this.mode = MODES.DROP;
-    this.hasInertia = true;
-    this.final.x = inertiaFinalValue(this.x, this.delta.x, this.options.dampFactor);
-    this.final.y = inertiaFinalValue(this.y, this.delta.y, this.options.dampFactor);
+    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(() => {
-      var raf = useRaf();
+      const raf = useRaf();
       raf.remove(this.id);
       raf.add(this.id, this.rafHandler);
     }, 0);
   }
-
   stop() {
     useRaf().remove(this.id);
-    this.hasInertia = false;
-    this.mode = MODES.STOP;
+    this.props.hasInertia = false;
+    this.props.mode = MODES.STOP;
     this.trigger(this.props);
   }
-
   rafHandler() {
-    if (!this.isGrabbing) {
-      this.x += this.delta.x;
-      this.y += this.delta.y;
-      this.distance.x = this.x - this.origin.x;
-      this.distance.y = this.y - this.origin.y;
-      this.delta.x *= this.options.dampFactor;
-      this.delta.y *= this.options.dampFactor;
-
-      if (this.mode !== MODES.INERTIA) {
-        this.mode = MODES.INERTIA;
+    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.delta.x) < 0.1 && Math.abs(this.delta.y) < 0.1) {
+      if (Math.abs(this.props.delta.x) < 0.1 && Math.abs(this.props.delta.y) < 0.1) {
         this.stop();
       }
     }
   }
-
   pointerHandler(props) {
-    if (this.isGrabbing) {
-      this.x = props.x;
-      this.y = props.y;
-      this.delta.x = props.delta.x;
-      this.delta.y = props.delta.y;
-      this.final.x = props.x;
-      this.final.y = props.y;
-      this.distance.x = this.x - this.origin.x;
-      this.distance.y = this.y - this.origin.y;
-
-      if (this.mode !== MODES.DRAG) {
-        this.mode = MODES.DRAG;
+    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();
       }
     }
   }
-
-  get props() {
-    return {
-      target: this.target,
-      mode: this.mode,
-      isGrabbing: this.isGrabbing,
-      hasInertia: this.hasInertia,
-      x: this.x,
-      y: this.y,
-      delta: this.delta,
-      origin: this.origin,
-      distance: this.distance,
-      final: this.final
-    };
+  updateProps() {
+    return this.props;
   }
-
 }
-
-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) {
-    drag = new Drag(target, options);
+    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);
   }
-
-  var add = drag.add.bind(drag);
-  var remove = drag.remove.bind(drag);
-  var has = drag.has.bind(drag);
-
-  var props = () => drag.props;
-
-  return {
-    add,
-    remove,
-    has,
-    props
-  };
-}
+  return drag;
+}
+export {
+  useDrag as default
+};

package/services/index.cjs

@@ -0,0 +1,47 @@
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+
+// 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
+});
+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);
+module.exports = __toCommonJS(services_exports);

package/services/index.d.ts

@@ -1,4 +1,11 @@
-export type ServiceInterface = {
+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";
+export type ServiceInterface<T> = {
     /**
      *   Remove a function from the resize service by its key.
      */
@@ -6,17 +13,13 @@ export type ServiceInterface = {
     /**
      *   Add a callback to the service. The callback will receive the current service props as parameter.
      */
-    add: (key: string, cb: (props: any) => void) => boolean;
+    add: (key: string, cb: (props: T) => void) => void;
     /**
      *   Test if the service has alreaydy a callback for the given key.
      */
     has: (key: string) => boolean;
+    /**
+     *   Get the service's props.
+     */
+    props: () => T;
 };
-import useKey from "./key.js";
-import usePointer from "./pointer.js";
-import useDrag from "./drag.js";
-import useLoad from "./load.js";
-import useRaf from "./raf.js";
-import useResize from "./resize.js";
-import useScroll from "./scroll.js";
-export { useKey, usePointer, useDrag, useLoad, useRaf, useResize, useScroll };

package/services/index.js

@@ -1,8 +1,16 @@
-import useDrag from './drag.js';
-import useKey from './key.js';
-import useLoad from './load.js';
-import usePointer from './pointer.js';
-import useRaf from './raf.js';
-import useResize from './resize.js';
-import useScroll from './scroll.js';
-export { useKey, usePointer, useDrag, useLoad, useRaf, useResize, useScroll };
+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
+};

package/services/key.cjs

@@ -0,0 +1,101 @@
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key2 of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key2) && (copyDefault || key2 !== "default"))
+        __defProp(target, key2, { get: () => module2[key2], enumerable: !(desc = __getOwnPropDesc(module2, key2)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+
+// packages/js-toolkit/services/key.js
+var key_exports = {};
+__export(key_exports, {
+  default: () => useKey
+});
+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"
+  };
+  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) {
+    this.props.event = event;
+    Object.entries(import_keyCodes.default).forEach(([name, code]) => {
+      this.props[name] = code === event.keyCode;
+    });
+    if (!this.previousEvent) {
+      this.props.triggered = 0;
+    }
+    if (this.props.event.type === "keydown" && this.previousEvent?.type === "keydown") {
+      this.props.triggered += 1;
+    } else {
+      this.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;
+  }
+};
+var instance;
+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)
+    };
+  }
+  return key;
+}
+module.exports = __toCommonJS(key_exports);

package/services/key.d.ts

@@ -9,13 +9,14 @@
  * props();
  * ```
  *
- * @return {ServiceInterface & KeyService}
+ * @return {KeyService}
  */
-export default function useKey(): ServiceInterface & KeyService;
-export type ServiceInterface = import('./index').ServiceInterface;
+export default function useKey(): KeyService;
+export type KeyService = import('./index').ServiceInterface<KeyServiceProps>;
 export type KeyServiceProps = {
     event: KeyboardEvent;
     triggered: number;
+    direction: 'up' | 'down' | 'none';
     isUp: boolean;
     isDown: boolean;
     ENTER: boolean;
@@ -27,13 +28,3 @@ export type KeyServiceProps = {
     RIGHT: boolean;
     DOWN: boolean;
 };
-export type KeyService = {
-    /**
-     *   Add a function to the resize service. The key must be uniq.
-     */
-    add: (key: string, callback: (props: KeyServiceProps) => void) => void;
-    /**
-     *   Get the current values of the resize service props.
-     */
-    props: () => KeyServiceProps;
-};