concrete.min.js

/*
 * Concrete v2.0.0
 * A lightweight Html5 Canvas framework that enables hit detection, layering, multi buffering, 
 * pixel ratio management, exports, and image downloads
 * Release Date: 7-26-2017
 * https://github.com/ericdrowell/concrete
 * Licensed under the MIT or GPL Version 2 licenses.
 *
 * Copyright (C) 2017 Eric Rowell @ericdrowell
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */
!function(){var t={},i=0;t.pixelRatio=function(){return window&&window.navigator&&window.navigator.userAgent&&!/PhantomJS/.test(window.navigator.userAgent)?2:1}(),t.viewports=[],t.Viewport=function(e){e||(e={}),this.container=e.container,this.layers=[],this.id=i++,this.scene=new t.Scene,this.setSize(e.width||0,e.height||0),e.container.innerHTML="",e.container.appendChild(this.scene.canvas),t.viewports.push(this)},t.Viewport.prototype={add:function(t){return this.layers.push(t),t.setSize(t.width||this.width,t.height||this.height),t.viewport=this,this},setSize:function(t,i){return this.width=t,this.height=i,this.scene.setSize(t,i),this},getIntersection:function(t,i){var e,s,n,h=this.layers,o=h.length;for(e=o-1;e>=0;e--)if(s=h[e],n=s.hit.getIntersection(t,i),null!==n)return n;return null},getIndex:function(){var i,e=t.viewports,s=e.length,n=0;for(n=0;s>n;n++)if(i=e[n],this.id===i.id)return n;return null},destroy:function(){this.layers.forEach(function(t){t.destroy()}),this.container.innerHTML="",t.viewports.splice(this.getIndex(),1)},render:function(){var t=this.scene;t.clear(),this.layers.forEach(function(i){i.visible&&t.context.drawImage(i.scene.canvas,0,0,i.width,i.height)})}},t.Layer=function(e){e||(e={}),this.x=0,this.y=0,this.width=0,this.height=0,this.visible=!0,this.id=i++,this.hit=new t.Hit,this.scene=new t.Scene,e.x&&e.y&&this.setPosition(e.x,e.y),e.width&&e.height&&this.setSize(e.width,e.height)},t.Layer.prototype={setPosition:function(t,i){return this.x=t,this.y=i,this},setSize:function(t,i){return this.width=t,this.height=i,this.scene.setSize(t,i),this.hit.setSize(t,i),this},moveUp:function(){var t=this.getIndex(),i=this.viewport,e=i.layers;return t<e.length-1&&(e[t]=e[t+1],e[t+1]=this),this},moveDown:function(){var t=this.getIndex(),i=this.viewport,e=i.layers;return t>0&&(e[t]=e[t-1],e[t-1]=this),this},moveToTop:function(){var t=this.getIndex(),i=this.viewport,e=i.layers;e.splice(t,1),e.push(this)},moveToBottom:function(){var t=this.getIndex(),i=this.viewport,e=i.layers;return e.splice(t,1),e.unshift(this),this},getIndex:function(){var t,i=this.viewport.layers,e=i.length,s=0;for(s=0;e>s;s++)if(t=i[s],this.id===t.id)return s;return null},destroy:function(){this.viewport.layers.splice(this.getIndex(),1)}},t.Scene=function(e){e||(e={}),this.width=0,this.height=0,this.pixelRatio=e.pixelRatio||t.pixelRatio,this.id=i++,this.canvas=document.createElement("canvas"),this.canvas.className="concrete-scene-canvas",this.canvas.style.display="inline-block",this.context=this.canvas.getContext("2d"),e.width&&e.height&&this.setSize(e.width,e.height)},t.Scene.prototype={setSize:function(t,e){return this.width=t,this.height=e,this.id=i++,this.canvas.width=t*this.pixelRatio,this.canvas.style.width=t+"px",this.canvas.height=e*this.pixelRatio,this.canvas.style.height=e+"px",1!==this.pixelRatio&&this.context.scale(this.pixelRatio,this.pixelRatio),this},clear:function(){return this.context.clearRect(0,0,this.width*this.pixelRatio,this.height*this.pixelRatio),this},toImage:function(t){var i=this,e=new Image,s=this.canvas.toDataURL("image/png");e.onload=function(){e.width=i.width,e.height=i.height,t(e)},e.src=s},download:function(t){this.canvas.toBlob(function(i){var e=document.createElement("a"),s=URL.createObjectURL(i),n=t.fileName||"canvas.png";e.setAttribute("href",s),e.setAttribute("target","_blank"),e.setAttribute("download",n),document.createEvent?(evtObj=document.createEvent("MouseEvents"),evtObj.initEvent("click",!0,!0),e.dispatchEvent(evtObj)):e.click&&e.click()})}},t.Hit=function(t){t||(t={}),this.width=0,this.height=0,this.canvas=document.createElement("canvas"),this.canvas.className="concrete-hit-canvas",this.canvas.style.display="none",this.canvas.style.position="relative",this.context=this.canvas.getContext("2d"),this.hitColorIndex=0,this.keyToColor={},this.colorToKey={},t.width&&t.height&&this.setSize(t.width,t.height)},t.Hit.prototype={setSize:function(t,i){return this.width=t,this.height=i,this.canvas.width=t,this.canvas.style.width=t+"px",this.canvas.height=i,this.canvas.style.height=i+"px",this},clear:function(){return this.context.clearRect(0,0,this.width,this.height),this},getIntersection:function(t,i){var e,s,n,h,o,r,a;return e=this.context.getImageData(Math.round(t),Math.round(i),1,1).data,s=e[0],h=e[1],n=e[2],o=e[3],r=this.rgbToInt(s,h,n),a=this.colorToKey[r],void 0!==a&&255===o?a:null},registerKey:function(t){var i;return this.keyToColor[t]||(i=this.hitColorIndex++,this.colorToKey[i]=t,this.keyToColor[t]=i),this},rgbToInt:function(t,i,e){return(t<<16)+(i<<8)+e},getColorFromKey:function(t){var i;for(this.registerKey(t),i=this.keyToColor[t].toString(16);i.length<6;)i="0"+i;return"#"+i}},window.Concrete=t}();