@studiometa/js-toolkit 3.0.0-alpha.9 → 3.0.0-beta.1

package/services/DragService.js

@@ -0,0 +1,217 @@
+import { AbstractService } from "./AbstractService.js";
+import { useRaf } from "./RafService.js";
+import { isDefined, inertiaFinalValue } from "../utils/index.js";
+import { PASSIVE_EVENT_OPTIONS, CAPTURE_EVENT_OPTIONS } from "./utils.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,
+    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 = DragService.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 = DragService.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 = DragService.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 = DragService.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 = DragService.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":
+        this.drag(event);
+        break;
+      default:
+        if (event.button === 0) {
+          this.start(event.x, event.y);
+        }
+    }
+  }
+}
+function useDrag(target, options) {
+  return DragService.getInstance(target, target, options);
+}
+export {
+  DragService,
+  useDrag
+};
+//# sourceMappingURL=DragService.js.map

package/services/DragService.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/services/DragService.ts"],
+  "sourcesContent": ["import type { ServiceConfig, ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport { useRaf } from './RafService.js';\nimport { isDefined, inertiaFinalValue } from '../utils/index.js';\nimport { PASSIVE_EVENT_OPTIONS, CAPTURE_EVENT_OPTIONS } from './utils.js';\n\ntype DragLifecycle = 'start' | 'drag' | 'drop' | 'inertia' | 'stop';\n\nexport interface DragServiceProps {\n  /**\n   * The current mode of the dragging logic.\n   */\n  mode: DragLifecycle;\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: Record<Uppercase<DragLifecycle>, DragLifecycle> = {\n    START: 'start',\n    DRAG: 'drag',\n    DROP: 'drop',\n    INERTIA: 'inertia',\n    STOP: 'stop',\n  };\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    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 = DragService.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 = DragService.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 = DragService.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 = DragService.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 = DragService.MODES.DRAG;\n\n      this.trigger(props);\n      this.previousEvent = event;\n    }\n  }\n\n  /**\n   * Handle any event.\n   */\n  handleEvent(event: 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        this.drag(event);\n        break;\n      default:\n        if (event.button === 0) {\n          this.start(event.x, event.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 */\nexport function useDrag(target: HTMLElement, options: DragServiceOptions): DragServiceInterface {\n  return DragService.getInstance<DragServiceInterface>(target, target, options);\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/services/KeyService.d.ts

@@ -0,0 +1,29 @@
+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.
+ */
+export declare function useKey(): KeyServiceInterface;

package/services/KeyService.js

@@ -0,0 +1,48 @@
+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/services/KeyService.js.map

@@ -0,0 +1,7 @@
+{
+  "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 */\nexport function useKey(): KeyServiceInterface {\n  return KeyService.getInstance();\n}\n"],
+  "mappings": "AACA,SAAS,uBAAuB;AAChC,OAAO,cAAc;AAErB,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;AAKO,SAAS,SAA8B;AAC5C,SAAO,WAAW,YAAY;AAChC;",
+  "names": []
+}

package/services/LoadService.d.ts

@@ -0,0 +1,15 @@
+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.
+ */
+export declare function useLoad(): LoadServiceInterface;

package/services/LoadService.js

@@ -0,0 +1,19 @@
+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/services/LoadService.js.map

@@ -0,0 +1,7 @@
+{
+  "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 */\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;AAKO,SAAS,UAAgC;AAC9C,SAAO,YAAY,YAAY;AACjC;",
+  "names": []
+}

package/services/PointerService.d.ts

@@ -0,0 +1,56 @@
+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.
+ */
+export declare function usePointer(target?: HTMLElement | Window): PointerServiceInterface;

package/services/PointerService.js

@@ -0,0 +1,129 @@
+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

package/services/PointerService.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/services/PointerService.ts"],
+  "sourcesContent": ["import type { ServiceConfig, ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport { ONCE_CAPTURE_EVENT_OPTIONS, PASSIVE_CAPTURE_EVENT_OPTIONS } from './utils.js';\n\nexport interface PointerServiceProps {\n  event: MouseEvent | TouchEvent;\n  isDown: boolean;\n  x: number;\n  y: number;\n  changed: { x: boolean; y: boolean };\n  last: { x: number; y: number };\n  delta: { x: number; y: number };\n  progress: { x: number; y: number };\n  max: { x: number; y: number };\n}\n\nexport type PointerServiceInterface = ServiceInterface<PointerServiceProps>;\n\nexport class PointerService extends AbstractService<PointerServiceProps> {\n  static config: ServiceConfig = [\n    [\n      () => document,\n      [\n        ['mouseenter', ONCE_CAPTURE_EVENT_OPTIONS],\n        ['mousemove', PASSIVE_CAPTURE_EVENT_OPTIONS],\n        ['touchmove', PASSIVE_CAPTURE_EVENT_OPTIONS],\n        ['mousedown', PASSIVE_CAPTURE_EVENT_OPTIONS],\n        ['touchstart', PASSIVE_CAPTURE_EVENT_OPTIONS],\n        ['mouseup', PASSIVE_CAPTURE_EVENT_OPTIONS],\n        ['touchend', PASSIVE_CAPTURE_EVENT_OPTIONS],\n      ],\n    ],\n  ];\n\n  target: HTMLElement | Window | undefined;\n\n  props: PointerServiceProps = {\n    event: null,\n    isDown: false,\n    x: 0,\n    y: 0,\n    changed: {\n      x: false,\n      y: false,\n    },\n    last: {\n      x: 0,\n      y: 0,\n    },\n    delta: {\n      x: 0,\n      y: 0,\n    },\n    progress: {\n      x: 0.5,\n      y: 0.5,\n    },\n    max: {\n      x: 0,\n      y: 0,\n    },\n  };\n\n  constructor(target: HTMLElement | undefined) {\n    super();\n    this.target = target;\n    const targetSize = this.getTargetSize();\n    this.props.x = this.props.last.x = targetSize.x / 2;\n    this.props.y = this.props.last.y = targetSize.y / 2;\n    this.props.max.x = targetSize.width;\n    this.props.max.y = targetSize.height;\n  }\n\n  isTouchEvent(event: TouchEvent | MouseEvent): boolean {\n    return typeof TouchEvent !== 'undefined' && event instanceof TouchEvent;\n  }\n\n  getTargetSize() {\n    const { target } = this;\n    return target instanceof Element\n      ? target.getBoundingClientRect()\n      : {\n          width: window.innerWidth,\n          height: window.innerHeight,\n          x: 0,\n          y: 0,\n        };\n  }\n\n  /**\n   * Update the pointer positions.\n   */\n  updateProps(event: MouseEvent | TouchEvent): PointerServiceProps {\n    const { props } = this;\n\n    props.event = event;\n    const yLast = props.y;\n    const xLast = props.x;\n\n    const targetSize = this.getTargetSize();\n\n    // Check pointer Y\n    // We either get data from a touch event `event.touches[0].clientY` or from\n    // a mouse event `event.clientY`.\n    let y = this.isTouchEvent(event)\n      ? (event as TouchEvent).touches[0]?.clientY\n      : (event as MouseEvent).clientY;\n    y -= targetSize.y;\n    if (y !== props.y) {\n      props.y = y;\n    }\n\n    // Check pointer X\n    // We either get data from a touch event `event.touches[0].clientX` or from\n    // a mouse event `event.clientX`.\n    let x = this.isTouchEvent(event)\n      ? (event as TouchEvent).touches[0]?.clientX\n      : (event as MouseEvent).clientX;\n    x -= targetSize.x;\n    if (x !== props.x) {\n      props.x = x;\n    }\n\n    props.changed.x = props.x !== xLast;\n    props.changed.y = props.y !== yLast;\n\n    props.last.x = xLast;\n    props.last.y = yLast;\n\n    props.delta.x = props.x - xLast;\n    props.delta.y = props.y - yLast;\n\n    props.max.x = targetSize.width;\n    props.max.y = targetSize.height;\n\n    props.progress.x = props.x / props.max.x;\n    props.progress.y = props.y / props.max.y;\n\n    return props;\n  }\n\n  /**\n   * Handle events.\n   *\n   * @todo handle scroll as well\n   */\n  handleEvent(event: MouseEvent | TouchEvent) {\n    // eslint-disable-next-line default-case\n    switch (event.type) {\n      case 'mouseenter':\n      case 'mousemove':\n      case 'touchmove':\n        this.trigger(this.updateProps(event));\n        break;\n      case 'mousedown':\n      case 'touchstart':\n        this.props.isDown = true;\n        this.trigger(this.props);\n        break;\n      case 'mouseup':\n      case 'touchend':\n        this.props.isDown = false;\n        this.trigger(this.props);\n        break;\n    }\n  }\n}\n\n/**\n * Use the pointer service.\n */\nexport function usePointer(target: HTMLElement | Window = window): PointerServiceInterface {\n  return PointerService.getInstance(target, target);\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/services/RafService.d.ts

@@ -0,0 +1,19 @@
+import type { ServiceInterface } from './AbstractService.js';
+import { AbstractService } from './AbstractService.js';
+export interface RafServiceProps {
+    time: DOMHighResTimeStamp;
+}
+export type RafServiceInterface = ServiceInterface<RafServiceProps>;
+export declare class RafService extends AbstractService<RafServiceProps> {
+    isTicking: boolean;
+    scheduler: Record<"update" | "render", (fn: () => unknown) => void>;
+    props: RafServiceProps;
+    trigger(props: RafServiceProps): void;
+    loop(): void;
+    init(): void;
+    kill(): void;
+}
+/**
+ * Use the RequestAnimationFrame (raf) service.
+ */
+export declare function useRaf(): RafServiceInterface;

package/services/RafService.js

@@ -0,0 +1,45 @@
+import { AbstractService } from "./AbstractService.js";
+import { useScheduler } from "../utils/scheduler.js";
+import { isFunction } from "../utils/is.js";
+class RafService extends AbstractService {
+  isTicking = false;
+  scheduler = useScheduler(["update", "render"]);
+  props = {
+    time: performance.now()
+  };
+  trigger(props) {
+    for (const callback of this.callbacks.values()) {
+      this.scheduler.update(() => {
+        const render = callback(props);
+        if (isFunction(render)) {
+          this.scheduler.render(() => {
+            render(props);
+          });
+        }
+      });
+    }
+  }
+  loop() {
+    this.props.time = performance.now();
+    this.trigger(this.props);
+    if (!this.isTicking) {
+      return;
+    }
+    requestAnimationFrame(() => this.loop());
+  }
+  init() {
+    this.isTicking = true;
+    requestAnimationFrame(() => this.loop());
+  }
+  kill() {
+    this.isTicking = false;
+  }
+}
+function useRaf() {
+  return RafService.getInstance();
+}
+export {
+  RafService,
+  useRaf
+};
+//# sourceMappingURL=RafService.js.map

package/services/RafService.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/services/RafService.ts"],
+  "sourcesContent": ["import type { ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport { useScheduler } from '../utils/scheduler.js';\nimport { isFunction } from '../utils/is.js';\n\nexport interface RafServiceProps {\n  time: DOMHighResTimeStamp;\n}\n\nexport type RafServiceInterface = ServiceInterface<RafServiceProps>;\n\nexport class RafService extends AbstractService<RafServiceProps> {\n  isTicking = false;\n  scheduler = useScheduler(['update', 'render']);\n\n  props: RafServiceProps = {\n    time: performance.now(),\n  };\n\n  trigger(props: RafServiceProps) {\n    for (const callback of this.callbacks.values()) {\n      this.scheduler.update(() => {\n        const render = callback(props) as (() => unknown) | void;\n        if (isFunction(render)) {\n          this.scheduler.render(() => {\n            // @ts-ignore\n            render(props);\n          });\n        }\n      });\n    }\n  }\n\n  loop() {\n    this.props.time = performance.now();\n    this.trigger(this.props);\n\n    if (!this.isTicking) {\n      return;\n    }\n\n    requestAnimationFrame(() => this.loop());\n  }\n\n  init() {\n    this.isTicking = true;\n    requestAnimationFrame(() => this.loop());\n  }\n  kill() {\n    this.isTicking = false;\n  }\n}\n\n/**\n * Use the RequestAnimationFrame (raf) service.\n */\nexport function useRaf(): RafServiceInterface {\n  return RafService.getInstance();\n}\n"],
+  "mappings": "AACA,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAQpB,MAAM,mBAAmB,gBAAiC;AAAA,EAC/D,YAAY;AAAA,EACZ,YAAY,aAAa,CAAC,UAAU,QAAQ,CAAC;AAAA,EAE7C,QAAyB;AAAA,IACvB,MAAM,YAAY,IAAI;AAAA,EACxB;AAAA,EAEA,QAAQ,OAAwB;AAC9B,eAAW,YAAY,KAAK,UAAU,OAAO,GAAG;AAC9C,WAAK,UAAU,OAAO,MAAM;AAC1B,cAAM,SAAS,SAAS,KAAK;AAC7B,YAAI,WAAW,MAAM,GAAG;AACtB,eAAK,UAAU,OAAO,MAAM;AAE1B,mBAAO,KAAK;AAAA,UACd,CAAC;AAAA,QACH;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,OAAO;AACL,SAAK,MAAM,OAAO,YAAY,IAAI;AAClC,SAAK,QAAQ,KAAK,KAAK;AAEvB,QAAI,CAAC,KAAK,WAAW;AACnB;AAAA,IACF;AAEA,0BAAsB,MAAM,KAAK,KAAK,CAAC;AAAA,EACzC;AAAA,EAEA,OAAO;AACL,SAAK,YAAY;AACjB,0BAAsB,MAAM,KAAK,KAAK,CAAC;AAAA,EACzC;AAAA,EACA,OAAO;AACL,SAAK,YAAY;AAAA,EACnB;AACF;AAKO,SAAS,SAA8B;AAC5C,SAAO,WAAW,YAAY;AAChC;",
+  "names": []
+}