@vuu-ui/vuu-utils 3.1.0-beta.2 → 3.1.0-beta.4
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/package.json +10 -8
- package/src/index.js +4 -4
- package/src/vendor/@dnd-kit/abstract/index.d.ts +1279 -0
- package/src/vendor/@dnd-kit/abstract/index.js +1472 -0
- package/src/vendor/@dnd-kit/abstract/index.js.map +1 -0
- package/src/vendor/@dnd-kit/abstract/modifiers.d.ts +134 -0
- package/src/vendor/@dnd-kit/abstract/modifiers.js +100 -0
- package/src/vendor/@dnd-kit/abstract/modifiers.js.map +1 -0
- package/src/vendor/@dnd-kit/abstract/package.json +60 -0
- package/src/vendor/@dnd-kit/collision/dist/index.d.ts +46 -0
- package/src/vendor/@dnd-kit/collision/dist/index.js +175 -0
- package/src/vendor/@dnd-kit/collision/package.json +42 -0
- package/src/vendor/@dnd-kit/dom/index.d.ts +298 -0
- package/src/vendor/@dnd-kit/dom/index.js +1977 -0
- package/src/vendor/@dnd-kit/dom/index.js.map +1 -0
- package/src/vendor/@dnd-kit/dom/modifiers.d.ts +26 -0
- package/src/vendor/@dnd-kit/dom/modifiers.js +117 -0
- package/src/vendor/@dnd-kit/dom/modifiers.js.map +1 -0
- package/src/vendor/@dnd-kit/dom/package.json +92 -0
- package/src/vendor/@dnd-kit/dom/plugins/debug.d.ts +8 -0
- package/src/vendor/@dnd-kit/dom/plugins/debug.js +125 -0
- package/src/vendor/@dnd-kit/dom/plugins/debug.js.map +1 -0
- package/src/vendor/@dnd-kit/dom/sortable.d.ts +125 -0
- package/src/vendor/@dnd-kit/dom/sortable.js +822 -0
- package/src/vendor/@dnd-kit/dom/sortable.js.map +1 -0
- package/src/vendor/@dnd-kit/dom/utilities.d.ts +215 -0
- package/src/vendor/@dnd-kit/dom/utilities.js +1361 -0
- package/src/vendor/@dnd-kit/dom/utilities.js.map +1 -0
- package/src/vendor/@dnd-kit/geometry/dist/index.d.ts +178 -0
- package/src/vendor/@dnd-kit/geometry/dist/index.js +347 -0
- package/src/vendor/@dnd-kit/geometry/package.json +31 -0
- package/src/vendor/@dnd-kit/react/hooks.d.ts +30 -0
- package/src/vendor/@dnd-kit/react/hooks.js +133 -0
- package/src/vendor/@dnd-kit/react/index.d.ts +84 -0
- package/src/vendor/@dnd-kit/react/index.js +617 -0
- package/src/vendor/@dnd-kit/react/package.json +80 -0
- package/src/vendor/@dnd-kit/react/sortable.d.ts +26 -0
- package/src/vendor/@dnd-kit/react/sortable.js +175 -0
- package/src/vendor/@dnd-kit/react/utilities.d.ts +7 -0
- package/src/vendor/@dnd-kit/react/utilities.js +18 -0
- package/src/vendor/@dnd-kit/state/dist/index.d.ts +54 -0
- package/src/vendor/@dnd-kit/state/dist/index.js +328 -0
- package/src/vendor/@dnd-kit/state/package.json +33 -0
- package/src/vendor/@preact/signals-core/dist/signals-core.js +1 -0
- package/src/vendor/@preact/signals-core/dist/signals-core.js.map +1 -0
- package/src/vendor/@preact/signals-core/package.json +4 -0
- package/src/vendor/tslib/CopyrightNotice.txt +15 -0
- package/src/vendor/tslib/LICENSE.txt +12 -0
- package/src/vendor/tslib/README.md +164 -0
- package/src/vendor/tslib/SECURITY.md +41 -0
- package/src/vendor/tslib/modules/index.d.ts +38 -0
- package/src/vendor/tslib/modules/index.js +70 -0
- package/src/vendor/tslib/modules/package.json +3 -0
- package/src/vendor/tslib/package.json +47 -0
- package/src/vendor/tslib/tslib.d.ts +460 -0
- package/src/vendor/tslib/tslib.es6.html +1 -0
- package/src/vendor/tslib/tslib.es6.js +402 -0
- package/src/vendor/tslib/tslib.es6.mjs +401 -0
- package/src/vendor/tslib/tslib.html +1 -0
- package/src/vendor/tslib/tslib.js +484 -0
|
@@ -0,0 +1,1977 @@
|
|
|
1
|
+
import { configurator, Sensor, Plugin, CorePlugin, DragDropManager as DragDropManager$1, Draggable as Draggable$1, Droppable as Droppable$1, descriptor } from '../abstract/index.js';
|
|
2
|
+
import { ScrollDirection, Listeners, isElement, scrollIntoViewIfNeeded, DOMRectangle, getDocument, isHTMLElement, getFrameTransform, scheduler, isTextInput, isKeyboardEvent, isPointerEvent, canScroll, detectScrollIntent, getElementFromPoint, getScrollableAncestors, generateUniqueId, isSafari, Styles, getComputedStyles, parseTranslate, supportsPopover, showPopover, getWindow, supportsStyle, getFrameElement, cloneElement, getFinalKeyframe, animateTransform, ProxiedElements, PositionObserver } from './utilities.js';
|
|
3
|
+
import { effect, computed, deepEqual, signal, batch, untracked, effects, reactive } from '../state/dist/index.js';
|
|
4
|
+
import { exceedsDistance, Axes, Point, Rectangle } from '../geometry/dist/index.js';
|
|
5
|
+
import { defaultCollisionDetection } from '../collision/dist/index.js';
|
|
6
|
+
|
|
7
|
+
var __create = Object.create;
|
|
8
|
+
var __defProp = Object.defineProperty;
|
|
9
|
+
var __defProps = Object.defineProperties;
|
|
10
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
11
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
12
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
13
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
14
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
15
|
+
var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
|
|
16
|
+
var __typeError = (msg) => {
|
|
17
|
+
throw TypeError(msg);
|
|
18
|
+
};
|
|
19
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
20
|
+
var __spreadValues = (a, b) => {
|
|
21
|
+
for (var prop in b || (b = {}))
|
|
22
|
+
if (__hasOwnProp.call(b, prop))
|
|
23
|
+
__defNormalProp(a, prop, b[prop]);
|
|
24
|
+
if (__getOwnPropSymbols)
|
|
25
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
26
|
+
if (__propIsEnum.call(b, prop))
|
|
27
|
+
__defNormalProp(a, prop, b[prop]);
|
|
28
|
+
}
|
|
29
|
+
return a;
|
|
30
|
+
};
|
|
31
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
32
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
33
|
+
var __objRest = (source, exclude) => {
|
|
34
|
+
var target = {};
|
|
35
|
+
for (var prop in source)
|
|
36
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
37
|
+
target[prop] = source[prop];
|
|
38
|
+
if (source != null && __getOwnPropSymbols)
|
|
39
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
40
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
41
|
+
target[prop] = source[prop];
|
|
42
|
+
}
|
|
43
|
+
return target;
|
|
44
|
+
};
|
|
45
|
+
var __decoratorStart = (base) => {
|
|
46
|
+
var _a4;
|
|
47
|
+
return [, , , __create((_a4 = base == null ? void 0 : base[__knownSymbol("metadata")]) != null ? _a4 : null)];
|
|
48
|
+
};
|
|
49
|
+
var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
|
|
50
|
+
var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
|
|
51
|
+
var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
|
|
52
|
+
var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
|
|
53
|
+
var __runInitializers = (array, flags, self, value) => {
|
|
54
|
+
for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
|
|
55
|
+
return value;
|
|
56
|
+
};
|
|
57
|
+
var __decorateElement = (array, flags, name, decorators, target, extra) => {
|
|
58
|
+
var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
|
|
59
|
+
var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
|
|
60
|
+
var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
|
|
61
|
+
var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
|
|
62
|
+
return __privateGet(this, extra);
|
|
63
|
+
}, set [name](x) {
|
|
64
|
+
return __privateSet(this, extra, x);
|
|
65
|
+
} }, name));
|
|
66
|
+
k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
|
|
67
|
+
for (var i = decorators.length - 1; i >= 0; i--) {
|
|
68
|
+
ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
|
|
69
|
+
if (k) {
|
|
70
|
+
ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
|
|
71
|
+
if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
|
|
72
|
+
if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
|
|
73
|
+
}
|
|
74
|
+
it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
|
|
75
|
+
if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
|
|
76
|
+
else if (typeof it !== "object" || it === null) __typeError("Object expected");
|
|
77
|
+
else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
|
|
78
|
+
}
|
|
79
|
+
return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
|
|
80
|
+
};
|
|
81
|
+
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
|
|
82
|
+
var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
|
|
83
|
+
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
84
|
+
var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
85
|
+
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
|
|
86
|
+
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
|
|
87
|
+
|
|
88
|
+
// src/core/plugins/accessibility/defaults.ts
|
|
89
|
+
var defaultAttributes = {
|
|
90
|
+
role: "button",
|
|
91
|
+
roleDescription: "draggable"};
|
|
92
|
+
var defaultDescriptionIdPrefix = `dnd-kit-description`;
|
|
93
|
+
var defaultAnnouncementIdPrefix = `dnd-kit-announcement`;
|
|
94
|
+
var defaultScreenReaderInstructions = {
|
|
95
|
+
draggable: `To pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item in a given direction. Press space again to drop the item in its new position, or press escape to cancel.`
|
|
96
|
+
};
|
|
97
|
+
var defaultAnnouncements = {
|
|
98
|
+
dragstart({ operation: { source } }) {
|
|
99
|
+
if (!source) return;
|
|
100
|
+
return `Picked up draggable item ${source.id}.`;
|
|
101
|
+
},
|
|
102
|
+
dragover({ operation: { source, target } }) {
|
|
103
|
+
if (!source || source.id === (target == null ? void 0 : target.id)) return;
|
|
104
|
+
if (target) {
|
|
105
|
+
return `Draggable item ${source.id} was moved over droppable target ${target.id}.`;
|
|
106
|
+
}
|
|
107
|
+
return `Draggable item ${source.id} is no longer over a droppable target.`;
|
|
108
|
+
},
|
|
109
|
+
dragend({ operation: { source, target }, canceled }) {
|
|
110
|
+
if (!source) return;
|
|
111
|
+
if (canceled) {
|
|
112
|
+
return `Dragging was cancelled. Draggable item ${source.id} was dropped.`;
|
|
113
|
+
}
|
|
114
|
+
if (target) {
|
|
115
|
+
return `Draggable item ${source.id} was dropped over droppable target ${target.id}`;
|
|
116
|
+
}
|
|
117
|
+
return `Draggable item ${source.id} was dropped.`;
|
|
118
|
+
}
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
// src/core/plugins/accessibility/utilities.ts
|
|
122
|
+
function isFocusable(element) {
|
|
123
|
+
const tagName = element.tagName.toLowerCase();
|
|
124
|
+
return ["input", "select", "textarea", "a", "button"].includes(tagName);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
// src/core/plugins/accessibility/HiddenText.ts
|
|
128
|
+
function createHiddenText(id, value) {
|
|
129
|
+
const element = document.createElement("div");
|
|
130
|
+
element.id = id;
|
|
131
|
+
element.style.setProperty("display", "none");
|
|
132
|
+
element.textContent = value;
|
|
133
|
+
return element;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
// src/core/plugins/accessibility/LiveRegion.ts
|
|
137
|
+
function createLiveRegion(id) {
|
|
138
|
+
const element = document.createElement("div");
|
|
139
|
+
element.id = id;
|
|
140
|
+
element.setAttribute("role", "status");
|
|
141
|
+
element.setAttribute("aria-live", "polite");
|
|
142
|
+
element.setAttribute("aria-atomic", "true");
|
|
143
|
+
element.style.setProperty("position", "fixed");
|
|
144
|
+
element.style.setProperty("width", "1px");
|
|
145
|
+
element.style.setProperty("height", "1px");
|
|
146
|
+
element.style.setProperty("margin", "-1px");
|
|
147
|
+
element.style.setProperty("border", "0");
|
|
148
|
+
element.style.setProperty("padding", "0");
|
|
149
|
+
element.style.setProperty("overflow", "hidden");
|
|
150
|
+
element.style.setProperty("clip", "rect(0 0 0 0)");
|
|
151
|
+
element.style.setProperty("clip-path", "inset(100%)");
|
|
152
|
+
element.style.setProperty("white-space", "nowrap");
|
|
153
|
+
return element;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
// src/core/plugins/accessibility/Accessibility.ts
|
|
157
|
+
var debouncedEvents = ["dragover", "dragmove"];
|
|
158
|
+
var Accessibility = class extends Plugin {
|
|
159
|
+
constructor(manager, options) {
|
|
160
|
+
super(manager);
|
|
161
|
+
const {
|
|
162
|
+
id,
|
|
163
|
+
idPrefix: {
|
|
164
|
+
description: descriptionPrefix = defaultDescriptionIdPrefix,
|
|
165
|
+
announcement: announcementPrefix = defaultAnnouncementIdPrefix
|
|
166
|
+
} = {},
|
|
167
|
+
announcements = defaultAnnouncements,
|
|
168
|
+
screenReaderInstructions = defaultScreenReaderInstructions,
|
|
169
|
+
debounce: debounceMs = 500
|
|
170
|
+
} = options != null ? options : {};
|
|
171
|
+
const descriptionId = id ? `${descriptionPrefix}-${id}` : generateUniqueId(descriptionPrefix);
|
|
172
|
+
const announcementId = id ? `${announcementPrefix}-${id}` : generateUniqueId(announcementPrefix);
|
|
173
|
+
let hiddenTextElement;
|
|
174
|
+
let liveRegionElement;
|
|
175
|
+
let liveRegionTextNode;
|
|
176
|
+
let latestAnnouncement;
|
|
177
|
+
const updateAnnouncement = (value = latestAnnouncement) => {
|
|
178
|
+
if (!liveRegionTextNode || !value) return;
|
|
179
|
+
if ((liveRegionTextNode == null ? void 0 : liveRegionTextNode.nodeValue) !== value) {
|
|
180
|
+
liveRegionTextNode.nodeValue = value;
|
|
181
|
+
}
|
|
182
|
+
};
|
|
183
|
+
const scheduleUpdateAnnouncement = () => scheduler.schedule(updateAnnouncement);
|
|
184
|
+
const debouncedUpdateAnnouncement = debounce(
|
|
185
|
+
scheduleUpdateAnnouncement,
|
|
186
|
+
debounceMs
|
|
187
|
+
);
|
|
188
|
+
const eventListeners = Object.entries(announcements).map(
|
|
189
|
+
([eventName, getAnnouncement]) => {
|
|
190
|
+
return this.manager.monitor.addEventListener(
|
|
191
|
+
eventName,
|
|
192
|
+
(event, manager2) => {
|
|
193
|
+
const element = liveRegionTextNode;
|
|
194
|
+
if (!element) return;
|
|
195
|
+
const announcement = getAnnouncement == null ? void 0 : getAnnouncement(event, manager2);
|
|
196
|
+
if (announcement && element.nodeValue !== announcement) {
|
|
197
|
+
latestAnnouncement = announcement;
|
|
198
|
+
if (debouncedEvents.includes(eventName)) {
|
|
199
|
+
debouncedUpdateAnnouncement();
|
|
200
|
+
} else {
|
|
201
|
+
scheduleUpdateAnnouncement();
|
|
202
|
+
debouncedUpdateAnnouncement.cancel();
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
);
|
|
207
|
+
}
|
|
208
|
+
);
|
|
209
|
+
const initialize = () => {
|
|
210
|
+
let elements = [];
|
|
211
|
+
if (!(hiddenTextElement == null ? void 0 : hiddenTextElement.isConnected)) {
|
|
212
|
+
hiddenTextElement = createHiddenText(
|
|
213
|
+
descriptionId,
|
|
214
|
+
screenReaderInstructions.draggable
|
|
215
|
+
);
|
|
216
|
+
elements.push(hiddenTextElement);
|
|
217
|
+
}
|
|
218
|
+
if (!(liveRegionElement == null ? void 0 : liveRegionElement.isConnected)) {
|
|
219
|
+
liveRegionElement = createLiveRegion(announcementId);
|
|
220
|
+
liveRegionTextNode = document.createTextNode("");
|
|
221
|
+
liveRegionElement.appendChild(liveRegionTextNode);
|
|
222
|
+
elements.push(liveRegionElement);
|
|
223
|
+
}
|
|
224
|
+
if (elements.length > 0) {
|
|
225
|
+
document.body.append(...elements);
|
|
226
|
+
}
|
|
227
|
+
};
|
|
228
|
+
const mutations = /* @__PURE__ */ new Set();
|
|
229
|
+
function executeMutations() {
|
|
230
|
+
for (const operation of mutations) {
|
|
231
|
+
operation();
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
this.registerEffect(() => {
|
|
235
|
+
var _a4;
|
|
236
|
+
mutations.clear();
|
|
237
|
+
for (const draggable of this.manager.registry.draggables.value) {
|
|
238
|
+
const activator = (_a4 = draggable.handle) != null ? _a4 : draggable.element;
|
|
239
|
+
if (activator) {
|
|
240
|
+
if (!hiddenTextElement || !liveRegionElement) {
|
|
241
|
+
mutations.add(initialize);
|
|
242
|
+
}
|
|
243
|
+
if ((!isFocusable(activator) || isSafari()) && !activator.hasAttribute("tabindex")) {
|
|
244
|
+
mutations.add(() => activator.setAttribute("tabindex", "0"));
|
|
245
|
+
}
|
|
246
|
+
if (!activator.hasAttribute("role") && !(activator.tagName.toLowerCase() === "button")) {
|
|
247
|
+
mutations.add(
|
|
248
|
+
() => activator.setAttribute("role", defaultAttributes.role)
|
|
249
|
+
);
|
|
250
|
+
}
|
|
251
|
+
if (!activator.hasAttribute("aria-roledescription")) {
|
|
252
|
+
mutations.add(
|
|
253
|
+
() => activator.setAttribute(
|
|
254
|
+
"aria-roledescription",
|
|
255
|
+
defaultAttributes.roleDescription
|
|
256
|
+
)
|
|
257
|
+
);
|
|
258
|
+
}
|
|
259
|
+
if (!activator.hasAttribute("aria-describedby")) {
|
|
260
|
+
mutations.add(
|
|
261
|
+
() => activator.setAttribute("aria-describedby", descriptionId)
|
|
262
|
+
);
|
|
263
|
+
}
|
|
264
|
+
for (const key of ["aria-pressed", "aria-grabbed"]) {
|
|
265
|
+
const value = String(draggable.isDragging);
|
|
266
|
+
if (activator.getAttribute(key) !== value) {
|
|
267
|
+
mutations.add(() => activator.setAttribute(key, value));
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
const disabled = String(draggable.disabled);
|
|
271
|
+
if (activator.getAttribute("aria-disabled") !== disabled) {
|
|
272
|
+
mutations.add(
|
|
273
|
+
() => activator.setAttribute("aria-disabled", disabled)
|
|
274
|
+
);
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
if (mutations.size > 0) {
|
|
279
|
+
scheduler.schedule(executeMutations);
|
|
280
|
+
}
|
|
281
|
+
});
|
|
282
|
+
this.destroy = () => {
|
|
283
|
+
super.destroy();
|
|
284
|
+
hiddenTextElement == null ? void 0 : hiddenTextElement.remove();
|
|
285
|
+
liveRegionElement == null ? void 0 : liveRegionElement.remove();
|
|
286
|
+
eventListeners.forEach((unsubscribe) => unsubscribe());
|
|
287
|
+
};
|
|
288
|
+
}
|
|
289
|
+
};
|
|
290
|
+
function debounce(fn, wait) {
|
|
291
|
+
let timeout;
|
|
292
|
+
const debounced = () => {
|
|
293
|
+
clearTimeout(timeout);
|
|
294
|
+
timeout = setTimeout(fn, wait);
|
|
295
|
+
};
|
|
296
|
+
debounced.cancel = () => clearTimeout(timeout);
|
|
297
|
+
return debounced;
|
|
298
|
+
}
|
|
299
|
+
var Cursor = class extends Plugin {
|
|
300
|
+
constructor(manager, options) {
|
|
301
|
+
super(manager, options);
|
|
302
|
+
this.manager = manager;
|
|
303
|
+
const doc = computed(
|
|
304
|
+
() => {
|
|
305
|
+
var _a4;
|
|
306
|
+
return getDocument((_a4 = this.manager.dragOperation.source) == null ? void 0 : _a4.element);
|
|
307
|
+
}
|
|
308
|
+
);
|
|
309
|
+
this.destroy = effect(() => {
|
|
310
|
+
var _a4;
|
|
311
|
+
const { dragOperation } = this.manager;
|
|
312
|
+
const { cursor = "grabbing", nonce } = (_a4 = this.options) != null ? _a4 : {};
|
|
313
|
+
if (dragOperation.status.initialized) {
|
|
314
|
+
const document2 = doc.value;
|
|
315
|
+
const style = document2.createElement("style");
|
|
316
|
+
if (nonce) {
|
|
317
|
+
style.setAttribute("nonce", nonce);
|
|
318
|
+
}
|
|
319
|
+
style.textContent = `* { cursor: ${cursor} !important; }`;
|
|
320
|
+
document2.head.appendChild(style);
|
|
321
|
+
return () => style.remove();
|
|
322
|
+
}
|
|
323
|
+
});
|
|
324
|
+
}
|
|
325
|
+
};
|
|
326
|
+
|
|
327
|
+
// src/core/plugins/feedback/constants.ts
|
|
328
|
+
var ATTR_PREFIX = "data-dnd-";
|
|
329
|
+
var DROPPING_ATTRIBUTE = `${ATTR_PREFIX}dropping`;
|
|
330
|
+
var CSS_PREFIX = "--dnd-";
|
|
331
|
+
var ATTRIBUTE = `${ATTR_PREFIX}dragging`;
|
|
332
|
+
var PLACEHOLDER_ATTRIBUTE = `${ATTR_PREFIX}placeholder`;
|
|
333
|
+
var IGNORED_ATTRIBUTES = [
|
|
334
|
+
ATTRIBUTE,
|
|
335
|
+
PLACEHOLDER_ATTRIBUTE,
|
|
336
|
+
"popover",
|
|
337
|
+
"aria-pressed",
|
|
338
|
+
"aria-grabbing"
|
|
339
|
+
];
|
|
340
|
+
var IGNORED_STYLES = ["view-transition-name"];
|
|
341
|
+
var CSS_RULES = `
|
|
342
|
+
:root [${ATTRIBUTE}] {
|
|
343
|
+
position: fixed !important;
|
|
344
|
+
pointer-events: none !important;
|
|
345
|
+
touch-action: none;
|
|
346
|
+
z-index: calc(infinity);
|
|
347
|
+
will-change: translate;
|
|
348
|
+
top: var(${CSS_PREFIX}top, 0px) !important;
|
|
349
|
+
left: var(${CSS_PREFIX}left, 0px) !important;
|
|
350
|
+
right: unset !important;
|
|
351
|
+
bottom: unset !important;
|
|
352
|
+
width: var(${CSS_PREFIX}width, auto);
|
|
353
|
+
max-width: var(${CSS_PREFIX}width, auto);
|
|
354
|
+
height: var(${CSS_PREFIX}height, auto);
|
|
355
|
+
max-height: var(${CSS_PREFIX}height, auto);
|
|
356
|
+
transition: var(${CSS_PREFIX}transition) !important;
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
:root [${PLACEHOLDER_ATTRIBUTE}] {
|
|
360
|
+
transition: none;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
:root [${PLACEHOLDER_ATTRIBUTE}='hidden'] {
|
|
364
|
+
visibility: hidden;
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
[${ATTRIBUTE}] * {
|
|
368
|
+
pointer-events: none !important;
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
[${ATTRIBUTE}]:not([${DROPPING_ATTRIBUTE}]) {
|
|
372
|
+
translate: var(${CSS_PREFIX}translate) !important;
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
[${ATTRIBUTE}][style*='${CSS_PREFIX}scale'] {
|
|
376
|
+
scale: var(${CSS_PREFIX}scale) !important;
|
|
377
|
+
transform-origin: var(${CSS_PREFIX}transform-origin) !important;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
@layer {
|
|
381
|
+
:where([${ATTRIBUTE}][popover]) {
|
|
382
|
+
overflow: visible;
|
|
383
|
+
background: unset;
|
|
384
|
+
border: unset;
|
|
385
|
+
margin: unset;
|
|
386
|
+
padding: unset;
|
|
387
|
+
color: inherit;
|
|
388
|
+
|
|
389
|
+
&:is(input, button) {
|
|
390
|
+
border: revert;
|
|
391
|
+
background: revert;
|
|
392
|
+
}
|
|
393
|
+
}
|
|
394
|
+
}
|
|
395
|
+
[${ATTRIBUTE}]::backdrop, [${ATTR_PREFIX}overlay]:not([${ATTRIBUTE}]) {
|
|
396
|
+
display: none;
|
|
397
|
+
visibility: hidden;
|
|
398
|
+
}
|
|
399
|
+
`.replace(/\n+/g, " ").replace(/\s+/g, " ").trim();
|
|
400
|
+
function createPlaceholder(source, type = "hidden") {
|
|
401
|
+
return untracked(() => {
|
|
402
|
+
const { element, manager } = source;
|
|
403
|
+
if (!element || !manager) return;
|
|
404
|
+
const containedDroppables = findContainedDroppables(
|
|
405
|
+
element,
|
|
406
|
+
manager.registry.droppables
|
|
407
|
+
);
|
|
408
|
+
const cleanup = [];
|
|
409
|
+
const placeholder = cloneElement(element);
|
|
410
|
+
const { remove } = placeholder;
|
|
411
|
+
proxyDroppableElements(containedDroppables, placeholder, cleanup);
|
|
412
|
+
configurePlaceholder(placeholder, type);
|
|
413
|
+
placeholder.remove = () => {
|
|
414
|
+
cleanup.forEach((fn) => fn());
|
|
415
|
+
remove.call(placeholder);
|
|
416
|
+
};
|
|
417
|
+
return placeholder;
|
|
418
|
+
});
|
|
419
|
+
}
|
|
420
|
+
function findContainedDroppables(element, droppables) {
|
|
421
|
+
const containedDroppables = /* @__PURE__ */ new Map();
|
|
422
|
+
for (const droppable of droppables) {
|
|
423
|
+
if (!droppable.element) continue;
|
|
424
|
+
if (element === droppable.element || element.contains(droppable.element)) {
|
|
425
|
+
const identifierAttribute = `${ATTR_PREFIX}${generateUniqueId("dom-id")}`;
|
|
426
|
+
droppable.element.setAttribute(identifierAttribute, "");
|
|
427
|
+
containedDroppables.set(droppable, identifierAttribute);
|
|
428
|
+
}
|
|
429
|
+
}
|
|
430
|
+
return containedDroppables;
|
|
431
|
+
}
|
|
432
|
+
function proxyDroppableElements(containedDroppables, placeholder, cleanup) {
|
|
433
|
+
for (const [droppable, identifierAttribute] of containedDroppables) {
|
|
434
|
+
if (!droppable.element) continue;
|
|
435
|
+
const selector = `[${identifierAttribute}]`;
|
|
436
|
+
const clonedElement = placeholder.matches(selector) ? placeholder : placeholder.querySelector(selector);
|
|
437
|
+
droppable.element.removeAttribute(identifierAttribute);
|
|
438
|
+
if (!clonedElement) continue;
|
|
439
|
+
const originalElement = droppable.element;
|
|
440
|
+
droppable.proxy = clonedElement;
|
|
441
|
+
clonedElement.removeAttribute(identifierAttribute);
|
|
442
|
+
ProxiedElements.set(originalElement, clonedElement);
|
|
443
|
+
cleanup.push(() => {
|
|
444
|
+
ProxiedElements.delete(originalElement);
|
|
445
|
+
droppable.proxy = void 0;
|
|
446
|
+
});
|
|
447
|
+
}
|
|
448
|
+
}
|
|
449
|
+
function configurePlaceholder(placeholder, type = "hidden") {
|
|
450
|
+
placeholder.setAttribute("inert", "true");
|
|
451
|
+
placeholder.setAttribute("tab-index", "-1");
|
|
452
|
+
placeholder.setAttribute("aria-hidden", "true");
|
|
453
|
+
placeholder.setAttribute(PLACEHOLDER_ATTRIBUTE, type);
|
|
454
|
+
}
|
|
455
|
+
function isSameFrame(element, target) {
|
|
456
|
+
if (element === target) return true;
|
|
457
|
+
return getFrameElement(element) === getFrameElement(target);
|
|
458
|
+
}
|
|
459
|
+
function preventPopoverClose(event) {
|
|
460
|
+
const { target } = event;
|
|
461
|
+
if ("newState" in event && event.newState === "closed" && isElement(target) && target.hasAttribute("popover")) {
|
|
462
|
+
requestAnimationFrame(() => showPopover(target));
|
|
463
|
+
}
|
|
464
|
+
}
|
|
465
|
+
function isTableRow(element) {
|
|
466
|
+
return element.tagName === "TR";
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
// src/core/plugins/feedback/Feedback.ts
|
|
470
|
+
var styleSheetRegistry = /* @__PURE__ */ new Map();
|
|
471
|
+
var _overlay_dec, _a, _init, _overlay, _Feedback_instances, render_fn, injectStyles_fn;
|
|
472
|
+
var _Feedback = class _Feedback extends (_a = Plugin, _overlay_dec = [reactive], _a) {
|
|
473
|
+
constructor(manager, options) {
|
|
474
|
+
super(manager, options);
|
|
475
|
+
__privateAdd(this, _Feedback_instances);
|
|
476
|
+
__privateAdd(this, _overlay, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
|
|
477
|
+
this.state = {
|
|
478
|
+
initial: {},
|
|
479
|
+
current: {}
|
|
480
|
+
};
|
|
481
|
+
this.registerEffect(__privateMethod(this, _Feedback_instances, injectStyles_fn));
|
|
482
|
+
this.registerEffect(__privateMethod(this, _Feedback_instances, render_fn));
|
|
483
|
+
}
|
|
484
|
+
destroy() {
|
|
485
|
+
super.destroy();
|
|
486
|
+
for (const [doc, registration] of styleSheetRegistry.entries()) {
|
|
487
|
+
if (registration.instances.has(this)) {
|
|
488
|
+
registration.instances.delete(this);
|
|
489
|
+
if (registration.instances.size === 0) {
|
|
490
|
+
registration.cleanup();
|
|
491
|
+
styleSheetRegistry.delete(doc);
|
|
492
|
+
}
|
|
493
|
+
}
|
|
494
|
+
}
|
|
495
|
+
}
|
|
496
|
+
};
|
|
497
|
+
_init = __decoratorStart(_a);
|
|
498
|
+
_overlay = new WeakMap();
|
|
499
|
+
_Feedback_instances = new WeakSet();
|
|
500
|
+
render_fn = function() {
|
|
501
|
+
var _a4, _b2, _c3;
|
|
502
|
+
const { state, manager, options } = this;
|
|
503
|
+
const { dragOperation } = manager;
|
|
504
|
+
const { position, source, status } = dragOperation;
|
|
505
|
+
if (status.idle) {
|
|
506
|
+
state.current = {};
|
|
507
|
+
state.initial = {};
|
|
508
|
+
return;
|
|
509
|
+
}
|
|
510
|
+
if (!source) return;
|
|
511
|
+
const { element, feedback } = source;
|
|
512
|
+
if (!element || feedback === "none" || !status.initialized || status.initializing) {
|
|
513
|
+
return;
|
|
514
|
+
}
|
|
515
|
+
const { initial } = state;
|
|
516
|
+
const feedbackElement = (_a4 = this.overlay) != null ? _a4 : element;
|
|
517
|
+
const frameTransform = getFrameTransform(feedbackElement);
|
|
518
|
+
const elementFrameTransform = getFrameTransform(element);
|
|
519
|
+
const crossFrame = !isSameFrame(element, feedbackElement);
|
|
520
|
+
const shape = new DOMRectangle(element, {
|
|
521
|
+
frameTransform: crossFrame ? elementFrameTransform : null,
|
|
522
|
+
ignoreTransforms: !crossFrame
|
|
523
|
+
});
|
|
524
|
+
const scaleDelta = {
|
|
525
|
+
x: elementFrameTransform.scaleX / frameTransform.scaleX,
|
|
526
|
+
y: elementFrameTransform.scaleY / frameTransform.scaleY
|
|
527
|
+
};
|
|
528
|
+
let { width, height, top, left } = shape;
|
|
529
|
+
if (crossFrame) {
|
|
530
|
+
width = width / scaleDelta.x;
|
|
531
|
+
height = height / scaleDelta.y;
|
|
532
|
+
}
|
|
533
|
+
let elementMutationObserver;
|
|
534
|
+
let documentMutationObserver;
|
|
535
|
+
const styles = new Styles(feedbackElement);
|
|
536
|
+
const {
|
|
537
|
+
transition,
|
|
538
|
+
translate,
|
|
539
|
+
boxSizing,
|
|
540
|
+
paddingBlockStart,
|
|
541
|
+
paddingBlockEnd,
|
|
542
|
+
paddingInlineStart,
|
|
543
|
+
paddingInlineEnd,
|
|
544
|
+
borderInlineStartWidth,
|
|
545
|
+
borderInlineEndWidth,
|
|
546
|
+
borderBlockStartWidth,
|
|
547
|
+
borderBlockEndWidth
|
|
548
|
+
} = getComputedStyles(element);
|
|
549
|
+
const clone = feedback === "clone";
|
|
550
|
+
const contentBox = boxSizing === "content-box";
|
|
551
|
+
const widthOffset = contentBox ? parseInt(paddingInlineStart) + parseInt(paddingInlineEnd) + parseInt(borderInlineStartWidth) + parseInt(borderInlineEndWidth) : 0;
|
|
552
|
+
const heightOffset = contentBox ? parseInt(paddingBlockStart) + parseInt(paddingBlockEnd) + parseInt(borderBlockStartWidth) + parseInt(borderBlockEndWidth) : 0;
|
|
553
|
+
const placeholder = feedback !== "move" && !this.overlay ? createPlaceholder(source, clone ? "clone" : "hidden") : null;
|
|
554
|
+
const isKeyboardOperation = untracked(
|
|
555
|
+
() => isKeyboardEvent(manager.dragOperation.activatorEvent)
|
|
556
|
+
);
|
|
557
|
+
if (translate !== "none") {
|
|
558
|
+
const parsedTranslate = parseTranslate(translate);
|
|
559
|
+
if (parsedTranslate && !initial.translate) {
|
|
560
|
+
initial.translate = parsedTranslate;
|
|
561
|
+
}
|
|
562
|
+
}
|
|
563
|
+
if (!initial.transformOrigin) {
|
|
564
|
+
const current = untracked(() => position.current);
|
|
565
|
+
initial.transformOrigin = {
|
|
566
|
+
x: (current.x - left * frameTransform.scaleX - frameTransform.x) / (width * frameTransform.scaleX),
|
|
567
|
+
y: (current.y - top * frameTransform.scaleY - frameTransform.y) / (height * frameTransform.scaleY)
|
|
568
|
+
};
|
|
569
|
+
}
|
|
570
|
+
const { transformOrigin } = initial;
|
|
571
|
+
const relativeTop = top * frameTransform.scaleY + frameTransform.y;
|
|
572
|
+
const relativeLeft = left * frameTransform.scaleX + frameTransform.x;
|
|
573
|
+
if (!initial.coordinates) {
|
|
574
|
+
initial.coordinates = {
|
|
575
|
+
x: relativeLeft,
|
|
576
|
+
y: relativeTop
|
|
577
|
+
};
|
|
578
|
+
if (scaleDelta.x !== 1 || scaleDelta.y !== 1) {
|
|
579
|
+
const { scaleX, scaleY } = elementFrameTransform;
|
|
580
|
+
const { x: tX2, y: tY2 } = transformOrigin;
|
|
581
|
+
initial.coordinates.x += (width * scaleX - width) * tX2;
|
|
582
|
+
initial.coordinates.y += (height * scaleY - height) * tY2;
|
|
583
|
+
}
|
|
584
|
+
}
|
|
585
|
+
if (!initial.dimensions) {
|
|
586
|
+
initial.dimensions = { width, height };
|
|
587
|
+
}
|
|
588
|
+
if (!initial.frameTransform) {
|
|
589
|
+
initial.frameTransform = frameTransform;
|
|
590
|
+
}
|
|
591
|
+
const coordinatesDelta = {
|
|
592
|
+
x: initial.coordinates.x - relativeLeft,
|
|
593
|
+
y: initial.coordinates.y - relativeTop
|
|
594
|
+
};
|
|
595
|
+
const sizeDelta = {
|
|
596
|
+
width: (initial.dimensions.width * initial.frameTransform.scaleX - width * frameTransform.scaleX) * transformOrigin.x,
|
|
597
|
+
height: (initial.dimensions.height * initial.frameTransform.scaleY - height * frameTransform.scaleY) * transformOrigin.y
|
|
598
|
+
};
|
|
599
|
+
const delta = {
|
|
600
|
+
x: coordinatesDelta.x / frameTransform.scaleX + sizeDelta.width,
|
|
601
|
+
y: coordinatesDelta.y / frameTransform.scaleY + sizeDelta.height
|
|
602
|
+
};
|
|
603
|
+
const projected = {
|
|
604
|
+
left: left + delta.x,
|
|
605
|
+
top: top + delta.y
|
|
606
|
+
};
|
|
607
|
+
feedbackElement.setAttribute(ATTRIBUTE, "true");
|
|
608
|
+
const transform = untracked(() => dragOperation.transform);
|
|
609
|
+
const initialTranslate = (_b2 = initial.translate) != null ? _b2 : { x: 0, y: 0 };
|
|
610
|
+
const tX = transform.x * frameTransform.scaleX + initialTranslate.x;
|
|
611
|
+
const tY = transform.y * frameTransform.scaleY + initialTranslate.y;
|
|
612
|
+
const translateString = `${tX}px ${tY}px 0`;
|
|
613
|
+
const transitionString = transition ? `${transition}, translate 0ms linear` : "";
|
|
614
|
+
styles.set(
|
|
615
|
+
{
|
|
616
|
+
width: width - widthOffset,
|
|
617
|
+
height: height - heightOffset,
|
|
618
|
+
top: projected.top,
|
|
619
|
+
left: projected.left,
|
|
620
|
+
translate: translateString,
|
|
621
|
+
transition: transitionString,
|
|
622
|
+
scale: crossFrame ? `${scaleDelta.x} ${scaleDelta.y}` : "",
|
|
623
|
+
"transform-origin": `${transformOrigin.x * 100}% ${transformOrigin.y * 100}%`
|
|
624
|
+
},
|
|
625
|
+
CSS_PREFIX
|
|
626
|
+
);
|
|
627
|
+
if (placeholder) {
|
|
628
|
+
element.insertAdjacentElement("afterend", placeholder);
|
|
629
|
+
if (options == null ? void 0 : options.rootElement) {
|
|
630
|
+
const root = typeof options.rootElement === "function" ? options.rootElement(source) : options.rootElement;
|
|
631
|
+
root.appendChild(element);
|
|
632
|
+
}
|
|
633
|
+
}
|
|
634
|
+
if (supportsPopover(feedbackElement)) {
|
|
635
|
+
if (!feedbackElement.hasAttribute("popover")) {
|
|
636
|
+
feedbackElement.setAttribute("popover", "manual");
|
|
637
|
+
}
|
|
638
|
+
showPopover(feedbackElement);
|
|
639
|
+
feedbackElement.addEventListener("beforetoggle", preventPopoverClose);
|
|
640
|
+
}
|
|
641
|
+
const resizeObserver = new ResizeObserver(() => {
|
|
642
|
+
if (!placeholder) return;
|
|
643
|
+
const placeholderShape = new DOMRectangle(placeholder, {
|
|
644
|
+
frameTransform,
|
|
645
|
+
ignoreTransforms: true
|
|
646
|
+
});
|
|
647
|
+
const origin = transformOrigin != null ? transformOrigin : { x: 1, y: 1 };
|
|
648
|
+
const dX = (width - placeholderShape.width) * origin.x + delta.x;
|
|
649
|
+
const dY = (height - placeholderShape.height) * origin.y + delta.y;
|
|
650
|
+
styles.set(
|
|
651
|
+
{
|
|
652
|
+
width: placeholderShape.width - widthOffset,
|
|
653
|
+
height: placeholderShape.height - heightOffset,
|
|
654
|
+
top: top + dY,
|
|
655
|
+
left: left + dX
|
|
656
|
+
},
|
|
657
|
+
CSS_PREFIX
|
|
658
|
+
);
|
|
659
|
+
elementMutationObserver == null ? void 0 : elementMutationObserver.takeRecords();
|
|
660
|
+
if (isTableRow(element) && isTableRow(placeholder)) {
|
|
661
|
+
const cells = Array.from(element.cells);
|
|
662
|
+
const placeholderCells = Array.from(placeholder.cells);
|
|
663
|
+
for (const [index, cell] of cells.entries()) {
|
|
664
|
+
const placeholderCell = placeholderCells[index];
|
|
665
|
+
cell.style.width = `${placeholderCell.offsetWidth}px`;
|
|
666
|
+
}
|
|
667
|
+
}
|
|
668
|
+
dragOperation.shape = new DOMRectangle(feedbackElement);
|
|
669
|
+
});
|
|
670
|
+
const initialShape = new DOMRectangle(feedbackElement);
|
|
671
|
+
untracked(() => dragOperation.shape = initialShape);
|
|
672
|
+
const feedbackWindow = getWindow(feedbackElement);
|
|
673
|
+
const handleWindowResize = (event) => {
|
|
674
|
+
this.manager.actions.stop({ event });
|
|
675
|
+
};
|
|
676
|
+
if (isKeyboardOperation) {
|
|
677
|
+
feedbackWindow.addEventListener("resize", handleWindowResize);
|
|
678
|
+
}
|
|
679
|
+
if (untracked(() => source.status) === "idle") {
|
|
680
|
+
requestAnimationFrame(() => source.status = "dragging");
|
|
681
|
+
}
|
|
682
|
+
if (placeholder) {
|
|
683
|
+
resizeObserver.observe(placeholder);
|
|
684
|
+
elementMutationObserver = new MutationObserver((mutations) => {
|
|
685
|
+
let hasChildrenMutations = false;
|
|
686
|
+
for (const mutation of mutations) {
|
|
687
|
+
if (mutation.target !== element) {
|
|
688
|
+
hasChildrenMutations = true;
|
|
689
|
+
continue;
|
|
690
|
+
}
|
|
691
|
+
if (mutation.type !== "attributes") {
|
|
692
|
+
continue;
|
|
693
|
+
}
|
|
694
|
+
const attributeName = mutation.attributeName;
|
|
695
|
+
if (attributeName.startsWith("aria-") || IGNORED_ATTRIBUTES.includes(attributeName)) {
|
|
696
|
+
continue;
|
|
697
|
+
}
|
|
698
|
+
const attributeValue = element.getAttribute(attributeName);
|
|
699
|
+
if (attributeName === "style") {
|
|
700
|
+
if (supportsStyle(element) && supportsStyle(placeholder)) {
|
|
701
|
+
const styles2 = element.style;
|
|
702
|
+
for (const key of Array.from(placeholder.style)) {
|
|
703
|
+
if (styles2.getPropertyValue(key) === "") {
|
|
704
|
+
placeholder.style.removeProperty(key);
|
|
705
|
+
}
|
|
706
|
+
}
|
|
707
|
+
for (const key of Array.from(styles2)) {
|
|
708
|
+
if (IGNORED_STYLES.includes(key) || key.startsWith(CSS_PREFIX)) {
|
|
709
|
+
continue;
|
|
710
|
+
}
|
|
711
|
+
const value = styles2.getPropertyValue(key);
|
|
712
|
+
placeholder.style.setProperty(key, value);
|
|
713
|
+
}
|
|
714
|
+
}
|
|
715
|
+
} else if (attributeValue !== null) {
|
|
716
|
+
placeholder.setAttribute(attributeName, attributeValue);
|
|
717
|
+
} else {
|
|
718
|
+
placeholder.removeAttribute(attributeName);
|
|
719
|
+
}
|
|
720
|
+
}
|
|
721
|
+
if (hasChildrenMutations && clone) {
|
|
722
|
+
placeholder.innerHTML = element.innerHTML;
|
|
723
|
+
}
|
|
724
|
+
});
|
|
725
|
+
elementMutationObserver.observe(element, {
|
|
726
|
+
attributes: true,
|
|
727
|
+
subtree: true,
|
|
728
|
+
childList: true
|
|
729
|
+
});
|
|
730
|
+
documentMutationObserver = new MutationObserver((entries) => {
|
|
731
|
+
for (const entry of entries) {
|
|
732
|
+
if (entry.addedNodes.length === 0) continue;
|
|
733
|
+
for (const node of Array.from(entry.addedNodes)) {
|
|
734
|
+
if (node.contains(element) && element.nextElementSibling !== placeholder) {
|
|
735
|
+
element.insertAdjacentElement("afterend", placeholder);
|
|
736
|
+
showPopover(feedbackElement);
|
|
737
|
+
return;
|
|
738
|
+
}
|
|
739
|
+
if (node.contains(placeholder) && placeholder.previousElementSibling !== element) {
|
|
740
|
+
placeholder.insertAdjacentElement("beforebegin", element);
|
|
741
|
+
showPopover(feedbackElement);
|
|
742
|
+
return;
|
|
743
|
+
}
|
|
744
|
+
}
|
|
745
|
+
}
|
|
746
|
+
});
|
|
747
|
+
documentMutationObserver.observe(element.ownerDocument.body, {
|
|
748
|
+
childList: true,
|
|
749
|
+
subtree: true
|
|
750
|
+
});
|
|
751
|
+
}
|
|
752
|
+
const id = (_c3 = manager.dragOperation.source) == null ? void 0 : _c3.id;
|
|
753
|
+
const restoreFocus = () => {
|
|
754
|
+
var _a5;
|
|
755
|
+
if (!isKeyboardOperation || id == null) {
|
|
756
|
+
return;
|
|
757
|
+
}
|
|
758
|
+
const draggable = manager.registry.draggables.get(id);
|
|
759
|
+
const element2 = (_a5 = draggable == null ? void 0 : draggable.handle) != null ? _a5 : draggable == null ? void 0 : draggable.element;
|
|
760
|
+
if (isHTMLElement(element2)) {
|
|
761
|
+
element2.focus();
|
|
762
|
+
}
|
|
763
|
+
};
|
|
764
|
+
const cleanup = () => {
|
|
765
|
+
elementMutationObserver == null ? void 0 : elementMutationObserver.disconnect();
|
|
766
|
+
documentMutationObserver == null ? void 0 : documentMutationObserver.disconnect();
|
|
767
|
+
resizeObserver.disconnect();
|
|
768
|
+
feedbackWindow.removeEventListener("resize", handleWindowResize);
|
|
769
|
+
if (supportsPopover(feedbackElement)) {
|
|
770
|
+
feedbackElement.removeEventListener(
|
|
771
|
+
"beforetoggle",
|
|
772
|
+
preventPopoverClose
|
|
773
|
+
);
|
|
774
|
+
feedbackElement.removeAttribute("popover");
|
|
775
|
+
}
|
|
776
|
+
feedbackElement.removeAttribute(ATTRIBUTE);
|
|
777
|
+
styles.reset();
|
|
778
|
+
source.status = "idle";
|
|
779
|
+
const moved = state.current.translate != null;
|
|
780
|
+
if (placeholder && (moved || placeholder.parentElement !== feedbackElement.parentElement) && feedbackElement.isConnected) {
|
|
781
|
+
placeholder.replaceWith(feedbackElement);
|
|
782
|
+
}
|
|
783
|
+
placeholder == null ? void 0 : placeholder.remove();
|
|
784
|
+
};
|
|
785
|
+
const cleanupEffects = effects(
|
|
786
|
+
// Update transform on move
|
|
787
|
+
() => {
|
|
788
|
+
var _a5;
|
|
789
|
+
const { transform: transform2, status: status2 } = dragOperation;
|
|
790
|
+
if (!transform2.x && !transform2.y && !state.current.translate) {
|
|
791
|
+
return;
|
|
792
|
+
}
|
|
793
|
+
if (status2.dragging) {
|
|
794
|
+
const initialTranslate2 = (_a5 = initial.translate) != null ? _a5 : { x: 0, y: 0 };
|
|
795
|
+
const translate2 = {
|
|
796
|
+
x: transform2.x / frameTransform.scaleX + initialTranslate2.x,
|
|
797
|
+
y: transform2.y / frameTransform.scaleY + initialTranslate2.y
|
|
798
|
+
};
|
|
799
|
+
const previousTranslate = state.current.translate;
|
|
800
|
+
const modifiers = untracked(() => dragOperation.modifiers);
|
|
801
|
+
const currentShape = untracked(() => {
|
|
802
|
+
var _a6;
|
|
803
|
+
return (_a6 = dragOperation.shape) == null ? void 0 : _a6.current;
|
|
804
|
+
});
|
|
805
|
+
const translateTransition = isKeyboardOperation ? "250ms cubic-bezier(0.25, 1, 0.5, 1)" : "0ms linear";
|
|
806
|
+
styles.set(
|
|
807
|
+
{
|
|
808
|
+
transition: `${transition}, translate ${translateTransition}`,
|
|
809
|
+
translate: `${translate2.x}px ${translate2.y}px 0`
|
|
810
|
+
},
|
|
811
|
+
CSS_PREFIX
|
|
812
|
+
);
|
|
813
|
+
elementMutationObserver == null ? void 0 : elementMutationObserver.takeRecords();
|
|
814
|
+
if (currentShape && currentShape !== initialShape && previousTranslate && !modifiers.length) {
|
|
815
|
+
const delta2 = Point.delta(translate2, previousTranslate);
|
|
816
|
+
dragOperation.shape = Rectangle.from(
|
|
817
|
+
currentShape.boundingRectangle
|
|
818
|
+
).translate(
|
|
819
|
+
// Need to take into account frame transform when optimistically updating shape
|
|
820
|
+
delta2.x * frameTransform.scaleX,
|
|
821
|
+
delta2.y * frameTransform.scaleY
|
|
822
|
+
);
|
|
823
|
+
} else {
|
|
824
|
+
dragOperation.shape = new DOMRectangle(feedbackElement);
|
|
825
|
+
}
|
|
826
|
+
state.current.translate = translate2;
|
|
827
|
+
}
|
|
828
|
+
},
|
|
829
|
+
// Drop animation
|
|
830
|
+
function() {
|
|
831
|
+
if (dragOperation.status.dropped) {
|
|
832
|
+
this.dispose();
|
|
833
|
+
source.status = "dropping";
|
|
834
|
+
let translate2 = state.current.translate;
|
|
835
|
+
const moved = translate2 != null;
|
|
836
|
+
if (!translate2 && element !== feedbackElement) {
|
|
837
|
+
translate2 = {
|
|
838
|
+
x: 0,
|
|
839
|
+
y: 0
|
|
840
|
+
};
|
|
841
|
+
}
|
|
842
|
+
if (!translate2) {
|
|
843
|
+
cleanup();
|
|
844
|
+
return;
|
|
845
|
+
}
|
|
846
|
+
const dropAnimation = () => {
|
|
847
|
+
var _a5, _b3;
|
|
848
|
+
{
|
|
849
|
+
showPopover(feedbackElement);
|
|
850
|
+
const [, animation] = (_a5 = getFinalKeyframe(
|
|
851
|
+
feedbackElement,
|
|
852
|
+
(keyframe) => "translate" in keyframe
|
|
853
|
+
)) != null ? _a5 : [];
|
|
854
|
+
animation == null ? void 0 : animation.pause();
|
|
855
|
+
const target = placeholder != null ? placeholder : element;
|
|
856
|
+
const options2 = {
|
|
857
|
+
frameTransform: isSameFrame(feedbackElement, target) ? null : void 0
|
|
858
|
+
};
|
|
859
|
+
const current = new DOMRectangle(feedbackElement, options2);
|
|
860
|
+
const currentTranslate = (_b3 = parseTranslate(getComputedStyles(feedbackElement).translate)) != null ? _b3 : translate2;
|
|
861
|
+
const final = new DOMRectangle(target, options2);
|
|
862
|
+
const delta2 = Rectangle.delta(current, final, source.alignment);
|
|
863
|
+
const finalTranslate = {
|
|
864
|
+
x: currentTranslate.x - delta2.x,
|
|
865
|
+
y: currentTranslate.y - delta2.y
|
|
866
|
+
};
|
|
867
|
+
const heightKeyframes = Math.round(current.intrinsicHeight) !== Math.round(final.intrinsicHeight) ? {
|
|
868
|
+
minHeight: [
|
|
869
|
+
`${current.intrinsicHeight}px`,
|
|
870
|
+
`${final.intrinsicHeight}px`
|
|
871
|
+
],
|
|
872
|
+
maxHeight: [
|
|
873
|
+
`${current.intrinsicHeight}px`,
|
|
874
|
+
`${final.intrinsicHeight}px`
|
|
875
|
+
]
|
|
876
|
+
} : {};
|
|
877
|
+
const widthKeyframes = Math.round(current.intrinsicWidth) !== Math.round(final.intrinsicWidth) ? {
|
|
878
|
+
minWidth: [
|
|
879
|
+
`${current.intrinsicWidth}px`,
|
|
880
|
+
`${final.intrinsicWidth}px`
|
|
881
|
+
],
|
|
882
|
+
maxWidth: [
|
|
883
|
+
`${current.intrinsicWidth}px`,
|
|
884
|
+
`${final.intrinsicWidth}px`
|
|
885
|
+
]
|
|
886
|
+
} : {};
|
|
887
|
+
styles.set({ transition }, CSS_PREFIX);
|
|
888
|
+
feedbackElement.setAttribute(DROPPING_ATTRIBUTE, "");
|
|
889
|
+
elementMutationObserver == null ? void 0 : elementMutationObserver.takeRecords();
|
|
890
|
+
animateTransform({
|
|
891
|
+
element: feedbackElement,
|
|
892
|
+
keyframes: __spreadProps(__spreadValues(__spreadValues({}, heightKeyframes), widthKeyframes), {
|
|
893
|
+
translate: [
|
|
894
|
+
`${currentTranslate.x}px ${currentTranslate.y}px 0`,
|
|
895
|
+
`${finalTranslate.x}px ${finalTranslate.y}px 0`
|
|
896
|
+
]
|
|
897
|
+
}),
|
|
898
|
+
options: {
|
|
899
|
+
duration: moved || feedbackElement !== element ? 250 : 0,
|
|
900
|
+
easing: "ease"
|
|
901
|
+
}
|
|
902
|
+
}).then(() => {
|
|
903
|
+
feedbackElement.removeAttribute(DROPPING_ATTRIBUTE);
|
|
904
|
+
animation == null ? void 0 : animation.finish();
|
|
905
|
+
cleanup();
|
|
906
|
+
requestAnimationFrame(restoreFocus);
|
|
907
|
+
});
|
|
908
|
+
}
|
|
909
|
+
};
|
|
910
|
+
manager.renderer.rendering.then(dropAnimation);
|
|
911
|
+
}
|
|
912
|
+
}
|
|
913
|
+
);
|
|
914
|
+
return () => {
|
|
915
|
+
cleanup();
|
|
916
|
+
cleanupEffects();
|
|
917
|
+
};
|
|
918
|
+
};
|
|
919
|
+
injectStyles_fn = function() {
|
|
920
|
+
var _a4, _b2, _c3;
|
|
921
|
+
const { status, source, target } = this.manager.dragOperation;
|
|
922
|
+
const { nonce } = (_a4 = this.options) != null ? _a4 : {};
|
|
923
|
+
if (status.initializing) {
|
|
924
|
+
const sourceDocument = getDocument((_b2 = source == null ? void 0 : source.element) != null ? _b2 : null);
|
|
925
|
+
const targetDocument = getDocument((_c3 = target == null ? void 0 : target.element) != null ? _c3 : null);
|
|
926
|
+
const documents = /* @__PURE__ */ new Set([sourceDocument, targetDocument]);
|
|
927
|
+
for (const doc of documents) {
|
|
928
|
+
let registration = styleSheetRegistry.get(doc);
|
|
929
|
+
if (!registration) {
|
|
930
|
+
const style = document.createElement("style");
|
|
931
|
+
style.textContent = CSS_RULES;
|
|
932
|
+
if (nonce) {
|
|
933
|
+
style.setAttribute("nonce", nonce);
|
|
934
|
+
}
|
|
935
|
+
doc.head.prepend(style);
|
|
936
|
+
const mutationObserver = new MutationObserver((entries) => {
|
|
937
|
+
for (const entry of entries) {
|
|
938
|
+
if (entry.type === "childList") {
|
|
939
|
+
const removedNodes = Array.from(entry.removedNodes);
|
|
940
|
+
if (removedNodes.length > 0 && removedNodes.includes(style)) {
|
|
941
|
+
doc.head.prepend(style);
|
|
942
|
+
}
|
|
943
|
+
}
|
|
944
|
+
}
|
|
945
|
+
});
|
|
946
|
+
mutationObserver.observe(doc.head, { childList: true });
|
|
947
|
+
registration = {
|
|
948
|
+
cleanup: () => {
|
|
949
|
+
mutationObserver.disconnect();
|
|
950
|
+
style.remove();
|
|
951
|
+
},
|
|
952
|
+
instances: /* @__PURE__ */ new Set()
|
|
953
|
+
};
|
|
954
|
+
styleSheetRegistry.set(doc, registration);
|
|
955
|
+
}
|
|
956
|
+
registration.instances.add(this);
|
|
957
|
+
}
|
|
958
|
+
}
|
|
959
|
+
};
|
|
960
|
+
__decorateElement(_init, 4, "overlay", _overlay_dec, _Feedback, _overlay);
|
|
961
|
+
__decoratorMetadata(_init, _Feedback);
|
|
962
|
+
_Feedback.configure = configurator(_Feedback);
|
|
963
|
+
var Feedback = _Feedback;
|
|
964
|
+
var LOCKED = true;
|
|
965
|
+
var UNLOCKED = false;
|
|
966
|
+
var _dec, _a2, _dec2, _b, _init2, __b, __a;
|
|
967
|
+
_b = (_dec2 = [reactive], ScrollDirection.Forward), _a2 = (_dec = [reactive], ScrollDirection.Reverse);
|
|
968
|
+
var ScrollLock = class {
|
|
969
|
+
constructor() {
|
|
970
|
+
__privateAdd(this, __b, __runInitializers(_init2, 8, this, LOCKED)), __runInitializers(_init2, 11, this);
|
|
971
|
+
__privateAdd(this, __a, __runInitializers(_init2, 12, this, LOCKED)), __runInitializers(_init2, 15, this);
|
|
972
|
+
}
|
|
973
|
+
isLocked(direction) {
|
|
974
|
+
if (direction === ScrollDirection.Idle) {
|
|
975
|
+
return false;
|
|
976
|
+
}
|
|
977
|
+
if (direction == null) {
|
|
978
|
+
return this[ScrollDirection.Forward] === LOCKED && this[ScrollDirection.Reverse] === LOCKED;
|
|
979
|
+
}
|
|
980
|
+
return this[direction] === LOCKED;
|
|
981
|
+
}
|
|
982
|
+
unlock(direction) {
|
|
983
|
+
if (direction === ScrollDirection.Idle) {
|
|
984
|
+
return;
|
|
985
|
+
}
|
|
986
|
+
this[direction] = UNLOCKED;
|
|
987
|
+
}
|
|
988
|
+
};
|
|
989
|
+
_init2 = __decoratorStart(null);
|
|
990
|
+
__b = new WeakMap();
|
|
991
|
+
__a = new WeakMap();
|
|
992
|
+
__decorateElement(_init2, 4, _b, _dec2, ScrollLock, __b);
|
|
993
|
+
__decorateElement(_init2, 4, _a2, _dec, ScrollLock, __a);
|
|
994
|
+
__decoratorMetadata(_init2, ScrollLock);
|
|
995
|
+
|
|
996
|
+
// src/core/plugins/scrolling/ScrollIntent.ts
|
|
997
|
+
var DIRECTIONS = [ScrollDirection.Forward, ScrollDirection.Reverse];
|
|
998
|
+
var ScrollIntent = class {
|
|
999
|
+
constructor() {
|
|
1000
|
+
this.x = new ScrollLock();
|
|
1001
|
+
this.y = new ScrollLock();
|
|
1002
|
+
}
|
|
1003
|
+
isLocked() {
|
|
1004
|
+
return this.x.isLocked() && this.y.isLocked();
|
|
1005
|
+
}
|
|
1006
|
+
};
|
|
1007
|
+
var ScrollIntentTracker = class extends Plugin {
|
|
1008
|
+
constructor(manager) {
|
|
1009
|
+
super(manager);
|
|
1010
|
+
const scrollIntent = signal(new ScrollIntent());
|
|
1011
|
+
let previousDelta = null;
|
|
1012
|
+
this.signal = scrollIntent;
|
|
1013
|
+
effect(() => {
|
|
1014
|
+
const { status } = manager.dragOperation;
|
|
1015
|
+
if (!status.initialized) {
|
|
1016
|
+
previousDelta = null;
|
|
1017
|
+
scrollIntent.value = new ScrollIntent();
|
|
1018
|
+
return;
|
|
1019
|
+
}
|
|
1020
|
+
const { delta } = manager.dragOperation.position;
|
|
1021
|
+
if (previousDelta) {
|
|
1022
|
+
const directions = {
|
|
1023
|
+
x: getDirection(delta.x, previousDelta.x),
|
|
1024
|
+
y: getDirection(delta.y, previousDelta.y)
|
|
1025
|
+
};
|
|
1026
|
+
const intent = scrollIntent.peek();
|
|
1027
|
+
batch(() => {
|
|
1028
|
+
for (const axis of Axes) {
|
|
1029
|
+
for (const direction of DIRECTIONS) {
|
|
1030
|
+
if (directions[axis] === direction) {
|
|
1031
|
+
intent[axis].unlock(direction);
|
|
1032
|
+
}
|
|
1033
|
+
}
|
|
1034
|
+
}
|
|
1035
|
+
scrollIntent.value = intent;
|
|
1036
|
+
});
|
|
1037
|
+
}
|
|
1038
|
+
previousDelta = delta;
|
|
1039
|
+
});
|
|
1040
|
+
}
|
|
1041
|
+
get current() {
|
|
1042
|
+
return this.signal.peek();
|
|
1043
|
+
}
|
|
1044
|
+
};
|
|
1045
|
+
function getDirection(a, b) {
|
|
1046
|
+
return Math.sign(a - b);
|
|
1047
|
+
}
|
|
1048
|
+
|
|
1049
|
+
// src/core/plugins/scrolling/Scroller.ts
|
|
1050
|
+
var _autoScrolling_dec, _a3, _init3, _autoScrolling, _meta, _scroll;
|
|
1051
|
+
var Scroller = class extends (_a3 = CorePlugin, _autoScrolling_dec = [reactive], _a3) {
|
|
1052
|
+
constructor(manager) {
|
|
1053
|
+
super(manager);
|
|
1054
|
+
__privateAdd(this, _autoScrolling, __runInitializers(_init3, 8, this, false)), __runInitializers(_init3, 11, this);
|
|
1055
|
+
__privateAdd(this, _meta);
|
|
1056
|
+
__privateAdd(this, _scroll, () => {
|
|
1057
|
+
if (!__privateGet(this, _meta)) {
|
|
1058
|
+
return;
|
|
1059
|
+
}
|
|
1060
|
+
const { element, by } = __privateGet(this, _meta);
|
|
1061
|
+
if (by.y) element.scrollTop += by.y;
|
|
1062
|
+
if (by.x) element.scrollLeft += by.x;
|
|
1063
|
+
});
|
|
1064
|
+
this.scroll = (options) => {
|
|
1065
|
+
var _a4;
|
|
1066
|
+
if (this.disabled) {
|
|
1067
|
+
return false;
|
|
1068
|
+
}
|
|
1069
|
+
const elements = this.getScrollableElements();
|
|
1070
|
+
if (!elements) {
|
|
1071
|
+
__privateSet(this, _meta, void 0);
|
|
1072
|
+
return false;
|
|
1073
|
+
}
|
|
1074
|
+
const { position } = this.manager.dragOperation;
|
|
1075
|
+
const currentPosition = position == null ? void 0 : position.current;
|
|
1076
|
+
if (currentPosition) {
|
|
1077
|
+
const { by } = options != null ? options : {};
|
|
1078
|
+
const intent = by ? {
|
|
1079
|
+
x: getScrollIntent(by.x),
|
|
1080
|
+
y: getScrollIntent(by.y)
|
|
1081
|
+
} : void 0;
|
|
1082
|
+
const scrollIntent = intent ? void 0 : this.scrollIntentTracker.current;
|
|
1083
|
+
if (scrollIntent == null ? void 0 : scrollIntent.isLocked()) {
|
|
1084
|
+
return false;
|
|
1085
|
+
}
|
|
1086
|
+
for (const scrollableElement of elements) {
|
|
1087
|
+
const elementCanScroll = canScroll(scrollableElement, by);
|
|
1088
|
+
if (elementCanScroll.x || elementCanScroll.y) {
|
|
1089
|
+
const { speed, direction } = detectScrollIntent(
|
|
1090
|
+
scrollableElement,
|
|
1091
|
+
currentPosition,
|
|
1092
|
+
intent
|
|
1093
|
+
);
|
|
1094
|
+
if (scrollIntent) {
|
|
1095
|
+
for (const axis of Axes) {
|
|
1096
|
+
if (scrollIntent[axis].isLocked(direction[axis])) {
|
|
1097
|
+
speed[axis] = 0;
|
|
1098
|
+
direction[axis] = 0;
|
|
1099
|
+
}
|
|
1100
|
+
}
|
|
1101
|
+
}
|
|
1102
|
+
if (direction.x || direction.y) {
|
|
1103
|
+
const { x, y } = by != null ? by : direction;
|
|
1104
|
+
const scrollLeftBy = x * speed.x;
|
|
1105
|
+
const scrollTopBy = y * speed.y;
|
|
1106
|
+
if (scrollLeftBy || scrollTopBy) {
|
|
1107
|
+
const previousScrollBy = (_a4 = __privateGet(this, _meta)) == null ? void 0 : _a4.by;
|
|
1108
|
+
if (this.autoScrolling && previousScrollBy) {
|
|
1109
|
+
const scrollIntentMismatch = previousScrollBy.x && !scrollLeftBy || previousScrollBy.y && !scrollTopBy;
|
|
1110
|
+
if (scrollIntentMismatch) continue;
|
|
1111
|
+
}
|
|
1112
|
+
__privateSet(this, _meta, {
|
|
1113
|
+
element: scrollableElement,
|
|
1114
|
+
by: {
|
|
1115
|
+
x: scrollLeftBy,
|
|
1116
|
+
y: scrollTopBy
|
|
1117
|
+
}
|
|
1118
|
+
});
|
|
1119
|
+
scheduler.schedule(__privateGet(this, _scroll));
|
|
1120
|
+
return true;
|
|
1121
|
+
}
|
|
1122
|
+
}
|
|
1123
|
+
}
|
|
1124
|
+
}
|
|
1125
|
+
}
|
|
1126
|
+
__privateSet(this, _meta, void 0);
|
|
1127
|
+
return false;
|
|
1128
|
+
};
|
|
1129
|
+
let previousElementFromPoint = null;
|
|
1130
|
+
let previousScrollableElements = null;
|
|
1131
|
+
const elementFromPoint = computed(() => {
|
|
1132
|
+
const { position, source } = manager.dragOperation;
|
|
1133
|
+
if (!position) {
|
|
1134
|
+
return null;
|
|
1135
|
+
}
|
|
1136
|
+
const element = getElementFromPoint(
|
|
1137
|
+
getDocument(source == null ? void 0 : source.element),
|
|
1138
|
+
position.current
|
|
1139
|
+
);
|
|
1140
|
+
if (element) {
|
|
1141
|
+
previousElementFromPoint = element;
|
|
1142
|
+
}
|
|
1143
|
+
return element != null ? element : previousElementFromPoint;
|
|
1144
|
+
});
|
|
1145
|
+
const scrollableElements = computed(() => {
|
|
1146
|
+
const element = elementFromPoint.value;
|
|
1147
|
+
const { documentElement } = getDocument(element);
|
|
1148
|
+
if (!element || element === documentElement) {
|
|
1149
|
+
const { target } = manager.dragOperation;
|
|
1150
|
+
const targetElement = target == null ? void 0 : target.element;
|
|
1151
|
+
if (targetElement) {
|
|
1152
|
+
const elements = getScrollableAncestors(targetElement, {
|
|
1153
|
+
excludeElement: false
|
|
1154
|
+
});
|
|
1155
|
+
previousScrollableElements = elements;
|
|
1156
|
+
return elements;
|
|
1157
|
+
}
|
|
1158
|
+
}
|
|
1159
|
+
if (element) {
|
|
1160
|
+
const elements = getScrollableAncestors(element, {
|
|
1161
|
+
excludeElement: false
|
|
1162
|
+
});
|
|
1163
|
+
if (this.autoScrolling && previousScrollableElements && elements.size < (previousScrollableElements == null ? void 0 : previousScrollableElements.size)) {
|
|
1164
|
+
return previousScrollableElements;
|
|
1165
|
+
}
|
|
1166
|
+
previousScrollableElements = elements;
|
|
1167
|
+
return elements;
|
|
1168
|
+
}
|
|
1169
|
+
previousScrollableElements = null;
|
|
1170
|
+
return null;
|
|
1171
|
+
}, deepEqual);
|
|
1172
|
+
this.getScrollableElements = () => {
|
|
1173
|
+
return scrollableElements.value;
|
|
1174
|
+
};
|
|
1175
|
+
this.scrollIntentTracker = new ScrollIntentTracker(manager);
|
|
1176
|
+
this.destroy = manager.monitor.addEventListener("dragmove", (event) => {
|
|
1177
|
+
if (this.disabled || event.defaultPrevented || !isKeyboardEvent(manager.dragOperation.activatorEvent) || !event.by) {
|
|
1178
|
+
return;
|
|
1179
|
+
}
|
|
1180
|
+
if (this.scroll({ by: event.by })) {
|
|
1181
|
+
event.preventDefault();
|
|
1182
|
+
}
|
|
1183
|
+
});
|
|
1184
|
+
}
|
|
1185
|
+
};
|
|
1186
|
+
_init3 = __decoratorStart(_a3);
|
|
1187
|
+
_autoScrolling = new WeakMap();
|
|
1188
|
+
_meta = new WeakMap();
|
|
1189
|
+
_scroll = new WeakMap();
|
|
1190
|
+
__decorateElement(_init3, 4, "autoScrolling", _autoScrolling_dec, Scroller, _autoScrolling);
|
|
1191
|
+
__decoratorMetadata(_init3, Scroller);
|
|
1192
|
+
function getScrollIntent(value) {
|
|
1193
|
+
if (value > 0) {
|
|
1194
|
+
return ScrollDirection.Forward;
|
|
1195
|
+
}
|
|
1196
|
+
if (value < 0) {
|
|
1197
|
+
return ScrollDirection.Reverse;
|
|
1198
|
+
}
|
|
1199
|
+
return ScrollDirection.Idle;
|
|
1200
|
+
}
|
|
1201
|
+
|
|
1202
|
+
// src/utilities/scheduling/scheduler.ts
|
|
1203
|
+
var Scheduler = class {
|
|
1204
|
+
constructor(scheduler5) {
|
|
1205
|
+
this.scheduler = scheduler5;
|
|
1206
|
+
this.pending = false;
|
|
1207
|
+
this.tasks = /* @__PURE__ */ new Set();
|
|
1208
|
+
this.resolvers = /* @__PURE__ */ new Set();
|
|
1209
|
+
this.flush = () => {
|
|
1210
|
+
const { tasks, resolvers } = this;
|
|
1211
|
+
this.pending = false;
|
|
1212
|
+
this.tasks = /* @__PURE__ */ new Set();
|
|
1213
|
+
this.resolvers = /* @__PURE__ */ new Set();
|
|
1214
|
+
for (const task of tasks) {
|
|
1215
|
+
task();
|
|
1216
|
+
}
|
|
1217
|
+
for (const resolve of resolvers) {
|
|
1218
|
+
resolve();
|
|
1219
|
+
}
|
|
1220
|
+
};
|
|
1221
|
+
}
|
|
1222
|
+
schedule(task) {
|
|
1223
|
+
this.tasks.add(task);
|
|
1224
|
+
if (!this.pending) {
|
|
1225
|
+
this.pending = true;
|
|
1226
|
+
this.scheduler(this.flush);
|
|
1227
|
+
}
|
|
1228
|
+
return new Promise((resolve) => this.resolvers.add(resolve));
|
|
1229
|
+
}
|
|
1230
|
+
};
|
|
1231
|
+
var scheduler3 = new Scheduler((callback) => {
|
|
1232
|
+
if (typeof requestAnimationFrame === "function") {
|
|
1233
|
+
requestAnimationFrame(callback);
|
|
1234
|
+
} else {
|
|
1235
|
+
callback();
|
|
1236
|
+
}
|
|
1237
|
+
});
|
|
1238
|
+
|
|
1239
|
+
// src/core/plugins/scrolling/AutoScroller.ts
|
|
1240
|
+
var AUTOSCROLL_INTERVAL = 10;
|
|
1241
|
+
var AutoScroller = class extends Plugin {
|
|
1242
|
+
constructor(manager, _options) {
|
|
1243
|
+
super(manager);
|
|
1244
|
+
const scroller = manager.registry.plugins.get(Scroller);
|
|
1245
|
+
if (!scroller) {
|
|
1246
|
+
throw new Error("AutoScroller plugin depends on Scroller plugin");
|
|
1247
|
+
}
|
|
1248
|
+
this.destroy = effect(() => {
|
|
1249
|
+
if (this.disabled) {
|
|
1250
|
+
return;
|
|
1251
|
+
}
|
|
1252
|
+
const { position: _, status } = manager.dragOperation;
|
|
1253
|
+
if (status.dragging) {
|
|
1254
|
+
const canScroll2 = scroller.scroll();
|
|
1255
|
+
if (canScroll2) {
|
|
1256
|
+
scroller.autoScrolling = true;
|
|
1257
|
+
const interval = setInterval(
|
|
1258
|
+
() => scheduler3.schedule(scroller.scroll),
|
|
1259
|
+
AUTOSCROLL_INTERVAL
|
|
1260
|
+
);
|
|
1261
|
+
return () => {
|
|
1262
|
+
clearInterval(interval);
|
|
1263
|
+
};
|
|
1264
|
+
} else {
|
|
1265
|
+
scroller.autoScrolling = false;
|
|
1266
|
+
}
|
|
1267
|
+
}
|
|
1268
|
+
});
|
|
1269
|
+
}
|
|
1270
|
+
};
|
|
1271
|
+
var listenerOptions = {
|
|
1272
|
+
capture: true,
|
|
1273
|
+
passive: true
|
|
1274
|
+
};
|
|
1275
|
+
var _timeout;
|
|
1276
|
+
var ScrollListener = class extends CorePlugin {
|
|
1277
|
+
constructor(manager) {
|
|
1278
|
+
super(manager);
|
|
1279
|
+
__privateAdd(this, _timeout);
|
|
1280
|
+
this.handleScroll = () => {
|
|
1281
|
+
if (__privateGet(this, _timeout) == null) {
|
|
1282
|
+
__privateSet(this, _timeout, setTimeout(() => {
|
|
1283
|
+
this.manager.collisionObserver.forceUpdate(false);
|
|
1284
|
+
__privateSet(this, _timeout, void 0);
|
|
1285
|
+
}, 50));
|
|
1286
|
+
}
|
|
1287
|
+
};
|
|
1288
|
+
const { dragOperation } = this.manager;
|
|
1289
|
+
this.destroy = effect(() => {
|
|
1290
|
+
var _a4, _b2, _c3;
|
|
1291
|
+
const enabled = dragOperation.status.dragging;
|
|
1292
|
+
if (enabled) {
|
|
1293
|
+
const root = (_c3 = (_b2 = (_a4 = dragOperation.source) == null ? void 0 : _a4.element) == null ? void 0 : _b2.ownerDocument) != null ? _c3 : document;
|
|
1294
|
+
root.addEventListener("scroll", this.handleScroll, listenerOptions);
|
|
1295
|
+
return () => {
|
|
1296
|
+
root.removeEventListener(
|
|
1297
|
+
"scroll",
|
|
1298
|
+
this.handleScroll,
|
|
1299
|
+
listenerOptions
|
|
1300
|
+
);
|
|
1301
|
+
};
|
|
1302
|
+
}
|
|
1303
|
+
});
|
|
1304
|
+
}
|
|
1305
|
+
};
|
|
1306
|
+
_timeout = new WeakMap();
|
|
1307
|
+
var PreventSelection = class extends Plugin {
|
|
1308
|
+
constructor(manager, options) {
|
|
1309
|
+
super(manager, options);
|
|
1310
|
+
this.manager = manager;
|
|
1311
|
+
this.destroy = effect(() => {
|
|
1312
|
+
var _a4;
|
|
1313
|
+
const { dragOperation } = this.manager;
|
|
1314
|
+
const { nonce } = (_a4 = this.options) != null ? _a4 : {};
|
|
1315
|
+
if (dragOperation.status.initialized) {
|
|
1316
|
+
const style = document.createElement("style");
|
|
1317
|
+
if (nonce) {
|
|
1318
|
+
style.setAttribute("nonce", nonce);
|
|
1319
|
+
}
|
|
1320
|
+
style.textContent = `* { user-select: none !important; -webkit-user-select: none !important; }`;
|
|
1321
|
+
document.head.appendChild(style);
|
|
1322
|
+
removeSelection();
|
|
1323
|
+
document.addEventListener("selectionchange", removeSelection, {
|
|
1324
|
+
capture: true
|
|
1325
|
+
});
|
|
1326
|
+
return () => {
|
|
1327
|
+
document.removeEventListener("selectionchange", removeSelection, {
|
|
1328
|
+
capture: true
|
|
1329
|
+
});
|
|
1330
|
+
style.remove();
|
|
1331
|
+
};
|
|
1332
|
+
}
|
|
1333
|
+
});
|
|
1334
|
+
}
|
|
1335
|
+
};
|
|
1336
|
+
function removeSelection() {
|
|
1337
|
+
var _a4;
|
|
1338
|
+
(_a4 = document.getSelection()) == null ? void 0 : _a4.removeAllRanges();
|
|
1339
|
+
}
|
|
1340
|
+
var defaults = Object.freeze({
|
|
1341
|
+
offset: 10,
|
|
1342
|
+
keyboardCodes: {
|
|
1343
|
+
start: ["Space", "Enter"],
|
|
1344
|
+
cancel: ["Escape"],
|
|
1345
|
+
end: ["Space", "Enter", "Tab"],
|
|
1346
|
+
up: ["ArrowUp"],
|
|
1347
|
+
down: ["ArrowDown"],
|
|
1348
|
+
left: ["ArrowLeft"],
|
|
1349
|
+
right: ["ArrowRight"]
|
|
1350
|
+
},
|
|
1351
|
+
shouldActivate(args) {
|
|
1352
|
+
var _a4;
|
|
1353
|
+
const { event, source } = args;
|
|
1354
|
+
const target = (_a4 = source.handle) != null ? _a4 : source.element;
|
|
1355
|
+
return event.target === target;
|
|
1356
|
+
}
|
|
1357
|
+
});
|
|
1358
|
+
var _cleanupFunctions;
|
|
1359
|
+
var _KeyboardSensor = class _KeyboardSensor extends Sensor {
|
|
1360
|
+
constructor(manager, options) {
|
|
1361
|
+
super(manager);
|
|
1362
|
+
this.manager = manager;
|
|
1363
|
+
this.options = options;
|
|
1364
|
+
__privateAdd(this, _cleanupFunctions, []);
|
|
1365
|
+
this.listeners = new Listeners();
|
|
1366
|
+
this.handleSourceKeyDown = (event, source, options) => {
|
|
1367
|
+
if (this.disabled || event.defaultPrevented) {
|
|
1368
|
+
return;
|
|
1369
|
+
}
|
|
1370
|
+
if (!isElement(event.target)) {
|
|
1371
|
+
return;
|
|
1372
|
+
}
|
|
1373
|
+
if (source.disabled) {
|
|
1374
|
+
return;
|
|
1375
|
+
}
|
|
1376
|
+
const {
|
|
1377
|
+
keyboardCodes = defaults.keyboardCodes,
|
|
1378
|
+
shouldActivate = defaults.shouldActivate
|
|
1379
|
+
} = options != null ? options : {};
|
|
1380
|
+
if (!keyboardCodes.start.includes(event.code)) {
|
|
1381
|
+
return;
|
|
1382
|
+
}
|
|
1383
|
+
if (!this.manager.dragOperation.status.idle) {
|
|
1384
|
+
return;
|
|
1385
|
+
}
|
|
1386
|
+
if (shouldActivate({ event, source, manager: this.manager })) {
|
|
1387
|
+
this.handleStart(event, source, options);
|
|
1388
|
+
}
|
|
1389
|
+
};
|
|
1390
|
+
}
|
|
1391
|
+
bind(source, options = this.options) {
|
|
1392
|
+
const unbind = effect(() => {
|
|
1393
|
+
var _a4;
|
|
1394
|
+
const target = (_a4 = source.handle) != null ? _a4 : source.element;
|
|
1395
|
+
const listener = (event) => {
|
|
1396
|
+
if (isKeyboardEvent(event)) {
|
|
1397
|
+
this.handleSourceKeyDown(event, source, options);
|
|
1398
|
+
}
|
|
1399
|
+
};
|
|
1400
|
+
if (target) {
|
|
1401
|
+
target.addEventListener("keydown", listener);
|
|
1402
|
+
return () => {
|
|
1403
|
+
target.removeEventListener("keydown", listener);
|
|
1404
|
+
};
|
|
1405
|
+
}
|
|
1406
|
+
});
|
|
1407
|
+
return unbind;
|
|
1408
|
+
}
|
|
1409
|
+
handleStart(event, source, options) {
|
|
1410
|
+
const { element } = source;
|
|
1411
|
+
if (!element) {
|
|
1412
|
+
throw new Error("Source draggable does not have an associated element");
|
|
1413
|
+
}
|
|
1414
|
+
event.preventDefault();
|
|
1415
|
+
event.stopImmediatePropagation();
|
|
1416
|
+
scrollIntoViewIfNeeded(element);
|
|
1417
|
+
const { center } = new DOMRectangle(element);
|
|
1418
|
+
const controller = this.manager.actions.start({
|
|
1419
|
+
event,
|
|
1420
|
+
coordinates: {
|
|
1421
|
+
x: center.x,
|
|
1422
|
+
y: center.y
|
|
1423
|
+
},
|
|
1424
|
+
source
|
|
1425
|
+
});
|
|
1426
|
+
if (controller.signal.aborted) return this.cleanup();
|
|
1427
|
+
this.sideEffects();
|
|
1428
|
+
const sourceDocument = getDocument(element);
|
|
1429
|
+
const listeners = [
|
|
1430
|
+
this.listeners.bind(sourceDocument, [
|
|
1431
|
+
{
|
|
1432
|
+
type: "keydown",
|
|
1433
|
+
listener: (event2) => this.handleKeyDown(event2, source, options),
|
|
1434
|
+
options: { capture: true }
|
|
1435
|
+
}
|
|
1436
|
+
])
|
|
1437
|
+
];
|
|
1438
|
+
__privateGet(this, _cleanupFunctions).push(...listeners);
|
|
1439
|
+
}
|
|
1440
|
+
handleKeyDown(event, _source, options) {
|
|
1441
|
+
const { keyboardCodes = defaults.keyboardCodes } = options != null ? options : {};
|
|
1442
|
+
if (isKeycode(event, [...keyboardCodes.end, ...keyboardCodes.cancel])) {
|
|
1443
|
+
event.preventDefault();
|
|
1444
|
+
const canceled = isKeycode(event, keyboardCodes.cancel);
|
|
1445
|
+
this.handleEnd(event, canceled);
|
|
1446
|
+
return;
|
|
1447
|
+
}
|
|
1448
|
+
if (isKeycode(event, keyboardCodes.up)) {
|
|
1449
|
+
this.handleMove("up", event);
|
|
1450
|
+
} else if (isKeycode(event, keyboardCodes.down)) {
|
|
1451
|
+
this.handleMove("down", event);
|
|
1452
|
+
}
|
|
1453
|
+
if (isKeycode(event, keyboardCodes.left)) {
|
|
1454
|
+
this.handleMove("left", event);
|
|
1455
|
+
} else if (isKeycode(event, keyboardCodes.right)) {
|
|
1456
|
+
this.handleMove("right", event);
|
|
1457
|
+
}
|
|
1458
|
+
}
|
|
1459
|
+
handleEnd(event, canceled) {
|
|
1460
|
+
this.manager.actions.stop({
|
|
1461
|
+
event,
|
|
1462
|
+
canceled
|
|
1463
|
+
});
|
|
1464
|
+
this.cleanup();
|
|
1465
|
+
}
|
|
1466
|
+
handleMove(direction, event) {
|
|
1467
|
+
var _a4, _b2;
|
|
1468
|
+
const { shape } = this.manager.dragOperation;
|
|
1469
|
+
const factor = event.shiftKey ? 5 : 1;
|
|
1470
|
+
let by = {
|
|
1471
|
+
x: 0,
|
|
1472
|
+
y: 0
|
|
1473
|
+
};
|
|
1474
|
+
let offset = (_b2 = (_a4 = this.options) == null ? void 0 : _a4.offset) != null ? _b2 : defaults.offset;
|
|
1475
|
+
if (typeof offset === "number") {
|
|
1476
|
+
offset = { x: offset, y: offset };
|
|
1477
|
+
}
|
|
1478
|
+
if (!shape) {
|
|
1479
|
+
return;
|
|
1480
|
+
}
|
|
1481
|
+
switch (direction) {
|
|
1482
|
+
case "up":
|
|
1483
|
+
by = { x: 0, y: -offset.y * factor };
|
|
1484
|
+
break;
|
|
1485
|
+
case "down":
|
|
1486
|
+
by = { x: 0, y: offset.y * factor };
|
|
1487
|
+
break;
|
|
1488
|
+
case "left":
|
|
1489
|
+
by = { x: -offset.x * factor, y: 0 };
|
|
1490
|
+
break;
|
|
1491
|
+
case "right":
|
|
1492
|
+
by = { x: offset.x * factor, y: 0 };
|
|
1493
|
+
break;
|
|
1494
|
+
}
|
|
1495
|
+
if (by.x || by.y) {
|
|
1496
|
+
event.preventDefault();
|
|
1497
|
+
this.manager.actions.move({
|
|
1498
|
+
event,
|
|
1499
|
+
by
|
|
1500
|
+
});
|
|
1501
|
+
}
|
|
1502
|
+
}
|
|
1503
|
+
sideEffects() {
|
|
1504
|
+
const autoScroller = this.manager.registry.plugins.get(AutoScroller);
|
|
1505
|
+
if ((autoScroller == null ? void 0 : autoScroller.disabled) === false) {
|
|
1506
|
+
autoScroller.disable();
|
|
1507
|
+
__privateGet(this, _cleanupFunctions).push(() => {
|
|
1508
|
+
autoScroller.enable();
|
|
1509
|
+
});
|
|
1510
|
+
}
|
|
1511
|
+
}
|
|
1512
|
+
cleanup() {
|
|
1513
|
+
__privateGet(this, _cleanupFunctions).forEach((cleanup) => cleanup());
|
|
1514
|
+
__privateSet(this, _cleanupFunctions, []);
|
|
1515
|
+
}
|
|
1516
|
+
destroy() {
|
|
1517
|
+
this.cleanup();
|
|
1518
|
+
this.listeners.clear();
|
|
1519
|
+
}
|
|
1520
|
+
};
|
|
1521
|
+
_cleanupFunctions = new WeakMap();
|
|
1522
|
+
_KeyboardSensor.configure = configurator(_KeyboardSensor);
|
|
1523
|
+
_KeyboardSensor.defaults = defaults;
|
|
1524
|
+
var KeyboardSensor = _KeyboardSensor;
|
|
1525
|
+
function isKeycode(event, codes) {
|
|
1526
|
+
return codes.includes(event.code);
|
|
1527
|
+
}
|
|
1528
|
+
var defaults2 = Object.freeze({
|
|
1529
|
+
activationConstraints(event, source) {
|
|
1530
|
+
var _a4;
|
|
1531
|
+
const { pointerType, target } = event;
|
|
1532
|
+
if (pointerType === "mouse" && isElement(target) && (source.handle === target || ((_a4 = source.handle) == null ? void 0 : _a4.contains(target)))) {
|
|
1533
|
+
return void 0;
|
|
1534
|
+
}
|
|
1535
|
+
if (pointerType === "touch") {
|
|
1536
|
+
return {
|
|
1537
|
+
delay: { value: 250, tolerance: 5 }
|
|
1538
|
+
};
|
|
1539
|
+
}
|
|
1540
|
+
if (isTextInput(target) && !event.defaultPrevented) {
|
|
1541
|
+
return {
|
|
1542
|
+
delay: { value: 200, tolerance: 0 }
|
|
1543
|
+
};
|
|
1544
|
+
}
|
|
1545
|
+
return {
|
|
1546
|
+
delay: { value: 200, tolerance: 10 },
|
|
1547
|
+
distance: { value: 5 }
|
|
1548
|
+
};
|
|
1549
|
+
}
|
|
1550
|
+
});
|
|
1551
|
+
var _cleanup, _clearTimeout;
|
|
1552
|
+
var _PointerSensor = class _PointerSensor extends Sensor {
|
|
1553
|
+
constructor(manager, options) {
|
|
1554
|
+
super(manager);
|
|
1555
|
+
this.manager = manager;
|
|
1556
|
+
this.options = options;
|
|
1557
|
+
__privateAdd(this, _cleanup, /* @__PURE__ */ new Set());
|
|
1558
|
+
__privateAdd(this, _clearTimeout);
|
|
1559
|
+
this.listeners = new Listeners();
|
|
1560
|
+
this.latest = {
|
|
1561
|
+
event: void 0,
|
|
1562
|
+
coordinates: void 0
|
|
1563
|
+
};
|
|
1564
|
+
this.handleMove = () => {
|
|
1565
|
+
const { event, coordinates: to } = this.latest;
|
|
1566
|
+
if (!event || !to) {
|
|
1567
|
+
return;
|
|
1568
|
+
}
|
|
1569
|
+
this.manager.actions.move({ event, to });
|
|
1570
|
+
};
|
|
1571
|
+
this.handleCancel = this.handleCancel.bind(this);
|
|
1572
|
+
this.handlePointerUp = this.handlePointerUp.bind(this);
|
|
1573
|
+
this.handleKeyDown = this.handleKeyDown.bind(this);
|
|
1574
|
+
}
|
|
1575
|
+
activationConstraints(event, source) {
|
|
1576
|
+
var _a4;
|
|
1577
|
+
const { activationConstraints = defaults2.activationConstraints } = (_a4 = this.options) != null ? _a4 : {};
|
|
1578
|
+
const constraints = typeof activationConstraints === "function" ? activationConstraints(event, source) : activationConstraints;
|
|
1579
|
+
return constraints;
|
|
1580
|
+
}
|
|
1581
|
+
bind(source, options = this.options) {
|
|
1582
|
+
const unbind = effect(() => {
|
|
1583
|
+
var _a4;
|
|
1584
|
+
const controller = new AbortController();
|
|
1585
|
+
const { signal: signal3 } = controller;
|
|
1586
|
+
const listener = (event) => {
|
|
1587
|
+
if (isPointerEvent(event)) {
|
|
1588
|
+
this.handlePointerDown(event, source, options);
|
|
1589
|
+
}
|
|
1590
|
+
};
|
|
1591
|
+
let targets = [(_a4 = source.handle) != null ? _a4 : source.element];
|
|
1592
|
+
if (options == null ? void 0 : options.activatorElements) {
|
|
1593
|
+
if (Array.isArray(options.activatorElements)) {
|
|
1594
|
+
targets = options.activatorElements;
|
|
1595
|
+
} else {
|
|
1596
|
+
targets = options.activatorElements(source);
|
|
1597
|
+
}
|
|
1598
|
+
}
|
|
1599
|
+
for (const target of targets) {
|
|
1600
|
+
if (!target) continue;
|
|
1601
|
+
patchWindow(target.ownerDocument.defaultView);
|
|
1602
|
+
target.addEventListener("pointerdown", listener, { signal: signal3 });
|
|
1603
|
+
}
|
|
1604
|
+
return () => controller.abort();
|
|
1605
|
+
});
|
|
1606
|
+
return unbind;
|
|
1607
|
+
}
|
|
1608
|
+
handlePointerDown(event, source, options = {}) {
|
|
1609
|
+
if (this.disabled || !event.isPrimary || event.button !== 0 || !isElement(event.target) || source.disabled || isCapturedBySensor(event) || !this.manager.dragOperation.status.idle) {
|
|
1610
|
+
return;
|
|
1611
|
+
}
|
|
1612
|
+
const { target } = event;
|
|
1613
|
+
const isNativeDraggable = isHTMLElement(target) && target.draggable && target.getAttribute("draggable") === "true";
|
|
1614
|
+
const offset = getFrameTransform(source.element);
|
|
1615
|
+
this.initialCoordinates = {
|
|
1616
|
+
x: event.clientX * offset.scaleX + offset.x,
|
|
1617
|
+
y: event.clientY * offset.scaleY + offset.y
|
|
1618
|
+
};
|
|
1619
|
+
const constraints = this.activationConstraints(event, source);
|
|
1620
|
+
event.sensor = this;
|
|
1621
|
+
if (!(constraints == null ? void 0 : constraints.delay) && !(constraints == null ? void 0 : constraints.distance)) {
|
|
1622
|
+
this.handleStart(source, event);
|
|
1623
|
+
} else {
|
|
1624
|
+
const { delay } = constraints;
|
|
1625
|
+
if (delay) {
|
|
1626
|
+
const timeout = setTimeout(
|
|
1627
|
+
() => this.handleStart(source, event),
|
|
1628
|
+
delay.value
|
|
1629
|
+
);
|
|
1630
|
+
__privateSet(this, _clearTimeout, () => {
|
|
1631
|
+
clearTimeout(timeout);
|
|
1632
|
+
__privateSet(this, _clearTimeout, void 0);
|
|
1633
|
+
});
|
|
1634
|
+
}
|
|
1635
|
+
}
|
|
1636
|
+
const ownerDocument = getDocument(event.target);
|
|
1637
|
+
const unbindListeners = this.listeners.bind(ownerDocument, [
|
|
1638
|
+
{
|
|
1639
|
+
type: "pointermove",
|
|
1640
|
+
listener: (event2) => this.handlePointerMove(event2, source)
|
|
1641
|
+
},
|
|
1642
|
+
{
|
|
1643
|
+
type: "pointerup",
|
|
1644
|
+
listener: this.handlePointerUp,
|
|
1645
|
+
options: {
|
|
1646
|
+
capture: true
|
|
1647
|
+
}
|
|
1648
|
+
},
|
|
1649
|
+
{
|
|
1650
|
+
// Cancel activation if there is a competing Drag and Drop interaction
|
|
1651
|
+
type: "dragstart",
|
|
1652
|
+
listener: isNativeDraggable ? this.handleCancel : preventDefault,
|
|
1653
|
+
options: {
|
|
1654
|
+
capture: true
|
|
1655
|
+
}
|
|
1656
|
+
}
|
|
1657
|
+
]);
|
|
1658
|
+
const cleanup = () => {
|
|
1659
|
+
var _a4;
|
|
1660
|
+
unbindListeners();
|
|
1661
|
+
(_a4 = __privateGet(this, _clearTimeout)) == null ? void 0 : _a4.call(this);
|
|
1662
|
+
this.initialCoordinates = void 0;
|
|
1663
|
+
};
|
|
1664
|
+
__privateGet(this, _cleanup).add(cleanup);
|
|
1665
|
+
}
|
|
1666
|
+
handlePointerMove(event, source) {
|
|
1667
|
+
const coordinates = {
|
|
1668
|
+
x: event.clientX,
|
|
1669
|
+
y: event.clientY
|
|
1670
|
+
};
|
|
1671
|
+
const offset = getFrameTransform(source.element);
|
|
1672
|
+
coordinates.x = coordinates.x * offset.scaleX + offset.x;
|
|
1673
|
+
coordinates.y = coordinates.y * offset.scaleY + offset.y;
|
|
1674
|
+
if (this.manager.dragOperation.status.dragging) {
|
|
1675
|
+
event.preventDefault();
|
|
1676
|
+
event.stopPropagation();
|
|
1677
|
+
this.latest.event = event;
|
|
1678
|
+
this.latest.coordinates = coordinates;
|
|
1679
|
+
scheduler.schedule(this.handleMove);
|
|
1680
|
+
return;
|
|
1681
|
+
}
|
|
1682
|
+
if (!this.initialCoordinates) {
|
|
1683
|
+
return;
|
|
1684
|
+
}
|
|
1685
|
+
const delta = {
|
|
1686
|
+
x: coordinates.x - this.initialCoordinates.x,
|
|
1687
|
+
y: coordinates.y - this.initialCoordinates.y
|
|
1688
|
+
};
|
|
1689
|
+
const constraints = this.activationConstraints(event, source);
|
|
1690
|
+
const { distance, delay } = constraints != null ? constraints : {};
|
|
1691
|
+
if (distance) {
|
|
1692
|
+
if (distance.tolerance != null && exceedsDistance(delta, distance.tolerance)) {
|
|
1693
|
+
return this.handleCancel(event);
|
|
1694
|
+
}
|
|
1695
|
+
if (exceedsDistance(delta, distance.value)) {
|
|
1696
|
+
return this.handleStart(source, event);
|
|
1697
|
+
}
|
|
1698
|
+
}
|
|
1699
|
+
if (delay) {
|
|
1700
|
+
if (exceedsDistance(delta, delay.tolerance)) {
|
|
1701
|
+
return this.handleCancel(event);
|
|
1702
|
+
}
|
|
1703
|
+
}
|
|
1704
|
+
}
|
|
1705
|
+
handlePointerUp(event) {
|
|
1706
|
+
const { status } = this.manager.dragOperation;
|
|
1707
|
+
if (!status.idle) {
|
|
1708
|
+
event.preventDefault();
|
|
1709
|
+
event.stopPropagation();
|
|
1710
|
+
const canceled = !status.initialized;
|
|
1711
|
+
this.manager.actions.stop({ event, canceled });
|
|
1712
|
+
}
|
|
1713
|
+
this.cleanup();
|
|
1714
|
+
}
|
|
1715
|
+
handleKeyDown(event) {
|
|
1716
|
+
if (event.key === "Escape") {
|
|
1717
|
+
event.preventDefault();
|
|
1718
|
+
this.handleCancel(event);
|
|
1719
|
+
}
|
|
1720
|
+
}
|
|
1721
|
+
handleStart(source, event) {
|
|
1722
|
+
var _a4;
|
|
1723
|
+
const { manager, initialCoordinates } = this;
|
|
1724
|
+
(_a4 = __privateGet(this, _clearTimeout)) == null ? void 0 : _a4.call(this);
|
|
1725
|
+
if (!initialCoordinates || !manager.dragOperation.status.idle) {
|
|
1726
|
+
return;
|
|
1727
|
+
}
|
|
1728
|
+
if (event.defaultPrevented) {
|
|
1729
|
+
return;
|
|
1730
|
+
}
|
|
1731
|
+
const controller = manager.actions.start({
|
|
1732
|
+
coordinates: initialCoordinates,
|
|
1733
|
+
event,
|
|
1734
|
+
source
|
|
1735
|
+
});
|
|
1736
|
+
if (controller.signal.aborted) return this.cleanup();
|
|
1737
|
+
event.preventDefault();
|
|
1738
|
+
const ownerDocument = getDocument(event.target);
|
|
1739
|
+
const pointerCaptureTarget = ownerDocument.body;
|
|
1740
|
+
pointerCaptureTarget.setPointerCapture(event.pointerId);
|
|
1741
|
+
const unbind = this.listeners.bind(ownerDocument, [
|
|
1742
|
+
{
|
|
1743
|
+
// Prevent scrolling on touch devices
|
|
1744
|
+
type: "touchmove",
|
|
1745
|
+
listener: preventDefault,
|
|
1746
|
+
options: {
|
|
1747
|
+
passive: false
|
|
1748
|
+
}
|
|
1749
|
+
},
|
|
1750
|
+
{
|
|
1751
|
+
// Prevent click events
|
|
1752
|
+
type: "click",
|
|
1753
|
+
listener: preventDefault
|
|
1754
|
+
},
|
|
1755
|
+
{
|
|
1756
|
+
type: "contextmenu",
|
|
1757
|
+
listener: preventDefault
|
|
1758
|
+
},
|
|
1759
|
+
{
|
|
1760
|
+
type: "keydown",
|
|
1761
|
+
listener: this.handleKeyDown
|
|
1762
|
+
},
|
|
1763
|
+
{
|
|
1764
|
+
type: "lostpointercapture",
|
|
1765
|
+
listener: (event2) => {
|
|
1766
|
+
if (event2.target !== pointerCaptureTarget) return;
|
|
1767
|
+
this.handlePointerUp(event2);
|
|
1768
|
+
}
|
|
1769
|
+
}
|
|
1770
|
+
]);
|
|
1771
|
+
__privateGet(this, _cleanup).add(unbind);
|
|
1772
|
+
}
|
|
1773
|
+
handleCancel(event) {
|
|
1774
|
+
const { dragOperation } = this.manager;
|
|
1775
|
+
if (dragOperation.status.initialized) {
|
|
1776
|
+
this.manager.actions.stop({ event, canceled: true });
|
|
1777
|
+
}
|
|
1778
|
+
this.cleanup();
|
|
1779
|
+
}
|
|
1780
|
+
cleanup() {
|
|
1781
|
+
this.latest = {
|
|
1782
|
+
event: void 0,
|
|
1783
|
+
coordinates: void 0
|
|
1784
|
+
};
|
|
1785
|
+
__privateGet(this, _cleanup).forEach((cleanup) => cleanup());
|
|
1786
|
+
__privateGet(this, _cleanup).clear();
|
|
1787
|
+
}
|
|
1788
|
+
destroy() {
|
|
1789
|
+
this.cleanup();
|
|
1790
|
+
this.listeners.clear();
|
|
1791
|
+
}
|
|
1792
|
+
};
|
|
1793
|
+
_cleanup = new WeakMap();
|
|
1794
|
+
_clearTimeout = new WeakMap();
|
|
1795
|
+
_PointerSensor.configure = configurator(_PointerSensor);
|
|
1796
|
+
_PointerSensor.defaults = defaults2;
|
|
1797
|
+
var PointerSensor = _PointerSensor;
|
|
1798
|
+
function isCapturedBySensor(event) {
|
|
1799
|
+
return "sensor" in event;
|
|
1800
|
+
}
|
|
1801
|
+
function preventDefault(event) {
|
|
1802
|
+
event.preventDefault();
|
|
1803
|
+
}
|
|
1804
|
+
function noop() {
|
|
1805
|
+
}
|
|
1806
|
+
var windows = /* @__PURE__ */ new WeakSet();
|
|
1807
|
+
function patchWindow(window) {
|
|
1808
|
+
if (!window || windows.has(window)) {
|
|
1809
|
+
return;
|
|
1810
|
+
}
|
|
1811
|
+
window.addEventListener("touchmove", noop, {
|
|
1812
|
+
capture: false,
|
|
1813
|
+
passive: false
|
|
1814
|
+
});
|
|
1815
|
+
windows.add(window);
|
|
1816
|
+
}
|
|
1817
|
+
|
|
1818
|
+
// src/core/manager/manager.ts
|
|
1819
|
+
var defaultPreset = {
|
|
1820
|
+
modifiers: [],
|
|
1821
|
+
plugins: [Accessibility, AutoScroller, Cursor, Feedback, PreventSelection],
|
|
1822
|
+
sensors: [PointerSensor, KeyboardSensor]
|
|
1823
|
+
};
|
|
1824
|
+
var DragDropManager = class extends DragDropManager$1 {
|
|
1825
|
+
constructor(input = {}) {
|
|
1826
|
+
const {
|
|
1827
|
+
plugins = defaultPreset.plugins,
|
|
1828
|
+
sensors = defaultPreset.sensors,
|
|
1829
|
+
modifiers = []
|
|
1830
|
+
} = input;
|
|
1831
|
+
super(__spreadProps(__spreadValues({}, input), {
|
|
1832
|
+
plugins: [ScrollListener, Scroller, ...plugins],
|
|
1833
|
+
sensors,
|
|
1834
|
+
modifiers
|
|
1835
|
+
}));
|
|
1836
|
+
}
|
|
1837
|
+
};
|
|
1838
|
+
var _feedback_dec, _element_dec, _handle_dec, _c, _init4, _handle, _element, _feedback;
|
|
1839
|
+
var Draggable = class extends (_c = Draggable$1, _handle_dec = [reactive], _element_dec = [reactive], _feedback_dec = [reactive], _c) {
|
|
1840
|
+
constructor(_a4, manager) {
|
|
1841
|
+
var _b2 = _a4, {
|
|
1842
|
+
element,
|
|
1843
|
+
effects: effects2 = () => [],
|
|
1844
|
+
handle,
|
|
1845
|
+
feedback = "default"
|
|
1846
|
+
} = _b2, input = __objRest(_b2, [
|
|
1847
|
+
"element",
|
|
1848
|
+
"effects",
|
|
1849
|
+
"handle",
|
|
1850
|
+
"feedback"
|
|
1851
|
+
]);
|
|
1852
|
+
super(
|
|
1853
|
+
__spreadValues({
|
|
1854
|
+
effects: () => [
|
|
1855
|
+
...effects2(),
|
|
1856
|
+
() => {
|
|
1857
|
+
var _a5, _b3;
|
|
1858
|
+
const { manager: manager2 } = this;
|
|
1859
|
+
if (!manager2) return;
|
|
1860
|
+
const sensors = (_b3 = (_a5 = this.sensors) == null ? void 0 : _a5.map(descriptor)) != null ? _b3 : [
|
|
1861
|
+
...manager2.sensors
|
|
1862
|
+
];
|
|
1863
|
+
const unbindFunctions = sensors.map((entry) => {
|
|
1864
|
+
const sensorInstance = entry instanceof Sensor ? entry : manager2.registry.register(entry.plugin);
|
|
1865
|
+
const options = entry instanceof Sensor ? void 0 : entry.options;
|
|
1866
|
+
const unbind = sensorInstance.bind(this, options);
|
|
1867
|
+
return unbind;
|
|
1868
|
+
});
|
|
1869
|
+
return function cleanup() {
|
|
1870
|
+
unbindFunctions.forEach((unbind) => unbind());
|
|
1871
|
+
};
|
|
1872
|
+
}
|
|
1873
|
+
]
|
|
1874
|
+
}, input),
|
|
1875
|
+
manager
|
|
1876
|
+
);
|
|
1877
|
+
__privateAdd(this, _handle, __runInitializers(_init4, 8, this)), __runInitializers(_init4, 11, this);
|
|
1878
|
+
__privateAdd(this, _element, __runInitializers(_init4, 12, this)), __runInitializers(_init4, 15, this);
|
|
1879
|
+
__privateAdd(this, _feedback, __runInitializers(_init4, 16, this)), __runInitializers(_init4, 19, this);
|
|
1880
|
+
this.element = element;
|
|
1881
|
+
this.handle = handle;
|
|
1882
|
+
this.feedback = feedback;
|
|
1883
|
+
}
|
|
1884
|
+
};
|
|
1885
|
+
_init4 = __decoratorStart(_c);
|
|
1886
|
+
_handle = new WeakMap();
|
|
1887
|
+
_element = new WeakMap();
|
|
1888
|
+
_feedback = new WeakMap();
|
|
1889
|
+
__decorateElement(_init4, 4, "handle", _handle_dec, Draggable, _handle);
|
|
1890
|
+
__decorateElement(_init4, 4, "element", _element_dec, Draggable, _element);
|
|
1891
|
+
__decorateElement(_init4, 4, "feedback", _feedback_dec, Draggable, _feedback);
|
|
1892
|
+
__decoratorMetadata(_init4, Draggable);
|
|
1893
|
+
var _proxy_dec, _element_dec2, _c2, _init5, _element2, _d, element_get, element_set, _Droppable_instances, _proxy;
|
|
1894
|
+
var Droppable = class extends (_c2 = Droppable$1, _element_dec2 = [reactive], _proxy_dec = [reactive], _c2) {
|
|
1895
|
+
constructor(_a4, manager) {
|
|
1896
|
+
var _b2 = _a4, { element, effects: effects2 = () => [] } = _b2, input = __objRest(_b2, ["element", "effects"]);
|
|
1897
|
+
const { collisionDetector = defaultCollisionDetection } = input;
|
|
1898
|
+
const updateShape = (boundingClientRect) => {
|
|
1899
|
+
const { manager: manager2, element: element2 } = this;
|
|
1900
|
+
if (!element2 || boundingClientRect === null) {
|
|
1901
|
+
this.shape = void 0;
|
|
1902
|
+
return void 0;
|
|
1903
|
+
}
|
|
1904
|
+
if (!manager2) return;
|
|
1905
|
+
const updatedShape = new DOMRectangle(element2);
|
|
1906
|
+
const shape = untracked(() => this.shape);
|
|
1907
|
+
if (updatedShape && (shape == null ? void 0 : shape.equals(updatedShape))) {
|
|
1908
|
+
return shape;
|
|
1909
|
+
}
|
|
1910
|
+
this.shape = updatedShape;
|
|
1911
|
+
return updatedShape;
|
|
1912
|
+
};
|
|
1913
|
+
const observePosition = signal(false);
|
|
1914
|
+
super(
|
|
1915
|
+
__spreadProps(__spreadValues({}, input), {
|
|
1916
|
+
collisionDetector,
|
|
1917
|
+
effects: () => [
|
|
1918
|
+
...effects2(),
|
|
1919
|
+
() => {
|
|
1920
|
+
const { element: element2, manager: manager2 } = this;
|
|
1921
|
+
if (!manager2) return;
|
|
1922
|
+
const { dragOperation } = manager2;
|
|
1923
|
+
const { source } = dragOperation;
|
|
1924
|
+
observePosition.value = Boolean(
|
|
1925
|
+
source && dragOperation.status.initialized && element2 && !this.disabled && this.accepts(source)
|
|
1926
|
+
);
|
|
1927
|
+
},
|
|
1928
|
+
() => {
|
|
1929
|
+
const { element: element2 } = this;
|
|
1930
|
+
if (observePosition.value && element2) {
|
|
1931
|
+
const positionObserver = new PositionObserver(
|
|
1932
|
+
element2,
|
|
1933
|
+
updateShape
|
|
1934
|
+
);
|
|
1935
|
+
return () => {
|
|
1936
|
+
positionObserver.disconnect();
|
|
1937
|
+
this.shape = void 0;
|
|
1938
|
+
};
|
|
1939
|
+
}
|
|
1940
|
+
},
|
|
1941
|
+
() => {
|
|
1942
|
+
var _a5;
|
|
1943
|
+
if ((_a5 = this.manager) == null ? void 0 : _a5.dragOperation.status.initialized) {
|
|
1944
|
+
return () => {
|
|
1945
|
+
this.shape = void 0;
|
|
1946
|
+
};
|
|
1947
|
+
}
|
|
1948
|
+
}
|
|
1949
|
+
]
|
|
1950
|
+
}),
|
|
1951
|
+
manager
|
|
1952
|
+
);
|
|
1953
|
+
__privateAdd(this, _Droppable_instances);
|
|
1954
|
+
__privateAdd(this, _element2, __runInitializers(_init5, 8, this)), __runInitializers(_init5, 11, this);
|
|
1955
|
+
__privateAdd(this, _proxy, __runInitializers(_init5, 12, this)), __runInitializers(_init5, 15, this);
|
|
1956
|
+
this.element = element;
|
|
1957
|
+
this.refreshShape = () => updateShape();
|
|
1958
|
+
}
|
|
1959
|
+
set element(element) {
|
|
1960
|
+
__privateSet(this, _Droppable_instances, element, element_set);
|
|
1961
|
+
}
|
|
1962
|
+
get element() {
|
|
1963
|
+
var _a4;
|
|
1964
|
+
return (_a4 = this.proxy) != null ? _a4 : __privateGet(this, _Droppable_instances, element_get);
|
|
1965
|
+
}
|
|
1966
|
+
};
|
|
1967
|
+
_init5 = __decoratorStart(_c2);
|
|
1968
|
+
_element2 = new WeakMap();
|
|
1969
|
+
_Droppable_instances = new WeakSet();
|
|
1970
|
+
_proxy = new WeakMap();
|
|
1971
|
+
_d = __decorateElement(_init5, 20, "#element", _element_dec2, _Droppable_instances, _element2), element_get = _d.get, element_set = _d.set;
|
|
1972
|
+
__decorateElement(_init5, 4, "proxy", _proxy_dec, Droppable, _proxy);
|
|
1973
|
+
__decoratorMetadata(_init5, Droppable);
|
|
1974
|
+
|
|
1975
|
+
export { Accessibility, AutoScroller, Cursor, DragDropManager, Draggable, Droppable, Feedback, KeyboardSensor, PointerSensor, PreventSelection, ScrollListener, Scroller, defaultPreset };
|
|
1976
|
+
//# sourceMappingURL=index.js.map
|
|
1977
|
+
//# sourceMappingURL=index.js.map
|