@studiometa/js-toolkit 3.9.0-beta.2 → 4.0.0-alpha.0

package/dist/services/DragService.js

@@ -1,227 +0,0 @@
-import { inertiaFinalValue } from "../utils/math/inertiaFinalValue.js";
-import { AbstractService } from "./AbstractService.js";
-import { CAPTURE_EVENT_OPTIONS, PASSIVE_EVENT_OPTIONS } from "./utils.js";
-import { useRaf } from "./RafService.js";
-import { isDefined } from "../utils/is.js";
-let count = 0;
-class DragService extends AbstractService {
-  static MODES = {
-    START: "start",
-    DRAG: "drag",
-    DROP: "drop",
-    INERTIA: "inertia",
-    STOP: "stop"
-  };
-  static config = [
-    [
-      (instance) => instance.props.target,
-      [
-        ["dragstart", CAPTURE_EVENT_OPTIONS],
-        ["click", CAPTURE_EVENT_OPTIONS],
-        ["pointerdown", PASSIVE_EVENT_OPTIONS]
-      ]
-    ],
-    [
-      () => window,
-      [
-        ["pointerup", PASSIVE_EVENT_OPTIONS],
-        ["touchend", PASSIVE_EVENT_OPTIONS]
-      ]
-    ]
-  ];
-  id;
-  dampFactor = 0.85;
-  dragTreshold = 10;
-  previousEvent = null;
-  props = {
-    target: null,
-    mode: void 0,
-    MODES: DragService.MODES,
-    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
-    }
-  };
-  /**
-   * Test if we should allow click on links and buttons.
-   */
-  get shouldPreventClick() {
-    return Math.abs(this.props.distance.x) > this.dragTreshold || Math.abs(this.props.distance.y) > this.dragTreshold;
-  }
-  constructor(target, { dampFactor = 0.85, dragTreshold = 10 } = {}) {
-    super();
-    count += 1;
-    this.id = `drag-${count}`;
-    this.dampFactor = dampFactor;
-    this.dragTreshold = dragTreshold;
-    this.props.target = target;
-  }
-  /**
-   * Get the client value for the given axis.
-   */
-  getEventPosition(event) {
-    const eventOrTouch = isDefined(event.touches) ? event.touches[0] : event;
-    return {
-      x: eventOrTouch.clientX,
-      y: eventOrTouch.clientY
-    };
-  }
-  /**
-   * Start the drag.
-   *
-   * @param {number} x The initial horizontal position.
-   * @param {number} y The initial vertical position.
-   */
-  start(x, y) {
-    const { props } = this;
-    if (props.isGrabbing) {
-      return;
-    }
-    props.x = props.origin.x = props.final.x = x;
-    props.y = props.origin.y = props.final.y = y;
-    props.delta.x = props.distance.x = 0;
-    props.delta.y = props.distance.y = 0;
-    props.mode = props.MODES.START;
-    props.isGrabbing = true;
-    this.trigger(props);
-    document.addEventListener("touchmove", this, PASSIVE_EVENT_OPTIONS);
-    document.addEventListener("mousemove", this, PASSIVE_EVENT_OPTIONS);
-  }
-  /**
-   * Stop the drag, or drop.
-   */
-  drop() {
-    const { props, dampFactor, id } = this;
-    if (!props.isGrabbing) {
-      return;
-    }
-    document.removeEventListener("touchmove", this);
-    document.removeEventListener("mousemove", this);
-    props.isGrabbing = false;
-    props.mode = props.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);
-    this.previousEvent = null;
-    this.trigger(props);
-    setTimeout(() => {
-      const raf = useRaf();
-      raf.remove(id);
-      raf.add(id, () => this.rafHandler());
-    });
-  }
-  /**
-   * Stop the drag.
-   */
-  stop() {
-    const { props, id } = this;
-    useRaf().remove(id);
-    props.isGrabbing = false;
-    props.hasInertia = false;
-    props.mode = props.MODES.STOP;
-    this.trigger(props);
-  }
-  /**
-   * Raf service handler.
-   */
-  rafHandler() {
-    const { props, dampFactor } = this;
-    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;
-      props.mode = props.MODES.INERTIA;
-      this.trigger(props);
-      if (Math.abs(props.delta.x) < 0.1 && Math.abs(props.delta.y) < 0.1) {
-        this.stop();
-      }
-    }
-  }
-  /**
-   * Pointer service handler.
-   */
-  drag(event) {
-    const { props } = this;
-    if (props.isGrabbing) {
-      const position = this.getEventPosition(event);
-      props.x = position.x;
-      props.y = position.y;
-      if (this.previousEvent) {
-        const previousPosition = this.getEventPosition(this.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;
-      props.mode = props.MODES.DRAG;
-      this.trigger(props);
-      this.previousEvent = event;
-    }
-  }
-  /**
-   * Handle any event.
-   */
-  handleEvent(event) {
-    switch (event.type) {
-      case "dragstart":
-        event.preventDefault();
-        break;
-      case "click":
-        if (this.shouldPreventClick) {
-          event.stopImmediatePropagation();
-          event.stopPropagation();
-          event.preventDefault();
-        }
-        break;
-      case "pointerup":
-      case "touchend":
-        this.drop();
-        break;
-      case "touchmove":
-      case "mousemove":
-        if (event.buttons === 1 || event.touches?.length === 1) {
-          this.drag(event);
-        } else {
-          this.drop();
-        }
-        break;
-      default:
-        if (event.button === 0) {
-          this.start(event.x, event.y);
-        }
-    }
-  }
-}
-function useDrag(target, options) {
-  return DragService.getInstance(
-    [target, JSON.stringify(options)],
-    target,
-    options
-  );
-}
-export {
-  DragService,
-  useDrag
-};
-//# sourceMappingURL=DragService.js.map

package/dist/services/DragService.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../packages/js-toolkit/services/DragService.ts"],
-  "sourcesContent": ["import { inertiaFinalValue } from '../utils/math/inertiaFinalValue.js';\nimport { AbstractService, type ServiceConfig, type ServiceInterface } from './AbstractService.js';\nimport { CAPTURE_EVENT_OPTIONS, PASSIVE_EVENT_OPTIONS } from './utils.js';\nimport { useRaf } from './RafService.js';\nimport { isDefined } from '../utils/is.js';\n\nexport interface DragServiceProps {\n  /**\n   * The current mode of the dragging logic.\n   */\n  mode: 'start' | 'drag' | 'drop' | 'inertia' | 'stop';\n  /**\n   * Available modes.\n   */\n  MODES: {\n    START: 'start';\n    DRAG: 'drag';\n    DROP: 'drop';\n    INERTIA: 'inertia';\n    STOP: 'stop';\n  };\n  /**\n   * The target element of the drag.\n   */\n  target: HTMLElement;\n  /**\n   * Whether the user is currently grabbing the targeted element or not.\n   */\n  isGrabbing: boolean;\n  /**\n   * Whether the drag currently has inertia or not.\n   */\n  hasInertia: boolean;\n  /**\n   * The current horizontal position in the viewport.\n   */\n  x: number;\n  /**\n   * The current vertical position in the viewport.\n   */\n  y: number;\n  /**\n   * The delta between the current position and the last.\n   */\n  delta: { x: number; y: number };\n  /**\n   * The initial position where the dragging started.\n   */\n  origin: { x: number; y: number };\n  /**\n   * The distance from the current position to the origin.\n   */\n  distance: { x: number; y: number };\n  /**\n   * The final position that will be reached at the end of the inertia.\n   */\n  final: { x: number; y: number };\n}\n\nexport type DragServiceInterface = ServiceInterface<DragServiceProps>;\n\nexport interface DragServiceOptions {\n  dampFactor?: number;\n  dragTreshold?: number;\n}\n\nlet count = 0;\n\nexport class DragService extends AbstractService<DragServiceProps> {\n  static MODES = {\n    START: 'start',\n    DRAG: 'drag',\n    DROP: 'drop',\n    INERTIA: 'inertia',\n    STOP: 'stop',\n  } as const;\n\n  static config: ServiceConfig = [\n    [\n      (instance) => (instance as DragService).props.target,\n      [\n        ['dragstart', CAPTURE_EVENT_OPTIONS],\n        ['click', CAPTURE_EVENT_OPTIONS],\n        ['pointerdown', PASSIVE_EVENT_OPTIONS],\n      ],\n    ],\n    [\n      () => window,\n      [\n        ['pointerup', PASSIVE_EVENT_OPTIONS],\n        ['touchend', PASSIVE_EVENT_OPTIONS],\n      ],\n    ],\n  ];\n\n  id: string;\n\n  dampFactor = 0.85;\n\n  dragTreshold = 10;\n\n  previousEvent: TouchEvent | MouseEvent = null;\n\n  props = {\n    target: null,\n    mode: undefined,\n    MODES: DragService.MODES,\n    isGrabbing: false,\n    hasInertia: false,\n    x: 0,\n    y: 0,\n    delta: {\n      x: 0,\n      y: 0,\n    },\n    origin: {\n      x: 0,\n      y: 0,\n    },\n    distance: {\n      x: 0,\n      y: 0,\n    },\n    final: {\n      x: 0,\n      y: 0,\n    },\n  } as DragServiceProps;\n\n  /**\n   * Test if we should allow click on links and buttons.\n   */\n  get shouldPreventClick(): boolean {\n    return (\n      Math.abs(this.props.distance.x) > this.dragTreshold ||\n      Math.abs(this.props.distance.y) > this.dragTreshold\n    );\n  }\n\n  constructor(\n    target: HTMLElement,\n    { dampFactor = 0.85, dragTreshold = 10 }: DragServiceOptions = {},\n  ) {\n    super();\n    count += 1;\n    this.id = `drag-${count}`;\n    this.dampFactor = dampFactor;\n    this.dragTreshold = dragTreshold;\n    this.props.target = target;\n  }\n\n  /**\n   * Get the client value for the given axis.\n   */\n  getEventPosition(event: MouseEvent | TouchEvent): { x: number; y: number } {\n    // @ts-ignore\n    const eventOrTouch = isDefined(event.touches) ? event.touches[0] : event;\n    return {\n      x: eventOrTouch.clientX,\n      y: eventOrTouch.clientY,\n    };\n  }\n\n  /**\n   * Start the drag.\n   *\n   * @param {number} x The initial horizontal position.\n   * @param {number} y The initial vertical position.\n   */\n  start(x: number, y: number) {\n    const { props } = this;\n    if (props.isGrabbing) {\n      return;\n    }\n\n    // Reset state\n    props.x = props.origin.x = props.final.x = x;\n    props.y = props.origin.y = props.final.y = y;\n    props.delta.x = props.distance.x = 0;\n    props.delta.y = props.distance.y = 0;\n    props.mode = props.MODES.START;\n    props.isGrabbing = true;\n\n    this.trigger(props);\n\n    document.addEventListener('touchmove', this, PASSIVE_EVENT_OPTIONS);\n    document.addEventListener('mousemove', this, PASSIVE_EVENT_OPTIONS);\n  }\n\n  /**\n   * Stop the drag, or drop.\n   */\n  drop() {\n    const { props, dampFactor, id } = this;\n\n    if (!props.isGrabbing) {\n      return;\n    }\n\n    document.removeEventListener('touchmove', this);\n    document.removeEventListener('mousemove', this);\n\n    props.isGrabbing = false;\n    props.mode = props.MODES.DROP;\n    props.hasInertia = true;\n    props.final.x = inertiaFinalValue(props.x, props.delta.x, dampFactor);\n    props.final.y = inertiaFinalValue(props.y, props.delta.y, dampFactor);\n    this.previousEvent = null;\n\n    this.trigger(props);\n\n    setTimeout(() => {\n      const raf = useRaf();\n      raf.remove(id);\n      raf.add(id, () => this.rafHandler());\n    });\n  }\n\n  /**\n   * Stop the drag.\n   */\n  stop() {\n    const { props, id } = this;\n\n    useRaf().remove(id);\n    props.isGrabbing = false;\n    props.hasInertia = false;\n    props.mode = props.MODES.STOP;\n\n    this.trigger(props);\n  }\n\n  /**\n   * Raf service handler.\n   */\n  rafHandler() {\n    const { props, dampFactor } = this;\n\n    if (!props.isGrabbing) {\n      props.x += props.delta.x;\n      props.y += props.delta.y;\n      props.distance.x = props.x - props.origin.x;\n      props.distance.y = props.y - props.origin.y;\n      props.delta.x *= dampFactor;\n      props.delta.y *= dampFactor;\n      props.mode = props.MODES.INERTIA;\n\n      this.trigger(props);\n\n      if (Math.abs(props.delta.x) < 0.1 && Math.abs(props.delta.y) < 0.1) {\n        this.stop();\n      }\n    }\n  }\n\n  /**\n   * Pointer service handler.\n   */\n  drag(event: TouchEvent | MouseEvent) {\n    const { props } = this;\n\n    if (props.isGrabbing) {\n      const position = this.getEventPosition(event);\n      props.x = position.x;\n      props.y = position.y;\n\n      if (this.previousEvent) {\n        const previousPosition = this.getEventPosition(this.previousEvent);\n        props.delta.x = position.x - previousPosition.x;\n        props.delta.y = position.y - previousPosition.y;\n      }\n\n      props.final.x = position.x;\n      props.final.y = position.y;\n      props.distance.x = props.x - props.origin.x;\n      props.distance.y = props.y - props.origin.y;\n      props.mode = props.MODES.DRAG;\n\n      this.trigger(props);\n      this.previousEvent = event;\n    }\n  }\n\n  /**\n   * Handle any event.\n   */\n  handleEvent(event: TouchEvent | MouseEvent | PointerEvent | DragEvent) {\n    switch (event.type) {\n      case 'dragstart':\n        event.preventDefault();\n        break;\n      case 'click':\n        if (this.shouldPreventClick) {\n          event.stopImmediatePropagation();\n          event.stopPropagation();\n          event.preventDefault();\n        }\n        break;\n      case 'pointerup':\n      case 'touchend':\n        this.drop();\n        break;\n      case 'touchmove':\n      case 'mousemove':\n        if ((event as MouseEvent).buttons === 1 || (event as TouchEvent).touches?.length === 1) {\n          this.drag(event);\n        } else {\n          this.drop();\n        }\n        break;\n      default:\n        if ((event as PointerEvent).button === 0) {\n          this.start((event as PointerEvent).x, (event as PointerEvent).y);\n        }\n    }\n  }\n}\n\n/**\n * Use the drag service.\n *\n * ```js\n * import { useDrag } from '@studiometa/js-toolkit/services';\n * const element = document.querySelector('.draggable');\n * const { add, remove, props } = useDrag(element, { dampFactor: 0.5 });\n * add('key', (props) => console.log(props));\n * remove('key');\n * props();\n * ```\n * @link https://js-toolkit.studiometa.dev/api/services/useDrag.html\n */\nexport function useDrag(target: HTMLElement, options: DragServiceOptions): DragServiceInterface {\n  return DragService.getInstance<DragServiceInterface>(\n    [target, JSON.stringify(options)],\n    target,\n    options,\n  );\n}\n"],
-  "mappings": "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",
-  "names": []
-}

package/dist/services/KeyService.d.ts

@@ -1,30 +0,0 @@
-import type { ServiceConfig, ServiceInterface } from './AbstractService.js';
-import { AbstractService } from './AbstractService.js';
-export interface KeyServiceProps {
-    event: KeyboardEvent;
-    triggered: number;
-    direction: 'up' | 'down' | 'none';
-    isUp: boolean;
-    isDown: boolean;
-    ENTER: boolean;
-    SPACE: boolean;
-    TAB: boolean;
-    ESC: boolean;
-    LEFT: boolean;
-    UP: boolean;
-    RIGHT: boolean;
-    DOWN: boolean;
-}
-export type KeyServiceInterface = ServiceInterface<KeyServiceProps>;
-export declare class KeyService extends AbstractService<KeyServiceProps> {
-    static config: ServiceConfig;
-    previousEvent: Event | null;
-    props: KeyServiceProps;
-    updateProps(event: KeyboardEvent): KeyServiceProps;
-    handleEvent(event: KeyboardEvent): void;
-}
-/**
- * Use the keyboard service.
- * @link https://js-toolkit.studiometa.dev/api/services/useKey.html
- */
-export declare function useKey(): KeyServiceInterface;

package/dist/services/KeyService.js

@@ -1,48 +0,0 @@
-import { AbstractService } from "./AbstractService.js";
-import { keyCodes } from "../utils/keyCodes.js";
-function getInitialKeyCodes() {
-  return Object.fromEntries(Object.keys(keyCodes).map((key) => [key, false]));
-}
-class KeyService extends AbstractService {
-  static config = [[() => document, [["keydown"], ["keyup"]]]];
-  previousEvent = null;
-  props = {
-    event: null,
-    triggered: 0,
-    isUp: false,
-    isDown: false,
-    direction: "none",
-    ...getInitialKeyCodes()
-  };
-  updateProps(event) {
-    const { props } = this;
-    props.event = event;
-    for (const [name, code] of Object.entries(keyCodes)) {
-      props[name] = code === event.keyCode;
-    }
-    if (!this.previousEvent) {
-      props.triggered = 0;
-    }
-    if (props.event.type === "keydown" && this.previousEvent?.type === "keydown") {
-      props.triggered += 1;
-    } else {
-      props.triggered = 1;
-    }
-    this.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;
-  }
-  handleEvent(event) {
-    this.trigger(this.updateProps(event));
-  }
-}
-function useKey() {
-  return KeyService.getInstance();
-}
-export {
-  KeyService,
-  useKey
-};
-//# sourceMappingURL=KeyService.js.map

package/dist/services/KeyService.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../packages/js-toolkit/services/KeyService.ts"],
-  "sourcesContent": ["import type { ServiceConfig, ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport { keyCodes } from '../utils/keyCodes.js';\n\nfunction getInitialKeyCodes(): Record<keyof typeof keyCodes, false> {\n  return Object.fromEntries(Object.keys(keyCodes).map((key) => [key, false])) as Record<\n    keyof typeof keyCodes,\n    false\n  >;\n}\n\nexport interface KeyServiceProps {\n  event: KeyboardEvent;\n  triggered: number;\n  direction: 'up' | 'down' | 'none';\n  isUp: boolean;\n  isDown: boolean;\n  ENTER: boolean;\n  SPACE: boolean;\n  TAB: boolean;\n  ESC: boolean;\n  LEFT: boolean;\n  UP: boolean;\n  RIGHT: boolean;\n  DOWN: boolean;\n}\n\nexport type KeyServiceInterface = ServiceInterface<KeyServiceProps>;\n\nexport class KeyService extends AbstractService<KeyServiceProps> {\n  static config: ServiceConfig = [[() => document, [['keydown'], ['keyup']]]];\n\n  previousEvent: Event | null = null;\n\n  props: KeyServiceProps = {\n    event: null,\n    triggered: 0,\n    isUp: false,\n    isDown: false,\n    direction: 'none',\n    ...getInitialKeyCodes(),\n  };\n\n  updateProps(event: KeyboardEvent): KeyServiceProps {\n    const { props } = this;\n\n    props.event = event;\n\n    for (const [name, code] of Object.entries(keyCodes)) {\n      props[name] = code === event.keyCode;\n    }\n\n    if (!this.previousEvent) {\n      props.triggered = 0;\n    }\n\n    if (props.event.type === 'keydown' && this.previousEvent?.type === 'keydown') {\n      props.triggered += 1;\n    } else {\n      props.triggered = 1;\n    }\n\n    this.previousEvent = props.event;\n\n    props.direction = props.event.type === 'keydown' ? 'down' : 'up';\n    props.isUp = props.event.type === 'keyup';\n    props.isDown = props.event.type === 'keydown';\n\n    return props;\n  }\n\n  handleEvent(event: KeyboardEvent) {\n    this.trigger(this.updateProps(event));\n  }\n}\n\n/**\n * Use the keyboard service.\n * @link https://js-toolkit.studiometa.dev/api/services/useKey.html\n */\nexport function useKey(): KeyServiceInterface {\n  return KeyService.getInstance();\n}\n"],
-  "mappings": "AACA,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AAEzB,SAAS,qBAA2D;AAClE,SAAO,OAAO,YAAY,OAAO,KAAK,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,KAAK,CAAC,CAAC;AAI5E;AAoBO,MAAM,mBAAmB,gBAAiC;AAAA,EAC/D,OAAO,SAAwB,CAAC,CAAC,MAAM,UAAU,CAAC,CAAC,SAAS,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;AAAA,EAE1E,gBAA8B;AAAA,EAE9B,QAAyB;AAAA,IACvB,OAAO;AAAA,IACP,WAAW;AAAA,IACX,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,GAAG,mBAAmB;AAAA,EACxB;AAAA,EAEA,YAAY,OAAuC;AACjD,UAAM,EAAE,MAAM,IAAI;AAElB,UAAM,QAAQ;AAEd,eAAW,CAAC,MAAM,IAAI,KAAK,OAAO,QAAQ,QAAQ,GAAG;AACnD,YAAM,IAAI,IAAI,SAAS,MAAM;AAAA,IAC/B;AAEA,QAAI,CAAC,KAAK,eAAe;AACvB,YAAM,YAAY;AAAA,IACpB;AAEA,QAAI,MAAM,MAAM,SAAS,aAAa,KAAK,eAAe,SAAS,WAAW;AAC5E,YAAM,aAAa;AAAA,IACrB,OAAO;AACL,YAAM,YAAY;AAAA,IACpB;AAEA,SAAK,gBAAgB,MAAM;AAE3B,UAAM,YAAY,MAAM,MAAM,SAAS,YAAY,SAAS;AAC5D,UAAM,OAAO,MAAM,MAAM,SAAS;AAClC,UAAM,SAAS,MAAM,MAAM,SAAS;AAEpC,WAAO;AAAA,EACT;AAAA,EAEA,YAAY,OAAsB;AAChC,SAAK,QAAQ,KAAK,YAAY,KAAK,CAAC;AAAA,EACtC;AACF;AAMO,SAAS,SAA8B;AAC5C,SAAO,WAAW,YAAY;AAChC;",
-  "names": []
-}

package/dist/services/LoadService.d.ts

@@ -1,16 +0,0 @@
-import type { ServiceInterface, ServiceConfig } from './AbstractService.js';
-import { AbstractService } from './AbstractService.js';
-export interface LoadServiceProps {
-    time: DOMHighResTimeStamp;
-}
-export type LoadServiceInterface = ServiceInterface<LoadServiceProps>;
-export declare class LoadService extends AbstractService<LoadServiceProps> {
-    static config: ServiceConfig;
-    props: LoadServiceProps;
-    handleEvent(): void;
-}
-/**
- * Use the load service.
- * @link https://js-toolkit.studiometa.dev/api/services/useLoad.html
- */
-export declare function useLoad(): LoadServiceInterface;

package/dist/services/LoadService.js

@@ -1,19 +0,0 @@
-import { AbstractService } from "./AbstractService.js";
-class LoadService extends AbstractService {
-  static config = [[() => window, [["load"]]]];
-  props = {
-    time: performance.now()
-  };
-  handleEvent() {
-    this.props.time = window.performance.now();
-    this.trigger(this.props);
-  }
-}
-function useLoad() {
-  return LoadService.getInstance();
-}
-export {
-  LoadService,
-  useLoad
-};
-//# sourceMappingURL=LoadService.js.map

package/dist/services/LoadService.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../packages/js-toolkit/services/LoadService.ts"],
-  "sourcesContent": ["import type { ServiceInterface, ServiceConfig } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\n\nexport interface LoadServiceProps {\n  time: DOMHighResTimeStamp;\n}\n\nexport type LoadServiceInterface = ServiceInterface<LoadServiceProps>;\n\nexport class LoadService extends AbstractService<LoadServiceProps> {\n  static config: ServiceConfig = [[() => window, [['load']]]];\n\n  props: LoadServiceProps = {\n    time: performance.now(),\n  };\n\n  handleEvent() {\n    this.props.time = window.performance.now();\n    this.trigger(this.props);\n  }\n}\n\n/**\n * Use the load service.\n * @link https://js-toolkit.studiometa.dev/api/services/useLoad.html\n */\nexport function useLoad(): LoadServiceInterface {\n  return LoadService.getInstance();\n}\n"],
-  "mappings": "AACA,SAAS,uBAAuB;AAQzB,MAAM,oBAAoB,gBAAkC;AAAA,EACjE,OAAO,SAAwB,CAAC,CAAC,MAAM,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAAA,EAE1D,QAA0B;AAAA,IACxB,MAAM,YAAY,IAAI;AAAA,EACxB;AAAA,EAEA,cAAc;AACZ,SAAK,MAAM,OAAO,OAAO,YAAY,IAAI;AACzC,SAAK,QAAQ,KAAK,KAAK;AAAA,EACzB;AACF;AAMO,SAAS,UAAgC;AAC9C,SAAO,YAAY,YAAY;AACjC;",
-  "names": []
-}

package/dist/services/MutationService.d.ts

@@ -1,21 +0,0 @@
-import type { ServiceInterface } from './AbstractService.js';
-import { AbstractService } from './AbstractService.js';
-export interface MutationServiceProps {
-    mutations: MutationRecord[];
-}
-export type MutationServiceInterface = ServiceInterface<MutationServiceProps>;
-export type MutationServiceOptions = MutationObserverInit;
-export declare class MutationService extends AbstractService<MutationServiceProps> {
-    props: MutationServiceProps;
-    target: Node;
-    options: MutationObserverInit;
-    observer: MutationObserver;
-    constructor(target?: Node, options?: MutationObserverInit);
-    init(): void;
-    kill(): void;
-}
-/**
- * Use the mutation service.
- * @link https://js-toolkit.studiometa.dev/api/services/useMutation.html
- */
-export declare function useMutation(target?: Node, options?: MutationObserverInit): MutationServiceInterface;

package/dist/services/MutationService.js

@@ -1,34 +0,0 @@
-import { AbstractService } from "./AbstractService.js";
-import { isEmpty } from "../utils/is.js";
-class MutationService extends AbstractService {
-  props = {
-    mutations: []
-  };
-  target;
-  options;
-  observer;
-  constructor(target, options) {
-    super();
-    this.target = target ?? document.documentElement;
-    this.options = options;
-  }
-  init() {
-    this.observer = new MutationObserver((mutations) => {
-      this.props.mutations = mutations;
-      this.trigger(this.props);
-    });
-    this.observer.observe(this.target, isEmpty(this.options) ? { attributes: true } : this.options);
-  }
-  kill() {
-    this.observer.disconnect();
-    this.observer = null;
-  }
-}
-function useMutation(target, options) {
-  return MutationService.getInstance([target, JSON.stringify(options)], target, options);
-}
-export {
-  MutationService,
-  useMutation
-};
-//# sourceMappingURL=MutationService.js.map

package/dist/services/MutationService.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../packages/js-toolkit/services/MutationService.ts"],
-  "sourcesContent": ["import type { ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport { isEmpty } from '../utils/is.js';\n\nexport interface MutationServiceProps {\n  mutations: MutationRecord[];\n}\n\nexport type MutationServiceInterface = ServiceInterface<MutationServiceProps>;\n\nexport type MutationServiceOptions = MutationObserverInit;\n\nexport class MutationService extends AbstractService<MutationServiceProps> {\n  props: MutationServiceProps = {\n    mutations: [],\n  };\n\n  target: Node;\n\n  options: MutationObserverInit;\n\n  observer: MutationObserver;\n\n  constructor(target?: Node, options?: MutationObserverInit) {\n    super();\n    this.target = target ?? document.documentElement;\n    this.options = options;\n  }\n\n  init() {\n    this.observer = new MutationObserver((mutations) => {\n      this.props.mutations = mutations;\n      this.trigger(this.props);\n    });\n    this.observer.observe(this.target, isEmpty(this.options) ? { attributes: true } : this.options);\n  }\n\n  kill() {\n    this.observer.disconnect();\n    this.observer = null;\n  }\n}\n\n/**\n * Use the mutation service.\n * @link https://js-toolkit.studiometa.dev/api/services/useMutation.html\n */\nexport function useMutation(\n  target?: Node,\n  options?: MutationObserverInit,\n): MutationServiceInterface {\n  return MutationService.getInstance([target, JSON.stringify(options)], target, options);\n}\n"],
-  "mappings": "AACA,SAAS,uBAAuB;AAChC,SAAS,eAAe;AAUjB,MAAM,wBAAwB,gBAAsC;AAAA,EACzE,QAA8B;AAAA,IAC5B,WAAW,CAAC;AAAA,EACd;AAAA,EAEA;AAAA,EAEA;AAAA,EAEA;AAAA,EAEA,YAAY,QAAe,SAAgC;AACzD,UAAM;AACN,SAAK,SAAS,UAAU,SAAS;AACjC,SAAK,UAAU;AAAA,EACjB;AAAA,EAEA,OAAO;AACL,SAAK,WAAW,IAAI,iBAAiB,CAAC,cAAc;AAClD,WAAK,MAAM,YAAY;AACvB,WAAK,QAAQ,KAAK,KAAK;AAAA,IACzB,CAAC;AACD,SAAK,SAAS,QAAQ,KAAK,QAAQ,QAAQ,KAAK,OAAO,IAAI,EAAE,YAAY,KAAK,IAAI,KAAK,OAAO;AAAA,EAChG;AAAA,EAEA,OAAO;AACL,SAAK,SAAS,WAAW;AACzB,SAAK,WAAW;AAAA,EAClB;AACF;AAMO,SAAS,YACd,QACA,SAC0B;AAC1B,SAAO,gBAAgB,YAAY,CAAC,QAAQ,KAAK,UAAU,OAAO,CAAC,GAAG,QAAQ,OAAO;AACvF;",
-  "names": []
-}

package/dist/services/PointerService.d.ts

@@ -1,57 +0,0 @@
-import type { ServiceConfig, ServiceInterface } from './AbstractService.js';
-import { AbstractService } from './AbstractService.js';
-export interface PointerServiceProps {
-    event: MouseEvent | TouchEvent;
-    isDown: boolean;
-    x: number;
-    y: number;
-    changed: {
-        x: boolean;
-        y: boolean;
-    };
-    last: {
-        x: number;
-        y: number;
-    };
-    delta: {
-        x: number;
-        y: number;
-    };
-    progress: {
-        x: number;
-        y: number;
-    };
-    max: {
-        x: number;
-        y: number;
-    };
-}
-export type PointerServiceInterface = ServiceInterface<PointerServiceProps>;
-export declare class PointerService extends AbstractService<PointerServiceProps> {
-    static config: ServiceConfig;
-    target: HTMLElement | Window | undefined;
-    props: PointerServiceProps;
-    constructor(target: HTMLElement | undefined);
-    isTouchEvent(event: TouchEvent | MouseEvent): boolean;
-    getTargetSize(): DOMRect | {
-        width: number;
-        height: number;
-        x: number;
-        y: number;
-    };
-    /**
-     * Update the pointer positions.
-     */
-    updateProps(event: MouseEvent | TouchEvent): PointerServiceProps;
-    /**
-     * Handle events.
-     *
-     * @todo handle scroll as well
-     */
-    handleEvent(event: MouseEvent | TouchEvent): void;
-}
-/**
- * Use the pointer service.
- * @link https://js-toolkit.studiometa.dev/api/services/usePointer.html
- */
-export declare function usePointer(target?: HTMLElement | Window): PointerServiceInterface;

package/dist/services/PointerService.js

@@ -1,129 +0,0 @@
-import { AbstractService } from "./AbstractService.js";
-import { ONCE_CAPTURE_EVENT_OPTIONS, PASSIVE_CAPTURE_EVENT_OPTIONS } from "./utils.js";
-class PointerService extends AbstractService {
-  static config = [
-    [
-      () => document,
-      [
-        ["mouseenter", ONCE_CAPTURE_EVENT_OPTIONS],
-        ["mousemove", PASSIVE_CAPTURE_EVENT_OPTIONS],
-        ["touchmove", PASSIVE_CAPTURE_EVENT_OPTIONS],
-        ["mousedown", PASSIVE_CAPTURE_EVENT_OPTIONS],
-        ["touchstart", PASSIVE_CAPTURE_EVENT_OPTIONS],
-        ["mouseup", PASSIVE_CAPTURE_EVENT_OPTIONS],
-        ["touchend", PASSIVE_CAPTURE_EVENT_OPTIONS]
-      ]
-    ]
-  ];
-  target;
-  props = {
-    event: null,
-    isDown: false,
-    x: 0,
-    y: 0,
-    changed: {
-      x: false,
-      y: false
-    },
-    last: {
-      x: 0,
-      y: 0
-    },
-    delta: {
-      x: 0,
-      y: 0
-    },
-    progress: {
-      x: 0.5,
-      y: 0.5
-    },
-    max: {
-      x: 0,
-      y: 0
-    }
-  };
-  constructor(target) {
-    super();
-    this.target = target;
-    const targetSize = this.getTargetSize();
-    this.props.x = this.props.last.x = targetSize.x / 2;
-    this.props.y = this.props.last.y = targetSize.y / 2;
-    this.props.max.x = targetSize.width;
-    this.props.max.y = targetSize.height;
-  }
-  isTouchEvent(event) {
-    return typeof TouchEvent !== "undefined" && event instanceof TouchEvent;
-  }
-  getTargetSize() {
-    const { target } = this;
-    return target instanceof Element ? target.getBoundingClientRect() : {
-      width: window.innerWidth,
-      height: window.innerHeight,
-      x: 0,
-      y: 0
-    };
-  }
-  /**
-   * Update the pointer positions.
-   */
-  updateProps(event) {
-    const { props } = this;
-    props.event = event;
-    const yLast = props.y;
-    const xLast = props.x;
-    const targetSize = this.getTargetSize();
-    let y = this.isTouchEvent(event) ? event.touches[0]?.clientY : event.clientY;
-    y -= targetSize.y;
-    if (y !== props.y) {
-      props.y = y;
-    }
-    let x = this.isTouchEvent(event) ? event.touches[0]?.clientX : event.clientX;
-    x -= targetSize.x;
-    if (x !== props.x) {
-      props.x = x;
-    }
-    props.changed.x = props.x !== xLast;
-    props.changed.y = props.y !== yLast;
-    props.last.x = xLast;
-    props.last.y = yLast;
-    props.delta.x = props.x - xLast;
-    props.delta.y = props.y - yLast;
-    props.max.x = targetSize.width;
-    props.max.y = targetSize.height;
-    props.progress.x = props.x / props.max.x;
-    props.progress.y = props.y / props.max.y;
-    return props;
-  }
-  /**
-   * Handle events.
-   *
-   * @todo handle scroll as well
-   */
-  handleEvent(event) {
-    switch (event.type) {
-      case "mouseenter":
-      case "mousemove":
-      case "touchmove":
-        this.trigger(this.updateProps(event));
-        break;
-      case "mousedown":
-      case "touchstart":
-        this.props.isDown = true;
-        this.trigger(this.props);
-        break;
-      case "mouseup":
-      case "touchend":
-        this.props.isDown = false;
-        this.trigger(this.props);
-        break;
-    }
-  }
-}
-function usePointer(target = window) {
-  return PointerService.getInstance([target], target);
-}
-export {
-  PointerService,
-  usePointer
-};
-//# sourceMappingURL=PointerService.js.map