ducksboard / gridster.js

gridster.js is a jQuery plugin that makes building intuitive draggable layouts from elements spanning multiple columns
http://gridster.net/
MIT License
6.04k stars 1.2k forks source link

Change widget base size and calculate new sizex and sizey #598

Open bruno911 opened 6 years ago

bruno911 commented 6 years ago

Hi,

I have created a resizable layout using gridster, and it saves on change, so for example my current configuration is:

widget base: [50,50] margin [2,2] and one item "Page section 1" only with sizex="10" sizey="10" row="1" col="1"

Now, let's assume one user called Mr. Whites modified his layout, so that "Page section 1" becomes: sizex="5" sizey="5" row="1" col="1", that will be saved in db, and every time Mr. Whites opens this page, his layout will be that size.

After long time using this solution, I've realized that, it may be useful for Mr. Whites to resize with smaller steps, so I changed the widget base from: [50,50] to [10,10], because I wanted to be flexible if one day I decide to change it again, I've created a function that will calculate the factor:

function getFactor(response){
    var response = response || {},
        originalWidgetBaseDimension = 50,
        currentWidgetBaseDimension;

        if(typeof reponse.widgetBaseDimension != 'undefined')
        {
            currentWidgetBaseDimension = reponse.widgetBaseDimension;
        }else{
            currentWidgetBaseDimension = this.widgetBaseDimension;
        }

        return originalWidgetBaseDimension / currentWidgetBaseDimension;
}

In this case the factor will be 5 because 50/10 is 5. Then I get the settings saved in DB for Mr. Whites and I multiple sizex and sizey by the factor. So now: sizex="5" sizey="5" row="1" col="1" will become: sizex="25" sizey="25" row="1" col="1"

I expected it to look exactly the same as previous layout, but it doesn't. I also tried to measure the width of the element while changing the widget base, so seeing if I was able to see any kind of pattern, but no luck.

when widget base is: | width() / sizex | height() / sizey 5 | 8.953846154px | 8.7px 10 | 13.0976px | 13.4px 25 | 28.76px | 27.2px 50 | 53px | 51px

The dirty way, would be to ask Mr. Whites to resize his layout with the new version, I would like to avoid that.

Is there any other way to calculate this?

Thank you very much!