From 71cb1430703169fbd0de6a54ad4ed19eaebc5e4e Mon Sep 17 00:00:00 2001 From: Ingo Schommer Date: Sat, 15 Sep 2007 01:31:31 +0000 Subject: [PATCH] mujma: Added exclusive lock on image operation. Starting each operation block others i.e you cannot rotate image when you are cropping area from it. (merged from branches/gsoc) git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@41901 467b73ca-7a2a-4603-9d3b-597d59a354a9 --- javascript/ImageEditor/Crop.js | 67 ++++++++++++++----- javascript/ImageEditor/Effects.js | 29 +++++++- javascript/ImageEditor/ImageTransformation.js | 8 ++- javascript/ImageEditor/Resize.js | 21 ++++-- javascript/ImageEditor/Resizeable.js | 13 +++- 5 files changed, 108 insertions(+), 30 deletions(-) diff --git a/javascript/ImageEditor/Crop.js b/javascript/ImageEditor/Crop.js index f52cb7bf..ff5e1860 100644 --- a/javascript/ImageEditor/Crop.js +++ b/javascript/ImageEditor/Crop.js @@ -20,6 +20,8 @@ var Crop = { this.onCropCancel = Crop.onCropCancel.bind(this); this.doCrop = Crop.doCrop.bind(this); this.setVisible = Crop.setVisible.bind(this); + this.enable = Crop.enable.bind(this); + this.disable = Crop.disable.bind(this); Event.observe('image','load',this.centerCropBox); options = { resizeStop: Crop.resizeStop.bind(this), @@ -31,6 +33,7 @@ var Crop = { Event.observe(this.cropBox,'dblclick',this.onCropStop.bind(this)); this.setListeners(); this.setVisible(false); + this.isEnabled = true; }, resizeStop: function(event) { @@ -88,22 +91,32 @@ var Crop = { }, onCropStop: function(event) { + Element.hide($('cropOk'),$('cropCancel')); this.doCrop(); }, doCrop: function() { - newWidth = this.cropBox.getWidth() - newHeight = this.cropBox.getHeight() ; - startTop = this.cropBox.getTop() ; - startLeft = this.cropBox.getLeft() ; - if(newWidth > 35 && newHeight > 35) { - imageTransformation.crop(startTop,startLeft,newWidth,newHeight); - imageHistory.enable(); - } else { - alert('Crop area too small'); + if(this.isEnabled) { + newWidth = this.cropBox.getWidth() + newHeight = this.cropBox.getHeight() ; + startTop = this.cropBox.getTop() ; + startLeft = this.cropBox.getLeft() ; + if(newWidth > 35 && newHeight > 35) { + imageTransformation.crop(startTop,startLeft,newWidth,newHeight,Crop.cropCallback.bind(this)); + imageHistory.enable(); + } else { + alert('Crop area too small'); + } + this.disable(); } }, + cropCallback: function() { + effects.enableRotate(); + this.enable(); + + }, + setListeners: function() { Event.observe('cropStart','click',this.onCropStart); Event.observe('cropOk','click',this.onCropOk); @@ -111,20 +124,29 @@ var Crop = { }, onCropStart: function() { - this.setVisible(true); - Element.show($('cropOk'),$('cropCancel')); - imageHistory.disable(); + if(this.isEnabled) { + this.setVisible(true); + Element.show($('cropOk'),$('cropCancel')); + imageHistory.disable(); + effects.disableRotate(); + } }, onCropOk: function() { - Element.hide($('cropOk'),$('cropCancel')); - this.doCrop(); + if(this.isEnabled) { + Element.hide($('cropOk'),$('cropCancel')); + this.doCrop(); + effects.disableRotate(); + } }, onCropCancel: function() { - Element.hide($('cropOk'),$('cropCancel')); - this.setVisible(false); - imageHistory.enable(); + if(this.isEnabled) { + Element.hide($('cropOk'),$('cropCancel')); + this.setVisible(false); + imageHistory.enable(); + effects.enableRotate(); + } }, setVisible: function(setVisible) { @@ -137,5 +159,14 @@ var Crop = { } resize.imageContainerResize.setVisible(!setVisible); this.resizeCropBox.setVisible(setVisible); - } + }, + + enable: function() { + this.isEnabled = true; + }, + + disable: function() { + this.isEnabled = false; + } + } \ No newline at end of file diff --git a/javascript/ImageEditor/Effects.js b/javascript/ImageEditor/Effects.js index e1b3df40..d448046e 100644 --- a/javascript/ImageEditor/Effects.js +++ b/javascript/ImageEditor/Effects.js @@ -5,14 +5,37 @@ var Effects = { initialize: function() { this.setListeners = Effects.setListeners.bind(this); this.rotate = Effects.rotate.bind(this); - this.setListeners(); + this.setListeners(); + this.isRotateEnabled = true; + this.enableRotate = Effects.enableRotate.bind(this); + this.disableRotate = Effects.disableRotate.bind(this); }, rotate: function() { - imageTransformation.rotate(90); + if(this.isRotateEnabled) { + resize.imageContainerResize.disable(); + crop.disable(); + imageTransformation.rotate(90,Effects.rotateCallback.bind(this)); + this.isRotateEnabled = false; + } + }, + + rotateCallback: function() { + resize.imageContainerResize.enable(); + crop.enable(); + this.isRotateEnabled = true; }, setListeners: function() { Event.observe('rotateButton','click',this.rotate); - } + }, + + disableRotate: function() { + this.isRotateEnabled = false; + }, + + enableRotate: function() { + this.isRotateEnabled = true; + } + } \ No newline at end of file diff --git a/javascript/ImageEditor/ImageTransformation.js b/javascript/ImageEditor/ImageTransformation.js index 92d3bd24..74447b19 100644 --- a/javascript/ImageEditor/ImageTransformation.js +++ b/javascript/ImageEditor/ImageTransformation.js @@ -37,7 +37,7 @@ var ImageTransformation = { new Ajax.Request('admin/ImageEditor/manipulate', options); }, - rotate: function(angle) { + rotate: function(angle,callback) { var options = { method: 'post', postBody: 'command=rotate&file=' + $('image').src + '&angle=' + angle , @@ -51,7 +51,8 @@ var ImageTransformation = { $('imageContainer').style.width = response.width + 'px'; $('imageContainer').style.height = response.height + 'px'; imageHistory.add('rotate',$('image').src); - resize.imageContainerResize.placeClickBox(); + resize.imageContainerResize.placeClickBox(); + if(callback != null) callback(); } }; imageBox.showIndicator(); @@ -59,7 +60,7 @@ var ImageTransformation = { new Ajax.Request('admin/ImageEditor/manipulate', options); }, - crop: function(top,left,width,height) { + crop: function(top,left,width,height,callback) { var options = { method: 'post', postBody: 'command=crop&file=' + $('image').src + '&top=' + top + '&left=' + left + '&width=' + width + '&height=' + height, @@ -73,6 +74,7 @@ var ImageTransformation = { $('imageContainer').style.height = response.height + 'px'; imageHistory.add('crop',$('image').src); crop.setVisible(false); + if(callback != null) callback(); } }; imageBox.showIndicator(); diff --git a/javascript/ImageEditor/Resize.js b/javascript/ImageEditor/Resize.js index e6d83f9b..2f58bc6a 100644 --- a/javascript/ImageEditor/Resize.js +++ b/javascript/ImageEditor/Resize.js @@ -20,11 +20,22 @@ var Resize = { }, resizeStop: function(event) { - imageElement = $('image'); - EventStack.clearStack(); - if(this.imageContainerResize.originalWidth != imageElement.width || this.imageContainerResize.originalHeight != imageElement.height) { - imageTransformation.resize(imageElement.width,imageElement.height); - } + if(EventStack.getLastEventElement() != null) { + imageElement = $('image'); + EventStack.clearStack(); + if(this.imageContainerResize.originalWidth != imageElement.width || this.imageContainerResize.originalHeight != imageElement.height) { + imageTransformation.resize(imageElement.width,imageElement.height,Resize.resizeCallback.bind(this)); + } + effects.disableRotate(); + crop.disable(); + this.imageContainerResize.disable(); + } + }, + + resizeCallback: function() { + effects.enableRotate(); + crop.enable(); + this.imageContainerResize.enable(); }, onDrag: function() diff --git a/javascript/ImageEditor/Resizeable.js b/javascript/ImageEditor/Resizeable.js index adae5d81..b1d29293 100644 --- a/javascript/ImageEditor/Resizeable.js +++ b/javascript/ImageEditor/Resizeable.js @@ -16,6 +16,7 @@ Resizeable = { this.placeClickBoxOnImageLoad(); this.originalHeight = 0; this.originalWidth = 0; + this.isEnabled = true; }, resizeStart: function(event) { @@ -75,7 +76,7 @@ Resizeable = { }, onResize: function(event) { - if(EventStack.getLastEventElement() != null && this.isVisible) { + if(EventStack.getLastEventElement() != null && this.isVisible && this.isEnabled) { lastEventElement = EventStack.getLastEventElement(); var relativeMouseX = this.getMousePos(event).x - this.element.getParentLeft(); var relativeMouseY = this.getMousePos(event).y - this.element.getParentTop(); @@ -217,6 +218,8 @@ Resizeable = { this.addDraging = Resizeable.addDraging.bind(this); this.setVisible = Resizeable.setVisible.bind(this); this.removeDraging = Resizeable.removeDraging.bind(this); + this.disable = Resizeable.disable.bind(this); + this.enable = Resizeable.enable.bind(this); this.leftUpperDrag = Resizeable.leftUpperDrag.bind(this); this.leftMiddleDrag = Resizeable.leftMiddleDrag.bind(this); @@ -284,5 +287,13 @@ Resizeable = { this.lowerMiddleClickBox); this.removeDraging(); } + }, + + disable: function() { + this.isEnabled = false; + }, + + enable: function() { + this.isEnabled = true; } } \ No newline at end of file