Angular-gridster2: Provide a minArea property

[NoMercy235]

Hello! Would it be possible to add a minArea property on the cells? The minItemRows and minItemCols properties don't help because I want to allow the user to have for example an item which can have a min size of 2x4 or 4x2.

[tiberiuzuld]

Hi @NoMercy235 ,
Makes sense, will try to add it this week.
Thanks

[tiberiuzuld]

Hi @NoMercy235 ,
So I was thinking to add it as an array like:

minItemArea: [{cols: 2, rows: 4}, {cols: 4, rows: 2}];

The idea is that if I put only minItemArea: 8 then a valid area will be 1x8 also.
And at least one of the combination from the array needs to be valid for the resize to work.
And also want to add maxItemArea. Both properties to be on gridster-item and gridster.

Let me know if this will satisfy your needs.

Thanks

[NoMercy235]

Hello @tiberiuzuld !

In my opinion, even a 1x8 area should be valid, if someone would wish to have it displayed that way. The problem with giving an array of objects to set the min/maxArea is that it's not really scalable. I'm thinking of a situation where I would like to display a 100x100 matrix in the grid cell. This means that I would have to construct an array like this:

minItemArea: [{cols: 1, rows: 100}, {cols 2, rows: 50}, {cols: 3, rows: 34}, ...]

However, giving a single value like:

minItemArea: options.minItemCols * options.minItemRows

would make more sense since I know that this is going to be the min area regardless of all possible combinations.

Right now, the workaround I've done was to find out the closest possible combination that fits. E.g.

18x1 -> 5x4, 7x1 -> 3x2, etc

And then set the resulted values to minItemRows and maxItemRows on the GridsterItem. But this means that if a user still wants the 18x1 display, it won't work since the minimum value is 5.

[tiberiuzuld]

Hi @NoMercy235 ,
Ok will add a simple value as minItemArea: 8 then, will make things easier to implement.

Thanks

[tiberiuzuld]

Hi @NoMercy235 ,
Added in v3.9.0

Thanks

[NoMercy235]

Thank you for your efforts, @tiberiuzuld ! I will check it out and come back with a feedback (and suggestions, if any).

[NoMercy235]

Hello @tiberiuzuld !

I come back with the review of this feature. I've tested it using the minItemArea and maxItemArea of the grid options and they work fine. However, when you supply these optionse to a single item, they are not taken into account.

In the file: src/lib/gridster.component.ts, in the following lines:

const minAreaLimit = item.minItemArea === undefined ? this.$options.minItemArea : item.minItemArea;

const maxAreaLimit = item.maxItemArea === undefined ? this.$options.maxItemArea : item.maxItemArea;

The item.minItemArea and item.maxItemArea always come undefined. Could you take a look into this, please?

[tiberiuzuld]

Hi @NoMercy235 ,
Seems like a bug, will have a look this week.

Thanks

[NoMercy235]

I think I might have figured out what the problem was. Chech out the pull request and if everything seems fine from your point of view, you can merge it.

Regards,
Alex

[tiberiuzuld]

Hi @NoMercy235 ,
Works great!
Made the release to npm.
Thanks,