Permalink
Browse files

Add cleaner way to reinitialize caman data when modified by an extern…

…al source. Addresses #74
  • Loading branch information...
1 parent de154ae commit efb29d6ad04bb42fa6eb2d1480ee5decd32e90da @meltingice committed Mar 31, 2013
Showing with 57 additions and 22 deletions.
  1. +7 −5 dist/caman.full.js
  2. +3 −3 dist/caman.full.min.js
  3. +1 −1 dist/caman.full.pack.js
  4. +7 −5 dist/caman.js
  5. +3 −3 dist/caman.min.js
  6. +1 −1 dist/caman.pack.js
  7. +9 −4 src/core/caman.coffee
  8. +26 −0 test/unit/context.coffee
View
@@ -1,4 +1,3 @@
-//@ sourceMappingURL=caman.full.map
// Generated by CoffeeScript 1.6.1
(function() {
var $, Analyze, Blender, Calculate, Caman, CamanParser, Canvas, Convert, Event, Fiber, Filter, IO, Image, Layer, Log, Logger, PixelInfo, Plugin, Renderer, Root, Store, Util, fs, slice, vignetteFilters,
@@ -340,8 +339,7 @@
if (this.image != null) {
this.context.drawImage(this.image, 0, 0, this.image.width, this.image.height, 0, 0, this.preScaledWidth, this.preScaledHeight);
}
- this.imageData = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
- this.pixelData = this.imageData.data;
+ this.reloadCanvasData();
if (Caman.allowRevert) {
this.initializedPixelData = new Uint8Array(this.pixelData.length);
this.originalPixelData = new Uint8Array(this.pixelData.length);
@@ -361,6 +359,11 @@
return this.callback = function() {};
};
+ Caman.prototype.reloadCanvasData = function() {
+ this.imageData = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
+ return this.pixelData = this.imageData.data;
+ };
+
Caman.prototype.resetOriginalPixelData = function() {
var pixel, _i, _len, _ref, _results;
if (!Caman.allowRevert) {
@@ -445,8 +448,7 @@
oldCanvas.parentNode.replaceChild(this.canvas, oldCanvas);
this.width = this.canvas.width;
this.height = this.canvas.height;
- this.imageData = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
- this.pixelData = this.imageData.data;
+ this.reloadCanvasData();
return this.dimensions = {
width: this.canvas.width,
height: this.canvas.height
@@ -27,14 +27,14 @@ if(IO.isRemote(this.image)){this.image.src=IO.proxyUrl(this.image.src);return Lo
return this.finishInit();};Caman.prototype.finishInit=function(){var i,pixel,_i,_len,_ref;if(this.context==null){this.context=this.canvas.getContext('2d');}
this.originalWidth=this.preScaledWidth=this.width=this.canvas.width;this.originalHeight=this.preScaledHeight=this.height=this.canvas.height;this.hiDPIAdjustments();if(!this.hasId()){this.assignId();}
if(this.image!=null){this.context.drawImage(this.image,0,0,this.image.width,this.image.height,0,0,this.preScaledWidth,this.preScaledHeight);}
-this.imageData=this.context.getImageData(0,0,this.canvas.width,this.canvas.height);this.pixelData=this.imageData.data;if(Caman.allowRevert){this.initializedPixelData=new Uint8Array(this.pixelData.length);this.originalPixelData=new Uint8Array(this.pixelData.length);_ref=this.pixelData;for(i=_i=0,_len=_ref.length;_i<_len;i=++_i){pixel=_ref[i];this.initializedPixelData[i]=pixel;this.originalPixelData[i]=pixel;}}
-this.dimensions={width:this.canvas.width,height:this.canvas.height};Store.put(this.id,this);this.callback.call(this,this);return this.callback=function(){};};Caman.prototype.resetOriginalPixelData=function(){var pixel,_i,_len,_ref,_results;if(!Caman.allowRevert){throw"Revert disabled";}
+this.reloadCanvasData();if(Caman.allowRevert){this.initializedPixelData=new Uint8Array(this.pixelData.length);this.originalPixelData=new Uint8Array(this.pixelData.length);_ref=this.pixelData;for(i=_i=0,_len=_ref.length;_i<_len;i=++_i){pixel=_ref[i];this.initializedPixelData[i]=pixel;this.originalPixelData[i]=pixel;}}
+this.dimensions={width:this.canvas.width,height:this.canvas.height};Store.put(this.id,this);this.callback.call(this,this);return this.callback=function(){};};Caman.prototype.reloadCanvasData=function(){this.imageData=this.context.getImageData(0,0,this.canvas.width,this.canvas.height);return this.pixelData=this.imageData.data;};Caman.prototype.resetOriginalPixelData=function(){var pixel,_i,_len,_ref,_results;if(!Caman.allowRevert){throw"Revert disabled";}
this.originalPixelData=new Uint8Array(this.pixelData.length);_ref=this.pixelData;_results=[];for(_i=0,_len=_ref.length;_i<_len;_i++){pixel=_ref[_i];_results.push(this.originalPixelData.push(pixel));}
return _results;};Caman.prototype.hasId=function(){return Caman.getAttrId(this.canvas)!=null;};Caman.prototype.assignId=function(){if(Caman.NodeJS||this.canvas.getAttribute('data-caman-id')){return;}
return this.canvas.setAttribute('data-caman-id',this.id);};Caman.prototype.hiDPIDisabled=function(){return this.canvas.getAttribute('data-caman-hidpi-disabled')!==null;};Caman.prototype.hiDPIAdjustments=function(){var ratio;if(Caman.NodeJS||this.hiDPIDisabled()){return;}
ratio=this.hiDPIRatio();if(ratio!==1){Log.debug("HiDPI ratio = "+ratio);this.scaled=true;this.preScaledWidth=this.canvas.width;this.preScaledHeight=this.canvas.height;this.canvas.width=this.preScaledWidth*ratio;this.canvas.height=this.preScaledHeight*ratio;this.canvas.style.width=""+this.preScaledWidth+"px";this.canvas.style.height=""+this.preScaledHeight+"px";this.context.scale(ratio,ratio);this.width=this.originalWidth=this.canvas.width;return this.height=this.originalHeight=this.canvas.height;}};Caman.prototype.hiDPIRatio=function(){var backingStoreRatio,devicePixelRatio;devicePixelRatio=window.devicePixelRatio||1;backingStoreRatio=this.context.webkitBackingStorePixelRatio||this.context.mozBackingStorePixelRatio||this.context.msBackingStorePixelRatio||this.context.oBackingStorePixelRatio||this.context.backingStorePixelRatio||1;return devicePixelRatio/backingStoreRatio;};Caman.prototype.hiDPICapable=function(){return window.devicePixelRatio!==1;};Caman.prototype.needsHiDPISwap=function(){if(this.hiDPIDisabled()||!this.hiDPICapable()){return false;}
return this.hiDPIReplacement()!==null;};Caman.prototype.hiDPIReplacement=function(){if(this.image==null){return null;}
-return this.image.getAttribute('data-caman-hidpi');};Caman.prototype.replaceCanvas=function(newCanvas){var oldCanvas;oldCanvas=this.canvas;this.canvas=newCanvas;this.context=this.canvas.getContext('2d');oldCanvas.parentNode.replaceChild(this.canvas,oldCanvas);this.width=this.canvas.width;this.height=this.canvas.height;this.imageData=this.context.getImageData(0,0,this.canvas.width,this.canvas.height);this.pixelData=this.imageData.data;return this.dimensions={width:this.canvas.width,height:this.canvas.height};};Caman.prototype.render=function(callback){var _this=this;if(callback==null){callback=function(){};}
+return this.image.getAttribute('data-caman-hidpi');};Caman.prototype.replaceCanvas=function(newCanvas){var oldCanvas;oldCanvas=this.canvas;this.canvas=newCanvas;this.context=this.canvas.getContext('2d');oldCanvas.parentNode.replaceChild(this.canvas,oldCanvas);this.width=this.canvas.width;this.height=this.canvas.height;this.reloadCanvasData();return this.dimensions={width:this.canvas.width,height:this.canvas.height};};Caman.prototype.render=function(callback){var _this=this;if(callback==null){callback=function(){};}
Event.trigger(this,"renderStart");return this.renderer.execute(function(){_this.context.putImageData(_this.imageData,0,0);return callback.call(_this);});};Caman.prototype.revert=function(){var i,pixel,_i,_len,_ref;if(!Caman.allowRevert){throw"Revert disabled";}
_ref=this.originalVisiblePixels();for(i=_i=0,_len=_ref.length;_i<_len;i=++_i){pixel=_ref[i];this.pixelData[i]=pixel;}
return this.context.putImageData(this.imageData,0,0);};Caman.prototype.reset=function(){var canvas,ctx,i,imageData,pixel,pixelData,_i,_len,_ref;canvas=document.createElement('canvas');Util.copyAttributes(this.canvas,canvas);canvas.width=this.originalWidth;canvas.height=this.originalHeight;ctx=canvas.getContext('2d');imageData=ctx.getImageData(0,0,canvas.width,canvas.height);pixelData=imageData.data;_ref=this.initializedPixelData;for(i=_i=0,_len=_ref.length;_i<_len;i=++_i){pixel=_ref[i];pixelData[i]=pixel;}
Oops, something went wrong.
View
@@ -1,4 +1,3 @@
-//@ sourceMappingURL=caman.map
// Generated by CoffeeScript 1.6.1
(function() {
var $, Analyze, Blender, Calculate, Caman, CamanParser, Canvas, Convert, Event, Fiber, Filter, IO, Image, Layer, Log, Logger, PixelInfo, Plugin, Renderer, Root, Store, Util, fs, slice,
@@ -340,8 +339,7 @@
if (this.image != null) {
this.context.drawImage(this.image, 0, 0, this.image.width, this.image.height, 0, 0, this.preScaledWidth, this.preScaledHeight);
}
- this.imageData = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
- this.pixelData = this.imageData.data;
+ this.reloadCanvasData();
if (Caman.allowRevert) {
this.initializedPixelData = new Uint8Array(this.pixelData.length);
this.originalPixelData = new Uint8Array(this.pixelData.length);
@@ -361,6 +359,11 @@
return this.callback = function() {};
};
+ Caman.prototype.reloadCanvasData = function() {
+ this.imageData = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
+ return this.pixelData = this.imageData.data;
+ };
+
Caman.prototype.resetOriginalPixelData = function() {
var pixel, _i, _len, _ref, _results;
if (!Caman.allowRevert) {
@@ -445,8 +448,7 @@
oldCanvas.parentNode.replaceChild(this.canvas, oldCanvas);
this.width = this.canvas.width;
this.height = this.canvas.height;
- this.imageData = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
- this.pixelData = this.imageData.data;
+ this.reloadCanvasData();
return this.dimensions = {
width: this.canvas.width,
height: this.canvas.height
View
@@ -27,14 +27,14 @@ if(IO.isRemote(this.image)){this.image.src=IO.proxyUrl(this.image.src);return Lo
return this.finishInit();};Caman.prototype.finishInit=function(){var i,pixel,_i,_len,_ref;if(this.context==null){this.context=this.canvas.getContext('2d');}
this.originalWidth=this.preScaledWidth=this.width=this.canvas.width;this.originalHeight=this.preScaledHeight=this.height=this.canvas.height;this.hiDPIAdjustments();if(!this.hasId()){this.assignId();}
if(this.image!=null){this.context.drawImage(this.image,0,0,this.image.width,this.image.height,0,0,this.preScaledWidth,this.preScaledHeight);}
-this.imageData=this.context.getImageData(0,0,this.canvas.width,this.canvas.height);this.pixelData=this.imageData.data;if(Caman.allowRevert){this.initializedPixelData=new Uint8Array(this.pixelData.length);this.originalPixelData=new Uint8Array(this.pixelData.length);_ref=this.pixelData;for(i=_i=0,_len=_ref.length;_i<_len;i=++_i){pixel=_ref[i];this.initializedPixelData[i]=pixel;this.originalPixelData[i]=pixel;}}
-this.dimensions={width:this.canvas.width,height:this.canvas.height};Store.put(this.id,this);this.callback.call(this,this);return this.callback=function(){};};Caman.prototype.resetOriginalPixelData=function(){var pixel,_i,_len,_ref,_results;if(!Caman.allowRevert){throw"Revert disabled";}
+this.reloadCanvasData();if(Caman.allowRevert){this.initializedPixelData=new Uint8Array(this.pixelData.length);this.originalPixelData=new Uint8Array(this.pixelData.length);_ref=this.pixelData;for(i=_i=0,_len=_ref.length;_i<_len;i=++_i){pixel=_ref[i];this.initializedPixelData[i]=pixel;this.originalPixelData[i]=pixel;}}
+this.dimensions={width:this.canvas.width,height:this.canvas.height};Store.put(this.id,this);this.callback.call(this,this);return this.callback=function(){};};Caman.prototype.reloadCanvasData=function(){this.imageData=this.context.getImageData(0,0,this.canvas.width,this.canvas.height);return this.pixelData=this.imageData.data;};Caman.prototype.resetOriginalPixelData=function(){var pixel,_i,_len,_ref,_results;if(!Caman.allowRevert){throw"Revert disabled";}
this.originalPixelData=new Uint8Array(this.pixelData.length);_ref=this.pixelData;_results=[];for(_i=0,_len=_ref.length;_i<_len;_i++){pixel=_ref[_i];_results.push(this.originalPixelData.push(pixel));}
return _results;};Caman.prototype.hasId=function(){return Caman.getAttrId(this.canvas)!=null;};Caman.prototype.assignId=function(){if(Caman.NodeJS||this.canvas.getAttribute('data-caman-id')){return;}
return this.canvas.setAttribute('data-caman-id',this.id);};Caman.prototype.hiDPIDisabled=function(){return this.canvas.getAttribute('data-caman-hidpi-disabled')!==null;};Caman.prototype.hiDPIAdjustments=function(){var ratio;if(Caman.NodeJS||this.hiDPIDisabled()){return;}
ratio=this.hiDPIRatio();if(ratio!==1){Log.debug("HiDPI ratio = "+ratio);this.scaled=true;this.preScaledWidth=this.canvas.width;this.preScaledHeight=this.canvas.height;this.canvas.width=this.preScaledWidth*ratio;this.canvas.height=this.preScaledHeight*ratio;this.canvas.style.width=""+this.preScaledWidth+"px";this.canvas.style.height=""+this.preScaledHeight+"px";this.context.scale(ratio,ratio);this.width=this.originalWidth=this.canvas.width;return this.height=this.originalHeight=this.canvas.height;}};Caman.prototype.hiDPIRatio=function(){var backingStoreRatio,devicePixelRatio;devicePixelRatio=window.devicePixelRatio||1;backingStoreRatio=this.context.webkitBackingStorePixelRatio||this.context.mozBackingStorePixelRatio||this.context.msBackingStorePixelRatio||this.context.oBackingStorePixelRatio||this.context.backingStorePixelRatio||1;return devicePixelRatio/backingStoreRatio;};Caman.prototype.hiDPICapable=function(){return window.devicePixelRatio!==1;};Caman.prototype.needsHiDPISwap=function(){if(this.hiDPIDisabled()||!this.hiDPICapable()){return false;}
return this.hiDPIReplacement()!==null;};Caman.prototype.hiDPIReplacement=function(){if(this.image==null){return null;}
-return this.image.getAttribute('data-caman-hidpi');};Caman.prototype.replaceCanvas=function(newCanvas){var oldCanvas;oldCanvas=this.canvas;this.canvas=newCanvas;this.context=this.canvas.getContext('2d');oldCanvas.parentNode.replaceChild(this.canvas,oldCanvas);this.width=this.canvas.width;this.height=this.canvas.height;this.imageData=this.context.getImageData(0,0,this.canvas.width,this.canvas.height);this.pixelData=this.imageData.data;return this.dimensions={width:this.canvas.width,height:this.canvas.height};};Caman.prototype.render=function(callback){var _this=this;if(callback==null){callback=function(){};}
+return this.image.getAttribute('data-caman-hidpi');};Caman.prototype.replaceCanvas=function(newCanvas){var oldCanvas;oldCanvas=this.canvas;this.canvas=newCanvas;this.context=this.canvas.getContext('2d');oldCanvas.parentNode.replaceChild(this.canvas,oldCanvas);this.width=this.canvas.width;this.height=this.canvas.height;this.reloadCanvasData();return this.dimensions={width:this.canvas.width,height:this.canvas.height};};Caman.prototype.render=function(callback){var _this=this;if(callback==null){callback=function(){};}
Event.trigger(this,"renderStart");return this.renderer.execute(function(){_this.context.putImageData(_this.imageData,0,0);return callback.call(_this);});};Caman.prototype.revert=function(){var i,pixel,_i,_len,_ref;if(!Caman.allowRevert){throw"Revert disabled";}
_ref=this.originalVisiblePixels();for(i=_i=0,_len=_ref.length;_i<_len;i=++_i){pixel=_ref[i];this.pixelData[i]=pixel;}
return this.context.putImageData(this.imageData,0,0);};Caman.prototype.reset=function(){var canvas,ctx,i,imageData,pixel,pixelData,_i,_len,_ref;canvas=document.createElement('canvas');Util.copyAttributes(this.canvas,canvas);canvas.width=this.originalWidth;canvas.height=this.originalHeight;ctx=canvas.getContext('2d');imageData=ctx.getImageData(0,0,canvas.width,canvas.height);pixelData=imageData.data;_ref=this.initializedPixelData;for(i=_i=0,_len=_ref.length;_i<_len;i=++_i){pixel=_ref[i];pixelData[i]=pixel;}
View
Oops, something went wrong.
View
@@ -279,8 +279,7 @@ Root.Caman = class Caman
0, 0,
@preScaledWidth, @preScaledHeight
- @imageData = @context.getImageData 0, 0, @canvas.width, @canvas.height
- @pixelData = @imageData.data
+ @reloadCanvasData()
if Caman.allowRevert
@initializedPixelData = new Uint8Array(@pixelData.length)
@@ -302,6 +301,13 @@ Root.Caman = class Caman
# trigger it again.
@callback = ->
+ # If you have a separate context reference to this canvas outside of CamanJS
+ # and you make a change to the canvas outside of CamanJS, you will have to call
+ # this function to update our context reference to include those changes.
+ reloadCanvasData: ->
+ @imageData = @context.getImageData 0, 0, @canvas.width, @canvas.height
+ @pixelData = @imageData.data
+
resetOriginalPixelData: ->
throw "Revert disabled" unless Caman.allowRevert
@@ -369,8 +375,7 @@ Root.Caman = class Caman
@width = @canvas.width
@height = @canvas.height
- @imageData = @context.getImageData 0, 0, @canvas.width, @canvas.height
- @pixelData = @imageData.data
+ @reloadCanvasData()
@dimensions =
width: @canvas.width
@@ -0,0 +1,26 @@
+if exports?
+ {Caman} = require '../../dist/caman.full'
+ {assert} = require 'chai'
+ {greyPath} = require '../ext/grey'
+
+ Canvas = require 'canvas'
+
+describe "Context", ->
+ it "can be updated after external changes", (done) ->
+ caman = Caman greyPath, ->
+ canvas = caman.canvas
+ context = canvas.getContext('2d')
+ context.fillStyle = "rgba(255, 0, 0, 1)"
+ context.fillRect(0, 0, canvas.width, canvas.height)
+
+ imageData = context.getImageData(0, 0, canvas.width, canvas.height)
+ pixelData = imageData.data
+
+ assert pixelData isnt caman.pixelData
+
+ @reloadCanvasData()
+
+ for i in [0...caman.pixelData.length]
+ assert.equal caman.pixelData[i], pixelData[i]
+
+ done()

0 comments on commit efb29d6

Please sign in to comment.