BTMorton / angular2-grid

A drag/drop/resize grid-based plugin directive for angular2
https://bmorton.co.uk/angular/
MIT License
354 stars 159 forks source link

Top left resize #285

Closed BTMorton closed 6 years ago

BTMorton commented 6 years ago

@ThomasSchellenbergNextCentury, I've merged your changes and finished the impl of top/left resize. D'you fancy taking a quick look over for me and giving any feedback you may have?

ThomasSchellenbergNextCentury commented 6 years ago

Hey @BTMorton

Super sorry for the delay! Thanks for working on this. I've copied your changes locally to test it out in our app and overall it looks good. I did notice a bug and a few little bits of strange behavior, though.

First, I know that in NgGridItem.canResize, we're using the comparison > 1 to combat issue #282. However, this causes null to be returned if the top or left mouse position is 0 or 1, and null isn't being handled correctly:

ERROR TypeError: Cannot read property 'includes' of null
    at NgGrid._resize (NgGrid.js:579)
    at NgGrid.mouseMoveEventHandler (NgGrid.js:380)
    at Object.eval [as handleEvent] (AppComponent.html:59)
    at handleEvent (core.js:13530)
    at callWithDebugContext (core.js:15039)
    at Object.debugHandleEvent [as handleEvent] (core.js:14626)
    at dispatchEvent (core.js:9945)
    at eval (core.js:10570)
    at HTMLDocument.eval (platform-browser.js:2628)
    at ZoneDelegate.invokeTask (zone.js:425)

You should be able to replicate this by (patiently) hovering your mouse over the very top or left edge of an item and trying to click & drag.

Also, there's some oddity with how left and top resizing moves the grid items. These aren't show-stoppers but they do create an undesirable user experience.

If I have the following layout:

-------
|  A  |
-------
--- ---
|B| |C|
--- ---

And I collapse A by dragging its left handle to the right, I'd expect B to shift down:

--- ---
|B| |A|
--- ---
    ---
    |C|
    ---

But the actual result is that A shifts to the right and C shifts down:

--- ---
|A| |C|
--- ---
---
|B|
---

For another example, if I have the following layout:

--- --- ---
|D| |E| |F|
--- --- ---

And I expand E by dragging its left handle to the left, I'd expect D to shift up:

------- ---
|  E  | |F|
------- ---
---
|D|
---

But the actual result is that E shifts to the right and F shifts up:

--- -------
|D| |  E  |
--- -------
        ---
        |F|
        ---

If possible, it would be nice if you could fix this behavior before you merge the changes.

Thanks for all your hard work!