Skip to content

don't clear (default) attr when dragging outside item in #2362

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
adumesny merged 1 commit into from
Jun 12, 2023
Merged

don't clear (default) attr when dragging outside item in #2362

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions doc/CHANGES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
1 change: 0 additions & 1 deletion src/dd-draggable.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
22 changes: 13 additions & 9 deletions src/gridstack.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'));
Expand All @@ -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) {
Expand Down Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions src/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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...
Expand All @@ -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));
Expand Down