pointrix 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +971 -0
- package/dist/pointrix-drag.cjs +1 -0
- package/dist/pointrix-drag.d.cts +189 -0
- package/dist/pointrix-drag.d.mts +189 -0
- package/dist/pointrix-drag.mjs +2 -0
- package/dist/pointrix-dropzone.cjs +1 -0
- package/dist/pointrix-dropzone.d.cts +99 -0
- package/dist/pointrix-dropzone.d.mts +99 -0
- package/dist/pointrix-dropzone.mjs +2 -0
- package/dist/pointrix-gesture.cjs +1 -0
- package/dist/pointrix-gesture.d.cts +119 -0
- package/dist/pointrix-gesture.d.mts +119 -0
- package/dist/pointrix-gesture.mjs +2 -0
- package/dist/pointrix-modifiers.cjs +1 -0
- package/dist/pointrix-modifiers.d.cts +334 -0
- package/dist/pointrix-modifiers.d.mts +334 -0
- package/dist/pointrix-modifiers.mjs +2 -0
- package/dist/pointrix-nano.cjs +1 -0
- package/dist/pointrix-nano.d.cts +82 -0
- package/dist/pointrix-nano.d.mts +82 -0
- package/dist/pointrix-nano.mjs +2 -0
- package/dist/pointrix-react.cjs +1 -0
- package/dist/pointrix-react.d.cts +537 -0
- package/dist/pointrix-react.d.mts +537 -0
- package/dist/pointrix-react.mjs +2 -0
- package/dist/pointrix-resize.cjs +1 -0
- package/dist/pointrix-resize.d.cts +193 -0
- package/dist/pointrix-resize.d.mts +193 -0
- package/dist/pointrix-resize.mjs +2 -0
- package/dist/pointrix-sortable.cjs +1 -0
- package/dist/pointrix-sortable.d.cts +89 -0
- package/dist/pointrix-sortable.d.mts +89 -0
- package/dist/pointrix-sortable.mjs +2 -0
- package/dist/pointrix-vue.cjs +1 -0
- package/dist/pointrix-vue.d.cts +485 -0
- package/dist/pointrix-vue.d.mts +485 -0
- package/dist/pointrix-vue.mjs +2 -0
- package/dist/pointrix.cjs +1 -0
- package/dist/pointrix.d.cts +784 -0
- package/dist/pointrix.d.mts +784 -0
- package/dist/pointrix.mjs +2 -0
- package/package.json +144 -0
|
@@ -0,0 +1,334 @@
|
|
|
1
|
+
//#region src/types.d.ts
|
|
2
|
+
interface Point {
|
|
3
|
+
x: number;
|
|
4
|
+
y: number;
|
|
5
|
+
}
|
|
6
|
+
interface ActiveEdges {
|
|
7
|
+
top: boolean;
|
|
8
|
+
right: boolean;
|
|
9
|
+
bottom: boolean;
|
|
10
|
+
left: boolean;
|
|
11
|
+
}
|
|
12
|
+
interface ModifierContext {
|
|
13
|
+
position: Point;
|
|
14
|
+
velocity: Point;
|
|
15
|
+
element: HTMLElement;
|
|
16
|
+
startPosition: Point;
|
|
17
|
+
delta: Point;
|
|
18
|
+
edges?: ActiveEdges;
|
|
19
|
+
size?: {
|
|
20
|
+
width: number;
|
|
21
|
+
height: number;
|
|
22
|
+
};
|
|
23
|
+
startSize?: {
|
|
24
|
+
width: number;
|
|
25
|
+
height: number;
|
|
26
|
+
};
|
|
27
|
+
}
|
|
28
|
+
interface ModifierResult {
|
|
29
|
+
position: Point;
|
|
30
|
+
velocity: Point;
|
|
31
|
+
size?: {
|
|
32
|
+
width: number;
|
|
33
|
+
height: number;
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
interface Modifier {
|
|
37
|
+
name: string;
|
|
38
|
+
onStart?(context: ModifierContext): void;
|
|
39
|
+
modify(context: ModifierContext): ModifierResult;
|
|
40
|
+
onEnd?(context: ModifierContext): ModifierResult | void;
|
|
41
|
+
}
|
|
42
|
+
//#endregion
|
|
43
|
+
//#region src/modifiers/restrict.d.ts
|
|
44
|
+
interface RestrictOptions {
|
|
45
|
+
bounds?: 'parent' | HTMLElement | {
|
|
46
|
+
left?: number;
|
|
47
|
+
top?: number;
|
|
48
|
+
right?: number;
|
|
49
|
+
bottom?: number;
|
|
50
|
+
};
|
|
51
|
+
elementRect?: {
|
|
52
|
+
left: number;
|
|
53
|
+
top: number;
|
|
54
|
+
right: number;
|
|
55
|
+
bottom: number;
|
|
56
|
+
};
|
|
57
|
+
endOnly?: boolean;
|
|
58
|
+
}
|
|
59
|
+
declare class RestrictModifier implements Modifier {
|
|
60
|
+
name: string;
|
|
61
|
+
private options;
|
|
62
|
+
private transformBounds;
|
|
63
|
+
constructor(options: RestrictOptions);
|
|
64
|
+
onStart(context: ModifierContext): void;
|
|
65
|
+
modify(context: ModifierContext): ModifierResult;
|
|
66
|
+
onEnd(context: ModifierContext): ModifierResult;
|
|
67
|
+
private resolveAndCache;
|
|
68
|
+
private applyRestriction;
|
|
69
|
+
private resolveTransformBounds;
|
|
70
|
+
}
|
|
71
|
+
declare function restrict(options: RestrictOptions): RestrictModifier;
|
|
72
|
+
//#endregion
|
|
73
|
+
//#region src/modifiers/snap-grid.d.ts
|
|
74
|
+
interface SnapGridOptions {
|
|
75
|
+
x: number;
|
|
76
|
+
y: number;
|
|
77
|
+
offset?: {
|
|
78
|
+
x: number;
|
|
79
|
+
y: number;
|
|
80
|
+
};
|
|
81
|
+
limits?: {
|
|
82
|
+
top?: number;
|
|
83
|
+
left?: number;
|
|
84
|
+
bottom?: number;
|
|
85
|
+
right?: number;
|
|
86
|
+
};
|
|
87
|
+
}
|
|
88
|
+
declare class SnapGridModifier implements Modifier {
|
|
89
|
+
name: string;
|
|
90
|
+
private options;
|
|
91
|
+
constructor(options: SnapGridOptions);
|
|
92
|
+
modify(context: ModifierContext): ModifierResult;
|
|
93
|
+
}
|
|
94
|
+
declare function snapGrid(options: SnapGridOptions): SnapGridModifier;
|
|
95
|
+
//#endregion
|
|
96
|
+
//#region src/modifiers/snap-targets.d.ts
|
|
97
|
+
interface SnapTarget {
|
|
98
|
+
/** X coordinate of the target */
|
|
99
|
+
x?: number;
|
|
100
|
+
/** Y coordinate of the target */
|
|
101
|
+
y?: number;
|
|
102
|
+
/** Snap range in pixels (default: global range) */
|
|
103
|
+
range?: number;
|
|
104
|
+
}
|
|
105
|
+
/** Preset pivot positions */
|
|
106
|
+
type PivotPreset = 'top-left' | 'top' | 'top-right' | 'left' | 'center' | 'right' | 'bottom-left' | 'bottom' | 'bottom-right';
|
|
107
|
+
interface SnapTargetsOptions {
|
|
108
|
+
/** Array of snap target positions */
|
|
109
|
+
targets: SnapTarget[];
|
|
110
|
+
/** Default snap range in pixels (default: 50) */
|
|
111
|
+
range?: number;
|
|
112
|
+
/**
|
|
113
|
+
* Pivot point(s) on the element to check for snapping.
|
|
114
|
+
* Accepts preset strings or {x,y} where 0-1 maps to element dimensions.
|
|
115
|
+
*
|
|
116
|
+
* Presets: 'top-left', 'top', 'top-right', 'left', 'center', 'right',
|
|
117
|
+
* 'bottom-left', 'bottom', 'bottom-right'
|
|
118
|
+
*
|
|
119
|
+
* Default: 'top-left'
|
|
120
|
+
*/
|
|
121
|
+
relativePoints?: Array<PivotPreset | {
|
|
122
|
+
x: number;
|
|
123
|
+
y: number;
|
|
124
|
+
}>;
|
|
125
|
+
/**
|
|
126
|
+
* Coordinate mode:
|
|
127
|
+
* - 'offset' (default): targets are transform offsets
|
|
128
|
+
* - 'parent': targets are positions relative to the parent element's top-left
|
|
129
|
+
*/
|
|
130
|
+
coordinateMode?: 'offset' | 'parent';
|
|
131
|
+
}
|
|
132
|
+
declare class SnapTargetsModifier implements Modifier {
|
|
133
|
+
name: string;
|
|
134
|
+
private options;
|
|
135
|
+
private parentOffset;
|
|
136
|
+
private _snappedTarget;
|
|
137
|
+
private _snappedIndex;
|
|
138
|
+
private resolvedPivots;
|
|
139
|
+
constructor(options: SnapTargetsOptions);
|
|
140
|
+
/** The target the element is currently snapped to, or null */
|
|
141
|
+
get snappedTarget(): SnapTarget | null;
|
|
142
|
+
/** The index of the snapped target in the targets array, or -1 */
|
|
143
|
+
get snappedIndex(): number;
|
|
144
|
+
/** Whether the element is currently snapped to any target */
|
|
145
|
+
get isSnapped(): boolean;
|
|
146
|
+
onStart(context: ModifierContext): void;
|
|
147
|
+
modify(context: ModifierContext): ModifierResult;
|
|
148
|
+
}
|
|
149
|
+
declare function snapTargets(options: SnapTargetsOptions): SnapTargetsModifier;
|
|
150
|
+
//#endregion
|
|
151
|
+
//#region src/modifiers/magnetic-snap.d.ts
|
|
152
|
+
interface MagneticTarget {
|
|
153
|
+
id: string;
|
|
154
|
+
x: number;
|
|
155
|
+
y: number;
|
|
156
|
+
width?: number;
|
|
157
|
+
height?: number;
|
|
158
|
+
strength?: number;
|
|
159
|
+
}
|
|
160
|
+
interface MagneticSnapOptions {
|
|
161
|
+
targets: MagneticTarget[];
|
|
162
|
+
distance?: number;
|
|
163
|
+
strength?: number;
|
|
164
|
+
onSnap?: (target: MagneticTarget) => void;
|
|
165
|
+
onUnsnap?: (target: MagneticTarget) => void;
|
|
166
|
+
}
|
|
167
|
+
declare class MagneticSnapModifier implements Modifier {
|
|
168
|
+
name: string;
|
|
169
|
+
private options;
|
|
170
|
+
private currentTarget;
|
|
171
|
+
private targetMap;
|
|
172
|
+
constructor(options: MagneticSnapOptions);
|
|
173
|
+
updateTargets(targets: MagneticTarget[]): void;
|
|
174
|
+
addTarget(target: MagneticTarget): void;
|
|
175
|
+
removeTarget(id: string): void;
|
|
176
|
+
modify(context: ModifierContext): ModifierResult;
|
|
177
|
+
private getDistance;
|
|
178
|
+
getCurrentTarget(): MagneticTarget | null;
|
|
179
|
+
isSnapped(): boolean;
|
|
180
|
+
}
|
|
181
|
+
declare function magneticSnap(options: MagneticSnapOptions): MagneticSnapModifier;
|
|
182
|
+
//#endregion
|
|
183
|
+
//#region src/modifiers/inertia.d.ts
|
|
184
|
+
interface InertiaOptions {
|
|
185
|
+
resistance?: number;
|
|
186
|
+
minSpeed?: number;
|
|
187
|
+
endSpeed?: number;
|
|
188
|
+
smoothEnd?: boolean;
|
|
189
|
+
smoothEndDuration?: number;
|
|
190
|
+
}
|
|
191
|
+
declare class InertiaModifier implements Modifier {
|
|
192
|
+
name: string;
|
|
193
|
+
private options;
|
|
194
|
+
private state;
|
|
195
|
+
constructor(options?: InertiaOptions);
|
|
196
|
+
onStart(): void;
|
|
197
|
+
modify(context: ModifierContext): ModifierResult;
|
|
198
|
+
onEnd(context: ModifierContext): ModifierResult | void;
|
|
199
|
+
private computeSmoothEnd;
|
|
200
|
+
isActive(): boolean;
|
|
201
|
+
}
|
|
202
|
+
declare function inertia(options?: InertiaOptions): InertiaModifier;
|
|
203
|
+
//#endregion
|
|
204
|
+
//#region src/modifiers/auto-scroll.d.ts
|
|
205
|
+
interface AutoScrollOptions {
|
|
206
|
+
container?: HTMLElement | Window;
|
|
207
|
+
speed?: number;
|
|
208
|
+
margin?: number;
|
|
209
|
+
acceleration?: number;
|
|
210
|
+
}
|
|
211
|
+
declare class AutoScrollModifier implements Modifier {
|
|
212
|
+
name: string;
|
|
213
|
+
private options;
|
|
214
|
+
private animationFrame;
|
|
215
|
+
private cachedContainer;
|
|
216
|
+
private cachedContainerRect;
|
|
217
|
+
constructor(options?: AutoScrollOptions);
|
|
218
|
+
onStart(context: ModifierContext): void;
|
|
219
|
+
modify(context: ModifierContext): ModifierResult;
|
|
220
|
+
onEnd(): void;
|
|
221
|
+
private resolveContainer;
|
|
222
|
+
private getContainerRect;
|
|
223
|
+
private performScroll;
|
|
224
|
+
}
|
|
225
|
+
declare function autoScroll(options?: AutoScrollOptions): AutoScrollModifier;
|
|
226
|
+
//#endregion
|
|
227
|
+
//#region src/modifiers/rubberband.d.ts
|
|
228
|
+
interface RubberbandOptions {
|
|
229
|
+
bounds: {
|
|
230
|
+
left?: number;
|
|
231
|
+
top?: number;
|
|
232
|
+
right?: number;
|
|
233
|
+
bottom?: number;
|
|
234
|
+
} | 'parent';
|
|
235
|
+
/** Resistance factor 0-1 (default: 0.15). Lower = more resistance. */
|
|
236
|
+
resistance?: number;
|
|
237
|
+
/** Max overshoot in pixels (default: 100) */
|
|
238
|
+
maxOvershoot?: number;
|
|
239
|
+
}
|
|
240
|
+
declare class RubberbandModifier implements Modifier {
|
|
241
|
+
name: string;
|
|
242
|
+
private options;
|
|
243
|
+
private transformBounds;
|
|
244
|
+
constructor(options: RubberbandOptions);
|
|
245
|
+
onStart(context: ModifierContext): void;
|
|
246
|
+
modify(context: ModifierContext): ModifierResult;
|
|
247
|
+
onEnd(context: ModifierContext): ModifierResult;
|
|
248
|
+
private resolveTransformBounds;
|
|
249
|
+
}
|
|
250
|
+
declare function rubberband(options: RubberbandOptions): RubberbandModifier;
|
|
251
|
+
//#endregion
|
|
252
|
+
//#region src/modifiers/restrict-size.d.ts
|
|
253
|
+
interface RestrictSizeOptions {
|
|
254
|
+
min?: {
|
|
255
|
+
width?: number;
|
|
256
|
+
height?: number;
|
|
257
|
+
};
|
|
258
|
+
max?: {
|
|
259
|
+
width?: number;
|
|
260
|
+
height?: number;
|
|
261
|
+
};
|
|
262
|
+
}
|
|
263
|
+
declare class RestrictSizeModifier implements Modifier {
|
|
264
|
+
name: string;
|
|
265
|
+
private options;
|
|
266
|
+
constructor(options: RestrictSizeOptions);
|
|
267
|
+
modify(context: ModifierContext): ModifierResult;
|
|
268
|
+
}
|
|
269
|
+
declare function restrictSize(options: RestrictSizeOptions): RestrictSizeModifier;
|
|
270
|
+
//#endregion
|
|
271
|
+
//#region src/modifiers/restrict-edges.d.ts
|
|
272
|
+
interface RestrictEdgesOptions {
|
|
273
|
+
/** Restriction bounds for each edge — edges can't go beyond these values */
|
|
274
|
+
outer?: {
|
|
275
|
+
left?: number;
|
|
276
|
+
top?: number;
|
|
277
|
+
right?: number;
|
|
278
|
+
bottom?: number;
|
|
279
|
+
};
|
|
280
|
+
/** Edges must stay within these values (can't pass toward center) */
|
|
281
|
+
inner?: {
|
|
282
|
+
left?: number;
|
|
283
|
+
top?: number;
|
|
284
|
+
right?: number;
|
|
285
|
+
bottom?: number;
|
|
286
|
+
};
|
|
287
|
+
}
|
|
288
|
+
declare class RestrictEdgesModifier implements Modifier {
|
|
289
|
+
name: string;
|
|
290
|
+
private options;
|
|
291
|
+
constructor(options: RestrictEdgesOptions);
|
|
292
|
+
modify(context: ModifierContext): ModifierResult;
|
|
293
|
+
}
|
|
294
|
+
declare function restrictEdges(options: RestrictEdgesOptions): RestrictEdgesModifier;
|
|
295
|
+
//#endregion
|
|
296
|
+
//#region src/modifiers/snap-size.d.ts
|
|
297
|
+
interface SnapSizeOptions {
|
|
298
|
+
width?: number;
|
|
299
|
+
height?: number;
|
|
300
|
+
offset?: {
|
|
301
|
+
width?: number;
|
|
302
|
+
height?: number;
|
|
303
|
+
};
|
|
304
|
+
}
|
|
305
|
+
declare class SnapSizeModifier implements Modifier {
|
|
306
|
+
name: string;
|
|
307
|
+
private options;
|
|
308
|
+
constructor(options: SnapSizeOptions);
|
|
309
|
+
modify(context: ModifierContext): ModifierResult;
|
|
310
|
+
}
|
|
311
|
+
declare function snapSize(options: SnapSizeOptions): SnapSizeModifier;
|
|
312
|
+
//#endregion
|
|
313
|
+
//#region src/modifiers/snap-edges.d.ts
|
|
314
|
+
interface SnapEdgeTarget {
|
|
315
|
+
left?: number;
|
|
316
|
+
top?: number;
|
|
317
|
+
right?: number;
|
|
318
|
+
bottom?: number;
|
|
319
|
+
range?: number;
|
|
320
|
+
}
|
|
321
|
+
interface SnapEdgesOptions {
|
|
322
|
+
targets: SnapEdgeTarget[];
|
|
323
|
+
range?: number;
|
|
324
|
+
}
|
|
325
|
+
declare class SnapEdgesModifier implements Modifier {
|
|
326
|
+
name: string;
|
|
327
|
+
private options;
|
|
328
|
+
constructor(options: SnapEdgesOptions);
|
|
329
|
+
modify(context: ModifierContext): ModifierResult;
|
|
330
|
+
}
|
|
331
|
+
declare function snapEdges(options: SnapEdgesOptions): SnapEdgesModifier;
|
|
332
|
+
//#endregion
|
|
333
|
+
export { type Modifier, type ModifierContext, type ModifierResult, autoScroll, inertia, magneticSnap, restrict, restrictEdges, restrictSize, rubberband, snapEdges, snapGrid, snapSize, snapTargets };
|
|
334
|
+
//# sourceMappingURL=pointrix-modifiers.d.mts.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var e=class{constructor(e){this.name=`restrict`,this.transformBounds=null,this.options=e}onStart(e){this.transformBounds=this.resolveTransformBounds(e.element,e.startPosition,e.size)}modify(e){return this.transformBounds||this.resolveAndCache(e),this.options.endOnly?{position:e.position,velocity:e.velocity,size:e.size}:this.applyRestriction(e)}onEnd(e){return this.transformBounds||this.resolveAndCache(e),this.applyRestriction(e)}resolveAndCache(e){this.transformBounds=this.resolveTransformBounds(e.element,e.startPosition,e.size)}applyRestriction(e){let t=this.transformBounds;if(!t)return{position:e.position,velocity:e.velocity,size:e.size};let n=e.position.x,r=e.position.y;return t.left!==void 0&&(n=Math.max(n,t.left)),t.top!==void 0&&(r=Math.max(r,t.top)),t.right!==void 0&&(n=Math.min(n,t.right)),t.bottom!==void 0&&(r=Math.min(r,t.bottom)),{position:{x:n,y:r},velocity:e.velocity,size:e.size}}resolveTransformBounds(e,t,n){let{bounds:r}=this.options;if(!r)return null;let i;if(r===`parent`){let t=e.parentElement;if(!t)return null;let n=t.getBoundingClientRect();i={left:n.left,top:n.top,right:n.right,bottom:n.bottom}}else if(r instanceof HTMLElement){let e=r.getBoundingClientRect();i={left:e.left,top:e.top,right:e.right,bottom:e.bottom}}else return r;let a=e.getBoundingClientRect(),o=a.left-t.x,s=a.top-t.y,c=n?.width??a.width,l=n?.height??a.height,u=this.options.elementRect;return u?{left:i.left===void 0?void 0:i.left-o-c*u.left,top:i.top===void 0?void 0:i.top-s-l*u.top,right:i.right===void 0?void 0:i.right-o-c*u.right,bottom:i.bottom===void 0?void 0:i.bottom-s-l*u.bottom}:{left:i.left===void 0?void 0:i.left-o,top:i.top===void 0?void 0:i.top-s,right:i.right===void 0?void 0:i.right-o-c,bottom:i.bottom===void 0?void 0:i.bottom-s-l}}};function t(t){return new e(t)}var n=class{constructor(e){this.name=`snap-grid`,this.options=e}modify(e){let{x:t,y:n,offset:r,limits:i}=this.options,a=r?.x??0,o=r?.y??0,s=Math.round((e.position.x-a)/t)*t+a,c=Math.round((e.position.y-o)/n)*n+o;return i&&(i.left!==void 0&&(s=Math.max(s,i.left)),i.right!==void 0&&(s=Math.min(s,i.right)),i.top!==void 0&&(c=Math.max(c,i.top)),i.bottom!==void 0&&(c=Math.min(c,i.bottom))),{position:{x:s,y:c},velocity:e.velocity,size:e.size}}};function r(e){return new n(e)}const i={"top-left":{x:0,y:0},top:{x:.5,y:0},"top-right":{x:1,y:0},left:{x:0,y:.5},center:{x:.5,y:.5},right:{x:1,y:.5},"bottom-left":{x:0,y:1},bottom:{x:.5,y:1},"bottom-right":{x:1,y:1}};function a(e){return typeof e==`string`?i[e]??i[`top-left`]:e}var o=class{constructor(e){this.name=`snap-targets`,this.parentOffset=null,this._snappedTarget=null,this._snappedIndex=-1,this.resolvedPivots=[],this.options=e,this.resolvedPivots=e.relativePoints?.length?e.relativePoints.map(a):[{x:0,y:0}]}get snappedTarget(){return this._snappedTarget}get snappedIndex(){return this._snappedIndex}get isSnapped(){return this._snappedTarget!==null}onStart(e){if(this.options.coordinateMode===`parent`){let t=e.element,n=t.offsetParent||t.parentElement;if(n){let r=n.getBoundingClientRect(),i=t.getBoundingClientRect();this.parentOffset={x:i.left-r.left-e.startPosition.x,y:i.top-r.top-e.startPosition.y}}else this.parentOffset={x:0,y:0}}this._snappedTarget=null,this._snappedIndex=-1}modify(e){let{targets:t,range:n=50}=this.options,r=this.resolvedPivots,i=this.options.coordinateMode===`parent`,a=1/0,o={x:0,y:0},s=-1;for(let c of r){let r=e.position.x+(e.size?e.size.width*c.x:0),l=e.position.y+(e.size?e.size.height*c.y:0);for(let e=0;e<t.length;e++){let c=t[e],u=c.range??n,d=c.x,f=c.y;i&&this.parentOffset&&(d!==void 0&&(d-=this.parentOffset.x),f!==void 0&&(f-=this.parentOffset.y));let p=0,m=0,h=0;if(d!==void 0&&f!==void 0)p=d-r,m=f-l,h=Math.sqrt(p*p+m*m);else if(d!==void 0)p=d-r,h=Math.abs(p);else if(f!==void 0)m=f-l,h=Math.abs(m);else continue;h<=u&&h<a&&(a=h,o={x:p,y:m},s=e)}}return s>=0?(this._snappedTarget=t[s],this._snappedIndex=s,{position:{x:e.position.x+o.x,y:e.position.y+o.y},velocity:e.velocity,size:e.size}):(this._snappedTarget=null,this._snappedIndex=-1,{position:e.position,velocity:e.velocity,size:e.size})}};function s(e){return new o(e)}var c=class{constructor(e){this.name=`magnetic-snap`,this.currentTarget=null,this.options={targets:e.targets,distance:e.distance??30,strength:e.strength??.5,onSnap:e.onSnap??(()=>{}),onUnsnap:e.onUnsnap??(()=>{})},this.targetMap=new Map(e.targets.map(e=>[e.id,e]))}updateTargets(e){this.options.targets=e,this.targetMap=new Map(e.map(e=>[e.id,e]))}addTarget(e){this.options.targets.push(e),this.targetMap.set(e.id,e)}removeTarget(e){this.options.targets=this.options.targets.filter(t=>t.id!==e),this.targetMap.delete(e),this.currentTarget?.id===e&&(this.options.onUnsnap&&this.options.onUnsnap(this.currentTarget),this.currentTarget=null)}modify(e){let{position:t}=e,n=e.size?.width??0,r=e.size?.height??0,i={x:t.x+n/2,y:t.y+r/2},a=null,o=1/0;for(let e of this.options.targets){let t={x:e.x+(e.width??0)/2,y:e.y+(e.height??0)/2},n=this.getDistance(i,t);n<this.options.distance&&n<o&&(o=n,a=e)}if(a){let n={x:a.x+(a.width??0)/2,y:a.y+(a.height??0)/2},r=(a.strength??this.options.strength)*(1-o/this.options.distance),s={x:t.x+(n.x-i.x)*r,y:t.y+(n.y-i.y)*r};return o<this.options.distance*.3&&(s.x=a.x,s.y=a.y),this.currentTarget?.id!==a.id&&(this.currentTarget&&this.options.onUnsnap&&this.options.onUnsnap(this.currentTarget),this.currentTarget=a,this.options.onSnap&&this.options.onSnap(a)),{position:s,velocity:e.velocity,size:e.size}}else this.currentTarget&&=(this.options.onUnsnap&&this.options.onUnsnap(this.currentTarget),null);return{position:e.position,velocity:e.velocity,size:e.size}}getDistance(e,t){let n=e.x-t.x,r=e.y-t.y;return Math.sqrt(n*n+r*r)}getCurrentTarget(){return this.currentTarget}isSnapped(){return this.currentTarget!==null}};function l(e){return new c(e)}var u=class{constructor(e){this.name=`inertia`,this.state=null,this.options={resistance:e?.resistance??10,minSpeed:e?.minSpeed??10,endSpeed:e?.endSpeed??100,smoothEnd:e?.smoothEnd??!1,smoothEndDuration:e?.smoothEndDuration??300}}onStart(){this.state=null}modify(e){if(!this.state||!this.state.active)return{position:e.position,velocity:e.velocity,size:e.size};let{v0:t,lambda:n,startTime:r,startPosition:i}=this.state,a=(performance.now()-r)/1e3,o=Math.exp(-n*a),s=t.x*o,c=t.y*o,l=i.x+t.x/n*(1-o),u=i.y+t.y/n*(1-o);return Math.sqrt(s*s+c*c)<this.options.minSpeed&&(this.state.active=!1),{position:{x:l,y:u},velocity:{x:s,y:c},size:e.size}}onEnd(e){if(Math.sqrt(e.velocity.x**2+e.velocity.y**2)<this.options.endSpeed)return this.options.smoothEnd?this.computeSmoothEnd(e):void 0;let t=this.options.resistance,n={...e.velocity};return this.state={v0:n,lambda:t,startTime:performance.now(),active:!0,startPosition:{...e.position}},{position:{x:e.position.x+n.x/t,y:e.position.y+n.y/t},velocity:{x:0,y:0},size:e.size}}computeSmoothEnd(e){return{position:e.position,velocity:{x:0,y:0},size:e.size}}isActive(){return this.state?.active??!1}};function d(e){return new u(e)}var f=class{constructor(e){this.name=`auto-scroll`,this.animationFrame=null,this.cachedContainer=null,this.cachedContainerRect=null,this.options={container:e?.container??window,speed:e?.speed??10,margin:e?.margin??50,acceleration:e?.acceleration??5}}onStart(e){this.animationFrame=null,this.cachedContainer=this.resolveContainer(e.element),this.cachedContainer===window||this.cachedContainer instanceof Window?this.cachedContainerRect={left:0,top:0,right:window.innerWidth,bottom:window.innerHeight}:this.cachedContainerRect=null}modify(e){let t=this.cachedContainer??this.resolveContainer(e.element),n=this.cachedContainerRect??this.getContainerRect(t),{margin:r,speed:i,acceleration:a}=this.options,o=e.position.x+e.delta.x,s=e.position.y+e.delta.y,c=0,l=0,u=n.right-o;if(u<r&&u>0){let e=1-u/r;c=Math.min(i,e*a*i)}let d=o-n.left;if(d<r&&d>0){let e=1-d/r;c=-Math.min(i,e*a*i)}let f=n.bottom-s;if(f<r&&f>0){let e=1-f/r;l=Math.min(i,e*a*i)}let p=s-n.top;if(p<r&&p>0){let e=1-p/r;l=-Math.min(i,e*a*i)}return(c!==0||l!==0)&&this.performScroll(t,c,l),{position:e.position,velocity:e.velocity,size:e.size}}onEnd(){this.animationFrame!==null&&(cancelAnimationFrame(this.animationFrame),this.animationFrame=null),this.cachedContainer=null,this.cachedContainerRect=null}resolveContainer(e){if(this.options.container!==window)return this.options.container;let t=e.parentElement;for(;t;){let e=getComputedStyle(t),n=e.overflow+e.overflowX+e.overflowY;if(/auto|scroll/.test(n))return t;t=t.parentElement}return window}getContainerRect(e){if(e===window||e instanceof Window)return{left:0,top:0,right:window.innerWidth,bottom:window.innerHeight};let t=e.getBoundingClientRect();return{left:t.left,top:t.top,right:t.right,bottom:t.bottom}}performScroll(e,t,n){e===window||e instanceof Window?window.scrollBy(t,n):(e.scrollLeft+=t,e.scrollTop+=n)}};function p(e){return new f(e)}var m=class{constructor(e){this.name=`rubberband`,this.transformBounds=null,this.options=e}onStart(e){this.transformBounds=this.resolveTransformBounds(e.element,e.startPosition)}modify(e){this.transformBounds||=this.resolveTransformBounds(e.element,e.startPosition);let t=this.transformBounds,n=this.options.resistance??.15,r=this.options.maxOvershoot??100,i={...e.position};if(t){if(t.left!==void 0&&i.x<t.left){let e=(i.x-t.left)*n;i.x=t.left+Math.max(e,-r)}if(t.right!==void 0&&i.x>t.right){let e=(i.x-t.right)*n;i.x=t.right+Math.min(e,r)}if(t.top!==void 0&&i.y<t.top){let e=(i.y-t.top)*n;i.y=t.top+Math.max(e,-r)}if(t.bottom!==void 0&&i.y>t.bottom){let e=(i.y-t.bottom)*n;i.y=t.bottom+Math.min(e,r)}}return{position:i,velocity:e.velocity,size:e.size}}onEnd(e){this.transformBounds||=this.resolveTransformBounds(e.element,e.startPosition);let t=this.transformBounds,n={...e.position};return t&&(t.left!==void 0&&(n.x=Math.max(n.x,t.left)),t.right!==void 0&&(n.x=Math.min(n.x,t.right)),t.top!==void 0&&(n.y=Math.max(n.y,t.top)),t.bottom!==void 0&&(n.y=Math.min(n.y,t.bottom))),{position:n,velocity:e.velocity,size:e.size}}resolveTransformBounds(e,t){let{bounds:n}=this.options,r;if(n===`parent`){let t=e.parentElement;if(!t)return null;let n=t.getBoundingClientRect();r={left:n.left,top:n.top,right:n.right,bottom:n.bottom}}else r=n;let i=e.getBoundingClientRect(),a=i.left-t.x,o=i.top-t.y,s=i.width,c=i.height;return{left:r.left===void 0?void 0:r.left-a,top:r.top===void 0?void 0:r.top-o,right:r.right===void 0?void 0:r.right-a-s,bottom:r.bottom===void 0?void 0:r.bottom-o-c}}};function h(e){return new m(e)}var g=class{constructor(e){this.name=`restrictSize`,this.options=e}modify(e){if(e.size){let{min:t,max:n}=this.options;t?.width!==void 0&&(e.size.width=Math.max(e.size.width,t.width)),t?.height!==void 0&&(e.size.height=Math.max(e.size.height,t.height)),n?.width!==void 0&&(e.size.width=Math.min(e.size.width,n.width)),n?.height!==void 0&&(e.size.height=Math.min(e.size.height,n.height))}return{position:e.position,velocity:e.velocity,size:e.size}}};function _(e){return new g(e)}var v=class{constructor(e){this.name=`restrictEdges`,this.options=e}modify(e){let t=e.position,n=e.size,r=e.edges,{outer:i,inner:a}=this.options;if(r&&n){let e=t.x,o=t.y,s=t.x+n.width,c=t.y+n.height;i&&(r.left&&i.left!==void 0&&(e=Math.max(e,i.left)),r.top&&i.top!==void 0&&(o=Math.max(o,i.top)),r.right&&i.right!==void 0&&(s=Math.min(s,i.right)),r.bottom&&i.bottom!==void 0&&(c=Math.min(c,i.bottom))),a&&(r.left&&a.left!==void 0&&(e=Math.min(e,a.left)),r.top&&a.top!==void 0&&(o=Math.min(o,a.top)),r.right&&a.right!==void 0&&(s=Math.max(s,a.right)),r.bottom&&a.bottom!==void 0&&(c=Math.max(c,a.bottom))),r.left&&(t.x=e,n.width=s-e),r.top&&(t.y=o,n.height=c-o),r.right&&(n.width=s-t.x),r.bottom&&(n.height=c-t.y)}return{position:t,velocity:e.velocity,size:n}}};function y(e){return new v(e)}var b=class{constructor(e){this.name=`snapSize`,this.options=e}modify(e){if(e.size){let{width:t,height:n,offset:r}=this.options,i=r?.width??0,a=r?.height??0;t&&t>0&&(e.size.width=Math.round((e.size.width-i)/t)*t+i),n&&n>0&&(e.size.height=Math.round((e.size.height-a)/n)*n+a)}return{position:e.position,velocity:e.velocity,size:e.size}}};function x(e){return new b(e)}var S=class{constructor(e){this.name=`snapEdges`,this.options=e}modify(e){let t=e.position,n=e.size,r=e.edges,i=this.options.range??20;if(r&&n){let e=t.x,a=t.y,o=t.x+n.width,s=t.y+n.height;for(let c of this.options.targets){let l=c.range??i;if(r.left&&c.left!==void 0&&Math.abs(e-c.left)<=l){let r=c.left-e;e=c.left,t.x=e,n.width-=r}if(r.top&&c.top!==void 0&&Math.abs(a-c.top)<=l){let e=c.top-a;a=c.top,t.y=a,n.height-=e}r.right&&c.right!==void 0&&Math.abs(o-c.right)<=l&&(o=c.right,n.width=o-t.x),r.bottom&&c.bottom!==void 0&&Math.abs(s-c.bottom)<=l&&(s=c.bottom,n.height=s-t.y)}}return{position:t,velocity:e.velocity,size:n}}};function C(e){return new S(e)}export{p as autoScroll,d as inertia,l as magneticSnap,t as restrict,y as restrictEdges,_ as restrictSize,h as rubberband,C as snapEdges,r as snapGrid,x as snapSize,s as snapTargets};
|
|
2
|
+
//# sourceMappingURL=pointrix-modifiers.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
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=typeof e==`string`?document.querySelector(e):e;if(!n)throw Error(`Element not found: ${e}`);return new o(n,t)}exports.Grip=o,exports.default=s,exports.grip=s;
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
//#region src/nano.d.ts
|
|
2
|
+
interface Point {
|
|
3
|
+
x: number;
|
|
4
|
+
y: number;
|
|
5
|
+
}
|
|
6
|
+
interface PointerState {
|
|
7
|
+
id: number;
|
|
8
|
+
start: Point;
|
|
9
|
+
current: Point;
|
|
10
|
+
previous: Point;
|
|
11
|
+
delta: Point;
|
|
12
|
+
total: Point;
|
|
13
|
+
velocity: Point;
|
|
14
|
+
timestamp: number;
|
|
15
|
+
}
|
|
16
|
+
interface InteractionEvent {
|
|
17
|
+
target: HTMLElement;
|
|
18
|
+
pointers: PointerState[];
|
|
19
|
+
isPrimary: boolean;
|
|
20
|
+
originalEvent: PointerEvent;
|
|
21
|
+
}
|
|
22
|
+
interface GripOptions {
|
|
23
|
+
onStart?: (event: InteractionEvent) => void;
|
|
24
|
+
onMove?: (event: InteractionEvent) => void;
|
|
25
|
+
onEnd?: (event: InteractionEvent) => void;
|
|
26
|
+
onTap?: (event: InteractionEvent) => void;
|
|
27
|
+
onDoubleTap?: (event: InteractionEvent) => void;
|
|
28
|
+
onHold?: (event: InteractionEvent) => void;
|
|
29
|
+
threshold?: number;
|
|
30
|
+
preventScroll?: boolean;
|
|
31
|
+
holdDelay?: number;
|
|
32
|
+
holdDuration?: number;
|
|
33
|
+
mouseButtons?: number;
|
|
34
|
+
allowFrom?: string;
|
|
35
|
+
ignoreFrom?: string;
|
|
36
|
+
touchAction?: string;
|
|
37
|
+
styleCursor?: boolean;
|
|
38
|
+
}
|
|
39
|
+
declare class Grip {
|
|
40
|
+
protected element: HTMLElement;
|
|
41
|
+
protected options: GripOptions;
|
|
42
|
+
protected pointers: Map<number, PointerState>;
|
|
43
|
+
private pointersCache;
|
|
44
|
+
protected isActive: boolean;
|
|
45
|
+
protected lastUpdate: number;
|
|
46
|
+
protected priority: number;
|
|
47
|
+
private _enabled;
|
|
48
|
+
private holdTimer;
|
|
49
|
+
private holdEventTimer;
|
|
50
|
+
private lastTapTime;
|
|
51
|
+
private lastTapTarget;
|
|
52
|
+
private listeners;
|
|
53
|
+
on(event: string, handler: Function): this;
|
|
54
|
+
off(event: string, handler: Function): this;
|
|
55
|
+
protected emit(event: string, data: any): void;
|
|
56
|
+
get enabled(): boolean;
|
|
57
|
+
set enabled(value: boolean);
|
|
58
|
+
get interacting(): boolean;
|
|
59
|
+
private static elementInstances;
|
|
60
|
+
private static activeInstance;
|
|
61
|
+
private static elementListeners;
|
|
62
|
+
constructor(element: HTMLElement, options?: GripOptions);
|
|
63
|
+
private registerInstance;
|
|
64
|
+
private unregisterInstance;
|
|
65
|
+
protected shouldHandleEvent(_e: PointerEvent): boolean;
|
|
66
|
+
private checkEventFilters;
|
|
67
|
+
private static handleElementPointerDown;
|
|
68
|
+
private onPointerDown;
|
|
69
|
+
private handlePointerDown;
|
|
70
|
+
private onPointerMove;
|
|
71
|
+
private onPointerUp;
|
|
72
|
+
private start;
|
|
73
|
+
private end;
|
|
74
|
+
update(): void;
|
|
75
|
+
hasActivePointers(): boolean;
|
|
76
|
+
private createEvent;
|
|
77
|
+
destroy(): void;
|
|
78
|
+
}
|
|
79
|
+
declare function grip(element: HTMLElement | string, options?: GripOptions): Grip;
|
|
80
|
+
//#endregion
|
|
81
|
+
export { Grip, GripOptions, InteractionEvent, Point, PointerState, grip as default, grip };
|
|
82
|
+
//# sourceMappingURL=pointrix-nano.d.cts.map
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
//#region src/nano.d.ts
|
|
2
|
+
interface Point {
|
|
3
|
+
x: number;
|
|
4
|
+
y: number;
|
|
5
|
+
}
|
|
6
|
+
interface PointerState {
|
|
7
|
+
id: number;
|
|
8
|
+
start: Point;
|
|
9
|
+
current: Point;
|
|
10
|
+
previous: Point;
|
|
11
|
+
delta: Point;
|
|
12
|
+
total: Point;
|
|
13
|
+
velocity: Point;
|
|
14
|
+
timestamp: number;
|
|
15
|
+
}
|
|
16
|
+
interface InteractionEvent {
|
|
17
|
+
target: HTMLElement;
|
|
18
|
+
pointers: PointerState[];
|
|
19
|
+
isPrimary: boolean;
|
|
20
|
+
originalEvent: PointerEvent;
|
|
21
|
+
}
|
|
22
|
+
interface GripOptions {
|
|
23
|
+
onStart?: (event: InteractionEvent) => void;
|
|
24
|
+
onMove?: (event: InteractionEvent) => void;
|
|
25
|
+
onEnd?: (event: InteractionEvent) => void;
|
|
26
|
+
onTap?: (event: InteractionEvent) => void;
|
|
27
|
+
onDoubleTap?: (event: InteractionEvent) => void;
|
|
28
|
+
onHold?: (event: InteractionEvent) => void;
|
|
29
|
+
threshold?: number;
|
|
30
|
+
preventScroll?: boolean;
|
|
31
|
+
holdDelay?: number;
|
|
32
|
+
holdDuration?: number;
|
|
33
|
+
mouseButtons?: number;
|
|
34
|
+
allowFrom?: string;
|
|
35
|
+
ignoreFrom?: string;
|
|
36
|
+
touchAction?: string;
|
|
37
|
+
styleCursor?: boolean;
|
|
38
|
+
}
|
|
39
|
+
declare class Grip {
|
|
40
|
+
protected element: HTMLElement;
|
|
41
|
+
protected options: GripOptions;
|
|
42
|
+
protected pointers: Map<number, PointerState>;
|
|
43
|
+
private pointersCache;
|
|
44
|
+
protected isActive: boolean;
|
|
45
|
+
protected lastUpdate: number;
|
|
46
|
+
protected priority: number;
|
|
47
|
+
private _enabled;
|
|
48
|
+
private holdTimer;
|
|
49
|
+
private holdEventTimer;
|
|
50
|
+
private lastTapTime;
|
|
51
|
+
private lastTapTarget;
|
|
52
|
+
private listeners;
|
|
53
|
+
on(event: string, handler: Function): this;
|
|
54
|
+
off(event: string, handler: Function): this;
|
|
55
|
+
protected emit(event: string, data: any): void;
|
|
56
|
+
get enabled(): boolean;
|
|
57
|
+
set enabled(value: boolean);
|
|
58
|
+
get interacting(): boolean;
|
|
59
|
+
private static elementInstances;
|
|
60
|
+
private static activeInstance;
|
|
61
|
+
private static elementListeners;
|
|
62
|
+
constructor(element: HTMLElement, options?: GripOptions);
|
|
63
|
+
private registerInstance;
|
|
64
|
+
private unregisterInstance;
|
|
65
|
+
protected shouldHandleEvent(_e: PointerEvent): boolean;
|
|
66
|
+
private checkEventFilters;
|
|
67
|
+
private static handleElementPointerDown;
|
|
68
|
+
private onPointerDown;
|
|
69
|
+
private handlePointerDown;
|
|
70
|
+
private onPointerMove;
|
|
71
|
+
private onPointerUp;
|
|
72
|
+
private start;
|
|
73
|
+
private end;
|
|
74
|
+
update(): void;
|
|
75
|
+
hasActivePointers(): boolean;
|
|
76
|
+
private createEvent;
|
|
77
|
+
destroy(): void;
|
|
78
|
+
}
|
|
79
|
+
declare function grip(element: HTMLElement | string, options?: GripOptions): Grip;
|
|
80
|
+
//#endregion
|
|
81
|
+
export { Grip, GripOptions, InteractionEvent, Point, PointerState, grip as default, grip };
|
|
82
|
+
//# sourceMappingURL=pointrix-nano.d.mts.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
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=typeof e==`string`?document.querySelector(e):e;if(!n)throw Error(`Element not found: ${e}`);return new o(n,t)}export{o as Grip,s as default,s as grip};
|
|
2
|
+
//# sourceMappingURL=pointrix-nano.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require(`react`);c=s(c);let l=null,u=new Set,d=new Set,f=null;function p(){return!f&&typeof PointerEvent<`u`&&(f=new PointerEvent(`pointermove`)),f}function m(){l===null&&(l=requestAnimationFrame(()=>{l=null;for(let e of d)e.update();if(d.clear(),u.size>0){let e=!1;for(let t of u)if(t.hasActivePointers()){e=!0;break}e&&m()}}))}var h=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,u.delete(this),d.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(),u.add(this),d.add(this),m())}}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,u.add(this);let t=this.createEvent(e);this.options.onStart&&this.options.onStart(t),this.emit(`start`,t)}end(t){this.isActive=!1,u.delete(this),d.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=p(),t=this.createEvent(e);this.options.onMove&&this.options.onMove(t),this.emit(`move`,t)}r&&d.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)),u.delete(this),this.pointers.clear(),this.pointersCache=[]}};function g(e,t){let n=typeof e==`string`?document.querySelector(e):e;if(!n)throw Error(`Element not found: ${e}`);return new h(n,t)}function _(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 v={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 y(){return v}let b=null;function ee(){return b&&b.isConnected?b:(b=document.createElement(`div`),b.setAttribute(`aria-live`,`assertive`),b.setAttribute(`aria-atomic`,`true`),b.setAttribute(`role`,`status`),b.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(b),b)}function x(e){let t=ee();t.textContent=``,requestAnimationFrame(()=>{t.textContent=e})}let S=null;const C=`grip-instructions`;function w(){return S&&S.isConnected?(S.textContent=v.instructions,C):(S=document.createElement(`div`),S.id=C,S.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`,S.textContent=v.instructions,document.body.appendChild(S),C)}function T(e){e.hasAttribute(`tabindex`)||e.setAttribute(`tabindex`,`0`),e.hasAttribute(`role`)||e.setAttribute(`role`,`button`),e.setAttribute(`aria-roledescription`,`draggable`),e.setAttribute(`aria-describedby`,w())}function E(e,t){e.setAttribute(`aria-grabbed`,String(t))}function te(e){e.removeAttribute(`aria-roledescription`),e.removeAttribute(`aria-grabbed`),e.removeAttribute(`aria-describedby`)}function D(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`,w()),e.setAttribute(`aria-posinset`,String(t+1)),e.setAttribute(`aria-setsize`,String(n))}function O(e){e.removeAttribute(`aria-roledescription`),e.removeAttribute(`aria-grabbed`),e.removeAttribute(`aria-describedby`),e.removeAttribute(`aria-posinset`),e.removeAttribute(`aria-setsize`)}function ne(e){e.hasAttribute(`role`)||e.setAttribute(`role`,`listbox`)}function k(e){e.getAttribute(`role`)===`listbox`&&e.removeAttribute(`role`)}function re(e){e.setAttribute(`aria-dropeffect`,`move`)}function A(e,t){e.setAttribute(`aria-dropeffect`,t?`move`:`none`)}function j(e){e.removeAttribute(`aria-dropeffect`)}function M(e,t){return t.x>=e.left&&t.x<=e.right&&t.y>=e.top&&t.y<=e.bottom}function N(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 ie=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},P.register(this),this.options.aria!==!1&&re(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 M(n,t)?1:0;let i=e.getBoundingClientRect();if(r===`center`)return M(n,{x:i.left+i.width/2,y:i.top+i.height/2})?1:0;let a=N(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&&A(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&&A(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&&j(this.element),P.unregister(this)}};const P=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 ae(e,t){let n=typeof e==`string`?document.querySelector(e):e;if(!n)throw Error(`Element not found: ${e}`);return new ie(n,t)}var F=class extends h{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&&T(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&&(E(t,!0),x(y().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&&P.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=_(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&&P.onDragMove(e.target,t.current,s)}handleDragEnd(e){let t=e.target;this.dragOptions.aria!==!1&&(E(t,!1),x(y().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};P.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&&te(this.element)}};function I(e,t){let n=typeof e==`string`?document.querySelector(e):e;if(!n)throw Error(`Element not found: ${e}`);return new F(n,t)}var oe=class extends h{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,d=this.resizeOptions.maxWidth||1/0,f=this.resizeOptions.maxHeight||1/0,p=c===`reposition`?1:l||50,m=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<p&&(this.edgeFlags.left&&(o+=i-p),i=p,this.aspectRatio&&(a=i/this.aspectRatio)),i>d&&(this.edgeFlags.left&&(o+=i-d),i=d,this.aspectRatio&&(a=i/this.aspectRatio)),a<m&&(this.edgeFlags.top&&(s+=a-m),a=m,this.aspectRatio&&(i=a*this.aspectRatio)),a>f&&(this.edgeFlags.top&&(s+=a-f),a=f,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=_(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 h=i-this.startSize.width,g=a-this.startSize.height,v=this.createResizeEvent(e,h,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 oe(n,t)}var R=class extends h{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 z(e,t){let n=typeof e==`string`?document.querySelector(e):e;if(!n)throw Error(`Element not found: ${e}`);return new R(n,t)}const B=new Map;function V(e,t){B.has(e)||B.set(e,new Set),B.get(e).add(t)}function H(e,t){let n=B.get(e);n&&(n.delete(t),n.size===0&&B.delete(e))}function U(e){let t=B.get(e);return t?Array.from(t):[]}var W=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&&V(this.options.group,this),this.options.aria&&ne(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++)D(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 F(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(e,!0);let t=e.textContent?.trim()||`Item ${this.dragIndex+1}`;x(y().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&&x(y().movedTo(o+1,this.itemStates.length))}}findTargetContainer(e,t){for(let n of U(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 U(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(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);x(y().dropped(t,r+1,n.length));for(let e=0;e<n.length;e++)D(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 U(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&&O(t);this.options.aria&&k(this.container),this.options.group&&H(this.options.group,this)}};function G(e,t){let n=typeof e==`string`?document.querySelector(e):e;if(!n)throw Error(`Container not found: ${e}`);return new W(n,t)}function K(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=I(n,typeof t.drag==`object`?t.drag:{})),t.resize&&(i=L(n,typeof t.resize==`object`?t.resize:{})),t.gesture&&(a=z(n,typeof t.gesture==`object`?t.gesture:{})),{drag:r,resize:i,gesture:a,destroy(){r?.destroy(),i?.destroy(),a?.destroy()}}}function q(e){return function(t={},n=[]){let r=(0,c.useRef)(null),i=(0,c.useRef)(null);return(0,c.useEffect)(()=>{if(r.current)return i.current?.destroy(),i.current=e(r.current,t),()=>{i.current?.destroy(),i.current=null}},[r.current,...n]),{ref:r,instance:i}}}const J=q(g),Y=q(I),X=q(L),Z=q(z);function se(e={},t=[]){let n=(0,c.useRef)(null),r=(0,c.useRef)(null);return(0,c.useEffect)(()=>{if(n.current)return r.current?.destroy(),r.current=ae(n.current,e),()=>{r.current?.destroy(),r.current=null}},[n.current,...t]),{ref:n,instance:r}}function ce(e={},t=[]){let n=(0,c.useRef)(null),r=(0,c.useRef)(null);return(0,c.useEffect)(()=>{if(n.current)return r.current?.destroy(),r.current=G(n.current,e),()=>{r.current?.destroy(),r.current=null}},[n.current,...t]),{ref:n,instance:r}}function Q(e={},t=[]){let n=(0,c.useRef)(null),r=(0,c.useRef)(null);return(0,c.useEffect)(()=>{if(n.current)return r.current?.destroy(),r.current=K(n.current,e),()=>{r.current?.destroy(),r.current=null}},[n.current,...t]),{ref:n,instance:r}}function $(e){return function({children:t,as:n=`div`,className:r,style:i,...a}){let{ref:o}=e(a,[JSON.stringify(a)]),s=n;return c.default.createElement(s,{ref:o,className:r,style:i},t)}}const le=$(J),ue=$(Y),de=$(X),fe=$(Z),pe=$(Q);exports.DraggableComponent=ue,exports.GesturableComponent=fe,exports.GripComponent=le,exports.InteractableComponent=pe,exports.ResizableComponent=de,exports.useDraggable=Y,exports.useDropzone=se,exports.useGesturable=Z,exports.useGrip=J,exports.useInteractable=Q,exports.useResizable=X,exports.useSortable=ce;
|