Should be able to resize/drag widget and push other items

[nghiado]

Right now, I can't resize an item if there are no spaces around it.
The expected behavior is user should be able to resize any items regardless of spaces around it.
When no spaces around it, just push other items on the left/down as the original plugin does
http://dsmorse.github.io/gridster.js/demos/resize.html

[tiberiuzuld]

HI @nghiado ,
In the current implementation this may be difficult to implement without creating a lot of other issues.
Will try to see if I can find a way to make it work.

[nghiado]

@tiberiuzuld Do we have any ETA for this? I believe this is the only missing feature to make it the best Angular2 lib for dashboard :-)

[tiberiuzuld]

Hi @nghiado and @DavidDecraene ,
I merged your requests in this issue, to have one place to talk about pushing other items when drag/resize of a widget.

About ETA:
The ETA currently is after I finish the AOT compatibility #17 , I will start looking at this more in depth.

About this feature:
Yes I was thinking a lot about it and looked at other libraries how they do it and at their demos of it, but still didn't found any library which is not buggy as hell because of it.

In the 1.x version tried 2 times to implement it and abandoned because of the multiple issues it caused.

Don't get me wrong I want to implement it and I like the idea of it but if it will cause issues and bugs is not going to happen.

The issues:

• If you drag/resize and you keep moving the mouse you will see that the items don't come back at the original position.
• If you combine this with the features: "compact up" & "compact left", this will affect the pushing more and the probability of it causing issues will be larger and affecting more widgets.
• Other complications will be with the limits of the grid like : "maxRows" & "maxCols", if a widget you push reaches that limits then you need to push that widget somewhere else.

Anyway after I finish the AOT:

• If I think of a better idea of implementing this OR
• If I find a good implementation out there OR
• If you guys link a good one OR
• If someone makes a good PR for it

Will be implemented.

[DavidDecraene]

My reference would be this angular 1 version of gridster:
https://github.com/ManifestWebDesign/angular-gridster
The demo page is here (enable all): https://rawgit.com/ManifestWebDesign/angular-gridster/master/index.html#/main

I like what you have done so far, of the several angular 2 gridster conversions yours seems to be the most feature complete for me.

[tiberiuzuld]

Hi @DavidDecraene ,
Your suggestion was the initial gridster I used, and what started me to do my own since it has some bugs.
If you drag around a widget you will see that the rest of the widgets will lose the initial position.
In my eyes that is not very acceptable since will create unexpected positions of widgets for the user.

[nghiado]

@tiberiuzuld I think it should be up to developers who build the product to decide it's acceptable or not.

We have a strong use case which allow user to add a new widget and drag them into dashboard anywhere they want during the add process.

I think you can jut provide a config like enablePushing and let developers use it along with Compact Up, Compact Left, Swap Items

Just one note on your comment about 'the widgets will lose the initial position', since we have cancelable drag/drop action, we should store the widgets position before dragging/pushing so we can restore them if needed when the action is cancelled.

[tiberiuzuld]

@nghiado I agree that developers should decide if they use the feature or not.

Yes the feature will be enabled from config with default false.

Currently when you drag/resize an widget, the initial position is stored only for that item.
In the case of this feature will have to store the initial position for the entire grid and restore if canceled.

[patriceo]

Thanks for the great job you did @tiberiuzuld , I think it will be perfect once the lib provides the "pushing" feature like in the demo link posted by @DavidDecraene. Without it users found it weird not having a visual feedback and knowing when you have to "drop" the item to push others.

[tiberiuzuld]

Hi @patriceo ,
Thank you!

I will probably implement pushing next week.

And also want to implement some more visual feedback after that. Something like this maybe.
The grid to appear only when dragging and resizing. And optional for who wants.

Let me know what you think guys.

[patriceo]

Great news ! This is good I I was about to implement something like the "gridster-item-content" one week ago and when I come back I see it is done :)

On my side I had to implement somehow a visual "handler" for the drag that is used when gridster-item-content is implemented by your content so we have something displayed on hover event (same as resize handler) that helps the user to understand that things can be moved. I will try to push something clean on my branch so you can have a look if you are interested..

Regarding the feedback this demo is nice ! Perhaps displaying a grid should be an option ?

I'm very looking forward to seeing this new features and enhancement, feel free to ask if you need some people to test them !

[tiberiuzuld]

Hi guys,
Implemented push in v2.8.0 please test it out and let me know if you find any issues.
Will implement the visual feedback in another issue next weeks
Thanks,

[patriceo]

Wow thanks @tiberiuzuld ! I have updated with the 2.8.1 this is working great for a first release :)

I see I have some strange behaviour, I need to put it in a simple template to make sure this is not my code, so I will be able to make some feedbacks !

[karanaditya993]

Hi @tiberiuzuld,

Again, assuming this was only implemented for angular 2 version? Thanks again for all your help. This is a great gridster framework.

[tiberiuzuld]

Hi @karanaditya993 ,
Yes this is only in angular2 version since the people using angular2 request it.

[karanaditya993]

Can you point me in the direction of the file where this was implemented? Will try and recreate in angular 1 version. Thanks.

[tiberiuzuld]

GridsterPush.service.ts

[karanaditya993]

Thanks very much.