rasterSweep.min.js

(function(){"use strict";angular.module("rasterSweep",[]).directive("rasterSweep",a).factory("rsHelper",e);e.$inject=[];function e(){var e={recolorBorder:a,clipOverlayImage:t,moveSweeper:r,checkBoundaries:i,getHSLColor:s,getSingleColorPalette:n};return e;function a(e,a,t){var r=s(e,a);t.css("border-color",r)}function t(e,a,t,r,i){var s=i;var n=t[0].width-e-r-a;var o=t[0].height-e-i-a;var d=r;t.css("clip-path","inset("+s+"px "+n+"px "+o+"px "+d+"px)");t.css("opacity","1")}function r(e,a,t){e.css("left",a+"px");e.css("top",t+"px")}function i(e,a,t,r){if(t>e[0].width-a)t=e[0].width-a;if(t<e[0].offsetLeft)t=e[0].offsetLeft;if(r>e[0].height-a)r=e[0].height-a;if(r<e[0].offsetTop)r=e[0].offsetTop}function s(e,a){var t=a*a;var r=e/t;var i=120-r*120;if(i>100){var s=i-100;var n=50+s*3;return"hsl("+i+", 100%, "+n+"%)"}return"hsl("+i+", 100%, "+"50%)"}function n(e,a,t){var r=t*t;var i=a/r;var s=100-i*100;if(s<80){var s=60-(60-s)/4.5;return"hsl("+e+", 100%, "+s+"%)"}return"hsl("+e+", 100%, "+s+"%)"}}a.$inject=["rsHelper","$timeout"];function a(e,a){return{restrict:"E",scope:{base:"@rsBase",overlay:"@rsOverlay"},template:'<div class="raster-wrapper">'+'<canvas class="rs-canvas" id="rasterSweepCanvas"></canvas>'+'<canvas class="rs-canvas" id="diffCanvas"></canvas>'+'<canvas class="rs-canvas" id="rasterSweepCanvasBg"></canvas>'+'<img id="rs-btn-image" ng-src="{{base}}" alt="original" />'+'<img id="rs-top-image" ng-src="{{overlay}}" alt="original" />'+'<div id="rs-glass"></div>'+'<div id="rs-digitiser"></div>'+'<div id="rs-legend">'+'<small class="rs-legend-text">no differences</small>'+'<small class="rs-legend-text" id="rs-legend-many">many differences</small>'+'<div id="rs-legend-gradient"></div>'+"</div>"+"</div>",link:t};function t(a,t,r,i,s){if(!a.base)throw"no base path defined";if(!a.overlay)throw"no overlay path defined";a.$watch("overlay",function(r){console.log("changed overlay path to "+r);var i=a.base;var s=a.overlay;var n=t.find("#rasterSweepCanvas")[0];var o=n.getContext("2d");var d=t.find("#rasterSweepCanvasBg")[0];var v=d.getContext("2d");var c=0;p(i,n,o);p(s,d,v);var h=t.find("#diffCanvas")[0];var l=h.getContext("2d");var f;function g(){h.width=n.width;h.height=n.height;l.putImageData(u(f,o,v),0,0)}function p(e,a,t){var r=new Image;r.src=e;r.onload=function(){a.width=r.width;a.height=r.height;t.drawImage(r,0,0);f=l.createImageData(a.width,a.height);c=c+1;if(c==2){g()}}}function u(e,a,t){var r=a.getImageData(0,0,n.width,n.height),i=t.getImageData(0,0,n.width,n.height);pixelmatch(r.data,i.data,e.data,n.width,n.height,{threshold:1e-5,includeAA:true});return e}function w(e,a,t,r){var i=a+r;var s=t+r;var n=0;for(var o=a;o<i;o++){for(var d=t;d<s;d++){var v=e.getImageData(o,d,1,1).data[0];if(v===0){n+=1}}}return n}var m=t.find("#rs-top-image");var x=t.find("#rs-digitiser");var y=t.find("#rs-glass");var C=t.find("#rs-legend");var I=t.find("#rs-legend-gradient");var S;var b;m.bind("load",function(){function a(e){var a=0;var t=0;while(e&&!isNaN(e.offsetLeft)&&!isNaN(e.offsetTop)){a+=e.offsetLeft-e.scrollLeft;t+=e.offsetTop-e.scrollTop;e=e.offsetParent}return{top:t,left:a}}x.css("width",m[0].width+"px"),x.css("height",m[0].height+"px");C.css("top",m[0].height+20+"px");I.css("height","10px");I.css("top",m[0].height+"10px");t[0].parentElement.style.height=m[0].height+50+10+"px";S=Math.floor(m[0].width/5);b=Math.floor(m[0].width/100);y.css("width",S+"px");y.css("height",S+"px");y.css("border-width",b+"px");m.css("opacity","0");var r=a(x[0]);x[0].onwheel=function(a){a.preventDefault();if(S<m[0].height/3&&S<m[0].width/3&&a.deltaY>0){S=S+10}else if(S>m[0].height/12&&S>m[0].width/12&&a.deltaY<0){S=S-10}y.css("width",S+"px");y.css("height",S+"px");var t=a.pageX-r.left;var i=a.pageY-r.top;e.clipOverlayImage(S,b,m,t,i);var s=w(l,t,i,S);e.recolorBorder(s,S,y)};x[0].onmousemove=function(t){r=a(x[0]);var i=t.pageX-r.left;var s=t.pageY-r.top;e.checkBoundaries(m,S,i,s);e.moveSweeper(y,i,s);e.clipOverlayImage(S,b,m,i,s);var n=w(l,i,s,S);e.recolorBorder(n,S,y)}})})}}})();