gridstack
Advanced tools
Comparing version 10.0.1 to 10.1.0
@@ -21,3 +21,3 @@ { | ||
"@angular/router": "^14.2.0", | ||
"gridstack": "^10.0.0", | ||
"gridstack": "^10.0.1", | ||
"rxjs": "~7.5.0", | ||
@@ -24,0 +24,0 @@ "tslib": "^2.3.0", |
{ | ||
"name": "gridstack-angular", | ||
"version": "10.0.1", | ||
"version": "10.1.0", | ||
"peerDependencies": { | ||
@@ -5,0 +5,0 @@ "@angular/common": "^14.2.0", |
/** | ||
* gridstack-item.component.ts 10.0.1 | ||
* gridstack-item.component.ts 10.1.0 | ||
* Copyright (c) 2022 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
/** | ||
* gridstack-item.component.ts 10.0.1 | ||
* gridstack-item.component.ts 10.1.0 | ||
* Copyright (c) 2022 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
/** | ||
* gridstack.component.ts 10.0.1 | ||
* gridstack.component.ts 10.1.0 | ||
* Copyright (c) 2022 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
/** | ||
* gridstack.component.ts 10.0.1 | ||
* gridstack.component.ts 10.1.0 | ||
* Copyright (c) 2022 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
/** | ||
* gridstack-item.component.ts 10.0.1 | ||
* gridstack-item.component.ts 10.1.0 | ||
* Copyright (c) 2022 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
/** | ||
* gridstack.component.ts 10.0.1 | ||
* gridstack.component.ts 10.1.0 | ||
* Copyright (c) 2022 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
{ | ||
"name": "gridstack-angular", | ||
"version": "10.0.1", | ||
"version": "10.1.0", | ||
"peerDependencies": { | ||
@@ -5,0 +5,0 @@ "@angular/common": "^14.2.0", |
/** | ||
* gridstack-item.component.ts 10.0.1 | ||
* gridstack-item.component.ts 10.1.0 | ||
* Copyright (c) 2022 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
/** | ||
* gridstack-item.component.ts 10.0.1 | ||
* gridstack-item.component.ts 10.1.0 | ||
* Copyright (c) 2022 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
/** | ||
* gridstack.component.ts 10.0.1 | ||
* gridstack.component.ts 10.1.0 | ||
* Copyright (c) 2022 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
/** | ||
* gridstack.component.ts 10.0.1 | ||
* gridstack.component.ts 10.1.0 | ||
* Copyright (c) 2022 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
/** | ||
* dd-base-impl.ts 10.0.1 | ||
* dd-base-impl.ts 10.1.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
/** | ||
* dd-base-impl.ts 10.0.1 | ||
* dd-base-impl.ts 10.1.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
/** | ||
* dd-draggable.ts 10.0.1 | ||
* dd-draggable.ts 10.1.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
/** | ||
* dd-draggable.ts 10.0.1 | ||
* dd-draggable.ts 10.1.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -16,3 +16,8 @@ */ | ||
/** @internal */ | ||
this.dragScale = { x: 1, y: 1 }; | ||
this.dragTransform = { | ||
xScale: 1, | ||
yScale: 1, | ||
xOffset: 0, | ||
yOffset: 0 | ||
}; | ||
this.el = el; | ||
@@ -101,3 +106,3 @@ this.option = option; | ||
// document handler so we can continue receiving moves as the item is 'fixed' position, and capture=true so WE get a first crack | ||
document.addEventListener('mousemove', this._mouseMove, true); // true=capture, not bubble | ||
document.addEventListener('mousemove', this._mouseMove, { capture: true, passive: true }); // true=capture, not bubble | ||
document.addEventListener('mouseup', this._mouseUp, true); | ||
@@ -159,2 +164,3 @@ if (isTouch) { | ||
this._setupHelperContainmentStyle(); | ||
this.dragTransform = Utils.getValuesFromTransformedElement(this.helperContainment); | ||
this.dragOffset = this._getDragOffset(e, this.el, this.helperContainment); | ||
@@ -168,3 +174,3 @@ const ev = Utils.initEvent(e, { target: this.el, type: 'dragstart' }); | ||
} | ||
e.preventDefault(); // needed otherwise we get text sweep text selection as we drag around | ||
// e.preventDefault(); // passive = true. OLD: was needed otherwise we get text sweep text selection as we drag around | ||
return true; | ||
@@ -276,4 +282,4 @@ } | ||
const offset = this.dragOffset; | ||
style.left = (e.clientX + offset.offsetLeft - containmentRect.left) * this.dragScale.x + 'px'; | ||
style.top = (e.clientY + offset.offsetTop - containmentRect.top) * this.dragScale.y + 'px'; | ||
style.left = (e.clientX + offset.offsetLeft - containmentRect.left) * this.dragTransform.xScale + 'px'; | ||
style.top = (e.clientY + offset.offsetTop - containmentRect.top) * this.dragTransform.yScale + 'px'; | ||
} | ||
@@ -297,21 +303,4 @@ /** @internal */ | ||
if (parent) { | ||
const testEl = document.createElement('div'); | ||
Utils.addElStyles(testEl, { | ||
opacity: '0', | ||
position: 'fixed', | ||
top: 0 + 'px', | ||
left: 0 + 'px', | ||
width: '1px', | ||
height: '1px', | ||
zIndex: '-999999', | ||
}); | ||
parent.appendChild(testEl); | ||
const testElPosition = testEl.getBoundingClientRect(); | ||
parent.removeChild(testEl); | ||
xformOffsetX = testElPosition.left; | ||
xformOffsetY = testElPosition.top; | ||
this.dragScale = { | ||
x: 1 / testElPosition.width, | ||
y: 1 / testElPosition.height | ||
}; | ||
xformOffsetX = this.dragTransform.xOffset; | ||
xformOffsetY = this.dragTransform.yOffset; | ||
} | ||
@@ -324,4 +313,4 @@ const targetOffset = el.getBoundingClientRect(); | ||
offsetTop: -event.clientY + targetOffset.top - xformOffsetY, | ||
width: targetOffset.width * this.dragScale.x, | ||
height: targetOffset.height * this.dragScale.y | ||
width: targetOffset.width * this.dragTransform.xScale, | ||
height: targetOffset.height * this.dragTransform.yScale | ||
}; | ||
@@ -336,4 +325,4 @@ } | ||
position: { | ||
top: (offset.top - containmentRect.top) * this.dragScale.y, | ||
left: (offset.left - containmentRect.left) * this.dragScale.x | ||
top: (offset.top - containmentRect.top) * this.dragTransform.yScale, | ||
left: (offset.left - containmentRect.left) * this.dragTransform.xScale | ||
} | ||
@@ -340,0 +329,0 @@ /* not used by GridStack for now... |
/** | ||
* dd-droppable.ts 10.0.1 | ||
* dd-droppable.ts 10.1.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
/** | ||
* dd-droppable.ts 10.0.1 | ||
* dd-droppable.ts 10.1.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -76,3 +76,3 @@ */ | ||
if (DDManager.dropElement && DDManager.dropElement !== this) { | ||
DDManager.dropElement._mouseLeave(e); | ||
DDManager.dropElement._mouseLeave(e, true); // calledByEnter = true | ||
} | ||
@@ -89,3 +89,3 @@ DDManager.dropElement = this; | ||
/** @internal called when the item is leaving our area, stop tracking if we had moving item */ | ||
_mouseLeave(e) { | ||
_mouseLeave(e, calledByEnter = false) { | ||
// console.log(`${count++} Leave ${this.el.id || (this.el as GridHTMLElement).gridstack.opts.id}`); // TEST | ||
@@ -105,11 +105,13 @@ if (!DDManager.dragElement || DDManager.dropElement !== this) | ||
// if we're still over a parent droppable, send it an enter as we don't get one from leaving nested children | ||
let parentDrop; | ||
let parent = this.el.parentElement; | ||
while (!parentDrop && parent) { | ||
parentDrop = parent.ddElement?.ddDroppable; | ||
parent = parent.parentElement; | ||
if (!calledByEnter) { | ||
let parentDrop; | ||
let parent = this.el.parentElement; | ||
while (!parentDrop && parent) { | ||
parentDrop = parent.ddElement?.ddDroppable; | ||
parent = parent.parentElement; | ||
} | ||
if (parentDrop) { | ||
parentDrop._mouseEnter(e); | ||
} | ||
} | ||
if (parentDrop) { | ||
parentDrop._mouseEnter(e); | ||
} | ||
} | ||
@@ -116,0 +118,0 @@ } |
/** | ||
* dd-elements.ts 10.0.1 | ||
* dd-elements.ts 10.1.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
/** | ||
* dd-elements.ts 10.0.1 | ||
* dd-elements.ts 10.1.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
/** | ||
* dd-gridstack.ts 10.0.1 | ||
* dd-gridstack.ts 10.1.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
/** | ||
* dd-gridstack.ts 10.0.1 | ||
* dd-gridstack.ts 10.1.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -25,5 +25,15 @@ */ | ||
else { | ||
const grid = dEl.el.gridstackNode.grid; | ||
let handles = dEl.el.getAttribute('gs-resize-handles') ? dEl.el.getAttribute('gs-resize-handles') : grid.opts.resizable.handles; | ||
let autoHide = !grid.opts.alwaysShowResizeHandle; | ||
const n = dEl.el.gridstackNode; | ||
const grid = n.grid; | ||
let handles = dEl.el.getAttribute('gs-resize-handles') || grid.opts.resizable.handles || 'e,s,se'; | ||
if (handles === 'all') | ||
handles = 'n,e,s,w,se,sw,ne,nw'; | ||
// NOTE: keep the resize handles as e,w don't have enough space (10px) to show resize corners anyway. limit during drag instead | ||
// restrict vertical resize if height is done to match content anyway... odd to have it spring back | ||
// if (Utils.shouldSizeToContent(n)) { | ||
// const doE = handles.indexOf('e') !== -1; | ||
// const doW = handles.indexOf('w') !== -1; | ||
// handles = doE ? (doW ? 'e,w' : 'e') : (doW ? 'w' : ''); | ||
// } | ||
const autoHide = !grid.opts.alwaysShowResizeHandle; | ||
dEl.setupResizable({ | ||
@@ -30,0 +40,0 @@ ...grid.opts.resizable, |
/** | ||
* dd-manager.ts 10.0.1 | ||
* dd-manager.ts 10.1.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
/** | ||
* dd-manager.ts 10.0.1 | ||
* dd-manager.ts 10.1.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
/** | ||
* dd-resizable-handle.ts 10.0.1 | ||
* dd-resizable-handle.ts 10.1.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
/** | ||
* dd-resizable-handle.ts 10.0.1 | ||
* dd-resizable-handle.ts 10.1.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -53,3 +53,3 @@ */ | ||
this.mouseDownEvent = e; | ||
document.addEventListener('mousemove', this._mouseMove, true); // capture, not bubble | ||
document.addEventListener('mousemove', this._mouseMove, { capture: true, passive: true }); // capture, not bubble | ||
document.addEventListener('mouseup', this._mouseUp, true); | ||
@@ -76,3 +76,3 @@ if (isTouch) { | ||
e.stopPropagation(); | ||
e.preventDefault(); | ||
// e.preventDefault(); passive = true | ||
} | ||
@@ -79,0 +79,0 @@ /** @internal */ |
/** | ||
* dd-resizable.ts 10.0.1 | ||
* dd-resizable.ts 10.1.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
*/ | ||
import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl'; | ||
import { DDUIData } from './types'; | ||
import { DDUIData, GridItemHTMLElement } from './types'; | ||
export interface DDResizableOpt { | ||
@@ -19,3 +19,3 @@ autoHide?: boolean; | ||
export declare class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt<DDResizableOpt> { | ||
el: HTMLElement; | ||
el: GridItemHTMLElement; | ||
option: DDResizableOpt; | ||
@@ -22,0 +22,0 @@ constructor(el: HTMLElement, opts?: DDResizableOpt); |
/** | ||
* dd-resizable.ts 10.0.1 | ||
* dd-resizable.ts 10.1.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -134,7 +134,3 @@ */ | ||
_setupHandlers() { | ||
let handlerDirection = this.option.handles || 'e,s,se'; | ||
if (handlerDirection === 'all') { | ||
handlerDirection = 'n,e,s,w,se,sw,ne,nw'; | ||
} | ||
this.handlers = handlerDirection.split(',') | ||
this.handlers = this.option.handles.split(',') | ||
.map(dir => dir.trim()) | ||
@@ -156,2 +152,3 @@ .map(dir => new DDResizableHandle(this.el, dir, { | ||
_resizeStart(event) { | ||
this.sizeToContent = Utils.shouldSizeToContent(this.el.gridstackNode); | ||
this.originalRect = this.el.getBoundingClientRect(); | ||
@@ -205,18 +202,6 @@ this.scrollEl = Utils.getScrollElement(this.el); | ||
const parent = this.el.parentElement; | ||
const testEl = document.createElement('div'); | ||
Utils.addElStyles(testEl, { | ||
opacity: '0', | ||
position: 'fixed', | ||
top: 0 + 'px', | ||
left: 0 + 'px', | ||
width: '1px', | ||
height: '1px', | ||
zIndex: '-999999', | ||
}); | ||
parent.appendChild(testEl); | ||
const testElPosition = testEl.getBoundingClientRect(); | ||
parent.removeChild(testEl); | ||
const dragTransform = Utils.getValuesFromTransformedElement(parent); | ||
this.rectScale = { | ||
x: 1 / testElPosition.width, | ||
y: 1 / testElPosition.height | ||
x: dragTransform.xScale, | ||
y: dragTransform.yScale | ||
}; | ||
@@ -248,3 +233,3 @@ if (getComputedStyle(this.el.parentElement).position.match(/static/)) { | ||
const offsetX = event.clientX - oEvent.clientX; | ||
const offsetY = event.clientY - oEvent.clientY; | ||
const offsetY = this.sizeToContent ? 0 : event.clientY - oEvent.clientY; // prevent vert resize | ||
if (dir.indexOf('e') > -1) { | ||
@@ -251,0 +236,0 @@ newRect.width += offsetX; |
/** | ||
* touch.ts 10.0.1 | ||
* touch.ts 10.1.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
/** | ||
* touch.ts 10.0.1 | ||
* touch.ts 10.1.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
/** | ||
* dd-base-impl.ts 10.0.1 | ||
* dd-base-impl.ts 10.1.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
"use strict"; | ||
/** | ||
* dd-base-impl.ts 10.0.1 | ||
* dd-base-impl.ts 10.1.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -5,0 +5,0 @@ */ |
/** | ||
* dd-draggable.ts 10.0.1 | ||
* dd-draggable.ts 10.1.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
"use strict"; | ||
/** | ||
* dd-draggable.ts 10.0.1 | ||
* dd-draggable.ts 10.1.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -36,3 +36,8 @@ */ | ||
/** @internal */ | ||
_this.dragScale = { x: 1, y: 1 }; | ||
_this.dragTransform = { | ||
xScale: 1, | ||
yScale: 1, | ||
xOffset: 0, | ||
yOffset: 0 | ||
}; | ||
_this.el = el; | ||
@@ -124,3 +129,3 @@ _this.option = option; | ||
// document handler so we can continue receiving moves as the item is 'fixed' position, and capture=true so WE get a first crack | ||
document.addEventListener('mousemove', this._mouseMove, true); // true=capture, not bubble | ||
document.addEventListener('mousemove', this._mouseMove, { capture: true, passive: true }); // true=capture, not bubble | ||
document.addEventListener('mouseup', this._mouseUp, true); | ||
@@ -184,2 +189,3 @@ if (dd_touch_1.isTouch) { | ||
this._setupHelperContainmentStyle(); | ||
this.dragTransform = utils_1.Utils.getValuesFromTransformedElement(this.helperContainment); | ||
this.dragOffset = this._getDragOffset(e, this.el, this.helperContainment); | ||
@@ -193,3 +199,3 @@ var ev = utils_1.Utils.initEvent(e, { target: this.el, type: 'dragstart' }); | ||
} | ||
e.preventDefault(); // needed otherwise we get text sweep text selection as we drag around | ||
// e.preventDefault(); // passive = true. OLD: was needed otherwise we get text sweep text selection as we drag around | ||
return true; | ||
@@ -306,4 +312,4 @@ }; | ||
var offset = this.dragOffset; | ||
style.left = (e.clientX + offset.offsetLeft - containmentRect.left) * this.dragScale.x + 'px'; | ||
style.top = (e.clientY + offset.offsetTop - containmentRect.top) * this.dragScale.y + 'px'; | ||
style.left = (e.clientX + offset.offsetLeft - containmentRect.left) * this.dragTransform.xScale + 'px'; | ||
style.top = (e.clientY + offset.offsetTop - containmentRect.top) * this.dragTransform.yScale + 'px'; | ||
}; | ||
@@ -327,21 +333,4 @@ /** @internal */ | ||
if (parent) { | ||
var testEl = document.createElement('div'); | ||
utils_1.Utils.addElStyles(testEl, { | ||
opacity: '0', | ||
position: 'fixed', | ||
top: 0 + 'px', | ||
left: 0 + 'px', | ||
width: '1px', | ||
height: '1px', | ||
zIndex: '-999999', | ||
}); | ||
parent.appendChild(testEl); | ||
var testElPosition = testEl.getBoundingClientRect(); | ||
parent.removeChild(testEl); | ||
xformOffsetX = testElPosition.left; | ||
xformOffsetY = testElPosition.top; | ||
this.dragScale = { | ||
x: 1 / testElPosition.width, | ||
y: 1 / testElPosition.height | ||
}; | ||
xformOffsetX = this.dragTransform.xOffset; | ||
xformOffsetY = this.dragTransform.yOffset; | ||
} | ||
@@ -354,4 +343,4 @@ var targetOffset = el.getBoundingClientRect(); | ||
offsetTop: -event.clientY + targetOffset.top - xformOffsetY, | ||
width: targetOffset.width * this.dragScale.x, | ||
height: targetOffset.height * this.dragScale.y | ||
width: targetOffset.width * this.dragTransform.xScale, | ||
height: targetOffset.height * this.dragTransform.yScale | ||
}; | ||
@@ -366,4 +355,4 @@ }; | ||
position: { | ||
top: (offset.top - containmentRect.top) * this.dragScale.y, | ||
left: (offset.left - containmentRect.left) * this.dragScale.x | ||
top: (offset.top - containmentRect.top) * this.dragTransform.yScale, | ||
left: (offset.left - containmentRect.left) * this.dragTransform.xScale | ||
} | ||
@@ -370,0 +359,0 @@ /* not used by GridStack for now... |
/** | ||
* dd-droppable.ts 10.0.1 | ||
* dd-droppable.ts 10.1.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
"use strict"; | ||
/** | ||
* dd-droppable.ts 10.0.1 | ||
* dd-droppable.ts 10.1.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -110,3 +110,3 @@ */ | ||
if (dd_manager_1.DDManager.dropElement && dd_manager_1.DDManager.dropElement !== this) { | ||
dd_manager_1.DDManager.dropElement._mouseLeave(e); | ||
dd_manager_1.DDManager.dropElement._mouseLeave(e, true); // calledByEnter = true | ||
} | ||
@@ -123,4 +123,5 @@ dd_manager_1.DDManager.dropElement = this; | ||
/** @internal called when the item is leaving our area, stop tracking if we had moving item */ | ||
DDDroppable.prototype._mouseLeave = function (e) { | ||
DDDroppable.prototype._mouseLeave = function (e, calledByEnter) { | ||
var _a; | ||
if (calledByEnter === void 0) { calledByEnter = false; } | ||
// console.log(`${count++} Leave ${this.el.id || (this.el as GridHTMLElement).gridstack.opts.id}`); // TEST | ||
@@ -140,11 +141,13 @@ if (!dd_manager_1.DDManager.dragElement || dd_manager_1.DDManager.dropElement !== this) | ||
// if we're still over a parent droppable, send it an enter as we don't get one from leaving nested children | ||
var parentDrop = void 0; | ||
var parent_1 = this.el.parentElement; | ||
while (!parentDrop && parent_1) { | ||
parentDrop = (_a = parent_1.ddElement) === null || _a === void 0 ? void 0 : _a.ddDroppable; | ||
parent_1 = parent_1.parentElement; | ||
if (!calledByEnter) { | ||
var parentDrop = void 0; | ||
var parent_1 = this.el.parentElement; | ||
while (!parentDrop && parent_1) { | ||
parentDrop = (_a = parent_1.ddElement) === null || _a === void 0 ? void 0 : _a.ddDroppable; | ||
parent_1 = parent_1.parentElement; | ||
} | ||
if (parentDrop) { | ||
parentDrop._mouseEnter(e); | ||
} | ||
} | ||
if (parentDrop) { | ||
parentDrop._mouseEnter(e); | ||
} | ||
} | ||
@@ -151,0 +154,0 @@ }; |
/** | ||
* dd-elements.ts 10.0.1 | ||
* dd-elements.ts 10.1.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
"use strict"; | ||
/** | ||
* dd-elements.ts 10.0.1 | ||
* dd-elements.ts 10.1.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -5,0 +5,0 @@ */ |
/** | ||
* dd-gridstack.ts 10.0.1 | ||
* dd-gridstack.ts 10.1.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
"use strict"; | ||
/** | ||
* dd-gridstack.ts 10.0.1 | ||
* dd-gridstack.ts 10.1.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -42,4 +42,14 @@ */ | ||
else { | ||
var grid = dEl.el.gridstackNode.grid; | ||
var handles = dEl.el.getAttribute('gs-resize-handles') ? dEl.el.getAttribute('gs-resize-handles') : grid.opts.resizable.handles; | ||
var n = dEl.el.gridstackNode; | ||
var grid = n.grid; | ||
var handles = dEl.el.getAttribute('gs-resize-handles') || grid.opts.resizable.handles || 'e,s,se'; | ||
if (handles === 'all') | ||
handles = 'n,e,s,w,se,sw,ne,nw'; | ||
// NOTE: keep the resize handles as e,w don't have enough space (10px) to show resize corners anyway. limit during drag instead | ||
// restrict vertical resize if height is done to match content anyway... odd to have it spring back | ||
// if (Utils.shouldSizeToContent(n)) { | ||
// const doE = handles.indexOf('e') !== -1; | ||
// const doW = handles.indexOf('w') !== -1; | ||
// handles = doE ? (doW ? 'e,w' : 'e') : (doW ? 'w' : ''); | ||
// } | ||
var autoHide = !grid.opts.alwaysShowResizeHandle; | ||
@@ -46,0 +56,0 @@ dEl.setupResizable(__assign(__assign(__assign({}, grid.opts.resizable), { handles: handles, autoHide: autoHide }), { |
/** | ||
* dd-manager.ts 10.0.1 | ||
* dd-manager.ts 10.1.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
"use strict"; | ||
/** | ||
* dd-manager.ts 10.0.1 | ||
* dd-manager.ts 10.1.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -5,0 +5,0 @@ */ |
/** | ||
* dd-resizable-handle.ts 10.0.1 | ||
* dd-resizable-handle.ts 10.1.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
"use strict"; | ||
/** | ||
* dd-resizable-handle.ts 10.0.1 | ||
* dd-resizable-handle.ts 10.1.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -56,3 +56,3 @@ */ | ||
this.mouseDownEvent = e; | ||
document.addEventListener('mousemove', this._mouseMove, true); // capture, not bubble | ||
document.addEventListener('mousemove', this._mouseMove, { capture: true, passive: true }); // capture, not bubble | ||
document.addEventListener('mouseup', this._mouseUp, true); | ||
@@ -79,3 +79,3 @@ if (dd_touch_1.isTouch) { | ||
e.stopPropagation(); | ||
e.preventDefault(); | ||
// e.preventDefault(); passive = true | ||
}; | ||
@@ -82,0 +82,0 @@ /** @internal */ |
/** | ||
* dd-resizable.ts 10.0.1 | ||
* dd-resizable.ts 10.1.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
*/ | ||
import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl'; | ||
import { DDUIData } from './types'; | ||
import { DDUIData, GridItemHTMLElement } from './types'; | ||
export interface DDResizableOpt { | ||
@@ -19,3 +19,3 @@ autoHide?: boolean; | ||
export declare class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt<DDResizableOpt> { | ||
el: HTMLElement; | ||
el: GridItemHTMLElement; | ||
option: DDResizableOpt; | ||
@@ -22,0 +22,0 @@ constructor(el: HTMLElement, opts?: DDResizableOpt); |
"use strict"; | ||
/** | ||
* dd-resizable.ts 10.0.1 | ||
* dd-resizable.ts 10.1.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -157,7 +157,3 @@ */ | ||
var _this = this; | ||
var handlerDirection = this.option.handles || 'e,s,se'; | ||
if (handlerDirection === 'all') { | ||
handlerDirection = 'n,e,s,w,se,sw,ne,nw'; | ||
} | ||
this.handlers = handlerDirection.split(',') | ||
this.handlers = this.option.handles.split(',') | ||
.map(function (dir) { return dir.trim(); }) | ||
@@ -179,2 +175,3 @@ .map(function (dir) { return new dd_resizable_handle_1.DDResizableHandle(_this.el, dir, { | ||
DDResizable.prototype._resizeStart = function (event) { | ||
this.sizeToContent = utils_1.Utils.shouldSizeToContent(this.el.gridstackNode); | ||
this.originalRect = this.el.getBoundingClientRect(); | ||
@@ -229,18 +226,6 @@ this.scrollEl = utils_1.Utils.getScrollElement(this.el); | ||
var parent = this.el.parentElement; | ||
var testEl = document.createElement('div'); | ||
utils_1.Utils.addElStyles(testEl, { | ||
opacity: '0', | ||
position: 'fixed', | ||
top: 0 + 'px', | ||
left: 0 + 'px', | ||
width: '1px', | ||
height: '1px', | ||
zIndex: '-999999', | ||
}); | ||
parent.appendChild(testEl); | ||
var testElPosition = testEl.getBoundingClientRect(); | ||
parent.removeChild(testEl); | ||
var dragTransform = utils_1.Utils.getValuesFromTransformedElement(parent); | ||
this.rectScale = { | ||
x: 1 / testElPosition.width, | ||
y: 1 / testElPosition.height | ||
x: dragTransform.xScale, | ||
y: dragTransform.yScale | ||
}; | ||
@@ -273,3 +258,3 @@ if (getComputedStyle(this.el.parentElement).position.match(/static/)) { | ||
var offsetX = event.clientX - oEvent.clientX; | ||
var offsetY = event.clientY - oEvent.clientY; | ||
var offsetY = this.sizeToContent ? 0 : event.clientY - oEvent.clientY; // prevent vert resize | ||
if (dir.indexOf('e') > -1) { | ||
@@ -276,0 +261,0 @@ newRect.width += offsetX; |
/** | ||
* touch.ts 10.0.1 | ||
* touch.ts 10.1.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
"use strict"; | ||
/** | ||
* touch.ts 10.0.1 | ||
* touch.ts 10.1.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -5,0 +5,0 @@ */ |
/*! | ||
* GridStack 10.0.1 | ||
* GridStack 10.1.0 | ||
* https://gridstackjs.com/ | ||
@@ -4,0 +4,0 @@ * |
/** | ||
* gridstack-engine.ts 10.0.1 | ||
* gridstack-engine.ts 10.1.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
"use strict"; | ||
/** | ||
* gridstack-engine.ts 10.0.1 | ||
* gridstack-engine.ts 10.1.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -872,7 +872,6 @@ */ | ||
* @param column new column number | ||
* @param nodes different sorted list (ex: DOM order) instead of current list | ||
* @param layout specify the type of re-layout that will happen (position, size, etc...). | ||
* Note: items will never be outside of the current column boundaries. default (moveScale). Ignored for 1 column | ||
*/ | ||
GridStackEngine.prototype.columnChanged = function (prevColumn, column, nodes, layout) { | ||
GridStackEngine.prototype.columnChanged = function (prevColumn, column, layout) { | ||
var _this = this; | ||
@@ -883,2 +882,5 @@ var _a; | ||
return this; | ||
// in this mode no layout is done whatsoever, up to the caller to handle it | ||
if (layout === 'none') | ||
return this; | ||
// simpler shortcuts layouts | ||
@@ -894,19 +896,3 @@ var doCompact = layout === 'compact' || layout === 'list'; | ||
var newNodes = []; | ||
// if we're going to 1 column and using DOM order (item passed in) rather than default sorting, then generate that layout | ||
var domOrder = false; | ||
if (column === 1 && (nodes === null || nodes === void 0 ? void 0 : nodes.length)) { | ||
domOrder = true; | ||
var top_1 = 0; | ||
nodes.forEach(function (n) { | ||
n.x = 0; | ||
n.w = 1; | ||
n.y = Math.max(n.y, top_1); | ||
top_1 = n.y + n.h; | ||
}); | ||
newNodes = nodes; | ||
nodes = []; | ||
} | ||
else { | ||
nodes = doCompact ? this.nodes : utils_1.Utils.sort(this.nodes, -1, prevColumn); // current column reverse sorting so we can insert last to front (limit collision) | ||
} | ||
var nodes = doCompact ? this.nodes : utils_1.Utils.sort(this.nodes, -1, prevColumn); // current column reverse sorting so we can insert last to front (limit collision) | ||
// see if we have cached previous layout IFF we are going up in size (restore) otherwise always | ||
@@ -970,4 +956,4 @@ // generate next size down from where we are (looks more natural as you gradually size down). | ||
} | ||
else if (!domOrder) { | ||
var ratio_2 = (doCompact || layout === 'none') ? 1 : column / prevColumn; | ||
else { | ||
var ratio_2 = doCompact ? 1 : column / prevColumn; | ||
var move_1 = (layout === 'move' || layout === 'moveScale'); | ||
@@ -985,4 +971,3 @@ var scale_1 = (layout === 'scale' || layout === 'moveScale'); | ||
// finally re-layout them in reverse order (to get correct placement) | ||
if (!domOrder) | ||
newNodes = utils_1.Utils.sort(newNodes, -1, column); | ||
newNodes = utils_1.Utils.sort(newNodes, -1, column); | ||
this._inColumnResize = true; // prevent cache update | ||
@@ -989,0 +974,0 @@ this.nodes = []; // pretend we have no nodes to start with (add() will use same structures) to simplify layout |
/** | ||
* gridstack-poly.ts 10.0.1 used for IE and older browser support (not supported in v2-v4.3.1, but again in v4.4) | ||
* gridstack-poly.ts 10.1.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 10.0.1 | ||
* GridStack 10.1.0 | ||
* https://gridstackjs.com/ | ||
@@ -10,3 +10,3 @@ * | ||
import { Utils } from './utils'; | ||
import { ColumnOptions, GridItemHTMLElement, GridStackElement, GridStackEventHandlerCallback, GridStackNode, GridStackWidget, numberOrString, DDDragInOpt, GridStackOptions, AddRemoveFcn, SaveFcn, CompactOptions, ResizeToContentFcn } from './types'; | ||
import { ColumnOptions, GridItemHTMLElement, GridStackElement, GridStackEventHandlerCallback, GridStackNode, GridStackWidget, numberOrString, DDDragInOpt, GridStackOptions, GridStackEventHandler, GridStackNodesHandler, AddRemoveFcn, SaveFcn, CompactOptions, ResizeToContentFcn, GridStackDroppedHandler, GridStackElementHandler } from './types'; | ||
import { DDGridStack } from './dd-gridstack'; | ||
@@ -21,3 +21,3 @@ export * from './types'; | ||
/** list of possible events, or space separated list of them */ | ||
export type GridStackEvent = 'added' | 'change' | 'disable' | 'drag' | 'dragstart' | 'dragstop' | 'dropped' | 'enable' | 'removed' | 'resize' | 'resizestart' | 'resizestop' | 'resizecontent' | string; | ||
export type GridStackEvent = 'added' | 'change' | 'disable' | 'drag' | 'dragstart' | 'dragstop' | 'dropped' | 'enable' | 'removed' | 'resize' | 'resizestart' | 'resizestop' | 'resizecontent'; | ||
/** Defines the coordinates of an object */ | ||
@@ -141,2 +141,3 @@ export interface MousePosition { | ||
* @param nodeToAdd (optional) node to add to the newly created sub grid (used when dragging over existing regular item) | ||
* @param saveContent if true (default) the html inside .grid-stack-content will be saved to child widget | ||
* @returns newly created grid | ||
@@ -289,8 +290,12 @@ */ | ||
*/ | ||
on(name: GridStackEvent, callback: GridStackEventHandlerCallback): GridStack; | ||
on(name: 'dropped', callback: GridStackDroppedHandler): GridStack; | ||
on(name: 'enable' | 'disable', callback: GridStackEventHandler): GridStack; | ||
on(name: 'change' | 'added' | 'removed' | 'resizecontent', callback: GridStackNodesHandler): GridStack; | ||
on(name: 'resizestart' | 'resize' | 'resizestop' | 'dragstart' | 'drag' | 'dragstop', callback: GridStackElementHandler): GridStack; | ||
on(name: string, callback: GridStackEventHandlerCallback): GridStack; | ||
/** | ||
* unsubscribe from the 'on' event below | ||
* @param name of the event (see possible values) | ||
* unsubscribe from the 'on' event GridStackEvent | ||
* @param name of the event (see possible values) or list of names space separated | ||
*/ | ||
off(name: GridStackEvent): GridStack; | ||
off(name: GridStackEvent | string): GridStack; | ||
/** remove all event handlers */ | ||
@@ -297,0 +302,0 @@ offAll(): GridStack; |
/** | ||
* types.ts 10.0.1 | ||
* types.ts 10.1.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
"use strict"; | ||
/** | ||
* types.ts 10.0.1 | ||
* types.ts 10.1.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -5,0 +5,0 @@ */ |
/** | ||
* utils.ts 10.0.1 | ||
* utils.ts 10.1.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -10,2 +10,8 @@ */ | ||
} | ||
export interface DragTransform { | ||
xScale: number; | ||
yScale: number; | ||
xOffset: number; | ||
yOffset: number; | ||
} | ||
/** checks for obsolete method names */ | ||
@@ -99,2 +105,7 @@ export declare function obsolete(self: any, f: any, oldName: string, newName: string, rev: string): (...args: any[]) => any; | ||
static simulateMouseEvent(e: MouseEvent, simulatedType: string, target?: EventTarget): void; | ||
/** | ||
* defines an element that is used to get the offset and scale from grid transforms | ||
* returns the scale and offsets from said element | ||
*/ | ||
static getValuesFromTransformedElement(parent: HTMLElement): DragTransform; | ||
} |
"use strict"; | ||
/** | ||
* utils.ts 10.0.1 | ||
* utils.ts 10.1.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -242,3 +242,3 @@ */ | ||
else { | ||
var match = val.match(/^(-[0-9]+\.[0-9]+|[0-9]*\.[0-9]+|-[0-9]+|[0-9]+)(px|em|rem|vh|vw|%)?$/); | ||
var match = val.match(/^(-[0-9]+\.[0-9]+|[0-9]*\.[0-9]+|-[0-9]+|[0-9]+)(px|em|rem|vh|vw|%|cm|mm)?$/); | ||
if (!match) { | ||
@@ -614,2 +614,28 @@ throw new Error("Invalid height val = ".concat(val)); | ||
}; | ||
/** | ||
* defines an element that is used to get the offset and scale from grid transforms | ||
* returns the scale and offsets from said element | ||
*/ | ||
Utils.getValuesFromTransformedElement = function (parent) { | ||
var transformReference = document.createElement('div'); | ||
Utils.addElStyles(transformReference, { | ||
opacity: '0', | ||
position: 'fixed', | ||
top: 0 + 'px', | ||
left: 0 + 'px', | ||
width: '1px', | ||
height: '1px', | ||
zIndex: '-999999', | ||
}); | ||
parent.appendChild(transformReference); | ||
var transformValues = transformReference.getBoundingClientRect(); | ||
parent.removeChild(transformReference); | ||
transformReference.remove(); | ||
return { | ||
xScale: 1 / transformValues.width, | ||
yScale: 1 / transformValues.height, | ||
xOffset: transformValues.left, | ||
yOffset: transformValues.top, | ||
}; | ||
}; | ||
return Utils; | ||
@@ -616,0 +642,0 @@ }()); |
/*! | ||
* GridStack 10.0.1 | ||
* GridStack 10.1.0 | ||
* https://gridstackjs.com/ | ||
@@ -4,0 +4,0 @@ * |
/** | ||
* gridstack-engine.ts 10.0.1 | ||
* gridstack-engine.ts 10.1.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
/** | ||
* gridstack-engine.ts 10.0.1 | ||
* gridstack-engine.ts 10.1.0 | ||
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license | ||
@@ -824,9 +824,11 @@ */ | ||
* @param column new column number | ||
* @param nodes different sorted list (ex: DOM order) instead of current list | ||
* @param layout specify the type of re-layout that will happen (position, size, etc...). | ||
* Note: items will never be outside of the current column boundaries. default (moveScale). Ignored for 1 column | ||
*/ | ||
columnChanged(prevColumn, column, nodes, layout = 'moveScale') { | ||
columnChanged(prevColumn, column, layout = 'moveScale') { | ||
if (!this.nodes.length || !column || prevColumn === column) | ||
return this; | ||
// in this mode no layout is done whatsoever, up to the caller to handle it | ||
if (layout === 'none') | ||
return this; | ||
// simpler shortcuts layouts | ||
@@ -842,19 +844,3 @@ const doCompact = layout === 'compact' || layout === 'list'; | ||
let newNodes = []; | ||
// if we're going to 1 column and using DOM order (item passed in) rather than default sorting, then generate that layout | ||
let domOrder = false; | ||
if (column === 1 && nodes?.length) { | ||
domOrder = true; | ||
let top = 0; | ||
nodes.forEach(n => { | ||
n.x = 0; | ||
n.w = 1; | ||
n.y = Math.max(n.y, top); | ||
top = n.y + n.h; | ||
}); | ||
newNodes = nodes; | ||
nodes = []; | ||
} | ||
else { | ||
nodes = doCompact ? this.nodes : Utils.sort(this.nodes, -1, prevColumn); // current column reverse sorting so we can insert last to front (limit collision) | ||
} | ||
let nodes = doCompact ? this.nodes : Utils.sort(this.nodes, -1, prevColumn); // current column reverse sorting so we can insert last to front (limit collision) | ||
// see if we have cached previous layout IFF we are going up in size (restore) otherwise always | ||
@@ -916,4 +902,4 @@ // generate next size down from where we are (looks more natural as you gradually size down). | ||
} | ||
else if (!domOrder) { | ||
let ratio = (doCompact || layout === 'none') ? 1 : column / prevColumn; | ||
else { | ||
let ratio = doCompact ? 1 : column / prevColumn; | ||
let move = (layout === 'move' || layout === 'moveScale'); | ||
@@ -931,4 +917,3 @@ let scale = (layout === 'scale' || layout === 'moveScale'); | ||
// finally re-layout them in reverse order (to get correct placement) | ||
if (!domOrder) | ||
newNodes = Utils.sort(newNodes, -1, column); | ||
newNodes = Utils.sort(newNodes, -1, column); | ||
this._inColumnResize = true; // prevent cache update | ||
@@ -935,0 +920,0 @@ this.nodes = []; // pretend we have no nodes to start with (add() will use same structures) to simplify layout |
/*! | ||
* GridStack 10.0.1 | ||
* GridStack 10.1.0 | ||
* https://gridstackjs.com/ | ||
@@ -10,3 +10,3 @@ * | ||
import { Utils } from './utils'; | ||
import { ColumnOptions, GridItemHTMLElement, GridStackElement, GridStackEventHandlerCallback, GridStackNode, GridStackWidget, numberOrString, DDDragInOpt, GridStackOptions, AddRemoveFcn, SaveFcn, CompactOptions, ResizeToContentFcn } from './types'; | ||
import { ColumnOptions, GridItemHTMLElement, GridStackElement, GridStackEventHandlerCallback, GridStackNode, GridStackWidget, numberOrString, DDDragInOpt, GridStackOptions, GridStackEventHandler, GridStackNodesHandler, AddRemoveFcn, SaveFcn, CompactOptions, ResizeToContentFcn, GridStackDroppedHandler, GridStackElementHandler } from './types'; | ||
import { DDGridStack } from './dd-gridstack'; | ||
@@ -21,3 +21,3 @@ export * from './types'; | ||
/** list of possible events, or space separated list of them */ | ||
export type GridStackEvent = 'added' | 'change' | 'disable' | 'drag' | 'dragstart' | 'dragstop' | 'dropped' | 'enable' | 'removed' | 'resize' | 'resizestart' | 'resizestop' | 'resizecontent' | string; | ||
export type GridStackEvent = 'added' | 'change' | 'disable' | 'drag' | 'dragstart' | 'dragstop' | 'dropped' | 'enable' | 'removed' | 'resize' | 'resizestart' | 'resizestop' | 'resizecontent'; | ||
/** Defines the coordinates of an object */ | ||
@@ -141,2 +141,3 @@ export interface MousePosition { | ||
* @param nodeToAdd (optional) node to add to the newly created sub grid (used when dragging over existing regular item) | ||
* @param saveContent if true (default) the html inside .grid-stack-content will be saved to child widget | ||
* @returns newly created grid | ||
@@ -289,8 +290,12 @@ */ | ||
*/ | ||
on(name: GridStackEvent, callback: GridStackEventHandlerCallback): GridStack; | ||
on(name: 'dropped', callback: GridStackDroppedHandler): GridStack; | ||
on(name: 'enable' | 'disable', callback: GridStackEventHandler): GridStack; | ||
on(name: 'change' | 'added' | 'removed' | 'resizecontent', callback: GridStackNodesHandler): GridStack; | ||
on(name: 'resizestart' | 'resize' | 'resizestop' | 'dragstart' | 'drag' | 'dragstop', callback: GridStackElementHandler): GridStack; | ||
on(name: string, callback: GridStackEventHandlerCallback): GridStack; | ||
/** | ||
* unsubscribe from the 'on' event below | ||
* @param name of the event (see possible values) | ||
* unsubscribe from the 'on' event GridStackEvent | ||
* @param name of the event (see possible values) or list of names space separated | ||
*/ | ||
off(name: GridStackEvent): GridStack; | ||
off(name: GridStackEvent | string): GridStack; | ||
/** remove all event handlers */ | ||
@@ -297,0 +302,0 @@ offAll(): GridStack; |
/** | ||
* types.ts 10.0.1 | ||
* types.ts 10.1.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
/** | ||
* types.ts 10.0.1 | ||
* types.ts 10.1.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -4,0 +4,0 @@ */ |
/** | ||
* utils.ts 10.0.1 | ||
* utils.ts 10.1.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -10,2 +10,8 @@ */ | ||
} | ||
export interface DragTransform { | ||
xScale: number; | ||
yScale: number; | ||
xOffset: number; | ||
yOffset: number; | ||
} | ||
/** checks for obsolete method names */ | ||
@@ -99,2 +105,7 @@ export declare function obsolete(self: any, f: any, oldName: string, newName: string, rev: string): (...args: any[]) => any; | ||
static simulateMouseEvent(e: MouseEvent, simulatedType: string, target?: EventTarget): void; | ||
/** | ||
* defines an element that is used to get the offset and scale from grid transforms | ||
* returns the scale and offsets from said element | ||
*/ | ||
static getValuesFromTransformedElement(parent: HTMLElement): DragTransform; | ||
} |
/** | ||
* utils.ts 10.0.1 | ||
* utils.ts 10.1.0 | ||
* Copyright (c) 2021 Alain Dumesny - see GridStack root license | ||
@@ -206,3 +206,3 @@ */ | ||
else { | ||
let match = val.match(/^(-[0-9]+\.[0-9]+|[0-9]*\.[0-9]+|-[0-9]+|[0-9]+)(px|em|rem|vh|vw|%)?$/); | ||
let match = val.match(/^(-[0-9]+\.[0-9]+|[0-9]*\.[0-9]+|-[0-9]+|[0-9]+)(px|em|rem|vh|vw|%|cm|mm)?$/); | ||
if (!match) { | ||
@@ -561,3 +561,29 @@ throw new Error(`Invalid height val = ${val}`); | ||
} | ||
/** | ||
* defines an element that is used to get the offset and scale from grid transforms | ||
* returns the scale and offsets from said element | ||
*/ | ||
static getValuesFromTransformedElement(parent) { | ||
const transformReference = document.createElement('div'); | ||
Utils.addElStyles(transformReference, { | ||
opacity: '0', | ||
position: 'fixed', | ||
top: 0 + 'px', | ||
left: 0 + 'px', | ||
width: '1px', | ||
height: '1px', | ||
zIndex: '-999999', | ||
}); | ||
parent.appendChild(transformReference); | ||
const transformValues = transformReference.getBoundingClientRect(); | ||
parent.removeChild(transformReference); | ||
transformReference.remove(); | ||
return { | ||
xScale: 1 / transformValues.width, | ||
yScale: 1 / transformValues.height, | ||
xOffset: transformValues.left, | ||
yOffset: transformValues.top, | ||
}; | ||
} | ||
} | ||
//# sourceMappingURL=utils.js.map |
@@ -8,2 +8,3 @@ Change log | ||
- [10.1.0 (2024-02-04)](#1010-2024-02-04) | ||
- [10.0.1 (2023-12-10)](#1001-2023-12-10) | ||
@@ -110,2 +111,13 @@ - [10.0.0 (2023-11-20)](#1000-2023-11-20) | ||
## 10.1.0 (2024-02-04) | ||
* feat: [#2574](https://github.com/gridstack/gridstack.js/pull/2574) Allow cell height in cm and mm units | ||
* feat: [#2578](https://github.com/gridstack/gridstack.js/pull/2578) allow different scaling between drag toolbar and grid | ||
* fix: [#2577](https://github.com/gridstack/gridstack.js/issues/2577) ui-resizable-s/-n style fix | ||
* fix: [#2576](https://github.com/gridstack/gridstack.js/issues/2576) column('none') now ignores layouts | ||
* fix: [#2560](https://github.com/gridstack/gridstack.js/issues/2560) nested grid fix (enter can call leave which can call enter again) - Thank you [v1talii-dev](https://github.com/v1talii-dev) | ||
* fix: [#2596](https://github.com/gridstack/gridstack.js/pull/2596) prevent SSR crash | ||
* fix: [#2610](https://github.com/gridstack/gridstack.js/pull/2610) using passive:true for mousemove events | ||
* fix: [#2612](https://github.com/gridstack/gridstack.js/pull/2612) restrict vertical resize if `sizeToContent:true` | ||
* demo: nested.htm now has nested create and drag&drop example - Thank you [fredericrous](https://github.com/fredericrous) | ||
## 10.0.1 (2023-12-10) | ||
@@ -112,0 +124,0 @@ * fix: [#2552](https://github.com/gridstack/gridstack.js/issues/2552) DOM init doesn't sizeToContent |
@@ -90,3 +90,3 @@ gridstack.js API | ||
* an integer (px) | ||
* a string (ex: '100px', '10em', '10rem'). Note: % doesn't right - see [CellHeight](http://gridstackjs.com/demo/cell-height.html) | ||
* a string (ex: '100px', '10em', '10rem', '10cm'). Note: % doesn't right - see [CellHeight](http://gridstackjs.com/demo/cell-height.html) | ||
* 0, in which case the library will not generate styles for rows. Everything must be defined in your own CSS files. | ||
@@ -93,0 +93,0 @@ * `auto` - height will be calculated for square cells (width / column) and updated live as you resize the window - also see `cellHeightThrottle` |
{ | ||
"name": "gridstack", | ||
"version": "10.0.1", | ||
"version": "10.1.0", | ||
"license": "MIT", | ||
@@ -5,0 +5,0 @@ "author": "Alain Dumesny <alaind831+github@gmail.com> (https://github.com/adumesny)", |
@@ -459,4 +459,4 @@ # gridstack.js | ||
breaking change: | ||
* `disableOneColumnMode`, `oneColumnSize` have been removed (thought we temporary convert if you have them). use `{ responsive: breakpoints: [{w:768, c:1}] }` for the same behavior. | ||
* 1 column mode switch is no longer by default (`responsive` is not defined) as too many new users had issues. Instead set it explicitly (see above). | ||
* `disableOneColumnMode`, `oneColumnSize` have been removed (thought we temporary convert if you have them). use `{ columnOpts: breakpoints: [{w:768, c:1}] }` for the same behavior. | ||
* 1 column mode switch is no longer by default (`columnOpts` is not defined) as too many new users had issues. Instead set it explicitly (see above). | ||
* `oneColumnModeDomSort` has been removed. Planning to support per column layouts at some future times. TBD | ||
@@ -463,0 +463,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 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
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
2873578
18197