@solid-primitives/pointer/dist/index.d.ts

A collection of primitives, giving you a nicer API to handle pointer events in a reactive context.

import { Directive, MaybeAccessor } from "@solid-primitives/utils";
import { Accessor } from "solid-js";
import { Handler, OnEventRecord, PointerEventNames, PointerHoverDirectiveProps, PointerListItem, PointerPositionDirectiveProps, PointerStateWithActive, PointerType } from "./types.js";
export { getPositionToElement } from "./helpers.js";
export type { PointerHoverDirectiveHandler, PointerHoverDirectiveProps, PointerListItem, PointerPositionDirectiveHandler, PointerPositionDirectiveProps, PointerState, PointerStateWithActive, PointerType, } from "./types.js";
/**
 * Setups event listeners for pointer events, that will get automatically removed on cleanup.
 * @param config event handlers, target, and chosen pointer types
 * - `target` - specify the target to attach the listeners to. Will default to `document.body`
 * - `pointerTypes` - specify array of pointer types you want to listen to. By default listens to `["mouse", "touch", "pen"]`
 * - `passive` - Add passive option to event listeners. Defaults to `true`.
 * - your event handlers: e.g. `onenter`, `onLeave`, `onMove`, ...
 * @returns function stopping currently attached listener **!deprecated!**
 *
 * @example
 * createPointerListeners({
 *    // pass a function if the element is yet to mount
 *    target: () => el,
 *    pointerTypes: ["touch"],
 *    onEnter: e => console.log("enter", e.x, e.y),
 *    onmove: e => console.log({ x: e.x, y: e.y }),
 *    onup: e => console.log("pointer up", e.x, e.y),
 *    onLostCapture: e => console.log("lost")
 * });
 */
export declare function createPointerListeners(config: Partial<OnEventRecord<PointerEventNames, Handler>> & {
    target?: MaybeAccessor<EventTarget | undefined>;
    pointerTypes?: PointerType[];
    passive?: boolean;
}): void;
/**
 * Setup pointer event listeners, while following the pointers individually, from when they appear, until they're gone.
 * @param config primitive configuration:
 * - `target` - specify the target to attach the listeners to. Will default to `document.body`
 * - `pointerTypes` - specify array of pointer types you want to listen to. By default listens to `["mouse", "touch", "pen"]`
 * - `passive` - Add passive option to event listeners. Defaults to `true`.
 * - `onDown` - Start following a pointer from when it's down.
 * - `onEnter` - Start following a pointer from when it enters the screen.
 * @see https://github.com/solidjs-community/solid-primitives/tree/main/packages/pointer#createPerPointerListeners
 * @example
 * createPerPointerListeners({
 *    target: el,
 *    pointerTypes: ['touch', 'pen'],
 *    onDown({ x, y, pointerId }, onMove, onUp) {
 *        console.log(x, y, pointerId);
 *        onMove(e => {...});
 *        onUp(e => {...});
 *    }
 * })
 */
export declare function createPerPointerListeners(config: {
    target?: MaybeAccessor<EventTarget>;
    pointerTypes?: PointerType[];
    passive?: boolean;
} & Partial<OnEventRecord<"enter", (event: PointerEvent, handlers: Readonly<OnEventRecord<"down" | "move" | "up" | "leave" | "cancel", (handler: Handler) => void>>) => void> & OnEventRecord<"down", (event: PointerEvent, onMove: (handler: Handler) => void, onUp: (handler: Handler) => void) => void>>): void;
/**
 * Returns a signal with autoupdating Pointer position.
 * @param config primitive config:
 * - `target` - specify the target to attach the listeners to. Will default to `document.body`
 * - `pointerTypes` - specify array of pointer types you want to listen to. By default listens to `["mouse", "touch", "pen"]`
 * - `value` - set the initial value of the returned signal *(before the first event)*
 * @returns position signal
 *
 * @example
 * const position = createPointerPosition({
 *    target: document.querySelector('my-el'),
 *    pointerTypes: ["touch"]
 * });
 */
export declare function createPointerPosition(config?: {
    target?: MaybeAccessor<EventTarget>;
    pointerTypes?: PointerType[];
    value?: PointerStateWithActive;
}): Accessor<PointerStateWithActive>;
/**
 * Provides a signal of current pointers on screen.
 * @param config primitive config:
 * - `target` - specify the target to attach the listeners to. Will default to `document.body`
 * - `pointerTypes` - specify array of pointer types you want to listen to. By default listens to `["mouse", "touch", "pen"]`
 * @returns list of pointers on the screen
 * ```
 * Accessor<Accessor<PointerListItem>[]>
 * ```
 * @example
 * ```tsx
 * const points = createPointerList();
 *
*  <For each={points()}>
    {poz => <div>{poz()}</div>}
  </For>
  ```
 */
export declare function createPointerList(config?: {
    target?: MaybeAccessor<EventTarget>;
    pointerTypes?: PointerType[];
}): Accessor<Accessor<PointerListItem>[]>;
/**
 * A directive that will fire a callback once the pointer position change.
 */
export declare const pointerPosition: Directive<PointerPositionDirectiveProps>;
/**
 * A directive for checking if the element is being hovered by at least one pointer.
 */
export declare const pointerHover: Directive<PointerHoverDirectiveProps>;