UNPKG

image-nodes

Version:

A library for visual programming of image-processing algorithms on dicom images

1 lines 30.7 kB
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("d3"),require("ml-matrix"),require("events")):"function"==typeof define&&define.amd?define(["d3","ml-matrix","events"],e):"object"==typeof exports?exports.ImageNodes=e(require("d3"),require("ml-matrix"),require("events")):t.ImageNodes=e(t.d3,t["ml-matrix"],t.events)}(window,(function(t,e,n){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var a=e[r]={i:r,l:!1,exports:{}};return t[r].call(a.exports,a,a.exports,n),a.l=!0,a.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var a in t)n.d(r,a,function(e){return t[e]}.bind(null,a));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=3)}([function(e,n){e.exports=t},function(t,n){t.exports=e},function(t,e){t.exports=n},function(t,e,n){"use strict";n.r(e);var r=n(0),a=n(2);function i(t){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function u(t,e){return!e||"object"!==i(e)&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function l(t){return(l=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function c(t,e){return(c=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}var f=new(function(t){function e(){return o(this,e),u(this,l(e).apply(this,arguments))}var n,r,a;return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&c(t,e)}(e,t),n=e,(r=[{key:"setImageLoader",value:function(t){var e=this;this.loader=t,this.loader.on("filesloaded",(function(){e.emit("filesloaded")}))}},{key:"readFile",value:function(t){this.loader.readFile(t)}},{key:"getFiles",value:function(){return this.loader.files}},{key:"getLastestFile",value:function(){var t=this.loader.files;return t[t.length-1]}},{key:"getLatestImage",value:function(){var t=this.loader.files;return t[t.length-1].img.src}}])&&s(n.prototype,r),a&&s(n,a),e}(n.n(a).a));function h(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var d=new(function(){function t(){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.activeNode=null,this.nodes=[]}var e,n,r;return e=t,(n=[{key:"getNodes",value:function(){return this.nodes}},{key:"getViewNodes",value:function(){return this.nodes.filter((function(t){return"View"==t.title}))}},{key:"addNode",value:function(t){this.nodes.push(t)}},{key:"removeNode",value:function(t){t.removeNode();var e=this.nodes.indexOf(t);this.nodes.splice(e,1)}},{key:"update",value:function(){}},{key:"setActiveNode",value:function(t){this.activeNode=t}},{key:"runNodes",value:function(){var t=this.getViewNodes();return this.viewport=t.map((function(t){return t.runNode()})),this.viewport}},{key:"render",value:function(t){this.nodes.forEach((function(e){e.createNode(t)}))}}])&&h(e.prototype,n),r&&h(e,r),t}());window.nodes=d;var p=d;function v(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var g=function(){function t(e,n,r){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.N=r||10,this.width=e,this.height=n,this.dx=this.width/(this.N-1),this.dy=this.height/(this.N-1),this.margin=10}var e,n,r;return e=t,(n=[{key:"next",value:function(){for(var t=this,e=p.getNodes(),n=0;n<this.N;n++)for(var r=0;r<this.N;r++){var a=!1;if(e.forEach((function(e){var i=e.x/t.dx,o=e.y/t.dy,s=(e.x+e.width)/t.dx,u=(e.y+e.height)/t.dy;r<=s&&i<r+1&&n<=u&&o<n+1&&(a=!0)})),!a)return{x:r*this.dx+this.margin,y:n*this.dy+this.margin}}}}])&&v(e.prototype,n),r&&v(e,r),t}();function y(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var m=new(function(){function t(){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.g=null,this.width=60,this.height=30}var e,n,r;return e=t,(n=[{key:"create",value:function(t,e,n,r){var a,i;this.svg=t,this.g=t.append("g"),this.g.attr("transform","translate("+e+","+n+")"),a=this.g.append("rect").attr("x",0).attr("y",0).attr("width",this.width).attr("height",this.height).attr("rx",6).attr("ry",6).attr("fill","#F7F7F7").style("filter","url(#drop-shadow)").on("mouseover",(function(){a.attr("fill","#3B99FC"),i.attr("fill","#EEEEEE")})).on("mouseleave",(function(){a.attr("fill","#F7F7F7"),i.attr("fill","#222222")})).on("click",(function(){void 0!==r&&r()})),i=this.g.append("text").attr("x",this.width/2).attr("y",16).attr("fill","#222222").attr("text-anchor","middle").attr("alignment-baseline","central").style("font-size","12px").text("Delete"),this.handleRemove()}},{key:"handleRemove",value:function(){var t=this;this.svg.on("click",(function(){t.g.remove()}))}}])&&y(e.prototype,n),r&&y(e,r),t}());function w(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var x=function(){function t(e,n){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.node=e,this.options=n,this.createDropdown()}var e,n,r;return e=t,(n=[{key:"createDropdown",value:function(){var t=this,e=this.node,n={showDropdown:!1},r=e.g.append("g");r.attr("transform","translate(20,110)").attr("class","dropdown");var a=r.append("rect").attr("x",0).attr("y",0).attr("rx",6).attr("ry",6).attr("width",100).attr("height",20).style("fill","#FEFEFE").style("stroke","AAAAAA").style("stroke-width",1);r.append("text").attr("class","display-text").attr("x",20).attr("y",14).attr("font-size",10).text("Select Mode"),a.on("mouseover",(function(){a.style("fill","#CECECE")})),a.on("mouseleave",(function(){a.style("fill","#FEFEFE")})),a.on("click",(function(){if(n.showDropdown)r.selectAll(".dropdown-list").remove();else{r.select(".display-text").text("Select Mode");var e=r.append("g").attr("class","dropdown-list").attr("transform","translate(0,20)");e.append("rect").attr("class","list").attr("x",0).attr("y",0).attr("width",100).attr("height",10*t.options.length+20).style("fill","#FEFEFE").style("filter","url(#drop-shadow)");var a=e.selectAll("rect.optionsbox").data(t.options).enter().append("rect").attr("class","optionsbox").attr("x",0).attr("y",(function(t,e){return 20*e})).attr("width",100).attr("height",20).style("fill","#FEFEFE").style("stroke","AAAAAA").style("stroke-width",1);e.selectAll("text").data(t.options).enter().append("text").attr("x",10).attr("y",(function(t,e){return 20*e+15})).text((function(t){return t})).attr("font-size",10),a.on("click",(function(e){console.log(e),t.node.selectedMode=e,r.selectAll(".dropdown-list").remove(),r.select(".display-text").text(e),n.showDropdown=!n.showDropdown}))}n.showDropdown=!n.showDropdown}))}}])&&w(e.prototype,n),r&&w(e,r),t}(),b=n(1);function k(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function O(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function E(t,e,n){return e&&O(t.prototype,e),n&&O(t,n),t}var A=b.inverse,I=function(){function t(){k(this,t)}return E(t,[{key:"linearLeastSquares",value:function(t,e){for(var n,r=0,a=0,i=0,o=0,s=t.length,u=0;u<s;u++)r+=t[u],a+=e[u];r/=s,a/=s;for(u=0;u<s;u++)i+=(t[u]-r)*(e[u]-a),o+=(t[u]-r)*(t[u]-r);return[a-(n=i/o)*r,n]}}]),t}(),N={};N.Exponential={name:"exponential",b:[1,1],f:function(t,e){return e[0]*Math.exp(e[1]*t)},df:[function(t,e){return Math.exp(e[1]*t)},function(t,e){return e[0]*t*Math.exp(e[1]*t)}]},N.BiExponential={name:"biexponential",b:[1,1,1,1],f:function(t,e){return e[0]*Math.exp(e[1]*t)+e[2]*Math.exp(e[3]*t)},df:[function(t,e){return Math.exp(e[1]*t)},function(t,e){return e[0]*t*Math.exp(e[1]*t)},function(t,e){return Math.exp(e[3]*t)},function(t,e){return e[2]*t*Math.exp(e[3]*t)}]};var D=function(){function t(e){k(this,t),this.model=e,this.b=this.model.b.map((function(t){return t})),this.f=this.model.f,this.df=this.model.df,this.damping=1,this.errorTolerance=1e-4,this.gradientErrorTolerance=1e-10,this.gradientMinDifference=1e30,this.maxInterations=100}return E(t,[{key:"fit",value:function(t,e){return this.isValidData(e)&&this.LevenbergMarquardtAlgorithm(t,e),this.b}},{key:"isValidData",value:function(t){return!0}},{key:"Residuals",value:function(t,e,n,r){for(var a=b.Matrix.zeros(t.length,1),i=0;i<t.length;i++)a[i][0]=e[i]-this.f(t[i],r);return a}},{key:"Jacobian",value:function(t){for(var e=t.length,n=this.b.length,r=b.Matrix.zeros(e,n),a=0;a<e;a++)for(var i=0;i<n;i++)r[a][i]=this.df[i](t[a],this.b);return r}},{key:"GaussNewtonAlgorithm",value:function(t,e){var n,r,a,i,o=1,s=[];for(a=this.Residuals(t,e,this.f,this.b),s.push(a.norm());o>this.errorTolerance;){r=(n=this.Jacobian(t)).transpose(),i=(i=A(r.mmul(n))).mmul(r).mmul(a);for(var u=0;u<this.b.length;u++)this.b[u]=this.b[u]+i[u][0];a=this.Residuals(t,e,this.f,this.b),s.push(a.norm());var l=s.length-1;o=Math.abs((s[l]-s[l-1])/s[l-1])}}},{key:"LevenbergMarquardtAlgorithm",value:function(t,e){var n,r,a,i,o,s,u,l,c,f,h,d,p,v,g,y,m,w,x,k=!1,O=!1,E=1,I=1,N=[];for(o=this.Residuals(t,e,this.f,this.b),N.push(o.norm()),y=this.damping,10;I>this.errorTolerance||k&&I>this.gradientErrorTolerance&&!O&&E<this.maxInterations;){a=(r=(n=this.Jacobian(t)).transpose()).mmul(n),i=b.Matrix.mul(a,b.Matrix.eye(a.rows,a.cols)),f=b.Matrix.add(a,b.Matrix.mul(i,y)),f=A(f).mmul(r).mmul(o),h=b.Matrix.add(a,b.Matrix.mul(i,y/10)),h=A(h).mmul(r).mmul(o),p=Array(this.b.length),v=Array(this.b.length);for(var D=0;D<this.b.length;D++)p[D]=this.b[D]+f[D][0],v[D]=this.b[D]+h[D][0];if(s=this.Residuals(t,e,this.f,p),u=this.Residuals(t,e,this.f,v),(m=s.norm())<(w=u.norm())&&m<N[N.length-1])k=!1,c=f,o=s,m;else if(w<m&&w<N[N.length-1])k=!1,c=h,o=u,w,y/=10;else{for(d=h,l=u,x=w;x>N[N.length-1]&&y<this.gradientMinDifference;){y*=10,d=b.Matrix.add(a,b.Matrix.mul(i,y)),d=A(d).mmul(r).mmul(o),g=Array(this.b.length);for(D=0;D<this.b.length;D++)g[D]=this.b[D]+d[D][0];x=(l=this.Residuals(t,e,this.f,g)).norm()}x>=N[N.length-1]&&(O=!0),k=!0,c=d,o=l,x,y=this.damping}for(D=0;D<this.b.length;D++)this.b[D]=this.b[D]+c[D][0];N.push(o.norm());var M=N.length-1;I=Math.abs((N[M]-N[M-1])/N[M-1]),E++}}}]),t}(),M=new(function(){function t(){k(this,t),this.model=N.Exponential}return E(t,[{key:"linearLeastSquares",value:function(t,e){return(new I).linearLeastSquares(t,e)}},{key:"nonLinearLeastSquares",value:function(t,e){return new D(this.model).fit(t,e)}}]),t}());function P(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}new(function(){function t(){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t)}var e,n,r;return e=t,(n=[{key:"getImageData",value:function(t){var e=document.createElement("canvas"),n=e.getContext("2d");return e.width=t.width,e.height=t.height,n.drawImage(t,0,0),n.getImageData(0,0,t.width,t.height)}},{key:"getBlankImageData",value:function(t,e){var n=document.createElement("canvas"),r=n.getContext("2d");return n.width=t,n.height=e,r.getImageData(0,0,t,e)}},{key:"createImg",value:function(t){var e=document.createElement("canvas"),n=e.getContext("2d");e.width=t.width,e.height=t.height,n.putImageData(t,0,0);var r=e.toDataURL(),a=document.createElement("img");return a.src=r,a}},{key:"addImage",value:function(t,e,n){for(var r=0;r<t.data.length;r+=4)n.data[r]=t.data[r]+e.data[r],n.data[r+1]=t.data[r+1]+e.data[r+1],n.data[r+2]=t.data[r+2]+e.data[r+2],n.data[r+3]=255}},{key:"invert",value:function(t,e){for(var n=0;n<t.data.length;n+=4)e.data[n]=255-t.data[n],e.data[n+1]=255-t.data[n+1],e.data[n+2]=255-t.data[n+2],e.data[n+3]=255}},{key:"linearImageMap",value:function(t,e,n){for(var r=t.length,a=e[0].data.length,i=0;i<a;i+=4){for(var o=Array(r),s=0;s<r;s++){var u=e[s].data,l=(u[i]+u[i+1]+u[i+2])/3;o[s]=Math.log(l)}var c=M.linearLeastSquares(t,o);n.data[i]=c[0],n.data[i+1]=c[0],n.data[i+2]=c[0],n.data[i+3]=255}}}])&&P(e.prototype,n),r&&P(e,r),t}());function F(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var L=new(function(){function t(){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.links=[]}var e,n,r;return e=t,(n=[{key:"addLink",value:function(t){this.links.push(t)}},{key:"removeLink",value:function(t){t.removeLink();var e=this.links.indexOf(t);this.links.splice(e,1)}},{key:"update",value:function(){this.links.forEach((function(t){t.updateLink()}))}},{key:"render",value:function(t){this.links.forEach((function(e){e.drawLink(t)}))}}])&&F(e.prototype,n),r&&F(e,r),t}());function j(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var C=function(){function t(e,n,r){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.svg=e,this.start=n,this.end=r,this.name="link-"+L.links.length,this.link=this.drawLink(),L.addLink(this)}var e,n,a;return e=t,(n=[{key:"getInputNode",value:function(){return this.start.node}},{key:"getOutputNode",value:function(){return this.end.node}},{key:"getLinkPoints",value:function(){var t=this.start.node.x+this.start.xOffset,e=this.start.node.y+this.start.yOffset;if(this.end.mouse)n=this.end.mouse[0],r=this.end.mouse[1];else var n=this.end.node.x+this.end.xOffset,r=this.end.node.y+this.end.yOffset;return[[t,e],[(t+n)/2,e],[(t+n)/2,(e+r)/2],[(t+n)/2,r],[n,r]]}},{key:"bezierLine",value:function(){return Object(r.line)().curve(r.curveBasis).x((function(t){return t[0]})).y((function(t){return t[1]}))(this.getLinkPoints())}},{key:"drawLink",value:function(t){var e=this;this.svg=t||this.svg;var n=this.svg.append("path").attr("d",this.bezierLine()).attr("stroke","#0024BA").attr("stroke-width",2).attr("fill","none").attr("class",this.name);return n.on("mouseover",(function(){n.attr("stroke","#0024BA").attr("stroke-width",3)})),n.on("mouseleave",(function(){n.attr("stroke","#0024BA").attr("stroke-width",2)})),n.on("contextmenu",(function(){r.event.stopPropagation(),r.event.preventDefault();var t=Object(r.mouse)(e.svg.node());m.create(e.svg,t[0],t[1],e.removeLink.bind(e))})),n}},{key:"updateLink",value:function(){this.getLinkPoints(),this.link.attr("d",this.bezierLine())}},{key:"removeLink",value:function(){this.svg.selectAll("path."+this.name).remove()}}])&&j(e.prototype,n),a&&j(e,a),t}();function S(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var T=new(function(){function t(){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t)}var e,n,r;return e=t,(n=[{key:"add",value:function(t,e){for(var n=t.pixelData.length,r=Array(n),a=0;a<n;a++)r[a]=t.pixelData[a]+e.pixelData[a];var i=JSON.parse(JSON.stringify(t));return i.pixelData=r,i.dicom.createImg=t.dicom.createImg,i.img=i.dicom.createImg(),i}},{key:"log",value:function(t){for(var e=t.length,n=Array(e),r=0;r<e;r++)n[r]=Math.log(t[r]);return n}},{key:"linearImageMap",value:function(t,e,n){for(var r=t.length,a=e[0].pixelData.length,i=Array(a),o=0;o<a;o++){for(var s=Array(r),u=0;u<r;u++)s[u]=e[u].pixelData[o];s=this.log(s);var l=M.linearLeastSquares(t,s);i[o]=-1/l[1],i[o]=isFinite(i[o])?i[o]:0,i[o]=i[o]<=4096?i[o]:0,i[o]=i[o]>=0?i[o]:0}var c=e[0],f=JSON.parse(JSON.stringify(c));return f.pixelData=i,f.dicom.pixelData=i,f.dicom.createImg=c.dicom.createImg,f.img=f.dicom.createImg(),f}},{key:"nonlinearImageMap",value:function(t,e,n){for(var r=t.length,a=e[0].pixelData.length,i=Array(a),o=0;o<a;o++){for(var s=Array(r),u=0;u<r;u++)s[u]=e[u].pixelData[o];var l=M.nonLinearLeastSquares(t,s);i[o]=-1/l[1],i[o]=isFinite(i[o])?i[o]:0,i[o]=i[o]<=4096?i[o]:0,i[o]=i[o]>=0?i[o]:0}var c=e[0],f=JSON.parse(JSON.stringify(c));return f.pixelData=i,f.dicom.pixelData=i,f.dicom.createImg=c.dicom.createImg,f.img=f.dicom.createImg(),f}}])&&S(e.prototype,n),r&&S(e,r),t}());function q(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var _=new(function(){function t(){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t)}var e,n,r;return e=t,(n=[{key:"runAction",value:function(t,e){var n=this;return{add:function(){return n.runAdd(e)},custom:function(){return n.runCustom(e)},fit:function(){return n.runFit(e)},image:function(){return n.runImage(e)},view:function(){return n.runView(e)}}[t]()}},{key:"runAdd",value:function(t){var e=t.node,n=e.getInputNode(0).runNode(),r=e.getInputNode(1).runNode();return T.add(n,r)}},{key:"runCustom",value:function(t){return null}},{key:"runFit",value:function(t){var e=t.node,n=Array(5);n=e.getInputNode(0).runNode().fileset;var r=[.005,.01,.02,.03,.04];return{"Linear Map":function(){return T.linearImageMap(r,n)},"Nonlinear Map":function(){return T.nonlinearImageMap(r,n)}}[e.selectedMode]()}},{key:"runImage",value:function(t){return t.node.file}},{key:"runView",value:function(t){var e=t.node,n=e.getInputNode(0).runNode(),r=n.dicom.createImg();return r.onload=function(){e.createImg(r.src)},n}}])&&q(e.prototype,n),r&&q(e,r),t}());function B(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var z=function(){function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.node=e,this.createDropdown()}var e,n,r;return e=t,(n=[{key:"createDropdown",value:function(){var t=this.node,e={showDropdown:!1},n=t.g.append("g");n.attr("transform","translate(20,110)").attr("class","dropdown");var r=n.append("rect").attr("x",0).attr("y",0).attr("rx",6).attr("ry",6).attr("width",100).attr("height",20).style("fill","#FEFEFE").style("stroke","AAAAAA").style("stroke-width",1);n.append("text").attr("x",20).attr("y",14).attr("font-size",10).text("Select Image"),r.on("mouseover",(function(){r.style("fill","#CECECE")})),r.on("mouseleave",(function(){r.style("fill","#FEFEFE")})),r.on("click",(function(){if(e.showDropdown)n.selectAll(".dropdown-list").remove();else{var r=f.getFiles(),a=0;r.forEach((function(t){t.index=a++}));var i=n.append("g").attr("class","dropdown-list").attr("transform","translate(0,20)");i.append("rect").attr("class","list").attr("x",0).attr("y",0).attr("width",100).attr("height",50*a+20).style("fill","#FEFEFE").style("filter","url(#drop-shadow)"),i.selectAll("image").data(r).enter().append("image").attr("xlink:href",(function(t){return t.img.src})).attr("x",30).attr("y",(function(t){return 50*t.index+15})).attr("width",40).on("click",(function(r){t.file=r,t.svg.selectAll("."+t.id).append("image").attr("xlink:href",r.img.src).attr("x",t.width/2-20).attr("y",40).attr("width",40),n.selectAll(".dropdown-list").remove(),e.showDropdown=!e.showDropdown}))}e.showDropdown=!e.showDropdown}))}}])&&B(e.prototype,n),r&&B(e,r),t}();function R(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var G=new(function(){function t(){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.ports=[],this.activePort=null}var e,n,r;return e=t,(n=[{key:"clearActivePort",value:function(){this.activePort=null}},{key:"setActivePort",value:function(t){this.activePort=t}}])&&R(e.prototype,n),r&&R(e,r),t}());function J(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var V=function(){function t(e,n){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.name=e.name,this.value=e.value,this.index=n}var e,n,a;return e=t,(n=[{key:"createInputPort",value:function(t,e){var n=this;this.node=t,this.xOffset=0,this.yOffset=50+20*e,this.port=this.node.g.append("g").attr("class","node-input-port"),this.port.append("circle").attr("cx",this.xOffset).attr("cy",this.yOffset).attr("r",4).attr("fill","#0024BA").attr("stroke","#222222").attr("stroke-width",1).attr("cursor","pointer"),this.port.append("text").attr("x",10).attr("y",this.yOffset).attr("fill","#222222").attr("text-anchor","start").attr("alignment-baseline","central").style("font-size","12px").text(this.name),this.port.on("mouseover",(function(){n.onHover()})),this.port.on("mouseleave",(function(){n.offHover()}))}},{key:"createOutputPort",value:function(t,e){var n=this;this.node=t,this.xOffset=t.width,this.yOffset=50+20*(t.inputport.length+e),this.port=t.g.append("g").attr("class","node-output-port"),this.port.append("circle").attr("cx",this.xOffset).attr("cy",this.yOffset).attr("r",4).attr("fill","#0024BA").attr("stroke","#222222").attr("stroke-width",1).attr("class","pointer"),this.port.append("text").attr("x",t.width-10).attr("y",this.yOffset).attr("fill","#222222").attr("text-anchor","end").attr("alignment-baseline","central").style("font-size","12px").text(this.name),this.port.on("mousedown",(function(){t.creatingLink=!0,G.clearActivePort(),t.newlink=new C(t.svg,t.outputport[n.index],{mouse:Object(r.mouse)(t.svg.node())}),t.svg.on("mousemove",(function(){r.event.stopPropagation(),r.event.preventDefault(),t.creatingLink&&(t.newlink.end.mouse=Object(r.mouse)(t.svg.node()),L.update())})),t.svg.on("mouseup",(function(){if(t.creatingLink=!1,null!=G.activePort){t.newlink.end=G.activePort,t.output[n.index].link=t.newlink;var e=t.newlink.end;e.node.input[e.index].link=t.newlink}else L.removeLink(t.newlink);L.update()}))}))}},{key:"onHover",value:function(){this.port.selectAll("circle").attr("r",6),G.setActivePort(this)}},{key:"offHover",value:function(){this.port.selectAll("circle").attr("r",4)}}])&&J(e.prototype,n),a&&J(e,a),t}();function H(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var U=function(){function t(e,n){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.svg=e,this.x=n.x,this.y=n.y,this.width=n.width||140,this.height=n.height||140,this.title=n.title,this.input=n.input,this.output=n.output,this.inputport=null,this.outputport=null,this.file=null,this.img=null,this.isDragged=!1,this.creatingLink=!1,this.portCount=0,this.id="node-"+p.nodes.length,this.createNode(),p.addNode(this)}var e,n,a;return e=t,(n=[{key:"createNode",value:function(t){var e=this;this.svg=t||this.svg,this.g=this.svg.append("g"),this.g.attr("transform","translate("+this.x+","+this.y+")").attr("class",this.id),this.createNodeBox(),this.createTitle(),this.createGrip(),this.createNodeDelete(),this.inputport=this.input.map((function(t,n){return e.createNodeInput(t,n)})),this.outputport=this.output.map((function(t,n){return e.createNodeOutput(t,n)}))}},{key:"createNodeBox",value:function(){var t=this,e=this.g.append("rect").attr("x",0).attr("y",0).attr("width",this.width).attr("height",this.height).attr("rx",6).attr("ry",6).attr("fill","#F7F7F7").style("filter","url(#drop-shadow)").on("contextmenu",(function(){var e=Object(r.mouse)(t.svg.node()),n=p.removeNode.bind(p,t);m.create(t.svg,e[0],e[1],n)}));"Image"==this.title?(new z(this),e.on("dragover",this.nodeDragOver.bind(this)),e.on("drop",this.nodeDrop.bind(this))):"Fit"==this.title&&new x(this,["Linear Map","Nonlinear Map"])}},{key:"createNodeDelete",value:function(){var t=this,e=this.g.append("rect").attr("x",this.width-20).attr("y",12).attr("width",10).attr("height",10).attr("fill","#757575").attr("opacity",0),n=this.g.append("text").attr("x",this.width-20).attr("y",22).attr("fill","#757575").text("x");e.on("mouseover",(function(){n.attr("fill","red")})),e.on("mouseleave",(function(){n.attr("fill","#757575")})),e.on("click",(function(){p.removeNode(t)}))}},{key:"removeNode",value:function(){this.g.remove()}},{key:"nodeDragOver",value:function(){r.event.stopPropagation(),r.event.preventDefault(),r.event.dataTransfer.dropEffect="copy"}},{key:"nodeDrop",value:function(){r.event.stopPropagation(),r.event.preventDefault(),p.setActiveNode(this),f.readFile(r.event)}},{key:"createTitle",value:function(){this.g.append("text").attr("x",this.width/2).attr("y",16).attr("fill","#222222").attr("text-anchor","middle").attr("alignment-baseline","central").style("font-size","18px").text(this.title)}},{key:"createGrip",value:function(){var t=this,e=this.g.append("g");e.attr("transform","translate(10,10)"),[[4,4],[10,4],[4,10],[10,10]].forEach((function(t){e.append("circle").attr("cx",t[0]).attr("cy",t[1]).attr("r",2).attr("fill","#222222").attr("opacity",.5)}));var n=e.append("rect").attr("x",0).attr("y",0).attr("width",14).attr("height",14).attr("fill","#222222").attr("opacity",0).attr("class","grab"),a=e.append("rect").attr("x",40).attr("y",0).attr("width",40).attr("height",14).attr("fill","#222222").attr("opacity",0).attr("class","grab"),i=function(){t.isDragged=!0,t.mouse=Object(r.mouse)(n.node()),t.svg.on("mousemove",(function(){if(t.isDragged){var e=Object(r.mouse)(t.svg.node());t.x=e[0]-t.mouse[0]-10,t.y=e[1]-t.mouse[1]-10,t.g.attr("transform","translate("+t.x+","+t.y+")"),L.update()}})),t.svg.on("mouseup",(function(){t.isDragged=!1})),r.event.preventDefault()};n.on("mousedown",i),a.on("mousedown",i)}},{key:"createNodeInput",value:function(t,e){return(t=new V(t,e)).createInputPort(this,e),t}},{key:"createNodeOutput",value:function(t,e){return(t=new V(t,e)).createOutputPort(this,e),t}},{key:"createImg",value:function(t){this.svg.selectAll("."+this.id).append("image").attr("xlink:href",t).attr("x",this.width/2-20).attr("y",40).attr("width",40)}},{key:"getInputNode",value:function(t){return this.input[t].link.getInputNode()}},{key:"runNode",value:function(){return _.runAction(this.title.toLowerCase(),{node:this})}}])&&H(e.prototype,n),a&&H(e,a),t}();function K(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var Q=new(function(){function t(){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t)}var e,n,r;return e=t,(n=[{key:"createShadowFilter",value:function(t){var e=t.append("defs").append("filter").attr("id","drop-shadow").attr("height","130%");e.append("feGaussianBlur").attr("in","SourceAlpha").attr("stdDeviation",3),e.append("feOffset").attr("dx",2).attr("dy",2).attr("result","offsetBlur"),e.append("feComponentTransfer").append("feFuncA").attr("type","linear").attr("slope",.2);var n=e.append("feMerge");n.append("feMergeNode"),n.append("feMergeNode").attr("in","SourceGraphic")}}])&&K(e.prototype,n),r&&K(e,r),t}());function W(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var X=function(){function t(e,n){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.nodes=p,this.links=L,this.createGraph(e,n)}var e,n,a;return e=t,(n=[{key:"setImageLoader",value:function(t){this.loader=f.setImageLoader(t)}},{key:"createGraph",value:function(t,e){var n=(e=e||{}).width||800,a=e.height||600;this.svg=Object(r.select)(t).append("svg"),this.svg.attr("width",n).attr("height",a).attr("class","svg-chart").on("contextmenu",(function(){r.event.stopPropagation(),r.event.preventDefault()})),Q.createShadowFilter(this.svg),this.grid=new g(n,a,10),p.render(this.svg),L.render(this.svg)}},{key:"addNode",value:function(t){var e,n,r=this.grid.next();"add"==t?(e=[{name:"Image 1",value:null},{name:"Image 2",value:null}],n=[{name:"Image",value:null}],new U(this.svg,{x:r.x,y:r.y,title:"Add",input:e,output:n})):"custom"==t?new U(this.svg,{x:r.x,y:r.y,title:"Custom",input:[],output:[]}):"fit"==t?(e=[{name:"Image Array",value:null}],n=[{name:"Image",value:null}],new U(this.svg,{x:r.x,y:r.y,title:"Fit",input:e,output:n})):"histogram"==t?new U(this.svg,{x:r.x,y:r.y,title:"Histogram",input:[],output:[]}):"image"==t?(n=[{name:"Image",value:null}],new U(this.svg,{x:r.x,y:r.y,title:"Image",input:[],output:n})):"view"==t&&(e=[{name:"Image",value:null}],new U(this.svg,{x:r.x,y:r.y,title:"View",input:e,output:[]}))}},{key:"createLink",value:function(){}},{key:"exampleNetwork",value:function(){var t=new U(this.svg,{x:10,y:10,title:"Image",input:[],output:[{name:"Image",value:null}]}),e=new U(this.svg,{x:10,y:200,title:"Image",input:[],output:[{name:"Image",value:null}]}),n=[{name:"Image 1",value:t},{name:"Image 2",value:e}],r=new U(this.svg,{x:230,y:100,title:"Add",input:n,output:[{name:"Image",value:null}]});new C(this.svg,t.output[0],r.input[0]),new C(this.svg,e.output[0],r.input[1])}},{key:"runGraph",value:function(){p.runNodes()}},{key:"queryGraph",value:function(){return p.viewport}}])&&W(e.prototype,n),a&&W(e,a),t}();console.log("GraphNode -","Version: 0.0.18","Date:Aug 1, 2017");e.default=X}])}));