Skip to content

resizestop example showing correct px values #2147

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
Dec 31, 2022
Merged

resizestop example showing correct px values #2147

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
28 changes: 16 additions & 12 deletions demo/events.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`);
});
}
9 changes: 6 additions & 3 deletions src/dd-draggable.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}
Expand Down
6 changes: 0 additions & 6 deletions src/gridstack.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down