From 2d04f8e14b757518b887e773f05749008732a0bf Mon Sep 17 00:00:00 2001 From: Ingo Schommer Date: Sun, 16 Sep 2007 02:24:11 +0000 Subject: [PATCH] mujma: ENHANCEMENT: Added preserving ratio during resize. (merged from branches/gsoc) git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@42048 467b73ca-7a2a-4603-9d3b-597d59a354a9 --- javascript/ImageEditor/Crop.js | 10 ++++++++ javascript/ImageEditor/Resize.js | 2 +- javascript/ImageEditor/Resizeable.js | 38 +++++++++++++++------------- 3 files changed, 32 insertions(+), 18 deletions(-) diff --git a/javascript/ImageEditor/Crop.js b/javascript/ImageEditor/Crop.js index 3ab0d992..1c5930fa 100644 --- a/javascript/ImageEditor/Crop.js +++ b/javascript/ImageEditor/Crop.js @@ -84,6 +84,16 @@ var Crop = { }, onResize: function(width,height) { + if(width + parseInt(this.cropBox.style.left) > Element.getDimensions(this.imageContainer).width) { + this.cropBox.style.left = parseInt(this.cropBox.style.left) - Math.abs(Element.getDimensions(this.imageContainer).width - (width + parseInt(this.cropBox.style.left))) + "px"; + } + if(parseInt(this.cropBox.style.left) < 0) { + this.cropBox.style.left = "0px"; + } + if(width > Element.getDimensions(this.imageContainer).width) { + this.cropBox.style.width = Element.getDimensions(this.imageContainer).width + "px"; + width = Element.getDimensions(this.imageContainer).width; + } this.placeGreyBox(width,height); }, getMousePos: function(event) { diff --git a/javascript/ImageEditor/Resize.js b/javascript/ImageEditor/Resize.js index ad389074..aea1b5fc 100644 --- a/javascript/ImageEditor/Resize.js +++ b/javascript/ImageEditor/Resize.js @@ -5,7 +5,7 @@ var Resize = { initialize: function(element) { this.element = element; - this.leftBoxConstraint = 2; + this.leftBoxConstraint = 1; this.topBoxConstraint = 0; this.getRelativeMousePos = Resize.getRelativeMousePos.bind(this); options = { diff --git a/javascript/ImageEditor/Resizeable.js b/javascript/ImageEditor/Resizeable.js index fcec1651..6b473569 100644 --- a/javascript/ImageEditor/Resizeable.js +++ b/javascript/ImageEditor/Resizeable.js @@ -25,12 +25,13 @@ Resizeable = { } }, - leftUpperDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) { - newWidth = left - relativeMouseX + width; + leftUpperDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY,ratio) { newHeight = top - relativeMouseY + height; + newWidth = Math.round(newHeight / ratio); if(this.resize(newWidth,newHeight)) { this.element.style.top = top - (newHeight - height) + "px"; - this.element.style.left = left - (newWidth - width) + "px"; + this.element.style.left = left - (newWidth - width) + "px"; + if(parseInt(this.element.style.left) < 0) this.element.style.left = "1px"; } }, @@ -39,16 +40,19 @@ Resizeable = { if(this.resize(newWidth,-1000)) this.element.style.left = left - (left - relativeMouseX) + "px"; }, - leftLowerDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) { - newWidth = left - relativeMouseX + width; + leftLowerDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY,ratio) { newHeight = relativeMouseY - (top + height) + height; - if(this.resize(newWidth,newHeight)) this.element.style.left = left - (left - relativeMouseX) + "px"; + newWidth = Math.round(newHeight / ratio); + if(this.resize(newWidth,newHeight)) { + this.element.style.left = left - (newWidth - width) + "px"; + if(parseInt(this.element.style.left) < 0) this.element.style.left = "1px"; + } }, - rightUpperDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) { - newWidth = relativeMouseX - left - width + width; - newHeight = top - relativeMouseY + height; - if(this.resize(newWidth,newHeight)) this.element.style.top = (top - (newHeight - height) ) + 'px'; + rightUpperDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY,ratio) { + newHeight = top - relativeMouseY + height; + newWidth = Math.round(newHeight / ratio); + if(this.resize(newWidth,newHeight)) this.element.style.top = (top - (newHeight - height) ) + 'px'; }, rightMiddleDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) { @@ -56,9 +60,9 @@ Resizeable = { this.resize(newWidth,-1000); }, - rightLowerDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) { - newWidth = relativeMouseX - left; + rightLowerDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY,ratio) { newHeight = relativeMouseY - top; + newWidth = Math.round(newHeight / ratio); this.resize(newWidth,newHeight); }, @@ -76,26 +80,26 @@ Resizeable = { onResize: function(event) { if(EventStack.getLastEventElement() != null && this.isVisible && this.isEnabled) { - lastEventElement = EventStack.getLastEventElement(); + lastEventElement = EventStack.getLastEventElement(); var relativeMouseX = this.getMousePos(event).x - this.element.getParentLeft(); var relativeMouseY = this.getMousePos(event).y - this.element.getParentTop(); if(Element.hasClassName(lastEventElement,'leftUpperClickBox')) { - this.leftUpperDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY); + this.leftUpperDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY,this.originalHeight/this.originalWidth); } if(Element.hasClassName(lastEventElement,'leftMiddleClickBox')) { this.leftMiddleDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY); } if(Element.hasClassName(lastEventElement,'leftLowerClickBox')) { - this.leftLowerDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY); + this.leftLowerDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY,this.originalHeight/this.originalWidth); } if(Element.hasClassName(lastEventElement,'rightUpperClickBox')) { - this.rightUpperDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY); + this.rightUpperDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY,this.originalHeight/this.originalWidth); } if(Element.hasClassName(lastEventElement,'rightMiddleClickBox')) { this.rightMiddleDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY); } if(Element.hasClassName(lastEventElement,'rightLowerClickBox')) { - this.rightLowerDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY); + this.rightLowerDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY,this.originalHeight/this.originalWidth); } if(Element.hasClassName(lastEventElement,'upperMiddleClickBox')) { this.upperMiddleDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY);