Merge pull request #2147 from adumesny/master

resizestop example showing correct px values

Author: adumesny

demo/events.js

@@ -48,23 +48,27 @@ function addEvents(grid, id) {
   });
 
   grid.on('resizestart', function(event, el) {
-    let node = el.gridstackNode;
-    let w = el.getAttribute('gs-w');  // verify node (easiest) and attr are the same
-    let h = el.getAttribute('gs-h');
-    console.log(g + 'resizestart ' + el.textContent + ' size: (' + node.w + 'x' + node.h + ') = (' + w + 'x' + h + ')');
+    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) {
-    let node = el.gridstackNode;
-    let w = el.getAttribute('gs-w');  // verify node (easiest) and attr are the same
-    let h = el.getAttribute('gs-h');
-    // console.log(g + 'resize ' + el.textContent + ' size: (' + node.w + 'x' + node.h + ') = (' + w + 'x' + h + ')');
+    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) {
-    let node = el.gridstackNode;
-    let w = el.getAttribute('gs-w'); // verify node (easiest) and attr are the same
-    let h = el.getAttribute('gs-h');
-    console.log(g + 'resizestop ' + el.textContent + ' size: (' + node.w + 'x' + node.h + ') = (' + w + 'x' + h + ')');
+    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('resizestop missmatch');
+    let rec = el.getBoundingClientRect();
+    console.log(`${g} resizestop ${el.textContent} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`);
   });
 }

src/dd-draggable.ts

@@ -303,11 +303,14 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     this.helper.classList.remove('ui-draggable-dragging');
     let node = (this.helper as GridItemHTMLElement)?.gridstackNode;
     // don't bother restoring styles if we're gonna remove anyway...
-    if (this.dragElementOriginStyle && (!node || !node._isAboutToRemove)) {
+    if (!node?._isAboutToRemove && this.dragElementOriginStyle) {
       let helper = this.helper;
-      // don't animate, otherwise we animate offseted when switching back to 'absolute' from 'fixed'
+      // don't animate, otherwise we animate offseted when switching back to 'absolute' from 'fixed'.
+      // TODO: this also removes resizing animation which doesn't have this issue, but others.
+      // Ideally both would animate ('move' would immediately restore 'absolute' and adjust coordinate to match, then trigger a delay (repaint) to restore to final dest with animate)
+      // but then we need to make sure 'resizestop' is called AFTER 'transitionend' event is received (see https://github.com/gridstack/gridstack.js/issues/2033)
       let transition = this.dragElementOriginStyle['transition'] || null;
-      helper.style.transition = this.dragElementOriginStyle['transition'] = 'none';
+      helper.style.transition = this.dragElementOriginStyle['transition'] = 'none'; // can't be NULL #1973
       DDDraggable.originStyleProp.forEach(prop => helper.style[prop] = this.dragElementOriginStyle[prop] || null);
       setTimeout(() => helper.style.transition = transition, 50); // recover animation from saved vars after a pause (0 isn't enough #1973)
     }

src/gridstack.scss

@@ -114,12 +114,6 @@ $animation_speed: .3s !default;
   &.grid-stack-animate .grid-stack-item.grid-stack-placeholder{
     @include vendor(transition, left 0s, top 0s, height 0s, width 0s);
   }
-
-  // without this, the html5 drag will flicker between no-drop and drop when dragging over second grid
-  // Update: removed that as it causes nested grids to no receive dragenter events when parent drags and sets this for #992. not seeing cursor flicker (chrome).
-  // &.ui-droppable.ui-droppable-over > *:not(.ui-droppable) {
-  //   pointer-events: none;
-  // }
 }
 
 .ui-draggable-dragging,