Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 8856aab

Browse files
adumesnyadumesny
committed
don't clear (default) attr when dragging outside item in
* fix gridstack#2354 * external items (like toolbar) might have grid-item attr we want to clone, so don't clear them
1 parent d75627d commit 8856aab

File tree

4 files changed

+16
-12
lines changed

4 files changed

+16
-12
lines changed

‎doc/CHANGES.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ Change log
9494
* fix [#2349](https://github.com/gridstack/gridstack.js/issues/2349) grid NoMove vs item NoMove support
9595
* fix [#2352](https://github.com/gridstack/gridstack.js/issues/2352) .ui-draggable-dragging z-index for modal dialogs
9696
* fix [#2357](https://github.com/gridstack/gridstack.js/issues/2357) NaN inf loop when using cellHeight rem/em
97+
* fix [#2354](https://github.com/gridstack/gridstack.js/issues/2354) max-w cloning issue fix
9798

9899
## 8.2.1 (2023-05-26)
99100
* fix: make sure `removeNode()` uses internal _id (unique) and not node itself (since we clone those often)

‎src/dd-draggable.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -285,7 +285,6 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
285285
const style = this.helper.style;
286286
style.pointerEvents = 'none'; // needed for over items to get enter/leave
287287
// style.cursor = 'move'; // TODO: can't set with pointerEvents=none ! (done in CSS as well)
288-
style['min-width'] = 0; // since we no longer relative to our parent and we don't resize anyway (normally 100/#column %)
289288
style.width = this.dragOffset.width + 'px';
290289
style.height = this.dragOffset.height + 'px';
291290
style.willChange = 'left, top';

‎src/gridstack.ts

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1464,14 +1464,12 @@ export class GridStack {
14641464
}
14651465

14661466
/** @internal call to read any default attributes from element */
1467-
protected _readAttr(el: HTMLElement): GridStackWidget {
1467+
protected _readAttr(el: HTMLElement, clearDefaultAttr = true): GridStackWidget {
14681468
let n: GridStackNode = {};
14691469
n.x = Utils.toNumber(el.getAttribute('gs-x'));
14701470
n.y = Utils.toNumber(el.getAttribute('gs-y'));
14711471
n.w = Utils.toNumber(el.getAttribute('gs-w'));
14721472
n.h = Utils.toNumber(el.getAttribute('gs-h'));
1473-
if (!(n.w > 1)) el.removeAttribute('gs-w');
1474-
if (!(n.h > 1)) el.removeAttribute('gs-h');
14751473
n.autoPosition = Utils.toBool(el.getAttribute('gs-auto-position'));
14761474
n.noResize = Utils.toBool(el.getAttribute('gs-no-resize'));
14771475
n.noMove = Utils.toBool(el.getAttribute('gs-no-move'));
@@ -1480,13 +1478,19 @@ export class GridStack {
14801478

14811479
// read but never written out
14821480
n.maxW = Utils.toNumber(el.getAttribute('gs-max-w'));
1483-
if (n.maxW) el.removeAttribute('gs-max-w');
14841481
n.minW = Utils.toNumber(el.getAttribute('gs-min-w'));
1485-
if (n.minW) el.removeAttribute('gs-min-w');
14861482
n.maxH = Utils.toNumber(el.getAttribute('gs-max-h'));
1487-
if (n.maxH) el.removeAttribute('gs-max-h');
14881483
n.minH = Utils.toNumber(el.getAttribute('gs-min-h'));
1489-
if (n.minH) el.removeAttribute('gs-min-h');
1484+
1485+
// v8.x optimization to reduce un-needed attr that don't render or are default CSS
1486+
if (clearDefaultAttr) {
1487+
if (n.w === 1) el.removeAttribute('gs-w');
1488+
if (n.h === 1) el.removeAttribute('gs-h');
1489+
if (n.maxW) el.removeAttribute('gs-max-w');
1490+
if (n.minW) el.removeAttribute('gs-min-w');
1491+
if (n.maxH) el.removeAttribute('gs-max-h');
1492+
if (n.minH) el.removeAttribute('gs-min-h');
1493+
}
14901494

14911495
// remove any key not found (null or false which is default)
14921496
for (const key in n) {
@@ -1884,8 +1888,8 @@ export class GridStack {
18841888
cellHeight = this.getCellHeight(true);
18851889

18861890
// load any element attributes if we don't have a node
1887-
if (!node) {// @ts-ignore private read only on ourself
1888-
node = this._readAttr(el);
1891+
if (!node) {
1892+
node = this._readAttr(el, false); // don't wipe external (e.g. drag toolbar) attr #2354
18891893
}
18901894
if (!node.grid) {
18911895
node._isExternal = true;

‎src/utils.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,8 @@ export class Utils {
5555

5656
/** convert a potential selector into actual list of html elements. optional root which defaults to document (for shadow dom) */
5757
static getElements(els: GridStackElement, root: HTMLElement | Document = document): HTMLElement[] {
58-
const doc = ('getElementById' in root) ? root as Document : undefined;
5958
if (typeof els === 'string') {
59+
const doc = ('getElementById' in root) ? root as Document : undefined;
6060

6161
// Note: very common for people use to id='1,2,3' which is only legal as HTML5 id, but not CSS selectors
6262
// so if we start with a number, assume it's an id and just return that one item...
@@ -78,8 +78,8 @@ export class Utils {
7878

7979
/** convert a potential selector into actual single element. optional root which defaults to document (for shadow dom) */
8080
static getElement(els: GridStackElement, root: HTMLElement | Document = document): HTMLElement {
81-
const doc = ('getElementById' in root) ? root as Document : undefined;
8281
if (typeof els === 'string') {
82+
const doc = ('getElementById' in root) ? root as Document : undefined;
8383
if (!els.length) return null;
8484
if (doc && els[0] === '#') {
8585
return doc.getElementById(els.substring(1));

0 commit comments

Comments
 (0)