@studiometa/js-toolkit 3.0.3 → 3.0.5

package/decorators/withScrolledInView/withScrolledInView.js

@@ -1,3 +1,4 @@
+import { useScroll } from "../../services/index.js";
 import { withMountWhenInView } from "../withMountWhenInView.js";
 import {
   damp,
@@ -14,11 +15,7 @@ function updateProgress(props, axis, progressKey, currentKey) {
   );
 }
 function updateProps(props, dampFactor, dampPrecision, axis = "x") {
-  props.current[axis] = clamp(
-    axis === "x" ? window.scrollX : window.scrollY,
-    props.start[axis],
-    props.end[axis]
-  );
+  props.current[axis] = clamp(useScroll().props()[axis], props.start[axis], props.end[axis]);
   props.dampedCurrent[axis] = damp(
     props.current[axis],
     props.dampedCurrent[axis],

package/decorators/withScrolledInView/withScrolledInView.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/decorators/withScrolledInView/withScrolledInView.ts"],
-  "sourcesContent": ["import type { BaseInterface, BaseDecorator } from '../../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../../Base/index.js';\nimport type {\n  RafServiceProps,\n  ScrollServiceProps,\n  ResizeServiceProps,\n} from '../../services/index.js';\nimport { withMountWhenInView } from '../withMountWhenInView.js';\nimport {\n  damp,\n  clamp,\n  clamp01,\n  getOffsetSizes,\n  isFunction,\n  domScheduler as scheduler,\n} from '../../utils/index.js';\nimport { normalizeOffset, getEdges } from './utils.js';\n\nexport interface WithScrolledInViewProps extends BaseProps {\n  $options: {\n    dampFactor: number;\n    dampPrecision: number;\n    offset: string;\n  };\n}\n\nexport type ScrollInViewProps = {\n  start: {\n    x: number;\n    y: number;\n  };\n  end: {\n    x: number;\n    y: number;\n  };\n  current: {\n    x: number;\n    y: number;\n  };\n  dampedCurrent: {\n    x: number;\n    y: number;\n  };\n  progress: {\n    x: number;\n    y: number;\n  };\n  dampedProgress: {\n    x: number;\n    y: number;\n  };\n};\n\nexport type WithScrolledInViewOptions = IntersectionObserverInit & {\n  useOffsetSizes?: boolean;\n};\n\nfunction updateProgress(\n  props: ScrollInViewProps,\n  axis: 'x' | 'y',\n  progressKey: 'progress' | 'dampedProgress',\n  currentKey: 'current' | 'dampedCurrent',\n) {\n  props[progressKey][axis] =\n    props.start[axis] === props.end[axis]\n      ? 0\n      : clamp01(\n          (props[currentKey][axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n        );\n}\n\n/**\n * Update props on tick.\n */\nfunction updateProps(\n  props: ScrollInViewProps,\n  dampFactor: number,\n  dampPrecision: number,\n  axis: 'x' | 'y' = 'x',\n): void {\n  props.current[axis] = clamp(\n    axis === 'x' ? window.scrollX : window.scrollY,\n    props.start[axis],\n    props.end[axis],\n  );\n  props.dampedCurrent[axis] = damp(\n    props.current[axis],\n    props.dampedCurrent[axis],\n    dampFactor,\n    dampPrecision,\n  );\n  updateProgress(props, axis, 'progress', 'current');\n  updateProgress(props, axis, 'dampedProgress', 'dampedCurrent');\n}\n\nexport interface WithScrolledInViewInterface extends BaseInterface {\n  /**\n   * @type {ScrollInViewProps}\n   */\n  readonly props: ScrollInViewProps;\n  dampFactor?: number;\n  dampPrecision?: number;\n  mounted(): void;\n  resized(props: ResizeServiceProps): void;\n  scrolled(props: ScrollServiceProps): void;\n  ticked(props: RafServiceProps): void;\n  destroyed(): void;\n}\n\n/**\n * Add scrolled in view capabilities to a component.\n */\nexport function withScrolledInView<S extends Base = Base>(\n  BaseClass: typeof Base,\n  options: WithScrolledInViewOptions = {},\n): BaseDecorator<WithScrolledInViewInterface, S, WithScrolledInViewProps> {\n  /**\n   * Class.\n   */\n  class WithScrolledInView<T extends BaseProps = BaseProps> extends withMountWhenInView(\n    BaseClass,\n    options,\n  )<T & WithScrolledInViewProps> {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      emits: ['scrolledInView'],\n      options: {\n        dampFactor: {\n          type: Number,\n          default: 0.1,\n        },\n        dampPrecision: {\n          type: Number,\n          default: 0.001,\n        },\n        offset: {\n          type: String,\n          default: 'start end / end start',\n        },\n      },\n    };\n\n    __props: ScrollInViewProps = {\n      start: {\n        x: 0,\n        y: 0,\n      },\n      end: {\n        x: 0,\n        y: 0,\n      },\n      current: {\n        x: 0,\n        y: 0,\n      },\n      dampedCurrent: {\n        x: 0,\n        y: 0,\n      },\n      progress: {\n        x: 0,\n        y: 0,\n      },\n      dampedProgress: {\n        x: 0,\n        y: 0,\n      },\n    };\n\n    shouldEvaluateProps = true;\n\n    get props() {\n      if (this.shouldEvaluateProps) {\n        this.shouldEvaluateProps = false;\n        const targetSizes = options.useOffsetSizes\n          ? getOffsetSizes(this.$el)\n          : this.$el.getBoundingClientRect();\n\n        targetSizes.y += window.scrollY;\n        targetSizes.x += window.scrollX;\n\n        const containerSizes = {\n          x: 0,\n          y: 0,\n          height: window.innerHeight,\n          width: window.innerWidth,\n        };\n\n        const offset = normalizeOffset(this.$options.offset);\n\n        // Y axis\n        const [yStart, yEnd] = getEdges('y', targetSizes, containerSizes, offset);\n        const yCurrent = clamp(window.scrollY, yStart, yEnd);\n        const yProgress = yStart === yEnd ? 0 : clamp01((yCurrent - yStart) / (yEnd - yStart));\n        // X axis\n        const [xStart, xEnd] = getEdges('x', targetSizes, containerSizes, offset);\n        const xCurrent = clamp(window.scrollX, xStart, xEnd);\n        const xProgress = xStart === xEnd ? 0 : clamp01((xCurrent - xStart) / (xEnd - xStart));\n\n        this.__props.start.x = xStart;\n        this.__props.start.y = yStart;\n        this.__props.end.x = xEnd;\n        this.__props.end.y = yEnd;\n        this.__props.current.x = xCurrent;\n        this.__props.current.y = yCurrent;\n        this.__props.dampedCurrent.x = xCurrent;\n        this.__props.dampedCurrent.y = yCurrent;\n        this.__props.progress.x = xProgress;\n        this.__props.progress.y = yProgress;\n        this.__props.dampedProgress.x = xProgress;\n        this.__props.dampedProgress.y = yProgress;\n      }\n\n      return this.__props;\n    }\n\n    /**\n     * Bind listeners.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      const render = () => {\n        scheduler.read(() => {\n          // @ts-ignore\n          const renderFn = this.__callMethod('scrolledInView', this.props);\n          if (isFunction(renderFn)) {\n            scheduler.write(() => {\n              renderFn(this.__props);\n            });\n          }\n        });\n      };\n\n      const delegate = {\n        handleEvent(event: CustomEvent) {\n          delegate[event.type](event.detail[0]);\n        },\n        resized: () => {\n          this.shouldEvaluateProps = true;\n          render();\n        },\n        scrolled: (props: ScrollServiceProps) => {\n          if (props.changed.y || props.changed.x) {\n            this.$services.enable('ticked');\n          }\n        },\n        mounted: () => render(),\n        ticked: () => {\n          const { dampFactor, dampPrecision } = this.$options;\n          updateProps(this.__props, dampFactor, dampPrecision, 'x');\n          updateProps(this.__props, dampFactor, dampPrecision, 'y');\n\n          if (\n            this.__props.dampedCurrent.x === this.__props.current.x &&\n            this.__props.dampedCurrent.y === this.__props.current.y\n          ) {\n            this.$services.disable('ticked');\n          }\n\n          render();\n        },\n      };\n\n      this.$on('before-mounted', () => {\n        this.$on('mounted', delegate);\n        this.$on('resized', delegate);\n        this.$on('scrolled', delegate);\n        this.$on('ticked', delegate);\n      });\n\n      this.$on('destroyed', () => {\n        this.$off('mounted', delegate);\n        this.$off('resized', delegate);\n        this.$off('scrolled', delegate);\n        this.$off('ticked', delegate);\n\n        // Clamp damped values to their final value and trigger one last render on destroy\n        this.__props.dampedCurrent.x = this.__props.current.x;\n        this.__props.dampedCurrent.y = this.__props.current.y;\n        this.__props.dampedProgress.x = this.__props.progress.x;\n        this.__props.dampedProgress.y = this.__props.progress.y;\n        render();\n      });\n    }\n  }\n\n  // @ts-ignore\n  return WithScrolledInView;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { BaseInterface, BaseDecorator } from '../../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../../Base/index.js';\nimport type {\n  RafServiceProps,\n  ScrollServiceProps,\n  ResizeServiceProps,\n} from '../../services/index.js';\nimport { useScroll } from '../../services/index.js';\nimport { withMountWhenInView } from '../withMountWhenInView.js';\nimport {\n  damp,\n  clamp,\n  clamp01,\n  getOffsetSizes,\n  isFunction,\n  domScheduler as scheduler,\n} from '../../utils/index.js';\nimport { normalizeOffset, getEdges } from './utils.js';\n\nexport interface WithScrolledInViewProps extends BaseProps {\n  $options: {\n    dampFactor: number;\n    dampPrecision: number;\n    offset: string;\n  };\n}\n\nexport type ScrollInViewProps = {\n  start: {\n    x: number;\n    y: number;\n  };\n  end: {\n    x: number;\n    y: number;\n  };\n  current: {\n    x: number;\n    y: number;\n  };\n  dampedCurrent: {\n    x: number;\n    y: number;\n  };\n  progress: {\n    x: number;\n    y: number;\n  };\n  dampedProgress: {\n    x: number;\n    y: number;\n  };\n};\n\nexport type WithScrolledInViewOptions = IntersectionObserverInit & {\n  useOffsetSizes?: boolean;\n};\n\nfunction updateProgress(\n  props: ScrollInViewProps,\n  axis: 'x' | 'y',\n  progressKey: 'progress' | 'dampedProgress',\n  currentKey: 'current' | 'dampedCurrent',\n) {\n  props[progressKey][axis] =\n    props.start[axis] === props.end[axis]\n      ? 0\n      : clamp01(\n          (props[currentKey][axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n        );\n}\n\n/**\n * Update props on tick.\n */\nfunction updateProps(\n  props: ScrollInViewProps,\n  dampFactor: number,\n  dampPrecision: number,\n  axis: 'x' | 'y' = 'x',\n): void {\n  props.current[axis] = clamp(useScroll().props()[axis], props.start[axis], props.end[axis]);\n  props.dampedCurrent[axis] = damp(\n    props.current[axis],\n    props.dampedCurrent[axis],\n    dampFactor,\n    dampPrecision,\n  );\n  updateProgress(props, axis, 'progress', 'current');\n  updateProgress(props, axis, 'dampedProgress', 'dampedCurrent');\n}\n\nexport interface WithScrolledInViewInterface extends BaseInterface {\n  /**\n   * @type {ScrollInViewProps}\n   */\n  readonly props: ScrollInViewProps;\n  dampFactor?: number;\n  dampPrecision?: number;\n  mounted(): void;\n  resized(props: ResizeServiceProps): void;\n  scrolled(props: ScrollServiceProps): void;\n  ticked(props: RafServiceProps): void;\n  destroyed(): void;\n}\n\n/**\n * Add scrolled in view capabilities to a component.\n */\nexport function withScrolledInView<S extends Base = Base>(\n  BaseClass: typeof Base,\n  options: WithScrolledInViewOptions = {},\n): BaseDecorator<WithScrolledInViewInterface, S, WithScrolledInViewProps> {\n  /**\n   * Class.\n   */\n  class WithScrolledInView<T extends BaseProps = BaseProps> extends withMountWhenInView(\n    BaseClass,\n    options,\n  )<T & WithScrolledInViewProps> {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      emits: ['scrolledInView'],\n      options: {\n        dampFactor: {\n          type: Number,\n          default: 0.1,\n        },\n        dampPrecision: {\n          type: Number,\n          default: 0.001,\n        },\n        offset: {\n          type: String,\n          default: 'start end / end start',\n        },\n      },\n    };\n\n    __props: ScrollInViewProps = {\n      start: {\n        x: 0,\n        y: 0,\n      },\n      end: {\n        x: 0,\n        y: 0,\n      },\n      current: {\n        x: 0,\n        y: 0,\n      },\n      dampedCurrent: {\n        x: 0,\n        y: 0,\n      },\n      progress: {\n        x: 0,\n        y: 0,\n      },\n      dampedProgress: {\n        x: 0,\n        y: 0,\n      },\n    };\n\n    shouldEvaluateProps = true;\n\n    get props() {\n      if (this.shouldEvaluateProps) {\n        this.shouldEvaluateProps = false;\n        const targetSizes = options.useOffsetSizes\n          ? getOffsetSizes(this.$el)\n          : this.$el.getBoundingClientRect();\n\n        targetSizes.y += window.scrollY;\n        targetSizes.x += window.scrollX;\n\n        const containerSizes = {\n          x: 0,\n          y: 0,\n          height: window.innerHeight,\n          width: window.innerWidth,\n        };\n\n        const offset = normalizeOffset(this.$options.offset);\n\n        // Y axis\n        const [yStart, yEnd] = getEdges('y', targetSizes, containerSizes, offset);\n        const yCurrent = clamp(window.scrollY, yStart, yEnd);\n        const yProgress = yStart === yEnd ? 0 : clamp01((yCurrent - yStart) / (yEnd - yStart));\n        // X axis\n        const [xStart, xEnd] = getEdges('x', targetSizes, containerSizes, offset);\n        const xCurrent = clamp(window.scrollX, xStart, xEnd);\n        const xProgress = xStart === xEnd ? 0 : clamp01((xCurrent - xStart) / (xEnd - xStart));\n\n        this.__props.start.x = xStart;\n        this.__props.start.y = yStart;\n        this.__props.end.x = xEnd;\n        this.__props.end.y = yEnd;\n        this.__props.current.x = xCurrent;\n        this.__props.current.y = yCurrent;\n        this.__props.dampedCurrent.x = xCurrent;\n        this.__props.dampedCurrent.y = yCurrent;\n        this.__props.progress.x = xProgress;\n        this.__props.progress.y = yProgress;\n        this.__props.dampedProgress.x = xProgress;\n        this.__props.dampedProgress.y = yProgress;\n      }\n\n      return this.__props;\n    }\n\n    /**\n     * Bind listeners.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      const render = () => {\n        scheduler.read(() => {\n          // @ts-ignore\n          const renderFn = this.__callMethod('scrolledInView', this.props);\n          if (isFunction(renderFn)) {\n            scheduler.write(() => {\n              renderFn(this.__props);\n            });\n          }\n        });\n      };\n\n      const delegate = {\n        handleEvent(event: CustomEvent) {\n          delegate[event.type](event.detail[0]);\n        },\n        resized: () => {\n          this.shouldEvaluateProps = true;\n          render();\n        },\n        scrolled: (props: ScrollServiceProps) => {\n          if (props.changed.y || props.changed.x) {\n            this.$services.enable('ticked');\n          }\n        },\n        mounted: () => render(),\n        ticked: () => {\n          const { dampFactor, dampPrecision } = this.$options;\n          updateProps(this.__props, dampFactor, dampPrecision, 'x');\n          updateProps(this.__props, dampFactor, dampPrecision, 'y');\n\n          if (\n            this.__props.dampedCurrent.x === this.__props.current.x &&\n            this.__props.dampedCurrent.y === this.__props.current.y\n          ) {\n            this.$services.disable('ticked');\n          }\n\n          render();\n        },\n      };\n\n      this.$on('before-mounted', () => {\n        this.$on('mounted', delegate);\n        this.$on('resized', delegate);\n        this.$on('scrolled', delegate);\n        this.$on('ticked', delegate);\n      });\n\n      this.$on('destroyed', () => {\n        this.$off('mounted', delegate);\n        this.$off('resized', delegate);\n        this.$off('scrolled', delegate);\n        this.$off('ticked', delegate);\n\n        // Clamp damped values to their final value and trigger one last render on destroy\n        this.__props.dampedCurrent.x = this.__props.current.x;\n        this.__props.dampedCurrent.y = this.__props.current.y;\n        this.__props.dampedProgress.x = this.__props.progress.x;\n        this.__props.dampedProgress.y = this.__props.progress.y;\n        render();\n      });\n    }\n  }\n\n  // @ts-ignore\n  return WithScrolledInView;\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit",
-  "version": "3.0.3",
+  "version": "3.0.5",
   "description": "A set of useful little bits of JavaScript to boost your project! 🚀",
   "publishConfig": {
     "access": "public"

package/services/DragService.d.ts

@@ -70,6 +70,13 @@ export interface DragServiceOptions {
     dragTreshold?: number;
 }
 export declare class DragService extends AbstractService<DragServiceProps> {
+    static MODES: {
+        readonly START: "start";
+        readonly DRAG: "drag";
+        readonly DROP: "drop";
+        readonly INERTIA: "inertia";
+        readonly STOP: "stop";
+    };
     static config: ServiceConfig;
     id: string;
     dampFactor: number;

package/services/DragService.js

@@ -5,6 +5,13 @@ import { inertiaFinalValue } from "../utils/math/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,
@@ -29,13 +36,7 @@ class DragService extends AbstractService {
   props = {
     target: null,
     mode: void 0,
-    MODES: {
-      START: "start",
-      DRAG: "drag",
-      DROP: "drop",
-      INERTIA: "inertia",
-      STOP: "stop"
-    },
+    MODES: DragService.MODES,
     isGrabbing: false,
     hasInertia: false,
     x: 0,

package/services/DragService.js.map

@@ -1,7 +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 } from '../utils/is.js';\nimport { inertiaFinalValue } from '../utils/math/index.js';\nimport { PASSIVE_EVENT_OPTIONS, CAPTURE_EVENT_OPTIONS } from './utils.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 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: {\n      START: 'start',\n      DRAG: 'drag',\n      DROP: 'drop',\n      INERTIA: 'inertia',\n      STOP: 'stop',\n    },\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: 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>(\n    [target, JSON.stringify(options)],\n    target,\n    options,\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { ServiceConfig, ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport { useRaf } from './RafService.js';\nimport { isDefined } from '../utils/is.js';\nimport { inertiaFinalValue } from '../utils/math/index.js';\nimport { PASSIVE_EVENT_OPTIONS, CAPTURE_EVENT_OPTIONS } from './utils.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: 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>(\n    [target, JSON.stringify(options)],\n    target,\n    options,\n  );\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/services/ScrollService.d.ts

@@ -47,6 +47,7 @@ export declare class ScrollService extends AbstractService<ScrollServiceProps> {
     static config: ServiceConfig;
     props: ScrollServiceProps;
     updateProps(): ScrollServiceProps;
+    update(): void;
     onScrollDebounced: (...args: unknown[]) => void;
     /**
      * Scroll handler.

package/services/ScrollService.js

@@ -1,6 +1,7 @@
 import { AbstractService } from "./AbstractService.js";
 import { debounce } from "../utils/debounce.js";
 import { PASSIVE_CAPTURE_EVENT_OPTIONS } from "./utils.js";
+import { nextTick } from "../utils/nextTick.js";
 class ScrollService extends AbstractService {
   static config = [[() => document, [["scroll", PASSIVE_CAPTURE_EVENT_OPTIONS]]]];
   props = {
@@ -69,14 +70,17 @@ class ScrollService extends AbstractService {
     props.direction.y = props.isDown ? "DOWN" : props.isUp ? "UP" : "NONE";
     return props;
   }
+  update() {
+    nextTick(() => this.updateProps()).then(() => this.trigger(this.props));
+  }
   onScrollDebounced = debounce(() => {
-    this.trigger(this.updateProps());
+    this.update();
   }, 100);
   /**
    * Scroll handler.
    */
   handleEvent() {
-    this.trigger(this.updateProps());
+    this.update();
     this.onScrollDebounced();
   }
 }

package/services/ScrollService.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/services/ScrollService.ts"],
-  "sourcesContent": ["import type { ServiceConfig, ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport { debounce } from '../utils/debounce.js';\nimport { PASSIVE_CAPTURE_EVENT_OPTIONS } from './utils.js';\n\nexport interface ScrollServiceProps {\n  x: number;\n  y: number;\n  changed: { x: boolean; y: boolean };\n  changedX: boolean;\n  changedY: boolean;\n  last: { x: number; y: number };\n  lastX: number;\n  lastY: number;\n  delta: { x: number; y: number };\n  deltaX: number;\n  deltaY: number;\n  progress: { x: number; y: number };\n  progressX: number;\n  progressY: number;\n  max: { x: number; y: number };\n  maxX: number;\n  maxY: number;\n  direction: { x: 'LEFT' | 'RIGHT' | 'NONE'; y: 'UP' | 'DOWN' | 'NONE' };\n  isUp: boolean;\n  isRight: boolean;\n  isDown: boolean;\n  isLeft: boolean;\n}\n\nexport type ScrollServiceInterface = ServiceInterface<ScrollServiceProps>;\n\nexport class ScrollService extends AbstractService<ScrollServiceProps> {\n  static config: ServiceConfig = [[() => document, [['scroll', PASSIVE_CAPTURE_EVENT_OPTIONS]]]];\n\n  props: ScrollServiceProps = {\n    x: window.scrollX,\n    y: window.scrollY,\n    changed: {\n      x: false,\n      y: false,\n    },\n    changedX: false,\n    changedY: false,\n    last: {\n      x: window.scrollX,\n      y: window.scrollY,\n    },\n    lastX: window.scrollX,\n    lastY: window.scrollY,\n    delta: {\n      x: 0,\n      y: 0,\n    },\n    deltaX: 0,\n    deltaY: 0,\n    max: {\n      x: document.scrollingElement.scrollWidth - window.innerWidth,\n      y: document.scrollingElement.scrollHeight - window.innerHeight,\n    },\n    maxX: document.scrollingElement.scrollWidth - window.innerWidth,\n    maxY: document.scrollingElement.scrollHeight - window.innerHeight,\n    progress: {\n      x: 0,\n      y: 0,\n    },\n    progressX: 0,\n    progressY: 0,\n    direction: {\n      x: 'NONE',\n      y: 'NONE',\n    },\n    isUp: false,\n    isRight: false,\n    isDown: false,\n    isLeft: false,\n  };\n\n  updateProps(): ScrollServiceProps {\n    const { props } = this;\n    const yLast = props.y;\n    const xLast = props.x;\n\n    props.y = window.scrollY;\n    props.x = window.scrollX;\n    props.changed.x = props.changedX = props.x !== xLast;\n    props.changed.y = props.changedY = props.y !== yLast;\n    props.last.x = props.lastX = xLast;\n    props.last.y = props.lastY = yLast;\n    props.delta.x = props.deltaX = props.x - xLast;\n    props.delta.y = props.deltaY = props.y - yLast;\n    props.max.x = props.maxX = document.scrollingElement.scrollWidth - window.innerWidth;\n    props.max.y = props.maxY = document.scrollingElement.scrollHeight - window.innerHeight;\n    props.progress.x = props.progressX = props.max.x === 0 ? 1 : props.x / props.max.x;\n    props.progress.y = props.progressY = props.max.y === 0 ? 1 : props.y / props.max.y;\n    props.isUp = props.y < yLast;\n    props.isRight = props.x > xLast;\n    props.isDown = props.y > yLast;\n    props.isLeft = props.x < xLast;\n    /* eslint-disable no-nested-ternary */\n    props.direction.x = props.isRight ? 'RIGHT' : props.isLeft ? 'LEFT' : 'NONE';\n    props.direction.y = props.isDown ? 'DOWN' : props.isUp ? 'UP' : 'NONE';\n    /* eslint-enable no-nested-ternary */\n\n    return props;\n  }\n\n  onScrollDebounced = debounce(() => {\n    this.trigger(this.updateProps());\n  }, 100);\n\n  /**\n   * Scroll handler.\n   */\n  handleEvent() {\n    this.trigger(this.updateProps());\n    this.onScrollDebounced();\n  }\n}\n\n/**\n * Use the scroll service.\n *\n * ```js\n * import { useScroll } from '@studiometa/js-toolkit/services';\n * const { add, remove, props } = useScroll();\n * add(key, (props) => {});\n * remove(key);\n * props();\n * ```\n */\nexport function useScroll(): ScrollServiceInterface {\n  return ScrollService.getInstance();\n}\n"],
-  "mappings": "AACA,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,qCAAqC;AA6BvC,MAAM,sBAAsB,gBAAoC;AAAA,EACrE,OAAO,SAAwB,CAAC,CAAC,MAAM,UAAU,CAAC,CAAC,UAAU,6BAA6B,CAAC,CAAC,CAAC;AAAA,EAE7F,QAA4B;AAAA,IAC1B,GAAG,OAAO;AAAA,IACV,GAAG,OAAO;AAAA,IACV,SAAS;AAAA,MACP,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,MAAM;AAAA,MACJ,GAAG,OAAO;AAAA,MACV,GAAG,OAAO;AAAA,IACZ;AAAA,IACA,OAAO,OAAO;AAAA,IACd,OAAO,OAAO;AAAA,IACd,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,KAAK;AAAA,MACH,GAAG,SAAS,iBAAiB,cAAc,OAAO;AAAA,MAClD,GAAG,SAAS,iBAAiB,eAAe,OAAO;AAAA,IACrD;AAAA,IACA,MAAM,SAAS,iBAAiB,cAAc,OAAO;AAAA,IACrD,MAAM,SAAS,iBAAiB,eAAe,OAAO;AAAA,IACtD,UAAU;AAAA,MACR,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,MAAM;AAAA,IACN,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV;AAAA,EAEA,cAAkC;AAChC,UAAM,EAAE,MAAM,IAAI;AAClB,UAAM,QAAQ,MAAM;AACpB,UAAM,QAAQ,MAAM;AAEpB,UAAM,IAAI,OAAO;AACjB,UAAM,IAAI,OAAO;AACjB,UAAM,QAAQ,IAAI,MAAM,WAAW,MAAM,MAAM;AAC/C,UAAM,QAAQ,IAAI,MAAM,WAAW,MAAM,MAAM;AAC/C,UAAM,KAAK,IAAI,MAAM,QAAQ;AAC7B,UAAM,KAAK,IAAI,MAAM,QAAQ;AAC7B,UAAM,MAAM,IAAI,MAAM,SAAS,MAAM,IAAI;AACzC,UAAM,MAAM,IAAI,MAAM,SAAS,MAAM,IAAI;AACzC,UAAM,IAAI,IAAI,MAAM,OAAO,SAAS,iBAAiB,cAAc,OAAO;AAC1E,UAAM,IAAI,IAAI,MAAM,OAAO,SAAS,iBAAiB,eAAe,OAAO;AAC3E,UAAM,SAAS,IAAI,MAAM,YAAY,MAAM,IAAI,MAAM,IAAI,IAAI,MAAM,IAAI,MAAM,IAAI;AACjF,UAAM,SAAS,IAAI,MAAM,YAAY,MAAM,IAAI,MAAM,IAAI,IAAI,MAAM,IAAI,MAAM,IAAI;AACjF,UAAM,OAAO,MAAM,IAAI;AACvB,UAAM,UAAU,MAAM,IAAI;AAC1B,UAAM,SAAS,MAAM,IAAI;AACzB,UAAM,SAAS,MAAM,IAAI;AAEzB,UAAM,UAAU,IAAI,MAAM,UAAU,UAAU,MAAM,SAAS,SAAS;AACtE,UAAM,UAAU,IAAI,MAAM,SAAS,SAAS,MAAM,OAAO,OAAO;AAGhE,WAAO;AAAA,EACT;AAAA,EAEA,oBAAoB,SAAS,MAAM;AACjC,SAAK,QAAQ,KAAK,YAAY,CAAC;AAAA,EACjC,GAAG,GAAG;AAAA;AAAA;AAAA;AAAA,EAKN,cAAc;AACZ,SAAK,QAAQ,KAAK,YAAY,CAAC;AAC/B,SAAK,kBAAkB;AAAA,EACzB;AACF;AAaO,SAAS,YAAoC;AAClD,SAAO,cAAc,YAAY;AACnC;",
+  "sourcesContent": ["import type { ServiceConfig, ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport { debounce } from '../utils/debounce.js';\nimport { PASSIVE_CAPTURE_EVENT_OPTIONS } from './utils.js';\nimport { nextTick } from '../utils/nextTick.js';\n\nexport interface ScrollServiceProps {\n  x: number;\n  y: number;\n  changed: { x: boolean; y: boolean };\n  changedX: boolean;\n  changedY: boolean;\n  last: { x: number; y: number };\n  lastX: number;\n  lastY: number;\n  delta: { x: number; y: number };\n  deltaX: number;\n  deltaY: number;\n  progress: { x: number; y: number };\n  progressX: number;\n  progressY: number;\n  max: { x: number; y: number };\n  maxX: number;\n  maxY: number;\n  direction: { x: 'LEFT' | 'RIGHT' | 'NONE'; y: 'UP' | 'DOWN' | 'NONE' };\n  isUp: boolean;\n  isRight: boolean;\n  isDown: boolean;\n  isLeft: boolean;\n}\n\nexport type ScrollServiceInterface = ServiceInterface<ScrollServiceProps>;\n\nexport class ScrollService extends AbstractService<ScrollServiceProps> {\n  static config: ServiceConfig = [[() => document, [['scroll', PASSIVE_CAPTURE_EVENT_OPTIONS]]]];\n\n  props: ScrollServiceProps = {\n    x: window.scrollX,\n    y: window.scrollY,\n    changed: {\n      x: false,\n      y: false,\n    },\n    changedX: false,\n    changedY: false,\n    last: {\n      x: window.scrollX,\n      y: window.scrollY,\n    },\n    lastX: window.scrollX,\n    lastY: window.scrollY,\n    delta: {\n      x: 0,\n      y: 0,\n    },\n    deltaX: 0,\n    deltaY: 0,\n    max: {\n      x: document.scrollingElement.scrollWidth - window.innerWidth,\n      y: document.scrollingElement.scrollHeight - window.innerHeight,\n    },\n    maxX: document.scrollingElement.scrollWidth - window.innerWidth,\n    maxY: document.scrollingElement.scrollHeight - window.innerHeight,\n    progress: {\n      x: 0,\n      y: 0,\n    },\n    progressX: 0,\n    progressY: 0,\n    direction: {\n      x: 'NONE',\n      y: 'NONE',\n    },\n    isUp: false,\n    isRight: false,\n    isDown: false,\n    isLeft: false,\n  };\n\n  updateProps(): ScrollServiceProps {\n    const { props } = this;\n    const yLast = props.y;\n    const xLast = props.x;\n\n    props.y = window.scrollY;\n    props.x = window.scrollX;\n    props.changed.x = props.changedX = props.x !== xLast;\n    props.changed.y = props.changedY = props.y !== yLast;\n    props.last.x = props.lastX = xLast;\n    props.last.y = props.lastY = yLast;\n    props.delta.x = props.deltaX = props.x - xLast;\n    props.delta.y = props.deltaY = props.y - yLast;\n    props.max.x = props.maxX = document.scrollingElement.scrollWidth - window.innerWidth;\n    props.max.y = props.maxY = document.scrollingElement.scrollHeight - window.innerHeight;\n    props.progress.x = props.progressX = props.max.x === 0 ? 1 : props.x / props.max.x;\n    props.progress.y = props.progressY = props.max.y === 0 ? 1 : props.y / props.max.y;\n    props.isUp = props.y < yLast;\n    props.isRight = props.x > xLast;\n    props.isDown = props.y > yLast;\n    props.isLeft = props.x < xLast;\n    /* eslint-disable no-nested-ternary */\n    props.direction.x = props.isRight ? 'RIGHT' : props.isLeft ? 'LEFT' : 'NONE';\n    props.direction.y = props.isDown ? 'DOWN' : props.isUp ? 'UP' : 'NONE';\n    /* eslint-enable no-nested-ternary */\n\n    return props;\n  }\n\n  update() {\n    nextTick(() => this.updateProps()).then(() => this.trigger(this.props));\n  }\n\n  onScrollDebounced = debounce(() => {\n    this.update();\n  }, 100);\n\n  /**\n   * Scroll handler.\n   */\n  handleEvent() {\n    this.update();\n    this.onScrollDebounced();\n  }\n}\n\n/**\n * Use the scroll service.\n *\n * ```js\n * import { useScroll } from '@studiometa/js-toolkit/services';\n * const { add, remove, props } = useScroll();\n * add(key, (props) => {});\n * remove(key);\n * props();\n * ```\n */\nexport function useScroll(): ScrollServiceInterface {\n  return ScrollService.getInstance();\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/utils/scrollTo.js

@@ -80,7 +80,8 @@ function scrollTo(target, { rootElement = window, axis = yAxis, offset = 0, ...t
       (progress) => {
         rootElement.scrollTo({
           left: lerp(initialScrollPosition.left, targetScrollPosition.left, progress),
-          top: lerp(initialScrollPosition.top, targetScrollPosition.top, progress)
+          top: lerp(initialScrollPosition.top, targetScrollPosition.top, progress),
+          behavior: "instant"
         });
       },
       {

package/utils/scrollTo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/utils/scrollTo.ts"],
-  "sourcesContent": ["import { tween } from './tween.js';\nimport type { TweenOptions } from './tween.js';\nimport { isString, isNumber, isFunction, isDefined } from './is.js';\nimport { lerp } from './math/index.js';\n\nexport interface ScrollPosition {\n  left: number;\n  top: number;\n}\n\nexport type ScrollTarget = string | HTMLElement | number | Partial<ScrollPosition>;\n\nexport interface ScrollToOptions extends TweenOptions {\n  /**\n   * Root element that will be scrolled.\n   */\n  rootElement?: HTMLElement | typeof window;\n  /**\n   * Scroll direction.\n   */\n  axis?: (typeof scrollTo.axis)[keyof typeof scrollTo.axis];\n  /**\n   * Distance from the target.\n   */\n  offset?: number;\n}\n\nconst xAxis = Symbol(0);\nconst yAxis = Symbol(1);\nconst bothAxis = Symbol(2);\n\nfunction isHtmlElement(rootElement: ScrollToOptions['rootElement']): rootElement is HTMLElement {\n  return rootElement instanceof HTMLElement;\n}\n\n/**\n * Get the current root element or window scroll position.\n */\nfunction getCurrentScrollPosition(rootElement: ScrollToOptions['rootElement']): ScrollPosition {\n  return {\n    left: isHtmlElement(rootElement) ? rootElement.scrollTop : rootElement.scrollX,\n    top: isHtmlElement(rootElement) ? rootElement.scrollLeft : rootElement.scrollY,\n  };\n}\n\n/**\n * Get the maximum scroll position values.\n */\nfunction getMaxScrollPosition(rootElement?: ScrollToOptions['rootElement']): ScrollPosition {\n  return {\n    left: isHtmlElement(rootElement)\n      ? rootElement.scrollWidth - rootElement.offsetWidth\n      : document.documentElement.scrollWidth - window.innerWidth,\n    top: isHtmlElement(rootElement)\n      ? rootElement.scrollHeight - rootElement.offsetHeight\n      : document.documentElement.scrollHeight - window.innerHeight,\n  };\n}\n\n/**\n * Get the target scroll position.\n */\nfunction getTargetScrollPosition(\n  initialScrollPosition: ScrollPosition,\n  maxScrollPosition: ScrollPosition,\n  target: ScrollTarget,\n  axis: ScrollToOptions['axis'],\n  offset: number,\n): ScrollPosition {\n  let { top, left } = initialScrollPosition;\n\n  if (target instanceof HTMLElement || isString(target)) {\n    const targetElement = target instanceof HTMLElement ? target : document.querySelector(target);\n\n    if (!targetElement) {\n      return { top, left };\n    }\n\n    const sizes = targetElement.getBoundingClientRect();\n    const styles = getComputedStyle(targetElement);\n    const scrollMargin = {\n      left: Number.parseInt(styles.scrollMarginLeft || '0', 10),\n      top: Number.parseInt(styles.scrollMarginTop || '0', 10),\n    };\n\n    // Set the scroll position of the target element.\n    left = sizes.left + initialScrollPosition.left - scrollMargin.left;\n    top = sizes.top + initialScrollPosition.top - scrollMargin.top;\n  } else if (isNumber(target)) {\n    left = target;\n    top = target;\n  } else {\n    left = target.left ?? left;\n    top = target.top ?? top;\n  }\n\n  left -= offset;\n  top -= offset;\n\n  if (axis !== bothAxis) {\n    if (axis !== xAxis && !isDefined((target as Partial<ScrollPosition>).left)) {\n      left = initialScrollPosition.left;\n    }\n\n    if (axis !== yAxis) {\n      top = initialScrollPosition.top;\n    }\n  }\n\n  return {\n    left: Math.min(left, maxScrollPosition.left),\n    top: Math.min(top, maxScrollPosition.top),\n  };\n}\n\n/**\n * Scroll to an element.\n *\n * @returns {Promise<ScrollPosition>} A promising resolving with the scroll position.\n */\nexport function scrollTo(\n  target: string | HTMLElement | number | Partial<ScrollPosition>,\n  { rootElement = window, axis = yAxis, offset = 0, ...tweenOptions }: ScrollToOptions = {},\n): Promise<ScrollPosition> {\n  const initialScrollPosition = getCurrentScrollPosition(rootElement);\n  const maxScrollPosition = getMaxScrollPosition(rootElement);\n  const targetScrollPosition = getTargetScrollPosition(\n    initialScrollPosition,\n    maxScrollPosition,\n    target,\n    axis,\n    offset,\n  );\n\n  return new Promise((resolve) => {\n    function eventHandler() {\n      /* eslint-disable @typescript-eslint/no-use-before-define */\n      tw.pause();\n      stop();\n      /* eslint-enable @typescript-eslint/no-use-before-define */\n    }\n\n    function stop() {\n      rootElement.removeEventListener('wheel', eventHandler);\n      rootElement.removeEventListener('touchmove', eventHandler);\n\n      // Resolve the promise on animation finish.\n      resolve(getCurrentScrollPosition(rootElement));\n    }\n\n    // Setup tween.\n    const tw = tween(\n      (progress) => {\n        rootElement.scrollTo({\n          left: lerp(initialScrollPosition.left, targetScrollPosition.left, progress),\n          top: lerp(initialScrollPosition.top, targetScrollPosition.top, progress),\n        });\n      },\n      {\n        smooth: 0.2,\n        ...tweenOptions,\n        onFinish(progress) {\n          if (isFunction(tweenOptions.onFinish)) {\n            tweenOptions.onFinish(progress);\n          }\n\n          stop();\n        },\n      },\n    );\n\n    rootElement.addEventListener('wheel', eventHandler, { passive: true });\n    rootElement.addEventListener('touchmove', eventHandler, { passive: true });\n    tw.start();\n  });\n}\n\nscrollTo.axis = {\n  x: xAxis,\n  y: yAxis,\n  both: bothAxis,\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { tween } from './tween.js';\nimport type { TweenOptions } from './tween.js';\nimport { isString, isNumber, isFunction, isDefined } from './is.js';\nimport { lerp } from './math/index.js';\n\nexport interface ScrollPosition {\n  left: number;\n  top: number;\n}\n\nexport type ScrollTarget = string | HTMLElement | number | Partial<ScrollPosition>;\n\nexport interface ScrollToOptions extends TweenOptions {\n  /**\n   * Root element that will be scrolled.\n   */\n  rootElement?: HTMLElement | typeof window;\n  /**\n   * Scroll direction.\n   */\n  axis?: (typeof scrollTo.axis)[keyof typeof scrollTo.axis];\n  /**\n   * Distance from the target.\n   */\n  offset?: number;\n}\n\nconst xAxis = Symbol(0);\nconst yAxis = Symbol(1);\nconst bothAxis = Symbol(2);\n\nfunction isHtmlElement(rootElement: ScrollToOptions['rootElement']): rootElement is HTMLElement {\n  return rootElement instanceof HTMLElement;\n}\n\n/**\n * Get the current root element or window scroll position.\n */\nfunction getCurrentScrollPosition(rootElement: ScrollToOptions['rootElement']): ScrollPosition {\n  return {\n    left: isHtmlElement(rootElement) ? rootElement.scrollTop : rootElement.scrollX,\n    top: isHtmlElement(rootElement) ? rootElement.scrollLeft : rootElement.scrollY,\n  };\n}\n\n/**\n * Get the maximum scroll position values.\n */\nfunction getMaxScrollPosition(rootElement?: ScrollToOptions['rootElement']): ScrollPosition {\n  return {\n    left: isHtmlElement(rootElement)\n      ? rootElement.scrollWidth - rootElement.offsetWidth\n      : document.documentElement.scrollWidth - window.innerWidth,\n    top: isHtmlElement(rootElement)\n      ? rootElement.scrollHeight - rootElement.offsetHeight\n      : document.documentElement.scrollHeight - window.innerHeight,\n  };\n}\n\n/**\n * Get the target scroll position.\n */\nfunction getTargetScrollPosition(\n  initialScrollPosition: ScrollPosition,\n  maxScrollPosition: ScrollPosition,\n  target: ScrollTarget,\n  axis: ScrollToOptions['axis'],\n  offset: number,\n): ScrollPosition {\n  let { top, left } = initialScrollPosition;\n\n  if (target instanceof HTMLElement || isString(target)) {\n    const targetElement = target instanceof HTMLElement ? target : document.querySelector(target);\n\n    if (!targetElement) {\n      return { top, left };\n    }\n\n    const sizes = targetElement.getBoundingClientRect();\n    const styles = getComputedStyle(targetElement);\n    const scrollMargin = {\n      left: Number.parseInt(styles.scrollMarginLeft || '0', 10),\n      top: Number.parseInt(styles.scrollMarginTop || '0', 10),\n    };\n\n    // Set the scroll position of the target element.\n    left = sizes.left + initialScrollPosition.left - scrollMargin.left;\n    top = sizes.top + initialScrollPosition.top - scrollMargin.top;\n  } else if (isNumber(target)) {\n    left = target;\n    top = target;\n  } else {\n    left = target.left ?? left;\n    top = target.top ?? top;\n  }\n\n  left -= offset;\n  top -= offset;\n\n  if (axis !== bothAxis) {\n    if (axis !== xAxis && !isDefined((target as Partial<ScrollPosition>).left)) {\n      left = initialScrollPosition.left;\n    }\n\n    if (axis !== yAxis) {\n      top = initialScrollPosition.top;\n    }\n  }\n\n  return {\n    left: Math.min(left, maxScrollPosition.left),\n    top: Math.min(top, maxScrollPosition.top),\n  };\n}\n\n/**\n * Scroll to an element.\n *\n * @returns {Promise<ScrollPosition>} A promising resolving with the scroll position.\n */\nexport function scrollTo(\n  target: string | HTMLElement | number | Partial<ScrollPosition>,\n  { rootElement = window, axis = yAxis, offset = 0, ...tweenOptions }: ScrollToOptions = {},\n): Promise<ScrollPosition> {\n  const initialScrollPosition = getCurrentScrollPosition(rootElement);\n  const maxScrollPosition = getMaxScrollPosition(rootElement);\n  const targetScrollPosition = getTargetScrollPosition(\n    initialScrollPosition,\n    maxScrollPosition,\n    target,\n    axis,\n    offset,\n  );\n\n  return new Promise((resolve) => {\n    function eventHandler() {\n      /* eslint-disable @typescript-eslint/no-use-before-define */\n      tw.pause();\n      stop();\n      /* eslint-enable @typescript-eslint/no-use-before-define */\n    }\n\n    function stop() {\n      rootElement.removeEventListener('wheel', eventHandler);\n      rootElement.removeEventListener('touchmove', eventHandler);\n\n      // Resolve the promise on animation finish.\n      resolve(getCurrentScrollPosition(rootElement));\n    }\n\n    // Setup tween.\n    const tw = tween(\n      (progress) => {\n        rootElement.scrollTo({\n          left: lerp(initialScrollPosition.left, targetScrollPosition.left, progress),\n          top: lerp(initialScrollPosition.top, targetScrollPosition.top, progress),\n          behavior: 'instant',\n        });\n      },\n      {\n        smooth: 0.2,\n        ...tweenOptions,\n        onFinish(progress) {\n          if (isFunction(tweenOptions.onFinish)) {\n            tweenOptions.onFinish(progress);\n          }\n\n          stop();\n        },\n      },\n    );\n\n    rootElement.addEventListener('wheel', eventHandler, { passive: true });\n    rootElement.addEventListener('touchmove', eventHandler, { passive: true });\n    tw.start();\n  });\n}\n\nscrollTo.axis = {\n  x: xAxis,\n  y: yAxis,\n  both: bothAxis,\n};\n"],
+  "mappings": "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",
   "names": []
 }