angular-resizable icon indicating copy to clipboard operation
angular-resizable copied to clipboard

Add minimum width/height options

Open guikubivan opened this issue 9 years ago • 2 comments

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;
                    }

guikubivan avatar Jan 06 '16 22:01 guikubivan

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?

designnotdrum avatar May 11 '16 13:05 designnotdrum

@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 ;)

mrzepinski avatar Nov 07 '16 11:11 mrzepinski