@xhub-short/ui 0.1.0-beta.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/README.md +194 -0
- package/dist/chunk-4MN72OZH.js +148 -0
- package/dist/chunk-MMTAPG2C.js +201 -0
- package/dist/chunk-OXY5JHVJ.js +524 -0
- package/dist/chunk-QKQUXR3H.js +1318 -0
- package/dist/chunk-SSJDO24Q.js +204 -0
- package/dist/chunk-UECU42WC.js +1110 -0
- package/dist/chunk-UXMA4KJZ.js +45 -0
- package/dist/chunk-WKX2WBVO.js +98 -0
- package/dist/chunk-YW23IBKF.js +530 -0
- package/dist/chunk-ZZDQKP4R.js +418 -0
- package/dist/components/ActionBar/index.d.ts +244 -0
- package/dist/components/ActionBar/index.js +1 -0
- package/dist/components/ErrorBoundary/index.d.ts +81 -0
- package/dist/components/ErrorBoundary/index.js +1 -0
- package/dist/components/ProgressBar/index.d.ts +84 -0
- package/dist/components/ProgressBar/index.js +1 -0
- package/dist/components/Skeleton/index.d.ts +62 -0
- package/dist/components/Skeleton/index.js +1 -0
- package/dist/components/VideoFeed/index.d.ts +274 -0
- package/dist/components/VideoFeed/index.js +1 -0
- package/dist/components/VideoPlayer/index.d.ts +457 -0
- package/dist/components/VideoPlayer/index.js +1 -0
- package/dist/components/VideoSlot/index.d.ts +592 -0
- package/dist/components/VideoSlot/index.js +1 -0
- package/dist/components/icons/index.d.ts +58 -0
- package/dist/components/icons/index.js +1 -0
- package/dist/index.d.ts +595 -0
- package/dist/index.js +687 -0
- package/dist/use-gesture-react.esm-3SV4QLEJ.js +1893 -0
- package/package.json +65 -0
|
@@ -0,0 +1,1893 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
// ../../node_modules/.pnpm/@use-gesture+core@10.3.1/node_modules/@use-gesture/core/dist/maths-0ab39ae9.esm.js
|
|
4
|
+
function clamp(v, min, max) {
|
|
5
|
+
return Math.max(min, Math.min(v, max));
|
|
6
|
+
}
|
|
7
|
+
var V = {
|
|
8
|
+
toVector(v, fallback) {
|
|
9
|
+
if (v === void 0) v = fallback;
|
|
10
|
+
return Array.isArray(v) ? v : [v, v];
|
|
11
|
+
},
|
|
12
|
+
add(v1, v2) {
|
|
13
|
+
return [v1[0] + v2[0], v1[1] + v2[1]];
|
|
14
|
+
},
|
|
15
|
+
sub(v1, v2) {
|
|
16
|
+
return [v1[0] - v2[0], v1[1] - v2[1]];
|
|
17
|
+
},
|
|
18
|
+
addTo(v1, v2) {
|
|
19
|
+
v1[0] += v2[0];
|
|
20
|
+
v1[1] += v2[1];
|
|
21
|
+
},
|
|
22
|
+
subTo(v1, v2) {
|
|
23
|
+
v1[0] -= v2[0];
|
|
24
|
+
v1[1] -= v2[1];
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
function rubberband(distance, dimension, constant) {
|
|
28
|
+
if (dimension === 0 || Math.abs(dimension) === Infinity) return Math.pow(distance, constant * 5);
|
|
29
|
+
return distance * dimension * constant / (dimension + constant * distance);
|
|
30
|
+
}
|
|
31
|
+
function rubberbandIfOutOfBounds(position, min, max, constant = 0.15) {
|
|
32
|
+
if (constant === 0) return clamp(position, min, max);
|
|
33
|
+
if (position < min) return -rubberband(min - position, max - min, constant) + min;
|
|
34
|
+
if (position > max) return +rubberband(position - max, max - min, constant) + max;
|
|
35
|
+
return position;
|
|
36
|
+
}
|
|
37
|
+
function computeRubberband(bounds, [Vx, Vy], [Rx, Ry]) {
|
|
38
|
+
const [[X0, X1], [Y0, Y1]] = bounds;
|
|
39
|
+
return [rubberbandIfOutOfBounds(Vx, X0, X1, Rx), rubberbandIfOutOfBounds(Vy, Y0, Y1, Ry)];
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// ../../node_modules/.pnpm/@use-gesture+core@10.3.1/node_modules/@use-gesture/core/dist/actions-fe213e88.esm.js
|
|
43
|
+
function _toPrimitive(input, hint) {
|
|
44
|
+
if (typeof input !== "object" || input === null) return input;
|
|
45
|
+
var prim = input[Symbol.toPrimitive];
|
|
46
|
+
if (prim !== void 0) {
|
|
47
|
+
var res = prim.call(input, hint);
|
|
48
|
+
if (typeof res !== "object") return res;
|
|
49
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
50
|
+
}
|
|
51
|
+
return (hint === "string" ? String : Number)(input);
|
|
52
|
+
}
|
|
53
|
+
function _toPropertyKey(arg) {
|
|
54
|
+
var key = _toPrimitive(arg, "string");
|
|
55
|
+
return typeof key === "symbol" ? key : String(key);
|
|
56
|
+
}
|
|
57
|
+
function _defineProperty(obj, key, value) {
|
|
58
|
+
key = _toPropertyKey(key);
|
|
59
|
+
if (key in obj) {
|
|
60
|
+
Object.defineProperty(obj, key, {
|
|
61
|
+
value,
|
|
62
|
+
enumerable: true,
|
|
63
|
+
configurable: true,
|
|
64
|
+
writable: true
|
|
65
|
+
});
|
|
66
|
+
} else {
|
|
67
|
+
obj[key] = value;
|
|
68
|
+
}
|
|
69
|
+
return obj;
|
|
70
|
+
}
|
|
71
|
+
function ownKeys(e, r) {
|
|
72
|
+
var t = Object.keys(e);
|
|
73
|
+
if (Object.getOwnPropertySymbols) {
|
|
74
|
+
var o = Object.getOwnPropertySymbols(e);
|
|
75
|
+
r && (o = o.filter(function(r2) {
|
|
76
|
+
return Object.getOwnPropertyDescriptor(e, r2).enumerable;
|
|
77
|
+
})), t.push.apply(t, o);
|
|
78
|
+
}
|
|
79
|
+
return t;
|
|
80
|
+
}
|
|
81
|
+
function _objectSpread2(e) {
|
|
82
|
+
for (var r = 1; r < arguments.length; r++) {
|
|
83
|
+
var t = null != arguments[r] ? arguments[r] : {};
|
|
84
|
+
r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
|
|
85
|
+
_defineProperty(e, r2, t[r2]);
|
|
86
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
|
|
87
|
+
Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
|
|
88
|
+
});
|
|
89
|
+
}
|
|
90
|
+
return e;
|
|
91
|
+
}
|
|
92
|
+
var EVENT_TYPE_MAP = {
|
|
93
|
+
pointer: {
|
|
94
|
+
start: "down",
|
|
95
|
+
change: "move",
|
|
96
|
+
end: "up"
|
|
97
|
+
},
|
|
98
|
+
mouse: {
|
|
99
|
+
start: "down",
|
|
100
|
+
change: "move",
|
|
101
|
+
end: "up"
|
|
102
|
+
},
|
|
103
|
+
touch: {
|
|
104
|
+
start: "start",
|
|
105
|
+
change: "move",
|
|
106
|
+
end: "end"
|
|
107
|
+
},
|
|
108
|
+
gesture: {
|
|
109
|
+
start: "start",
|
|
110
|
+
change: "change",
|
|
111
|
+
end: "end"
|
|
112
|
+
}
|
|
113
|
+
};
|
|
114
|
+
function capitalize(string) {
|
|
115
|
+
if (!string) return "";
|
|
116
|
+
return string[0].toUpperCase() + string.slice(1);
|
|
117
|
+
}
|
|
118
|
+
var actionsWithoutCaptureSupported = ["enter", "leave"];
|
|
119
|
+
function hasCapture(capture = false, actionKey) {
|
|
120
|
+
return capture && !actionsWithoutCaptureSupported.includes(actionKey);
|
|
121
|
+
}
|
|
122
|
+
function toHandlerProp(device, action = "", capture = false) {
|
|
123
|
+
const deviceProps = EVENT_TYPE_MAP[device];
|
|
124
|
+
const actionKey = deviceProps ? deviceProps[action] || action : action;
|
|
125
|
+
return "on" + capitalize(device) + capitalize(actionKey) + (hasCapture(capture, actionKey) ? "Capture" : "");
|
|
126
|
+
}
|
|
127
|
+
var pointerCaptureEvents = ["gotpointercapture", "lostpointercapture"];
|
|
128
|
+
function parseProp(prop) {
|
|
129
|
+
let eventKey = prop.substring(2).toLowerCase();
|
|
130
|
+
const passive = !!~eventKey.indexOf("passive");
|
|
131
|
+
if (passive) eventKey = eventKey.replace("passive", "");
|
|
132
|
+
const captureKey = pointerCaptureEvents.includes(eventKey) ? "capturecapture" : "capture";
|
|
133
|
+
const capture = !!~eventKey.indexOf(captureKey);
|
|
134
|
+
if (capture) eventKey = eventKey.replace("capture", "");
|
|
135
|
+
return {
|
|
136
|
+
device: eventKey,
|
|
137
|
+
capture,
|
|
138
|
+
passive
|
|
139
|
+
};
|
|
140
|
+
}
|
|
141
|
+
function toDomEventType(device, action = "") {
|
|
142
|
+
const deviceProps = EVENT_TYPE_MAP[device];
|
|
143
|
+
const actionKey = deviceProps ? deviceProps[action] || action : action;
|
|
144
|
+
return device + actionKey;
|
|
145
|
+
}
|
|
146
|
+
function isTouch(event) {
|
|
147
|
+
return "touches" in event;
|
|
148
|
+
}
|
|
149
|
+
function getPointerType(event) {
|
|
150
|
+
if (isTouch(event)) return "touch";
|
|
151
|
+
if ("pointerType" in event) return event.pointerType;
|
|
152
|
+
return "mouse";
|
|
153
|
+
}
|
|
154
|
+
function getCurrentTargetTouchList(event) {
|
|
155
|
+
return Array.from(event.touches).filter((e) => {
|
|
156
|
+
var _event$currentTarget, _event$currentTarget$;
|
|
157
|
+
return e.target === event.currentTarget || ((_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 || (_event$currentTarget$ = _event$currentTarget.contains) === null || _event$currentTarget$ === void 0 ? void 0 : _event$currentTarget$.call(_event$currentTarget, e.target));
|
|
158
|
+
});
|
|
159
|
+
}
|
|
160
|
+
function getTouchList(event) {
|
|
161
|
+
return event.type === "touchend" || event.type === "touchcancel" ? event.changedTouches : event.targetTouches;
|
|
162
|
+
}
|
|
163
|
+
function getValueEvent(event) {
|
|
164
|
+
return isTouch(event) ? getTouchList(event)[0] : event;
|
|
165
|
+
}
|
|
166
|
+
function distanceAngle(P1, P2) {
|
|
167
|
+
try {
|
|
168
|
+
const dx = P2.clientX - P1.clientX;
|
|
169
|
+
const dy = P2.clientY - P1.clientY;
|
|
170
|
+
const cx = (P2.clientX + P1.clientX) / 2;
|
|
171
|
+
const cy = (P2.clientY + P1.clientY) / 2;
|
|
172
|
+
const distance = Math.hypot(dx, dy);
|
|
173
|
+
const angle = -(Math.atan2(dx, dy) * 180) / Math.PI;
|
|
174
|
+
const origin = [cx, cy];
|
|
175
|
+
return {
|
|
176
|
+
angle,
|
|
177
|
+
distance,
|
|
178
|
+
origin
|
|
179
|
+
};
|
|
180
|
+
} catch (_unused) {
|
|
181
|
+
}
|
|
182
|
+
return null;
|
|
183
|
+
}
|
|
184
|
+
function touchIds(event) {
|
|
185
|
+
return getCurrentTargetTouchList(event).map((touch) => touch.identifier);
|
|
186
|
+
}
|
|
187
|
+
function touchDistanceAngle(event, ids) {
|
|
188
|
+
const [P1, P2] = Array.from(event.touches).filter((touch) => ids.includes(touch.identifier));
|
|
189
|
+
return distanceAngle(P1, P2);
|
|
190
|
+
}
|
|
191
|
+
function pointerId(event) {
|
|
192
|
+
const valueEvent = getValueEvent(event);
|
|
193
|
+
return isTouch(event) ? valueEvent.identifier : valueEvent.pointerId;
|
|
194
|
+
}
|
|
195
|
+
function pointerValues(event) {
|
|
196
|
+
const valueEvent = getValueEvent(event);
|
|
197
|
+
return [valueEvent.clientX, valueEvent.clientY];
|
|
198
|
+
}
|
|
199
|
+
var LINE_HEIGHT = 40;
|
|
200
|
+
var PAGE_HEIGHT = 800;
|
|
201
|
+
function wheelValues(event) {
|
|
202
|
+
let {
|
|
203
|
+
deltaX,
|
|
204
|
+
deltaY,
|
|
205
|
+
deltaMode
|
|
206
|
+
} = event;
|
|
207
|
+
if (deltaMode === 1) {
|
|
208
|
+
deltaX *= LINE_HEIGHT;
|
|
209
|
+
deltaY *= LINE_HEIGHT;
|
|
210
|
+
} else if (deltaMode === 2) {
|
|
211
|
+
deltaX *= PAGE_HEIGHT;
|
|
212
|
+
deltaY *= PAGE_HEIGHT;
|
|
213
|
+
}
|
|
214
|
+
return [deltaX, deltaY];
|
|
215
|
+
}
|
|
216
|
+
function scrollValues(event) {
|
|
217
|
+
var _ref, _ref2;
|
|
218
|
+
const {
|
|
219
|
+
scrollX,
|
|
220
|
+
scrollY,
|
|
221
|
+
scrollLeft,
|
|
222
|
+
scrollTop
|
|
223
|
+
} = event.currentTarget;
|
|
224
|
+
return [(_ref = scrollX !== null && scrollX !== void 0 ? scrollX : scrollLeft) !== null && _ref !== void 0 ? _ref : 0, (_ref2 = scrollY !== null && scrollY !== void 0 ? scrollY : scrollTop) !== null && _ref2 !== void 0 ? _ref2 : 0];
|
|
225
|
+
}
|
|
226
|
+
function getEventDetails(event) {
|
|
227
|
+
const payload = {};
|
|
228
|
+
if ("buttons" in event) payload.buttons = event.buttons;
|
|
229
|
+
if ("shiftKey" in event) {
|
|
230
|
+
const {
|
|
231
|
+
shiftKey,
|
|
232
|
+
altKey,
|
|
233
|
+
metaKey,
|
|
234
|
+
ctrlKey
|
|
235
|
+
} = event;
|
|
236
|
+
Object.assign(payload, {
|
|
237
|
+
shiftKey,
|
|
238
|
+
altKey,
|
|
239
|
+
metaKey,
|
|
240
|
+
ctrlKey
|
|
241
|
+
});
|
|
242
|
+
}
|
|
243
|
+
return payload;
|
|
244
|
+
}
|
|
245
|
+
function call(v, ...args) {
|
|
246
|
+
if (typeof v === "function") {
|
|
247
|
+
return v(...args);
|
|
248
|
+
} else {
|
|
249
|
+
return v;
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
function noop() {
|
|
253
|
+
}
|
|
254
|
+
function chain(...fns) {
|
|
255
|
+
if (fns.length === 0) return noop;
|
|
256
|
+
if (fns.length === 1) return fns[0];
|
|
257
|
+
return function() {
|
|
258
|
+
let result;
|
|
259
|
+
for (const fn of fns) {
|
|
260
|
+
result = fn.apply(this, arguments) || result;
|
|
261
|
+
}
|
|
262
|
+
return result;
|
|
263
|
+
};
|
|
264
|
+
}
|
|
265
|
+
function assignDefault(value, fallback) {
|
|
266
|
+
return Object.assign({}, fallback, value || {});
|
|
267
|
+
}
|
|
268
|
+
var BEFORE_LAST_KINEMATICS_DELAY = 32;
|
|
269
|
+
var Engine = class {
|
|
270
|
+
constructor(ctrl, args, key) {
|
|
271
|
+
this.ctrl = ctrl;
|
|
272
|
+
this.args = args;
|
|
273
|
+
this.key = key;
|
|
274
|
+
if (!this.state) {
|
|
275
|
+
this.state = {};
|
|
276
|
+
this.computeValues([0, 0]);
|
|
277
|
+
this.computeInitial();
|
|
278
|
+
if (this.init) this.init();
|
|
279
|
+
this.reset();
|
|
280
|
+
}
|
|
281
|
+
}
|
|
282
|
+
get state() {
|
|
283
|
+
return this.ctrl.state[this.key];
|
|
284
|
+
}
|
|
285
|
+
set state(state) {
|
|
286
|
+
this.ctrl.state[this.key] = state;
|
|
287
|
+
}
|
|
288
|
+
get shared() {
|
|
289
|
+
return this.ctrl.state.shared;
|
|
290
|
+
}
|
|
291
|
+
get eventStore() {
|
|
292
|
+
return this.ctrl.gestureEventStores[this.key];
|
|
293
|
+
}
|
|
294
|
+
get timeoutStore() {
|
|
295
|
+
return this.ctrl.gestureTimeoutStores[this.key];
|
|
296
|
+
}
|
|
297
|
+
get config() {
|
|
298
|
+
return this.ctrl.config[this.key];
|
|
299
|
+
}
|
|
300
|
+
get sharedConfig() {
|
|
301
|
+
return this.ctrl.config.shared;
|
|
302
|
+
}
|
|
303
|
+
get handler() {
|
|
304
|
+
return this.ctrl.handlers[this.key];
|
|
305
|
+
}
|
|
306
|
+
reset() {
|
|
307
|
+
const {
|
|
308
|
+
state,
|
|
309
|
+
shared,
|
|
310
|
+
ingKey,
|
|
311
|
+
args
|
|
312
|
+
} = this;
|
|
313
|
+
shared[ingKey] = state._active = state.active = state._blocked = state._force = false;
|
|
314
|
+
state._step = [false, false];
|
|
315
|
+
state.intentional = false;
|
|
316
|
+
state._movement = [0, 0];
|
|
317
|
+
state._distance = [0, 0];
|
|
318
|
+
state._direction = [0, 0];
|
|
319
|
+
state._delta = [0, 0];
|
|
320
|
+
state._bounds = [[-Infinity, Infinity], [-Infinity, Infinity]];
|
|
321
|
+
state.args = args;
|
|
322
|
+
state.axis = void 0;
|
|
323
|
+
state.memo = void 0;
|
|
324
|
+
state.elapsedTime = state.timeDelta = 0;
|
|
325
|
+
state.direction = [0, 0];
|
|
326
|
+
state.distance = [0, 0];
|
|
327
|
+
state.overflow = [0, 0];
|
|
328
|
+
state._movementBound = [false, false];
|
|
329
|
+
state.velocity = [0, 0];
|
|
330
|
+
state.movement = [0, 0];
|
|
331
|
+
state.delta = [0, 0];
|
|
332
|
+
state.timeStamp = 0;
|
|
333
|
+
}
|
|
334
|
+
start(event) {
|
|
335
|
+
const state = this.state;
|
|
336
|
+
const config = this.config;
|
|
337
|
+
if (!state._active) {
|
|
338
|
+
this.reset();
|
|
339
|
+
this.computeInitial();
|
|
340
|
+
state._active = true;
|
|
341
|
+
state.target = event.target;
|
|
342
|
+
state.currentTarget = event.currentTarget;
|
|
343
|
+
state.lastOffset = config.from ? call(config.from, state) : state.offset;
|
|
344
|
+
state.offset = state.lastOffset;
|
|
345
|
+
state.startTime = state.timeStamp = event.timeStamp;
|
|
346
|
+
}
|
|
347
|
+
}
|
|
348
|
+
computeValues(values) {
|
|
349
|
+
const state = this.state;
|
|
350
|
+
state._values = values;
|
|
351
|
+
state.values = this.config.transform(values);
|
|
352
|
+
}
|
|
353
|
+
computeInitial() {
|
|
354
|
+
const state = this.state;
|
|
355
|
+
state._initial = state._values;
|
|
356
|
+
state.initial = state.values;
|
|
357
|
+
}
|
|
358
|
+
compute(event) {
|
|
359
|
+
const {
|
|
360
|
+
state,
|
|
361
|
+
config,
|
|
362
|
+
shared
|
|
363
|
+
} = this;
|
|
364
|
+
state.args = this.args;
|
|
365
|
+
let dt = 0;
|
|
366
|
+
if (event) {
|
|
367
|
+
state.event = event;
|
|
368
|
+
if (config.preventDefault && event.cancelable) state.event.preventDefault();
|
|
369
|
+
state.type = event.type;
|
|
370
|
+
shared.touches = this.ctrl.pointerIds.size || this.ctrl.touchIds.size;
|
|
371
|
+
shared.locked = !!document.pointerLockElement;
|
|
372
|
+
Object.assign(shared, getEventDetails(event));
|
|
373
|
+
shared.down = shared.pressed = shared.buttons % 2 === 1 || shared.touches > 0;
|
|
374
|
+
dt = event.timeStamp - state.timeStamp;
|
|
375
|
+
state.timeStamp = event.timeStamp;
|
|
376
|
+
state.elapsedTime = state.timeStamp - state.startTime;
|
|
377
|
+
}
|
|
378
|
+
if (state._active) {
|
|
379
|
+
const _absoluteDelta = state._delta.map(Math.abs);
|
|
380
|
+
V.addTo(state._distance, _absoluteDelta);
|
|
381
|
+
}
|
|
382
|
+
if (this.axisIntent) this.axisIntent(event);
|
|
383
|
+
const [_m0, _m1] = state._movement;
|
|
384
|
+
const [t0, t1] = config.threshold;
|
|
385
|
+
const {
|
|
386
|
+
_step,
|
|
387
|
+
values
|
|
388
|
+
} = state;
|
|
389
|
+
if (config.hasCustomTransform) {
|
|
390
|
+
if (_step[0] === false) _step[0] = Math.abs(_m0) >= t0 && values[0];
|
|
391
|
+
if (_step[1] === false) _step[1] = Math.abs(_m1) >= t1 && values[1];
|
|
392
|
+
} else {
|
|
393
|
+
if (_step[0] === false) _step[0] = Math.abs(_m0) >= t0 && Math.sign(_m0) * t0;
|
|
394
|
+
if (_step[1] === false) _step[1] = Math.abs(_m1) >= t1 && Math.sign(_m1) * t1;
|
|
395
|
+
}
|
|
396
|
+
state.intentional = _step[0] !== false || _step[1] !== false;
|
|
397
|
+
if (!state.intentional) return;
|
|
398
|
+
const movement = [0, 0];
|
|
399
|
+
if (config.hasCustomTransform) {
|
|
400
|
+
const [v0, v1] = values;
|
|
401
|
+
movement[0] = _step[0] !== false ? v0 - _step[0] : 0;
|
|
402
|
+
movement[1] = _step[1] !== false ? v1 - _step[1] : 0;
|
|
403
|
+
} else {
|
|
404
|
+
movement[0] = _step[0] !== false ? _m0 - _step[0] : 0;
|
|
405
|
+
movement[1] = _step[1] !== false ? _m1 - _step[1] : 0;
|
|
406
|
+
}
|
|
407
|
+
if (this.restrictToAxis && !state._blocked) this.restrictToAxis(movement);
|
|
408
|
+
const previousOffset = state.offset;
|
|
409
|
+
const gestureIsActive = state._active && !state._blocked || state.active;
|
|
410
|
+
if (gestureIsActive) {
|
|
411
|
+
state.first = state._active && !state.active;
|
|
412
|
+
state.last = !state._active && state.active;
|
|
413
|
+
state.active = shared[this.ingKey] = state._active;
|
|
414
|
+
if (event) {
|
|
415
|
+
if (state.first) {
|
|
416
|
+
if ("bounds" in config) state._bounds = call(config.bounds, state);
|
|
417
|
+
if (this.setup) this.setup();
|
|
418
|
+
}
|
|
419
|
+
state.movement = movement;
|
|
420
|
+
this.computeOffset();
|
|
421
|
+
}
|
|
422
|
+
}
|
|
423
|
+
const [ox, oy] = state.offset;
|
|
424
|
+
const [[x0, x1], [y0, y1]] = state._bounds;
|
|
425
|
+
state.overflow = [ox < x0 ? -1 : ox > x1 ? 1 : 0, oy < y0 ? -1 : oy > y1 ? 1 : 0];
|
|
426
|
+
state._movementBound[0] = state.overflow[0] ? state._movementBound[0] === false ? state._movement[0] : state._movementBound[0] : false;
|
|
427
|
+
state._movementBound[1] = state.overflow[1] ? state._movementBound[1] === false ? state._movement[1] : state._movementBound[1] : false;
|
|
428
|
+
const rubberband2 = state._active ? config.rubberband || [0, 0] : [0, 0];
|
|
429
|
+
state.offset = computeRubberband(state._bounds, state.offset, rubberband2);
|
|
430
|
+
state.delta = V.sub(state.offset, previousOffset);
|
|
431
|
+
this.computeMovement();
|
|
432
|
+
if (gestureIsActive && (!state.last || dt > BEFORE_LAST_KINEMATICS_DELAY)) {
|
|
433
|
+
state.delta = V.sub(state.offset, previousOffset);
|
|
434
|
+
const absoluteDelta = state.delta.map(Math.abs);
|
|
435
|
+
V.addTo(state.distance, absoluteDelta);
|
|
436
|
+
state.direction = state.delta.map(Math.sign);
|
|
437
|
+
state._direction = state._delta.map(Math.sign);
|
|
438
|
+
if (!state.first && dt > 0) {
|
|
439
|
+
state.velocity = [absoluteDelta[0] / dt, absoluteDelta[1] / dt];
|
|
440
|
+
state.timeDelta = dt;
|
|
441
|
+
}
|
|
442
|
+
}
|
|
443
|
+
}
|
|
444
|
+
emit() {
|
|
445
|
+
const state = this.state;
|
|
446
|
+
const shared = this.shared;
|
|
447
|
+
const config = this.config;
|
|
448
|
+
if (!state._active) this.clean();
|
|
449
|
+
if ((state._blocked || !state.intentional) && !state._force && !config.triggerAllEvents) return;
|
|
450
|
+
const memo = this.handler(_objectSpread2(_objectSpread2(_objectSpread2({}, shared), state), {}, {
|
|
451
|
+
[this.aliasKey]: state.values
|
|
452
|
+
}));
|
|
453
|
+
if (memo !== void 0) state.memo = memo;
|
|
454
|
+
}
|
|
455
|
+
clean() {
|
|
456
|
+
this.eventStore.clean();
|
|
457
|
+
this.timeoutStore.clean();
|
|
458
|
+
}
|
|
459
|
+
};
|
|
460
|
+
function selectAxis([dx, dy], threshold) {
|
|
461
|
+
const absDx = Math.abs(dx);
|
|
462
|
+
const absDy = Math.abs(dy);
|
|
463
|
+
if (absDx > absDy && absDx > threshold) {
|
|
464
|
+
return "x";
|
|
465
|
+
}
|
|
466
|
+
if (absDy > absDx && absDy > threshold) {
|
|
467
|
+
return "y";
|
|
468
|
+
}
|
|
469
|
+
return void 0;
|
|
470
|
+
}
|
|
471
|
+
var CoordinatesEngine = class extends Engine {
|
|
472
|
+
constructor(...args) {
|
|
473
|
+
super(...args);
|
|
474
|
+
_defineProperty(this, "aliasKey", "xy");
|
|
475
|
+
}
|
|
476
|
+
reset() {
|
|
477
|
+
super.reset();
|
|
478
|
+
this.state.axis = void 0;
|
|
479
|
+
}
|
|
480
|
+
init() {
|
|
481
|
+
this.state.offset = [0, 0];
|
|
482
|
+
this.state.lastOffset = [0, 0];
|
|
483
|
+
}
|
|
484
|
+
computeOffset() {
|
|
485
|
+
this.state.offset = V.add(this.state.lastOffset, this.state.movement);
|
|
486
|
+
}
|
|
487
|
+
computeMovement() {
|
|
488
|
+
this.state.movement = V.sub(this.state.offset, this.state.lastOffset);
|
|
489
|
+
}
|
|
490
|
+
axisIntent(event) {
|
|
491
|
+
const state = this.state;
|
|
492
|
+
const config = this.config;
|
|
493
|
+
if (!state.axis && event) {
|
|
494
|
+
const threshold = typeof config.axisThreshold === "object" ? config.axisThreshold[getPointerType(event)] : config.axisThreshold;
|
|
495
|
+
state.axis = selectAxis(state._movement, threshold);
|
|
496
|
+
}
|
|
497
|
+
state._blocked = (config.lockDirection || !!config.axis) && !state.axis || !!config.axis && config.axis !== state.axis;
|
|
498
|
+
}
|
|
499
|
+
restrictToAxis(v) {
|
|
500
|
+
if (this.config.axis || this.config.lockDirection) {
|
|
501
|
+
switch (this.state.axis) {
|
|
502
|
+
case "x":
|
|
503
|
+
v[1] = 0;
|
|
504
|
+
break;
|
|
505
|
+
case "y":
|
|
506
|
+
v[0] = 0;
|
|
507
|
+
break;
|
|
508
|
+
}
|
|
509
|
+
}
|
|
510
|
+
}
|
|
511
|
+
};
|
|
512
|
+
var identity = (v) => v;
|
|
513
|
+
var DEFAULT_RUBBERBAND = 0.15;
|
|
514
|
+
var commonConfigResolver = {
|
|
515
|
+
enabled(value = true) {
|
|
516
|
+
return value;
|
|
517
|
+
},
|
|
518
|
+
eventOptions(value, _k, config) {
|
|
519
|
+
return _objectSpread2(_objectSpread2({}, config.shared.eventOptions), value);
|
|
520
|
+
},
|
|
521
|
+
preventDefault(value = false) {
|
|
522
|
+
return value;
|
|
523
|
+
},
|
|
524
|
+
triggerAllEvents(value = false) {
|
|
525
|
+
return value;
|
|
526
|
+
},
|
|
527
|
+
rubberband(value = 0) {
|
|
528
|
+
switch (value) {
|
|
529
|
+
case true:
|
|
530
|
+
return [DEFAULT_RUBBERBAND, DEFAULT_RUBBERBAND];
|
|
531
|
+
case false:
|
|
532
|
+
return [0, 0];
|
|
533
|
+
default:
|
|
534
|
+
return V.toVector(value);
|
|
535
|
+
}
|
|
536
|
+
},
|
|
537
|
+
from(value) {
|
|
538
|
+
if (typeof value === "function") return value;
|
|
539
|
+
if (value != null) return V.toVector(value);
|
|
540
|
+
},
|
|
541
|
+
transform(value, _k, config) {
|
|
542
|
+
const transform = value || config.shared.transform;
|
|
543
|
+
this.hasCustomTransform = !!transform;
|
|
544
|
+
if (process.env.NODE_ENV === "development") {
|
|
545
|
+
const originalTransform = transform || identity;
|
|
546
|
+
return (v) => {
|
|
547
|
+
const r = originalTransform(v);
|
|
548
|
+
if (!isFinite(r[0]) || !isFinite(r[1])) {
|
|
549
|
+
console.warn(`[@use-gesture]: config.transform() must produce a valid result, but it was: [${r[0]},${[1]}]`);
|
|
550
|
+
}
|
|
551
|
+
return r;
|
|
552
|
+
};
|
|
553
|
+
}
|
|
554
|
+
return transform || identity;
|
|
555
|
+
},
|
|
556
|
+
threshold(value) {
|
|
557
|
+
return V.toVector(value, 0);
|
|
558
|
+
}
|
|
559
|
+
};
|
|
560
|
+
if (process.env.NODE_ENV === "development") {
|
|
561
|
+
Object.assign(commonConfigResolver, {
|
|
562
|
+
domTarget(value) {
|
|
563
|
+
if (value !== void 0) {
|
|
564
|
+
throw Error(`[@use-gesture]: \`domTarget\` option has been renamed to \`target\`.`);
|
|
565
|
+
}
|
|
566
|
+
return NaN;
|
|
567
|
+
},
|
|
568
|
+
lockDirection(value) {
|
|
569
|
+
if (value !== void 0) {
|
|
570
|
+
throw Error(`[@use-gesture]: \`lockDirection\` option has been merged with \`axis\`. Use it as in \`{ axis: 'lock' }\``);
|
|
571
|
+
}
|
|
572
|
+
return NaN;
|
|
573
|
+
},
|
|
574
|
+
initial(value) {
|
|
575
|
+
if (value !== void 0) {
|
|
576
|
+
throw Error(`[@use-gesture]: \`initial\` option has been renamed to \`from\`.`);
|
|
577
|
+
}
|
|
578
|
+
return NaN;
|
|
579
|
+
}
|
|
580
|
+
});
|
|
581
|
+
}
|
|
582
|
+
var DEFAULT_AXIS_THRESHOLD = 0;
|
|
583
|
+
var coordinatesConfigResolver = _objectSpread2(_objectSpread2({}, commonConfigResolver), {}, {
|
|
584
|
+
axis(_v, _k, {
|
|
585
|
+
axis
|
|
586
|
+
}) {
|
|
587
|
+
this.lockDirection = axis === "lock";
|
|
588
|
+
if (!this.lockDirection) return axis;
|
|
589
|
+
},
|
|
590
|
+
axisThreshold(value = DEFAULT_AXIS_THRESHOLD) {
|
|
591
|
+
return value;
|
|
592
|
+
},
|
|
593
|
+
bounds(value = {}) {
|
|
594
|
+
if (typeof value === "function") {
|
|
595
|
+
return (state) => coordinatesConfigResolver.bounds(value(state));
|
|
596
|
+
}
|
|
597
|
+
if ("current" in value) {
|
|
598
|
+
return () => value.current;
|
|
599
|
+
}
|
|
600
|
+
if (typeof HTMLElement === "function" && value instanceof HTMLElement) {
|
|
601
|
+
return value;
|
|
602
|
+
}
|
|
603
|
+
const {
|
|
604
|
+
left = -Infinity,
|
|
605
|
+
right = Infinity,
|
|
606
|
+
top = -Infinity,
|
|
607
|
+
bottom = Infinity
|
|
608
|
+
} = value;
|
|
609
|
+
return [[left, right], [top, bottom]];
|
|
610
|
+
}
|
|
611
|
+
});
|
|
612
|
+
var KEYS_DELTA_MAP = {
|
|
613
|
+
ArrowRight: (displacement, factor = 1) => [displacement * factor, 0],
|
|
614
|
+
ArrowLeft: (displacement, factor = 1) => [-1 * displacement * factor, 0],
|
|
615
|
+
ArrowUp: (displacement, factor = 1) => [0, -1 * displacement * factor],
|
|
616
|
+
ArrowDown: (displacement, factor = 1) => [0, displacement * factor]
|
|
617
|
+
};
|
|
618
|
+
var DragEngine = class extends CoordinatesEngine {
|
|
619
|
+
constructor(...args) {
|
|
620
|
+
super(...args);
|
|
621
|
+
_defineProperty(this, "ingKey", "dragging");
|
|
622
|
+
}
|
|
623
|
+
reset() {
|
|
624
|
+
super.reset();
|
|
625
|
+
const state = this.state;
|
|
626
|
+
state._pointerId = void 0;
|
|
627
|
+
state._pointerActive = false;
|
|
628
|
+
state._keyboardActive = false;
|
|
629
|
+
state._preventScroll = false;
|
|
630
|
+
state._delayed = false;
|
|
631
|
+
state.swipe = [0, 0];
|
|
632
|
+
state.tap = false;
|
|
633
|
+
state.canceled = false;
|
|
634
|
+
state.cancel = this.cancel.bind(this);
|
|
635
|
+
}
|
|
636
|
+
setup() {
|
|
637
|
+
const state = this.state;
|
|
638
|
+
if (state._bounds instanceof HTMLElement) {
|
|
639
|
+
const boundRect = state._bounds.getBoundingClientRect();
|
|
640
|
+
const targetRect = state.currentTarget.getBoundingClientRect();
|
|
641
|
+
const _bounds = {
|
|
642
|
+
left: boundRect.left - targetRect.left + state.offset[0],
|
|
643
|
+
right: boundRect.right - targetRect.right + state.offset[0],
|
|
644
|
+
top: boundRect.top - targetRect.top + state.offset[1],
|
|
645
|
+
bottom: boundRect.bottom - targetRect.bottom + state.offset[1]
|
|
646
|
+
};
|
|
647
|
+
state._bounds = coordinatesConfigResolver.bounds(_bounds);
|
|
648
|
+
}
|
|
649
|
+
}
|
|
650
|
+
cancel() {
|
|
651
|
+
const state = this.state;
|
|
652
|
+
if (state.canceled) return;
|
|
653
|
+
state.canceled = true;
|
|
654
|
+
state._active = false;
|
|
655
|
+
setTimeout(() => {
|
|
656
|
+
this.compute();
|
|
657
|
+
this.emit();
|
|
658
|
+
}, 0);
|
|
659
|
+
}
|
|
660
|
+
setActive() {
|
|
661
|
+
this.state._active = this.state._pointerActive || this.state._keyboardActive;
|
|
662
|
+
}
|
|
663
|
+
clean() {
|
|
664
|
+
this.pointerClean();
|
|
665
|
+
this.state._pointerActive = false;
|
|
666
|
+
this.state._keyboardActive = false;
|
|
667
|
+
super.clean();
|
|
668
|
+
}
|
|
669
|
+
pointerDown(event) {
|
|
670
|
+
const config = this.config;
|
|
671
|
+
const state = this.state;
|
|
672
|
+
if (event.buttons != null && (Array.isArray(config.pointerButtons) ? !config.pointerButtons.includes(event.buttons) : config.pointerButtons !== -1 && config.pointerButtons !== event.buttons)) return;
|
|
673
|
+
const ctrlIds = this.ctrl.setEventIds(event);
|
|
674
|
+
if (config.pointerCapture) {
|
|
675
|
+
event.target.setPointerCapture(event.pointerId);
|
|
676
|
+
}
|
|
677
|
+
if (ctrlIds && ctrlIds.size > 1 && state._pointerActive) return;
|
|
678
|
+
this.start(event);
|
|
679
|
+
this.setupPointer(event);
|
|
680
|
+
state._pointerId = pointerId(event);
|
|
681
|
+
state._pointerActive = true;
|
|
682
|
+
this.computeValues(pointerValues(event));
|
|
683
|
+
this.computeInitial();
|
|
684
|
+
if (config.preventScrollAxis && getPointerType(event) !== "mouse") {
|
|
685
|
+
state._active = false;
|
|
686
|
+
this.setupScrollPrevention(event);
|
|
687
|
+
} else if (config.delay > 0) {
|
|
688
|
+
this.setupDelayTrigger(event);
|
|
689
|
+
if (config.triggerAllEvents) {
|
|
690
|
+
this.compute(event);
|
|
691
|
+
this.emit();
|
|
692
|
+
}
|
|
693
|
+
} else {
|
|
694
|
+
this.startPointerDrag(event);
|
|
695
|
+
}
|
|
696
|
+
}
|
|
697
|
+
startPointerDrag(event) {
|
|
698
|
+
const state = this.state;
|
|
699
|
+
state._active = true;
|
|
700
|
+
state._preventScroll = true;
|
|
701
|
+
state._delayed = false;
|
|
702
|
+
this.compute(event);
|
|
703
|
+
this.emit();
|
|
704
|
+
}
|
|
705
|
+
pointerMove(event) {
|
|
706
|
+
const state = this.state;
|
|
707
|
+
const config = this.config;
|
|
708
|
+
if (!state._pointerActive) return;
|
|
709
|
+
const id = pointerId(event);
|
|
710
|
+
if (state._pointerId !== void 0 && id !== state._pointerId) return;
|
|
711
|
+
const _values = pointerValues(event);
|
|
712
|
+
if (document.pointerLockElement === event.target) {
|
|
713
|
+
state._delta = [event.movementX, event.movementY];
|
|
714
|
+
} else {
|
|
715
|
+
state._delta = V.sub(_values, state._values);
|
|
716
|
+
this.computeValues(_values);
|
|
717
|
+
}
|
|
718
|
+
V.addTo(state._movement, state._delta);
|
|
719
|
+
this.compute(event);
|
|
720
|
+
if (state._delayed && state.intentional) {
|
|
721
|
+
this.timeoutStore.remove("dragDelay");
|
|
722
|
+
state.active = false;
|
|
723
|
+
this.startPointerDrag(event);
|
|
724
|
+
return;
|
|
725
|
+
}
|
|
726
|
+
if (config.preventScrollAxis && !state._preventScroll) {
|
|
727
|
+
if (state.axis) {
|
|
728
|
+
if (state.axis === config.preventScrollAxis || config.preventScrollAxis === "xy") {
|
|
729
|
+
state._active = false;
|
|
730
|
+
this.clean();
|
|
731
|
+
return;
|
|
732
|
+
} else {
|
|
733
|
+
this.timeoutStore.remove("startPointerDrag");
|
|
734
|
+
this.startPointerDrag(event);
|
|
735
|
+
return;
|
|
736
|
+
}
|
|
737
|
+
} else {
|
|
738
|
+
return;
|
|
739
|
+
}
|
|
740
|
+
}
|
|
741
|
+
this.emit();
|
|
742
|
+
}
|
|
743
|
+
pointerUp(event) {
|
|
744
|
+
this.ctrl.setEventIds(event);
|
|
745
|
+
try {
|
|
746
|
+
if (this.config.pointerCapture && event.target.hasPointerCapture(event.pointerId)) {
|
|
747
|
+
;
|
|
748
|
+
event.target.releasePointerCapture(event.pointerId);
|
|
749
|
+
}
|
|
750
|
+
} catch (_unused) {
|
|
751
|
+
if (process.env.NODE_ENV === "development") {
|
|
752
|
+
console.warn(`[@use-gesture]: If you see this message, it's likely that you're using an outdated version of \`@react-three/fiber\`.
|
|
753
|
+
|
|
754
|
+
Please upgrade to the latest version.`);
|
|
755
|
+
}
|
|
756
|
+
}
|
|
757
|
+
const state = this.state;
|
|
758
|
+
const config = this.config;
|
|
759
|
+
if (!state._active || !state._pointerActive) return;
|
|
760
|
+
const id = pointerId(event);
|
|
761
|
+
if (state._pointerId !== void 0 && id !== state._pointerId) return;
|
|
762
|
+
this.state._pointerActive = false;
|
|
763
|
+
this.setActive();
|
|
764
|
+
this.compute(event);
|
|
765
|
+
const [dx, dy] = state._distance;
|
|
766
|
+
state.tap = dx <= config.tapsThreshold && dy <= config.tapsThreshold;
|
|
767
|
+
if (state.tap && config.filterTaps) {
|
|
768
|
+
state._force = true;
|
|
769
|
+
} else {
|
|
770
|
+
const [_dx, _dy] = state._delta;
|
|
771
|
+
const [_mx, _my] = state._movement;
|
|
772
|
+
const [svx, svy] = config.swipe.velocity;
|
|
773
|
+
const [sx, sy] = config.swipe.distance;
|
|
774
|
+
const sdt = config.swipe.duration;
|
|
775
|
+
if (state.elapsedTime < sdt) {
|
|
776
|
+
const _vx = Math.abs(_dx / state.timeDelta);
|
|
777
|
+
const _vy = Math.abs(_dy / state.timeDelta);
|
|
778
|
+
if (_vx > svx && Math.abs(_mx) > sx) state.swipe[0] = Math.sign(_dx);
|
|
779
|
+
if (_vy > svy && Math.abs(_my) > sy) state.swipe[1] = Math.sign(_dy);
|
|
780
|
+
}
|
|
781
|
+
}
|
|
782
|
+
this.emit();
|
|
783
|
+
}
|
|
784
|
+
pointerClick(event) {
|
|
785
|
+
if (!this.state.tap && event.detail > 0) {
|
|
786
|
+
event.preventDefault();
|
|
787
|
+
event.stopPropagation();
|
|
788
|
+
}
|
|
789
|
+
}
|
|
790
|
+
setupPointer(event) {
|
|
791
|
+
const config = this.config;
|
|
792
|
+
const device = config.device;
|
|
793
|
+
if (process.env.NODE_ENV === "development") {
|
|
794
|
+
try {
|
|
795
|
+
if (device === "pointer" && config.preventScrollDelay === void 0) {
|
|
796
|
+
const currentTarget = "uv" in event ? event.sourceEvent.currentTarget : event.currentTarget;
|
|
797
|
+
const style = window.getComputedStyle(currentTarget);
|
|
798
|
+
if (style.touchAction === "auto") {
|
|
799
|
+
console.warn(`[@use-gesture]: The drag target has its \`touch-action\` style property set to \`auto\`. It is recommended to add \`touch-action: 'none'\` so that the drag gesture behaves correctly on touch-enabled devices. For more information read this: https://use-gesture.netlify.app/docs/extras/#touch-action.
|
|
800
|
+
|
|
801
|
+
This message will only show in development mode. It won't appear in production. If this is intended, you can ignore it.`, currentTarget);
|
|
802
|
+
}
|
|
803
|
+
}
|
|
804
|
+
} catch (_unused2) {
|
|
805
|
+
}
|
|
806
|
+
}
|
|
807
|
+
if (config.pointerLock) {
|
|
808
|
+
event.currentTarget.requestPointerLock();
|
|
809
|
+
}
|
|
810
|
+
if (!config.pointerCapture) {
|
|
811
|
+
this.eventStore.add(this.sharedConfig.window, device, "change", this.pointerMove.bind(this));
|
|
812
|
+
this.eventStore.add(this.sharedConfig.window, device, "end", this.pointerUp.bind(this));
|
|
813
|
+
this.eventStore.add(this.sharedConfig.window, device, "cancel", this.pointerUp.bind(this));
|
|
814
|
+
}
|
|
815
|
+
}
|
|
816
|
+
pointerClean() {
|
|
817
|
+
if (this.config.pointerLock && document.pointerLockElement === this.state.currentTarget) {
|
|
818
|
+
document.exitPointerLock();
|
|
819
|
+
}
|
|
820
|
+
}
|
|
821
|
+
preventScroll(event) {
|
|
822
|
+
if (this.state._preventScroll && event.cancelable) {
|
|
823
|
+
event.preventDefault();
|
|
824
|
+
}
|
|
825
|
+
}
|
|
826
|
+
setupScrollPrevention(event) {
|
|
827
|
+
this.state._preventScroll = false;
|
|
828
|
+
persistEvent(event);
|
|
829
|
+
const remove = this.eventStore.add(this.sharedConfig.window, "touch", "change", this.preventScroll.bind(this), {
|
|
830
|
+
passive: false
|
|
831
|
+
});
|
|
832
|
+
this.eventStore.add(this.sharedConfig.window, "touch", "end", remove);
|
|
833
|
+
this.eventStore.add(this.sharedConfig.window, "touch", "cancel", remove);
|
|
834
|
+
this.timeoutStore.add("startPointerDrag", this.startPointerDrag.bind(this), this.config.preventScrollDelay, event);
|
|
835
|
+
}
|
|
836
|
+
setupDelayTrigger(event) {
|
|
837
|
+
this.state._delayed = true;
|
|
838
|
+
this.timeoutStore.add("dragDelay", () => {
|
|
839
|
+
this.state._step = [0, 0];
|
|
840
|
+
this.startPointerDrag(event);
|
|
841
|
+
}, this.config.delay);
|
|
842
|
+
}
|
|
843
|
+
keyDown(event) {
|
|
844
|
+
const deltaFn = KEYS_DELTA_MAP[event.key];
|
|
845
|
+
if (deltaFn) {
|
|
846
|
+
const state = this.state;
|
|
847
|
+
const factor = event.shiftKey ? 10 : event.altKey ? 0.1 : 1;
|
|
848
|
+
this.start(event);
|
|
849
|
+
state._delta = deltaFn(this.config.keyboardDisplacement, factor);
|
|
850
|
+
state._keyboardActive = true;
|
|
851
|
+
V.addTo(state._movement, state._delta);
|
|
852
|
+
this.compute(event);
|
|
853
|
+
this.emit();
|
|
854
|
+
}
|
|
855
|
+
}
|
|
856
|
+
keyUp(event) {
|
|
857
|
+
if (!(event.key in KEYS_DELTA_MAP)) return;
|
|
858
|
+
this.state._keyboardActive = false;
|
|
859
|
+
this.setActive();
|
|
860
|
+
this.compute(event);
|
|
861
|
+
this.emit();
|
|
862
|
+
}
|
|
863
|
+
bind(bindFunction) {
|
|
864
|
+
const device = this.config.device;
|
|
865
|
+
bindFunction(device, "start", this.pointerDown.bind(this));
|
|
866
|
+
if (this.config.pointerCapture) {
|
|
867
|
+
bindFunction(device, "change", this.pointerMove.bind(this));
|
|
868
|
+
bindFunction(device, "end", this.pointerUp.bind(this));
|
|
869
|
+
bindFunction(device, "cancel", this.pointerUp.bind(this));
|
|
870
|
+
bindFunction("lostPointerCapture", "", this.pointerUp.bind(this));
|
|
871
|
+
}
|
|
872
|
+
if (this.config.keys) {
|
|
873
|
+
bindFunction("key", "down", this.keyDown.bind(this));
|
|
874
|
+
bindFunction("key", "up", this.keyUp.bind(this));
|
|
875
|
+
}
|
|
876
|
+
if (this.config.filterTaps) {
|
|
877
|
+
bindFunction("click", "", this.pointerClick.bind(this), {
|
|
878
|
+
capture: true,
|
|
879
|
+
passive: false
|
|
880
|
+
});
|
|
881
|
+
}
|
|
882
|
+
}
|
|
883
|
+
};
|
|
884
|
+
function persistEvent(event) {
|
|
885
|
+
"persist" in event && typeof event.persist === "function" && event.persist();
|
|
886
|
+
}
|
|
887
|
+
var isBrowser = typeof window !== "undefined" && window.document && window.document.createElement;
|
|
888
|
+
function supportsTouchEvents() {
|
|
889
|
+
return isBrowser && "ontouchstart" in window;
|
|
890
|
+
}
|
|
891
|
+
function isTouchScreen() {
|
|
892
|
+
return supportsTouchEvents() || isBrowser && window.navigator.maxTouchPoints > 1;
|
|
893
|
+
}
|
|
894
|
+
function supportsPointerEvents() {
|
|
895
|
+
return isBrowser && "onpointerdown" in window;
|
|
896
|
+
}
|
|
897
|
+
function supportsPointerLock() {
|
|
898
|
+
return isBrowser && "exitPointerLock" in window.document;
|
|
899
|
+
}
|
|
900
|
+
function supportsGestureEvents() {
|
|
901
|
+
try {
|
|
902
|
+
return "constructor" in GestureEvent;
|
|
903
|
+
} catch (e) {
|
|
904
|
+
return false;
|
|
905
|
+
}
|
|
906
|
+
}
|
|
907
|
+
var SUPPORT = {
|
|
908
|
+
isBrowser,
|
|
909
|
+
gesture: supportsGestureEvents(),
|
|
910
|
+
touch: supportsTouchEvents(),
|
|
911
|
+
touchscreen: isTouchScreen(),
|
|
912
|
+
pointer: supportsPointerEvents(),
|
|
913
|
+
pointerLock: supportsPointerLock()
|
|
914
|
+
};
|
|
915
|
+
var DEFAULT_PREVENT_SCROLL_DELAY = 250;
|
|
916
|
+
var DEFAULT_DRAG_DELAY = 180;
|
|
917
|
+
var DEFAULT_SWIPE_VELOCITY = 0.5;
|
|
918
|
+
var DEFAULT_SWIPE_DISTANCE = 50;
|
|
919
|
+
var DEFAULT_SWIPE_DURATION = 250;
|
|
920
|
+
var DEFAULT_KEYBOARD_DISPLACEMENT = 10;
|
|
921
|
+
var DEFAULT_DRAG_AXIS_THRESHOLD = {
|
|
922
|
+
mouse: 0,
|
|
923
|
+
touch: 0,
|
|
924
|
+
pen: 8
|
|
925
|
+
};
|
|
926
|
+
var dragConfigResolver = _objectSpread2(_objectSpread2({}, coordinatesConfigResolver), {}, {
|
|
927
|
+
device(_v, _k, {
|
|
928
|
+
pointer: {
|
|
929
|
+
touch = false,
|
|
930
|
+
lock = false,
|
|
931
|
+
mouse = false
|
|
932
|
+
} = {}
|
|
933
|
+
}) {
|
|
934
|
+
this.pointerLock = lock && SUPPORT.pointerLock;
|
|
935
|
+
if (SUPPORT.touch && touch) return "touch";
|
|
936
|
+
if (this.pointerLock) return "mouse";
|
|
937
|
+
if (SUPPORT.pointer && !mouse) return "pointer";
|
|
938
|
+
if (SUPPORT.touch) return "touch";
|
|
939
|
+
return "mouse";
|
|
940
|
+
},
|
|
941
|
+
preventScrollAxis(value, _k, {
|
|
942
|
+
preventScroll
|
|
943
|
+
}) {
|
|
944
|
+
this.preventScrollDelay = typeof preventScroll === "number" ? preventScroll : preventScroll || preventScroll === void 0 && value ? DEFAULT_PREVENT_SCROLL_DELAY : void 0;
|
|
945
|
+
if (!SUPPORT.touchscreen || preventScroll === false) return void 0;
|
|
946
|
+
return value ? value : preventScroll !== void 0 ? "y" : void 0;
|
|
947
|
+
},
|
|
948
|
+
pointerCapture(_v, _k, {
|
|
949
|
+
pointer: {
|
|
950
|
+
capture = true,
|
|
951
|
+
buttons = 1,
|
|
952
|
+
keys = true
|
|
953
|
+
} = {}
|
|
954
|
+
}) {
|
|
955
|
+
this.pointerButtons = buttons;
|
|
956
|
+
this.keys = keys;
|
|
957
|
+
return !this.pointerLock && this.device === "pointer" && capture;
|
|
958
|
+
},
|
|
959
|
+
threshold(value, _k, {
|
|
960
|
+
filterTaps = false,
|
|
961
|
+
tapsThreshold = 3,
|
|
962
|
+
axis = void 0
|
|
963
|
+
}) {
|
|
964
|
+
const threshold = V.toVector(value, filterTaps ? tapsThreshold : axis ? 1 : 0);
|
|
965
|
+
this.filterTaps = filterTaps;
|
|
966
|
+
this.tapsThreshold = tapsThreshold;
|
|
967
|
+
return threshold;
|
|
968
|
+
},
|
|
969
|
+
swipe({
|
|
970
|
+
velocity = DEFAULT_SWIPE_VELOCITY,
|
|
971
|
+
distance = DEFAULT_SWIPE_DISTANCE,
|
|
972
|
+
duration = DEFAULT_SWIPE_DURATION
|
|
973
|
+
} = {}) {
|
|
974
|
+
return {
|
|
975
|
+
velocity: this.transform(V.toVector(velocity)),
|
|
976
|
+
distance: this.transform(V.toVector(distance)),
|
|
977
|
+
duration
|
|
978
|
+
};
|
|
979
|
+
},
|
|
980
|
+
delay(value = 0) {
|
|
981
|
+
switch (value) {
|
|
982
|
+
case true:
|
|
983
|
+
return DEFAULT_DRAG_DELAY;
|
|
984
|
+
case false:
|
|
985
|
+
return 0;
|
|
986
|
+
default:
|
|
987
|
+
return value;
|
|
988
|
+
}
|
|
989
|
+
},
|
|
990
|
+
axisThreshold(value) {
|
|
991
|
+
if (!value) return DEFAULT_DRAG_AXIS_THRESHOLD;
|
|
992
|
+
return _objectSpread2(_objectSpread2({}, DEFAULT_DRAG_AXIS_THRESHOLD), value);
|
|
993
|
+
},
|
|
994
|
+
keyboardDisplacement(value = DEFAULT_KEYBOARD_DISPLACEMENT) {
|
|
995
|
+
return value;
|
|
996
|
+
}
|
|
997
|
+
});
|
|
998
|
+
if (process.env.NODE_ENV === "development") {
|
|
999
|
+
Object.assign(dragConfigResolver, {
|
|
1000
|
+
useTouch(value) {
|
|
1001
|
+
if (value !== void 0) {
|
|
1002
|
+
throw Error(`[@use-gesture]: \`useTouch\` option has been renamed to \`pointer.touch\`. Use it as in \`{ pointer: { touch: true } }\`.`);
|
|
1003
|
+
}
|
|
1004
|
+
return NaN;
|
|
1005
|
+
},
|
|
1006
|
+
experimental_preventWindowScrollY(value) {
|
|
1007
|
+
if (value !== void 0) {
|
|
1008
|
+
throw Error(`[@use-gesture]: \`experimental_preventWindowScrollY\` option has been renamed to \`preventScroll\`.`);
|
|
1009
|
+
}
|
|
1010
|
+
return NaN;
|
|
1011
|
+
},
|
|
1012
|
+
swipeVelocity(value) {
|
|
1013
|
+
if (value !== void 0) {
|
|
1014
|
+
throw Error(`[@use-gesture]: \`swipeVelocity\` option has been renamed to \`swipe.velocity\`. Use it as in \`{ swipe: { velocity: 0.5 } }\`.`);
|
|
1015
|
+
}
|
|
1016
|
+
return NaN;
|
|
1017
|
+
},
|
|
1018
|
+
swipeDistance(value) {
|
|
1019
|
+
if (value !== void 0) {
|
|
1020
|
+
throw Error(`[@use-gesture]: \`swipeDistance\` option has been renamed to \`swipe.distance\`. Use it as in \`{ swipe: { distance: 50 } }\`.`);
|
|
1021
|
+
}
|
|
1022
|
+
return NaN;
|
|
1023
|
+
},
|
|
1024
|
+
swipeDuration(value) {
|
|
1025
|
+
if (value !== void 0) {
|
|
1026
|
+
throw Error(`[@use-gesture]: \`swipeDuration\` option has been renamed to \`swipe.duration\`. Use it as in \`{ swipe: { duration: 250 } }\`.`);
|
|
1027
|
+
}
|
|
1028
|
+
return NaN;
|
|
1029
|
+
}
|
|
1030
|
+
});
|
|
1031
|
+
}
|
|
1032
|
+
function clampStateInternalMovementToBounds(state) {
|
|
1033
|
+
const [ox, oy] = state.overflow;
|
|
1034
|
+
const [dx, dy] = state._delta;
|
|
1035
|
+
const [dirx, diry] = state._direction;
|
|
1036
|
+
if (ox < 0 && dx > 0 && dirx < 0 || ox > 0 && dx < 0 && dirx > 0) {
|
|
1037
|
+
state._movement[0] = state._movementBound[0];
|
|
1038
|
+
}
|
|
1039
|
+
if (oy < 0 && dy > 0 && diry < 0 || oy > 0 && dy < 0 && diry > 0) {
|
|
1040
|
+
state._movement[1] = state._movementBound[1];
|
|
1041
|
+
}
|
|
1042
|
+
}
|
|
1043
|
+
var SCALE_ANGLE_RATIO_INTENT_DEG = 30;
|
|
1044
|
+
var PINCH_WHEEL_RATIO = 100;
|
|
1045
|
+
var PinchEngine = class extends Engine {
|
|
1046
|
+
constructor(...args) {
|
|
1047
|
+
super(...args);
|
|
1048
|
+
_defineProperty(this, "ingKey", "pinching");
|
|
1049
|
+
_defineProperty(this, "aliasKey", "da");
|
|
1050
|
+
}
|
|
1051
|
+
init() {
|
|
1052
|
+
this.state.offset = [1, 0];
|
|
1053
|
+
this.state.lastOffset = [1, 0];
|
|
1054
|
+
this.state._pointerEvents = /* @__PURE__ */ new Map();
|
|
1055
|
+
}
|
|
1056
|
+
reset() {
|
|
1057
|
+
super.reset();
|
|
1058
|
+
const state = this.state;
|
|
1059
|
+
state._touchIds = [];
|
|
1060
|
+
state.canceled = false;
|
|
1061
|
+
state.cancel = this.cancel.bind(this);
|
|
1062
|
+
state.turns = 0;
|
|
1063
|
+
}
|
|
1064
|
+
computeOffset() {
|
|
1065
|
+
const {
|
|
1066
|
+
type,
|
|
1067
|
+
movement,
|
|
1068
|
+
lastOffset
|
|
1069
|
+
} = this.state;
|
|
1070
|
+
if (type === "wheel") {
|
|
1071
|
+
this.state.offset = V.add(movement, lastOffset);
|
|
1072
|
+
} else {
|
|
1073
|
+
this.state.offset = [(1 + movement[0]) * lastOffset[0], movement[1] + lastOffset[1]];
|
|
1074
|
+
}
|
|
1075
|
+
}
|
|
1076
|
+
computeMovement() {
|
|
1077
|
+
const {
|
|
1078
|
+
offset,
|
|
1079
|
+
lastOffset
|
|
1080
|
+
} = this.state;
|
|
1081
|
+
this.state.movement = [offset[0] / lastOffset[0], offset[1] - lastOffset[1]];
|
|
1082
|
+
}
|
|
1083
|
+
axisIntent() {
|
|
1084
|
+
const state = this.state;
|
|
1085
|
+
const [_m0, _m1] = state._movement;
|
|
1086
|
+
if (!state.axis) {
|
|
1087
|
+
const axisMovementDifference = Math.abs(_m0) * SCALE_ANGLE_RATIO_INTENT_DEG - Math.abs(_m1);
|
|
1088
|
+
if (axisMovementDifference < 0) state.axis = "angle";
|
|
1089
|
+
else if (axisMovementDifference > 0) state.axis = "scale";
|
|
1090
|
+
}
|
|
1091
|
+
}
|
|
1092
|
+
restrictToAxis(v) {
|
|
1093
|
+
if (this.config.lockDirection) {
|
|
1094
|
+
if (this.state.axis === "scale") v[1] = 0;
|
|
1095
|
+
else if (this.state.axis === "angle") v[0] = 0;
|
|
1096
|
+
}
|
|
1097
|
+
}
|
|
1098
|
+
cancel() {
|
|
1099
|
+
const state = this.state;
|
|
1100
|
+
if (state.canceled) return;
|
|
1101
|
+
setTimeout(() => {
|
|
1102
|
+
state.canceled = true;
|
|
1103
|
+
state._active = false;
|
|
1104
|
+
this.compute();
|
|
1105
|
+
this.emit();
|
|
1106
|
+
}, 0);
|
|
1107
|
+
}
|
|
1108
|
+
touchStart(event) {
|
|
1109
|
+
this.ctrl.setEventIds(event);
|
|
1110
|
+
const state = this.state;
|
|
1111
|
+
const ctrlTouchIds = this.ctrl.touchIds;
|
|
1112
|
+
if (state._active) {
|
|
1113
|
+
if (state._touchIds.every((id) => ctrlTouchIds.has(id))) return;
|
|
1114
|
+
}
|
|
1115
|
+
if (ctrlTouchIds.size < 2) return;
|
|
1116
|
+
this.start(event);
|
|
1117
|
+
state._touchIds = Array.from(ctrlTouchIds).slice(0, 2);
|
|
1118
|
+
const payload = touchDistanceAngle(event, state._touchIds);
|
|
1119
|
+
if (!payload) return;
|
|
1120
|
+
this.pinchStart(event, payload);
|
|
1121
|
+
}
|
|
1122
|
+
pointerStart(event) {
|
|
1123
|
+
if (event.buttons != null && event.buttons % 2 !== 1) return;
|
|
1124
|
+
this.ctrl.setEventIds(event);
|
|
1125
|
+
event.target.setPointerCapture(event.pointerId);
|
|
1126
|
+
const state = this.state;
|
|
1127
|
+
const _pointerEvents = state._pointerEvents;
|
|
1128
|
+
const ctrlPointerIds = this.ctrl.pointerIds;
|
|
1129
|
+
if (state._active) {
|
|
1130
|
+
if (Array.from(_pointerEvents.keys()).every((id) => ctrlPointerIds.has(id))) return;
|
|
1131
|
+
}
|
|
1132
|
+
if (_pointerEvents.size < 2) {
|
|
1133
|
+
_pointerEvents.set(event.pointerId, event);
|
|
1134
|
+
}
|
|
1135
|
+
if (state._pointerEvents.size < 2) return;
|
|
1136
|
+
this.start(event);
|
|
1137
|
+
const payload = distanceAngle(...Array.from(_pointerEvents.values()));
|
|
1138
|
+
if (!payload) return;
|
|
1139
|
+
this.pinchStart(event, payload);
|
|
1140
|
+
}
|
|
1141
|
+
pinchStart(event, payload) {
|
|
1142
|
+
const state = this.state;
|
|
1143
|
+
state.origin = payload.origin;
|
|
1144
|
+
this.computeValues([payload.distance, payload.angle]);
|
|
1145
|
+
this.computeInitial();
|
|
1146
|
+
this.compute(event);
|
|
1147
|
+
this.emit();
|
|
1148
|
+
}
|
|
1149
|
+
touchMove(event) {
|
|
1150
|
+
if (!this.state._active) return;
|
|
1151
|
+
const payload = touchDistanceAngle(event, this.state._touchIds);
|
|
1152
|
+
if (!payload) return;
|
|
1153
|
+
this.pinchMove(event, payload);
|
|
1154
|
+
}
|
|
1155
|
+
pointerMove(event) {
|
|
1156
|
+
const _pointerEvents = this.state._pointerEvents;
|
|
1157
|
+
if (_pointerEvents.has(event.pointerId)) {
|
|
1158
|
+
_pointerEvents.set(event.pointerId, event);
|
|
1159
|
+
}
|
|
1160
|
+
if (!this.state._active) return;
|
|
1161
|
+
const payload = distanceAngle(...Array.from(_pointerEvents.values()));
|
|
1162
|
+
if (!payload) return;
|
|
1163
|
+
this.pinchMove(event, payload);
|
|
1164
|
+
}
|
|
1165
|
+
pinchMove(event, payload) {
|
|
1166
|
+
const state = this.state;
|
|
1167
|
+
const prev_a = state._values[1];
|
|
1168
|
+
const delta_a = payload.angle - prev_a;
|
|
1169
|
+
let delta_turns = 0;
|
|
1170
|
+
if (Math.abs(delta_a) > 270) delta_turns += Math.sign(delta_a);
|
|
1171
|
+
this.computeValues([payload.distance, payload.angle - 360 * delta_turns]);
|
|
1172
|
+
state.origin = payload.origin;
|
|
1173
|
+
state.turns = delta_turns;
|
|
1174
|
+
state._movement = [state._values[0] / state._initial[0] - 1, state._values[1] - state._initial[1]];
|
|
1175
|
+
this.compute(event);
|
|
1176
|
+
this.emit();
|
|
1177
|
+
}
|
|
1178
|
+
touchEnd(event) {
|
|
1179
|
+
this.ctrl.setEventIds(event);
|
|
1180
|
+
if (!this.state._active) return;
|
|
1181
|
+
if (this.state._touchIds.some((id) => !this.ctrl.touchIds.has(id))) {
|
|
1182
|
+
this.state._active = false;
|
|
1183
|
+
this.compute(event);
|
|
1184
|
+
this.emit();
|
|
1185
|
+
}
|
|
1186
|
+
}
|
|
1187
|
+
pointerEnd(event) {
|
|
1188
|
+
const state = this.state;
|
|
1189
|
+
this.ctrl.setEventIds(event);
|
|
1190
|
+
try {
|
|
1191
|
+
event.target.releasePointerCapture(event.pointerId);
|
|
1192
|
+
} catch (_unused) {
|
|
1193
|
+
}
|
|
1194
|
+
if (state._pointerEvents.has(event.pointerId)) {
|
|
1195
|
+
state._pointerEvents.delete(event.pointerId);
|
|
1196
|
+
}
|
|
1197
|
+
if (!state._active) return;
|
|
1198
|
+
if (state._pointerEvents.size < 2) {
|
|
1199
|
+
state._active = false;
|
|
1200
|
+
this.compute(event);
|
|
1201
|
+
this.emit();
|
|
1202
|
+
}
|
|
1203
|
+
}
|
|
1204
|
+
gestureStart(event) {
|
|
1205
|
+
if (event.cancelable) event.preventDefault();
|
|
1206
|
+
const state = this.state;
|
|
1207
|
+
if (state._active) return;
|
|
1208
|
+
this.start(event);
|
|
1209
|
+
this.computeValues([event.scale, event.rotation]);
|
|
1210
|
+
state.origin = [event.clientX, event.clientY];
|
|
1211
|
+
this.compute(event);
|
|
1212
|
+
this.emit();
|
|
1213
|
+
}
|
|
1214
|
+
gestureMove(event) {
|
|
1215
|
+
if (event.cancelable) event.preventDefault();
|
|
1216
|
+
if (!this.state._active) return;
|
|
1217
|
+
const state = this.state;
|
|
1218
|
+
this.computeValues([event.scale, event.rotation]);
|
|
1219
|
+
state.origin = [event.clientX, event.clientY];
|
|
1220
|
+
const _previousMovement = state._movement;
|
|
1221
|
+
state._movement = [event.scale - 1, event.rotation];
|
|
1222
|
+
state._delta = V.sub(state._movement, _previousMovement);
|
|
1223
|
+
this.compute(event);
|
|
1224
|
+
this.emit();
|
|
1225
|
+
}
|
|
1226
|
+
gestureEnd(event) {
|
|
1227
|
+
if (!this.state._active) return;
|
|
1228
|
+
this.state._active = false;
|
|
1229
|
+
this.compute(event);
|
|
1230
|
+
this.emit();
|
|
1231
|
+
}
|
|
1232
|
+
wheel(event) {
|
|
1233
|
+
const modifierKey = this.config.modifierKey;
|
|
1234
|
+
if (modifierKey && (Array.isArray(modifierKey) ? !modifierKey.find((k) => event[k]) : !event[modifierKey])) return;
|
|
1235
|
+
if (!this.state._active) this.wheelStart(event);
|
|
1236
|
+
else this.wheelChange(event);
|
|
1237
|
+
this.timeoutStore.add("wheelEnd", this.wheelEnd.bind(this));
|
|
1238
|
+
}
|
|
1239
|
+
wheelStart(event) {
|
|
1240
|
+
this.start(event);
|
|
1241
|
+
this.wheelChange(event);
|
|
1242
|
+
}
|
|
1243
|
+
wheelChange(event) {
|
|
1244
|
+
const isR3f = "uv" in event;
|
|
1245
|
+
if (!isR3f) {
|
|
1246
|
+
if (event.cancelable) {
|
|
1247
|
+
event.preventDefault();
|
|
1248
|
+
}
|
|
1249
|
+
if (process.env.NODE_ENV === "development" && !event.defaultPrevented) {
|
|
1250
|
+
console.warn(`[@use-gesture]: To properly support zoom on trackpads, try using the \`target\` option.
|
|
1251
|
+
|
|
1252
|
+
This message will only appear in development mode.`);
|
|
1253
|
+
}
|
|
1254
|
+
}
|
|
1255
|
+
const state = this.state;
|
|
1256
|
+
state._delta = [-wheelValues(event)[1] / PINCH_WHEEL_RATIO * state.offset[0], 0];
|
|
1257
|
+
V.addTo(state._movement, state._delta);
|
|
1258
|
+
clampStateInternalMovementToBounds(state);
|
|
1259
|
+
this.state.origin = [event.clientX, event.clientY];
|
|
1260
|
+
this.compute(event);
|
|
1261
|
+
this.emit();
|
|
1262
|
+
}
|
|
1263
|
+
wheelEnd() {
|
|
1264
|
+
if (!this.state._active) return;
|
|
1265
|
+
this.state._active = false;
|
|
1266
|
+
this.compute();
|
|
1267
|
+
this.emit();
|
|
1268
|
+
}
|
|
1269
|
+
bind(bindFunction) {
|
|
1270
|
+
const device = this.config.device;
|
|
1271
|
+
if (!!device) {
|
|
1272
|
+
bindFunction(device, "start", this[device + "Start"].bind(this));
|
|
1273
|
+
bindFunction(device, "change", this[device + "Move"].bind(this));
|
|
1274
|
+
bindFunction(device, "end", this[device + "End"].bind(this));
|
|
1275
|
+
bindFunction(device, "cancel", this[device + "End"].bind(this));
|
|
1276
|
+
bindFunction("lostPointerCapture", "", this[device + "End"].bind(this));
|
|
1277
|
+
}
|
|
1278
|
+
if (this.config.pinchOnWheel) {
|
|
1279
|
+
bindFunction("wheel", "", this.wheel.bind(this), {
|
|
1280
|
+
passive: false
|
|
1281
|
+
});
|
|
1282
|
+
}
|
|
1283
|
+
}
|
|
1284
|
+
};
|
|
1285
|
+
var pinchConfigResolver = _objectSpread2(_objectSpread2({}, commonConfigResolver), {}, {
|
|
1286
|
+
device(_v, _k, {
|
|
1287
|
+
shared,
|
|
1288
|
+
pointer: {
|
|
1289
|
+
touch = false
|
|
1290
|
+
} = {}
|
|
1291
|
+
}) {
|
|
1292
|
+
const sharedConfig = shared;
|
|
1293
|
+
if (sharedConfig.target && !SUPPORT.touch && SUPPORT.gesture) return "gesture";
|
|
1294
|
+
if (SUPPORT.touch && touch) return "touch";
|
|
1295
|
+
if (SUPPORT.touchscreen) {
|
|
1296
|
+
if (SUPPORT.pointer) return "pointer";
|
|
1297
|
+
if (SUPPORT.touch) return "touch";
|
|
1298
|
+
}
|
|
1299
|
+
},
|
|
1300
|
+
bounds(_v, _k, {
|
|
1301
|
+
scaleBounds = {},
|
|
1302
|
+
angleBounds = {}
|
|
1303
|
+
}) {
|
|
1304
|
+
const _scaleBounds = (state) => {
|
|
1305
|
+
const D = assignDefault(call(scaleBounds, state), {
|
|
1306
|
+
min: -Infinity,
|
|
1307
|
+
max: Infinity
|
|
1308
|
+
});
|
|
1309
|
+
return [D.min, D.max];
|
|
1310
|
+
};
|
|
1311
|
+
const _angleBounds = (state) => {
|
|
1312
|
+
const A = assignDefault(call(angleBounds, state), {
|
|
1313
|
+
min: -Infinity,
|
|
1314
|
+
max: Infinity
|
|
1315
|
+
});
|
|
1316
|
+
return [A.min, A.max];
|
|
1317
|
+
};
|
|
1318
|
+
if (typeof scaleBounds !== "function" && typeof angleBounds !== "function") return [_scaleBounds(), _angleBounds()];
|
|
1319
|
+
return (state) => [_scaleBounds(state), _angleBounds(state)];
|
|
1320
|
+
},
|
|
1321
|
+
threshold(value, _k, config) {
|
|
1322
|
+
this.lockDirection = config.axis === "lock";
|
|
1323
|
+
const threshold = V.toVector(value, this.lockDirection ? [0.1, 3] : 0);
|
|
1324
|
+
return threshold;
|
|
1325
|
+
},
|
|
1326
|
+
modifierKey(value) {
|
|
1327
|
+
if (value === void 0) return "ctrlKey";
|
|
1328
|
+
return value;
|
|
1329
|
+
},
|
|
1330
|
+
pinchOnWheel(value = true) {
|
|
1331
|
+
return value;
|
|
1332
|
+
}
|
|
1333
|
+
});
|
|
1334
|
+
var MoveEngine = class extends CoordinatesEngine {
|
|
1335
|
+
constructor(...args) {
|
|
1336
|
+
super(...args);
|
|
1337
|
+
_defineProperty(this, "ingKey", "moving");
|
|
1338
|
+
}
|
|
1339
|
+
move(event) {
|
|
1340
|
+
if (this.config.mouseOnly && event.pointerType !== "mouse") return;
|
|
1341
|
+
if (!this.state._active) this.moveStart(event);
|
|
1342
|
+
else this.moveChange(event);
|
|
1343
|
+
this.timeoutStore.add("moveEnd", this.moveEnd.bind(this));
|
|
1344
|
+
}
|
|
1345
|
+
moveStart(event) {
|
|
1346
|
+
this.start(event);
|
|
1347
|
+
this.computeValues(pointerValues(event));
|
|
1348
|
+
this.compute(event);
|
|
1349
|
+
this.computeInitial();
|
|
1350
|
+
this.emit();
|
|
1351
|
+
}
|
|
1352
|
+
moveChange(event) {
|
|
1353
|
+
if (!this.state._active) return;
|
|
1354
|
+
const values = pointerValues(event);
|
|
1355
|
+
const state = this.state;
|
|
1356
|
+
state._delta = V.sub(values, state._values);
|
|
1357
|
+
V.addTo(state._movement, state._delta);
|
|
1358
|
+
this.computeValues(values);
|
|
1359
|
+
this.compute(event);
|
|
1360
|
+
this.emit();
|
|
1361
|
+
}
|
|
1362
|
+
moveEnd(event) {
|
|
1363
|
+
if (!this.state._active) return;
|
|
1364
|
+
this.state._active = false;
|
|
1365
|
+
this.compute(event);
|
|
1366
|
+
this.emit();
|
|
1367
|
+
}
|
|
1368
|
+
bind(bindFunction) {
|
|
1369
|
+
bindFunction("pointer", "change", this.move.bind(this));
|
|
1370
|
+
bindFunction("pointer", "leave", this.moveEnd.bind(this));
|
|
1371
|
+
}
|
|
1372
|
+
};
|
|
1373
|
+
var moveConfigResolver = _objectSpread2(_objectSpread2({}, coordinatesConfigResolver), {}, {
|
|
1374
|
+
mouseOnly: (value = true) => value
|
|
1375
|
+
});
|
|
1376
|
+
var ScrollEngine = class extends CoordinatesEngine {
|
|
1377
|
+
constructor(...args) {
|
|
1378
|
+
super(...args);
|
|
1379
|
+
_defineProperty(this, "ingKey", "scrolling");
|
|
1380
|
+
}
|
|
1381
|
+
scroll(event) {
|
|
1382
|
+
if (!this.state._active) this.start(event);
|
|
1383
|
+
this.scrollChange(event);
|
|
1384
|
+
this.timeoutStore.add("scrollEnd", this.scrollEnd.bind(this));
|
|
1385
|
+
}
|
|
1386
|
+
scrollChange(event) {
|
|
1387
|
+
if (event.cancelable) event.preventDefault();
|
|
1388
|
+
const state = this.state;
|
|
1389
|
+
const values = scrollValues(event);
|
|
1390
|
+
state._delta = V.sub(values, state._values);
|
|
1391
|
+
V.addTo(state._movement, state._delta);
|
|
1392
|
+
this.computeValues(values);
|
|
1393
|
+
this.compute(event);
|
|
1394
|
+
this.emit();
|
|
1395
|
+
}
|
|
1396
|
+
scrollEnd() {
|
|
1397
|
+
if (!this.state._active) return;
|
|
1398
|
+
this.state._active = false;
|
|
1399
|
+
this.compute();
|
|
1400
|
+
this.emit();
|
|
1401
|
+
}
|
|
1402
|
+
bind(bindFunction) {
|
|
1403
|
+
bindFunction("scroll", "", this.scroll.bind(this));
|
|
1404
|
+
}
|
|
1405
|
+
};
|
|
1406
|
+
var scrollConfigResolver = coordinatesConfigResolver;
|
|
1407
|
+
var WheelEngine = class extends CoordinatesEngine {
|
|
1408
|
+
constructor(...args) {
|
|
1409
|
+
super(...args);
|
|
1410
|
+
_defineProperty(this, "ingKey", "wheeling");
|
|
1411
|
+
}
|
|
1412
|
+
wheel(event) {
|
|
1413
|
+
if (!this.state._active) this.start(event);
|
|
1414
|
+
this.wheelChange(event);
|
|
1415
|
+
this.timeoutStore.add("wheelEnd", this.wheelEnd.bind(this));
|
|
1416
|
+
}
|
|
1417
|
+
wheelChange(event) {
|
|
1418
|
+
const state = this.state;
|
|
1419
|
+
state._delta = wheelValues(event);
|
|
1420
|
+
V.addTo(state._movement, state._delta);
|
|
1421
|
+
clampStateInternalMovementToBounds(state);
|
|
1422
|
+
this.compute(event);
|
|
1423
|
+
this.emit();
|
|
1424
|
+
}
|
|
1425
|
+
wheelEnd() {
|
|
1426
|
+
if (!this.state._active) return;
|
|
1427
|
+
this.state._active = false;
|
|
1428
|
+
this.compute();
|
|
1429
|
+
this.emit();
|
|
1430
|
+
}
|
|
1431
|
+
bind(bindFunction) {
|
|
1432
|
+
bindFunction("wheel", "", this.wheel.bind(this));
|
|
1433
|
+
}
|
|
1434
|
+
};
|
|
1435
|
+
var wheelConfigResolver = coordinatesConfigResolver;
|
|
1436
|
+
var HoverEngine = class extends CoordinatesEngine {
|
|
1437
|
+
constructor(...args) {
|
|
1438
|
+
super(...args);
|
|
1439
|
+
_defineProperty(this, "ingKey", "hovering");
|
|
1440
|
+
}
|
|
1441
|
+
enter(event) {
|
|
1442
|
+
if (this.config.mouseOnly && event.pointerType !== "mouse") return;
|
|
1443
|
+
this.start(event);
|
|
1444
|
+
this.computeValues(pointerValues(event));
|
|
1445
|
+
this.compute(event);
|
|
1446
|
+
this.emit();
|
|
1447
|
+
}
|
|
1448
|
+
leave(event) {
|
|
1449
|
+
if (this.config.mouseOnly && event.pointerType !== "mouse") return;
|
|
1450
|
+
const state = this.state;
|
|
1451
|
+
if (!state._active) return;
|
|
1452
|
+
state._active = false;
|
|
1453
|
+
const values = pointerValues(event);
|
|
1454
|
+
state._movement = state._delta = V.sub(values, state._values);
|
|
1455
|
+
this.computeValues(values);
|
|
1456
|
+
this.compute(event);
|
|
1457
|
+
state.delta = state.movement;
|
|
1458
|
+
this.emit();
|
|
1459
|
+
}
|
|
1460
|
+
bind(bindFunction) {
|
|
1461
|
+
bindFunction("pointer", "enter", this.enter.bind(this));
|
|
1462
|
+
bindFunction("pointer", "leave", this.leave.bind(this));
|
|
1463
|
+
}
|
|
1464
|
+
};
|
|
1465
|
+
var hoverConfigResolver = _objectSpread2(_objectSpread2({}, coordinatesConfigResolver), {}, {
|
|
1466
|
+
mouseOnly: (value = true) => value
|
|
1467
|
+
});
|
|
1468
|
+
var EngineMap = /* @__PURE__ */ new Map();
|
|
1469
|
+
var ConfigResolverMap = /* @__PURE__ */ new Map();
|
|
1470
|
+
function registerAction(action) {
|
|
1471
|
+
EngineMap.set(action.key, action.engine);
|
|
1472
|
+
ConfigResolverMap.set(action.key, action.resolver);
|
|
1473
|
+
}
|
|
1474
|
+
var dragAction = {
|
|
1475
|
+
key: "drag",
|
|
1476
|
+
engine: DragEngine,
|
|
1477
|
+
resolver: dragConfigResolver
|
|
1478
|
+
};
|
|
1479
|
+
var hoverAction = {
|
|
1480
|
+
key: "hover",
|
|
1481
|
+
engine: HoverEngine,
|
|
1482
|
+
resolver: hoverConfigResolver
|
|
1483
|
+
};
|
|
1484
|
+
var moveAction = {
|
|
1485
|
+
key: "move",
|
|
1486
|
+
engine: MoveEngine,
|
|
1487
|
+
resolver: moveConfigResolver
|
|
1488
|
+
};
|
|
1489
|
+
var pinchAction = {
|
|
1490
|
+
key: "pinch",
|
|
1491
|
+
engine: PinchEngine,
|
|
1492
|
+
resolver: pinchConfigResolver
|
|
1493
|
+
};
|
|
1494
|
+
var scrollAction = {
|
|
1495
|
+
key: "scroll",
|
|
1496
|
+
engine: ScrollEngine,
|
|
1497
|
+
resolver: scrollConfigResolver
|
|
1498
|
+
};
|
|
1499
|
+
var wheelAction = {
|
|
1500
|
+
key: "wheel",
|
|
1501
|
+
engine: WheelEngine,
|
|
1502
|
+
resolver: wheelConfigResolver
|
|
1503
|
+
};
|
|
1504
|
+
|
|
1505
|
+
// ../../node_modules/.pnpm/@use-gesture+core@10.3.1/node_modules/@use-gesture/core/dist/use-gesture-core.esm.js
|
|
1506
|
+
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
1507
|
+
if (source == null) return {};
|
|
1508
|
+
var target = {};
|
|
1509
|
+
var sourceKeys = Object.keys(source);
|
|
1510
|
+
var key, i;
|
|
1511
|
+
for (i = 0; i < sourceKeys.length; i++) {
|
|
1512
|
+
key = sourceKeys[i];
|
|
1513
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
1514
|
+
target[key] = source[key];
|
|
1515
|
+
}
|
|
1516
|
+
return target;
|
|
1517
|
+
}
|
|
1518
|
+
function _objectWithoutProperties(source, excluded) {
|
|
1519
|
+
if (source == null) return {};
|
|
1520
|
+
var target = _objectWithoutPropertiesLoose(source, excluded);
|
|
1521
|
+
var key, i;
|
|
1522
|
+
if (Object.getOwnPropertySymbols) {
|
|
1523
|
+
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
|
1524
|
+
for (i = 0; i < sourceSymbolKeys.length; i++) {
|
|
1525
|
+
key = sourceSymbolKeys[i];
|
|
1526
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
1527
|
+
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
1528
|
+
target[key] = source[key];
|
|
1529
|
+
}
|
|
1530
|
+
}
|
|
1531
|
+
return target;
|
|
1532
|
+
}
|
|
1533
|
+
var sharedConfigResolver = {
|
|
1534
|
+
target(value) {
|
|
1535
|
+
if (value) {
|
|
1536
|
+
return () => "current" in value ? value.current : value;
|
|
1537
|
+
}
|
|
1538
|
+
return void 0;
|
|
1539
|
+
},
|
|
1540
|
+
enabled(value = true) {
|
|
1541
|
+
return value;
|
|
1542
|
+
},
|
|
1543
|
+
window(value = SUPPORT.isBrowser ? window : void 0) {
|
|
1544
|
+
return value;
|
|
1545
|
+
},
|
|
1546
|
+
eventOptions({
|
|
1547
|
+
passive = true,
|
|
1548
|
+
capture = false
|
|
1549
|
+
} = {}) {
|
|
1550
|
+
return {
|
|
1551
|
+
passive,
|
|
1552
|
+
capture
|
|
1553
|
+
};
|
|
1554
|
+
},
|
|
1555
|
+
transform(value) {
|
|
1556
|
+
return value;
|
|
1557
|
+
}
|
|
1558
|
+
};
|
|
1559
|
+
var _excluded = ["target", "eventOptions", "window", "enabled", "transform"];
|
|
1560
|
+
function resolveWith(config = {}, resolvers) {
|
|
1561
|
+
const result = {};
|
|
1562
|
+
for (const [key, resolver] of Object.entries(resolvers)) {
|
|
1563
|
+
switch (typeof resolver) {
|
|
1564
|
+
case "function":
|
|
1565
|
+
if (process.env.NODE_ENV === "development") {
|
|
1566
|
+
const r = resolver.call(result, config[key], key, config);
|
|
1567
|
+
if (!Number.isNaN(r)) result[key] = r;
|
|
1568
|
+
} else {
|
|
1569
|
+
result[key] = resolver.call(result, config[key], key, config);
|
|
1570
|
+
}
|
|
1571
|
+
break;
|
|
1572
|
+
case "object":
|
|
1573
|
+
result[key] = resolveWith(config[key], resolver);
|
|
1574
|
+
break;
|
|
1575
|
+
case "boolean":
|
|
1576
|
+
if (resolver) result[key] = config[key];
|
|
1577
|
+
break;
|
|
1578
|
+
}
|
|
1579
|
+
}
|
|
1580
|
+
return result;
|
|
1581
|
+
}
|
|
1582
|
+
function parse(newConfig, gestureKey, _config = {}) {
|
|
1583
|
+
const _ref = newConfig, {
|
|
1584
|
+
target,
|
|
1585
|
+
eventOptions,
|
|
1586
|
+
window: window2,
|
|
1587
|
+
enabled,
|
|
1588
|
+
transform
|
|
1589
|
+
} = _ref, rest = _objectWithoutProperties(_ref, _excluded);
|
|
1590
|
+
_config.shared = resolveWith({
|
|
1591
|
+
target,
|
|
1592
|
+
eventOptions,
|
|
1593
|
+
window: window2,
|
|
1594
|
+
enabled,
|
|
1595
|
+
transform
|
|
1596
|
+
}, sharedConfigResolver);
|
|
1597
|
+
if (gestureKey) {
|
|
1598
|
+
const resolver = ConfigResolverMap.get(gestureKey);
|
|
1599
|
+
_config[gestureKey] = resolveWith(_objectSpread2({
|
|
1600
|
+
shared: _config.shared
|
|
1601
|
+
}, rest), resolver);
|
|
1602
|
+
} else {
|
|
1603
|
+
for (const key in rest) {
|
|
1604
|
+
const resolver = ConfigResolverMap.get(key);
|
|
1605
|
+
if (resolver) {
|
|
1606
|
+
_config[key] = resolveWith(_objectSpread2({
|
|
1607
|
+
shared: _config.shared
|
|
1608
|
+
}, rest[key]), resolver);
|
|
1609
|
+
} else if (process.env.NODE_ENV === "development") {
|
|
1610
|
+
if (!["drag", "pinch", "scroll", "wheel", "move", "hover"].includes(key)) {
|
|
1611
|
+
if (key === "domTarget") {
|
|
1612
|
+
throw Error(`[@use-gesture]: \`domTarget\` option has been renamed to \`target\`.`);
|
|
1613
|
+
}
|
|
1614
|
+
console.warn(`[@use-gesture]: Unknown config key \`${key}\` was used. Please read the documentation for further information.`);
|
|
1615
|
+
}
|
|
1616
|
+
}
|
|
1617
|
+
}
|
|
1618
|
+
}
|
|
1619
|
+
return _config;
|
|
1620
|
+
}
|
|
1621
|
+
var EventStore = class {
|
|
1622
|
+
constructor(ctrl, gestureKey) {
|
|
1623
|
+
_defineProperty(this, "_listeners", /* @__PURE__ */ new Set());
|
|
1624
|
+
this._ctrl = ctrl;
|
|
1625
|
+
this._gestureKey = gestureKey;
|
|
1626
|
+
}
|
|
1627
|
+
add(element, device, action, handler, options) {
|
|
1628
|
+
const listeners = this._listeners;
|
|
1629
|
+
const type = toDomEventType(device, action);
|
|
1630
|
+
const _options = this._gestureKey ? this._ctrl.config[this._gestureKey].eventOptions : {};
|
|
1631
|
+
const eventOptions = _objectSpread2(_objectSpread2({}, _options), options);
|
|
1632
|
+
element.addEventListener(type, handler, eventOptions);
|
|
1633
|
+
const remove = () => {
|
|
1634
|
+
element.removeEventListener(type, handler, eventOptions);
|
|
1635
|
+
listeners.delete(remove);
|
|
1636
|
+
};
|
|
1637
|
+
listeners.add(remove);
|
|
1638
|
+
return remove;
|
|
1639
|
+
}
|
|
1640
|
+
clean() {
|
|
1641
|
+
this._listeners.forEach((remove) => remove());
|
|
1642
|
+
this._listeners.clear();
|
|
1643
|
+
}
|
|
1644
|
+
};
|
|
1645
|
+
var TimeoutStore = class {
|
|
1646
|
+
constructor() {
|
|
1647
|
+
_defineProperty(this, "_timeouts", /* @__PURE__ */ new Map());
|
|
1648
|
+
}
|
|
1649
|
+
add(key, callback, ms = 140, ...args) {
|
|
1650
|
+
this.remove(key);
|
|
1651
|
+
this._timeouts.set(key, window.setTimeout(callback, ms, ...args));
|
|
1652
|
+
}
|
|
1653
|
+
remove(key) {
|
|
1654
|
+
const timeout = this._timeouts.get(key);
|
|
1655
|
+
if (timeout) window.clearTimeout(timeout);
|
|
1656
|
+
}
|
|
1657
|
+
clean() {
|
|
1658
|
+
this._timeouts.forEach((timeout) => void window.clearTimeout(timeout));
|
|
1659
|
+
this._timeouts.clear();
|
|
1660
|
+
}
|
|
1661
|
+
};
|
|
1662
|
+
var Controller = class {
|
|
1663
|
+
constructor(handlers) {
|
|
1664
|
+
_defineProperty(this, "gestures", /* @__PURE__ */ new Set());
|
|
1665
|
+
_defineProperty(this, "_targetEventStore", new EventStore(this));
|
|
1666
|
+
_defineProperty(this, "gestureEventStores", {});
|
|
1667
|
+
_defineProperty(this, "gestureTimeoutStores", {});
|
|
1668
|
+
_defineProperty(this, "handlers", {});
|
|
1669
|
+
_defineProperty(this, "config", {});
|
|
1670
|
+
_defineProperty(this, "pointerIds", /* @__PURE__ */ new Set());
|
|
1671
|
+
_defineProperty(this, "touchIds", /* @__PURE__ */ new Set());
|
|
1672
|
+
_defineProperty(this, "state", {
|
|
1673
|
+
shared: {
|
|
1674
|
+
shiftKey: false,
|
|
1675
|
+
metaKey: false,
|
|
1676
|
+
ctrlKey: false,
|
|
1677
|
+
altKey: false
|
|
1678
|
+
}
|
|
1679
|
+
});
|
|
1680
|
+
resolveGestures(this, handlers);
|
|
1681
|
+
}
|
|
1682
|
+
setEventIds(event) {
|
|
1683
|
+
if (isTouch(event)) {
|
|
1684
|
+
this.touchIds = new Set(touchIds(event));
|
|
1685
|
+
return this.touchIds;
|
|
1686
|
+
} else if ("pointerId" in event) {
|
|
1687
|
+
if (event.type === "pointerup" || event.type === "pointercancel") this.pointerIds.delete(event.pointerId);
|
|
1688
|
+
else if (event.type === "pointerdown") this.pointerIds.add(event.pointerId);
|
|
1689
|
+
return this.pointerIds;
|
|
1690
|
+
}
|
|
1691
|
+
}
|
|
1692
|
+
applyHandlers(handlers, nativeHandlers) {
|
|
1693
|
+
this.handlers = handlers;
|
|
1694
|
+
this.nativeHandlers = nativeHandlers;
|
|
1695
|
+
}
|
|
1696
|
+
applyConfig(config, gestureKey) {
|
|
1697
|
+
this.config = parse(config, gestureKey, this.config);
|
|
1698
|
+
}
|
|
1699
|
+
clean() {
|
|
1700
|
+
this._targetEventStore.clean();
|
|
1701
|
+
for (const key of this.gestures) {
|
|
1702
|
+
this.gestureEventStores[key].clean();
|
|
1703
|
+
this.gestureTimeoutStores[key].clean();
|
|
1704
|
+
}
|
|
1705
|
+
}
|
|
1706
|
+
effect() {
|
|
1707
|
+
if (this.config.shared.target) this.bind();
|
|
1708
|
+
return () => this._targetEventStore.clean();
|
|
1709
|
+
}
|
|
1710
|
+
bind(...args) {
|
|
1711
|
+
const sharedConfig = this.config.shared;
|
|
1712
|
+
const props = {};
|
|
1713
|
+
let target;
|
|
1714
|
+
if (sharedConfig.target) {
|
|
1715
|
+
target = sharedConfig.target();
|
|
1716
|
+
if (!target) return;
|
|
1717
|
+
}
|
|
1718
|
+
if (sharedConfig.enabled) {
|
|
1719
|
+
for (const gestureKey of this.gestures) {
|
|
1720
|
+
const gestureConfig = this.config[gestureKey];
|
|
1721
|
+
const bindFunction = bindToProps(props, gestureConfig.eventOptions, !!target);
|
|
1722
|
+
if (gestureConfig.enabled) {
|
|
1723
|
+
const Engine2 = EngineMap.get(gestureKey);
|
|
1724
|
+
new Engine2(this, args, gestureKey).bind(bindFunction);
|
|
1725
|
+
}
|
|
1726
|
+
}
|
|
1727
|
+
const nativeBindFunction = bindToProps(props, sharedConfig.eventOptions, !!target);
|
|
1728
|
+
for (const eventKey in this.nativeHandlers) {
|
|
1729
|
+
nativeBindFunction(eventKey, "", (event) => this.nativeHandlers[eventKey](_objectSpread2(_objectSpread2({}, this.state.shared), {}, {
|
|
1730
|
+
event,
|
|
1731
|
+
args
|
|
1732
|
+
})), void 0, true);
|
|
1733
|
+
}
|
|
1734
|
+
}
|
|
1735
|
+
for (const handlerProp in props) {
|
|
1736
|
+
props[handlerProp] = chain(...props[handlerProp]);
|
|
1737
|
+
}
|
|
1738
|
+
if (!target) return props;
|
|
1739
|
+
for (const handlerProp in props) {
|
|
1740
|
+
const {
|
|
1741
|
+
device,
|
|
1742
|
+
capture,
|
|
1743
|
+
passive
|
|
1744
|
+
} = parseProp(handlerProp);
|
|
1745
|
+
this._targetEventStore.add(target, device, "", props[handlerProp], {
|
|
1746
|
+
capture,
|
|
1747
|
+
passive
|
|
1748
|
+
});
|
|
1749
|
+
}
|
|
1750
|
+
}
|
|
1751
|
+
};
|
|
1752
|
+
function setupGesture(ctrl, gestureKey) {
|
|
1753
|
+
ctrl.gestures.add(gestureKey);
|
|
1754
|
+
ctrl.gestureEventStores[gestureKey] = new EventStore(ctrl, gestureKey);
|
|
1755
|
+
ctrl.gestureTimeoutStores[gestureKey] = new TimeoutStore();
|
|
1756
|
+
}
|
|
1757
|
+
function resolveGestures(ctrl, internalHandlers) {
|
|
1758
|
+
if (internalHandlers.drag) setupGesture(ctrl, "drag");
|
|
1759
|
+
if (internalHandlers.wheel) setupGesture(ctrl, "wheel");
|
|
1760
|
+
if (internalHandlers.scroll) setupGesture(ctrl, "scroll");
|
|
1761
|
+
if (internalHandlers.move) setupGesture(ctrl, "move");
|
|
1762
|
+
if (internalHandlers.pinch) setupGesture(ctrl, "pinch");
|
|
1763
|
+
if (internalHandlers.hover) setupGesture(ctrl, "hover");
|
|
1764
|
+
}
|
|
1765
|
+
var bindToProps = (props, eventOptions, withPassiveOption) => (device, action, handler, options = {}, isNative = false) => {
|
|
1766
|
+
var _options$capture, _options$passive;
|
|
1767
|
+
const capture = (_options$capture = options.capture) !== null && _options$capture !== void 0 ? _options$capture : eventOptions.capture;
|
|
1768
|
+
const passive = (_options$passive = options.passive) !== null && _options$passive !== void 0 ? _options$passive : eventOptions.passive;
|
|
1769
|
+
let handlerProp = isNative ? device : toHandlerProp(device, action, capture);
|
|
1770
|
+
if (withPassiveOption && passive) handlerProp += "Passive";
|
|
1771
|
+
props[handlerProp] = props[handlerProp] || [];
|
|
1772
|
+
props[handlerProp].push(handler);
|
|
1773
|
+
};
|
|
1774
|
+
var RE_NOT_NATIVE = /^on(Drag|Wheel|Scroll|Move|Pinch|Hover)/;
|
|
1775
|
+
function sortHandlers(_handlers) {
|
|
1776
|
+
const native = {};
|
|
1777
|
+
const handlers = {};
|
|
1778
|
+
const actions = /* @__PURE__ */ new Set();
|
|
1779
|
+
for (let key in _handlers) {
|
|
1780
|
+
if (RE_NOT_NATIVE.test(key)) {
|
|
1781
|
+
actions.add(RegExp.lastMatch);
|
|
1782
|
+
handlers[key] = _handlers[key];
|
|
1783
|
+
} else {
|
|
1784
|
+
native[key] = _handlers[key];
|
|
1785
|
+
}
|
|
1786
|
+
}
|
|
1787
|
+
return [handlers, native, actions];
|
|
1788
|
+
}
|
|
1789
|
+
function registerGesture(actions, handlers, handlerKey, key, internalHandlers, config) {
|
|
1790
|
+
if (!actions.has(handlerKey)) return;
|
|
1791
|
+
if (!EngineMap.has(key)) {
|
|
1792
|
+
if (process.env.NODE_ENV === "development") {
|
|
1793
|
+
console.warn(`[@use-gesture]: You've created a custom handler that that uses the \`${key}\` gesture but isn't properly configured.
|
|
1794
|
+
|
|
1795
|
+
Please add \`${key}Action\` when creating your handler.`);
|
|
1796
|
+
}
|
|
1797
|
+
return;
|
|
1798
|
+
}
|
|
1799
|
+
const startKey = handlerKey + "Start";
|
|
1800
|
+
const endKey = handlerKey + "End";
|
|
1801
|
+
const fn = (state) => {
|
|
1802
|
+
let memo = void 0;
|
|
1803
|
+
if (state.first && startKey in handlers) handlers[startKey](state);
|
|
1804
|
+
if (handlerKey in handlers) memo = handlers[handlerKey](state);
|
|
1805
|
+
if (state.last && endKey in handlers) handlers[endKey](state);
|
|
1806
|
+
return memo;
|
|
1807
|
+
};
|
|
1808
|
+
internalHandlers[key] = fn;
|
|
1809
|
+
config[key] = config[key] || {};
|
|
1810
|
+
}
|
|
1811
|
+
function parseMergedHandlers(mergedHandlers, mergedConfig) {
|
|
1812
|
+
const [handlers, nativeHandlers, actions] = sortHandlers(mergedHandlers);
|
|
1813
|
+
const internalHandlers = {};
|
|
1814
|
+
registerGesture(actions, handlers, "onDrag", "drag", internalHandlers, mergedConfig);
|
|
1815
|
+
registerGesture(actions, handlers, "onWheel", "wheel", internalHandlers, mergedConfig);
|
|
1816
|
+
registerGesture(actions, handlers, "onScroll", "scroll", internalHandlers, mergedConfig);
|
|
1817
|
+
registerGesture(actions, handlers, "onPinch", "pinch", internalHandlers, mergedConfig);
|
|
1818
|
+
registerGesture(actions, handlers, "onMove", "move", internalHandlers, mergedConfig);
|
|
1819
|
+
registerGesture(actions, handlers, "onHover", "hover", internalHandlers, mergedConfig);
|
|
1820
|
+
return {
|
|
1821
|
+
handlers: internalHandlers,
|
|
1822
|
+
config: mergedConfig,
|
|
1823
|
+
nativeHandlers
|
|
1824
|
+
};
|
|
1825
|
+
}
|
|
1826
|
+
|
|
1827
|
+
// ../../node_modules/.pnpm/@use-gesture+react@10.3.1_react@19.2.3/node_modules/@use-gesture/react/dist/use-gesture-react.esm.js
|
|
1828
|
+
function useRecognizers(handlers, config = {}, gestureKey, nativeHandlers) {
|
|
1829
|
+
const ctrl = React.useMemo(() => new Controller(handlers), []);
|
|
1830
|
+
ctrl.applyHandlers(handlers, nativeHandlers);
|
|
1831
|
+
ctrl.applyConfig(config, gestureKey);
|
|
1832
|
+
React.useEffect(ctrl.effect.bind(ctrl));
|
|
1833
|
+
React.useEffect(() => {
|
|
1834
|
+
return ctrl.clean.bind(ctrl);
|
|
1835
|
+
}, []);
|
|
1836
|
+
if (config.target === void 0) {
|
|
1837
|
+
return ctrl.bind.bind(ctrl);
|
|
1838
|
+
}
|
|
1839
|
+
return void 0;
|
|
1840
|
+
}
|
|
1841
|
+
function useDrag(handler, config) {
|
|
1842
|
+
registerAction(dragAction);
|
|
1843
|
+
return useRecognizers({
|
|
1844
|
+
drag: handler
|
|
1845
|
+
}, config || {}, "drag");
|
|
1846
|
+
}
|
|
1847
|
+
function usePinch(handler, config) {
|
|
1848
|
+
registerAction(pinchAction);
|
|
1849
|
+
return useRecognizers({
|
|
1850
|
+
pinch: handler
|
|
1851
|
+
}, config || {}, "pinch");
|
|
1852
|
+
}
|
|
1853
|
+
function useWheel(handler, config) {
|
|
1854
|
+
registerAction(wheelAction);
|
|
1855
|
+
return useRecognizers({
|
|
1856
|
+
wheel: handler
|
|
1857
|
+
}, config || {}, "wheel");
|
|
1858
|
+
}
|
|
1859
|
+
function useScroll(handler, config) {
|
|
1860
|
+
registerAction(scrollAction);
|
|
1861
|
+
return useRecognizers({
|
|
1862
|
+
scroll: handler
|
|
1863
|
+
}, config || {}, "scroll");
|
|
1864
|
+
}
|
|
1865
|
+
function useMove(handler, config) {
|
|
1866
|
+
registerAction(moveAction);
|
|
1867
|
+
return useRecognizers({
|
|
1868
|
+
move: handler
|
|
1869
|
+
}, config || {}, "move");
|
|
1870
|
+
}
|
|
1871
|
+
function useHover(handler, config) {
|
|
1872
|
+
registerAction(hoverAction);
|
|
1873
|
+
return useRecognizers({
|
|
1874
|
+
hover: handler
|
|
1875
|
+
}, config || {}, "hover");
|
|
1876
|
+
}
|
|
1877
|
+
function createUseGesture(actions) {
|
|
1878
|
+
actions.forEach(registerAction);
|
|
1879
|
+
return function useGesture2(_handlers, _config) {
|
|
1880
|
+
const {
|
|
1881
|
+
handlers,
|
|
1882
|
+
nativeHandlers,
|
|
1883
|
+
config
|
|
1884
|
+
} = parseMergedHandlers(_handlers, _config || {});
|
|
1885
|
+
return useRecognizers(handlers, config, void 0, nativeHandlers);
|
|
1886
|
+
};
|
|
1887
|
+
}
|
|
1888
|
+
function useGesture(handlers, config) {
|
|
1889
|
+
const hook = createUseGesture([dragAction, pinchAction, scrollAction, wheelAction, moveAction, hoverAction]);
|
|
1890
|
+
return hook(handlers, config || {});
|
|
1891
|
+
}
|
|
1892
|
+
|
|
1893
|
+
export { ConfigResolverMap, EngineMap, createUseGesture, dragAction, hoverAction, moveAction, pinchAction, registerAction, rubberbandIfOutOfBounds, scrollAction, useDrag, useGesture, useHover, useMove, usePinch, useScroll, useWheel, wheelAction };
|