gridstack
Advanced tools
Comparing version 6.0.3 to 7.0.0
/** | ||
* dd-base-impl.ts 6.0.3 | ||
* dd-base-impl.ts 7.0.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
"use strict"; | ||
/** | ||
* dd-base-impl.ts 6.0.3 | ||
* dd-base-impl.ts 7.0.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -5,0 +5,0 @@ */ |
/** | ||
* dd-draggable.ts 6.0.3 | ||
* dd-draggable.ts 7.0.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
"use strict"; | ||
/** | ||
* dd-draggable.ts 6.0.3 | ||
* dd-draggable.ts 7.0.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -60,2 +60,5 @@ */ | ||
destroy() { | ||
if (this.dragTimeout) | ||
window.clearTimeout(this.dragTimeout); | ||
delete this.dragTimeout; | ||
if (this.dragging) | ||
@@ -108,2 +111,12 @@ this._mouseUp(this.mouseDownEvent); | ||
} | ||
/** @internal method to call actual drag event */ | ||
_callDrag(e) { | ||
if (!this.dragging) | ||
return; | ||
const ev = utils_1.Utils.initEvent(e, { target: this.el, type: 'drag' }); | ||
if (this.option.drag) { | ||
this.option.drag(ev, this.ui()); | ||
} | ||
this.triggerEvent('drag', ev); | ||
} | ||
/** @internal called when the main page (after successful mousedown) receives a move event to drag the item around the screen */ | ||
@@ -116,7 +129,12 @@ _mouseMove(e) { | ||
this._dragFollow(e); | ||
const ev = utils_1.Utils.initEvent(e, { target: this.el, type: 'drag' }); | ||
if (this.option.drag) { | ||
this.option.drag(ev, this.ui()); | ||
// delay actual grid handling drag until we pause for a while if set | ||
if (dd_manager_1.DDManager.pauseDrag) { | ||
const pause = Number.isInteger(dd_manager_1.DDManager.pauseDrag) ? dd_manager_1.DDManager.pauseDrag : 100; | ||
if (this.dragTimeout) | ||
window.clearTimeout(this.dragTimeout); | ||
this.dragTimeout = window.setTimeout(() => this._callDrag(e), pause); | ||
} | ||
this.triggerEvent('drag', ev); | ||
else { | ||
this._callDrag(e); | ||
} | ||
} | ||
@@ -123,0 +141,0 @@ else if (Math.abs(e.x - s.x) + Math.abs(e.y - s.y) > 3) { |
/** | ||
* dd-droppable.ts 6.0.3 | ||
* dd-droppable.ts 7.0.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
"use strict"; | ||
/** | ||
* dd-droppable.ts 6.0.3 | ||
* dd-droppable.ts 7.0.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -73,3 +73,3 @@ */ | ||
return; | ||
if (!this._canDrop()) | ||
if (!this._canDrop(dd_manager_1.DDManager.dragElement.el)) | ||
return; | ||
@@ -129,4 +129,4 @@ e.preventDefault(); | ||
/** @internal true if element matches the string/method accept option */ | ||
_canDrop() { | ||
return dd_manager_1.DDManager.dragElement && (!this.accept || this.accept(dd_manager_1.DDManager.dragElement.el)); | ||
_canDrop(el) { | ||
return el && (!this.accept || this.accept(el)); | ||
} | ||
@@ -133,0 +133,0 @@ /** @internal */ |
/** | ||
* dd-elements.ts 6.0.3 | ||
* dd-elements.ts 7.0.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
"use strict"; | ||
/** | ||
* dd-elements.ts 6.0.3 | ||
* dd-elements.ts 7.0.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -5,0 +5,0 @@ */ |
/** | ||
* dd-gridstack.ts 6.0.3 | ||
* dd-gridstack.ts 7.0.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
"use strict"; | ||
/** | ||
* dd-gridstack.ts 6.0.3 | ||
* dd-gridstack.ts 7.0.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -8,2 +8,4 @@ */ | ||
exports.DDGridStack = void 0; | ||
/* eslint-disable @typescript-eslint/no-unused-vars */ | ||
const types_1 = require("./types"); | ||
const gridstack_1 = require("./gridstack"); | ||
@@ -60,3 +62,3 @@ const utils_1 = require("./utils"); | ||
dEl.setupDraggable(Object.assign(Object.assign({}, grid.opts.draggable), { | ||
// containment: (grid._isNested && !grid.opts.dragOut) ? grid.el.parentElement : (grid.opts.draggable.containment || null), | ||
// containment: (grid.parentGridItem && !grid.opts.dragOut) ? grid.el.parentElement : (grid.opts.draggable.containment || null), | ||
start: opts.start, | ||
@@ -193,5 +195,2 @@ stop: opts.stop, | ||
return false; | ||
// prevent deeper nesting until rest of 992 can be fixed | ||
if (node === null || node === void 0 ? void 0 : node.subGrid) | ||
return false; | ||
// check for accept method or class matching | ||
@@ -284,2 +283,6 @@ let canAccept = true; | ||
this._leave(el, helper); | ||
// if we were created as temporary nested grid, go back to before state | ||
if (this._isTemp) { | ||
this.removeAsSubGrid(node); | ||
} | ||
} | ||
@@ -292,2 +295,3 @@ return false; // prevent parent from receiving msg (which may be grid as well) | ||
.on(this.el, 'drop', (event, el, helper) => { | ||
var _a, _b; | ||
let node = el.gridstackNode; | ||
@@ -303,6 +307,10 @@ // ignore drop on ourself from ourself that didn't come from the outside - dragend will handle the simple move instead | ||
delete el._gridstackNodeOrig; | ||
if (wasAdded && origNode && origNode.grid && origNode.grid !== this) { | ||
if (wasAdded && (origNode === null || origNode === void 0 ? void 0 : origNode.grid) && origNode.grid !== this) { | ||
let oGrid = origNode.grid; | ||
oGrid.engine.removedNodes.push(origNode); | ||
oGrid._triggerRemoveEvent(); | ||
// if it's an empty sub-grid, nuke it | ||
if (oGrid.parentGridItem && !oGrid.engine.nodes.length) { | ||
oGrid.removeAsSubGrid(); | ||
} | ||
} | ||
@@ -334,2 +342,3 @@ if (!node) | ||
node.el = el; | ||
let 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 | ||
// @ts-ignore | ||
@@ -340,2 +349,7 @@ utils_1.Utils.copyPos(node, this._readAttr(this.placeholder)); // placeholder values as moving VERY fast can throw things off #1578 | ||
this.el.appendChild(el); // @ts-ignore // TODO: now would be ideal time to _removeHelperStyle() overriding floating styles (native only) | ||
if (subGrid) { | ||
subGrid.parentGridItem = node; | ||
if (!subGrid.opts.styleInHead) | ||
subGrid._updateStyles(true); // re-create sub-grid styles now that we've moved | ||
} | ||
this._updateContainerHeight(); | ||
@@ -358,2 +372,3 @@ this.engine.addedNodes.push(node); // @ts-ignore | ||
} | ||
delete node.grid._isTemp; | ||
}); | ||
@@ -391,23 +406,16 @@ return false; // prevent parent from receiving msg (which may be grid as well) | ||
* call to setup dragging in from the outside (say toolbar), by specifying the class selection and options. | ||
* Called during GridStack.init() as options, but can also be called directly (last param are cached) in case the toolbar | ||
* Called during GridStack.init() as options, but can also be called directly (last param are used) in case the toolbar | ||
* is dynamically create and needs to change later. | ||
**/ | ||
gridstack_1.GridStack.setupDragIn = function (_dragIn, _dragInOptions) { | ||
let dragIn; | ||
let dragInOptions; | ||
const dragInDefaultOptions = { | ||
handle: '.grid-stack-item-content', | ||
appendTo: 'body', | ||
}; | ||
// cache in the passed in values (form grid init?) so they don't have to resend them each time | ||
if (_dragIn) { | ||
dragIn = _dragIn; | ||
dragInOptions = Object.assign(Object.assign({}, dragInDefaultOptions), (_dragInOptions || {})); | ||
gridstack_1.GridStack.setupDragIn = function (dragIn, dragInOptions) { | ||
if ((dragInOptions === null || dragInOptions === void 0 ? void 0 : dragInOptions.pause) !== undefined) { | ||
dd_manager_1.DDManager.pauseDrag = dragInOptions.pause; | ||
} | ||
if (typeof dragIn !== 'string') | ||
return; | ||
utils_1.Utils.getElements(dragIn).forEach(el => { | ||
if (!dd.isDraggable(el)) | ||
dd.dragIn(el, dragInOptions); | ||
}); | ||
if (typeof dragIn === 'string') { | ||
dragInOptions = Object.assign(Object.assign({}, types_1.dragInDefaultOptions), (dragInOptions || {})); | ||
utils_1.Utils.getElements(dragIn).forEach(el => { | ||
if (!dd.isDraggable(el)) | ||
dd.dragIn(el, dragInOptions); | ||
}); | ||
} | ||
}; | ||
@@ -450,2 +458,3 @@ /** @internal prepares the element for drag&drop **/ | ||
delete node._moving; | ||
delete node._event; | ||
delete node._lastTried; | ||
@@ -632,2 +641,3 @@ // if the item has moved to another grid, we're done here | ||
} | ||
node._event = event; | ||
node._lastTried = p; // set as last tried (will nuke if we go there) | ||
@@ -751,4 +761,5 @@ let rect = { | ||
} | ||
delete el.ddElement; | ||
return this; | ||
}; | ||
//# sourceMappingURL=dd-gridstack.js.map |
/** | ||
* dd-manager.ts 6.0.3 | ||
* dd-manager.ts 7.0.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -12,2 +12,4 @@ */ | ||
export declare class DDManager { | ||
/** if set (true | in msec), dragging placement (collision) will only happen after a pause by the user*/ | ||
static pauseDrag: boolean | number; | ||
/** true if a mouse down event was handled */ | ||
@@ -14,0 +16,0 @@ static mouseHandled: boolean; |
"use strict"; | ||
/** | ||
* dd-manager.ts 6.0.3 | ||
* dd-manager.ts 7.0.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -5,0 +5,0 @@ */ |
/** | ||
* dd-resizable-handle.ts 6.0.3 | ||
* dd-resizable-handle.ts 7.0.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
"use strict"; | ||
/** | ||
* dd-resizable-handle.ts 6.0.3 | ||
* dd-resizable-handle.ts 7.0.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -5,0 +5,0 @@ */ |
/** | ||
* dd-resizable.ts 6.0.3 | ||
* dd-resizable.ts 7.0.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
"use strict"; | ||
/** | ||
* dd-resizable.ts 6.0.3 | ||
* dd-resizable.ts 7.0.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -5,0 +5,0 @@ */ |
/** | ||
* touch.ts 6.0.3 | ||
* touch.ts 7.0.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
"use strict"; | ||
/** | ||
* touch.ts 6.0.3 | ||
* touch.ts 7.0.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -5,0 +5,0 @@ */ |
/** | ||
* dd-base-impl.ts 6.0.3 | ||
* dd-base-impl.ts 7.0.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
"use strict"; | ||
/** | ||
* dd-base-impl.ts 6.0.3 | ||
* dd-base-impl.ts 7.0.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -5,0 +5,0 @@ */ |
/** | ||
* dd-draggable.ts 6.0.3 | ||
* dd-draggable.ts 7.0.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
"use strict"; | ||
/** | ||
* dd-draggable.ts 6.0.3 | ||
* dd-draggable.ts 7.0.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -77,2 +77,5 @@ */ | ||
DDDraggable.prototype.destroy = function () { | ||
if (this.dragTimeout) | ||
window.clearTimeout(this.dragTimeout); | ||
delete this.dragTimeout; | ||
if (this.dragging) | ||
@@ -126,4 +129,15 @@ this._mouseUp(this.mouseDownEvent); | ||
}; | ||
/** @internal method to call actual drag event */ | ||
DDDraggable.prototype._callDrag = function (e) { | ||
if (!this.dragging) | ||
return; | ||
var ev = utils_1.Utils.initEvent(e, { target: this.el, type: 'drag' }); | ||
if (this.option.drag) { | ||
this.option.drag(ev, this.ui()); | ||
} | ||
this.triggerEvent('drag', ev); | ||
}; | ||
/** @internal called when the main page (after successful mousedown) receives a move event to drag the item around the screen */ | ||
DDDraggable.prototype._mouseMove = function (e) { | ||
var _this = this; | ||
var _a; | ||
@@ -134,7 +148,12 @@ // console.log(`${count++} move ${e.x},${e.y}`) | ||
this._dragFollow(e); | ||
var ev = utils_1.Utils.initEvent(e, { target: this.el, type: 'drag' }); | ||
if (this.option.drag) { | ||
this.option.drag(ev, this.ui()); | ||
// delay actual grid handling drag until we pause for a while if set | ||
if (dd_manager_1.DDManager.pauseDrag) { | ||
var pause = Number.isInteger(dd_manager_1.DDManager.pauseDrag) ? dd_manager_1.DDManager.pauseDrag : 100; | ||
if (this.dragTimeout) | ||
window.clearTimeout(this.dragTimeout); | ||
this.dragTimeout = window.setTimeout(function () { return _this._callDrag(e); }, pause); | ||
} | ||
this.triggerEvent('drag', ev); | ||
else { | ||
this._callDrag(e); | ||
} | ||
} | ||
@@ -141,0 +160,0 @@ else if (Math.abs(e.x - s.x) + Math.abs(e.y - s.y) > 3) { |
/** | ||
* dd-droppable.ts 6.0.3 | ||
* dd-droppable.ts 7.0.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
"use strict"; | ||
/** | ||
* dd-droppable.ts 6.0.3 | ||
* dd-droppable.ts 7.0.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -102,3 +102,3 @@ */ | ||
return; | ||
if (!this._canDrop()) | ||
if (!this._canDrop(dd_manager_1.DDManager.dragElement.el)) | ||
return; | ||
@@ -158,4 +158,4 @@ e.preventDefault(); | ||
/** @internal true if element matches the string/method accept option */ | ||
DDDroppable.prototype._canDrop = function () { | ||
return dd_manager_1.DDManager.dragElement && (!this.accept || this.accept(dd_manager_1.DDManager.dragElement.el)); | ||
DDDroppable.prototype._canDrop = function (el) { | ||
return el && (!this.accept || this.accept(el)); | ||
}; | ||
@@ -162,0 +162,0 @@ /** @internal */ |
/** | ||
* dd-elements.ts 6.0.3 | ||
* dd-elements.ts 7.0.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
"use strict"; | ||
/** | ||
* dd-elements.ts 6.0.3 | ||
* dd-elements.ts 7.0.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -5,0 +5,0 @@ */ |
/** | ||
* dd-gridstack.ts 6.0.3 | ||
* dd-gridstack.ts 7.0.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
"use strict"; | ||
/** | ||
* dd-gridstack.ts 6.0.3 | ||
* dd-gridstack.ts 7.0.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -19,2 +19,4 @@ */ | ||
exports.DDGridStack = void 0; | ||
/* eslint-disable @typescript-eslint/no-unused-vars */ | ||
var types_1 = require("./types"); | ||
var gridstack_1 = require("./gridstack"); | ||
@@ -75,3 +77,3 @@ var utils_1 = require("./utils"); | ||
dEl.setupDraggable(__assign(__assign({}, grid.opts.draggable), { | ||
// containment: (grid._isNested && !grid.opts.dragOut) ? grid.el.parentElement : (grid.opts.draggable.containment || null), | ||
// containment: (grid.parentGridItem && !grid.opts.dragOut) ? grid.el.parentElement : (grid.opts.draggable.containment || null), | ||
start: opts.start, | ||
@@ -214,5 +216,2 @@ stop: opts.stop, | ||
return false; | ||
// prevent deeper nesting until rest of 992 can be fixed | ||
if (node === null || node === void 0 ? void 0 : node.subGrid) | ||
return false; | ||
// check for accept method or class matching | ||
@@ -305,2 +304,6 @@ var canAccept = true; | ||
_this._leave(el, helper); | ||
// if we were created as temporary nested grid, go back to before state | ||
if (_this._isTemp) { | ||
_this.removeAsSubGrid(node); | ||
} | ||
} | ||
@@ -313,2 +316,3 @@ return false; // prevent parent from receiving msg (which may be grid as well) | ||
.on(this.el, 'drop', function (event, el, helper) { | ||
var _a, _b; | ||
var node = el.gridstackNode; | ||
@@ -324,6 +328,10 @@ // ignore drop on ourself from ourself that didn't come from the outside - dragend will handle the simple move instead | ||
delete el._gridstackNodeOrig; | ||
if (wasAdded && origNode && origNode.grid && origNode.grid !== _this) { | ||
if (wasAdded && (origNode === null || origNode === void 0 ? void 0 : origNode.grid) && origNode.grid !== _this) { | ||
var oGrid = origNode.grid; | ||
oGrid.engine.removedNodes.push(origNode); | ||
oGrid._triggerRemoveEvent(); | ||
// if it's an empty sub-grid, nuke it | ||
if (oGrid.parentGridItem && !oGrid.engine.nodes.length) { | ||
oGrid.removeAsSubGrid(); | ||
} | ||
} | ||
@@ -355,2 +363,3 @@ if (!node) | ||
node.el = el; | ||
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 | ||
// @ts-ignore | ||
@@ -361,2 +370,7 @@ utils_1.Utils.copyPos(node, _this._readAttr(_this.placeholder)); // placeholder values as moving VERY fast can throw things off #1578 | ||
_this.el.appendChild(el); // @ts-ignore // TODO: now would be ideal time to _removeHelperStyle() overriding floating styles (native only) | ||
if (subGrid) { | ||
subGrid.parentGridItem = node; | ||
if (!subGrid.opts.styleInHead) | ||
subGrid._updateStyles(true); // re-create sub-grid styles now that we've moved | ||
} | ||
_this._updateContainerHeight(); | ||
@@ -379,2 +393,3 @@ _this.engine.addedNodes.push(node); // @ts-ignore | ||
} | ||
delete node.grid._isTemp; | ||
}); | ||
@@ -412,23 +427,16 @@ return false; // prevent parent from receiving msg (which may be grid as well) | ||
* call to setup dragging in from the outside (say toolbar), by specifying the class selection and options. | ||
* Called during GridStack.init() as options, but can also be called directly (last param are cached) in case the toolbar | ||
* Called during GridStack.init() as options, but can also be called directly (last param are used) in case the toolbar | ||
* is dynamically create and needs to change later. | ||
**/ | ||
gridstack_1.GridStack.setupDragIn = function (_dragIn, _dragInOptions) { | ||
var dragIn; | ||
var dragInOptions; | ||
var dragInDefaultOptions = { | ||
handle: '.grid-stack-item-content', | ||
appendTo: 'body', | ||
}; | ||
// cache in the passed in values (form grid init?) so they don't have to resend them each time | ||
if (_dragIn) { | ||
dragIn = _dragIn; | ||
dragInOptions = __assign(__assign({}, dragInDefaultOptions), (_dragInOptions || {})); | ||
gridstack_1.GridStack.setupDragIn = function (dragIn, dragInOptions) { | ||
if ((dragInOptions === null || dragInOptions === void 0 ? void 0 : dragInOptions.pause) !== undefined) { | ||
dd_manager_1.DDManager.pauseDrag = dragInOptions.pause; | ||
} | ||
if (typeof dragIn !== 'string') | ||
return; | ||
utils_1.Utils.getElements(dragIn).forEach(function (el) { | ||
if (!dd.isDraggable(el)) | ||
dd.dragIn(el, dragInOptions); | ||
}); | ||
if (typeof dragIn === 'string') { | ||
dragInOptions = __assign(__assign({}, types_1.dragInDefaultOptions), (dragInOptions || {})); | ||
utils_1.Utils.getElements(dragIn).forEach(function (el) { | ||
if (!dd.isDraggable(el)) | ||
dd.dragIn(el, dragInOptions); | ||
}); | ||
} | ||
}; | ||
@@ -472,2 +480,3 @@ /** @internal prepares the element for drag&drop **/ | ||
delete node._moving; | ||
delete node._event; | ||
delete node._lastTried; | ||
@@ -654,2 +663,3 @@ // if the item has moved to another grid, we're done here | ||
} | ||
node._event = event; | ||
node._lastTried = p; // set as last tried (will nuke if we go there) | ||
@@ -777,4 +787,5 @@ var rect = { | ||
} | ||
delete el.ddElement; | ||
return this; | ||
}; | ||
//# sourceMappingURL=dd-gridstack.js.map |
/** | ||
* dd-manager.ts 6.0.3 | ||
* dd-manager.ts 7.0.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -12,2 +12,4 @@ */ | ||
export declare class DDManager { | ||
/** if set (true | in msec), dragging placement (collision) will only happen after a pause by the user*/ | ||
static pauseDrag: boolean | number; | ||
/** true if a mouse down event was handled */ | ||
@@ -14,0 +16,0 @@ static mouseHandled: boolean; |
"use strict"; | ||
/** | ||
* dd-manager.ts 6.0.3 | ||
* dd-manager.ts 7.0.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -5,0 +5,0 @@ */ |
/** | ||
* dd-resizable-handle.ts 6.0.3 | ||
* dd-resizable-handle.ts 7.0.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
"use strict"; | ||
/** | ||
* dd-resizable-handle.ts 6.0.3 | ||
* dd-resizable-handle.ts 7.0.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -5,0 +5,0 @@ */ |
/** | ||
* dd-resizable.ts 6.0.3 | ||
* dd-resizable.ts 7.0.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
"use strict"; | ||
/** | ||
* dd-resizable.ts 6.0.3 | ||
* dd-resizable.ts 7.0.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -5,0 +5,0 @@ */ |
/** | ||
* touch.ts 6.0.3 | ||
* touch.ts 7.0.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
"use strict"; | ||
/** | ||
* touch.ts 6.0.3 | ||
* touch.ts 7.0.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -5,0 +5,0 @@ */ |
/*! | ||
* GridStack 6.0.3 | ||
* GridStack 7.0.0 | ||
* https://gridstackjs.com/ | ||
@@ -4,0 +4,0 @@ * |
/** | ||
* gridstack-engine.ts 6.0.3 | ||
* gridstack-engine.ts 7.0.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -35,4 +35,5 @@ */ | ||
collideAll(skip: GridStackNode, area?: GridStackNode, skip2?: GridStackNode): GridStackNode[]; | ||
/** does a pixel coverage collision, returning the node that has the most coverage that is >50% mid line */ | ||
collideCoverage(node: GridStackNode, o: GridStackMoveOpts, collides: GridStackNode[]): GridStackNode; | ||
/** does a pixel coverage collision based on where we started, returning the node that has the most coverage that is >50% mid line */ | ||
protected directionCollideCoverage(node: GridStackNode, o: GridStackMoveOpts, collides: GridStackNode[]): GridStackNode; | ||
/** does a pixel coverage returning the node that has the most coverage by area */ | ||
/** called to cache the nodes pixel rectangles used for collision detection during drag */ | ||
@@ -39,0 +40,0 @@ cacheRects(w: number, h: number, top: number, right: number, bottom: number, left: number): GridStackEngine; |
"use strict"; | ||
/** | ||
* gridstack-engine.ts 6.0.3 | ||
* gridstack-engine.ts 7.0.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -120,4 +120,4 @@ */ | ||
}; | ||
/** does a pixel coverage collision, returning the node that has the most coverage that is >50% mid line */ | ||
GridStackEngine.prototype.collideCoverage = function (node, o, collides) { | ||
/** does a pixel coverage collision based on where we started, returning the node that has the most coverage that is >50% mid line */ | ||
GridStackEngine.prototype.directionCollideCoverage = function (node, o, collides) { | ||
if (!o.rect || !node._rect) | ||
@@ -171,2 +171,18 @@ return; | ||
}; | ||
/** does a pixel coverage returning the node that has the most coverage by area */ | ||
/* | ||
protected collideCoverage(r: GridStackPosition, collides: GridStackNode[]): {collide: GridStackNode, over: number} { | ||
let collide: GridStackNode; | ||
let overMax = 0; | ||
collides.forEach(n => { | ||
if (n.locked || !n._rect) return; | ||
let over = Utils.areaIntercept(r, n._rect); | ||
if (over > overMax) { | ||
overMax = over; | ||
collide = n; | ||
} | ||
}); | ||
return {collide, over: overMax}; | ||
} | ||
*/ | ||
/** called to cache the nodes pixel rectangles used for collision detection during drag */ | ||
@@ -652,6 +668,9 @@ GridStackEngine.prototype.cacheRects = function (w, h, top, right, bottom, left) { | ||
GridStackEngine.prototype.moveNode = function (node, o) { | ||
var _a, _b; | ||
if (!node || /*node.locked ||*/ !o) | ||
return false; | ||
if (o.pack === undefined) | ||
o.pack = true; | ||
var wasUndefinedPack; | ||
if (o.pack === undefined) { | ||
wasUndefinedPack = o.pack = true; | ||
} | ||
// constrain the passed in values and check if we're still changing our node | ||
@@ -682,4 +701,16 @@ if (typeof o.x !== 'number') { | ||
if (collides.length) { | ||
// now check to make sure we actually collided over 50% surface area while dragging | ||
var collide = node._moving && !o.nested ? this.collideCoverage(node, o, collides) : collides[0]; | ||
var activeDrag = node._moving && !o.nested; | ||
// check to make sure we actually collided over 50% surface area while dragging | ||
var collide = activeDrag ? this.directionCollideCoverage(node, o, collides) : collides[0]; | ||
// if we're enabling creation of sub-grids on the fly, see if we're covering 80% of either one, if we didn't already do that | ||
if (activeDrag && collide && ((_b = (_a = node.grid) === null || _a === void 0 ? void 0 : _a.opts) === null || _b === void 0 ? void 0 : _b.subGridDynamic) && !node.grid._isTemp) { | ||
var over = utils_1.Utils.areaIntercept(o.rect, collide._rect); | ||
var a1 = utils_1.Utils.area(o.rect); | ||
var a2 = utils_1.Utils.area(collide._rect); | ||
var perc = over / (a1 < a2 ? a1 : a2); | ||
if (perc > .8) { | ||
collide.grid.makeSubGrid(collide.el, undefined, node); | ||
collide = undefined; | ||
} | ||
} | ||
if (collide) { | ||
@@ -690,2 +721,4 @@ needToMove = !this._fixCollisions(node, nn, collide, o); // check if already moved... | ||
needToMove = false; // we didn't cover >50% for a move, skip... | ||
if (wasUndefinedPack) | ||
delete o.pack; | ||
} | ||
@@ -743,19 +776,3 @@ } | ||
} | ||
// delete internals | ||
for (var key in w) { | ||
if (key[0] === '_' || w[key] === null || w[key] === undefined) | ||
delete w[key]; | ||
} | ||
delete w.grid; | ||
if (!saveElement) | ||
delete w.el; | ||
// delete default values (will be re-created on read) | ||
if (!w.autoPosition) | ||
delete w.autoPosition; | ||
if (!w.noResize) | ||
delete w.noResize; | ||
if (!w.noMove) | ||
delete w.noMove; | ||
if (!w.locked) | ||
delete w.locked; | ||
utils_1.Utils.removeInternalForSave(w, !saveElement); | ||
list.push(w); | ||
@@ -762,0 +779,0 @@ }); |
/** | ||
* gridstack-poly.ts 6.0.3 used for IE and older browser support (not supported in v2-v4.3.1, but again in v4.4) | ||
* gridstack-poly.ts 7.0.0 used for IE and older browser support (not supported in v2-v4.3.1, but again in v4.4) | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
/*! | ||
* GridStack 6.0.3 | ||
* GridStack 7.0.0 | ||
* https://gridstackjs.com/ | ||
@@ -10,3 +10,3 @@ * | ||
import { Utils } from './utils'; | ||
import { ColumnOptions, GridItemHTMLElement, GridStackElement, GridStackEventHandlerCallback, GridStackOptions, GridStackWidget, numberOrString, DDDragInOpt } from './types'; | ||
import { ColumnOptions, GridItemHTMLElement, GridStackElement, GridStackEventHandlerCallback, GridStackNode, GridStackWidget, numberOrString, DDDragInOpt, GridStackOptions } from './types'; | ||
export * from './types'; | ||
@@ -88,2 +88,4 @@ export * from './utils'; | ||
opts: GridStackOptions; | ||
/** point to a parent grid item if we're nested (inside a grid-item in between 2 Grids) */ | ||
parentGridItem?: GridStackNode; | ||
protected static engineClass: typeof GridStackEngine; | ||
@@ -113,3 +115,17 @@ /** | ||
/** | ||
* Convert an existing gridItem element into a sub-grid with the given (optional) options, else inherit them | ||
* from the parent subGrid options. | ||
* @param el gridItem element to convert | ||
* @param ops (optional) sub-grid options, else default to node, then parent settings, else defaults | ||
* @param nodeToAdd (optional) node to add to the newly created sub grid (used when dragging over existing regular item) | ||
* @returns newly created grid | ||
*/ | ||
makeSubGrid(el: GridItemHTMLElement, ops?: GridStackOptions, nodeToAdd?: GridStackNode, saveContent?: boolean): GridStack; | ||
/** | ||
* called when an item was converted into a nested grid to accommodate a dragged over item, but then item leaves - return back | ||
* to the original grid-item. Also called to remove empty sub-grids when last item is dragged out (since re-creating is simple) | ||
*/ | ||
removeAsSubGrid(nodeThatRemoved?: GridStackNode): void; | ||
/** | ||
/** | ||
* saves the current layout returning a list of widgets for serialization which might include any nested grids. | ||
@@ -306,4 +322,4 @@ * @param saveContent if true (default) the latest html inside .grid-stack-content will be saved to GridStackWidget.content field, else it will | ||
* call to setup dragging in from the outside (say toolbar), by specifying the class selection and options. | ||
* Called during GridStack.init() as options, but can also be called directly (last param are cached) in case the toolbar | ||
* is dynamically create and needs to change later. | ||
* Called during GridStack.init() as options, but can also be called directly (last param are used) in case the toolbar | ||
* is dynamically create and needs to be set later. | ||
* @param dragIn string selector (ex: '.sidebar .grid-stack-item') | ||
@@ -310,0 +326,0 @@ * @param dragInOptions options - see DDDragInOpt. (default: {handle: '.grid-stack-item-content', appendTo: 'body'} |
/** | ||
* types.ts 6.0.3 | ||
* types.ts 7.0.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -7,3 +7,5 @@ */ | ||
import { GridStackEngine } from './gridstack-engine'; | ||
export declare const GridDefaults: GridStackOptions; | ||
export declare const gridDefaults: GridStackOptions; | ||
/** default dragIn options */ | ||
export declare const dragInDefaultOptions: DDDragInOpt; | ||
/** different layout options when changing # of columns, | ||
@@ -77,9 +79,2 @@ * including a custom function that takes new/old column count, and array of new/old positions | ||
draggable?: DDDragOpt; | ||
/** allows to drag external items using this selector - see dragInOptions. (default: undefined) */ | ||
dragIn?: string; | ||
/** allows to drag external items using these options. See `GridStack.setupDragIn()` instead (not per grid really). | ||
* (default?: { handle: '.grid-stack-item-content', appendTo: 'body' }) | ||
* helper can be 'clone' or your own function (set what the drag/dropped item will be instead) | ||
*/ | ||
dragInOptions?: DDDragInOpt; | ||
/** let user drag nested grid items out of a parent or not (default true - not supported yet) */ | ||
@@ -155,2 +150,7 @@ /** the type of engine to create (so you can subclass) default to GridStackEngine */ | ||
styleInHead?: boolean; | ||
/** list of differences in options for automatically created sub-grids under us */ | ||
subGrid?: GridStackOptions; | ||
/** enable/disable the creation of sub-grids on the fly by dragging items completely | ||
* over others (nest) vs partially (push). Forces `DDDragOpt.pause=true` to accomplish that. */ | ||
subGridDynamic?: boolean; | ||
} | ||
@@ -239,5 +239,6 @@ /** options used during GridStackEngine.moveNode() */ | ||
appendTo?: string; | ||
/** if set (true | msec), dragging placement (collision) will only happen after a pause by the user. Note: this is Global */ | ||
pause?: boolean | number; | ||
} | ||
export interface DDDragInOpt extends DDDragOpt { | ||
/** used when dragging item from the outside, and canceling (ex: 'invalid' or your own method)*/ | ||
/** helper function when dropping (ex: 'clone' or your own method) */ | ||
@@ -244,0 +245,0 @@ helper?: string | ((event: Event) => HTMLElement); |
"use strict"; | ||
/** | ||
* types.ts 6.0.3 | ||
* types.ts 7.0.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
*/ | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.GridDefaults = void 0; | ||
exports.dragInDefaultOptions = exports.gridDefaults = void 0; | ||
// default values for grid options - used during init and when saving out | ||
exports.GridDefaults = { | ||
exports.gridDefaults = { | ||
alwaysShowResizeHandle: 'mobile', | ||
@@ -31,2 +31,7 @@ animate: true, | ||
}; | ||
/** default dragIn options */ | ||
exports.dragInDefaultOptions = { | ||
handle: '.grid-stack-item-content', | ||
appendTo: 'body', | ||
}; | ||
//# sourceMappingURL=types.js.map |
/** | ||
* utils.ts 6.0.3 | ||
* utils.ts 7.0.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -30,2 +30,6 @@ */ | ||
static isTouching(a: GridStackPosition, b: GridStackPosition): boolean; | ||
/** returns the area a and b overlap */ | ||
static areaIntercept(a: GridStackPosition, b: GridStackPosition): number; | ||
/** returns the area */ | ||
static area(a: GridStackPosition): number; | ||
/** | ||
@@ -62,4 +66,6 @@ * Sorts array of nodes | ||
static removeInternalAndSame(a: unknown, b: unknown): void; | ||
/** removes internal fields '_' and default values for saving */ | ||
static removeInternalForSave(n: GridStackNode, removeEl?: boolean): void; | ||
/** return the closest parent (or itself) matching the given class */ | ||
static closestByClass(el: HTMLElement, name: string): HTMLElement; | ||
static closestUpByClass(el: HTMLElement, name: string): HTMLElement; | ||
/** delay calling the given function for given delay, preventing new calls from happening while waiting */ | ||
@@ -85,2 +91,4 @@ static throttle(func: () => void, delay: number): () => void; | ||
}): T; | ||
/** copies the MouseEvent properties and sends it as another event to the given target */ | ||
static simulateMouseEvent(e: MouseEvent, simulatedType: string, target?: EventTarget): void; | ||
} |
"use strict"; | ||
/** | ||
* utils.ts 6.0.3 | ||
* utils.ts 7.0.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -123,2 +123,18 @@ */ | ||
}; | ||
/** returns the area a and b overlap */ | ||
Utils.areaIntercept = function (a, b) { | ||
var x0 = (a.x > b.x) ? a.x : b.x; | ||
var x1 = (a.x + a.w < b.x + b.w) ? a.x + a.w : b.x + b.w; | ||
if (x1 <= x0) | ||
return 0; // no overlap | ||
var y0 = (a.y > b.y) ? a.y : b.y; | ||
var y1 = (a.y + a.h < b.y + b.h) ? a.y + a.h : b.y + b.h; | ||
if (y1 <= y0) | ||
return 0; // no overlap | ||
return (x1 - x0) * (y1 - y0); | ||
}; | ||
/** returns the area */ | ||
Utils.area = function (a) { | ||
return a.w * a.h; | ||
}; | ||
/** | ||
@@ -292,4 +308,28 @@ * Sorts array of nodes | ||
}; | ||
/** removes internal fields '_' and default values for saving */ | ||
Utils.removeInternalForSave = function (n, removeEl) { | ||
if (removeEl === void 0) { removeEl = true; } | ||
for (var key in n) { | ||
if (key[0] === '_' || n[key] === null || n[key] === undefined) | ||
delete n[key]; | ||
} | ||
delete n.grid; | ||
if (removeEl) | ||
delete n.el; | ||
// delete default values (will be re-created on read) | ||
if (!n.autoPosition) | ||
delete n.autoPosition; | ||
if (!n.noResize) | ||
delete n.noResize; | ||
if (!n.noMove) | ||
delete n.noMove; | ||
if (!n.locked) | ||
delete n.locked; | ||
if (n.w === 1 || n.w === n.minW) | ||
delete n.w; | ||
if (n.h === 1 || n.h === n.minH) | ||
delete n.h; | ||
}; | ||
/** return the closest parent (or itself) matching the given class */ | ||
Utils.closestByClass = function (el, name) { | ||
Utils.closestUpByClass = function (el, name) { | ||
while (el) { | ||
@@ -430,3 +470,3 @@ if (el.classList.contains(name)) | ||
// list of fields we will skip during cloneDeep (nested objects, other internal) | ||
var skipFields = ['_isNested', 'el', 'grid', 'subGrid', 'engine']; | ||
var skipFields = ['parentGrid', 'el', 'grid', 'subGrid', 'engine']; | ||
// return JSON.parse(JSON.stringify(obj)); // doesn't work with date format ? | ||
@@ -506,2 +546,23 @@ var ret = Utils.clone(obj); | ||
}; | ||
/** copies the MouseEvent properties and sends it as another event to the given target */ | ||
Utils.simulateMouseEvent = function (e, simulatedType, target) { | ||
var simulatedEvent = document.createEvent('MouseEvents'); | ||
simulatedEvent.initMouseEvent(simulatedType, // type | ||
true, // bubbles | ||
true, // cancelable | ||
window, // view | ||
1, // detail | ||
e.screenX, // screenX | ||
e.screenY, // screenY | ||
e.clientX, // clientX | ||
e.clientY, // clientY | ||
e.ctrlKey, // ctrlKey | ||
e.altKey, // altKey | ||
e.shiftKey, // shiftKey | ||
e.metaKey, // metaKey | ||
0, // button | ||
e.target // relatedTarget | ||
); | ||
(target || e.target).dispatchEvent(simulatedEvent); | ||
}; | ||
return Utils; | ||
@@ -508,0 +569,0 @@ }()); |
/*! | ||
* GridStack 6.0.3 | ||
* GridStack 7.0.0 | ||
* https://gridstackjs.com/ | ||
@@ -4,0 +4,0 @@ * |
/** | ||
* gridstack-engine.ts 6.0.3 | ||
* gridstack-engine.ts 7.0.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -35,4 +35,5 @@ */ | ||
collideAll(skip: GridStackNode, area?: GridStackNode, skip2?: GridStackNode): GridStackNode[]; | ||
/** does a pixel coverage collision, returning the node that has the most coverage that is >50% mid line */ | ||
collideCoverage(node: GridStackNode, o: GridStackMoveOpts, collides: GridStackNode[]): GridStackNode; | ||
/** does a pixel coverage collision based on where we started, returning the node that has the most coverage that is >50% mid line */ | ||
protected directionCollideCoverage(node: GridStackNode, o: GridStackMoveOpts, collides: GridStackNode[]): GridStackNode; | ||
/** does a pixel coverage returning the node that has the most coverage by area */ | ||
/** called to cache the nodes pixel rectangles used for collision detection during drag */ | ||
@@ -39,0 +40,0 @@ cacheRects(w: number, h: number, top: number, right: number, bottom: number, left: number): GridStackEngine; |
"use strict"; | ||
/** | ||
* gridstack-engine.ts 6.0.3 | ||
* gridstack-engine.ts 7.0.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -103,4 +103,4 @@ */ | ||
} | ||
/** does a pixel coverage collision, returning the node that has the most coverage that is >50% mid line */ | ||
collideCoverage(node, o, collides) { | ||
/** does a pixel coverage collision based on where we started, returning the node that has the most coverage that is >50% mid line */ | ||
directionCollideCoverage(node, o, collides) { | ||
if (!o.rect || !node._rect) | ||
@@ -154,2 +154,18 @@ return; | ||
} | ||
/** does a pixel coverage returning the node that has the most coverage by area */ | ||
/* | ||
protected collideCoverage(r: GridStackPosition, collides: GridStackNode[]): {collide: GridStackNode, over: number} { | ||
let collide: GridStackNode; | ||
let overMax = 0; | ||
collides.forEach(n => { | ||
if (n.locked || !n._rect) return; | ||
let over = Utils.areaIntercept(r, n._rect); | ||
if (over > overMax) { | ||
overMax = over; | ||
collide = n; | ||
} | ||
}); | ||
return {collide, over: overMax}; | ||
} | ||
*/ | ||
/** called to cache the nodes pixel rectangles used for collision detection during drag */ | ||
@@ -616,6 +632,9 @@ cacheRects(w, h, top, right, bottom, left) { | ||
moveNode(node, o) { | ||
var _a, _b; | ||
if (!node || /*node.locked ||*/ !o) | ||
return false; | ||
if (o.pack === undefined) | ||
o.pack = true; | ||
let wasUndefinedPack; | ||
if (o.pack === undefined) { | ||
wasUndefinedPack = o.pack = true; | ||
} | ||
// constrain the passed in values and check if we're still changing our node | ||
@@ -646,4 +665,16 @@ if (typeof o.x !== 'number') { | ||
if (collides.length) { | ||
// now check to make sure we actually collided over 50% surface area while dragging | ||
let collide = node._moving && !o.nested ? this.collideCoverage(node, o, collides) : collides[0]; | ||
let activeDrag = node._moving && !o.nested; | ||
// check to make sure we actually collided over 50% surface area while dragging | ||
let collide = activeDrag ? this.directionCollideCoverage(node, o, collides) : collides[0]; | ||
// if we're enabling creation of sub-grids on the fly, see if we're covering 80% of either one, if we didn't already do that | ||
if (activeDrag && collide && ((_b = (_a = node.grid) === null || _a === void 0 ? void 0 : _a.opts) === null || _b === void 0 ? void 0 : _b.subGridDynamic) && !node.grid._isTemp) { | ||
let over = utils_1.Utils.areaIntercept(o.rect, collide._rect); | ||
let a1 = utils_1.Utils.area(o.rect); | ||
let a2 = utils_1.Utils.area(collide._rect); | ||
let perc = over / (a1 < a2 ? a1 : a2); | ||
if (perc > .8) { | ||
collide.grid.makeSubGrid(collide.el, undefined, node); | ||
collide = undefined; | ||
} | ||
} | ||
if (collide) { | ||
@@ -654,2 +685,4 @@ needToMove = !this._fixCollisions(node, nn, collide, o); // check if already moved... | ||
needToMove = false; // we didn't cover >50% for a move, skip... | ||
if (wasUndefinedPack) | ||
delete o.pack; | ||
} | ||
@@ -706,19 +739,3 @@ } | ||
} | ||
// delete internals | ||
for (let key in w) { | ||
if (key[0] === '_' || w[key] === null || w[key] === undefined) | ||
delete w[key]; | ||
} | ||
delete w.grid; | ||
if (!saveElement) | ||
delete w.el; | ||
// delete default values (will be re-created on read) | ||
if (!w.autoPosition) | ||
delete w.autoPosition; | ||
if (!w.noResize) | ||
delete w.noResize; | ||
if (!w.noMove) | ||
delete w.noMove; | ||
if (!w.locked) | ||
delete w.locked; | ||
utils_1.Utils.removeInternalForSave(w, !saveElement); | ||
list.push(w); | ||
@@ -725,0 +742,0 @@ }); |
/*! | ||
* GridStack 6.0.3 | ||
* GridStack 7.0.0 | ||
* https://gridstackjs.com/ | ||
@@ -10,3 +10,3 @@ * | ||
import { Utils } from './utils'; | ||
import { ColumnOptions, GridItemHTMLElement, GridStackElement, GridStackEventHandlerCallback, GridStackOptions, GridStackWidget, numberOrString, DDDragInOpt } from './types'; | ||
import { ColumnOptions, GridItemHTMLElement, GridStackElement, GridStackEventHandlerCallback, GridStackNode, GridStackWidget, numberOrString, DDDragInOpt, GridStackOptions } from './types'; | ||
export * from './types'; | ||
@@ -88,2 +88,4 @@ export * from './utils'; | ||
opts: GridStackOptions; | ||
/** point to a parent grid item if we're nested (inside a grid-item in between 2 Grids) */ | ||
parentGridItem?: GridStackNode; | ||
protected static engineClass: typeof GridStackEngine; | ||
@@ -113,3 +115,17 @@ /** | ||
/** | ||
* Convert an existing gridItem element into a sub-grid with the given (optional) options, else inherit them | ||
* from the parent subGrid options. | ||
* @param el gridItem element to convert | ||
* @param ops (optional) sub-grid options, else default to node, then parent settings, else defaults | ||
* @param nodeToAdd (optional) node to add to the newly created sub grid (used when dragging over existing regular item) | ||
* @returns newly created grid | ||
*/ | ||
makeSubGrid(el: GridItemHTMLElement, ops?: GridStackOptions, nodeToAdd?: GridStackNode, saveContent?: boolean): GridStack; | ||
/** | ||
* called when an item was converted into a nested grid to accommodate a dragged over item, but then item leaves - return back | ||
* to the original grid-item. Also called to remove empty sub-grids when last item is dragged out (since re-creating is simple) | ||
*/ | ||
removeAsSubGrid(nodeThatRemoved?: GridStackNode): void; | ||
/** | ||
/** | ||
* saves the current layout returning a list of widgets for serialization which might include any nested grids. | ||
@@ -306,4 +322,4 @@ * @param saveContent if true (default) the latest html inside .grid-stack-content will be saved to GridStackWidget.content field, else it will | ||
* call to setup dragging in from the outside (say toolbar), by specifying the class selection and options. | ||
* Called during GridStack.init() as options, but can also be called directly (last param are cached) in case the toolbar | ||
* is dynamically create and needs to change later. | ||
* Called during GridStack.init() as options, but can also be called directly (last param are used) in case the toolbar | ||
* is dynamically create and needs to be set later. | ||
* @param dragIn string selector (ex: '.sidebar .grid-stack-item') | ||
@@ -310,0 +326,0 @@ * @param dragInOptions options - see DDDragInOpt. (default: {handle: '.grid-stack-item-content', appendTo: 'body'} |
/** | ||
* types.ts 6.0.3 | ||
* types.ts 7.0.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -7,3 +7,5 @@ */ | ||
import { GridStackEngine } from './gridstack-engine'; | ||
export declare const GridDefaults: GridStackOptions; | ||
export declare const gridDefaults: GridStackOptions; | ||
/** default dragIn options */ | ||
export declare const dragInDefaultOptions: DDDragInOpt; | ||
/** different layout options when changing # of columns, | ||
@@ -77,9 +79,2 @@ * including a custom function that takes new/old column count, and array of new/old positions | ||
draggable?: DDDragOpt; | ||
/** allows to drag external items using this selector - see dragInOptions. (default: undefined) */ | ||
dragIn?: string; | ||
/** allows to drag external items using these options. See `GridStack.setupDragIn()` instead (not per grid really). | ||
* (default?: { handle: '.grid-stack-item-content', appendTo: 'body' }) | ||
* helper can be 'clone' or your own function (set what the drag/dropped item will be instead) | ||
*/ | ||
dragInOptions?: DDDragInOpt; | ||
/** let user drag nested grid items out of a parent or not (default true - not supported yet) */ | ||
@@ -155,2 +150,7 @@ /** the type of engine to create (so you can subclass) default to GridStackEngine */ | ||
styleInHead?: boolean; | ||
/** list of differences in options for automatically created sub-grids under us */ | ||
subGrid?: GridStackOptions; | ||
/** enable/disable the creation of sub-grids on the fly by dragging items completely | ||
* over others (nest) vs partially (push). Forces `DDDragOpt.pause=true` to accomplish that. */ | ||
subGridDynamic?: boolean; | ||
} | ||
@@ -239,5 +239,6 @@ /** options used during GridStackEngine.moveNode() */ | ||
appendTo?: string; | ||
/** if set (true | msec), dragging placement (collision) will only happen after a pause by the user. Note: this is Global */ | ||
pause?: boolean | number; | ||
} | ||
export interface DDDragInOpt extends DDDragOpt { | ||
/** used when dragging item from the outside, and canceling (ex: 'invalid' or your own method)*/ | ||
/** helper function when dropping (ex: 'clone' or your own method) */ | ||
@@ -244,0 +245,0 @@ helper?: string | ((event: Event) => HTMLElement); |
"use strict"; | ||
/** | ||
* types.ts 6.0.3 | ||
* types.ts 7.0.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
*/ | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.GridDefaults = void 0; | ||
exports.dragInDefaultOptions = exports.gridDefaults = void 0; | ||
// default values for grid options - used during init and when saving out | ||
exports.GridDefaults = { | ||
exports.gridDefaults = { | ||
alwaysShowResizeHandle: 'mobile', | ||
@@ -31,2 +31,7 @@ animate: true, | ||
}; | ||
/** default dragIn options */ | ||
exports.dragInDefaultOptions = { | ||
handle: '.grid-stack-item-content', | ||
appendTo: 'body', | ||
}; | ||
//# sourceMappingURL=types.js.map |
/** | ||
* utils.ts 6.0.3 | ||
* utils.ts 7.0.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -30,2 +30,6 @@ */ | ||
static isTouching(a: GridStackPosition, b: GridStackPosition): boolean; | ||
/** returns the area a and b overlap */ | ||
static areaIntercept(a: GridStackPosition, b: GridStackPosition): number; | ||
/** returns the area */ | ||
static area(a: GridStackPosition): number; | ||
/** | ||
@@ -62,4 +66,6 @@ * Sorts array of nodes | ||
static removeInternalAndSame(a: unknown, b: unknown): void; | ||
/** removes internal fields '_' and default values for saving */ | ||
static removeInternalForSave(n: GridStackNode, removeEl?: boolean): void; | ||
/** return the closest parent (or itself) matching the given class */ | ||
static closestByClass(el: HTMLElement, name: string): HTMLElement; | ||
static closestUpByClass(el: HTMLElement, name: string): HTMLElement; | ||
/** delay calling the given function for given delay, preventing new calls from happening while waiting */ | ||
@@ -85,2 +91,4 @@ static throttle(func: () => void, delay: number): () => void; | ||
}): T; | ||
/** copies the MouseEvent properties and sends it as another event to the given target */ | ||
static simulateMouseEvent(e: MouseEvent, simulatedType: string, target?: EventTarget): void; | ||
} |
"use strict"; | ||
/** | ||
* utils.ts 6.0.3 | ||
* utils.ts 7.0.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -99,2 +99,18 @@ */ | ||
} | ||
/** returns the area a and b overlap */ | ||
static areaIntercept(a, b) { | ||
let x0 = (a.x > b.x) ? a.x : b.x; | ||
let x1 = (a.x + a.w < b.x + b.w) ? a.x + a.w : b.x + b.w; | ||
if (x1 <= x0) | ||
return 0; // no overlap | ||
let y0 = (a.y > b.y) ? a.y : b.y; | ||
let y1 = (a.y + a.h < b.y + b.h) ? a.y + a.h : b.y + b.h; | ||
if (y1 <= y0) | ||
return 0; // no overlap | ||
return (x1 - x0) * (y1 - y0); | ||
} | ||
/** returns the area */ | ||
static area(a) { | ||
return a.w * a.h; | ||
} | ||
/** | ||
@@ -262,4 +278,27 @@ * Sorts array of nodes | ||
} | ||
/** removes internal fields '_' and default values for saving */ | ||
static removeInternalForSave(n, removeEl = true) { | ||
for (let key in n) { | ||
if (key[0] === '_' || n[key] === null || n[key] === undefined) | ||
delete n[key]; | ||
} | ||
delete n.grid; | ||
if (removeEl) | ||
delete n.el; | ||
// delete default values (will be re-created on read) | ||
if (!n.autoPosition) | ||
delete n.autoPosition; | ||
if (!n.noResize) | ||
delete n.noResize; | ||
if (!n.noMove) | ||
delete n.noMove; | ||
if (!n.locked) | ||
delete n.locked; | ||
if (n.w === 1 || n.w === n.minW) | ||
delete n.w; | ||
if (n.h === 1 || n.h === n.minH) | ||
delete n.h; | ||
} | ||
/** return the closest parent (or itself) matching the given class */ | ||
static closestByClass(el, name) { | ||
static closestUpByClass(el, name) { | ||
while (el) { | ||
@@ -396,3 +435,3 @@ if (el.classList.contains(name)) | ||
// list of fields we will skip during cloneDeep (nested objects, other internal) | ||
const skipFields = ['_isNested', 'el', 'grid', 'subGrid', 'engine']; | ||
const skipFields = ['parentGrid', 'el', 'grid', 'subGrid', 'engine']; | ||
// return JSON.parse(JSON.stringify(obj)); // doesn't work with date format ? | ||
@@ -466,4 +505,25 @@ const ret = Utils.clone(obj); | ||
} | ||
/** copies the MouseEvent properties and sends it as another event to the given target */ | ||
static simulateMouseEvent(e, simulatedType, target) { | ||
const simulatedEvent = document.createEvent('MouseEvents'); | ||
simulatedEvent.initMouseEvent(simulatedType, // type | ||
true, // bubbles | ||
true, // cancelable | ||
window, // view | ||
1, // detail | ||
e.screenX, // screenX | ||
e.screenY, // screenY | ||
e.clientX, // clientX | ||
e.clientY, // clientY | ||
e.ctrlKey, // ctrlKey | ||
e.altKey, // altKey | ||
e.shiftKey, // shiftKey | ||
e.metaKey, // metaKey | ||
0, // button | ||
e.target // relatedTarget | ||
); | ||
(target || e.target).dispatchEvent(simulatedEvent); | ||
} | ||
} | ||
exports.Utils = Utils; | ||
//# sourceMappingURL=utils.js.map |
@@ -8,2 +8,3 @@ Change log | ||
- [7.0.0 (2022-10-09)](#700-2022-10-09) | ||
- [6.0.3 (2022-10-08)](#603-2022-10-08) | ||
@@ -76,2 +77,10 @@ - [6.0.2 (2022-09-23)](#602-2022-09-23) | ||
## 7.0.0 (2022-10-09) | ||
* add [#1009](https://github.com/gridstack/gridstack.js/issues/1009) Create sub-grids on the fly, | ||
by dragging items completely over others (nest) vs partially (push) using new flag `GridStackOptions.subGridDynamic=true`. | ||
Thank you [StephanP] for sponsoring it.<br> | ||
See [advance Nested](https://github.com/gridstack/gridstack.js/blob/master/demo/nested_advanced.html) | ||
* add - ability to pause drag&drop collision until the user stops moving - see `DDDragOpt.pause` (used for creating nested grids on the fly based on gesture). | ||
* add [#1943](https://github.com/gridstack/gridstack.js/issues/1943) you can now drag sub-grids into other sub-grids | ||
## 6.0.3 (2022-10-08) | ||
@@ -78,0 +87,0 @@ * fixed [#2055](https://github.com/gridstack/gridstack.js/issues/2055) maxRow=1 resize outside (broke in 6.0.1) |
@@ -156,3 +156,4 @@ gridstack.js API | ||
- `content` - (string) html content to be added when calling `grid.load()/addWidget()` as content inside the item | ||
- `subGrid`: GridStackOptions - optional nested grid options and list of children | ||
- `subGrid`?: GridStackOptions - optional nested grid options and list of children | ||
- `subGridDynamic`?: boolean - enable/disable the creation of sub-grids on the fly by dragging items completely over others (nest) vs partially (push). Forces `DDDragOpt.pause=true` to accomplish that. | ||
@@ -159,0 +160,0 @@ ## Item attributes |
{ | ||
"name": "gridstack", | ||
"version": "6.0.3", | ||
"version": "7.0.0", | ||
"description": "TypeScript/JS lib for dashboard layout and creation, no external dependencies, with many wrappers (React, Angular, Vue, Ember, knockout...)", | ||
@@ -5,0 +5,0 @@ "main": "./dist/gridstack.js", |
@@ -46,2 +46,3 @@ # gridstack.js | ||
- [Migrating to v6](#migrating-to-v6) | ||
- [Migrating to v7](#migrating-to-v7) | ||
- [jQuery Application](#jquery-application) | ||
@@ -440,6 +441,10 @@ - [Changes](#changes) | ||
the API did not really change from v5, but a complete re-write of Drag&Drop to use native mouseevent (instead of HTML draggable=true which is buggy on Mac Safari, and doesn't work on mobile devices) and touchevent (mobile), and we no longer have jquery ui option (wasn't working well for nested grids, didn't want to maintain legacy lib). | ||
the API did not really change from v5, but a complete re-write of Drag&Drop to use native `mouseevent` (instead of HTML draggable=true which is buggy on Mac Safari, and doesn't work on mobile devices) and `touchevent` (mobile), and we no longer have jquery ui option (wasn't working well for nested grids, didn't want to maintain legacy lib). | ||
The main difference is you only need to include gridstack.js and get D&D (desktop and mobile) out of the box for the same size as h5 version. | ||
## Migrating to v7 | ||
New addition, no API breakage per say. See release notes about creating sub-grids on the fly. | ||
# jQuery Application | ||
@@ -446,0 +451,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
2383675
14383
495