pointrix 1.0.0

package/dist/pointrix-react.d.mts

@@ -0,0 +1,537 @@
+import React, { MutableRefObject } from "react";
+
+//#region src/nano.d.ts
+interface Point$2 {
+  x: number;
+  y: number;
+}
+interface PointerState {
+  id: number;
+  start: Point$2;
+  current: Point$2;
+  previous: Point$2;
+  delta: Point$2;
+  total: Point$2;
+  velocity: Point$2;
+  timestamp: number;
+}
+interface InteractionEvent {
+  target: HTMLElement;
+  pointers: PointerState[];
+  isPrimary: boolean;
+  originalEvent: PointerEvent;
+}
+interface GripOptions {
+  onStart?: (event: InteractionEvent) => void;
+  onMove?: (event: InteractionEvent) => void;
+  onEnd?: (event: InteractionEvent) => void;
+  onTap?: (event: InteractionEvent) => void;
+  onDoubleTap?: (event: InteractionEvent) => void;
+  onHold?: (event: InteractionEvent) => void;
+  threshold?: number;
+  preventScroll?: boolean;
+  holdDelay?: number;
+  holdDuration?: number;
+  mouseButtons?: number;
+  allowFrom?: string;
+  ignoreFrom?: string;
+  touchAction?: string;
+  styleCursor?: boolean;
+}
+declare class Grip {
+  protected element: HTMLElement;
+  protected options: GripOptions;
+  protected pointers: Map<number, PointerState>;
+  private pointersCache;
+  protected isActive: boolean;
+  protected lastUpdate: number;
+  protected priority: number;
+  private _enabled;
+  private holdTimer;
+  private holdEventTimer;
+  private lastTapTime;
+  private lastTapTarget;
+  private listeners;
+  on(event: string, handler: Function): this;
+  off(event: string, handler: Function): this;
+  protected emit(event: string, data: any): void;
+  get enabled(): boolean;
+  set enabled(value: boolean);
+  get interacting(): boolean;
+  private static elementInstances;
+  private static activeInstance;
+  private static elementListeners;
+  constructor(element: HTMLElement, options?: GripOptions);
+  private registerInstance;
+  private unregisterInstance;
+  protected shouldHandleEvent(_e: PointerEvent): boolean;
+  private checkEventFilters;
+  private static handleElementPointerDown;
+  private onPointerDown;
+  private handlePointerDown;
+  private onPointerMove;
+  private onPointerUp;
+  private start;
+  private end;
+  update(): void;
+  hasActivePointers(): boolean;
+  private createEvent;
+  destroy(): void;
+}
+//#endregion
+//#region src/types.d.ts
+interface Point$1 {
+  x: number;
+  y: number;
+}
+interface ActiveEdges {
+  top: boolean;
+  right: boolean;
+  bottom: boolean;
+  left: boolean;
+}
+interface ModifierContext {
+  position: Point$1;
+  velocity: Point$1;
+  element: HTMLElement;
+  startPosition: Point$1;
+  delta: Point$1;
+  edges?: ActiveEdges;
+  size?: {
+    width: number;
+    height: number;
+  };
+  startSize?: {
+    width: number;
+    height: number;
+  };
+}
+interface ModifierResult {
+  position: Point$1;
+  velocity: Point$1;
+  size?: {
+    width: number;
+    height: number;
+  };
+}
+interface Modifier {
+  name: string;
+  onStart?(context: ModifierContext): void;
+  modify(context: ModifierContext): ModifierResult;
+  onEnd?(context: ModifierContext): ModifierResult | void;
+}
+//#endregion
+//#region src/drag.d.ts
+interface DragOptions extends GripOptions {
+  /** Enable ARIA attributes for accessibility (default: true) */
+  aria?: boolean;
+  axis?: 'x' | 'y' | 'xy' | 'start';
+  startAxis?: 'x' | 'y';
+  handle?: string | HTMLElement;
+  bounds?: 'parent' | HTMLElement | {
+    left?: number;
+    top?: number;
+    right?: number;
+    bottom?: number;
+  };
+  grid?: {
+    x: number;
+    y: number;
+  };
+  momentum?: boolean | {
+    friction?: number;
+    minSpeed?: number;
+  };
+  modifiers?: Modifier[];
+  droppable?: boolean;
+  cursorChecker?: (action: 'idle' | 'grab' | 'grabbing') => string;
+  onDragStart?: (event: DragEvent) => void;
+  onDragMove?: (event: DragEvent) => void;
+  onDragEnd?: (event: DragEvent) => void;
+}
+interface DragEvent extends InteractionEvent {
+  dx: number;
+  dy: number;
+  totalX: number;
+  totalY: number;
+  velocityX: number;
+  velocityY: number;
+}
+declare class Draggable extends Grip {
+  private dragOptions;
+  private transform;
+  private startTransform;
+  private bounds;
+  private momentum;
+  private transformNormalized;
+  private detectedAxis;
+  private startAxisConfirmed;
+  private cachedSize;
+  private modifierContext;
+  private cachedDragEvent;
+  constructor(element: HTMLElement, options?: DragOptions);
+  protected shouldHandleEvent(e: PointerEvent): boolean;
+  private readCurrentTransform;
+  private handleDragStart;
+  private handleDragMove;
+  private handleDragEnd;
+  private startMomentum;
+  private applyTransform;
+  private createDragEvent;
+  setPosition(x: number, y: number): void;
+  getPosition(): {
+    x: number;
+    y: number;
+  };
+  destroy(): void;
+}
+//#endregion
+//#region src/resize.d.ts
+interface ResizeOptions extends GripOptions {
+  edges?: {
+    top?: boolean;
+    right?: boolean;
+    bottom?: boolean;
+    left?: boolean;
+  };
+  handleSize?: number;
+  minWidth?: number;
+  minHeight?: number;
+  maxWidth?: number;
+  maxHeight?: number;
+  aspectRatio?: number | 'preserve';
+  square?: boolean;
+  invert?: 'none' | 'negate' | 'reposition';
+  grid?: {
+    width: number;
+    height: number;
+  };
+  modifiers?: Modifier[];
+  cursorChecker?: (edge: string | null) => string;
+  onResizeStart?: (event: ResizeEvent) => void;
+  onResizeMove?: (event: ResizeEvent) => void;
+  onResizeEnd?: (event: ResizeEvent) => void;
+}
+interface ResizeEvent extends InteractionEvent {
+  width: number;
+  height: number;
+  deltaWidth: number;
+  deltaHeight: number;
+  edges: {
+    top: boolean;
+    right: boolean;
+    bottom: boolean;
+    left: boolean;
+  };
+}
+declare class Resizable extends Grip {
+  private resizeOptions;
+  private startSize;
+  private startPos;
+  private currentSize;
+  private currentPos;
+  private activeEdge;
+  private edgeFlags;
+  private aspectRatio;
+  private boundUpdateCursor;
+  private transformNormalized;
+  private modifierContext;
+  private cachedResizeEvent;
+  constructor(element: HTMLElement, options?: ResizeOptions);
+  private normalizeInitialTransform;
+  protected shouldHandleEvent(e: PointerEvent): boolean;
+  private updateCursor;
+  private detectEdge;
+  private getCursor;
+  private handleResizeStart;
+  private handleResizeMove;
+  private handleResizeEnd;
+  private createResizeEvent;
+  setSize(width: number, height: number): void;
+  getSize(): {
+    width: number;
+    height: number;
+  };
+  destroy(): void;
+}
+//#endregion
+//#region src/gesture.d.ts
+interface GestureEvent extends InteractionEvent {
+  scale: number;
+  rotation: number;
+  distance: number;
+  angle: number;
+  center: Point$2;
+  deltaScale: number;
+  deltaAngle: number;
+}
+interface GestureOptions extends GripOptions {
+  minPointers?: number;
+  onGestureStart?: (event: GestureEvent) => void;
+  onGestureMove?: (event: GestureEvent) => void;
+  onGestureEnd?: (event: GestureEvent) => void;
+}
+declare class Gesturable extends Grip {
+  private gestureOptions;
+  private gestureActive;
+  private startDistance;
+  private startAngle;
+  private prevScale;
+  private prevAngle;
+  private minPointers;
+  constructor(element: HTMLElement, options?: GestureOptions);
+  protected shouldHandleEvent(_e: PointerEvent): boolean;
+  private getTwoPointers;
+  private computeDistance;
+  private computeAngle;
+  private computeCenter;
+  private normalizeAngleDelta;
+  private createGestureEvent;
+  update(): void;
+  private endGesture;
+  destroy(): void;
+}
+//#endregion
+//#region src/dropzone.d.ts
+interface DropEvent {
+  target: HTMLElement;
+  draggable: HTMLElement;
+  dragEvent?: DragEvent;
+  overlap: number;
+}
+interface DropzoneOptions {
+  accept?: string | ((draggable: HTMLElement) => boolean);
+  overlap?: 'pointer' | 'center' | number;
+  activeClass?: string;
+  hoverClass?: string;
+  /** Enable ARIA attributes (default: true) */
+  aria?: boolean;
+  onActivate?: (event: DropEvent) => void;
+  onDeactivate?: (event: DropEvent) => void;
+  onDragEnter?: (event: DropEvent) => void;
+  onDragLeave?: (event: DropEvent) => void;
+  onDragOver?: (event: DropEvent) => void;
+  onDrop?: (event: DropEvent) => void;
+}
+interface Point {
+  x: number;
+  y: number;
+}
+declare class Dropzone {
+  readonly element: HTMLElement;
+  private options;
+  private _isOver;
+  private _isActive;
+  private _enabled;
+  private listeners;
+  on(event: string, handler: Function): this;
+  off(event: string, handler: Function): this;
+  private emit;
+  get enabled(): boolean;
+  set enabled(value: boolean);
+  constructor(element: HTMLElement, options?: DropzoneOptions);
+  get isOver(): boolean;
+  get isActive(): boolean;
+  accepts(draggableEl: HTMLElement): boolean;
+  checkOverlap(draggableEl: HTMLElement, pointerPos: Point): number;
+  activate(draggableEl: HTMLElement): void;
+  deactivate(draggableEl: HTMLElement): void;
+  enter(draggableEl: HTMLElement, overlap: number, dragEvent?: DragEvent): void;
+  leave(draggableEl: HTMLElement, dragEvent?: DragEvent): void;
+  over(draggableEl: HTMLElement, overlap: number, dragEvent?: DragEvent): void;
+  drop(draggableEl: HTMLElement, overlap: number, dragEvent?: DragEvent): void;
+  private createEvent;
+  updateOptions(options: Partial<DropzoneOptions>): void;
+  destroy(): void;
+}
+//#endregion
+//#region src/sortable.d.ts
+interface SortableOptions {
+  /** Enable ARIA attributes for accessibility (default: true) */
+  aria?: boolean;
+  /** CSS selector for draggable items within the container (default: direct children) */
+  items?: string;
+  /** Axis of sorting: 'y' for vertical lists, 'x' for horizontal (default: 'y') */
+  axis?: 'x' | 'y';
+  /** CSS selector for drag handle within each item (optional) */
+  handle?: string;
+  /** Animation duration in ms for items shifting out of the way (default: 200) */
+  animationDuration?: number;
+  /** CSS class added to the item being dragged */
+  dragClass?: string;
+  /** CSS class added to a container when a grouped item hovers over it */
+  hoverClass?: string;
+  /**
+   * Group name — sortables with the same group can exchange items.
+   * Items can be dragged between any sortables sharing the same group name.
+   */
+  group?: string;
+  /** Called when order changes during drag (within same container) */
+  onSort?: (event: SortEvent) => void;
+  /** Called when drag ends and order is finalized */
+  onSortEnd?: (event: SortEvent) => void;
+  /** Called when an item is added from another sortable */
+  onAdd?: (event: SortTransferEvent) => void;
+  /** Called when an item is removed to another sortable */
+  onRemove?: (event: SortTransferEvent) => void;
+}
+interface SortEvent {
+  item: HTMLElement;
+  oldIndex: number;
+  newIndex: number;
+  items: HTMLElement[];
+}
+interface SortTransferEvent {
+  item: HTMLElement;
+  from: Sortable;
+  to: Sortable;
+  oldIndex: number;
+  newIndex: number;
+}
+declare class Sortable {
+  readonly container: HTMLElement;
+  private options;
+  private draggables;
+  private itemStates;
+  private dragItem;
+  private dragIndex;
+  private currentIndex;
+  private targetSortable;
+  private targetIndex;
+  private placeholder;
+  private _enabled;
+  private listeners;
+  on(event: string, handler: Function): this;
+  off(event: string, handler: Function): this;
+  private emit;
+  get enabled(): boolean;
+  set enabled(value: boolean);
+  constructor(container: HTMLElement, options?: SortableOptions);
+  getItems(): HTMLElement[];
+  private setup;
+  private handleDragStart;
+  private handleDragMove;
+  private updateWithinIndex;
+  private findTargetContainer;
+  private setTargetSortable;
+  private clearTargetSortable;
+  private updatePlaceholder;
+  private removePlaceholder;
+  private handleDragEnd;
+  snapshotItems(): void;
+  private animateItems;
+  private reorderDOM;
+  /** Refresh the sortable (e.g., after dynamically adding/removing items) */
+  refresh(): void;
+  /** Get the current order of items */
+  getOrder(): HTMLElement[];
+  /** Programmatically move an item */
+  move(fromIndex: number, toIndex: number): void;
+  private teardown;
+  destroy(): void;
+}
+//#endregion
+//#region src/index.d.ts
+interface InteractableOptions {
+  drag?: boolean | DragOptions;
+  resize?: boolean | ResizeOptions;
+  gesture?: boolean | GestureOptions;
+}
+//#endregion
+//#region src/react.d.ts
+declare const useGrip: (options?: GripOptions | undefined, deps?: React.DependencyList) => {
+  ref: MutableRefObject<HTMLElement | null>;
+  instance: React.MutableRefObject<Grip | null>;
+};
+declare const useDraggable: (options?: DragOptions | undefined, deps?: React.DependencyList) => {
+  ref: MutableRefObject<HTMLElement | null>;
+  instance: React.MutableRefObject<Draggable | null>;
+};
+declare const useResizable: (options?: ResizeOptions | undefined, deps?: React.DependencyList) => {
+  ref: MutableRefObject<HTMLElement | null>;
+  instance: React.MutableRefObject<Resizable | null>;
+};
+declare const useGesturable: (options?: GestureOptions | undefined, deps?: React.DependencyList) => {
+  ref: MutableRefObject<HTMLElement | null>;
+  instance: React.MutableRefObject<Gesturable | null>;
+};
+declare function useDropzone(options?: DropzoneOptions, deps?: React.DependencyList): {
+  ref: MutableRefObject<HTMLElement | null>;
+  instance: MutableRefObject<Dropzone | null>;
+};
+declare function useSortable(options?: SortableOptions, deps?: React.DependencyList): {
+  ref: MutableRefObject<HTMLElement | null>;
+  instance: MutableRefObject<Sortable | null>;
+};
+declare function useInteractable(options?: InteractableOptions, deps?: React.DependencyList): {
+  ref: MutableRefObject<HTMLElement | null>;
+  instance: MutableRefObject<{
+    drag: Draggable | null;
+    resize: Resizable | null;
+    gesture: Gesturable | null;
+    destroy: () => void;
+  } | null>;
+};
+declare const GripComponent: ({
+  children,
+  as: Tag,
+  className,
+  style,
+  ...options
+}: GripOptions & {
+  children: React.ReactNode;
+  as?: keyof React.JSX.IntrinsicElements;
+  className?: string;
+  style?: React.CSSProperties;
+}) => React.JSX.Element;
+declare const DraggableComponent: ({
+  children,
+  as: Tag,
+  className,
+  style,
+  ...options
+}: DragOptions & {
+  children: React.ReactNode;
+  as?: keyof React.JSX.IntrinsicElements;
+  className?: string;
+  style?: React.CSSProperties;
+}) => React.JSX.Element;
+declare const ResizableComponent: ({
+  children,
+  as: Tag,
+  className,
+  style,
+  ...options
+}: ResizeOptions & {
+  children: React.ReactNode;
+  as?: keyof React.JSX.IntrinsicElements;
+  className?: string;
+  style?: React.CSSProperties;
+}) => React.JSX.Element;
+declare const GesturableComponent: ({
+  children,
+  as: Tag,
+  className,
+  style,
+  ...options
+}: GestureOptions & {
+  children: React.ReactNode;
+  as?: keyof React.JSX.IntrinsicElements;
+  className?: string;
+  style?: React.CSSProperties;
+}) => React.JSX.Element;
+declare const InteractableComponent: ({
+  children,
+  as: Tag,
+  className,
+  style,
+  ...options
+}: InteractableOptions & {
+  children: React.ReactNode;
+  as?: keyof React.JSX.IntrinsicElements;
+  className?: string;
+  style?: React.CSSProperties;
+}) => React.JSX.Element;
+//#endregion
+export { type DragEvent, type DragOptions, DraggableComponent, type DropEvent, type DropzoneOptions, GesturableComponent, type GestureEvent, type GestureOptions, GripComponent, type GripOptions, InteractableComponent, type InteractableOptions, type InteractionEvent, ResizableComponent, type ResizeEvent, type ResizeOptions, type SortEvent, type SortableOptions, useDraggable, useDropzone, useGesturable, useGrip, useInteractable, useResizable, useSortable };
+//# sourceMappingURL=pointrix-react.d.mts.map

package/dist/pointrix-react.mjs

@@ -0,0 +1,2 @@
+import e,{useEffect as t,useRef as n}from"react";let r=null,i=new Set,a=new Set,o=null;function s(){return!o&&typeof PointerEvent<`u`&&(o=new PointerEvent(`pointermove`)),o}function c(){r===null&&(r=requestAnimationFrame(()=>{r=null;for(let e of a)e.update();if(a.clear(),i.size>0){let e=!1;for(let t of i)if(t.hasActivePointers()){e=!0;break}e&&c()}}))}var l=class e{on(e,t){return this.listeners.has(e)||this.listeners.set(e,new Set),this.listeners.get(e).add(t),this}off(e,t){return this.listeners.get(e)?.delete(t),this}emit(e,t){let n=this.listeners.get(e);if(n)for(let e of n)e(t)}get enabled(){return this._enabled}set enabled(t){this._enabled=t,!t&&this.isActive&&(this.pointers.clear(),this.pointersCache=[],this.isActive=!1,i.delete(this),a.delete(this),e.activeInstance.get(this.element)===this&&e.activeInstance.set(this.element,null),document.removeEventListener(`pointermove`,this.onPointerMove),document.removeEventListener(`pointerup`,this.onPointerUp),document.removeEventListener(`pointercancel`,this.onPointerUp))}get interacting(){return this.isActive}static{this.elementInstances=new WeakMap}static{this.activeInstance=new WeakMap}static{this.elementListeners=new WeakMap}constructor(t,n={}){this.pointers=new Map,this.pointersCache=[],this.isActive=!1,this.lastUpdate=0,this.priority=0,this._enabled=!0,this.holdTimer=null,this.holdEventTimer=null,this.lastTapTime=0,this.lastTapTarget=null,this.listeners=new Map,this.element=t,this.options={threshold:3,preventScroll:!0,styleCursor:!0,...n},this.registerInstance();let r=e.elementInstances.get(t);if(r&&r.length===1&&(t.style.touchAction=this.options.touchAction??`none`,t.style.userSelect=`none`,t.style.webkitUserSelect=`none`),this.onPointerDown=this.onPointerDown.bind(this),this.onPointerMove=this.onPointerMove.bind(this),this.onPointerUp=this.onPointerUp.bind(this),r&&r.length===1){let n=n=>e.handleElementPointerDown(t,n);e.elementListeners.set(t,n),t.addEventListener(`pointerdown`,n)}}registerInstance(){let t=e.elementInstances.get(this.element);t?t.push(this):e.elementInstances.set(this.element,[this])}unregisterInstance(){let t=e.elementInstances.get(this.element);if(!t)return;let n=t.indexOf(this);n>=0&&(t.splice(n,1),t.length===0?(e.elementInstances.delete(this.element),e.activeInstance.delete(this.element),e.elementListeners.delete(this.element)):e.elementInstances.set(this.element,t))}shouldHandleEvent(e){return!0}checkEventFilters(e){let t=e.target;return t?!(this.options.ignoreFrom&&t.closest(this.options.ignoreFrom)||this.options.allowFrom&&!t.closest(this.options.allowFrom)):!0}static handleElementPointerDown(t,n){let r=e.elementInstances.get(t);if(!r)return;let i=e.activeInstance.get(t);if(i){i.onPointerDown(n);return}let a=null,o=-1;for(let e of r)e.checkEventFilters(n)&&e.shouldHandleEvent(n)&&e.enabled&&e.priority>o&&(a=e,o=e.priority);a&&(e.activeInstance.set(t,a),a.handlePointerDown(n))}onPointerDown(e){this.handlePointerDown(e)}handlePointerDown(e){if(this.options.mouseButtons&&!(e.buttons&this.options.mouseButtons))return;this.options.preventScroll&&e.preventDefault();let t={x:e.clientX,y:e.clientY},n={id:e.pointerId,start:{...t},current:{...t},previous:{...t},delta:{x:0,y:0},total:{x:0,y:0},velocity:{x:0,y:0},timestamp:e.timeStamp};this.pointers.set(e.pointerId,n),this.pointersCache=Array.from(this.pointers.values()),this.pointers.size===1&&(document.addEventListener(`pointermove`,this.onPointerMove,{passive:!1}),document.addEventListener(`pointerup`,this.onPointerUp),document.addEventListener(`pointercancel`,this.onPointerUp)),this.options.onHold&&(this.holdEventTimer&&clearTimeout(this.holdEventTimer),this.holdEventTimer=setTimeout(()=>{this.holdEventTimer=null,this.pointers.size>0&&!this.isActive&&this.options.onHold(this.createEvent(e))},this.options.holdDuration??600));let r=this.options.holdDelay??0;r>0?(this.holdTimer&&clearTimeout(this.holdTimer),this.holdTimer=setTimeout(()=>{this.holdTimer=null,!this.isActive&&this.pointers.size>0&&this.start(e)},r)):this.options.threshold===0&&this.start(e)}onPointerMove(e){let t=this.pointers.get(e.pointerId);if(!t)return;let n=e.clientX,r=e.clientY;if(t.current.x!==n||t.current.y!==r){if(t.current.x=n,t.current.y=r,!this.isActive){let n=t.current.x-t.start.x,r=t.current.y-t.start.y;Math.sqrt(n*n+r*r)>=(this.options.threshold||3)&&(this.holdTimer&&=(clearTimeout(this.holdTimer),null),this.holdEventTimer&&=(clearTimeout(this.holdEventTimer),null),this.start(e))}this.isActive&&(this.options.preventScroll&&e.preventDefault(),i.add(this),a.add(this),c())}}onPointerUp(e){if(this.pointers.get(e.pointerId)&&(this.pointers.delete(e.pointerId),this.pointersCache=Array.from(this.pointers.values()),this.holdTimer&&=(clearTimeout(this.holdTimer),null),this.holdEventTimer&&=(clearTimeout(this.holdEventTimer),null),this.pointers.size===0))if(document.removeEventListener(`pointermove`,this.onPointerMove),document.removeEventListener(`pointerup`,this.onPointerUp),document.removeEventListener(`pointercancel`,this.onPointerUp),this.isActive)this.end(e);else{let t=this.createEvent(e);this.options.onTap&&this.options.onTap(t),this.emit(`tap`,t);let n=e.timeStamp;this.options.onDoubleTap&&n-this.lastTapTime<300&&this.lastTapTarget===e.target&&this.options.onDoubleTap(t),this.lastTapTime=n,this.lastTapTarget=e.target}}start(e){this.isActive=!0,i.add(this);let t=this.createEvent(e);this.options.onStart&&this.options.onStart(t),this.emit(`start`,t)}end(t){this.isActive=!1,i.delete(this),a.delete(this),e.activeInstance.get(this.element)===this&&e.activeInstance.set(this.element,null);let n=this.createEvent(t);this.options.onEnd&&this.options.onEnd(n),this.emit(`end`,n)}update(){if(!this.isActive||this.pointers.size===0)return;let e=performance.now(),t=e-this.lastUpdate;this.lastUpdate=e;let n=!1,r=!1;if(this.pointers.forEach(e=>{let i=e.current.x-e.previous.x,a=e.current.y-e.previous.y;if(i!==0||a!==0){if(n=!0,e.delta.x=i,e.delta.y=a,e.total.x=e.current.x-e.start.x,e.total.y=e.current.y-e.start.y,t>0){let n=i/t*1e3,r=a/t*1e3;e.velocity.x=e.velocity.x*.7+n*.3,e.velocity.y=e.velocity.y*.7+r*.3}e.previous.x=e.current.x,e.previous.y=e.current.y}(Math.abs(e.velocity.x)>.1||Math.abs(e.velocity.y)>.1)&&(r=!0)}),n){let e=s(),t=this.createEvent(e);this.options.onMove&&this.options.onMove(t),this.emit(`move`,t)}r&&a.add(this)}hasActivePointers(){if(!this.isActive||this.pointers.size===0)return!1;for(let e of this.pointers.values())if(Math.abs(e.velocity.x)>.1||Math.abs(e.velocity.y)>.1)return!0;return this.pointers.size>0}createEvent(e){return{target:this.element,pointers:this.pointersCache,isPrimary:e.isPrimary,originalEvent:e}}destroy(){this.holdTimer&&=(clearTimeout(this.holdTimer),null),this.holdEventTimer&&=(clearTimeout(this.holdEventTimer),null),this.unregisterInstance();let t=e.elementInstances.get(this.element);if(!t||t.length===0){let t=e.elementListeners.get(this.element);t&&(this.element.removeEventListener(`pointerdown`,t),e.elementListeners.delete(this.element)),this.element.style.touchAction=``,this.element.style.userSelect=``,this.element.style.webkitUserSelect=``}this.pointers.size>0&&(document.removeEventListener(`pointermove`,this.onPointerMove),document.removeEventListener(`pointerup`,this.onPointerUp),document.removeEventListener(`pointercancel`,this.onPointerUp)),i.delete(this),this.pointers.clear(),this.pointersCache=[]}};function u(e,t){let n=typeof e==`string`?document.querySelector(e):e;if(!n)throw Error(`Element not found: ${e}`);return new l(n,t)}function d(e,t){let n=t.position.x,r=t.position.y,i=t.velocity.x,a=t.velocity.y,o=t.size?.width,s=t.size?.height;for(let c of e){t.position.x=n,t.position.y=r,t.velocity.x=i,t.velocity.y=a,t.size&&o!==void 0&&s!==void 0&&(t.size.width=o,t.size.height=s);let e=c.modify(t);n=e.position.x,r=e.position.y,i=e.velocity.x,a=e.velocity.y,e.size&&(o=e.size.width,s=e.size.height)}return{position:{x:n,y:r},velocity:{x:i,y:a},size:o!==void 0&&s!==void 0?{width:o,height:s}:void 0}}let f={instructions:`Press Space or Enter to pick up. Use arrow keys to move. Press Space or Enter to drop. Press Escape to cancel.`,pickedUp:(e,t,n)=>`Picked up ${e}, position ${t} of ${n}`,movedTo:(e,t)=>`Moved to position ${e} of ${t}`,dropped:(e,t,n)=>`Dropped ${e} in position ${t} of ${n}`,dragPickedUp:`Picked up`,dragDropped:`Dropped`};function p(){return f}let m=null;function h(){return m&&m.isConnected?m:(m=document.createElement(`div`),m.setAttribute(`aria-live`,`assertive`),m.setAttribute(`aria-atomic`,`true`),m.setAttribute(`role`,`status`),m.style.cssText=`position:fixed;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0`,document.body.appendChild(m),m)}function g(e){let t=h();t.textContent=``,requestAnimationFrame(()=>{t.textContent=e})}let _=null;const v=`grip-instructions`;function y(){return _&&_.isConnected?(_.textContent=f.instructions,v):(_=document.createElement(`div`),_.id=v,_.style.cssText=`position:fixed;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0`,_.textContent=f.instructions,document.body.appendChild(_),v)}function b(e){e.hasAttribute(`tabindex`)||e.setAttribute(`tabindex`,`0`),e.hasAttribute(`role`)||e.setAttribute(`role`,`button`),e.setAttribute(`aria-roledescription`,`draggable`),e.setAttribute(`aria-describedby`,y())}function x(e,t){e.setAttribute(`aria-grabbed`,String(t))}function S(e){e.removeAttribute(`aria-roledescription`),e.removeAttribute(`aria-grabbed`),e.removeAttribute(`aria-describedby`)}function C(e,t,n){e.hasAttribute(`tabindex`)||e.setAttribute(`tabindex`,`0`),e.hasAttribute(`role`)||e.setAttribute(`role`,`option`),e.setAttribute(`aria-roledescription`,`sortable`),e.setAttribute(`aria-describedby`,y()),e.setAttribute(`aria-posinset`,String(t+1)),e.setAttribute(`aria-setsize`,String(n))}function w(e){e.removeAttribute(`aria-roledescription`),e.removeAttribute(`aria-grabbed`),e.removeAttribute(`aria-describedby`),e.removeAttribute(`aria-posinset`),e.removeAttribute(`aria-setsize`)}function ee(e){e.hasAttribute(`role`)||e.setAttribute(`role`,`listbox`)}function T(e){e.getAttribute(`role`)===`listbox`&&e.removeAttribute(`role`)}function E(e){e.setAttribute(`aria-dropeffect`,`move`)}function D(e,t){e.setAttribute(`aria-dropeffect`,t?`move`:`none`)}function O(e){e.removeAttribute(`aria-dropeffect`)}function k(e,t){return t.x>=e.left&&t.x<=e.right&&t.y>=e.top&&t.y<=e.bottom}function A(e,t){let n=Math.max(0,Math.min(e.right,t.right)-Math.max(e.left,t.left))*Math.max(0,Math.min(e.bottom,t.bottom)-Math.max(e.top,t.top)),r=e.width*e.height;return r>0?n/r:0}var j=class{on(e,t){return this.listeners.has(e)||this.listeners.set(e,new Set),this.listeners.get(e).add(t),this}off(e,t){return this.listeners.get(e)?.delete(t),this}emit(e,t){let n=this.listeners.get(e);if(n)for(let e of n)e(t)}get enabled(){return this._enabled}set enabled(e){this._enabled=e}constructor(e,t={}){this._isOver=!1,this._isActive=!1,this._enabled=!0,this.listeners=new Map,this.element=e,this.options={overlap:`pointer`,aria:!0,...t},M.register(this),this.options.aria!==!1&&E(e)}get isOver(){return this._isOver}get isActive(){return this._isActive}accepts(e){if(!this._enabled)return!1;let{accept:t}=this.options;return t?typeof t==`function`?t(e):e.matches(t):!0}checkOverlap(e,t){let n=this.element.getBoundingClientRect(),r=this.options.overlap??`pointer`;if(r===`pointer`)return k(n,t)?1:0;let i=e.getBoundingClientRect();if(r===`center`)return k(n,{x:i.left+i.width/2,y:i.top+i.height/2})?1:0;let a=A(i,n);return a>=r?a:0}activate(e){if(this._isActive)return;this._isActive=!0,this.options.activeClass&&this.element.classList.add(this.options.activeClass),this.options.aria!==!1&&D(this.element,!0);let t=this.createEvent(e,0);this.options.onActivate?.(t),this.emit(`activate`,t)}deactivate(e){if(!this._isActive)return;this._isOver&&this.leave(e),this._isActive=!1,this.options.activeClass&&this.element.classList.remove(this.options.activeClass),this.options.aria!==!1&&D(this.element,!1);let t=this.createEvent(e,0);this.options.onDeactivate?.(t),this.emit(`deactivate`,t)}enter(e,t,n){if(this._isOver)return;this._isOver=!0,this.options.hoverClass&&this.element.classList.add(this.options.hoverClass);let r=this.createEvent(e,t,n);this.options.onDragEnter?.(r),this.emit(`dragenter`,r)}leave(e,t){if(!this._isOver)return;this._isOver=!1,this.options.hoverClass&&this.element.classList.remove(this.options.hoverClass);let n=this.createEvent(e,0,t);this.options.onDragLeave?.(n),this.emit(`dragleave`,n)}over(e,t,n){let r=this.createEvent(e,t,n);this.options.onDragOver?.(r),this.emit(`dragover`,r)}drop(e,t,n){let r=this.createEvent(e,t,n);this.options.onDrop?.(r),this.emit(`drop`,r)}createEvent(e,t,n){return{target:this.element,draggable:e,dragEvent:n,overlap:t}}updateOptions(e){this.options={...this.options,...e}}destroy(){this._isOver=!1,this._isActive=!1,this.options.activeClass&&this.element.classList.remove(this.options.activeClass),this.options.hoverClass&&this.element.classList.remove(this.options.hoverClass),this.options.aria!==!1&&O(this.element),M.unregister(this)}};const M=new class{constructor(){this.zones=new Set}register(e){this.zones.add(e)}unregister(e){this.zones.delete(e)}onDragStart(e){for(let t of this.zones)t.accepts(e)&&t.activate(e)}onDragMove(e,t,n){for(let r of this.zones){if(!r.isActive)continue;let i=r.checkOverlap(e,t);i>0?(r.isOver||r.enter(e,i,n),r.over(e,i,n)):r.isOver&&r.leave(e,n)}}onDragEnd(e,t,n){for(let r of this.zones)if(r.isActive){if(r.isOver){let i=r.checkOverlap(e,t);r.drop(e,i>0?i:1,n)}r.deactivate(e)}}getActiveZones(){let e=[];for(let t of this.zones)t.isActive&&e.push(t);return e}getHoveredZones(){let e=[];for(let t of this.zones)t.isOver&&e.push(t);return e}};function N(e,t){let n=typeof e==`string`?document.querySelector(e):e;if(!n)throw Error(`Element not found: ${e}`);return new j(n,t)}var P=class extends l{constructor(e,t={}){super(e,{...t,onStart:e=>{this.handleDragStart(e),t.onStart?.(e)},onMove:e=>{this.handleDragMove(e),t.onMove?.(e)},onEnd:e=>{this.handleDragEnd(e),t.onEnd?.(e)}}),this.transform={x:0,y:0},this.startTransform={x:0,y:0},this.bounds=null,this.momentum={vx:0,vy:0,active:!1},this.transformNormalized=!1,this.detectedAxis=null,this.startAxisConfirmed=!1,this.cachedSize={width:0,height:0},this.modifierContext={position:{x:0,y:0},velocity:{x:0,y:0},element:null,startPosition:{x:0,y:0},delta:{x:0,y:0},size:{width:0,height:0}},this.cachedDragEvent={target:null,originalEvent:null,pointers:[],isPrimary:!0,dx:0,dy:0,totalX:0,totalY:0,velocityX:0,velocityY:0},this.dragOptions=t,this.priority=5,t.styleCursor!==!1&&(e.style.cursor=t.cursorChecker?t.cursorChecker(`idle`):`grab`),t.aria!==!1&&b(e)}shouldHandleEvent(e){if(!this.dragOptions.handle)return!0;let t=null;return t=typeof this.dragOptions.handle==`string`?this.element.querySelector(this.dragOptions.handle):this.dragOptions.handle,t?t.contains(e.target):!1}readCurrentTransform(e){let t=window.getComputedStyle(e).transform;if(t&&t!==`none`){let e=t.match(/matrix.*\((.+)\)/);if(e){let t=e[1].split(`, `);this.transform.x=parseFloat(t[4])||0,this.transform.y=parseFloat(t[5])||0}}else this.transformNormalized||(this.transform.x=0,this.transform.y=0);this.transformNormalized||=(e.style.transform=`translate3d(${this.transform.x}px, ${this.transform.y}px, 0)`,!0)}handleDragStart(e){let t=e.target;if(this.dragOptions.aria!==!1&&(x(t,!0),g(p().dragPickedUp)),this.detectedAxis=null,this.startAxisConfirmed=!1,this.readCurrentTransform(t),this.dragOptions.styleCursor!==!1&&(t.style.cursor=this.dragOptions.cursorChecker?this.dragOptions.cursorChecker(`grabbing`):`grabbing`),t.style.willChange=`transform`,this.startTransform={...this.transform},this.dragOptions.bounds){let e=t.getBoundingClientRect(),n=this.startTransform.x,r=this.startTransform.y,i;if(this.dragOptions.bounds===`parent`){let e=(t.offsetParent||document.body).getBoundingClientRect();i={left:e.left,top:e.top,right:e.right,bottom:e.bottom}}else if(this.dragOptions.bounds instanceof HTMLElement){let e=this.dragOptions.bounds.getBoundingClientRect();i={left:e.left,top:e.top,right:e.right,bottom:e.bottom}}else{let e=this.dragOptions.bounds;i={left:e.left??-1/0,top:e.top??-1/0,right:e.right??1/0,bottom:e.bottom??1/0}}let a=i.left-e.left+n,o=i.top-e.top+r,s=i.right-e.right+n,c=i.bottom-e.bottom+r;this.bounds=new DOMRect(a,o,s-a,c-o)}this.momentum.active=!1;let n=e.target.getBoundingClientRect();if(this.cachedSize.width=n.width,this.cachedSize.height=n.height,this.dragOptions.modifiers?.length){let t=this.modifierContext;t.position.x=this.startTransform.x,t.position.y=this.startTransform.y,t.velocity.x=0,t.velocity.y=0,t.element=e.target,t.startPosition.x=this.startTransform.x,t.startPosition.y=this.startTransform.y,t.delta.x=0,t.delta.y=0,t.size.width=this.cachedSize.width,t.size.height=this.cachedSize.height;for(let e of this.dragOptions.modifiers)e.onStart?.(t)}let r=this.createDragEvent(e,0,0);this.dragOptions.onDragStart&&this.dragOptions.onDragStart(r),this.emit(`dragstart`,r),this.dragOptions.droppable&&M.onDragStart(e.target)}handleDragMove(e){let t=e.pointers[0],n=t.total.x,r=t.total.y;if(this.dragOptions.startAxis&&!this.startAxisConfirmed){let e=Math.abs(n),t=Math.abs(r);if(this.dragOptions.startAxis===`x`&&t>e||this.dragOptions.startAxis===`y`&&e>t)return;this.startAxisConfirmed=!0}if(this.dragOptions.axis===`start`&&this.detectedAxis===null){let e=Math.abs(n),t=Math.abs(r);(e>0||t>0)&&(this.detectedAxis=e>t?`x`:`y`)}let i=this.dragOptions.axis===`start`?this.detectedAxis:this.dragOptions.axis;i===`x`?r=0:i===`y`&&(n=0);let a=this.startTransform.x+n,o=this.startTransform.y+r;if(this.dragOptions.grid&&(a=Math.round(a/this.dragOptions.grid.x)*this.dragOptions.grid.x,o=Math.round(o/this.dragOptions.grid.y)*this.dragOptions.grid.y),this.bounds&&(a=Math.max(this.bounds.left,Math.min(a,this.bounds.right)),o=Math.max(this.bounds.top,Math.min(o,this.bounds.bottom))),this.dragOptions.modifiers?.length){let n=this.modifierContext;n.position.x=a,n.position.y=o,n.velocity.x=t.velocity.x,n.velocity.y=t.velocity.y,n.element=e.target,n.startPosition.x=this.startTransform.x,n.startPosition.y=this.startTransform.y,n.delta.x=t.delta.x,n.delta.y=t.delta.y,n.size.width=this.cachedSize.width,n.size.height=this.cachedSize.height;let r=d(this.dragOptions.modifiers,n);a=r.position.x,o=r.position.y}this.transform={x:a,y:o},this.applyTransform(e.target),this.dragOptions.momentum&&(this.momentum.vx=t.velocity.x,this.momentum.vy=t.velocity.y);let s=this.createDragEvent(e,n,r);this.dragOptions.onDragMove&&this.dragOptions.onDragMove(s),this.emit(`dragmove`,s),this.dragOptions.droppable&&M.onDragMove(e.target,t.current,s)}handleDragEnd(e){let t=e.target;this.dragOptions.aria!==!1&&(x(t,!1),g(p().dragDropped)),this.dragOptions.styleCursor!==!1&&(t.style.cursor=this.dragOptions.cursorChecker?this.dragOptions.cursorChecker(`grab`):`grab`);let n=this.transform.x-this.startTransform.x,r=this.transform.y-this.startTransform.y;if(this.dragOptions.momentum&&(Math.abs(this.momentum.vx)>10||Math.abs(this.momentum.vy)>10)?this.startMomentum():t.style.willChange=``,this.dragOptions.modifiers?.length){let i=e.pointers[0],a={...this.transform},o={position:a,velocity:i?.velocity??{x:0,y:0},element:e.target,startPosition:{...this.startTransform},delta:{x:n,y:r}};for(let e of this.dragOptions.modifiers){let t=e.onEnd?.(o);t&&(a=t.position,o.position=a)}if(a.x!==this.transform.x||a.y!==this.transform.y){this.transform=a,t.style.transition=`transform 300ms cubic-bezier(0.25, 1, 0.5, 1)`,this.applyTransform(t);let e=()=>{t.style.transition=``,t.removeEventListener(`transitionend`,e)};t.addEventListener(`transitionend`,e)}}if(this.dragOptions.droppable){let t=e.pointers[0]?.current??{x:0,y:0};M.onDragEnd(e.target,t,this.createDragEvent(e,n,r))}let i=this.createDragEvent(e,n,r);this.dragOptions.onDragEnd&&this.dragOptions.onDragEnd(i),this.emit(`dragend`,i)}startMomentum(){this.momentum.active=!0;let e=typeof this.dragOptions.momentum==`object`&&this.dragOptions.momentum.friction||.95,t=typeof this.dragOptions.momentum==`object`&&this.dragOptions.momentum.minSpeed||.1,n=()=>{if(this.momentum.active){if(this.momentum.vx*=e,this.momentum.vy*=e,Math.abs(this.momentum.vx)<t&&Math.abs(this.momentum.vy)<t){this.momentum.active=!1,this.element.style.willChange=``;return}this.transform.x+=this.momentum.vx*.016,this.transform.y+=this.momentum.vy*.016,this.bounds&&((this.transform.x<this.bounds.left||this.transform.x>this.bounds.right)&&(this.momentum.vx*=-.5,this.transform.x=Math.max(this.bounds.left,Math.min(this.transform.x,this.bounds.right))),(this.transform.y<this.bounds.top||this.transform.y>this.bounds.bottom)&&(this.momentum.vy*=-.5,this.transform.y=Math.max(this.bounds.top,Math.min(this.transform.y,this.bounds.bottom)))),this.applyTransform(this.element),requestAnimationFrame(n)}};requestAnimationFrame(n)}applyTransform(e){e.style.transform=`translate3d(${this.transform.x}px, ${this.transform.y}px, 0)`}createDragEvent(e,t,n){let r=e.pointers[0],i=this.cachedDragEvent;return i.target=e.target,i.originalEvent=e.originalEvent,i.pointers=e.pointers,i.isPrimary=e.isPrimary,i.dx=r?.delta.x||0,i.dy=r?.delta.y||0,i.totalX=t,i.totalY=n,i.velocityX=r?.velocity.x||0,i.velocityY=r?.velocity.y||0,i}setPosition(e,t){this.transform={x:e,y:t},this.applyTransform(this.element)}getPosition(){return{...this.transform}}destroy(){super.destroy(),this.element.style.cursor=``,this.element.style.willChange=``,this.momentum.active=!1,this.dragOptions.aria!==!1&&S(this.element)}};function F(e,t){let n=typeof e==`string`?document.querySelector(e):e;if(!n)throw Error(`Element not found: ${e}`);return new P(n,t)}var I=class extends l{constructor(e,t={}){let n={edges:{top:!0,right:!0,bottom:!0,left:!0},handleSize:10,minWidth:50,minHeight:50,...t};super(e,{...n,threshold:0,onStart:e=>{this.handleResizeStart(e),t.onStart?.(e)},onMove:e=>{this.handleResizeMove(e),t.onMove?.(e)},onEnd:e=>{this.handleResizeEnd(e),t.onEnd?.(e)}}),this.startSize={width:0,height:0},this.startPos={x:0,y:0},this.currentSize={width:0,height:0},this.currentPos={x:0,y:0},this.activeEdge=null,this.edgeFlags={top:!1,right:!1,bottom:!1,left:!1},this.aspectRatio=null,this.transformNormalized=!1,this.modifierContext={position:{x:0,y:0},velocity:{x:0,y:0},element:null,startPosition:{x:0,y:0},delta:{x:0,y:0},edges:{top:!1,right:!1,bottom:!1,left:!1},size:{width:0,height:0},startSize:{width:0,height:0}},this.cachedResizeEvent={target:null,originalEvent:null,pointers:[],isPrimary:!0,width:0,height:0,deltaWidth:0,deltaHeight:0,edges:{top:!1,right:!1,bottom:!1,left:!1}},this.resizeOptions=n,this.resizeOptions.square&&(this.resizeOptions.aspectRatio=1),this.priority=10,this.boundUpdateCursor=this.updateCursor.bind(this),e.addEventListener(`pointermove`,this.boundUpdateCursor),e.style.position=`relative`}normalizeInitialTransform(e){let t=window.getComputedStyle(e).transform;if(t&&t!==`none`){let n=t.match(/matrix.*\((.+)\)/);if(n){let t=n[1].split(`, `),r=parseFloat(t[4])||0,i=parseFloat(t[5])||0;e.style.transform=`translate3d(${r}px, ${i}px, 0)`}}}shouldHandleEvent(e){return this.detectEdge(e)!==null}updateCursor(e){if(this.activeEdge)return;let t=this.detectEdge(e);this.element.style.cursor=this.resizeOptions.cursorChecker?this.resizeOptions.cursorChecker(t):this.getCursor(t)}detectEdge(e){let t=this.element.getBoundingClientRect(),n=e.clientX-t.left,r=e.clientY-t.top,i=this.resizeOptions.handleSize||10,a=this.resizeOptions.edges||{},o=a.top&&r<i,s=a.bottom&&r>t.height-i,c=a.left&&n<i,l=a.right&&n>t.width-i;return o&&c?`top-left`:o&&l?`top-right`:s&&c?`bottom-left`:s&&l?`bottom-right`:o?`top`:s?`bottom`:c?`left`:l?`right`:null}getCursor(e){switch(e){case`top`:case`bottom`:return`ns-resize`;case`left`:case`right`:return`ew-resize`;case`top-left`:case`bottom-right`:return`nwse-resize`;case`top-right`:case`bottom-left`:return`nesw-resize`;default:return``}}handleResizeStart(e){this.transformNormalized||=(this.normalizeInitialTransform(this.element),!0);let t=this.element.getBoundingClientRect(),n=window.getComputedStyle(this.element);if(this.activeEdge=this.detectEdge(e.originalEvent),!this.activeEdge)return;this.edgeFlags.top=this.activeEdge.includes(`top`),this.edgeFlags.right=this.activeEdge.includes(`right`),this.edgeFlags.bottom=this.activeEdge.includes(`bottom`),this.edgeFlags.left=this.activeEdge.includes(`left`),this.startSize={width:parseFloat(n.width)||t.width,height:parseFloat(n.height)||t.height},this.currentSize={...this.startSize};let r=n.transform;if(r&&r!==`none`){let e=r.match(/matrix.*\((.+)\)/);if(e){let t=e[1].split(`, `);this.startPos.x=parseFloat(t[4])||0,this.startPos.y=parseFloat(t[5])||0}}else this.startPos.x=0,this.startPos.y=0;this.currentPos={...this.startPos},this.resizeOptions.aspectRatio===`preserve`?this.aspectRatio=this.startSize.width/this.startSize.height:typeof this.resizeOptions.aspectRatio==`number`&&(this.aspectRatio=this.resizeOptions.aspectRatio),this.element.style.willChange=`width, height, transform`;let i=this.createResizeEvent(e,0,0);this.resizeOptions.onResizeStart&&this.resizeOptions.onResizeStart(i),this.emit(`resizestart`,i)}handleResizeMove(e){if(!this.activeEdge)return;let t=e.pointers[0],n=t.total.x,r=t.total.y,i=this.startSize.width,a=this.startSize.height,o=this.startPos.x,s=this.startPos.y;this.edgeFlags.right&&(i+=n),this.edgeFlags.left&&(i-=n,o+=n),this.edgeFlags.bottom&&(a+=r),this.edgeFlags.top&&(a-=r,s+=r);let c=this.resizeOptions.invert||`none`;c===`reposition`&&(i<0&&(o+=i,i=-i),a<0&&(s+=a,a=-a));let l=c===`negate`?-1/0:this.resizeOptions.minWidth||0,u=c===`negate`?-1/0:this.resizeOptions.minHeight||0,f=this.resizeOptions.maxWidth||1/0,p=this.resizeOptions.maxHeight||1/0,m=c===`reposition`?1:l||50,h=c===`reposition`?1:u||50;if(this.aspectRatio&&(this.activeEdge===`left`||this.activeEdge===`right`?a=i/this.aspectRatio:this.activeEdge===`top`||this.activeEdge===`bottom`?i=a*this.aspectRatio:Math.abs(i-this.startSize.width)>Math.abs(a-this.startSize.height)?a=i/this.aspectRatio:i=a*this.aspectRatio),i<m&&(this.edgeFlags.left&&(o+=i-m),i=m,this.aspectRatio&&(a=i/this.aspectRatio)),i>f&&(this.edgeFlags.left&&(o+=i-f),i=f,this.aspectRatio&&(a=i/this.aspectRatio)),a<h&&(this.edgeFlags.top&&(s+=a-h),a=h,this.aspectRatio&&(i=a*this.aspectRatio)),a>p&&(this.edgeFlags.top&&(s+=a-p),a=p,this.aspectRatio&&(i=a*this.aspectRatio)),this.resizeOptions.grid&&(i=Math.round(i/this.resizeOptions.grid.width)*this.resizeOptions.grid.width,a=Math.round(a/this.resizeOptions.grid.height)*this.resizeOptions.grid.height),this.resizeOptions.modifiers?.length){let e=this.modifierContext;e.position.x=o,e.position.y=s,e.velocity.x=t.velocity?.x??0,e.velocity.y=t.velocity?.y??0,e.element=this.element,e.startPosition.x=this.startPos.x,e.startPosition.y=this.startPos.y,e.delta.x=n,e.delta.y=r,e.edges.top=this.edgeFlags.top,e.edges.right=this.edgeFlags.right,e.edges.bottom=this.edgeFlags.bottom,e.edges.left=this.edgeFlags.left,e.size.width=i,e.size.height=a,e.startSize.width=this.startSize.width,e.startSize.height=this.startSize.height;let c=d(this.resizeOptions.modifiers,e);o=c.position.x,s=c.position.y,c.size&&(i=c.size.width,a=c.size.height)}this.currentSize={width:i,height:a},this.currentPos={x:o,y:s},this.element.style.width=`${i}px`,this.element.style.height=`${a}px`,(o!==this.startPos.x||s!==this.startPos.y)&&(this.element.style.transform=`translate3d(${o}px, ${s}px, 0)`);let g=i-this.startSize.width,_=a-this.startSize.height,v=this.createResizeEvent(e,g,_);this.resizeOptions.onResizeMove&&this.resizeOptions.onResizeMove(v),this.emit(`resizemove`,v)}handleResizeEnd(e){this.element.style.willChange=``,this.activeEdge=null;let t=this.currentSize.width-this.startSize.width,n=this.currentSize.height-this.startSize.height,r=this.createResizeEvent(e,t,n);this.resizeOptions.onResizeEnd&&this.resizeOptions.onResizeEnd(r),this.emit(`resizeend`,r)}createResizeEvent(e,t,n){let r=this.cachedResizeEvent;return r.target=e.target,r.originalEvent=e.originalEvent,r.pointers=e.pointers,r.isPrimary=e.isPrimary,r.width=this.currentSize.width,r.height=this.currentSize.height,r.deltaWidth=t,r.deltaHeight=n,r.edges.top=this.edgeFlags.top,r.edges.right=this.edgeFlags.right,r.edges.bottom=this.edgeFlags.bottom,r.edges.left=this.edgeFlags.left,r}setSize(e,t){this.currentSize={width:e,height:t},this.element.style.width=`${e}px`,this.element.style.height=`${t}px`}getSize(){return{...this.currentSize}}destroy(){super.destroy(),this.element.removeEventListener(`pointermove`,this.boundUpdateCursor),this.element.style.cursor=``,this.element.style.willChange=``}};function L(e,t){let n=typeof e==`string`?document.querySelector(e):e;if(!n)throw Error(`Element not found: ${e}`);return new I(n,t)}var te=class extends l{constructor(e,t={}){super(e,{...t,threshold:0}),this.gestureActive=!1,this.startDistance=0,this.startAngle=0,this.prevScale=1,this.prevAngle=0,this.gestureOptions=t,this.minPointers=t.minPointers??2,this.priority=15}shouldHandleEvent(e){return!0}getTwoPointers(){if(this.pointers.size<2)return null;let e=this.pointers.values(),t=e.next().value,n=e.next().value;return[t.current,n.current]}computeDistance(e,t){let n=t.x-e.x,r=t.y-e.y;return Math.sqrt(n*n+r*r)}computeAngle(e,t){return Math.atan2(t.y-e.y,t.x-e.x)*180/Math.PI}computeCenter(e,t){return{x:(e.x+t.x)/2,y:(e.y+t.y)/2}}normalizeAngleDelta(e){for(;e>180;)e-=360;for(;e<-180;)e+=360;return e}createGestureEvent(e,t){return{...e,scale:t.scale??1,rotation:t.rotation??0,distance:t.distance??0,angle:t.angle??0,center:t.center??{x:0,y:0},deltaScale:t.deltaScale??0,deltaAngle:t.deltaAngle??0}}update(){if(!this.isActive||this.pointers.size===0)return;let e=this.getTwoPointers();if(!this.gestureActive&&e&&this.pointers.size>=this.minPointers){this.gestureActive=!0;let[t,n]=e;this.startDistance=this.computeDistance(t,n),this.startAngle=this.computeAngle(t,n),this.prevScale=1,this.prevAngle=0;let r={target:this.element,pointers:Array.from(this.pointers.values()),isPrimary:!1,originalEvent:new PointerEvent(`pointermove`)},i=this.createGestureEvent(r,{scale:1,rotation:0,distance:this.startDistance,angle:this.startAngle,center:this.computeCenter(t,n),deltaScale:0,deltaAngle:0});this.gestureOptions.onGestureStart&&this.gestureOptions.onGestureStart(i),this.emit(`gesturestart`,i);return}if(this.gestureActive&&this.pointers.size<this.minPointers){this.endGesture(),super.update();return}if(this.gestureActive&&e){let[t,n]=e,r=this.computeDistance(t,n),i=this.computeAngle(t,n),a=this.computeCenter(t,n),o=this.startDistance>0?r/this.startDistance:1,s=this.normalizeAngleDelta(i-this.startAngle),c=o-this.prevScale,l=this.normalizeAngleDelta(s-this.prevAngle);this.prevScale=o,this.prevAngle=s;let u={target:this.element,pointers:Array.from(this.pointers.values()),isPrimary:!1,originalEvent:new PointerEvent(`pointermove`)},d=this.createGestureEvent(u,{scale:o,rotation:s,distance:r,angle:i,center:a,deltaScale:c,deltaAngle:l});this.gestureOptions.onGestureMove&&this.gestureOptions.onGestureMove(d),this.emit(`gesturemove`,d)}super.update()}endGesture(){if(!this.gestureActive)return;this.gestureActive=!1;let e={target:this.element,pointers:Array.from(this.pointers.values()),isPrimary:!1,originalEvent:new PointerEvent(`pointerup`)},t=this.getTwoPointers(),n=t?this.computeDistance(t[0],t[1]):0,r=t?this.computeAngle(t[0],t[1]):0,i=t?this.computeCenter(t[0],t[1]):{x:0,y:0},a=this.startDistance>0&&n>0?n/this.startDistance:this.prevScale,o=this.createGestureEvent(e,{scale:a,rotation:this.prevAngle,distance:n,angle:r,center:i,deltaScale:0,deltaAngle:0});this.gestureOptions.onGestureEnd&&this.gestureOptions.onGestureEnd(o),this.emit(`gestureend`,o)}destroy(){this.gestureActive&&this.endGesture(),super.destroy()}};function R(e,t){let n=typeof e==`string`?document.querySelector(e):e;if(!n)throw Error(`Element not found: ${e}`);return new te(n,t)}const z=new Map;function B(e,t){z.has(e)||z.set(e,new Set),z.get(e).add(t)}function V(e,t){let n=z.get(e);n&&(n.delete(t),n.size===0&&z.delete(e))}function H(e){let t=z.get(e);return t?Array.from(t):[]}var U=class{on(e,t){return this.listeners.has(e)||this.listeners.set(e,new Set),this.listeners.get(e).add(t),this}off(e,t){return this.listeners.get(e)?.delete(t),this}emit(e,t){let n=this.listeners.get(e);if(n)for(let e of n)e(t)}get enabled(){return this._enabled}set enabled(e){this._enabled=e}constructor(e,t={}){this.draggables=[],this.itemStates=[],this.dragItem=null,this.dragIndex=-1,this.currentIndex=-1,this.targetSortable=null,this.targetIndex=-1,this.placeholder=null,this._enabled=!0,this.listeners=new Map,this.container=e,this.options={items:t.items??``,axis:t.axis??`y`,handle:t.handle??``,animationDuration:t.animationDuration??200,dragClass:t.dragClass??`sortable-dragging`,hoverClass:t.hoverClass??`sortable-hover`,group:t.group??``,onSort:t.onSort??(()=>{}),onSortEnd:t.onSortEnd??(()=>{}),onAdd:t.onAdd??(()=>{}),onRemove:t.onRemove??(()=>{}),aria:t.aria??!0},this.options.group&&B(this.options.group,this),this.options.aria&&ee(e),this.setup()}getItems(){return this.options.items?Array.from(this.container.querySelectorAll(this.options.items+`:not(.sortable-placeholder)`)):Array.from(this.container.children).filter(e=>!e.classList.contains(`sortable-placeholder`))}setup(){this.teardown();let e=this.getItems();if(this.options.aria)for(let t=0;t<e.length;t++)C(e[t],t,e.length);for(let t of e){let e={aria:!1,axis:this.options.group?void 0:this.options.axis,handle:this.options.handle||void 0,onDragStart:e=>this.handleDragStart(t,e),onDragMove:e=>this.handleDragMove(t,e),onDragEnd:e=>this.handleDragEnd(t,e)};this.draggables.push(new P(t,e))}}handleDragStart(e,t){if(!this._enabled)return;this.dragItem=e;let n=this.getItems();if(this.dragIndex=n.indexOf(e),this.currentIndex=this.dragIndex,this.targetSortable=null,this.targetIndex=-1,this.snapshotItems(),e.classList.add(this.options.dragClass),e.style.zIndex=`9999`,e.style.position=`relative`,this.options.aria){x(e,!0);let t=e.textContent?.trim()||`Item ${this.dragIndex+1}`;g(p().pickedUp(t,this.dragIndex+1,n.length))}}handleDragMove(e,t){if(!this.dragItem)return;let n=e.getBoundingClientRect(),r=n.left+n.width/2,i=n.top+n.height/2;if(this.options.group){let n=this.findTargetContainer(r,i);if(n&&n!==this){this.setTargetSortable(n,r,i),this.updateWithinIndex(e,t);return}else this.targetSortable&&this.clearTargetSortable()}this.updateWithinIndex(e,t)}updateWithinIndex(e,t){let n=this.options.axis===`y`,r=this.itemStates[this.dragIndex];if(!r)return;let i=n?t.totalY:t.totalX,a=n?r.rect.top+r.rect.height/2+i:r.rect.left+r.rect.width/2+i,o=0;for(let e=0;e<this.itemStates.length;e++){if(e===this.dragIndex)continue;let t=this.itemStates[e];a>(n?t.rect.top+t.rect.height/2:t.rect.left+t.rect.width/2)&&o++}if(o=Math.max(0,Math.min(o,this.itemStates.length-1)),o!==this.currentIndex){this.currentIndex=o,this.animateItems(e);let t={item:e,oldIndex:this.dragIndex,newIndex:o,items:this.getItems()};this.options.onSort(t),this.emit(`sort`,t),this.options.aria&&g(p().movedTo(o+1,this.itemStates.length))}}findTargetContainer(e,t){for(let n of H(this.options.group)){if(n===this)continue;let r=n.container.getBoundingClientRect();if(e>=r.left&&e<=r.right&&t>=r.top&&t<=r.bottom)return n}return null}setTargetSortable(e,t,n){let r=this.targetSortable!==e;if(this.targetSortable=e,r){for(let e of H(this.options.group))e!==this&&e.container.classList.remove(this.options.hoverClass);e.container.classList.add(this.options.hoverClass)}let i=this.options.axis===`y`,a=e.getItems(),o=a.length;for(let e=0;e<a.length;e++){let r=a[e].getBoundingClientRect(),s=i?r.top+r.height/2:r.left+r.width/2;if((i?n:t)<s){o=e;break}}(o!==this.targetIndex||r)&&(this.targetIndex=o,this.updatePlaceholder(e,o))}clearTargetSortable(){this.targetSortable&&this.targetSortable.container.classList.remove(this.options.hoverClass),this.targetSortable=null,this.targetIndex=-1,this.removePlaceholder()}updatePlaceholder(e,t){if(this.removePlaceholder(),!this.dragItem)return;let n=document.createElement(`div`);n.className=`sortable-placeholder`;let r=this.dragItem.getBoundingClientRect();n.style.height=`${r.height}px`,n.style.width=`${r.width}px`,n.style.border=`2px dashed currentColor`,n.style.borderRadius=`6px`,n.style.opacity=`0.3`,n.style.transition=`all 150ms ease`,n.style.boxSizing=`border-box`;let i=e.getItems();t>=i.length?e.container.appendChild(n):i[t].before(n),this.placeholder=n}removePlaceholder(){this.placeholder&&=(this.placeholder.remove(),null)}handleDragEnd(e,t){if(!this.dragItem)return;let n=this.dragIndex,r=this.targetSortable!==null;if(e.classList.remove(this.options.dragClass),e.style.zIndex=``,this.options.aria&&x(e,!1),r&&this.targetSortable){let t=this.targetSortable,r=this.targetIndex;this.removePlaceholder(),t.container.classList.remove(this.options.hoverClass),e.style.transform=``,e.style.transition=``;let i=t.getItems();r>=i.length?t.container.appendChild(e):i[r].before(e);let a=t.getItems().indexOf(e),o={item:e,from:this,to:t,oldIndex:n,newIndex:a};this.options.onRemove(o),this.emit(`remove`,o);let s={item:e,from:this,to:t,oldIndex:n,newIndex:a};t.options.onAdd(s),t.emit(`add`,s);let c={item:e,oldIndex:-1,newIndex:a,items:t.getItems()};t.options.onSortEnd(c),t.emit(`sortend`,c)}else{let t=this.currentIndex;if(n!==t){let e=this.getItems();this.reorderDOM(e,n,t)}let r={item:e,oldIndex:n,newIndex:t,items:this.getItems()};this.options.onSortEnd(r),this.emit(`sortend`,r)}for(let e of this.getItems())e.style.transform=``,e.style.transition=``;if(this.options.aria){let t=e.textContent?.trim()||`Item`,n=this.getItems(),r=n.indexOf(e);g(p().dropped(t,r+1,n.length));for(let e=0;e<n.length;e++)C(n[e],e,n.length)}if(this.dragItem=null,this.dragIndex=-1,this.currentIndex=-1,this.targetSortable=null,this.targetIndex=-1,this.setup(),this.options.group)for(let e of H(this.options.group))e!==this&&e.setup()}snapshotItems(){this.itemStates=this.getItems().map((e,t)=>({el:e,rect:e.getBoundingClientRect(),originalIndex:t}))}animateItems(e){let t=this.options.axis===`y`,n=this.options.animationDuration,r=this.dragIndex,i=this.currentIndex;for(let a=0;a<this.itemStates.length;a++){if(this.itemStates[a].el===e)continue;let o=this.itemStates[a].el,s=0;if(r<i&&a>r&&a<=i){let e=this.itemStates[a-1].rect,n=this.itemStates[a].rect;s=t?e.top-n.top:e.left-n.left}else if(r>i&&a>=i&&a<r){let e=this.itemStates[a+1].rect,n=this.itemStates[a].rect;s=t?e.top-n.top:e.left-n.left}o.style.transition=`transform ${n}ms ease`,o.style.transform=t?`translateY(${s}px)`:`translateX(${s}px)`}}reorderDOM(e,t,n){let r=e[t];t<n?e[n].after(r):e[n].before(r)}refresh(){this.setup()}getOrder(){return this.getItems()}move(e,t){let n=this.getItems();if(e<0||e>=n.length||t<0||t>=n.length||e===t)return;this.reorderDOM(n,e,t);let r={item:n[e],oldIndex:e,newIndex:t,items:this.getItems()};this.options.onSortEnd(r),this.emit(`sortend`,r),this.setup()}teardown(){for(let e of this.draggables)e.destroy();this.draggables=[]}destroy(){this.teardown(),this.removePlaceholder();let e=this.getItems();for(let t of e)t.style.transform=``,t.style.transition=``,this.options.aria&&w(t);this.options.aria&&T(this.container),this.options.group&&V(this.options.group,this)}};function W(e,t){let n=typeof e==`string`?document.querySelector(e):e;if(!n)throw Error(`Container not found: ${e}`);return new U(n,t)}function G(e,t={}){let n=typeof e==`string`?document.querySelector(e):e;if(!n)throw Error(`Element not found: ${e}`);let r=null,i=null,a=null;return t.drag&&(r=F(n,typeof t.drag==`object`?t.drag:{})),t.resize&&(i=L(n,typeof t.resize==`object`?t.resize:{})),t.gesture&&(a=R(n,typeof t.gesture==`object`?t.gesture:{})),{drag:r,resize:i,gesture:a,destroy(){r?.destroy(),i?.destroy(),a?.destroy()}}}function K(e){return function(r={},i=[]){let a=n(null),o=n(null);return t(()=>{if(a.current)return o.current?.destroy(),o.current=e(a.current,r),()=>{o.current?.destroy(),o.current=null}},[a.current,...i]),{ref:a,instance:o}}}const q=K(u),J=K(F),Y=K(L),X=K(R);function Z(e={},r=[]){let i=n(null),a=n(null);return t(()=>{if(i.current)return a.current?.destroy(),a.current=N(i.current,e),()=>{a.current?.destroy(),a.current=null}},[i.current,...r]),{ref:i,instance:a}}function ne(e={},r=[]){let i=n(null),a=n(null);return t(()=>{if(i.current)return a.current?.destroy(),a.current=W(i.current,e),()=>{a.current?.destroy(),a.current=null}},[i.current,...r]),{ref:i,instance:a}}function Q(e={},r=[]){let i=n(null),a=n(null);return t(()=>{if(i.current)return a.current?.destroy(),a.current=G(i.current,e),()=>{a.current?.destroy(),a.current=null}},[i.current,...r]),{ref:i,instance:a}}function $(t){return function({children:n,as:r=`div`,className:i,style:a,...o}){let{ref:s}=t(o,[JSON.stringify(o)]),c=r;return e.createElement(c,{ref:s,className:i,style:a},n)}}const re=$(q),ie=$(J),ae=$(Y),oe=$(X),se=$(Q);export{ie as DraggableComponent,oe as GesturableComponent,re as GripComponent,se as InteractableComponent,ae as ResizableComponent,J as useDraggable,Z as useDropzone,X as useGesturable,q as useGrip,Q as useInteractable,Y as useResizable,ne as useSortable};
+//# sourceMappingURL=pointrix-react.mjs.map

package/dist/pointrix-resize.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});let e=null,t=new Set,n=new Set,r=null;function i(){return!r&&typeof PointerEvent<`u`&&(r=new PointerEvent(`pointermove`)),r}function a(){e===null&&(e=requestAnimationFrame(()=>{e=null;for(let e of n)e.update();if(n.clear(),t.size>0){let e=!1;for(let n of t)if(n.hasActivePointers()){e=!0;break}e&&a()}}))}var o=class e{on(e,t){return this.listeners.has(e)||this.listeners.set(e,new Set),this.listeners.get(e).add(t),this}off(e,t){return this.listeners.get(e)?.delete(t),this}emit(e,t){let n=this.listeners.get(e);if(n)for(let e of n)e(t)}get enabled(){return this._enabled}set enabled(r){this._enabled=r,!r&&this.isActive&&(this.pointers.clear(),this.pointersCache=[],this.isActive=!1,t.delete(this),n.delete(this),e.activeInstance.get(this.element)===this&&e.activeInstance.set(this.element,null),document.removeEventListener(`pointermove`,this.onPointerMove),document.removeEventListener(`pointerup`,this.onPointerUp),document.removeEventListener(`pointercancel`,this.onPointerUp))}get interacting(){return this.isActive}static{this.elementInstances=new WeakMap}static{this.activeInstance=new WeakMap}static{this.elementListeners=new WeakMap}constructor(t,n={}){this.pointers=new Map,this.pointersCache=[],this.isActive=!1,this.lastUpdate=0,this.priority=0,this._enabled=!0,this.holdTimer=null,this.holdEventTimer=null,this.lastTapTime=0,this.lastTapTarget=null,this.listeners=new Map,this.element=t,this.options={threshold:3,preventScroll:!0,styleCursor:!0,...n},this.registerInstance();let r=e.elementInstances.get(t);if(r&&r.length===1&&(t.style.touchAction=this.options.touchAction??`none`,t.style.userSelect=`none`,t.style.webkitUserSelect=`none`),this.onPointerDown=this.onPointerDown.bind(this),this.onPointerMove=this.onPointerMove.bind(this),this.onPointerUp=this.onPointerUp.bind(this),r&&r.length===1){let n=n=>e.handleElementPointerDown(t,n);e.elementListeners.set(t,n),t.addEventListener(`pointerdown`,n)}}registerInstance(){let t=e.elementInstances.get(this.element);t?t.push(this):e.elementInstances.set(this.element,[this])}unregisterInstance(){let t=e.elementInstances.get(this.element);if(!t)return;let n=t.indexOf(this);n>=0&&(t.splice(n,1),t.length===0?(e.elementInstances.delete(this.element),e.activeInstance.delete(this.element),e.elementListeners.delete(this.element)):e.elementInstances.set(this.element,t))}shouldHandleEvent(e){return!0}checkEventFilters(e){let t=e.target;return t?!(this.options.ignoreFrom&&t.closest(this.options.ignoreFrom)||this.options.allowFrom&&!t.closest(this.options.allowFrom)):!0}static handleElementPointerDown(t,n){let r=e.elementInstances.get(t);if(!r)return;let i=e.activeInstance.get(t);if(i){i.onPointerDown(n);return}let a=null,o=-1;for(let e of r)e.checkEventFilters(n)&&e.shouldHandleEvent(n)&&e.enabled&&e.priority>o&&(a=e,o=e.priority);a&&(e.activeInstance.set(t,a),a.handlePointerDown(n))}onPointerDown(e){this.handlePointerDown(e)}handlePointerDown(e){if(this.options.mouseButtons&&!(e.buttons&this.options.mouseButtons))return;this.options.preventScroll&&e.preventDefault();let t={x:e.clientX,y:e.clientY},n={id:e.pointerId,start:{...t},current:{...t},previous:{...t},delta:{x:0,y:0},total:{x:0,y:0},velocity:{x:0,y:0},timestamp:e.timeStamp};this.pointers.set(e.pointerId,n),this.pointersCache=Array.from(this.pointers.values()),this.pointers.size===1&&(document.addEventListener(`pointermove`,this.onPointerMove,{passive:!1}),document.addEventListener(`pointerup`,this.onPointerUp),document.addEventListener(`pointercancel`,this.onPointerUp)),this.options.onHold&&(this.holdEventTimer&&clearTimeout(this.holdEventTimer),this.holdEventTimer=setTimeout(()=>{this.holdEventTimer=null,this.pointers.size>0&&!this.isActive&&this.options.onHold(this.createEvent(e))},this.options.holdDuration??600));let r=this.options.holdDelay??0;r>0?(this.holdTimer&&clearTimeout(this.holdTimer),this.holdTimer=setTimeout(()=>{this.holdTimer=null,!this.isActive&&this.pointers.size>0&&this.start(e)},r)):this.options.threshold===0&&this.start(e)}onPointerMove(e){let r=this.pointers.get(e.pointerId);if(!r)return;let i=e.clientX,o=e.clientY;if(r.current.x!==i||r.current.y!==o){if(r.current.x=i,r.current.y=o,!this.isActive){let t=r.current.x-r.start.x,n=r.current.y-r.start.y;Math.sqrt(t*t+n*n)>=(this.options.threshold||3)&&(this.holdTimer&&=(clearTimeout(this.holdTimer),null),this.holdEventTimer&&=(clearTimeout(this.holdEventTimer),null),this.start(e))}this.isActive&&(this.options.preventScroll&&e.preventDefault(),t.add(this),n.add(this),a())}}onPointerUp(e){if(this.pointers.get(e.pointerId)&&(this.pointers.delete(e.pointerId),this.pointersCache=Array.from(this.pointers.values()),this.holdTimer&&=(clearTimeout(this.holdTimer),null),this.holdEventTimer&&=(clearTimeout(this.holdEventTimer),null),this.pointers.size===0))if(document.removeEventListener(`pointermove`,this.onPointerMove),document.removeEventListener(`pointerup`,this.onPointerUp),document.removeEventListener(`pointercancel`,this.onPointerUp),this.isActive)this.end(e);else{let t=this.createEvent(e);this.options.onTap&&this.options.onTap(t),this.emit(`tap`,t);let n=e.timeStamp;this.options.onDoubleTap&&n-this.lastTapTime<300&&this.lastTapTarget===e.target&&this.options.onDoubleTap(t),this.lastTapTime=n,this.lastTapTarget=e.target}}start(e){this.isActive=!0,t.add(this);let n=this.createEvent(e);this.options.onStart&&this.options.onStart(n),this.emit(`start`,n)}end(r){this.isActive=!1,t.delete(this),n.delete(this),e.activeInstance.get(this.element)===this&&e.activeInstance.set(this.element,null);let i=this.createEvent(r);this.options.onEnd&&this.options.onEnd(i),this.emit(`end`,i)}update(){if(!this.isActive||this.pointers.size===0)return;let e=performance.now(),t=e-this.lastUpdate;this.lastUpdate=e;let r=!1,a=!1;if(this.pointers.forEach(e=>{let n=e.current.x-e.previous.x,i=e.current.y-e.previous.y;if(n!==0||i!==0){if(r=!0,e.delta.x=n,e.delta.y=i,e.total.x=e.current.x-e.start.x,e.total.y=e.current.y-e.start.y,t>0){let r=n/t*1e3,a=i/t*1e3;e.velocity.x=e.velocity.x*.7+r*.3,e.velocity.y=e.velocity.y*.7+a*.3}e.previous.x=e.current.x,e.previous.y=e.current.y}(Math.abs(e.velocity.x)>.1||Math.abs(e.velocity.y)>.1)&&(a=!0)}),r){let e=i(),t=this.createEvent(e);this.options.onMove&&this.options.onMove(t),this.emit(`move`,t)}a&&n.add(this)}hasActivePointers(){if(!this.isActive||this.pointers.size===0)return!1;for(let e of this.pointers.values())if(Math.abs(e.velocity.x)>.1||Math.abs(e.velocity.y)>.1)return!0;return this.pointers.size>0}createEvent(e){return{target:this.element,pointers:this.pointersCache,isPrimary:e.isPrimary,originalEvent:e}}destroy(){this.holdTimer&&=(clearTimeout(this.holdTimer),null),this.holdEventTimer&&=(clearTimeout(this.holdEventTimer),null),this.unregisterInstance();let n=e.elementInstances.get(this.element);if(!n||n.length===0){let t=e.elementListeners.get(this.element);t&&(this.element.removeEventListener(`pointerdown`,t),e.elementListeners.delete(this.element)),this.element.style.touchAction=``,this.element.style.userSelect=``,this.element.style.webkitUserSelect=``}this.pointers.size>0&&(document.removeEventListener(`pointermove`,this.onPointerMove),document.removeEventListener(`pointerup`,this.onPointerUp),document.removeEventListener(`pointercancel`,this.onPointerUp)),t.delete(this),this.pointers.clear(),this.pointersCache=[]}};function s(e,t){let n=t.position.x,r=t.position.y,i=t.velocity.x,a=t.velocity.y,o=t.size?.width,s=t.size?.height;for(let c of e){t.position.x=n,t.position.y=r,t.velocity.x=i,t.velocity.y=a,t.size&&o!==void 0&&s!==void 0&&(t.size.width=o,t.size.height=s);let e=c.modify(t);n=e.position.x,r=e.position.y,i=e.velocity.x,a=e.velocity.y,e.size&&(o=e.size.width,s=e.size.height)}return{position:{x:n,y:r},velocity:{x:i,y:a},size:o!==void 0&&s!==void 0?{width:o,height:s}:void 0}}var c=class extends o{constructor(e,t={}){let n={edges:{top:!0,right:!0,bottom:!0,left:!0},handleSize:10,minWidth:50,minHeight:50,...t};super(e,{...n,threshold:0,onStart:e=>{this.handleResizeStart(e),t.onStart?.(e)},onMove:e=>{this.handleResizeMove(e),t.onMove?.(e)},onEnd:e=>{this.handleResizeEnd(e),t.onEnd?.(e)}}),this.startSize={width:0,height:0},this.startPos={x:0,y:0},this.currentSize={width:0,height:0},this.currentPos={x:0,y:0},this.activeEdge=null,this.edgeFlags={top:!1,right:!1,bottom:!1,left:!1},this.aspectRatio=null,this.transformNormalized=!1,this.modifierContext={position:{x:0,y:0},velocity:{x:0,y:0},element:null,startPosition:{x:0,y:0},delta:{x:0,y:0},edges:{top:!1,right:!1,bottom:!1,left:!1},size:{width:0,height:0},startSize:{width:0,height:0}},this.cachedResizeEvent={target:null,originalEvent:null,pointers:[],isPrimary:!0,width:0,height:0,deltaWidth:0,deltaHeight:0,edges:{top:!1,right:!1,bottom:!1,left:!1}},this.resizeOptions=n,this.resizeOptions.square&&(this.resizeOptions.aspectRatio=1),this.priority=10,this.boundUpdateCursor=this.updateCursor.bind(this),e.addEventListener(`pointermove`,this.boundUpdateCursor),e.style.position=`relative`}normalizeInitialTransform(e){let t=window.getComputedStyle(e).transform;if(t&&t!==`none`){let n=t.match(/matrix.*\((.+)\)/);if(n){let t=n[1].split(`, `),r=parseFloat(t[4])||0,i=parseFloat(t[5])||0;e.style.transform=`translate3d(${r}px, ${i}px, 0)`}}}shouldHandleEvent(e){return this.detectEdge(e)!==null}updateCursor(e){if(this.activeEdge)return;let t=this.detectEdge(e);this.element.style.cursor=this.resizeOptions.cursorChecker?this.resizeOptions.cursorChecker(t):this.getCursor(t)}detectEdge(e){let t=this.element.getBoundingClientRect(),n=e.clientX-t.left,r=e.clientY-t.top,i=this.resizeOptions.handleSize||10,a=this.resizeOptions.edges||{},o=a.top&&r<i,s=a.bottom&&r>t.height-i,c=a.left&&n<i,l=a.right&&n>t.width-i;return o&&c?`top-left`:o&&l?`top-right`:s&&c?`bottom-left`:s&&l?`bottom-right`:o?`top`:s?`bottom`:c?`left`:l?`right`:null}getCursor(e){switch(e){case`top`:case`bottom`:return`ns-resize`;case`left`:case`right`:return`ew-resize`;case`top-left`:case`bottom-right`:return`nwse-resize`;case`top-right`:case`bottom-left`:return`nesw-resize`;default:return``}}handleResizeStart(e){this.transformNormalized||=(this.normalizeInitialTransform(this.element),!0);let t=this.element.getBoundingClientRect(),n=window.getComputedStyle(this.element);if(this.activeEdge=this.detectEdge(e.originalEvent),!this.activeEdge)return;this.edgeFlags.top=this.activeEdge.includes(`top`),this.edgeFlags.right=this.activeEdge.includes(`right`),this.edgeFlags.bottom=this.activeEdge.includes(`bottom`),this.edgeFlags.left=this.activeEdge.includes(`left`),this.startSize={width:parseFloat(n.width)||t.width,height:parseFloat(n.height)||t.height},this.currentSize={...this.startSize};let r=n.transform;if(r&&r!==`none`){let e=r.match(/matrix.*\((.+)\)/);if(e){let t=e[1].split(`, `);this.startPos.x=parseFloat(t[4])||0,this.startPos.y=parseFloat(t[5])||0}}else this.startPos.x=0,this.startPos.y=0;this.currentPos={...this.startPos},this.resizeOptions.aspectRatio===`preserve`?this.aspectRatio=this.startSize.width/this.startSize.height:typeof this.resizeOptions.aspectRatio==`number`&&(this.aspectRatio=this.resizeOptions.aspectRatio),this.element.style.willChange=`width, height, transform`;let i=this.createResizeEvent(e,0,0);this.resizeOptions.onResizeStart&&this.resizeOptions.onResizeStart(i),this.emit(`resizestart`,i)}handleResizeMove(e){if(!this.activeEdge)return;let t=e.pointers[0],n=t.total.x,r=t.total.y,i=this.startSize.width,a=this.startSize.height,o=this.startPos.x,c=this.startPos.y;this.edgeFlags.right&&(i+=n),this.edgeFlags.left&&(i-=n,o+=n),this.edgeFlags.bottom&&(a+=r),this.edgeFlags.top&&(a-=r,c+=r);let l=this.resizeOptions.invert||`none`;l===`reposition`&&(i<0&&(o+=i,i=-i),a<0&&(c+=a,a=-a));let u=l===`negate`?-1/0:this.resizeOptions.minWidth||0,d=l===`negate`?-1/0:this.resizeOptions.minHeight||0,f=this.resizeOptions.maxWidth||1/0,p=this.resizeOptions.maxHeight||1/0,m=l===`reposition`?1:u||50,h=l===`reposition`?1:d||50;if(this.aspectRatio&&(this.activeEdge===`left`||this.activeEdge===`right`?a=i/this.aspectRatio:this.activeEdge===`top`||this.activeEdge===`bottom`?i=a*this.aspectRatio:Math.abs(i-this.startSize.width)>Math.abs(a-this.startSize.height)?a=i/this.aspectRatio:i=a*this.aspectRatio),i<m&&(this.edgeFlags.left&&(o+=i-m),i=m,this.aspectRatio&&(a=i/this.aspectRatio)),i>f&&(this.edgeFlags.left&&(o+=i-f),i=f,this.aspectRatio&&(a=i/this.aspectRatio)),a<h&&(this.edgeFlags.top&&(c+=a-h),a=h,this.aspectRatio&&(i=a*this.aspectRatio)),a>p&&(this.edgeFlags.top&&(c+=a-p),a=p,this.aspectRatio&&(i=a*this.aspectRatio)),this.resizeOptions.grid&&(i=Math.round(i/this.resizeOptions.grid.width)*this.resizeOptions.grid.width,a=Math.round(a/this.resizeOptions.grid.height)*this.resizeOptions.grid.height),this.resizeOptions.modifiers?.length){let e=this.modifierContext;e.position.x=o,e.position.y=c,e.velocity.x=t.velocity?.x??0,e.velocity.y=t.velocity?.y??0,e.element=this.element,e.startPosition.x=this.startPos.x,e.startPosition.y=this.startPos.y,e.delta.x=n,e.delta.y=r,e.edges.top=this.edgeFlags.top,e.edges.right=this.edgeFlags.right,e.edges.bottom=this.edgeFlags.bottom,e.edges.left=this.edgeFlags.left,e.size.width=i,e.size.height=a,e.startSize.width=this.startSize.width,e.startSize.height=this.startSize.height;let l=s(this.resizeOptions.modifiers,e);o=l.position.x,c=l.position.y,l.size&&(i=l.size.width,a=l.size.height)}this.currentSize={width:i,height:a},this.currentPos={x:o,y:c},this.element.style.width=`${i}px`,this.element.style.height=`${a}px`,(o!==this.startPos.x||c!==this.startPos.y)&&(this.element.style.transform=`translate3d(${o}px, ${c}px, 0)`);let g=i-this.startSize.width,_=a-this.startSize.height,v=this.createResizeEvent(e,g,_);this.resizeOptions.onResizeMove&&this.resizeOptions.onResizeMove(v),this.emit(`resizemove`,v)}handleResizeEnd(e){this.element.style.willChange=``,this.activeEdge=null;let t=this.currentSize.width-this.startSize.width,n=this.currentSize.height-this.startSize.height,r=this.createResizeEvent(e,t,n);this.resizeOptions.onResizeEnd&&this.resizeOptions.onResizeEnd(r),this.emit(`resizeend`,r)}createResizeEvent(e,t,n){let r=this.cachedResizeEvent;return r.target=e.target,r.originalEvent=e.originalEvent,r.pointers=e.pointers,r.isPrimary=e.isPrimary,r.width=this.currentSize.width,r.height=this.currentSize.height,r.deltaWidth=t,r.deltaHeight=n,r.edges.top=this.edgeFlags.top,r.edges.right=this.edgeFlags.right,r.edges.bottom=this.edgeFlags.bottom,r.edges.left=this.edgeFlags.left,r}setSize(e,t){this.currentSize={width:e,height:t},this.element.style.width=`${e}px`,this.element.style.height=`${t}px`}getSize(){return{...this.currentSize}}destroy(){super.destroy(),this.element.removeEventListener(`pointermove`,this.boundUpdateCursor),this.element.style.cursor=``,this.element.style.willChange=``}};function l(e,t){let n=typeof e==`string`?document.querySelector(e):e;if(!n)throw Error(`Element not found: ${e}`);return new c(n,t)}exports.Resizable=c,exports.default=l,exports.resizable=l;