From a2e65b067823f6d02a897a0511aa86a2d5932d4b Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Wed, 26 Feb 2025 18:50:58 -0800 Subject: [PATCH] new public prepareDragDrop(el) * internal `_prepareDragDropByNode(n)` is now public as `prepareDragDrop(el)` so Angular, React, and others can call once the DOM content elements have been added (the outside griditem divs are always created for content) --- doc/CHANGES.md | 1 + src/gridstack.ts | 22 +++++++++++----------- src/types.ts | 2 +- src/utils.ts | 3 +-- 4 files changed, 14 insertions(+), 14 deletions(-) diff --git a/doc/CHANGES.md b/doc/CHANGES.md index f6d49365..7c82e3ee 100644 --- a/doc/CHANGES.md +++ b/doc/CHANGES.md @@ -127,6 +127,7 @@ Change log * fix: [#2955](https://github.com/gridstack/gridstack.js/issues/2955) angular circular dependency * fix: [#2951](https://github.com/gridstack/gridstack.js/issues/2951) shadow DOM dragging re-appending fix * fix: [#2964](https://github.com/gridstack/gridstack.js/pull/2964) minW larger than column fix +* feat: [#2965](https://github.com/gridstack/gridstack.js/pull/2965) internal `_prepareDragDropByNode(n)` is now public as `prepareDragDrop(el)` so Angular, React, and others can call once the DOM content elements have been added (the outside griditem divs are always created for content) ## 11.3.0 (2025-01-26) * feat: added `isIgnoreChangeCB()` if changeCB should be ignored due to column change, sizeToContent, loading, etc... diff --git a/src/gridstack.ts b/src/gridstack.ts index acb2ca90..4ab40b04 100644 --- a/src/gridstack.ts +++ b/src/gridstack.ts @@ -551,7 +551,7 @@ export class GridStack { newItem.appendChild(content); content = Utils.createDiv(['grid-stack-item-content'], node.el); } - this._prepareDragDropByNode(node); // ... and restore original D&D + this.prepareDragDrop(node.el); // ... and restore original D&D } // if we're adding an additional item, make the container large enough to have them both @@ -1278,7 +1278,7 @@ export class GridStack { this._setupRemoveDrop(); this._setupAcceptWidget(); this.engine.nodes.forEach(n => { - this._prepareDragDropByNode(n); // either delete or init Drag&drop + this.prepareDragDrop(n.el); // either delete or init Drag&drop if (n.subGrid && recurse) n.subGrid.setStatic(val, updateClass, recurse); }); if (updateClass) { this._setStaticClass(); } @@ -1367,7 +1367,7 @@ export class GridStack { this._writeAttr(el, n); } if (ddChanged) { - this._prepareDragDropByNode(n); + this.prepareDragDrop(n.el); } }); @@ -1697,7 +1697,7 @@ export class GridStack { sizeToContent ? el.classList.add('size-to-content') : el.classList.remove('size-to-content'); if (sizeToContent) this.resizeToContentCheck(false, node); - if (!Utils.lazyLoad(node)) this._prepareDragDropByNode(node); + if (!Utils.lazyLoad(node)) this.prepareDragDrop(node.el); return this; } @@ -1994,7 +1994,7 @@ export class GridStack { const n = el.gridstackNode; if (!n) return; val ? delete n.noMove : n.noMove = true; - this._prepareDragDropByNode(n); // init DD if need be, and adjust + this.prepareDragDrop(n.el); // init DD if need be, and adjust }); return this; } @@ -2010,7 +2010,7 @@ export class GridStack { const n = el.gridstackNode; if (!n) return; val ? delete n.noResize : n.noResize = true; - this._prepareDragDropByNode(n); // init DD if need be, and adjust + this.prepareDragDrop(n.el); // init DD if need be, and adjust }); return this; } @@ -2057,7 +2057,7 @@ export class GridStack { if (this.opts.staticGrid) return this; // can't move a static grid! doEnable ? delete this.opts.disableDrag : this.opts.disableDrag = true; // FIRST before we update children as grid overrides #1658 this.engine.nodes.forEach(n => { - this._prepareDragDropByNode(n); + this.prepareDragDrop(n.el); if (n.subGrid && recurse) n.subGrid.enableMove(doEnable, recurse); }); return this; @@ -2071,7 +2071,7 @@ export class GridStack { if (this.opts.staticGrid) return this; // can't size a static grid! doEnable ? delete this.opts.disableResize : this.opts.disableResize = true; // FIRST before we update children as grid overrides #1658 this.engine.nodes.forEach(n => { - this._prepareDragDropByNode(n); + this.prepareDragDrop(n.el); if (n.subGrid && recurse) n.subGrid.enableResize(doEnable, recurse); }); return this; @@ -2399,9 +2399,9 @@ export class GridStack { return this; } - /** @internal prepares the element for drag&drop */ - protected _prepareDragDropByNode(node: GridStackNode): GridStack { - const el = node.el; + /** prepares the element for drag&drop - this is normally called by makeWiget() unless are are delay loading */ + public prepareDragDrop(el: GridItemHTMLElement): GridStack { + const node = el.gridstackNode; const noMove = node.noMove || this.opts.disableDrag; const noResize = node.noResize || this.opts.disableResize; diff --git a/src/types.ts b/src/types.ts index 7709c012..dbb017f4 100644 --- a/src/types.ts +++ b/src/types.ts @@ -153,7 +153,7 @@ export interface GridStackOptions { /** number of columns (default?: 12). Note: IF you change this, CSS also have to change. See https://github.com/gridstack/gridstack.js#change-grid-columns. * Note: for nested grids, it is recommended to use 'auto' which will always match the container grid-item current width (in column) to keep inside and outside - * items always to same. flag is not supported for regular non-nested grids. + * items always the same. flag is NOT supported for regular non-nested grids. */ column?: number | 'auto'; diff --git a/src/utils.ts b/src/utils.ts index 50c2e794..1d13535c 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -126,8 +126,7 @@ export class Utils { n.visibleObservable?.disconnect(); delete n.visibleObservable; GridStack.renderCB(cont, n); - // eslint-disable-next-line @typescript-eslint/no-explicit-any - (n.grid as any)?._prepareDragDropByNode(n); // access protected method. TODO: do we expose that for React to call too (after dom is ready) + n.grid?.prepareDragDrop(n.el); }}); window.setTimeout(() => n.visibleObservable?.observe(el)); // wait until callee sets position attributes }