diff --git a/build/concrete.js b/build/concrete.js index 523a0b6..a67c3bf 100644 --- a/build/concrete.js +++ b/build/concrete.js @@ -159,7 +159,9 @@ scene.clear(); this.layers.forEach(function(layer) { - scene.context.drawImage(layer.scene.canvas, 0, 0, layer.width, layer.height); + if (layer.visible) { + scene.context.drawImage(layer.scene.canvas, 0, 0, layer.width, layer.height); + } }); } }; @@ -182,7 +184,7 @@ this.y = 0; this.width = 0; this.height = 0; - + this.visible = true; this.id = idCounter++; this.hit = new Concrete.Hit(); this.scene = new Concrete.Scene(); diff --git a/build/concrete.min.js b/build/concrete.min.js index fe9b73b..9108234 100644 --- a/build/concrete.min.js +++ b/build/concrete.min.js @@ -26,4 +26,4 @@ * 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,n,s,h=this.layers,o=h.length;for(e=o-1;e>=0;e--)if(n=h[e],s=n.hit.getIntersection(t,i),null!==s)return s;return null},getIndex:function(){var i,e=t.viewports,n=e.length,s=0;for(s=0;n>s;s++)if(i=e[s],this.id===i.id)return s;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){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.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 t0&&(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,n=0;for(n=0;e>n;n++)if(t=i[n],this.id===t.id)return n;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,n=this.canvas.toDataURL("image/png");e.onload=function(){e.width=i.width,e.height=i.height,t(e)},e.src=n},download:function(t){this.canvas.toBlob(function(i){var e=document.createElement("a"),n=URL.createObjectURL(i),s=t.fileName||"canvas.png";e.setAttribute("href",n),e.setAttribute("target","_blank"),e.setAttribute("download",s),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,n,s,h,o,r,a;return e=this.context.getImageData(Math.round(t),Math.round(i),1,1).data,n=e[0],h=e[1],s=e[2],o=e[3],r=this.rgbToInt(n,h,s),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}(); \ No newline at end of file +!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 t0&&(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}(); \ No newline at end of file diff --git a/src/concrete.js b/src/concrete.js index f4f249c..4eeede8 100644 --- a/src/concrete.js +++ b/src/concrete.js @@ -131,7 +131,9 @@ scene.clear(); this.layers.forEach(function(layer) { - scene.context.drawImage(layer.scene.canvas, 0, 0, layer.width, layer.height); + if (layer.visible) { + scene.context.drawImage(layer.scene.canvas, 0, 0, layer.width, layer.height); + } }); } }; @@ -154,7 +156,7 @@ this.y = 0; this.width = 0; this.height = 0; - + this.visible = true; this.id = idCounter++; this.hit = new Concrete.Hit(); this.scene = new Concrete.Scene();