Reklino / angular-resizable

A lightweight directive for creating resizable containers.
http://codepen.io/Reklino/pen/raRaXq/
MIT License
315 stars 115 forks source link

Add minimum width/height options #41

Open guikubivan opened 8 years ago

guikubivan commented 8 years ago

I tried to implement this with the following. I'm not familiar with flexbox so I ignored that, but something along these lines would be great.

            scope: {
                rDirections: "=",
                rCenteredX: "=",
                rCenteredY: "=",
                rWidth: "=",
                rHeight: "=",
                rFlex: "=",
                rGrabber: "@",
                rMinWidth: "=",
                rMinHeight: "="
            }
....

switch(dragDir) {
                        case 'top':
                            var newHeight = h + (offset * vy);
                            if(scope.rFlex) { element[0].style.flexBasis = newHeight + 'px'; }
                            else {            if(!scope.rMinHeight || ( newHeight > scope.rMinHeight)) { element[0].style.height = newHeight + 'px'; } }
                            break;
                        case 'right':
                            var newWidth = w - (offset * vx);
                            if(scope.rFlex) { element[0].style.flexBasis = newWidth + 'px'; }
                            else {            if(!scope.rMinWidth || ( newWidth > scope.rMinWidth)) { element[0].style.width = newWidth + 'px'; } }
                            break;
                        case 'bottom':
                            var newHeight = h - (offset * vy);
                            if(scope.rFlex) { element[0].style.flexBasis = h - (offset * vy) + 'px'; }
                            else {            if(!scope.rMinHeight || ( newHeight > scope.rMinHeight)) { element[0].style.height = h - (offset * vy) + 'px'; } }
                            break;
                        case 'left':
                            var newWidth = w + (offset * vx);
                            if(scope.rFlex) { element[0].style.flexBasis = newWidth + 'px'; }
                            else {            if(!scope.rMinWidth || ( newWidth > scope.rMinWidth)) { element[0].style.width = newWidth + 'px';} }
                            break;
                    }
designnotdrum commented 8 years ago

Why add this to the directive when you can specify both min and max widths/heights in CSS for whatever you're trying to resize?

mrzepinski commented 7 years ago

@designnotdrum When you have nested elements that inherit height from the parent it's important to have strict values.

My PR is here: #66

@guikubivan Thanks for your issue ;)