gridstack 12.3.2 → 12.3.3
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/dist/angular/esm2020/lib/base-widget.mjs +2 -2
- package/dist/angular/esm2020/lib/gridstack-item.component.mjs +2 -2
- package/dist/angular/esm2020/lib/gridstack.component.mjs +2 -2
- package/dist/angular/esm2020/lib/gridstack.module.mjs +2 -2
- package/dist/angular/esm2020/lib/types.mjs +2 -2
- package/dist/angular/fesm2015/gridstack-angular.mjs +4 -4
- package/dist/angular/fesm2015/gridstack-angular.mjs.map +1 -1
- package/dist/angular/fesm2020/gridstack-angular.mjs +5 -5
- package/dist/angular/fesm2020/gridstack-angular.mjs.map +1 -1
- package/dist/angular/lib/gridstack-item.component.d.ts +1 -1
- package/dist/angular/lib/gridstack.component.d.ts +1 -1
- package/dist/angular/lib/types.d.ts +1 -1
- package/dist/angular/package.json +1 -1
- package/dist/angular/src/base-widget.ts +1 -1
- package/dist/angular/src/gridstack-item.component.ts +1 -1
- package/dist/angular/src/gridstack.component.ts +1 -1
- package/dist/angular/src/gridstack.module.ts +1 -1
- package/dist/angular/src/types.ts +1 -1
- package/dist/gridstack-all.js +1 -1
- package/dist/gridstack-all.js.LICENSE.txt +1 -1
- package/dist/gridstack-all.js.map +1 -1
- package/dist/gridstack.css +1 -1
- package/dist/spec/gridstack-engine-spec.d.ts +1 -0
- package/dist/spec/gridstack-engine-spec.js +358 -0
- package/dist/spec/gridstack-engine-spec.js.map +1 -0
- package/dist/spec/gridstack-spec.d.ts +1 -0
- package/dist/spec/gridstack-spec.js +1780 -0
- package/dist/spec/gridstack-spec.js.map +1 -0
- package/dist/spec/integration/gridstack-integration.spec.d.ts +1 -0
- package/dist/spec/integration/gridstack-integration.spec.js +171 -0
- package/dist/spec/integration/gridstack-integration.spec.js.map +1 -0
- package/dist/spec/regression-spec.d.ts +1 -0
- package/dist/spec/regression-spec.js +100 -0
- package/dist/spec/regression-spec.js.map +1 -0
- package/dist/spec/utils-spec.d.ts +1 -0
- package/dist/spec/utils-spec.js +243 -0
- package/dist/spec/utils-spec.js.map +1 -0
- package/dist/src/dd-base-impl.d.ts +69 -0
- package/dist/src/dd-base-impl.js +70 -0
- package/dist/src/dd-base-impl.js.map +1 -0
- package/dist/src/dd-draggable.d.ts +20 -0
- package/dist/src/dd-draggable.js +364 -0
- package/dist/src/dd-draggable.js.map +1 -0
- package/dist/src/dd-droppable.d.ts +26 -0
- package/dist/src/dd-droppable.js +149 -0
- package/dist/src/dd-droppable.js.map +1 -0
- package/dist/src/dd-element.d.ts +27 -0
- package/dist/src/dd-element.js +91 -0
- package/dist/src/dd-element.js.map +1 -0
- package/dist/src/dd-gridstack.d.ts +82 -0
- package/dist/src/dd-gridstack.js +165 -0
- package/dist/src/dd-gridstack.js.map +1 -0
- package/dist/src/dd-manager.d.ts +43 -0
- package/dist/src/dd-manager.js +14 -0
- package/dist/src/dd-manager.js.map +1 -0
- package/dist/src/dd-resizable-handle.d.ts +18 -0
- package/dist/src/dd-resizable-handle.js +113 -0
- package/dist/src/dd-resizable-handle.js.map +1 -0
- package/dist/src/dd-resizable.d.ts +30 -0
- package/dist/src/dd-resizable.js +304 -0
- package/dist/src/dd-resizable.js.map +1 -0
- package/dist/src/dd-touch.d.ts +33 -0
- package/dist/src/dd-touch.js +145 -0
- package/dist/src/dd-touch.js.map +1 -0
- package/dist/src/gridstack-engine.d.ts +321 -0
- package/dist/src/gridstack-engine.js +1272 -0
- package/dist/src/gridstack-engine.js.map +1 -0
- package/dist/src/gridstack.d.ts +802 -0
- package/dist/src/gridstack.js +2872 -0
- package/dist/src/gridstack.js.map +1 -0
- package/dist/src/gridstack.scss +1 -1
- package/dist/src/types.d.ts +427 -0
- package/dist/src/types.js +38 -0
- package/dist/src/types.js.map +1 -0
- package/dist/src/utils.d.ts +283 -0
- package/dist/src/utils.js +790 -0
- package/dist/src/utils.js.map +1 -0
- package/dist/vitest.config.d.ts +2 -0
- package/dist/vitest.config.js +74 -0
- package/dist/vitest.config.js.map +1 -0
- package/dist/vitest.setup.d.ts +1 -0
- package/dist/vitest.setup.js +90 -0
- package/dist/vitest.setup.js.map +1 -0
- package/doc/API.md +22 -22
- package/package.json +21 -9
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* dd-draggable.ts 12.3.3
|
|
3
|
+
* Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license
|
|
4
|
+
*/
|
|
5
|
+
import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';
|
|
6
|
+
import { GridItemHTMLElement, DDDragOpt } from './types';
|
|
7
|
+
type DDDragEvent = 'drag' | 'dragstart' | 'dragstop';
|
|
8
|
+
export declare class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt<DDDragOpt> {
|
|
9
|
+
el: GridItemHTMLElement;
|
|
10
|
+
option: DDDragOpt;
|
|
11
|
+
helper: HTMLElement;
|
|
12
|
+
constructor(el: GridItemHTMLElement, option?: DDDragOpt);
|
|
13
|
+
on(event: DDDragEvent, callback: (event: DragEvent) => void): void;
|
|
14
|
+
off(event: DDDragEvent): void;
|
|
15
|
+
enable(): void;
|
|
16
|
+
disable(forDestroy?: boolean): void;
|
|
17
|
+
destroy(): void;
|
|
18
|
+
updateOption(opts: DDDragOpt): DDDraggable;
|
|
19
|
+
}
|
|
20
|
+
export {};
|
|
@@ -0,0 +1,364 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* dd-draggable.ts 12.3.3
|
|
3
|
+
* Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license
|
|
4
|
+
*/
|
|
5
|
+
import { DDManager } from './dd-manager';
|
|
6
|
+
import { Utils } from './utils';
|
|
7
|
+
import { DDBaseImplement } from './dd-base-impl';
|
|
8
|
+
import { isTouch, touchend, touchmove, touchstart, pointerdown } from './dd-touch';
|
|
9
|
+
// make sure we are not clicking on known object that handles mouseDown
|
|
10
|
+
const skipMouseDown = 'input,textarea,button,select,option,[contenteditable="true"],.ui-resizable-handle';
|
|
11
|
+
// let count = 0; // TEST
|
|
12
|
+
class DDDraggable extends DDBaseImplement {
|
|
13
|
+
constructor(el, option = {}) {
|
|
14
|
+
super();
|
|
15
|
+
this.el = el;
|
|
16
|
+
this.option = option;
|
|
17
|
+
/** @internal */
|
|
18
|
+
this.dragTransform = {
|
|
19
|
+
xScale: 1,
|
|
20
|
+
yScale: 1,
|
|
21
|
+
xOffset: 0,
|
|
22
|
+
yOffset: 0
|
|
23
|
+
};
|
|
24
|
+
// get the element that is actually supposed to be dragged by
|
|
25
|
+
const handleName = option?.handle?.substring(1);
|
|
26
|
+
const n = el.gridstackNode;
|
|
27
|
+
this.dragEls = !handleName || el.classList.contains(handleName) ? [el] : (n?.subGrid ? [el.querySelector(option.handle) || el] : Array.from(el.querySelectorAll(option.handle)));
|
|
28
|
+
if (this.dragEls.length === 0) {
|
|
29
|
+
this.dragEls = [el];
|
|
30
|
+
}
|
|
31
|
+
// create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
|
|
32
|
+
this._mouseDown = this._mouseDown.bind(this);
|
|
33
|
+
this._mouseMove = this._mouseMove.bind(this);
|
|
34
|
+
this._mouseUp = this._mouseUp.bind(this);
|
|
35
|
+
this._keyEvent = this._keyEvent.bind(this);
|
|
36
|
+
this.enable();
|
|
37
|
+
}
|
|
38
|
+
on(event, callback) {
|
|
39
|
+
super.on(event, callback);
|
|
40
|
+
}
|
|
41
|
+
off(event) {
|
|
42
|
+
super.off(event);
|
|
43
|
+
}
|
|
44
|
+
enable() {
|
|
45
|
+
if (this.disabled === false)
|
|
46
|
+
return;
|
|
47
|
+
super.enable();
|
|
48
|
+
this.dragEls.forEach(dragEl => {
|
|
49
|
+
dragEl.addEventListener('mousedown', this._mouseDown);
|
|
50
|
+
if (isTouch) {
|
|
51
|
+
dragEl.addEventListener('touchstart', touchstart);
|
|
52
|
+
dragEl.addEventListener('pointerdown', pointerdown);
|
|
53
|
+
// dragEl.style.touchAction = 'none'; // not needed unlike pointerdown doc comment
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
this.el.classList.remove('ui-draggable-disabled');
|
|
57
|
+
}
|
|
58
|
+
disable(forDestroy = false) {
|
|
59
|
+
if (this.disabled === true)
|
|
60
|
+
return;
|
|
61
|
+
super.disable();
|
|
62
|
+
this.dragEls.forEach(dragEl => {
|
|
63
|
+
dragEl.removeEventListener('mousedown', this._mouseDown);
|
|
64
|
+
if (isTouch) {
|
|
65
|
+
dragEl.removeEventListener('touchstart', touchstart);
|
|
66
|
+
dragEl.removeEventListener('pointerdown', pointerdown);
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
if (!forDestroy)
|
|
70
|
+
this.el.classList.add('ui-draggable-disabled');
|
|
71
|
+
}
|
|
72
|
+
destroy() {
|
|
73
|
+
if (this.dragTimeout)
|
|
74
|
+
window.clearTimeout(this.dragTimeout);
|
|
75
|
+
delete this.dragTimeout;
|
|
76
|
+
if (this.mouseDownEvent)
|
|
77
|
+
this._mouseUp(this.mouseDownEvent);
|
|
78
|
+
this.disable(true);
|
|
79
|
+
delete this.el;
|
|
80
|
+
delete this.helper;
|
|
81
|
+
delete this.option;
|
|
82
|
+
super.destroy();
|
|
83
|
+
}
|
|
84
|
+
updateOption(opts) {
|
|
85
|
+
Object.keys(opts).forEach(key => this.option[key] = opts[key]);
|
|
86
|
+
return this;
|
|
87
|
+
}
|
|
88
|
+
/** @internal call when mouse goes down before a dragstart happens */
|
|
89
|
+
_mouseDown(e) {
|
|
90
|
+
// don't let more than one widget handle mouseStart
|
|
91
|
+
if (DDManager.mouseHandled)
|
|
92
|
+
return;
|
|
93
|
+
if (e.button !== 0)
|
|
94
|
+
return true; // only left click
|
|
95
|
+
// make sure we are not clicking on known object that handles mouseDown, or ones supplied by the user
|
|
96
|
+
if (!this.dragEls.find(el => el === e.target) && e.target.closest(skipMouseDown))
|
|
97
|
+
return true;
|
|
98
|
+
if (this.option.cancel) {
|
|
99
|
+
if (e.target.closest(this.option.cancel))
|
|
100
|
+
return true;
|
|
101
|
+
}
|
|
102
|
+
this.mouseDownEvent = e;
|
|
103
|
+
delete this.dragging;
|
|
104
|
+
delete DDManager.dragElement;
|
|
105
|
+
delete DDManager.dropElement;
|
|
106
|
+
// document handler so we can continue receiving moves as the item is 'fixed' position, and capture=true so WE get a first crack
|
|
107
|
+
document.addEventListener('mousemove', this._mouseMove, { capture: true, passive: true }); // true=capture, not bubble
|
|
108
|
+
document.addEventListener('mouseup', this._mouseUp, true);
|
|
109
|
+
if (isTouch) {
|
|
110
|
+
e.currentTarget.addEventListener('touchmove', touchmove);
|
|
111
|
+
e.currentTarget.addEventListener('touchend', touchend);
|
|
112
|
+
}
|
|
113
|
+
e.preventDefault();
|
|
114
|
+
// preventDefault() prevents blur event which occurs just after mousedown event.
|
|
115
|
+
// if an editable content has focus, then blur must be call
|
|
116
|
+
if (document.activeElement)
|
|
117
|
+
document.activeElement.blur();
|
|
118
|
+
DDManager.mouseHandled = true;
|
|
119
|
+
return true;
|
|
120
|
+
}
|
|
121
|
+
/** @internal method to call actual drag event */
|
|
122
|
+
_callDrag(e) {
|
|
123
|
+
if (!this.dragging)
|
|
124
|
+
return;
|
|
125
|
+
const ev = Utils.initEvent(e, { target: this.el, type: 'drag' });
|
|
126
|
+
if (this.option.drag) {
|
|
127
|
+
this.option.drag(ev, this.ui());
|
|
128
|
+
}
|
|
129
|
+
this.triggerEvent('drag', ev);
|
|
130
|
+
}
|
|
131
|
+
/** @internal called when the main page (after successful mousedown) receives a move event to drag the item around the screen */
|
|
132
|
+
_mouseMove(e) {
|
|
133
|
+
// console.log(`${count++} move ${e.x},${e.y}`)
|
|
134
|
+
const s = this.mouseDownEvent;
|
|
135
|
+
this.lastDrag = e;
|
|
136
|
+
if (this.dragging) {
|
|
137
|
+
this._dragFollow(e);
|
|
138
|
+
// delay actual grid handling drag until we pause for a while if set
|
|
139
|
+
if (DDManager.pauseDrag) {
|
|
140
|
+
const pause = Number.isInteger(DDManager.pauseDrag) ? DDManager.pauseDrag : 100;
|
|
141
|
+
if (this.dragTimeout)
|
|
142
|
+
window.clearTimeout(this.dragTimeout);
|
|
143
|
+
this.dragTimeout = window.setTimeout(() => this._callDrag(e), pause);
|
|
144
|
+
}
|
|
145
|
+
else {
|
|
146
|
+
this._callDrag(e);
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
else if (Math.abs(e.x - s.x) + Math.abs(e.y - s.y) > 3) {
|
|
150
|
+
/**
|
|
151
|
+
* don't start unless we've moved at least 3 pixels
|
|
152
|
+
*/
|
|
153
|
+
this.dragging = true;
|
|
154
|
+
DDManager.dragElement = this;
|
|
155
|
+
// if we're dragging an actual grid item, set the current drop as the grid (to detect enter/leave)
|
|
156
|
+
const grid = this.el.gridstackNode?.grid;
|
|
157
|
+
if (grid) {
|
|
158
|
+
DDManager.dropElement = grid.el.ddElement.ddDroppable;
|
|
159
|
+
}
|
|
160
|
+
else {
|
|
161
|
+
delete DDManager.dropElement;
|
|
162
|
+
}
|
|
163
|
+
this.helper = this._createHelper();
|
|
164
|
+
this._setupHelperContainmentStyle();
|
|
165
|
+
this.dragTransform = Utils.getValuesFromTransformedElement(this.helperContainment);
|
|
166
|
+
this.dragOffset = this._getDragOffset(e, this.el, this.helperContainment);
|
|
167
|
+
this._setupHelperStyle(e);
|
|
168
|
+
const ev = Utils.initEvent(e, { target: this.el, type: 'dragstart' });
|
|
169
|
+
if (this.option.start) {
|
|
170
|
+
this.option.start(ev, this.ui());
|
|
171
|
+
}
|
|
172
|
+
this.triggerEvent('dragstart', ev);
|
|
173
|
+
// now track keyboard events to cancel or rotate
|
|
174
|
+
document.addEventListener('keydown', this._keyEvent);
|
|
175
|
+
}
|
|
176
|
+
// e.preventDefault(); // passive = true. OLD: was needed otherwise we get text sweep text selection as we drag around
|
|
177
|
+
return true;
|
|
178
|
+
}
|
|
179
|
+
/** @internal call when the mouse gets released to drop the item at current location */
|
|
180
|
+
_mouseUp(e) {
|
|
181
|
+
document.removeEventListener('mousemove', this._mouseMove, true);
|
|
182
|
+
document.removeEventListener('mouseup', this._mouseUp, true);
|
|
183
|
+
if (isTouch && e.currentTarget) { // destroy() during nested grid call us again wit fake _mouseUp
|
|
184
|
+
e.currentTarget.removeEventListener('touchmove', touchmove, true);
|
|
185
|
+
e.currentTarget.removeEventListener('touchend', touchend, true);
|
|
186
|
+
}
|
|
187
|
+
if (this.dragging) {
|
|
188
|
+
delete this.dragging;
|
|
189
|
+
delete this.el.gridstackNode?._origRotate;
|
|
190
|
+
document.removeEventListener('keydown', this._keyEvent);
|
|
191
|
+
// reset the drop target if dragging over ourself (already parented, just moving during stop callback below)
|
|
192
|
+
if (DDManager.dropElement?.el === this.el.parentElement) {
|
|
193
|
+
delete DDManager.dropElement;
|
|
194
|
+
}
|
|
195
|
+
this.helperContainment.style.position = this.parentOriginStylePosition || null;
|
|
196
|
+
if (this.helper !== this.el)
|
|
197
|
+
this.helper.remove(); // hide now
|
|
198
|
+
this._removeHelperStyle();
|
|
199
|
+
const ev = Utils.initEvent(e, { target: this.el, type: 'dragstop' });
|
|
200
|
+
if (this.option.stop) {
|
|
201
|
+
this.option.stop(ev); // NOTE: destroy() will be called when removing item, so expect NULL ptr after!
|
|
202
|
+
}
|
|
203
|
+
this.triggerEvent('dragstop', ev);
|
|
204
|
+
// call the droppable method to receive the item
|
|
205
|
+
if (DDManager.dropElement) {
|
|
206
|
+
DDManager.dropElement.drop(e);
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
delete this.helper;
|
|
210
|
+
delete this.mouseDownEvent;
|
|
211
|
+
delete DDManager.dragElement;
|
|
212
|
+
delete DDManager.dropElement;
|
|
213
|
+
delete DDManager.mouseHandled;
|
|
214
|
+
e.preventDefault();
|
|
215
|
+
}
|
|
216
|
+
/** @internal call when keys are being pressed - use Esc to cancel, R to rotate */
|
|
217
|
+
_keyEvent(e) {
|
|
218
|
+
const n = this.el.gridstackNode;
|
|
219
|
+
const grid = n?.grid || DDManager.dropElement?.el?.gridstack;
|
|
220
|
+
if (e.key === 'Escape') {
|
|
221
|
+
if (n && n._origRotate) {
|
|
222
|
+
n._orig = n._origRotate;
|
|
223
|
+
delete n._origRotate;
|
|
224
|
+
}
|
|
225
|
+
grid?.cancelDrag();
|
|
226
|
+
this._mouseUp(this.mouseDownEvent);
|
|
227
|
+
}
|
|
228
|
+
else if (n && grid && (e.key === 'r' || e.key === 'R')) {
|
|
229
|
+
if (!Utils.canBeRotated(n))
|
|
230
|
+
return;
|
|
231
|
+
n._origRotate = n._origRotate || { ...n._orig }; // store the real orig size in case we Esc after doing rotation
|
|
232
|
+
delete n._moving; // force rotate to happen (move waits for >50% coverage otherwise)
|
|
233
|
+
grid.setAnimation(false) // immediate rotate so _getDragOffset() gets the right dom size below
|
|
234
|
+
.rotate(n.el, { top: -this.dragOffset.offsetTop, left: -this.dragOffset.offsetLeft })
|
|
235
|
+
.setAnimation();
|
|
236
|
+
n._moving = true;
|
|
237
|
+
this.dragOffset = this._getDragOffset(this.lastDrag, n.el, this.helperContainment);
|
|
238
|
+
this.helper.style.width = this.dragOffset.width + 'px';
|
|
239
|
+
this.helper.style.height = this.dragOffset.height + 'px';
|
|
240
|
+
Utils.swap(n._orig, 'w', 'h');
|
|
241
|
+
delete n._rect;
|
|
242
|
+
this._mouseMove(this.lastDrag);
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
/** @internal create a clone copy (or user defined method) of the original drag item if set */
|
|
246
|
+
_createHelper() {
|
|
247
|
+
let helper = this.el;
|
|
248
|
+
if (typeof this.option.helper === 'function') {
|
|
249
|
+
helper = this.option.helper(this.el);
|
|
250
|
+
}
|
|
251
|
+
else if (this.option.helper === 'clone') {
|
|
252
|
+
helper = Utils.cloneNode(this.el);
|
|
253
|
+
}
|
|
254
|
+
if (!helper.parentElement) {
|
|
255
|
+
Utils.appendTo(helper, this.option.appendTo === 'parent' ? this.el.parentElement : this.option.appendTo);
|
|
256
|
+
}
|
|
257
|
+
this.dragElementOriginStyle = DDDraggable.originStyleProp.map(prop => this.el.style[prop]);
|
|
258
|
+
return helper;
|
|
259
|
+
}
|
|
260
|
+
/** @internal set the fix position of the dragged item */
|
|
261
|
+
_setupHelperStyle(e) {
|
|
262
|
+
this.helper.classList.add('ui-draggable-dragging');
|
|
263
|
+
this.el.gridstackNode?.grid?.el.classList.add('grid-stack-dragging');
|
|
264
|
+
// TODO: set all at once with style.cssText += ... ? https://stackoverflow.com/questions/3968593
|
|
265
|
+
const style = this.helper.style;
|
|
266
|
+
style.pointerEvents = 'none'; // needed for over items to get enter/leave
|
|
267
|
+
// style.cursor = 'move'; // TODO: can't set with pointerEvents=none ! (no longer in CSS either as no-op)
|
|
268
|
+
style.width = this.dragOffset.width + 'px';
|
|
269
|
+
style.height = this.dragOffset.height + 'px';
|
|
270
|
+
style.willChange = 'left, top';
|
|
271
|
+
style.position = 'fixed'; // let us drag between grids by not clipping as parent .grid-stack is position: 'relative'
|
|
272
|
+
this._dragFollow(e); // now position it
|
|
273
|
+
style.transition = 'none'; // show up instantly
|
|
274
|
+
setTimeout(() => {
|
|
275
|
+
if (this.helper) {
|
|
276
|
+
style.transition = null; // recover animation
|
|
277
|
+
}
|
|
278
|
+
}, 0);
|
|
279
|
+
return this;
|
|
280
|
+
}
|
|
281
|
+
/** @internal restore back the original style before dragging */
|
|
282
|
+
_removeHelperStyle() {
|
|
283
|
+
this.helper.classList.remove('ui-draggable-dragging');
|
|
284
|
+
this.el.gridstackNode?.grid?.el.classList.remove('grid-stack-dragging');
|
|
285
|
+
const node = this.helper?.gridstackNode;
|
|
286
|
+
// don't bother restoring styles if we're gonna remove anyway...
|
|
287
|
+
if (!node?._isAboutToRemove && this.dragElementOriginStyle) {
|
|
288
|
+
const helper = this.helper;
|
|
289
|
+
// don't animate, otherwise we animate offseted when switching back to 'absolute' from 'fixed'.
|
|
290
|
+
// TODO: this also removes resizing animation which doesn't have this issue, but others.
|
|
291
|
+
// Ideally both would animate ('move' would immediately restore 'absolute' and adjust coordinate to match,
|
|
292
|
+
// then trigger a delay (repaint) to restore to final dest with animate) but then we need to make sure 'resizestop'
|
|
293
|
+
// is called AFTER 'transitionend' event is received (see https://github.com/gridstack/gridstack.js/issues/2033)
|
|
294
|
+
const transition = this.dragElementOriginStyle['transition'] || null;
|
|
295
|
+
helper.style.transition = this.dragElementOriginStyle['transition'] = 'none'; // can't be NULL #1973
|
|
296
|
+
DDDraggable.originStyleProp.forEach(prop => helper.style[prop] = this.dragElementOriginStyle[prop] || null);
|
|
297
|
+
setTimeout(() => helper.style.transition = transition, 50); // recover animation from saved vars after a pause (0 isn't enough #1973)
|
|
298
|
+
}
|
|
299
|
+
delete this.dragElementOriginStyle;
|
|
300
|
+
return this;
|
|
301
|
+
}
|
|
302
|
+
/** @internal updates the top/left position to follow the mouse */
|
|
303
|
+
_dragFollow(e) {
|
|
304
|
+
const containmentRect = { left: 0, top: 0 };
|
|
305
|
+
// if (this.helper.style.position === 'absolute') { // we use 'fixed'
|
|
306
|
+
// const { left, top } = this.helperContainment.getBoundingClientRect();
|
|
307
|
+
// containmentRect = { left, top };
|
|
308
|
+
// }
|
|
309
|
+
const style = this.helper.style;
|
|
310
|
+
const offset = this.dragOffset;
|
|
311
|
+
style.left = (e.clientX + offset.offsetLeft - containmentRect.left) * this.dragTransform.xScale + 'px';
|
|
312
|
+
style.top = (e.clientY + offset.offsetTop - containmentRect.top) * this.dragTransform.yScale + 'px';
|
|
313
|
+
}
|
|
314
|
+
/** @internal */
|
|
315
|
+
_setupHelperContainmentStyle() {
|
|
316
|
+
this.helperContainment = this.helper.parentElement;
|
|
317
|
+
if (this.helper.style.position !== 'fixed') {
|
|
318
|
+
this.parentOriginStylePosition = this.helperContainment.style.position;
|
|
319
|
+
if (getComputedStyle(this.helperContainment).position.match(/static/)) {
|
|
320
|
+
this.helperContainment.style.position = 'relative';
|
|
321
|
+
}
|
|
322
|
+
}
|
|
323
|
+
return this;
|
|
324
|
+
}
|
|
325
|
+
/** @internal */
|
|
326
|
+
_getDragOffset(event, el, parent) {
|
|
327
|
+
// in case ancestor has transform/perspective css properties that change the viewpoint
|
|
328
|
+
let xformOffsetX = 0;
|
|
329
|
+
let xformOffsetY = 0;
|
|
330
|
+
if (parent) {
|
|
331
|
+
xformOffsetX = this.dragTransform.xOffset;
|
|
332
|
+
xformOffsetY = this.dragTransform.yOffset;
|
|
333
|
+
}
|
|
334
|
+
const targetOffset = el.getBoundingClientRect();
|
|
335
|
+
return {
|
|
336
|
+
left: targetOffset.left,
|
|
337
|
+
top: targetOffset.top,
|
|
338
|
+
offsetLeft: -event.clientX + targetOffset.left - xformOffsetX,
|
|
339
|
+
offsetTop: -event.clientY + targetOffset.top - xformOffsetY,
|
|
340
|
+
width: targetOffset.width * this.dragTransform.xScale,
|
|
341
|
+
height: targetOffset.height * this.dragTransform.yScale
|
|
342
|
+
};
|
|
343
|
+
}
|
|
344
|
+
/** @internal TODO: set to public as called by DDDroppable! */
|
|
345
|
+
ui() {
|
|
346
|
+
const containmentEl = this.el.parentElement;
|
|
347
|
+
const containmentRect = containmentEl.getBoundingClientRect();
|
|
348
|
+
const offset = this.helper.getBoundingClientRect();
|
|
349
|
+
return {
|
|
350
|
+
position: {
|
|
351
|
+
top: (offset.top - containmentRect.top) * this.dragTransform.yScale,
|
|
352
|
+
left: (offset.left - containmentRect.left) * this.dragTransform.xScale
|
|
353
|
+
}
|
|
354
|
+
/* not used by GridStack for now...
|
|
355
|
+
helper: [this.helper], //The object arr representing the helper that's being dragged.
|
|
356
|
+
offset: { top: offset.top, left: offset.left } // Current offset position of the helper as { top, left } object.
|
|
357
|
+
*/
|
|
358
|
+
};
|
|
359
|
+
}
|
|
360
|
+
}
|
|
361
|
+
/** @internal properties we change during dragging, and restore back */
|
|
362
|
+
DDDraggable.originStyleProp = ['width', 'height', 'transform', 'transform-origin', 'transition', 'pointerEvents', 'position', 'left', 'top', 'minWidth', 'willChange'];
|
|
363
|
+
export { DDDraggable };
|
|
364
|
+
//# sourceMappingURL=dd-draggable.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dd-draggable.js","sourceRoot":"","sources":["../../src/dd-draggable.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * dd-draggable.ts 12.3.3\n * Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license\n */\n\nimport { DDManager } from './dd-manager';\nimport { DragTransform, Utils } from './utils';\nimport { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';\nimport { GridItemHTMLElement, DDUIData, GridStackNode, GridStackPosition, DDDragOpt } from './types';\nimport { DDElementHost } from './dd-element';\nimport { isTouch, touchend, touchmove, touchstart, pointerdown } from './dd-touch';\nimport { GridHTMLElement } from './gridstack';\n\ninterface DragOffset {\n left: number;\n top: number;\n width: number;\n height: number;\n offsetLeft: number;\n offsetTop: number;\n}\n\ninterface GridStackNodeRotate extends GridStackNode {\n _origRotate?: GridStackPosition;\n}\n\ntype DDDragEvent = 'drag' | 'dragstart' | 'dragstop';\n\n// make sure we are not clicking on known object that handles mouseDown\nconst skipMouseDown = 'input,textarea,button,select,option,[contenteditable=\"true\"],.ui-resizable-handle';\n\n// let count = 0; // TEST\n\nexport class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt<DDDragOpt> {\n public helper: HTMLElement; // used by GridStackDDNative\n\n /** @internal */\n protected mouseDownEvent: MouseEvent;\n /** @internal */\n protected dragOffset: DragOffset;\n /** @internal */\n protected dragElementOriginStyle: Array<string>;\n /** @internal */\n protected dragEls: HTMLElement[];\n /** @internal true while we are dragging an item around */\n protected dragging: boolean;\n /** @internal last drag event */\n protected lastDrag: DragEvent;\n /** @internal */\n protected parentOriginStylePosition: string;\n /** @internal */\n protected helperContainment: HTMLElement;\n /** @internal properties we change during dragging, and restore back */\n protected static originStyleProp = ['width', 'height', 'transform', 'transform-origin', 'transition', 'pointerEvents', 'position', 'left', 'top', 'minWidth', 'willChange'];\n /** @internal pause before we call the actual drag hit collision code */\n protected dragTimeout: number;\n /** @internal */\n protected dragTransform: DragTransform = {\n xScale: 1,\n yScale: 1,\n xOffset: 0,\n yOffset: 0\n };\n\n constructor(public el: GridItemHTMLElement, public option: DDDragOpt = {}) {\n super();\n\n // get the element that is actually supposed to be dragged by\n const handleName = option?.handle?.substring(1);\n const n = el.gridstackNode;\n this.dragEls = !handleName || el.classList.contains(handleName) ? [el] : (n?.subGrid ? [el.querySelector(option.handle) || el] : Array.from(el.querySelectorAll(option.handle)));\n if (this.dragEls.length === 0) {\n this.dragEls = [el];\n }\n // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)\n this._mouseDown = this._mouseDown.bind(this);\n this._mouseMove = this._mouseMove.bind(this);\n this._mouseUp = this._mouseUp.bind(this);\n this._keyEvent = this._keyEvent.bind(this);\n this.enable();\n }\n\n public on(event: DDDragEvent, callback: (event: DragEvent) => void): void {\n super.on(event, callback);\n }\n\n public off(event: DDDragEvent): void {\n super.off(event);\n }\n\n public enable(): void {\n if (this.disabled === false) return;\n super.enable();\n this.dragEls.forEach(dragEl => {\n dragEl.addEventListener('mousedown', this._mouseDown);\n if (isTouch) {\n dragEl.addEventListener('touchstart', touchstart);\n dragEl.addEventListener('pointerdown', pointerdown);\n // dragEl.style.touchAction = 'none'; // not needed unlike pointerdown doc comment\n }\n });\n this.el.classList.remove('ui-draggable-disabled');\n }\n\n public disable(forDestroy = false): void {\n if (this.disabled === true) return;\n super.disable();\n this.dragEls.forEach(dragEl => {\n dragEl.removeEventListener('mousedown', this._mouseDown);\n if (isTouch) {\n dragEl.removeEventListener('touchstart', touchstart);\n dragEl.removeEventListener('pointerdown', pointerdown);\n }\n });\n if (!forDestroy) this.el.classList.add('ui-draggable-disabled');\n }\n\n public destroy(): void {\n if (this.dragTimeout) window.clearTimeout(this.dragTimeout);\n delete this.dragTimeout;\n if (this.mouseDownEvent) this._mouseUp(this.mouseDownEvent);\n this.disable(true);\n delete this.el;\n delete this.helper;\n delete this.option;\n super.destroy();\n }\n\n public updateOption(opts: DDDragOpt): DDDraggable {\n Object.keys(opts).forEach(key => this.option[key] = opts[key]);\n return this;\n }\n\n /** @internal call when mouse goes down before a dragstart happens */\n protected _mouseDown(e: MouseEvent): boolean {\n // don't let more than one widget handle mouseStart\n if (DDManager.mouseHandled) return;\n if (e.button !== 0) return true; // only left click\n\n // make sure we are not clicking on known object that handles mouseDown, or ones supplied by the user\n if (!this.dragEls.find(el => el === e.target) && (e.target as HTMLElement).closest(skipMouseDown)) return true;\n if (this.option.cancel) {\n if ((e.target as HTMLElement).closest(this.option.cancel)) return true;\n }\n\n this.mouseDownEvent = e;\n delete this.dragging;\n delete DDManager.dragElement;\n delete DDManager.dropElement;\n // document handler so we can continue receiving moves as the item is 'fixed' position, and capture=true so WE get a first crack\n document.addEventListener('mousemove', this._mouseMove, { capture: true, passive: true }); // true=capture, not bubble\n document.addEventListener('mouseup', this._mouseUp, true);\n if (isTouch) {\n e.currentTarget.addEventListener('touchmove', touchmove);\n e.currentTarget.addEventListener('touchend', touchend);\n }\n\n e.preventDefault();\n // preventDefault() prevents blur event which occurs just after mousedown event.\n // if an editable content has focus, then blur must be call\n if (document.activeElement) (document.activeElement as HTMLElement).blur();\n\n DDManager.mouseHandled = true;\n return true;\n }\n\n /** @internal method to call actual drag event */\n protected _callDrag(e: DragEvent): void {\n if (!this.dragging) return;\n const ev = Utils.initEvent<DragEvent>(e, { target: this.el, type: 'drag' });\n if (this.option.drag) {\n this.option.drag(ev, this.ui());\n }\n this.triggerEvent('drag', ev);\n }\n\n /** @internal called when the main page (after successful mousedown) receives a move event to drag the item around the screen */\n protected _mouseMove(e: DragEvent): boolean {\n // console.log(`${count++} move ${e.x},${e.y}`)\n const s = this.mouseDownEvent;\n this.lastDrag = e;\n\n if (this.dragging) {\n this._dragFollow(e);\n // delay actual grid handling drag until we pause for a while if set\n if (DDManager.pauseDrag) {\n const pause = Number.isInteger(DDManager.pauseDrag) ? DDManager.pauseDrag as number : 100;\n if (this.dragTimeout) window.clearTimeout(this.dragTimeout);\n this.dragTimeout = window.setTimeout(() => this._callDrag(e), pause);\n } else {\n this._callDrag(e);\n }\n } else if (Math.abs(e.x - s.x) + Math.abs(e.y - s.y) > 3) {\n /**\n * don't start unless we've moved at least 3 pixels\n */\n this.dragging = true;\n DDManager.dragElement = this;\n // if we're dragging an actual grid item, set the current drop as the grid (to detect enter/leave)\n const grid = this.el.gridstackNode?.grid;\n if (grid) {\n DDManager.dropElement = (grid.el as DDElementHost).ddElement.ddDroppable;\n } else {\n delete DDManager.dropElement;\n }\n this.helper = this._createHelper();\n this._setupHelperContainmentStyle();\n this.dragTransform = Utils.getValuesFromTransformedElement(this.helperContainment);\n this.dragOffset = this._getDragOffset(e, this.el, this.helperContainment);\n this._setupHelperStyle(e);\n\n const ev = Utils.initEvent<DragEvent>(e, { target: this.el, type: 'dragstart' });\n if (this.option.start) {\n this.option.start(ev, this.ui());\n }\n this.triggerEvent('dragstart', ev);\n // now track keyboard events to cancel or rotate\n document.addEventListener('keydown', this._keyEvent);\n }\n // e.preventDefault(); // passive = true. OLD: was needed otherwise we get text sweep text selection as we drag around\n return true;\n }\n\n /** @internal call when the mouse gets released to drop the item at current location */\n protected _mouseUp(e: MouseEvent): void {\n document.removeEventListener('mousemove', this._mouseMove, true);\n document.removeEventListener('mouseup', this._mouseUp, true);\n if (isTouch && e.currentTarget) { // destroy() during nested grid call us again wit fake _mouseUp\n e.currentTarget.removeEventListener('touchmove', touchmove, true);\n e.currentTarget.removeEventListener('touchend', touchend, true);\n }\n if (this.dragging) {\n delete this.dragging;\n delete (this.el.gridstackNode as GridStackNodeRotate)?._origRotate;\n document.removeEventListener('keydown', this._keyEvent);\n\n // reset the drop target if dragging over ourself (already parented, just moving during stop callback below)\n if (DDManager.dropElement?.el === this.el.parentElement) {\n delete DDManager.dropElement;\n }\n\n this.helperContainment.style.position = this.parentOriginStylePosition || null;\n if (this.helper !== this.el) this.helper.remove(); // hide now\n this._removeHelperStyle();\n\n const ev = Utils.initEvent<DragEvent>(e, { target: this.el, type: 'dragstop' });\n if (this.option.stop) {\n this.option.stop(ev); // NOTE: destroy() will be called when removing item, so expect NULL ptr after!\n }\n this.triggerEvent('dragstop', ev);\n\n // call the droppable method to receive the item\n if (DDManager.dropElement) {\n DDManager.dropElement.drop(e);\n }\n }\n delete this.helper;\n delete this.mouseDownEvent;\n delete DDManager.dragElement;\n delete DDManager.dropElement;\n delete DDManager.mouseHandled;\n e.preventDefault();\n }\n\n /** @internal call when keys are being pressed - use Esc to cancel, R to rotate */\n protected _keyEvent(e: KeyboardEvent): void {\n const n = this.el.gridstackNode as GridStackNodeRotate;\n const grid = n?.grid || (DDManager.dropElement?.el as GridHTMLElement)?.gridstack;\n\n if (e.key === 'Escape') {\n if (n && n._origRotate) {\n n._orig = n._origRotate;\n delete n._origRotate;\n }\n grid?.cancelDrag();\n this._mouseUp(this.mouseDownEvent);\n } else if (n && grid && (e.key === 'r' || e.key === 'R')) {\n if (!Utils.canBeRotated(n)) return;\n n._origRotate = n._origRotate || { ...n._orig }; // store the real orig size in case we Esc after doing rotation\n delete n._moving; // force rotate to happen (move waits for >50% coverage otherwise)\n grid.setAnimation(false) // immediate rotate so _getDragOffset() gets the right dom size below\n .rotate(n.el, { top: -this.dragOffset.offsetTop, left: -this.dragOffset.offsetLeft })\n .setAnimation();\n n._moving = true;\n this.dragOffset = this._getDragOffset(this.lastDrag, n.el, this.helperContainment);\n this.helper.style.width = this.dragOffset.width + 'px';\n this.helper.style.height = this.dragOffset.height + 'px';\n Utils.swap(n._orig, 'w', 'h');\n delete n._rect;\n this._mouseMove(this.lastDrag);\n }\n }\n\n /** @internal create a clone copy (or user defined method) of the original drag item if set */\n protected _createHelper(): HTMLElement {\n let helper = this.el;\n if (typeof this.option.helper === 'function') {\n helper = this.option.helper(this.el);\n } else if (this.option.helper === 'clone') {\n helper = Utils.cloneNode(this.el);\n }\n if (!helper.parentElement) {\n Utils.appendTo(helper, this.option.appendTo === 'parent' ? this.el.parentElement : this.option.appendTo);\n }\n this.dragElementOriginStyle = DDDraggable.originStyleProp.map(prop => this.el.style[prop]);\n return helper;\n }\n\n /** @internal set the fix position of the dragged item */\n protected _setupHelperStyle(e: DragEvent): DDDraggable {\n this.helper.classList.add('ui-draggable-dragging');\n this.el.gridstackNode?.grid?.el.classList.add('grid-stack-dragging');\n // TODO: set all at once with style.cssText += ... ? https://stackoverflow.com/questions/3968593\n const style = this.helper.style;\n style.pointerEvents = 'none'; // needed for over items to get enter/leave\n // style.cursor = 'move'; // TODO: can't set with pointerEvents=none ! (no longer in CSS either as no-op)\n style.width = this.dragOffset.width + 'px';\n style.height = this.dragOffset.height + 'px';\n style.willChange = 'left, top';\n style.position = 'fixed'; // let us drag between grids by not clipping as parent .grid-stack is position: 'relative'\n this._dragFollow(e); // now position it\n style.transition = 'none'; // show up instantly\n setTimeout(() => {\n if (this.helper) {\n style.transition = null; // recover animation\n }\n }, 0);\n return this;\n }\n\n /** @internal restore back the original style before dragging */\n protected _removeHelperStyle(): DDDraggable {\n this.helper.classList.remove('ui-draggable-dragging');\n this.el.gridstackNode?.grid?.el.classList.remove('grid-stack-dragging');\n const node = (this.helper as GridItemHTMLElement)?.gridstackNode;\n // don't bother restoring styles if we're gonna remove anyway...\n if (!node?._isAboutToRemove && this.dragElementOriginStyle) {\n const helper = this.helper;\n // don't animate, otherwise we animate offseted when switching back to 'absolute' from 'fixed'.\n // TODO: this also removes resizing animation which doesn't have this issue, but others.\n // Ideally both would animate ('move' would immediately restore 'absolute' and adjust coordinate to match,\n // then trigger a delay (repaint) to restore to final dest with animate) but then we need to make sure 'resizestop'\n // is called AFTER 'transitionend' event is received (see https://github.com/gridstack/gridstack.js/issues/2033)\n const transition = this.dragElementOriginStyle['transition'] || null;\n helper.style.transition = this.dragElementOriginStyle['transition'] = 'none'; // can't be NULL #1973\n DDDraggable.originStyleProp.forEach(prop => helper.style[prop] = this.dragElementOriginStyle[prop] || null);\n setTimeout(() => helper.style.transition = transition, 50); // recover animation from saved vars after a pause (0 isn't enough #1973)\n }\n delete this.dragElementOriginStyle;\n return this;\n }\n\n /** @internal updates the top/left position to follow the mouse */\n protected _dragFollow(e: DragEvent): void {\n const containmentRect = { left: 0, top: 0 };\n // if (this.helper.style.position === 'absolute') { // we use 'fixed'\n // const { left, top } = this.helperContainment.getBoundingClientRect();\n // containmentRect = { left, top };\n // }\n const style = this.helper.style;\n const offset = this.dragOffset;\n style.left = (e.clientX + offset.offsetLeft - containmentRect.left) * this.dragTransform.xScale + 'px';\n style.top = (e.clientY + offset.offsetTop - containmentRect.top) * this.dragTransform.yScale + 'px';\n }\n\n /** @internal */\n protected _setupHelperContainmentStyle(): DDDraggable {\n this.helperContainment = this.helper.parentElement;\n if (this.helper.style.position !== 'fixed') {\n this.parentOriginStylePosition = this.helperContainment.style.position;\n if (getComputedStyle(this.helperContainment).position.match(/static/)) {\n this.helperContainment.style.position = 'relative';\n }\n }\n return this;\n }\n\n /** @internal */\n protected _getDragOffset(event: DragEvent, el: HTMLElement, parent: HTMLElement): DragOffset {\n\n // in case ancestor has transform/perspective css properties that change the viewpoint\n let xformOffsetX = 0;\n let xformOffsetY = 0;\n if (parent) {\n xformOffsetX = this.dragTransform.xOffset;\n xformOffsetY = this.dragTransform.yOffset;\n }\n\n const targetOffset = el.getBoundingClientRect();\n return {\n left: targetOffset.left,\n top: targetOffset.top,\n offsetLeft: - event.clientX + targetOffset.left - xformOffsetX,\n offsetTop: - event.clientY + targetOffset.top - xformOffsetY,\n width: targetOffset.width * this.dragTransform.xScale,\n height: targetOffset.height * this.dragTransform.yScale\n };\n }\n\n /** @internal TODO: set to public as called by DDDroppable! */\n public ui(): DDUIData {\n const containmentEl = this.el.parentElement;\n const containmentRect = containmentEl.getBoundingClientRect();\n const offset = this.helper.getBoundingClientRect();\n return {\n position: { //Current CSS position of the helper as { top, left } object\n top: (offset.top - containmentRect.top) * this.dragTransform.yScale,\n left: (offset.left - containmentRect.left) * this.dragTransform.xScale\n }\n /* not used by GridStack for now...\n helper: [this.helper], //The object arr representing the helper that's being dragged.\n offset: { top: offset.top, left: offset.left } // Current offset position of the helper as { top, left } object.\n */\n };\n }\n}\n"]}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* dd-droppable.ts 12.3.3
|
|
3
|
+
* Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license
|
|
4
|
+
*/
|
|
5
|
+
import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';
|
|
6
|
+
import { DDUIData } from './types';
|
|
7
|
+
export interface DDDroppableOpt {
|
|
8
|
+
accept?: string | ((el: HTMLElement) => boolean);
|
|
9
|
+
drop?: (event: DragEvent, ui: DDUIData) => void;
|
|
10
|
+
over?: (event: DragEvent, ui: DDUIData) => void;
|
|
11
|
+
out?: (event: DragEvent, ui: DDUIData) => void;
|
|
12
|
+
}
|
|
13
|
+
export declare class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt<DDDroppableOpt> {
|
|
14
|
+
el: HTMLElement;
|
|
15
|
+
option: DDDroppableOpt;
|
|
16
|
+
accept: (el: HTMLElement) => boolean;
|
|
17
|
+
constructor(el: HTMLElement, option?: DDDroppableOpt);
|
|
18
|
+
on(event: 'drop' | 'dropover' | 'dropout', callback: (event: DragEvent) => void): void;
|
|
19
|
+
off(event: 'drop' | 'dropover' | 'dropout'): void;
|
|
20
|
+
enable(): void;
|
|
21
|
+
disable(forDestroy?: boolean): void;
|
|
22
|
+
destroy(): void;
|
|
23
|
+
updateOption(opts: DDDroppableOpt): DDDroppable;
|
|
24
|
+
/** item is being dropped on us - called by the drag mouseup handler - this calls the client drop event */
|
|
25
|
+
drop(e: MouseEvent): void;
|
|
26
|
+
}
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* dd-droppable.ts 12.3.3
|
|
3
|
+
* Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license
|
|
4
|
+
*/
|
|
5
|
+
import { DDManager } from './dd-manager';
|
|
6
|
+
import { DDBaseImplement } from './dd-base-impl';
|
|
7
|
+
import { Utils } from './utils';
|
|
8
|
+
import { isTouch, pointerenter, pointerleave } from './dd-touch';
|
|
9
|
+
// let count = 0; // TEST
|
|
10
|
+
export class DDDroppable extends DDBaseImplement {
|
|
11
|
+
constructor(el, option = {}) {
|
|
12
|
+
super();
|
|
13
|
+
this.el = el;
|
|
14
|
+
this.option = option;
|
|
15
|
+
// create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
|
|
16
|
+
this._mouseEnter = this._mouseEnter.bind(this);
|
|
17
|
+
this._mouseLeave = this._mouseLeave.bind(this);
|
|
18
|
+
this.enable();
|
|
19
|
+
this._setupAccept();
|
|
20
|
+
}
|
|
21
|
+
on(event, callback) {
|
|
22
|
+
super.on(event, callback);
|
|
23
|
+
}
|
|
24
|
+
off(event) {
|
|
25
|
+
super.off(event);
|
|
26
|
+
}
|
|
27
|
+
enable() {
|
|
28
|
+
if (this.disabled === false)
|
|
29
|
+
return;
|
|
30
|
+
super.enable();
|
|
31
|
+
this.el.classList.add('ui-droppable');
|
|
32
|
+
this.el.classList.remove('ui-droppable-disabled');
|
|
33
|
+
this.el.addEventListener('mouseenter', this._mouseEnter);
|
|
34
|
+
this.el.addEventListener('mouseleave', this._mouseLeave);
|
|
35
|
+
if (isTouch) {
|
|
36
|
+
this.el.addEventListener('pointerenter', pointerenter);
|
|
37
|
+
this.el.addEventListener('pointerleave', pointerleave);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
disable(forDestroy = false) {
|
|
41
|
+
if (this.disabled === true)
|
|
42
|
+
return;
|
|
43
|
+
super.disable();
|
|
44
|
+
this.el.classList.remove('ui-droppable');
|
|
45
|
+
if (!forDestroy)
|
|
46
|
+
this.el.classList.add('ui-droppable-disabled');
|
|
47
|
+
this.el.removeEventListener('mouseenter', this._mouseEnter);
|
|
48
|
+
this.el.removeEventListener('mouseleave', this._mouseLeave);
|
|
49
|
+
if (isTouch) {
|
|
50
|
+
this.el.removeEventListener('pointerenter', pointerenter);
|
|
51
|
+
this.el.removeEventListener('pointerleave', pointerleave);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
destroy() {
|
|
55
|
+
this.disable(true);
|
|
56
|
+
this.el.classList.remove('ui-droppable');
|
|
57
|
+
this.el.classList.remove('ui-droppable-disabled');
|
|
58
|
+
super.destroy();
|
|
59
|
+
}
|
|
60
|
+
updateOption(opts) {
|
|
61
|
+
Object.keys(opts).forEach(key => this.option[key] = opts[key]);
|
|
62
|
+
this._setupAccept();
|
|
63
|
+
return this;
|
|
64
|
+
}
|
|
65
|
+
/** @internal called when the cursor enters our area - prepare for a possible drop and track leaving */
|
|
66
|
+
_mouseEnter(e) {
|
|
67
|
+
// console.log(`${count++} Enter ${this.el.id || (this.el as GridHTMLElement).gridstack.opts.id}`); // TEST
|
|
68
|
+
if (!DDManager.dragElement)
|
|
69
|
+
return;
|
|
70
|
+
if (!this._canDrop(DDManager.dragElement.el))
|
|
71
|
+
return;
|
|
72
|
+
e.preventDefault();
|
|
73
|
+
e.stopPropagation();
|
|
74
|
+
// make sure when we enter this, that the last one gets a leave FIRST to correctly cleanup as we don't always do
|
|
75
|
+
if (DDManager.dropElement && DDManager.dropElement !== this) {
|
|
76
|
+
DDManager.dropElement._mouseLeave(e, true); // calledByEnter = true
|
|
77
|
+
}
|
|
78
|
+
DDManager.dropElement = this;
|
|
79
|
+
const ev = Utils.initEvent(e, { target: this.el, type: 'dropover' });
|
|
80
|
+
if (this.option.over) {
|
|
81
|
+
this.option.over(ev, this._ui(DDManager.dragElement));
|
|
82
|
+
}
|
|
83
|
+
this.triggerEvent('dropover', ev);
|
|
84
|
+
this.el.classList.add('ui-droppable-over');
|
|
85
|
+
// console.log('tracking'); // TEST
|
|
86
|
+
}
|
|
87
|
+
/** @internal called when the item is leaving our area, stop tracking if we had moving item */
|
|
88
|
+
_mouseLeave(e, calledByEnter = false) {
|
|
89
|
+
// console.log(`${count++} Leave ${this.el.id || (this.el as GridHTMLElement).gridstack.opts.id}`); // TEST
|
|
90
|
+
if (!DDManager.dragElement || DDManager.dropElement !== this)
|
|
91
|
+
return;
|
|
92
|
+
e.preventDefault();
|
|
93
|
+
e.stopPropagation();
|
|
94
|
+
const ev = Utils.initEvent(e, { target: this.el, type: 'dropout' });
|
|
95
|
+
if (this.option.out) {
|
|
96
|
+
this.option.out(ev, this._ui(DDManager.dragElement));
|
|
97
|
+
}
|
|
98
|
+
this.triggerEvent('dropout', ev);
|
|
99
|
+
if (DDManager.dropElement === this) {
|
|
100
|
+
delete DDManager.dropElement;
|
|
101
|
+
// console.log('not tracking'); // TEST
|
|
102
|
+
// if we're still over a parent droppable, send it an enter as we don't get one from leaving nested children
|
|
103
|
+
if (!calledByEnter) {
|
|
104
|
+
let parentDrop;
|
|
105
|
+
let parent = this.el.parentElement;
|
|
106
|
+
while (!parentDrop && parent) {
|
|
107
|
+
parentDrop = parent.ddElement?.ddDroppable;
|
|
108
|
+
parent = parent.parentElement;
|
|
109
|
+
}
|
|
110
|
+
if (parentDrop) {
|
|
111
|
+
parentDrop._mouseEnter(e);
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
/** item is being dropped on us - called by the drag mouseup handler - this calls the client drop event */
|
|
117
|
+
drop(e) {
|
|
118
|
+
e.preventDefault();
|
|
119
|
+
const ev = Utils.initEvent(e, { target: this.el, type: 'drop' });
|
|
120
|
+
if (this.option.drop) {
|
|
121
|
+
this.option.drop(ev, this._ui(DDManager.dragElement));
|
|
122
|
+
}
|
|
123
|
+
this.triggerEvent('drop', ev);
|
|
124
|
+
}
|
|
125
|
+
/** @internal true if element matches the string/method accept option */
|
|
126
|
+
_canDrop(el) {
|
|
127
|
+
return el && (!this.accept || this.accept(el));
|
|
128
|
+
}
|
|
129
|
+
/** @internal */
|
|
130
|
+
_setupAccept() {
|
|
131
|
+
if (!this.option.accept)
|
|
132
|
+
return this;
|
|
133
|
+
if (typeof this.option.accept === 'string') {
|
|
134
|
+
this.accept = (el) => el.classList.contains(this.option.accept) || el.matches(this.option.accept);
|
|
135
|
+
}
|
|
136
|
+
else {
|
|
137
|
+
this.accept = this.option.accept;
|
|
138
|
+
}
|
|
139
|
+
return this;
|
|
140
|
+
}
|
|
141
|
+
/** @internal */
|
|
142
|
+
_ui(drag) {
|
|
143
|
+
return {
|
|
144
|
+
draggable: drag.el,
|
|
145
|
+
...drag.ui()
|
|
146
|
+
};
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
//# sourceMappingURL=dd-droppable.js.map
|