pointrix 1.0.0

package/dist/pointrix-resize.d.cts

@@ -0,0 +1,193 @@
+//#region src/nano.d.ts
+interface Point$1 {
+  x: number;
+  y: number;
+}
+interface PointerState {
+  id: number;
+  start: Point$1;
+  current: Point$1;
+  previous: Point$1;
+  delta: Point$1;
+  total: Point$1;
+  velocity: Point$1;
+  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 {
+  x: number;
+  y: number;
+}
+interface ActiveEdges {
+  top: boolean;
+  right: boolean;
+  bottom: boolean;
+  left: boolean;
+}
+interface ModifierContext {
+  position: Point;
+  velocity: Point;
+  element: HTMLElement;
+  startPosition: Point;
+  delta: Point;
+  edges?: ActiveEdges;
+  size?: {
+    width: number;
+    height: number;
+  };
+  startSize?: {
+    width: number;
+    height: number;
+  };
+}
+interface ModifierResult {
+  position: Point;
+  velocity: Point;
+  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/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;
+}
+declare function resizable(element: HTMLElement | string, options?: ResizeOptions): Resizable;
+//#endregion
+export { Resizable, ResizeEvent, ResizeOptions, resizable as default, resizable };
+//# sourceMappingURL=pointrix-resize.d.cts.map

package/dist/pointrix-resize.d.mts

@@ -0,0 +1,193 @@
+//#region src/nano.d.ts
+interface Point$1 {
+  x: number;
+  y: number;
+}
+interface PointerState {
+  id: number;
+  start: Point$1;
+  current: Point$1;
+  previous: Point$1;
+  delta: Point$1;
+  total: Point$1;
+  velocity: Point$1;
+  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 {
+  x: number;
+  y: number;
+}
+interface ActiveEdges {
+  top: boolean;
+  right: boolean;
+  bottom: boolean;
+  left: boolean;
+}
+interface ModifierContext {
+  position: Point;
+  velocity: Point;
+  element: HTMLElement;
+  startPosition: Point;
+  delta: Point;
+  edges?: ActiveEdges;
+  size?: {
+    width: number;
+    height: number;
+  };
+  startSize?: {
+    width: number;
+    height: number;
+  };
+}
+interface ModifierResult {
+  position: Point;
+  velocity: Point;
+  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/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;
+}
+declare function resizable(element: HTMLElement | string, options?: ResizeOptions): Resizable;
+//#endregion
+export { Resizable, ResizeEvent, ResizeOptions, resizable as default, resizable };
+//# sourceMappingURL=pointrix-resize.d.mts.map

package/dist/pointrix-resize.mjs

@@ -0,0 +1,2 @@
+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)}export{c as Resizable,l as default,l as resizable};
+//# sourceMappingURL=pointrix-resize.mjs.map

package/dist/pointrix-sortable.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}}let c={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 l(){return c}let u=null;function d(){return u&&u.isConnected?u:(u=document.createElement(`div`),u.setAttribute(`aria-live`,`assertive`),u.setAttribute(`aria-atomic`,`true`),u.setAttribute(`role`,`status`),u.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(u),u)}function f(e){let t=d();t.textContent=``,requestAnimationFrame(()=>{t.textContent=e})}let p=null;const m=`grip-instructions`;function h(){return p&&p.isConnected?(p.textContent=c.instructions,m):(p=document.createElement(`div`),p.id=m,p.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`,p.textContent=c.instructions,document.body.appendChild(p),m)}function g(e){e.hasAttribute(`tabindex`)||e.setAttribute(`tabindex`,`0`),e.hasAttribute(`role`)||e.setAttribute(`role`,`button`),e.setAttribute(`aria-roledescription`,`draggable`),e.setAttribute(`aria-describedby`,h())}function _(e,t){e.setAttribute(`aria-grabbed`,String(t))}function v(e){e.removeAttribute(`aria-roledescription`),e.removeAttribute(`aria-grabbed`),e.removeAttribute(`aria-describedby`)}function y(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`,h()),e.setAttribute(`aria-posinset`,String(t+1)),e.setAttribute(`aria-setsize`,String(n))}function b(e){e.removeAttribute(`aria-roledescription`),e.removeAttribute(`aria-grabbed`),e.removeAttribute(`aria-describedby`),e.removeAttribute(`aria-posinset`),e.removeAttribute(`aria-setsize`)}function x(e){e.hasAttribute(`role`)||e.setAttribute(`role`,`listbox`)}function S(e){e.getAttribute(`role`)===`listbox`&&e.removeAttribute(`role`)}const C=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}};var w=class extends o{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&&g(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&&(_(t,!0),f(l().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&&C.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=s(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 c=this.createDragEvent(e,n,r);this.dragOptions.onDragMove&&this.dragOptions.onDragMove(c),this.emit(`dragmove`,c),this.dragOptions.droppable&&C.onDragMove(e.target,t.current,c)}handleDragEnd(e){let t=e.target;this.dragOptions.aria!==!1&&(_(t,!1),f(l().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};C.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&&v(this.element)}};const T=new Map;function E(e,t){T.has(e)||T.set(e,new Set),T.get(e).add(t)}function D(e,t){let n=T.get(e);n&&(n.delete(t),n.size===0&&T.delete(e))}function O(e){let t=T.get(e);return t?Array.from(t):[]}var k=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&&E(this.options.group,this),this.options.aria&&x(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++)y(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 w(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){_(e,!0);let t=e.textContent?.trim()||`Item ${this.dragIndex+1}`;f(l().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&&f(l().movedTo(o+1,this.itemStates.length))}}findTargetContainer(e,t){for(let n of O(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 O(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&&_(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);f(l().dropped(t,r+1,n.length));for(let e=0;e<n.length;e++)y(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 O(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&&b(t);this.options.aria&&S(this.container),this.options.group&&D(this.options.group,this)}};function A(e,t){let n=typeof e==`string`?document.querySelector(e):e;if(!n)throw Error(`Container not found: ${e}`);return new k(n,t)}exports.Sortable=k,exports.default=A,exports.sortable=A;

package/dist/pointrix-sortable.d.cts

@@ -0,0 +1,89 @@
+//#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;
+}
+declare function sortable(container: HTMLElement | string, options?: SortableOptions): Sortable;
+//#endregion
+export { SortEvent, SortTransferEvent, Sortable, SortableOptions, sortable as default, sortable };
+//# sourceMappingURL=pointrix-sortable.d.cts.map

package/dist/pointrix-sortable.d.mts

@@ -0,0 +1,89 @@
+//#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;
+}
+declare function sortable(container: HTMLElement | string, options?: SortableOptions): Sortable;
+//#endregion
+export { SortEvent, SortTransferEvent, Sortable, SortableOptions, sortable as default, sortable };
+//# sourceMappingURL=pointrix-sortable.d.mts.map