gridstack 7.1.1 → 7.1.2

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.
Files changed (94) hide show
  1. package/README.md +3 -2
  2. package/dist/angular/README.md +57 -0
  3. package/dist/angular/gridstack-item.component.ts +61 -0
  4. package/dist/angular/gridstack.component.ts +165 -0
  5. package/dist/dd-base-impl.d.ts +1 -1
  6. package/dist/dd-base-impl.js +1 -1
  7. package/dist/dd-base-impl.js.map +1 -1
  8. package/dist/dd-draggable.d.ts +1 -1
  9. package/dist/dd-draggable.js +1 -1
  10. package/dist/dd-draggable.js.map +1 -1
  11. package/dist/dd-droppable.d.ts +1 -1
  12. package/dist/dd-droppable.js +1 -1
  13. package/dist/dd-droppable.js.map +1 -1
  14. package/dist/dd-element.d.ts +1 -1
  15. package/dist/dd-element.js +1 -1
  16. package/dist/dd-element.js.map +1 -1
  17. package/dist/dd-gridstack.d.ts +1 -3
  18. package/dist/dd-gridstack.js +1 -628
  19. package/dist/dd-gridstack.js.map +1 -1
  20. package/dist/dd-manager.d.ts +1 -1
  21. package/dist/dd-manager.js +1 -1
  22. package/dist/dd-manager.js.map +1 -1
  23. package/dist/dd-resizable-handle.d.ts +1 -1
  24. package/dist/dd-resizable-handle.js +1 -1
  25. package/dist/dd-resizable-handle.js.map +1 -1
  26. package/dist/dd-resizable.d.ts +1 -1
  27. package/dist/dd-resizable.js +1 -1
  28. package/dist/dd-resizable.js.map +1 -1
  29. package/dist/dd-touch.d.ts +1 -1
  30. package/dist/dd-touch.js +1 -1
  31. package/dist/dd-touch.js.map +1 -1
  32. package/dist/es5/dd-base-impl.d.ts +1 -1
  33. package/dist/es5/dd-base-impl.js +1 -1
  34. package/dist/es5/dd-base-impl.js.map +1 -1
  35. package/dist/es5/dd-draggable.d.ts +1 -1
  36. package/dist/es5/dd-draggable.js +1 -1
  37. package/dist/es5/dd-draggable.js.map +1 -1
  38. package/dist/es5/dd-droppable.d.ts +1 -1
  39. package/dist/es5/dd-droppable.js +1 -1
  40. package/dist/es5/dd-droppable.js.map +1 -1
  41. package/dist/es5/dd-element.d.ts +1 -1
  42. package/dist/es5/dd-element.js +1 -1
  43. package/dist/es5/dd-element.js.map +1 -1
  44. package/dist/es5/dd-gridstack.d.ts +1 -3
  45. package/dist/es5/dd-gridstack.js +1 -634
  46. package/dist/es5/dd-gridstack.js.map +1 -1
  47. package/dist/es5/dd-manager.d.ts +1 -1
  48. package/dist/es5/dd-manager.js +1 -1
  49. package/dist/es5/dd-manager.js.map +1 -1
  50. package/dist/es5/dd-resizable-handle.d.ts +1 -1
  51. package/dist/es5/dd-resizable-handle.js +1 -1
  52. package/dist/es5/dd-resizable-handle.js.map +1 -1
  53. package/dist/es5/dd-resizable.d.ts +1 -1
  54. package/dist/es5/dd-resizable.js +1 -1
  55. package/dist/es5/dd-resizable.js.map +1 -1
  56. package/dist/es5/dd-touch.d.ts +1 -1
  57. package/dist/es5/dd-touch.js +1 -1
  58. package/dist/es5/dd-touch.js.map +1 -1
  59. package/dist/es5/gridstack-all.js +1 -1
  60. package/dist/es5/gridstack-all.js.LICENSE.txt +1 -1
  61. package/dist/es5/gridstack-all.js.map +1 -1
  62. package/dist/es5/gridstack-engine.d.ts +1 -1
  63. package/dist/es5/gridstack-engine.js +1 -1
  64. package/dist/es5/gridstack-engine.js.map +1 -1
  65. package/dist/es5/gridstack-poly.js +1 -1
  66. package/dist/es5/gridstack.d.ts +16 -7
  67. package/dist/es5/gridstack.js +646 -42
  68. package/dist/es5/gridstack.js.map +1 -1
  69. package/dist/es5/types.d.ts +7 -4
  70. package/dist/es5/types.js +1 -1
  71. package/dist/es5/types.js.map +1 -1
  72. package/dist/es5/utils.d.ts +1 -1
  73. package/dist/es5/utils.js +1 -1
  74. package/dist/es5/utils.js.map +1 -1
  75. package/dist/gridstack-all.js +1 -1
  76. package/dist/gridstack-all.js.LICENSE.txt +1 -1
  77. package/dist/gridstack-all.js.map +1 -1
  78. package/dist/gridstack-engine.d.ts +1 -1
  79. package/dist/gridstack-engine.js +1 -1
  80. package/dist/gridstack-engine.js.map +1 -1
  81. package/dist/gridstack.css +1 -1
  82. package/dist/gridstack.d.ts +16 -7
  83. package/dist/gridstack.js +634 -42
  84. package/dist/gridstack.js.map +1 -1
  85. package/dist/src/gridstack.scss +1 -1
  86. package/dist/types.d.ts +7 -4
  87. package/dist/types.js +1 -1
  88. package/dist/types.js.map +1 -1
  89. package/dist/utils.d.ts +1 -1
  90. package/dist/utils.js +1 -1
  91. package/dist/utils.js.map +1 -1
  92. package/doc/CHANGES.md +12 -5
  93. package/doc/README.md +0 -2
  94. package/package.json +2 -2
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  /**
3
- * dd-gridstack.ts 7.1.1
3
+ * dd-gridstack.ts 7.1.2
4
4
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
5
5
  */
6
6
  var __assign = (this && this.__assign) || function () {
@@ -16,9 +16,6 @@ var __assign = (this && this.__assign) || function () {
16
16
  };
17
17
  Object.defineProperty(exports, "__esModule", { value: true });
18
18
  exports.DDGridStack = void 0;
19
- /* eslint-disable @typescript-eslint/no-unused-vars */
20
- var types_1 = require("./types");
21
- var gridstack_1 = require("./gridstack");
22
19
  var utils_1 = require("./utils");
23
20
  var dd_manager_1 = require("./dd-manager");
24
21
  var dd_element_1 = require("./dd-element");
@@ -29,10 +26,6 @@ var dd_element_1 = require("./dd-element");
29
26
  var DDGridStack = /** @class */ (function () {
30
27
  function DDGridStack() {
31
28
  }
32
- /** get the global (but static to this code) DD implementation */
33
- DDGridStack.get = function () {
34
- return dd;
35
- };
36
29
  DDGridStack.prototype.resizable = function (el, opts, key, value) {
37
30
  this._getDDElements(el).forEach(function (dEl) {
38
31
  var _a;
@@ -149,630 +142,4 @@ var DDGridStack = /** @class */ (function () {
149
142
  return DDGridStack;
150
143
  }());
151
144
  exports.DDGridStack = DDGridStack;
152
- /** global instance */
153
- var dd = new DDGridStack;
154
- /********************************************************************************
155
- * GridStack code that is doing drag&drop extracted here so main class is smaller
156
- * for static grid that don't do any of this work anyway. Saves about 31k (41k -> 72k)
157
- * https://www.typescriptlang.org/docs/handbook/declaration-merging.html
158
- * https://www.typescriptlang.org/docs/handbook/mixins.html
159
- ********************************************************************************/
160
- /** @internal called to add drag over to support widgets being added externally */
161
- gridstack_1.GridStack.prototype._setupAcceptWidget = function () {
162
- var _this = this;
163
- // check if we need to disable things
164
- if (this.opts.staticGrid || (!this.opts.acceptWidgets && !this.opts.removable)) {
165
- dd.droppable(this.el, 'destroy');
166
- return this;
167
- }
168
- // vars shared across all methods
169
- var cellHeight, cellWidth;
170
- var onDrag = function (event, el, helper) {
171
- var node = el.gridstackNode;
172
- if (!node)
173
- return;
174
- helper = helper || el;
175
- var parent = _this.el.getBoundingClientRect();
176
- var _a = helper.getBoundingClientRect(), top = _a.top, left = _a.left;
177
- left -= parent.left;
178
- top -= parent.top;
179
- var ui = { position: { top: top, left: left } };
180
- if (node._temporaryRemoved) {
181
- node.x = Math.max(0, Math.round(left / cellWidth));
182
- node.y = Math.max(0, Math.round(top / cellHeight));
183
- delete node.autoPosition;
184
- _this.engine.nodeBoundFix(node);
185
- // don't accept *initial* location if doesn't fit #1419 (locked drop region, or can't grow), but maybe try if it will go somewhere
186
- if (!_this.engine.willItFit(node)) {
187
- node.autoPosition = true; // ignore x,y and try for any slot...
188
- if (!_this.engine.willItFit(node)) {
189
- dd.off(el, 'drag'); // stop calling us
190
- return; // full grid or can't grow
191
- }
192
- if (node._willFitPos) {
193
- // use the auto position instead #1687
194
- utils_1.Utils.copyPos(node, node._willFitPos);
195
- delete node._willFitPos;
196
- }
197
- }
198
- // re-use the existing node dragging method
199
- _this._onStartMoving(helper, event, ui, node, cellWidth, cellHeight);
200
- }
201
- else {
202
- // re-use the existing node dragging that does so much of the collision detection
203
- _this._dragOrResize(helper, event, ui, node, cellWidth, cellHeight);
204
- }
205
- };
206
- dd.droppable(this.el, {
207
- accept: function (el) {
208
- var node = el.gridstackNode;
209
- // set accept drop to true on ourself (which we ignore) so we don't get "can't drop" icon in HTML5 mode while moving
210
- if ((node === null || node === void 0 ? void 0 : node.grid) === _this)
211
- return true;
212
- if (!_this.opts.acceptWidgets)
213
- return false;
214
- // check for accept method or class matching
215
- var canAccept = true;
216
- if (typeof _this.opts.acceptWidgets === 'function') {
217
- canAccept = _this.opts.acceptWidgets(el);
218
- }
219
- else {
220
- var selector = (_this.opts.acceptWidgets === true ? '.grid-stack-item' : _this.opts.acceptWidgets);
221
- canAccept = el.matches(selector);
222
- }
223
- // finally check to make sure we actually have space left #1571
224
- if (canAccept && node && _this.opts.maxRow) {
225
- var n = { w: node.w, h: node.h, minW: node.minW, minH: node.minH }; // only width/height matters and autoPosition
226
- canAccept = _this.engine.willItFit(n);
227
- }
228
- return canAccept;
229
- }
230
- })
231
- /**
232
- * entering our grid area
233
- */
234
- .on(this.el, 'dropover', function (event, el, helper) {
235
- // console.log(`over ${this.el.gridstack.opts.id} ${count++}`); // TEST
236
- var node = el.gridstackNode;
237
- // ignore drop enter on ourself (unless we temporarily removed) which happens on a simple drag of our item
238
- if ((node === null || node === void 0 ? void 0 : node.grid) === _this && !node._temporaryRemoved) {
239
- // delete node._added; // reset this to track placeholder again in case we were over other grid #1484 (dropout doesn't always clear)
240
- return false; // prevent parent from receiving msg (which may be a grid as well)
241
- }
242
- // fix #1578 when dragging fast, we may not get a leave on the previous grid so force one now
243
- if ((node === null || node === void 0 ? void 0 : node.grid) && node.grid !== _this && !node._temporaryRemoved) {
244
- // console.log('dropover without leave'); // TEST
245
- var otherGrid = node.grid;
246
- otherGrid._leave(el, helper);
247
- }
248
- // cache cell dimensions (which don't change), position can animate if we removed an item in otherGrid that affects us...
249
- cellWidth = _this.cellWidth();
250
- cellHeight = _this.getCellHeight(true);
251
- // load any element attributes if we don't have a node
252
- if (!node) { // @ts-ignore private read only on ourself
253
- node = _this._readAttr(el);
254
- }
255
- if (!node.grid) {
256
- node._isExternal = true;
257
- el.gridstackNode = node;
258
- }
259
- // calculate the grid size based on element outer size
260
- helper = helper || el;
261
- var w = node.w || Math.round(helper.offsetWidth / cellWidth) || 1;
262
- var h = node.h || Math.round(helper.offsetHeight / cellHeight) || 1;
263
- // if the item came from another grid, make a copy and save the original info in case we go back there
264
- if (node.grid && node.grid !== _this) {
265
- // copy the node original values (min/max/id/etc...) but override width/height/other flags which are this grid specific
266
- // console.log('dropover cloning node'); // TEST
267
- if (!el._gridstackNodeOrig)
268
- el._gridstackNodeOrig = node; // shouldn't have multiple nested!
269
- el.gridstackNode = node = __assign(__assign({}, node), { w: w, h: h, grid: _this });
270
- _this.engine.cleanupNode(node)
271
- .nodeBoundFix(node);
272
- // restore some internal fields we need after clearing them all
273
- node._initDD =
274
- node._isExternal = // DOM needs to be re-parented on a drop
275
- node._temporaryRemoved = true; // so it can be inserted onDrag below
276
- }
277
- else {
278
- node.w = w;
279
- node.h = h;
280
- node._temporaryRemoved = true; // so we can insert it
281
- }
282
- // clear any marked for complete removal (Note: don't check _isAboutToRemove as that is cleared above - just do it)
283
- _itemRemoving(node.el, false);
284
- dd.on(el, 'drag', onDrag);
285
- // make sure this is called at least once when going fast #1578
286
- onDrag(event, el, helper);
287
- return false; // prevent parent from receiving msg (which may be a grid as well)
288
- })
289
- /**
290
- * Leaving our grid area...
291
- */
292
- .on(this.el, 'dropout', function (event, el, helper) {
293
- // console.log(`out ${this.el.gridstack.opts.id} ${count++}`); // TEST
294
- var node = el.gridstackNode;
295
- if (!node)
296
- return false;
297
- // fix #1578 when dragging fast, we might get leave after other grid gets enter (which calls us to clean)
298
- // so skip this one if we're not the active grid really..
299
- if (!node.grid || node.grid === _this) {
300
- _this._leave(el, helper);
301
- // if we were created as temporary nested grid, go back to before state
302
- if (_this._isTemp) {
303
- _this.removeAsSubGrid(node);
304
- }
305
- }
306
- return false; // prevent parent from receiving msg (which may be grid as well)
307
- })
308
- /**
309
- * end - releasing the mouse
310
- */
311
- .on(this.el, 'drop', function (event, el, helper) {
312
- var _a, _b;
313
- var node = el.gridstackNode;
314
- // ignore drop on ourself from ourself that didn't come from the outside - dragend will handle the simple move instead
315
- if ((node === null || node === void 0 ? void 0 : node.grid) === _this && !node._isExternal)
316
- return false;
317
- var wasAdded = !!_this.placeholder.parentElement; // skip items not actually added to us because of constrains, but do cleanup #1419
318
- _this.placeholder.remove();
319
- // notify previous grid of removal
320
- // console.log('drop delete _gridstackNodeOrig') // TEST
321
- var origNode = el._gridstackNodeOrig;
322
- delete el._gridstackNodeOrig;
323
- if (wasAdded && (origNode === null || origNode === void 0 ? void 0 : origNode.grid) && origNode.grid !== _this) {
324
- var oGrid = origNode.grid;
325
- oGrid.engine.removedNodes.push(origNode);
326
- oGrid._triggerRemoveEvent();
327
- // if it's an empty sub-grid, to get auto-created, nuke it
328
- if (oGrid.parentGridItem && !oGrid.engine.nodes.length && oGrid.opts.subGridDynamic) {
329
- oGrid.removeAsSubGrid();
330
- }
331
- }
332
- if (!node)
333
- return false;
334
- // use existing placeholder node as it's already in our list with drop location
335
- if (wasAdded) {
336
- _this.engine.cleanupNode(node); // removes all internal _xyz values
337
- node.grid = _this;
338
- }
339
- dd.off(el, 'drag');
340
- // if we made a copy ('helper' which is temp) of the original node then insert a copy, else we move the original node (#1102)
341
- // as the helper will be nuked by jquery-ui otherwise
342
- if (helper !== el) {
343
- helper.remove();
344
- el.gridstackNode = origNode; // original item (left behind) is re-stored to pre dragging as the node now has drop info
345
- if (wasAdded) {
346
- el = el.cloneNode(true);
347
- }
348
- }
349
- else {
350
- el.remove(); // reduce flicker as we change depth here, and size further down
351
- _this._removeDD(el);
352
- }
353
- if (!wasAdded)
354
- return false;
355
- el.gridstackNode = node;
356
- node.el = el;
357
- var subGrid = (_b = (_a = node.subGrid) === null || _a === void 0 ? void 0 : _a.el) === null || _b === void 0 ? void 0 : _b.gridstack; // set when actual sub-grid present
358
- // @ts-ignore
359
- utils_1.Utils.copyPos(node, _this._readAttr(_this.placeholder)); // placeholder values as moving VERY fast can throw things off #1578
360
- utils_1.Utils.removePositioningStyles(el); // @ts-ignore
361
- _this._writeAttr(el, node);
362
- _this.el.appendChild(el); // @ts-ignore // TODO: now would be ideal time to _removeHelperStyle() overriding floating styles (native only)
363
- if (subGrid) {
364
- subGrid.parentGridItem = node;
365
- if (!subGrid.opts.styleInHead)
366
- subGrid._updateStyles(true); // re-create sub-grid styles now that we've moved
367
- }
368
- _this._updateContainerHeight();
369
- _this.engine.addedNodes.push(node); // @ts-ignore
370
- _this._triggerAddEvent(); // @ts-ignore
371
- _this._triggerChangeEvent();
372
- _this.engine.endUpdate();
373
- if (_this._gsEventHandler['dropped']) {
374
- _this._gsEventHandler['dropped'](__assign(__assign({}, event), { type: 'dropped' }), origNode && origNode.grid ? origNode : undefined, node);
375
- }
376
- // wait till we return out of the drag callback to set the new drag&resize handler or they may get messed up
377
- window.setTimeout(function () {
378
- // IFF we are still there (some application will use as placeholder and insert their real widget instead and better call makeWidget())
379
- if (node.el && node.el.parentElement) {
380
- _this._prepareDragDropByNode(node);
381
- }
382
- else {
383
- _this.engine.removeNode(node);
384
- }
385
- delete node.grid._isTemp;
386
- });
387
- return false; // prevent parent from receiving msg (which may be grid as well)
388
- });
389
- return this;
390
- };
391
- /** @internal mark item for removal */
392
- function _itemRemoving(el, remove) {
393
- var node = el ? el.gridstackNode : undefined;
394
- if (!node || !node.grid)
395
- return;
396
- remove ? node._isAboutToRemove = true : delete node._isAboutToRemove;
397
- remove ? el.classList.add('grid-stack-item-removing') : el.classList.remove('grid-stack-item-removing');
398
- }
399
- /** @internal called to setup a trash drop zone if the user specifies it */
400
- gridstack_1.GridStack.prototype._setupRemoveDrop = function () {
401
- if (!this.opts.staticGrid && typeof this.opts.removable === 'string') {
402
- var trashEl = document.querySelector(this.opts.removable);
403
- if (!trashEl)
404
- return this;
405
- // only register ONE drop-over/dropout callback for the 'trash', and it will
406
- // update the passed in item and parent grid because the 'trash' is a shared resource anyway,
407
- // and Native DD only has 1 event CB (having a list and technically a per grid removableOptions complicates things greatly)
408
- if (!dd.isDroppable(trashEl)) {
409
- dd.droppable(trashEl, this.opts.removableOptions)
410
- .on(trashEl, 'dropover', function (event, el) { return _itemRemoving(el, true); })
411
- .on(trashEl, 'dropout', function (event, el) { return _itemRemoving(el, false); });
412
- }
413
- }
414
- return this;
415
- };
416
- /**
417
- * call to setup dragging in from the outside (say toolbar), by specifying the class selection and options.
418
- * Called during GridStack.init() as options, but can also be called directly (last param are used) in case the toolbar
419
- * is dynamically create and needs to change later.
420
- **/
421
- gridstack_1.GridStack.setupDragIn = function (dragIn, dragInOptions) {
422
- if ((dragInOptions === null || dragInOptions === void 0 ? void 0 : dragInOptions.pause) !== undefined) {
423
- dd_manager_1.DDManager.pauseDrag = dragInOptions.pause;
424
- }
425
- if (typeof dragIn === 'string') {
426
- dragInOptions = __assign(__assign({}, types_1.dragInDefaultOptions), (dragInOptions || {}));
427
- utils_1.Utils.getElements(dragIn).forEach(function (el) {
428
- if (!dd.isDraggable(el))
429
- dd.dragIn(el, dragInOptions);
430
- });
431
- }
432
- };
433
- /** @internal prepares the element for drag&drop **/
434
- gridstack_1.GridStack.prototype._prepareDragDropByNode = function (node) {
435
- var _this = this;
436
- var el = node.el;
437
- var noMove = node.noMove || this.opts.disableDrag;
438
- var noResize = node.noResize || this.opts.disableResize;
439
- // check for disabled grid first
440
- if (this.opts.staticGrid || (noMove && noResize)) {
441
- if (node._initDD) {
442
- this._removeDD(el); // nukes everything instead of just disable, will add some styles back next
443
- delete node._initDD;
444
- }
445
- el.classList.add('ui-draggable-disabled', 'ui-resizable-disabled'); // add styles one might depend on #1435
446
- return this;
447
- }
448
- if (!node._initDD) {
449
- // variables used/cashed between the 3 start/move/end methods, in addition to node passed above
450
- var cellWidth_1;
451
- var cellHeight_1;
452
- /** called when item starts moving/resizing */
453
- var onStartMoving = function (event, ui) {
454
- // trigger any 'dragstart' / 'resizestart' manually
455
- if (_this._gsEventHandler[event.type]) {
456
- _this._gsEventHandler[event.type](event, event.target);
457
- }
458
- cellWidth_1 = _this.cellWidth();
459
- cellHeight_1 = _this.getCellHeight(true); // force pixels for calculations
460
- _this._onStartMoving(el, event, ui, node, cellWidth_1, cellHeight_1);
461
- };
462
- /** called when item is being dragged/resized */
463
- var dragOrResize = function (event, ui) {
464
- _this._dragOrResize(el, event, ui, node, cellWidth_1, cellHeight_1);
465
- };
466
- /** called when the item stops moving/resizing */
467
- var onEndMoving = function (event) {
468
- _this.placeholder.remove();
469
- delete node._moving;
470
- delete node._event;
471
- delete node._lastTried;
472
- // if the item has moved to another grid, we're done here
473
- var target = event.target;
474
- if (!target.gridstackNode || target.gridstackNode.grid !== _this)
475
- return;
476
- node.el = target;
477
- if (node._isAboutToRemove) {
478
- var gridToNotify = el.gridstackNode.grid;
479
- if (gridToNotify._gsEventHandler[event.type]) {
480
- gridToNotify._gsEventHandler[event.type](event, target);
481
- }
482
- _this._removeDD(el);
483
- gridToNotify.engine.removedNodes.push(node);
484
- gridToNotify._triggerRemoveEvent();
485
- // break circular links and remove DOM
486
- delete el.gridstackNode;
487
- delete node.el;
488
- el.remove();
489
- }
490
- else {
491
- utils_1.Utils.removePositioningStyles(target);
492
- if (node._temporaryRemoved) {
493
- // got removed - restore item back to before dragging position
494
- utils_1.Utils.copyPos(node, node._orig); // @ts-ignore
495
- _this._writePosAttr(target, node);
496
- _this.engine.addNode(node);
497
- }
498
- else {
499
- // move to new placeholder location
500
- _this._writePosAttr(target, node);
501
- }
502
- if (_this._gsEventHandler[event.type]) {
503
- _this._gsEventHandler[event.type](event, target);
504
- }
505
- }
506
- // @ts-ignore
507
- _this._extraDragRow = 0; // @ts-ignore
508
- _this._updateContainerHeight(); // @ts-ignore
509
- _this._triggerChangeEvent();
510
- _this.engine.endUpdate();
511
- };
512
- dd.draggable(el, {
513
- start: onStartMoving,
514
- stop: onEndMoving,
515
- drag: dragOrResize
516
- }).resizable(el, {
517
- start: onStartMoving,
518
- stop: onEndMoving,
519
- resize: dragOrResize
520
- });
521
- node._initDD = true; // we've set DD support now
522
- }
523
- // finally fine tune move vs resize by disabling any part...
524
- dd.draggable(el, noMove ? 'disable' : 'enable')
525
- .resizable(el, noResize ? 'disable' : 'enable');
526
- return this;
527
- };
528
- /** @internal called when item is starting a drag/resize */
529
- gridstack_1.GridStack.prototype._onStartMoving = function (el, event, ui, node, cellWidth, cellHeight) {
530
- this.engine.cleanNodes()
531
- .beginUpdate(node);
532
- // @ts-ignore
533
- this._writePosAttr(this.placeholder, node);
534
- this.el.appendChild(this.placeholder);
535
- // console.log('_onStartMoving placeholder') // TEST
536
- node.el = this.placeholder;
537
- node._lastUiPosition = ui.position;
538
- node._prevYPix = ui.position.top;
539
- node._moving = (event.type === 'dragstart'); // 'dropover' are not initially moving so they can go exactly where they enter (will push stuff out of the way)
540
- delete node._lastTried;
541
- if (event.type === 'dropover' && node._temporaryRemoved) {
542
- // console.log('engine.addNode x=' + node.x); // TEST
543
- this.engine.addNode(node); // will add, fix collisions, update attr and clear _temporaryRemoved
544
- node._moving = true; // AFTER, mark as moving object (wanted fix location before)
545
- }
546
- // set the min/max resize info
547
- this.engine.cacheRects(cellWidth, cellHeight, this.opts.marginTop, this.opts.marginRight, this.opts.marginBottom, this.opts.marginLeft);
548
- if (event.type === 'resizestart') {
549
- dd.resizable(el, 'option', 'minWidth', cellWidth * (node.minW || 1))
550
- .resizable(el, 'option', 'minHeight', cellHeight * (node.minH || 1));
551
- if (node.maxW) {
552
- dd.resizable(el, 'option', 'maxWidth', cellWidth * node.maxW);
553
- }
554
- if (node.maxH) {
555
- dd.resizable(el, 'option', 'maxHeight', cellHeight * node.maxH);
556
- }
557
- }
558
- };
559
- /** @internal called when item leaving our area by either cursor dropout event
560
- * or shape is outside our boundaries. remove it from us, and mark temporary if this was
561
- * our item to start with else restore prev node values from prev grid it came from.
562
- **/
563
- gridstack_1.GridStack.prototype._leave = function (el, helper) {
564
- var node = el.gridstackNode;
565
- if (!node)
566
- return;
567
- dd.off(el, 'drag'); // no need to track while being outside
568
- // this gets called when cursor leaves and shape is outside, so only do this once
569
- if (node._temporaryRemoved)
570
- return;
571
- node._temporaryRemoved = true;
572
- this.engine.removeNode(node); // remove placeholder as well, otherwise it's a sign node is not in our list, which is a bigger issue
573
- node.el = node._isExternal && helper ? helper : el; // point back to real item being dragged
574
- if (this.opts.removable === true) { // boolean vs a class string
575
- // item leaving us and we are supposed to remove on leave (no need to drag onto trash) mark it so
576
- _itemRemoving(el, true);
577
- }
578
- // finally if item originally came from another grid, but left us, restore things back to prev info
579
- if (el._gridstackNodeOrig) {
580
- // console.log('leave delete _gridstackNodeOrig') // TEST
581
- el.gridstackNode = el._gridstackNodeOrig;
582
- delete el._gridstackNodeOrig;
583
- }
584
- else if (node._isExternal) {
585
- // item came from outside (like a toolbar) so nuke any node info
586
- delete node.el;
587
- delete el.gridstackNode;
588
- // and restore all nodes back to original
589
- this.engine.restoreInitial();
590
- }
591
- };
592
- /** @internal called when item is being dragged/resized */
593
- gridstack_1.GridStack.prototype._dragOrResize = function (el, event, ui, node, cellWidth, cellHeight) {
594
- var p = __assign({}, node._orig); // could be undefined (_isExternal) which is ok (drag only set x,y and w,h will default to node value)
595
- var resizing;
596
- var mLeft = this.opts.marginLeft, mRight = this.opts.marginRight, mTop = this.opts.marginTop, mBottom = this.opts.marginBottom;
597
- // if margins (which are used to pass mid point by) are large relative to cell height/width, reduce them down #1855
598
- var mHeight = Math.round(cellHeight * 0.1), mWidth = Math.round(cellWidth * 0.1);
599
- mLeft = Math.min(mLeft, mWidth);
600
- mRight = Math.min(mRight, mWidth);
601
- mTop = Math.min(mTop, mHeight);
602
- mBottom = Math.min(mBottom, mHeight);
603
- if (event.type === 'drag') {
604
- if (node._temporaryRemoved)
605
- return; // handled by dropover
606
- var distance = ui.position.top - node._prevYPix;
607
- node._prevYPix = ui.position.top;
608
- utils_1.Utils.updateScrollPosition(el, ui.position, distance);
609
- // get new position taking into account the margin in the direction we are moving! (need to pass mid point by margin)
610
- var left = ui.position.left + (ui.position.left > node._lastUiPosition.left ? -mRight : mLeft);
611
- var top_1 = ui.position.top + (ui.position.top > node._lastUiPosition.top ? -mBottom : mTop);
612
- p.x = Math.round(left / cellWidth);
613
- p.y = Math.round(top_1 / cellHeight);
614
- // @ts-ignore// if we're at the bottom hitting something else, grow the grid so cursor doesn't leave when trying to place below others
615
- var prev = this._extraDragRow;
616
- if (this.engine.collide(node, p)) {
617
- var row = this.getRow();
618
- var extra = Math.max(0, (p.y + node.h) - row);
619
- if (this.opts.maxRow && row + extra > this.opts.maxRow) {
620
- extra = Math.max(0, this.opts.maxRow - row);
621
- } // @ts-ignore
622
- this._extraDragRow = extra; // @ts-ignore
623
- }
624
- else
625
- this._extraDragRow = 0; // @ts-ignore
626
- if (this._extraDragRow !== prev)
627
- this._updateContainerHeight();
628
- if (node.x === p.x && node.y === p.y)
629
- return; // skip same
630
- // DON'T skip one we tried as we might have failed because of coverage <50% before
631
- // if (node._lastTried && node._lastTried.x === x && node._lastTried.y === y) return;
632
- }
633
- else if (event.type === 'resize') {
634
- if (p.x < 0)
635
- return;
636
- // Scrolling page if needed
637
- utils_1.Utils.updateScrollResize(event, el, cellHeight);
638
- // get new size
639
- p.w = Math.round((ui.size.width - mLeft) / cellWidth);
640
- p.h = Math.round((ui.size.height - mTop) / cellHeight);
641
- if (node.w === p.w && node.h === p.h)
642
- return;
643
- if (node._lastTried && node._lastTried.w === p.w && node._lastTried.h === p.h)
644
- return; // skip one we tried (but failed)
645
- // if we size on left/top side this might move us, so get possible new position as well
646
- var left = ui.position.left + mLeft;
647
- var top_2 = ui.position.top + mTop;
648
- p.x = Math.round(left / cellWidth);
649
- p.y = Math.round(top_2 / cellHeight);
650
- resizing = true;
651
- }
652
- node._event = event;
653
- node._lastTried = p; // set as last tried (will nuke if we go there)
654
- var rect = {
655
- x: ui.position.left + mLeft,
656
- y: ui.position.top + mTop,
657
- w: (ui.size ? ui.size.width : node.w * cellWidth) - mLeft - mRight,
658
- h: (ui.size ? ui.size.height : node.h * cellHeight) - mTop - mBottom
659
- };
660
- if (this.engine.moveNodeCheck(node, __assign(__assign({}, p), { cellWidth: cellWidth, cellHeight: cellHeight, rect: rect, resizing: resizing }))) {
661
- node._lastUiPosition = ui.position;
662
- this.engine.cacheRects(cellWidth, cellHeight, mTop, mRight, mBottom, mLeft);
663
- delete node._skipDown;
664
- if (resizing && node.subGrid) {
665
- node.subGrid.onParentResize();
666
- } // @ts-ignore
667
- this._extraDragRow = 0; // @ts-ignore
668
- this._updateContainerHeight();
669
- var target = event.target; // @ts-ignore
670
- this._writePosAttr(target, node);
671
- if (this._gsEventHandler[event.type]) {
672
- this._gsEventHandler[event.type](event, target);
673
- }
674
- }
675
- };
676
- /**
677
- * Enables/Disables moving.
678
- * @param els widget or selector to modify.
679
- * @param val if true widget will be draggable.
680
- */
681
- gridstack_1.GridStack.prototype.movable = function (els, val) {
682
- var _this = this;
683
- if (this.opts.staticGrid)
684
- return this; // can't move a static grid!
685
- gridstack_1.GridStack.getElements(els).forEach(function (el) {
686
- var node = el.gridstackNode;
687
- if (!node)
688
- return;
689
- if (val)
690
- delete node.noMove;
691
- else
692
- node.noMove = true;
693
- _this._prepareDragDropByNode(node); // init DD if need be, and adjust
694
- });
695
- return this;
696
- };
697
- /**
698
- * Enables/Disables resizing.
699
- * @param els widget or selector to modify
700
- * @param val if true widget will be resizable.
701
- */
702
- gridstack_1.GridStack.prototype.resizable = function (els, val) {
703
- var _this = this;
704
- if (this.opts.staticGrid)
705
- return this; // can't resize a static grid!
706
- gridstack_1.GridStack.getElements(els).forEach(function (el) {
707
- var node = el.gridstackNode;
708
- if (!node)
709
- return;
710
- if (val)
711
- delete node.noResize;
712
- else
713
- node.noResize = true;
714
- _this._prepareDragDropByNode(node); // init DD if need be, and adjust
715
- });
716
- return this;
717
- };
718
- /**
719
- * Temporarily disables widgets moving/resizing.
720
- * If you want a more permanent way (which freezes up resources) use `setStatic(true)` instead.
721
- * Note: no-op for static grid
722
- * This is a shortcut for:
723
- * @example
724
- * grid.enableMove(false);
725
- * grid.enableResize(false);
726
- */
727
- gridstack_1.GridStack.prototype.disable = function () {
728
- if (this.opts.staticGrid)
729
- return;
730
- this.enableMove(false);
731
- this.enableResize(false); // @ts-ignore
732
- this._triggerEvent('disable');
733
- return this;
734
- };
735
- /**
736
- * Re-enables widgets moving/resizing - see disable().
737
- * Note: no-op for static grid.
738
- * This is a shortcut for:
739
- * @example
740
- * grid.enableMove(true);
741
- * grid.enableResize(true);
742
- */
743
- gridstack_1.GridStack.prototype.enable = function () {
744
- if (this.opts.staticGrid)
745
- return;
746
- this.enableMove(true);
747
- this.enableResize(true); // @ts-ignore
748
- this._triggerEvent('enable');
749
- return this;
750
- };
751
- /** Enables/disables widget moving. No-op for static grids. */
752
- gridstack_1.GridStack.prototype.enableMove = function (doEnable) {
753
- var _this = this;
754
- if (this.opts.staticGrid)
755
- return this; // can't move a static grid!
756
- this.opts.disableDrag = !doEnable; // FIRST before we update children as grid overrides #1658
757
- this.engine.nodes.forEach(function (n) { return _this.movable(n.el, doEnable); });
758
- return this;
759
- };
760
- /** Enables/disables widget resizing. No-op for static grids. */
761
- gridstack_1.GridStack.prototype.enableResize = function (doEnable) {
762
- var _this = this;
763
- if (this.opts.staticGrid)
764
- return this; // can't size a static grid!
765
- this.opts.disableResize = !doEnable; // FIRST before we update children as grid overrides #1658
766
- this.engine.nodes.forEach(function (n) { return _this.resizable(n.el, doEnable); });
767
- return this;
768
- };
769
- /** removes any drag&drop present (called during destroy) */
770
- gridstack_1.GridStack.prototype._removeDD = function (el) {
771
- dd.draggable(el, 'destroy').resizable(el, 'destroy');
772
- if (el.gridstackNode) {
773
- delete el.gridstackNode._initDD; // reset our DD init flag
774
- }
775
- delete el.ddElement;
776
- return this;
777
- };
778
145
  //# sourceMappingURL=dd-gridstack.js.map