@zag-js/splitter
Version:
Core logic for the splitter widget implemented as a state machine
65 lines (62 loc) • 1.91 kB
text/typescript
import { Orientation, Point } from '@zag-js/types';
interface ResizeHandleData {
id: string;
element: HTMLElement;
orientation: Orientation;
onActivate: (point: Point) => void;
onDeactivate: VoidFunction;
}
interface HitAreaMargins {
/**
* The margin for coarse pointers (touch, pen)
* @default 15
*/
coarse?: number;
/**
* The margin for fine pointers (mouse)
* @default 5
*/
fine?: number;
}
interface SplitterRegistryOptions {
/**
* The nonce for the injected cursor stylesheet (for CSP compliance).
*/
nonce?: string;
/**
* The hit area margins for resize handles.
* Larger margins make it easier to grab handles, especially on touch devices.
*/
hitAreaMargins?: HitAreaMargins;
}
declare class SplitterRegistry {
private handles;
private state;
private listenerAttached;
private options;
constructor(options?: SplitterRegistryOptions);
register(data: ResizeHandleData): VoidFunction;
private attachGlobalListeners;
private detachGlobalListeners;
private getPointerType;
private get doc();
/**
* Fast hit-test: only checks pointer proximity to handles (no stacking order).
* Used for pointermove cursor feedback.
*/
private findHitHandles;
/**
* Full intersection check: hit-test + stacking order verification.
* Used for pointerdown activation where correctness matters.
*/
private findIntersectingHandles;
private handlePointerMove;
private handlePointerDown;
private handlePointerUp;
private updateCursor;
private globalCursorId;
private setGlobalCursor;
private clearGlobalCursor;
}
declare const registry: (opts?: SplitterRegistryOptions) => SplitterRegistry;
export { type HitAreaMargins, type ResizeHandleData, SplitterRegistry, type SplitterRegistryOptions, registry };