Add resize event listener #1616

MrCorba · 2021-02-12T08:14:26Z

Description

Added an on resize listener to get the size of the node while resizing

Checklist

[] Created tests which fail without the change (if possible)
All tests passing (yarn test)
Extended the README / documentation, if necessary

adumesny

thank you for making this suggestion! Please make the corrections listed.

adumesny · 2021-02-12T16:32:54Z

demo/events.js

@@ -46,6 +46,10 @@ function addEvents(grid, id) {
    console.log(g + 'resizestart ' + el.textContent + ' size: (' + w + ' x ' + h + ')');
  });

+  grid.on('resize', function(event, newWidget) {


make it el to be consistent with others and pass the DOM element, not the node...

adumesny · 2021-02-12T16:36:31Z

doc/README.md

+called while the user is resizing an item, with current node attributes
+
+```js
+grid.on('resize', function(event: Event, item: GridStackNode) {


don't pass the node, pass the element (from which node can be accessed) to be consistent... then they can use the actual px width/height or node x,y (column based)

adumesny · 2021-02-12T16:41:59Z

src/gridstack-dd.ts

@@ -449,6 +449,15 @@ GridStack.prototype._prepareDragDropByNode = function(node: GridStackNode): Grid
    this.engine.moveNode(node, x, y, w, h);
    if (resizing && node.subGrid) { (node.subGrid as GridStack).onParentResize(); }
    this._updateContainerHeight();
+
+    if (this._gsEventHandler[event.type]) {


looks like we should also add 'drag' event... also we need to consider if we want to call it for pixel changes, or just when column/row changes happen (what you have)

Right now you have it if only column/row changes and passing node copy (why clone the values ? just pass the node as it has already moved to new location...
I would pass node.el instead to be consistent with start/top events AND add drag event as well.

I had a problem getting the Element with the updated values. I've overlooked the node.el, this does the trick.

I added it to column/row changes, because I think it makes the most sense regarding snapping. The moment it snaps to another grid you want an update and do something with that

I've changed it to use the target, but I had to use _writePosAttr to get the current attributes while resizing

adumesny · 2021-02-12T16:42:25Z

src/gridstack.ts

@@ -21,7 +21,7 @@ export interface GridHTMLElement extends HTMLElement {
  gridstack?: GridStack; // grid's parent DOM element points back to grid class
 }
 export type GridStackEvent = 'added' | 'change' | 'disable' | 'dragstart' | 'dragstop' | 'dropped' |
-  'enable' | 'removed' | 'resizestart' | 'resizestop';
+  'enable' | 'removed' | 'resizestart' | 'resizestop' | 'resize';


alphabetize please

adumesny

thanks for the change.
trying to understand what you need "live" resizing events because if you are updating the content inside, the live picture is supposed to follow the mouse cursor NOT the grid snapping dimensions (which is what the placeholder does but is empty). I'm wondering if we asking for problem doing that....

adumesny · 2021-02-15T16:02:08Z

demo/events.js

@@ -19,6 +19,13 @@ function addEvents(grid, id) {
    console.log(g + 'dragstart ' + el.textContent + ' pos: (' + node.x + ',' + node.y + ') vs (' + x + ',' + y + ')');
  });

+  grid.on('drag', function(event, el) {
+    let node = el.gridstackNode;
+    let x = el.getAttribute('gs-x');


actually I don't know why I have el.getAttribute('gs-x') vs node.x as they should be the same....maybe for debugging. I should make that clearer...

adumesny · 2021-02-15T16:02:54Z

demo/events.js

@@ -46,6 +53,12 @@ function addEvents(grid, id) {
    console.log(g + 'resizestart ' + el.textContent + ' size: (' + w + ' x ' + h + ')');
  });

+  grid.on('resize', function(event, el) {
+    let w = el.getAttribute('gs-w');


add let node = el.gridstackNode; (which is simpler to use really)

adumesny · 2021-02-15T16:04:18Z

doc/README.md

@@ -238,6 +249,15 @@ grid.on('resizestart', function(event: Event, el: GridItemHTMLElement) {
 });
 ```

+### resize(event, el)
+
+called while the user is resizing an item, with current node attributes


remove "with current node attributes"

adumesny · 2021-02-15T16:10:44Z

src/gridstack-dd.ts

@@ -449,6 +449,13 @@ GridStack.prototype._prepareDragDropByNode = function(node: GridStackNode): Grid
    this.engine.moveNode(node, x, y, w, h);
    if (resizing && node.subGrid) { (node.subGrid as GridStack).onParentResize(); }
    this._updateContainerHeight();
+
+    if (this._gsEventHandler[event.type]) {
+      let target: GridItemHTMLElement = event.target as GridItemHTMLElement;


is target != node.el ?
I need to think about are we calling about placeholder (which is grid constrained) or the actual content is that is freely being resized by the mouse (pixel following)... I would have to debug it and see what makes sense. if you are doing the live item when it won't match the mouse...

Also I would not conditionally call _writePosAttr() if you have an event as it's changes the behavior and hard to debug/test. Always do this (assuming we need that - which I don't believe we do on the placeholder as it need to reflect the new column/row sizing.

Target == node.el, but from node.el you can't go back to el.gridstackNode. Probably because it's a recursive reference.

node.el.gridstackNode should work - I should always have that circular link, but placeholder vs real widget being dragged/resized might be different. Again I'll have to look.

MrCorba · 2021-02-16T06:39:24Z

The problem I'm trying to solve with the live resizing events is that I want to verify the new widget size and do something accordingly. Let's say there is a widget with a chart that is 4x4. When the tile gets smaller than 4x2, the chart doesn't fit anymore. So I would like to display a message/give a red border from a certain size, to warn the user that the size is too small and the chart will be removed (or something like that)

I know I can use min width/height to force minimal sizes, but I want the user to be able to make it smaller and deal with the consequences.

adumesny · 2021-02-16T15:25:37Z

src/gridstack-dd.ts

@@ -452,6 +453,11 @@ GridStack.prototype._prepareDragDropByNode = function(node: GridStackNode): Grid
      if (resizing && node.subGrid) { (node.subGrid as GridStack).onParentResize(); }
      this._updateContainerHeight();
    }
+    this._writePosAttr(target, node.x, node.y, node.w, node.h);


this all needs to move inside the if (this.engine.moveNodeCheck(node, x, y, w, h)) {}
otherwise it didn't change (constrain).

Also I'm not sure we should call _writePosAttr() as wouldn't the gs-x and x attributes conflict (with x,y,width,height absolute position maybe winning as they are inline but could be an issue) as user can easily look at node.x values (easier) or actual pixel size of the sizing element that is not grid constrain.

thanks for going through those edits... as you can see maintaining a lib is no easy task :)

adumesny · 2021-02-20T15:32:58Z

thanks, I will tweak it further.

fixes to gridstack#1616 for new drag|resize event - only call when they change. Updated docs

adumesny requested changes Feb 12, 2021

View reviewed changes

adumesny requested changes Feb 15, 2021

View reviewed changes

Add resize event listener

db93199

adumesny reviewed Feb 16, 2021

View reviewed changes

adumesny merged commit 7d3d4c5 into gridstack:develop Feb 20, 2021

adumesny added a commit to adumesny/gridstack.js that referenced this pull request Feb 20, 2021

drag | resize events tweaks

4a39c84

fixes to gridstack#1616 for new drag|resize event - only call when they change. Updated docs

adumesny mentioned this pull request Feb 20, 2021

drag | resize events tweaks #1629

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add resize event listener #1616

Add resize event listener #1616

MrCorba commented Feb 12, 2021

adumesny left a comment

adumesny Feb 12, 2021

adumesny Feb 12, 2021

adumesny Feb 12, 2021

MrCorba Feb 15, 2021

MrCorba Feb 15, 2021

adumesny Feb 12, 2021

adumesny left a comment

adumesny Feb 15, 2021

adumesny Feb 15, 2021

adumesny Feb 15, 2021

adumesny Feb 15, 2021

MrCorba Feb 16, 2021

adumesny Feb 16, 2021

MrCorba commented Feb 16, 2021

adumesny Feb 16, 2021 •

edited

adumesny commented Feb 20, 2021

Add resize event listener #1616

Add resize event listener #1616

Conversation

MrCorba commented Feb 12, 2021

Description

Checklist

adumesny left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adumesny left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MrCorba commented Feb 16, 2021

adumesny Feb 16, 2021 • edited

Choose a reason for hiding this comment

adumesny commented Feb 20, 2021

adumesny Feb 16, 2021 •

edited