From fd8ba77c27b1c802e9d6fe21b49d413b3c6e1d90 Mon Sep 17 00:00:00 2001 From: Ingo Schommer Date: Sun, 16 Sep 2007 00:49:34 +0000 Subject: [PATCH] mujma: BUGFIX: Removed image flickering after operation(crop,rotate,resize), problem still occurs under Safari. (merged from branches/gsoc) git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@41986 467b73ca-7a2a-4603-9d3b-597d59a354a9 --- javascript/ImageEditor/ImageBox.js | 9 ++- javascript/ImageEditor/ImageHistory.js | 55 ++++++++------ javascript/ImageEditor/ImageTransformation.js | 74 +++++++++---------- javascript/ImageEditor/Resize.js | 2 + 4 files changed, 76 insertions(+), 64 deletions(-) diff --git a/javascript/ImageEditor/ImageBox.js b/javascript/ImageEditor/ImageBox.js index a414fb65..97b6a116 100644 --- a/javascript/ImageEditor/ImageBox.js +++ b/javascript/ImageEditor/ImageBox.js @@ -4,6 +4,8 @@ var ImageBox = { initialize: function() { + this.indicatorWidth = 32; + this.indicatorHeight = 32; this.showIndicator = ImageBox.showIndicator.bind(this); this.hideIndicator = ImageBox.hideIndicator.bind(this); this.reCenterIndicator = ImageBox.reCenterIndicator.bind(this); @@ -18,13 +20,14 @@ var ImageBox = { }, showIndicator: function(container) { + Element.show(this.indicator,this.indicatorImage); if(container == null) container = this.imageContainer; this.centerIndicator(container); this.indicator.style.display = 'inline'; }, hideIndicator: function() { - Element.hide(this.indicator); + Element.hide(this.indicator,this.indicatorImage); }, centerIndicator: function(container) { @@ -34,8 +37,8 @@ var ImageBox = { var height = container.getHeight(); var parentTop = container.getParentTop(); var parentLeft = container.getParentLeft(); - this.indicator.style.left = parentLeft + left + width/2 - this.indicatorImage.width/2 + 2 + "px"; - this.indicator.style.top = parentTop + top + height/2 - this.indicatorImage.height/2 + 2 + "px"; + this.indicator.style.left = parentLeft + left + width/2 - this.indicatorWidth/2 + "px"; + this.indicator.style.top = parentTop + top + height/2 - this.indicatorHeight/2 + "px"; }, reCenterIndicator: function() { diff --git a/javascript/ImageEditor/ImageHistory.js b/javascript/ImageEditor/ImageHistory.js index 3babaa7b..ddac0cfa 100644 --- a/javascript/ImageEditor/ImageHistory.js +++ b/javascript/ImageEditor/ImageHistory.js @@ -7,19 +7,23 @@ ImageHistory = { this.history = new Array(); this.historyPointer = -1; this.modifiedOriginalImage = false; + this.isEnabled = true; + this.image = Positioning.addBehaviour($('image')); + this.size = new Array(); + this.fakeImage = $('fakeImg'); + this.image = $('image'); this.undo = ImageHistory.undo.bind(this); this.redo = ImageHistory.redo.bind(this); this.add = ImageHistory.add.bind(this); - this.addLinsteners = ImageHistory.addLinsteners.bind(this); - this.addLinsteners(); + this.addListeners = ImageHistory.addListeners.bind(this); this.operationMade = ImageHistory.operationMade.bind(this); this.isInHistory = ImageHistory.isInHistory.bind(this); + this.onImageLoad = ImageHistory.onImageLoad.bind(this); this.enable = ImageHistory.enable.bind(this); this.disable = ImageHistory.disable.bind(this); this.clear = ImageHistory.clear.bind(this); - this.image = Positioning.addBehaviour($('image')); - this.size = new Array(); + this.addListeners(); }, undo: function() { @@ -30,15 +34,8 @@ ImageHistory = { this.modifiedOriginalImage = true; else this.modifiedOriginalImage = false; } this.image.src = this.history[this.historyPointer-1].fileUrl; - imageBox.checkOutOfDrawingArea(this.size[this.historyPointer-1].width,this.size[this.historyPointer-1].height); - this.image.style.width = this.size[this.historyPointer-1].width + 'px'; - this.image.style.height = this.size[this.historyPointer-1].height + 'px'; - $('imageContainer').style.width = this.size[this.historyPointer-1].width + 'px'; - $('imageContainer').style.height = this.size[this.historyPointer-1].height + 'px'; - resize.imageContainerResize.originalWidth = this.size[this.historyPointer-1].width; - resize.imageContainerResize.originalHeight = this.size[this.historyPointer-1].height; - imageToResize.onImageLoad(); this.historyPointer--; + this.onImageLoad(); } else { alert("No more undo"); } @@ -49,15 +46,8 @@ ImageHistory = { operation = this.history[this.historyPointer+1].operation; if(operation == 'rotate' || operation == 'crop') this.modifiedOriginalImage = true; this.image.src = this.history[this.historyPointer+1].fileUrl; - imageBox.checkOutOfDrawingArea(this.size[this.historyPointer+1].width,this.size[this.historyPointer+1].height); - this.image.style.width = this.size[this.historyPointer+1].width + 'px'; - this.image.style.height = this.size[this.historyPointer+1].height + 'px'; - $('imageContainer').style.width = this.size[this.historyPointer+1].width + 'px'; - $('imageContainer').style.height = this.size[this.historyPointer+1].height + 'px'; - resize.imageContainerResize.originalWidth = this.size[this.historyPointer+1].width; - resize.imageContainerResize.originalHeight = this.size[this.historyPointer+1].height; - imageToResize.onImageLoad(); this.historyPointer++; + this.onImageLoad(); } else { alert("No more redo"); } @@ -75,7 +65,7 @@ ImageHistory = { } }, - addLinsteners: function() { + addListeners: function() { this.undoListener = Event.observe('undoButton','click',this.undo); this.redoListener = Event.observe('redoButton','click',this.redo); }, @@ -90,12 +80,18 @@ ImageHistory = { }, enable: function() { - this.addLinsteners(); + if(!this.isEnabled) { + this.addListeners(); + this.isEnabled = true; + } }, disable: function() { - Event.stopObserving($('undoButton'),'click', this.undo); - Event.stopObserving($('redoButton'),'click', this.redo); + if(this.isEnabled) { + Event.stopObserving($('undoButton'),'click', this.undo); + Event.stopObserving($('redoButton'),'click', this.redo); + this.isEnabled = false; + } }, clear: function() { @@ -112,5 +108,16 @@ ImageHistory = { } } return false; + }, + + onImageLoad: function(event) { + imageBox.checkOutOfDrawingArea(this.size[this.historyPointer].width,this.size[this.historyPointer].height); + this.image.style.width = this.size[this.historyPointer].width + 'px'; + this.image.style.height = this.size[this.historyPointer].height + 'px'; + $('imageContainer').style.width = this.size[this.historyPointer].width + 'px'; + $('imageContainer').style.height = this.size[this.historyPointer].height + 'px'; + resize.imageContainerResize.originalWidth = this.size[this.historyPointer].width; + resize.imageContainerResize.originalHeight = this.size[this.historyPointer].height; + imageToResize.onImageLoad(); } }; \ No newline at end of file diff --git a/javascript/ImageEditor/ImageTransformation.js b/javascript/ImageEditor/ImageTransformation.js index 3f935260..17de60d2 100644 --- a/javascript/ImageEditor/ImageTransformation.js +++ b/javascript/ImageEditor/ImageTransformation.js @@ -3,14 +3,21 @@ */ var ImageTransformation = { initialize: function() { + this.currentOperation = ""; + this.currentResponse = new Array(); + this.currentCallback = null; this.resize = ImageTransformation.resize.bind(this); this.rotate = ImageTransformation.rotate.bind(this); this.crop = ImageTransformation.crop.bind(this); this.save = ImageTransformation.save.bind(this); this.close = ImageTransformation.close.bind(this); + this.onSuccess = ImageTransformation.onSuccess.bind(this); + this.onImageLoad = ImageTransformation.onImageLoad.bind(this); }, resize: function(width,height,callback,imageAlreadyChangedSize) { + this.currentOperation = "resize"; + this.currentCallback = callback; if(imageHistory.modifiedOriginalImage) { fileToResize = $('image').src; } else { @@ -19,63 +26,36 @@ var ImageTransformation = { var options = { method: 'post', postBody: 'command=resize&file=' + fileToResize + '&newImageWidth=' + width + '&newImageHeight=' + height, - onSuccess: function(transport) { - imageBox.hideIndicator(); - response = eval('(' + transport.responseText + ')'); - $('image').src = response.fileName; - $('image').style.width = response.width + 'px'; - $('image').style.height = response.height + 'px'; - $('imageContainer').style.width = response.width + 'px'; - $('imageContainer').style.height = response.height + 'px'; - imageHistory.add('resize',$('image').src); - if(callback != null) callback(); - } - }; + onSuccess: this.onSuccess + }; + if(imageAlreadyChangedSize == false) { imageBox.showIndicator($('mainContainer')); } else { - imageBox.showIndicator(); + imageBox.showIndicator(); } new Ajax.Request('admin/ImageEditor/manipulate', options); }, rotate: function(angle,callback) { + this.currentOperation = "rotate"; + this.currentCallback = callback; var options = { method: 'post', postBody: 'command=rotate&file=' + $('image').src + '&angle=' + angle , - onSuccess: function(transport) { - imageBox.hideIndicator(); - response = eval('(' + transport.responseText + ')'); - imageBox.checkOutOfDrawingArea(response.width,response.height); - $('image').src = response.fileName; - $('image').style.width = response.width + 'px'; - $('image').style.height = response.height + 'px'; - $('imageContainer').style.width = response.width + 'px'; - $('imageContainer').style.height = response.height + 'px'; - imageHistory.add('rotate',$('image').src); - if(callback != null) callback(); - } + onSuccess: this.onSuccess }; imageBox.showIndicator(); - new Ajax.Request('admin/ImageEditor/manipulate', options); }, crop: function(top,left,width,height,callback) { + this.currentOperation = "crop"; + this.currentCallback = callback; var options = { method: 'post', postBody: 'command=crop&file=' + $('image').src + '&top=' + top + '&left=' + left + '&width=' + width + '&height=' + height, - onSuccess: function(transport) { - imageBox.hideIndicator(); - response = eval('(' + transport.responseText + ')'); - $('image').src = response.fileName; - $('image').style.width = response.width + 'px'; - $('image').style.height = response.height + 'px'; - $('imageContainer').style.width = response.width + 'px'; - $('imageContainer').style.height = response.height + 'px'; - if(callback != null) callback(); - imageHistory.add('crop',$('image').src); - } + onSuccess: this.onSuccess }; imageBox.showIndicator(); new Ajax.Request('admin/ImageEditor/manipulate', options); @@ -103,6 +83,26 @@ var ImageTransformation = { } }; new Ajax.Request('admin/ImageEditor/close', options); + }, + + onSuccess: function(transport) { + this.currentResponse = eval('(' + transport.responseText + ')'); + $('fakeImg').src = this.currentResponse.fileName; + Event.observe('fakeImg','load',this.onImageLoad); + }, + + onImageLoad: function(event) { + Event.stopObserving('fakeImg','load', this.onImageLoad); + $('image').src = this.currentResponse.fileName; + imageBox.hideIndicator(); + resize.imageContainerResize.originalWidth = this.currentResponse.width; + resize.imageContainerResize.originalHeight = this.currentResponse.height; + $('imageContainer').style.height = this.currentResponse.height + 'px'; + $('imageContainer').style.width = this.currentResponse.width + 'px'; + $('image').style.height = this.currentResponse.height + 'px'; + $('image').style.width = this.currentResponse.width + 'px'; + imageHistory.add(this.currentOperation,$('image').src); + if(this.currentCallback != null) this.currentCallback(); } } diff --git a/javascript/ImageEditor/Resize.js b/javascript/ImageEditor/Resize.js index 7b54297d..1dbc9d59 100644 --- a/javascript/ImageEditor/Resize.js +++ b/javascript/ImageEditor/Resize.js @@ -25,6 +25,7 @@ var Resize = { EventStack.clearStack(); if(this.imageContainerResize.isEnabled) { if(this.imageContainerResize.originalWidth != imageElement.width || this.imageContainerResize.originalHeight != imageElement.height) { + $('imageContainer').style.backgroundImage = 'url("")'; imageTransformation.resize(imageElement.width,imageElement.height,Resize.resizeCallback.bind(this)); effects.disableRotate(); crop.disable(); @@ -36,6 +37,7 @@ var Resize = { }, resizeCallback: function() { + $('imageContainer').style.backgroundImage = 'url("' + $('image').src + '")'; }, onDrag: function()