brainsprite.min.js

function displayFloat(a,e){var t=parseFloat(a).toFixed(e);return-1===t.indexOf(".")?t+".":t.replace(/0+$/,"")}function initBrain(a){var e=Object.assign({},{smooth:!1,flagValue:!1,colorBackground:"#000000",flagCoordinates:!1,origin:{X:0,Y:0,Z:0},voxelSize:1,affine:!1,heightColorBar:.04,sizeFont:.075,colorFont:"#FFFFFF",nbDecimals:3,crosshair:!1,colorCrosshair:"#0000FF",sizeCrosshair:.9,title:!1,numSlice:!1,onclick:""},a);return"boolean"==typeof e.affine&&!1===e.affine&&(e.affine=[[e.voxelSize,0,0,-e.origin.X],[0,e.voxelSize,0,-e.origin.Y],[0,0,e.voxelSize,-e.origin.Z],[0,0,0,1]]),e.flagCoordinates?e.spaceFont=.1:e.spaceFont=0,e.coordinatesSlice={X:0,Y:0,Z:0},e.widthCanvas={X:0,Y:0,Z:0,max:0},e.heightCanvas={X:0,Y:0,Z:0,max:0},e}function initCanvas(a,e){return a.canvas=document.getElementById(e),a.context=a.canvas.getContext("2d"),a.context.imageSmoothingEnabled=a.smooth,a.canvasY=document.createElement("canvas"),a.contextY=a.canvasY.getContext("2d"),a.canvasZ=document.createElement("canvas"),a.contextZ=a.canvasZ.getContext("2d"),a.canvasRead=document.createElement("canvas"),a.contextRead=a.canvasRead.getContext("2d"),a.canvasRead.width=1,a.canvasRead.height=1,a.planes={},a.planes.canvasMaster=document.createElement("canvas"),a.planes.contextMaster=a.planes.canvasMaster.getContext("2d"),a}function initSprite(a,e,t){return a.sprite=document.getElementById(e),a.nbCol=a.sprite.width/t.Y,a.nbRow=a.sprite.height/t.Z,a.nbSlice={X:void 0!==t.X?t.X:a.nbCol*a.nbRow,Y:t.Y,Z:t.Z},!1===a.numSlice&&(a.numSlice={X:Math.floor(a.nbSlice.X/2),Y:Math.floor(a.nbSlice.Y/2),Z:Math.floor(a.nbSlice.Z/2)}),a}function initOverlay(a,e,t){return a.overlay.opacity=void 0!==a.overlay.opacity?a.overlay.opacity:1,a.overlay.sprite=document.getElementById(e),a.overlay.nbCol=a.overlay.sprite.width/t.Y,a.overlay.nbRow=a.overlay.sprite.height/t.Z,a.overlay.nbSlice={X:void 0!==t.X?t.X:a.overlay.nbCol*a.overlay.nbRow,Y:t.Y,Z:t.Z},a}function initColorMap(a){return a.hide=void 0!==a.hide&&a.hide,a.img=document.getElementById(a.img),a.canvas=document.createElement("canvas"),a.context=a.canvas.getContext("2d"),a.canvas.width=a.img.width,a.canvas.height=a.img.height,a.context.drawImage(a.img,0,0,a.img.width,a.img.height,0,0,a.img.width,a.img.height),a}function brainsprite(a){let e=initBrain(a);e=initCanvas(e,a.canvas),e=initSprite(e,a.sprite,a.nbSlice),a.overlay&&(e=initOverlay(e,a.overlay.sprite,a.overlay.nbSlice)),a.colorMap&&(e.colorMap=initColorMap(a.colorMap));let t=function(){const a={};if(e.overlay&&!e.nanValue)try{a.XW=Math.round(e.numSlice.X%e.nbCol),a.XH=Math.round((e.numSlice.X-a.XW)/e.nbCol),e.contextRead.clearRect(0,0,1,1),e.contextRead.drawImage(e.overlay.sprite,a.XW*e.nbSlice.Y+e.numSlice.Y,a.XH*e.nbSlice.Z+e.nbSlice.Z-e.numSlice.Z-1,1,1,0,0,1,1);const t=e.contextRead.getImageData(0,0,1,1).data;0===t[3]?e.voxelValue=NaN:e.voxelValue=function(a,e){if(!e)return NaN;let t=NaN,n=1/0;const i=e.canvas.width,l=e.context.getImageData(0,0,i,1).data;for(let e=0;e<i;e++){const i=Math.abs(l[4*e]-a[0])+Math.abs(l[4*e+1]-a[1])+Math.abs(l[4*e+2]-a[2]);i<n&&(t=e,n=i)}return t*(e.max-e.min)/(i-1)+e.min}(t,e.colorMap)}catch(a){console.warn(a.message),e.nanValue=!0,e.voxelValue=NaN}else e.voxelValue=NaN};const n=[0,0,0];let i=function(){!function(a,e,t){for(let n=0;n<3;++n)a[n]=t[0]*e[n][0]+t[1]*e[n][1]+t[2]*e[n][2]+t[3]*e[n][3]}(n,e.affine,[e.numSlice.X+1,e.numSlice.Y+1,e.numSlice.Z+1,1]),e.coordinatesSlice.X=n[0],e.coordinatesSlice.Y=n[1],e.coordinatesSlice.Z=n[2]};return e.init=function(){let a=e.nbSlice.X,n=e.nbSlice.Y,l=e.nbSlice.Z;e.resize(),e.planes.canvasMaster.width=e.sprite.width,e.planes.canvasMaster.height=e.sprite.height,e.planes.contextMaster.globalAlpha=1,e.planes.contextMaster.drawImage(e.sprite,0,0,e.sprite.width,e.sprite.height,0,0,e.sprite.width,e.sprite.height),e.overlay&&(e.planes.contextMaster.globalAlpha=e.overlay.opacity,e.planes.contextMaster.drawImage(e.overlay.sprite,0,0,e.overlay.sprite.width,e.overlay.sprite.height,0,0,e.sprite.width,e.sprite.height)),e.planes.canvasX=document.createElement("canvas"),e.planes.contextX=e.planes.canvasX.getContext("2d"),e.planes.canvasX.width=n,e.planes.canvasX.height=l,e.planes.canvasY=document.createElement("canvas"),e.planes.contextY=e.planes.canvasY.getContext("2d"),e.planes.canvasY.width=a,e.planes.canvasY.height=l,e.planes.canvasZ=document.createElement("canvas"),e.planes.contextZ=e.planes.canvasZ.getContext("2d"),e.planes.canvasZ.width=a,e.planes.canvasZ.height=n,e.planes.contextZ.rotate(-Math.PI/2),e.planes.contextZ.translate(-n,0),t(),i(),e.numSlice.X=Math.round(e.numSlice.X),e.numSlice.Y=Math.round(e.numSlice.Y),e.numSlice.Z=Math.round(e.numSlice.Z)},e.resize=function(){let a=e.canvas.parentElement.clientWidth,t=e.nbSlice.X,n=e.nbSlice.Y,i=e.nbSlice.Z;const l=Math.floor(a*(n/(2*t+n))),o=Math.floor(a*(t/(2*t+n))),c=Math.floor(a*(t/(2*t+n)));if(l===e.widthCanvas.X&&o===e.widthCanvas.Y&&c===e.widthCanvas.Z)return!1;e.widthCanvas.X=l,e.widthCanvas.Y=o,e.widthCanvas.Z=c,e.widthCanvas.max=Math.max(l,o,c),e.heightCanvas.X=Math.floor(e.widthCanvas.X*i/n),e.heightCanvas.Y=Math.floor(e.widthCanvas.Y*i/t),e.heightCanvas.Z=Math.floor(e.widthCanvas.Z*n/t),e.heightCanvas.max=Math.max(e.heightCanvas.X,e.heightCanvas.Y,e.heightCanvas.Z);let s=e.widthCanvas.X+e.widthCanvas.Y+e.widthCanvas.Z;return e.canvas.width!==s&&(e.canvas.width=s,e.canvas.height=Math.round((1+e.spaceFont)*e.heightCanvas.max),e.context.imageSmoothingEnabled=e.smooth),e.sizeFontPixels=Math.round(e.sizeFont*e.heightCanvas.max),e.context.font=e.sizeFontPixels+"px Arial",!0},e.draw=function(a,t){let n,i,l,o={},c=Math.ceil((1-e.sizeCrosshair)*e.nbSlice.X/2),s=Math.ceil((1-e.sizeCrosshair)*e.nbSlice.Y/2),h=Math.ceil((1-e.sizeCrosshair)*e.nbSlice.Z/2),r=e.nbSlice.Y,d=e.nbSlice.Z;switch(t){case"X":if(o.XW=e.numSlice.X%e.nbCol,o.XH=(e.numSlice.X-o.XW)/e.nbCol,e.planes.contextX.drawImage(e.planes.canvasMaster,o.XW*r,o.XH*d,r,d,0,0,r,d),e.crosshair&&(e.planes.contextX.fillStyle=e.colorCrosshair,e.planes.contextX.fillRect(e.numSlice.Y,h,1,d-2*h),e.planes.contextX.fillRect(s,d-e.numSlice.Z-1,r-2*s,1)),e.context.fillStyle=e.colorBackground,e.context.fillRect(0,0,e.widthCanvas.X,e.canvas.height),e.context.drawImage(e.planes.canvasX,0,0,r,d,0,(e.heightCanvas.max-e.heightCanvas.X)/2,e.widthCanvas.X,e.heightCanvas.X),e.title&&(e.context.fillStyle=e.colorFont,e.context.fillText(e.title,Math.round(e.widthCanvas.X/10),Math.round(e.heightCanvas.max*e.heightColorBar+e.sizeFontPixels/4))),e.flagValue){const a=isNaN(e.voxelValue)?"no value":"value = "+displayFloat(e.voxelValue,e.nbDecimals);e.context.fillStyle=e.colorFont,e.context.fillText(a,Math.round(e.widthCanvas.X/10),Math.round(e.heightCanvas.max*e.heightColorBar*2+3/4*e.sizeFontPixels))}e.flagCoordinates&&(n="x = "+Math.round(e.coordinatesSlice.X),i=e.context.measureText(n).width,e.context.fillStyle=e.colorFont,e.context.fillText(n,e.widthCanvas.X/2-i/2,Math.round(e.canvas.height-e.sizeFontPixels/2)));break;case"Y":for(e.context.fillStyle=e.colorBackground,e.context.fillRect(e.widthCanvas.X,0,e.widthCanvas.Y,e.canvas.height),l=0;l<e.nbSlice.X;l++){let a=l%e.nbCol,t=(l-a)/e.nbCol;e.planes.contextY.drawImage(e.planes.canvasMaster,a*e.nbSlice.Y+e.numSlice.Y,t*e.nbSlice.Z,1,e.nbSlice.Z,l,0,1,e.nbSlice.Z)}if(e.crosshair&&(e.planes.contextY.fillStyle=e.colorCrosshair,e.planes.contextY.fillRect(e.numSlice.X,h,1,e.nbSlice.Z-2*h),e.planes.contextY.fillRect(c,e.nbSlice.Z-e.numSlice.Z-1,e.nbSlice.X-2*c,1)),e.context.drawImage(e.planes.canvasY,0,0,e.nbSlice.X,e.nbSlice.Z,e.widthCanvas.X,(e.heightCanvas.max-e.heightCanvas.Y)/2,e.widthCanvas.Y,e.heightCanvas.Y),e.colorMap&&!e.colorMap.hide){e.context.drawImage(e.colorMap.img,0,0,e.colorMap.img.width,1,Math.round(e.widthCanvas.X+.2*e.widthCanvas.Y),Math.round(e.heightCanvas.max*e.heightColorBar/2),Math.round(.6*e.widthCanvas.Y),Math.round(e.heightCanvas.max*e.heightColorBar)),e.context.fillStyle=e.colorFont;const a=displayFloat(e.colorMap.min,e.nbDecimals),t=displayFloat(e.colorMap.max,e.nbDecimals);e.context.fillText(a,e.widthCanvas.X+.2*e.widthCanvas.Y-e.context.measureText(a).width/2,Math.round(e.heightCanvas.max*e.heightColorBar*2+3/4*e.sizeFontPixels)),e.context.fillText(t,e.widthCanvas.X+.8*e.widthCanvas.Y-e.context.measureText(t).width/2,Math.round(e.heightCanvas.max*e.heightColorBar*2+3/4*e.sizeFontPixels))}e.flagCoordinates&&(e.context.font=e.sizeFontPixels+"px Arial",e.context.fillStyle=e.colorFont,n="y = "+Math.round(e.coordinatesSlice.Y),i=e.context.measureText(n).width,e.context.fillText(n,e.widthCanvas.X+e.widthCanvas.Y/2-i/2,Math.round(e.canvas.height-e.sizeFontPixels/2)));break;case"Z":for(e.context.fillStyle=e.colorBackground,e.context.fillRect(e.widthCanvas.X+e.widthCanvas.Y,0,e.widthCanvas.Z,e.canvas.height),l=0;l<e.nbSlice.X;l++){let a=l%e.nbCol,t=(l-a)/e.nbCol;e.planes.contextZ.drawImage(e.planes.canvasMaster,a*e.nbSlice.Y,t*e.nbSlice.Z+e.nbSlice.Z-e.numSlice.Z-1,e.nbSlice.Y,1,0,l,e.nbSlice.Y,1)}e.crosshair&&(e.planes.contextZ.fillStyle=e.colorCrosshair,e.planes.contextZ.fillRect(s,e.numSlice.X,e.nbSlice.Y-2*s,1),e.planes.contextZ.fillRect(e.numSlice.Y,c,1,e.nbSlice.X-2*c)),e.context.drawImage(e.planes.canvasZ,0,0,e.nbSlice.X,e.nbSlice.Y,e.widthCanvas.X+e.widthCanvas.Y,(e.heightCanvas.max-e.heightCanvas.Z)/2,e.widthCanvas.Z,e.heightCanvas.Z),e.flagCoordinates&&(n="z = "+Math.round(e.coordinatesSlice.Z),i=e.context.measureText(n).width,e.context.fillStyle=e.colorFont,e.context.fillText(n,e.widthCanvas.X+e.widthCanvas.Y+e.widthCanvas.Z/2-i/2,Math.round(e.canvas.height-e.sizeFontPixels/2)))}},e.clickBrain=function(a){let n,l,o=e.canvas.getBoundingClientRect(),c=a.clientX-o.left,s=a.clientY-o.top;if(c<e.widthCanvas.X)n=Math.round((e.nbSlice.Y-1)*(c/e.widthCanvas.X)),l=Math.round((e.nbSlice.Z-1)*((e.heightCanvas.max+e.heightCanvas.X)/2-s)/e.heightCanvas.X),e.numSlice.Y=Math.max(Math.min(n,e.nbSlice.Y-1),0),e.numSlice.Z=Math.max(Math.min(l,e.nbSlice.Z-1),0);else if(c<e.widthCanvas.X+e.widthCanvas.Y){c-=e.widthCanvas.X;let a=Math.round((e.nbSlice.X-1)*(c/e.widthCanvas.Y)),t=Math.round((e.nbSlice.Z-1)*((e.heightCanvas.max+e.heightCanvas.X)/2-s)/e.heightCanvas.X);e.numSlice.X=Math.max(Math.min(a,e.nbSlice.X-1),0),e.numSlice.Z=Math.max(Math.min(t,e.nbSlice.Z-1),0)}else{c=c-e.widthCanvas.X-e.widthCanvas.Y;let a=Math.round((e.nbSlice.X-1)*(c/e.widthCanvas.Z)),t=Math.round((e.nbSlice.Y-1)*((e.heightCanvas.max+e.heightCanvas.Z)/2-s)/e.heightCanvas.Z);e.numSlice.X=Math.max(Math.min(a,e.nbSlice.X-1),0),e.numSlice.Y=Math.max(Math.min(t,e.nbSlice.Y-1),0)}t(),i(),e.drawAll(),e.onclick&&e.onclick(a)},e.drawAll=function(){e.draw(e.numSlice.X,"X"),e.draw(e.numSlice.Y,"Y"),e.draw(e.numSlice.Z,"Z")},e.canvas.addEventListener("click",e.clickBrain,!1),e.canvas.addEventListener("mousedown",(function(){e.canvas.addEventListener("mousemove",e.clickBrain,!1)}),!1),e.canvas.addEventListener("mouseup",(function(){e.canvas.removeEventListener("mousemove",e.clickBrain,!1)}),!1),e.sprite.addEventListener("load",(function(){e.init(),e.drawAll()})),e.overlay&&e.overlay.sprite.addEventListener("load",(function(){e.init(),e.drawAll()})),e.init(),e.drawAll(),window.addEventListener("resize",(function(){e.resize()&&e.drawAll()})),e}