Merge pull request #2163 from adumesny/master

removing item from a grid (into another) will now call `change`

Author: adumesny

demo/events.js

@@ -5,65 +5,56 @@ function addEvents(grid, id) {
     let str = '';
     items.forEach(function(item) { str += ' (' + item.x + ',' + item.y + ' ' + item.w + 'x' + item.h + ')'; });
     console.log(g + event.type + ' ' + items.length + ' items (x,y w h):' + str );
-  });
-
-  grid.on('enable', function(event) {
+  })
+  .on('enable', function(event) {
     let grid = event.target;
     console.log(g + 'enable');
-  });
-
-  grid.on('disable', function(event) {
+  })
+  .on('disable', function(event) {
     let grid = event.target;
     console.log(g + 'disable');
-  });
-
-  grid.on('dragstart', function(event, el) {
+  })
+  .on('dragstart', function(event, el) {
     let node = el.gridstackNode;
     let x = el.getAttribute('gs-x'); // verify node (easiest) and attr are the same
     let y = el.getAttribute('gs-y');
     console.log(g + 'dragstart ' + el.textContent + ' pos: (' + node.x + ',' + node.y + ') = (' + x + ',' + y + ')');
-  });
-
-  grid.on('drag', function(event, el) {
+  })
+  .on('drag', function(event, el) {
     let node = el.gridstackNode;
     let x = el.getAttribute('gs-x'); // verify node (easiest) and attr are the same
     let y = el.getAttribute('gs-y');
     // console.log(g + 'drag ' + el.textContent + ' pos: (' + node.x + ',' + node.y + ') = (' + x + ',' + y + ')');
-  });
-
-  grid.on('dragstop', function(event, el) {
+  })
+  .on('dragstop', function(event, el) {
     let node = el.gridstackNode;
     let x = el.getAttribute('gs-x'); // verify node (easiest) and attr are the same
     let y = el.getAttribute('gs-y');
     console.log(g + 'dragstop ' + el.textContent + ' pos: (' + node.x + ',' + node.y + ') = (' + x + ',' + y + ')');
-  });
-
-  grid.on('dropped', function(event, previousNode, newNode) {
+  })
+  .on('dropped', function(event, previousNode, newNode) {
     if (previousNode) {
       console.log(g + 'dropped - Removed widget from grid:', previousNode);
     }
     if (newNode) {
       console.log(g + 'dropped - Added widget in grid:', newNode);
     }
-  });
-
-  grid.on('resizestart', function(event, el) {
+  })
+  .on('resizestart', function(event, el) {
     let n = el.gridstackNode;
     let w = parseInt(el.getAttribute('gs-w')); // verify node (easiest) and attr are the same
     let h = parseInt(el.getAttribute('gs-h'));
     if (w !== n.w || h !== n.h) alert('resizestart missmatch');
     let rec = el.getBoundingClientRect();
     console.log(`${g} resizestart ${el.textContent} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`);
 
-  });
-
-  grid.on('resize', function(event, el) {
+  })
+  .on('resize', function(event, el) {
     let n = el.gridstackNode;
     let rec = el.getBoundingClientRect();
     console.log(`${g} resize ${el.textContent} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`);
-  });
-
-  grid.on('resizestop', function(event, el) {
+  })
+  .on('resizestop', function(event, el) {
     let n = el.gridstackNode;
     let w = parseInt(el.getAttribute('gs-w')); // verify node (easiest) and attr are the same
     let h = parseInt(el.getAttribute('gs-h'));

doc/CHANGES.md

@@ -5,6 +5,7 @@ Change log
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
 
+- [7.2.0-dev (TBD)](#720-dev-tbd)
 - [7.2.0 (2023-01-07)](#720-2023-01-07)
 - [7.1.2 (2022-12-29)](#712-2022-12-29)
 - [7.1.1 (2022-11-13)](#711-2022-11-13)
@@ -77,6 +78,8 @@ Change log
 - [v0.1.0 (2014-11-18)](#v010-2014-11-18)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
+## 7.2.0-dev (TBD)
+* fix [#2162](https://github.com/gridstack/gridstack.js/pull/2162) removing item from a grid (into another) will now call `change` if anything was also modified during the remove
 
 ## 7.2.0 (2023-01-07)
 * fix [#1936](https://github.com/gridstack/gridstack.js/issues/1936) some styles left behind after a drag

src/gridstack.ts

@@ -1924,8 +1924,8 @@ export class GridStack {
         if (wasAdded && origNode?.grid && origNode.grid !== this) {
           let oGrid = origNode.grid;
           oGrid.engine.removedNodes.push(origNode);
-          oGrid._triggerRemoveEvent();
-          // if it's an empty sub-grid, to get auto-created, nuke it
+          oGrid._triggerRemoveEvent()._triggerChangeEvent();
+          // if it's an empty sub-grid that got auto-created, nuke it
           if (oGrid.parentGridItem && !oGrid.engine.nodes.length && oGrid.opts.subGridDynamic) {
             oGrid.removeAsSubGrid();
           }