diff --git a/demo/events.js b/demo/events.js index df12780b1..70bb17db7 100644 --- a/demo/events.js +++ b/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`); }); } \ No newline at end of file diff --git a/src/dd-draggable.ts b/src/dd-draggable.ts index 73a00f441..612701754 100644 --- a/src/dd-draggable.ts +++ b/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) } diff --git a/src/gridstack.scss b/src/gridstack.scss index 4a93bc671..cdaa45b4c 100644 --- a/src/gridstack.scss +++ b/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,