From 8856aab55b457fd1ba4d07ab68e975d43d9dabc8 Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Sun, 11 Jun 2023 21:15:32 -0700 Subject: [PATCH] don't clear (default) attr when dragging outside item in * fix #2354 * external items (like toolbar) might have grid-item attr we want to clone, so don't clear them --- doc/CHANGES.md | 1 + src/dd-draggable.ts | 1 - src/gridstack.ts | 22 +++++++++++++--------- src/utils.ts | 4 ++-- 4 files changed, 16 insertions(+), 12 deletions(-) diff --git a/doc/CHANGES.md b/doc/CHANGES.md index 2210403b1..ffa615aad 100644 --- a/doc/CHANGES.md +++ b/doc/CHANGES.md @@ -94,6 +94,7 @@ Change log * fix [#2349](https://github.com/gridstack/gridstack.js/issues/2349) grid NoMove vs item NoMove support * fix [#2352](https://github.com/gridstack/gridstack.js/issues/2352) .ui-draggable-dragging z-index for modal dialogs * fix [#2357](https://github.com/gridstack/gridstack.js/issues/2357) NaN inf loop when using cellHeight rem/em +* fix [#2354](https://github.com/gridstack/gridstack.js/issues/2354) max-w cloning issue fix ## 8.2.1 (2023-05-26) * fix: make sure `removeNode()` uses internal _id (unique) and not node itself (since we clone those often) diff --git a/src/dd-draggable.ts b/src/dd-draggable.ts index 93ec8abcc..7e548aba2 100644 --- a/src/dd-draggable.ts +++ b/src/dd-draggable.ts @@ -285,7 +285,6 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt const style = this.helper.style; style.pointerEvents = 'none'; // needed for over items to get enter/leave // style.cursor = 'move'; // TODO: can't set with pointerEvents=none ! (done in CSS as well) - style['min-width'] = 0; // since we no longer relative to our parent and we don't resize anyway (normally 100/#column %) style.width = this.dragOffset.width + 'px'; style.height = this.dragOffset.height + 'px'; style.willChange = 'left, top'; diff --git a/src/gridstack.ts b/src/gridstack.ts index 7d7a02503..52257e354 100644 --- a/src/gridstack.ts +++ b/src/gridstack.ts @@ -1464,14 +1464,12 @@ export class GridStack { } /** @internal call to read any default attributes from element */ - protected _readAttr(el: HTMLElement): GridStackWidget { + protected _readAttr(el: HTMLElement, clearDefaultAttr = true): GridStackWidget { let n: GridStackNode = {}; n.x = Utils.toNumber(el.getAttribute('gs-x')); n.y = Utils.toNumber(el.getAttribute('gs-y')); n.w = Utils.toNumber(el.getAttribute('gs-w')); n.h = Utils.toNumber(el.getAttribute('gs-h')); - if (!(n.w > 1)) el.removeAttribute('gs-w'); - if (!(n.h > 1)) el.removeAttribute('gs-h'); n.autoPosition = Utils.toBool(el.getAttribute('gs-auto-position')); n.noResize = Utils.toBool(el.getAttribute('gs-no-resize')); n.noMove = Utils.toBool(el.getAttribute('gs-no-move')); @@ -1480,13 +1478,19 @@ export class GridStack { // read but never written out n.maxW = Utils.toNumber(el.getAttribute('gs-max-w')); - if (n.maxW) el.removeAttribute('gs-max-w'); n.minW = Utils.toNumber(el.getAttribute('gs-min-w')); - if (n.minW) el.removeAttribute('gs-min-w'); n.maxH = Utils.toNumber(el.getAttribute('gs-max-h')); - if (n.maxH) el.removeAttribute('gs-max-h'); n.minH = Utils.toNumber(el.getAttribute('gs-min-h')); - if (n.minH) el.removeAttribute('gs-min-h'); + + // v8.x optimization to reduce un-needed attr that don't render or are default CSS + if (clearDefaultAttr) { + if (n.w === 1) el.removeAttribute('gs-w'); + if (n.h === 1) el.removeAttribute('gs-h'); + if (n.maxW) el.removeAttribute('gs-max-w'); + if (n.minW) el.removeAttribute('gs-min-w'); + if (n.maxH) el.removeAttribute('gs-max-h'); + if (n.minH) el.removeAttribute('gs-min-h'); + } // remove any key not found (null or false which is default) for (const key in n) { @@ -1884,8 +1888,8 @@ export class GridStack { cellHeight = this.getCellHeight(true); // load any element attributes if we don't have a node - if (!node) {// @ts-ignore private read only on ourself - node = this._readAttr(el); + if (!node) { + node = this._readAttr(el, false); // don't wipe external (e.g. drag toolbar) attr #2354 } if (!node.grid) { node._isExternal = true; diff --git a/src/utils.ts b/src/utils.ts index 71eadaa2a..c1378338f 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -55,8 +55,8 @@ export class Utils { /** convert a potential selector into actual list of html elements. optional root which defaults to document (for shadow dom) */ static getElements(els: GridStackElement, root: HTMLElement | Document = document): HTMLElement[] { - const doc = ('getElementById' in root) ? root as Document : undefined; if (typeof els === 'string') { + const doc = ('getElementById' in root) ? root as Document : undefined; // Note: very common for people use to id='1,2,3' which is only legal as HTML5 id, but not CSS selectors // 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 { /** convert a potential selector into actual single element. optional root which defaults to document (for shadow dom) */ static getElement(els: GridStackElement, root: HTMLElement | Document = document): HTMLElement { - const doc = ('getElementById' in root) ? root as Document : undefined; if (typeof els === 'string') { + const doc = ('getElementById' in root) ? root as Document : undefined; if (!els.length) return null; if (doc && els[0] === '#') { return doc.getElementById(els.substring(1));