From 5562fb87d78bf2b64b2a9559c26e0ec3ffb97bb3 Mon Sep 17 00:00:00 2001 From: Matteo Piazza Date: Thu, 16 Jul 2015 13:45:21 +0200 Subject: [PATCH 1/2] Snap to grid Snap resize to predefined grid size. --- .gitignore | 3 ++- angular-resizable.min.js | 2 +- package.json | 4 ++-- src/angular-resizable.js | 33 +++++++++++++++++++++++++++------ 4 files changed, 32 insertions(+), 10 deletions(-) diff --git a/.gitignore b/.gitignore index 8cec646..5e7f478 100644 --- a/.gitignore +++ b/.gitignore @@ -36,4 +36,5 @@ ehthumbs.db Thumbs.db -node_modules \ No newline at end of file +node_modules +*.bak \ No newline at end of file diff --git a/angular-resizable.min.js b/angular-resizable.min.js index c7ed294..5d2d143 100644 --- a/angular-resizable.min.js +++ b/angular-resizable.min.js @@ -1 +1 @@ -angular.module("angularResizable",[]).directive("resizable",function(){function e(e){void 0===t?(t=e,setTimeout(function(){t(),t=void 0},100)):t=e}var t;return{restrict:"AE",scope:{rDirections:"=",rCenteredX:"=",rCenteredY:"=",rWidth:"=",rHeight:"=",rFlex:"=",rGrabber:"@",rDisabled:"@"},link:function(t,r,i){t.$watch("rWidth",function(e){r[0].style.width=t.rWidth+"px"}),t.$watch("rHeight",function(e){r[0].style.height=t.rHeight+"px"}),r.addClass("resizable");for(var n,s,a,l,o,d=window.getComputedStyle(r[0],null),u=t.rDirections,c=t.rCenteredX?2:1,h=t.rCenteredY?2:1,p=t.rGrabber?t.rGrabber:"",x={},g=function(e){x.width=!1,x.height=!1,"x"==o?x.width=parseInt(t.rFlex?r[0].style.flexBasis:r[0].style.width):x.height=parseInt(t.rFlex?r[0].style.flexBasis:r[0].style.height),x.id=r[0].id,x.evt=e},f=function(i){var d="x"==o?a-i.clientX:a-i.clientY;switch(l){case"top":t.rFlex?r[0].style.flexBasis=s+d*h+"px":r[0].style.height=s+d*h+"px";break;case"right":t.rFlex?r[0].style.flexBasis=n-d*c+"px":r[0].style.width=n-d*c+"px";break;case"bottom":t.rFlex?r[0].style.flexBasis=s-d*h+"px":r[0].style.height=s-d*h+"px";break;case"left":t.rFlex?r[0].style.flexBasis=n+d*c+"px":r[0].style.width=n+d*c+"px"}g(i),e(function(){t.$emit("angular-resizable.resizing",x)})},b=function(e){g(e),t.$emit("angular-resizable.resizeEnd",x),t.$apply(),document.removeEventListener("mouseup",b,!1),document.removeEventListener("mousemove",f,!1),r.removeClass("no-transition")},m=function(e,i){l=i,o="left"==l||"right"==l?"x":"y",a="x"==o?e.clientX:e.clientY,n=parseInt(d.getPropertyValue("width")),s=parseInt(d.getPropertyValue("height")),r.addClass("no-transition"),document.addEventListener("mouseup",b,!1),document.addEventListener("mousemove",f,!1),e.stopPropagation&&e.stopPropagation(),e.preventDefault&&e.preventDefault(),e.cancelBubble=!0,e.returnValue=!1,g(e),t.$emit("angular-resizable.resizeStart",x),t.$apply()},v=0;v",x={},f=function(e){x.width=!1,x.height=!1,"x"==u?x.width=parseInt(t.rFlex?i[0].style.flexBasis:i[0].style.width):x.height=parseInt(t.rFlex?i[0].style.flexBasis:i[0].style.height),x.id=i[0].id,x.evt=e,x.originalWidth=n,x.originalHeight=a},b=function(r){var n="x"==u?o-r.clientX:o-r.clientY,a=t.rGrid[0]||1,c=t.rGrid[1]||1;switch(n="x"==u?Math.round((s+n-s)/a)*a:Math.round((l+n-l)/c)*c,d){case"top":t.rFlex?i[0].style.flexBasis=l+n*p+"px":i[0].style.height=l+n*p+"px";break;case"right":t.rFlex?i[0].style.flexBasis=s-n*h+"px":i[0].style.width=s-n*h+"px";break;case"bottom":t.rFlex?i[0].style.flexBasis=l-n*p+"px":i[0].style.height=l-n*p+"px";break;case"left":t.rFlex?i[0].style.flexBasis=s+n*h+"px":i[0].style.width=s+n*h+"px"}f(r),e(function(){t.$emit("angular-resizable.resizing",x)})},m=function(e){f(e),t.$emit("angular-resizable.resizeEnd",x),t.$apply(),document.removeEventListener("mouseup",m,!1),document.removeEventListener("mousemove",b,!1),i.removeClass("no-transition")},v=function(e,r){d=r,u="left"==d||"right"==d?"x":"y",o="x"==u?e.clientX:e.clientY;var c=i[0].getBoundingClientRect();s=parseInt(c.width),l=parseInt(c.height),n=s,a=l,i.addClass("no-transition"),document.addEventListener("mouseup",m,!1),document.addEventListener("mousemove",b,!1),e.stopPropagation&&e.stopPropagation(),e.preventDefault&&e.preventDefault(),e.cancelBubble=!0,e.returnValue=!1,f(e),t.$emit("angular-resizable.resizeStart",x),t.$apply()},y=0;y Date: Mon, 26 Oct 2015 14:07:49 +0100 Subject: [PATCH 2/2] Limit resize step. Added parameter "rLimitResizeTo" to limit resize step. --- angular-resizable.min.js | 2 +- src/angular-resizable.js | 34 ++++++++++++++++++++++------------ 2 files changed, 23 insertions(+), 13 deletions(-) diff --git a/angular-resizable.min.js b/angular-resizable.min.js index 5d2d143..6774cb5 100644 --- a/angular-resizable.min.js +++ b/angular-resizable.min.js @@ -1 +1 @@ -angular.module("angularResizable",[]).directive("resizable",function(){function e(e){void 0===t?(t=e,setTimeout(function(){t(),t=void 0},100)):t=e}var t;return{restrict:"AE",scope:{rDirections:"=",rCenteredX:"=",rCenteredY:"=",rWidth:"=",rHeight:"=",rFlex:"=",rGrabber:"@",rDisabled:"@",rGrid:"="},link:function(t,i,r){t.$watch("rWidth",function(e){i[0].style.width=t.rWidth+"px"}),t.$watch("rHeight",function(e){i[0].style.height=t.rHeight+"px"}),i.addClass("resizable");for(var n,a,s,l,o,d,u,c=(window.getComputedStyle(i[0],null),t.rDirections),h=t.rCenteredX?2:1,p=t.rCenteredY?2:1,g=t.rGrabber?t.rGrabber:"",x={},f=function(e){x.width=!1,x.height=!1,"x"==u?x.width=parseInt(t.rFlex?i[0].style.flexBasis:i[0].style.width):x.height=parseInt(t.rFlex?i[0].style.flexBasis:i[0].style.height),x.id=i[0].id,x.evt=e,x.originalWidth=n,x.originalHeight=a},b=function(r){var n="x"==u?o-r.clientX:o-r.clientY,a=t.rGrid[0]||1,c=t.rGrid[1]||1;switch(n="x"==u?Math.round((s+n-s)/a)*a:Math.round((l+n-l)/c)*c,d){case"top":t.rFlex?i[0].style.flexBasis=l+n*p+"px":i[0].style.height=l+n*p+"px";break;case"right":t.rFlex?i[0].style.flexBasis=s-n*h+"px":i[0].style.width=s-n*h+"px";break;case"bottom":t.rFlex?i[0].style.flexBasis=l-n*p+"px":i[0].style.height=l-n*p+"px";break;case"left":t.rFlex?i[0].style.flexBasis=s+n*h+"px":i[0].style.width=s+n*h+"px"}f(r),e(function(){t.$emit("angular-resizable.resizing",x)})},m=function(e){f(e),t.$emit("angular-resizable.resizeEnd",x),t.$apply(),document.removeEventListener("mouseup",m,!1),document.removeEventListener("mousemove",b,!1),i.removeClass("no-transition")},v=function(e,r){d=r,u="left"==d||"right"==d?"x":"y",o="x"==u?e.clientX:e.clientY;var c=i[0].getBoundingClientRect();s=parseInt(c.width),l=parseInt(c.height),n=s,a=l,i.addClass("no-transition"),document.addEventListener("mouseup",m,!1),document.addEventListener("mousemove",b,!1),e.stopPropagation&&e.stopPropagation(),e.preventDefault&&e.preventDefault(),e.cancelBubble=!0,e.returnValue=!1,f(e),t.$emit("angular-resizable.resizeStart",x),t.$apply()},y=0;y",p={},x=function(e){p.width=!1,p.height=!1,"x"==u?p.width=parseInt(t.rFlex?i[0].style.flexBasis:i[0].style.width):p.height=parseInt(t.rFlex?i[0].style.flexBasis:i[0].style.height),p.id=i[0].id,p.evt=e,p.originalWidth=n,p.originalHeight=a},m=function(r){var c,g="x"==u?o-r.clientX:o-r.clientY,m=t.rGrid[0]||1,b=t.rGrid[1]||1,v=t.rLimitResizeTo;switch(g="x"==u?Math.round(g/m)*m:Math.round(g/b)*b,d){case"top":if(c=l+g*f,angular.isDefined(v)&&c>a+b*v)return;t.rFlex?i[0].style.flexBasis=l+g*f+"px":i[0].style.height=l+g*f+"px";break;case"right":if(c=s-g*h,angular.isDefined(v)&&c>n+m*v)return;t.rFlex?i[0].style.flexBasis=c+"px":i[0].style.width=c+"px";break;case"bottom":if(c=l-g*f,angular.isDefined(v)&&a-b*v>c)return;t.rFlex?i[0].style.flexBasis=l-g*f+"px":i[0].style.height=l-g*f+"px";break;case"left":if(c=s+g*h,angular.isDefined(v)&&n-m*v>c)return;t.rFlex?i[0].style.flexBasis=s+g*h+"px":i[0].style.width=s+g*h+"px"}x(r),e(function(){t.$emit("angular-resizable.resizing",p)})},b=function(e){x(e),t.$emit("angular-resizable.resizeEnd",p),t.$apply(),document.removeEventListener("mouseup",b,!1),document.removeEventListener("mousemove",m,!1),i.removeClass("no-transition")},v=function(e,r){d=r,u="left"==d||"right"==d?"x":"y",o="x"==u?e.clientX:e.clientY;var c=i[0].getBoundingClientRect();s=parseInt(c.width),l=parseInt(c.height),n=s,a=l,i.addClass("no-transition"),document.addEventListener("mouseup",b,!1),document.addEventListener("mousemove",m,!1),e.stopPropagation&&e.stopPropagation(),e.preventDefault&&e.preventDefault(),e.cancelBubble=!0,e.returnValue=!1,x(e),t.$emit("angular-resizable.resizeStart",p),t.$apply()},y=0;y originalH+(gridY*limitResizeTo) ) return; if(scope.rFlex) { element[0].style.flexBasis = h + (offset * vy) + 'px'; } else { element[0].style.height = h + (offset * vy) + 'px'; } break; case 'right': - if(scope.rFlex) { element[0].style.flexBasis = w - (offset * vx) + 'px'; } - else { element[0].style.width = w - (offset * vx) + 'px'; } + futureDimension = w - (offset * vx); + if ( angular.isDefined(limitResizeTo) && futureDimension > originalW+(gridX*limitResizeTo) ) return; + if(scope.rFlex) { element[0].style.flexBasis = futureDimension + 'px'; } + else { element[0].style.width = futureDimension + 'px'; } break; case 'bottom': + futureDimension = h - (offset * vy); + if ( angular.isDefined(limitResizeTo) && futureDimension < originalH-(gridY*limitResizeTo) ) return; if(scope.rFlex) { element[0].style.flexBasis = h - (offset * vy) + 'px'; } else { element[0].style.height = h - (offset * vy) + 'px'; } break; case 'left': + futureDimension = w + (offset * vx); + if ( angular.isDefined(limitResizeTo) && futureDimension < originalW-(gridX*limitResizeTo) ) return; if(scope.rFlex) { element[0].style.flexBasis = w + (offset * vx) + 'px'; } else { element[0].style.width = w + (offset * vx) + 'px'; } break;