aurum-canvas - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

dist/components/canvas.js

		@@ -1,5 +0,4 @@
		import { Aurum, DataSource, ArrayDataSource, DuplexDataSource, aurumElementModelIdentitiy, CancellationToken } from 'aurumjs';
		import { Aurum, DataSource, ArrayDataSource, DuplexDataSource, aurumElementModelIdentitiy, CancellationToken, EventEmitter } from 'aurumjs';
		import { ComponentType } from './component_model';
		import { stateSymbol } from './drawables/state';
		import { EventEmitter } from 'aurumjs/dist/utilities/event_emitter';
		const renderCache = new WeakMap();
		@@ -6,0 +5,0 @@ export function AurumCanvas(props, children, api) {

package.json

		{
		"name": "aurum-canvas",
		"version": "0.0.4",
		"version": "0.0.5",
		"description": "Aurum style scene graph management for rendering in canvas",
		@@ -40,4 +40,4 @@ "main": "prebuilt/aurum-canvas.js",
		"dependencies": {
		"aurumjs": "^0.5.2"
		"aurumjs": "^0.5.3"
		}
		}

prebuilt_minified/aurum-canvas.js

		@@ -1,2 +0,2 @@
		var e,t=require("aurumjs/dist/utilities/event_emitter"),n=require("aurumjs");!function(e){e[e.RECTANGLE=0]="RECTANGLE",e[e.ELIPSE=1]="ELIPSE",e[e.LINE=2]="LINE",e[e.TEXT=3]="TEXT",e[e.IMAGE=4]="IMAGE",e[e.GROUP=5]="GROUP",e[e.STATE=6]="STATE",e[e.PATH=7]="PATH"}(e\|\|(e={}));var r=Symbol("state"),i=new WeakMap;function o(e,t,n,r){for(var i,o={idle:!0,x:0,y:0},l=!0,s=function(){var t,n=u[c],r=a(e[n]),s=null===(i=e.animationStates)\|\|void 0===i?void 0:i.find(function(e){return null!=e[n]});s?(t=s.transitionTime?Math.min(1,(Date.now()-e.animationTime)/a(s.transitionTime)):1,o[n]=r+(s[n]-r)t,t<1&&(l=!1)):o[n]=r},c=0,u=t;c<u.length;c+=1)s();return o.x+=n,o.y+=r,"tx"in o&&(o.tx+=n),"ty"in o&&(o.ty+=r),o.idle=l,o}function a(e){return e instanceof n.DataSource?e.value:e}function l(e,t){e.update(t.reduce(function(e,t){return"string"==typeof t?""+e+t:t.value?""+e+t.value:e},""))}exports.AurumCanvas=function(l,s,c){var u,d=c.prerender(s),f=new n.CancellationToken,p=new t.EventEmitter,y=new t.EventEmitter,v=new t.EventEmitter;return n.Aurum.factory("canvas",{onAttach:function(e){!function(e,t,i,o){i.registerDomEvent(e,"mousemove",function(e){p.fire(e)}),i.registerDomEvent(e,"mousedown",function(e){v.fire(e)}),i.registerDomEvent(e,"mouseup",function(e){y.fire(e)}),function e(t,i,o,l,s,c){for(var u=function(){var o=f[d];if(o instanceof n.ArrayDataSource\|\|o instanceof n.DataSource\|\|o instanceof n.DuplexDataSource)o.listen(function(){S(t,c)});else if(o[r]){if(!l)throw new Error("Cannot use <State> nodes at root level");l.animations.push(o)}else{var u=function(e){if("onMouseUp"!==e)if("onMouseDown"!==e){if(o[e]instanceof n.DataSource){var r=o[e].value,i=void 0;if("state"===e){var l=a(o[e]);i=l,o.animationStates=o.animations.filter(function(e){return e.id===l}),o.animationTime=Date.now()}o[e].listen(function(n){r!==n&&(r=n,"state"===e?i!==n&&(i=n,o.animationStates=o.animations.filter(function(e){return e.id===n}),o.animationTime=Date.now(),S(t,c)):S(t,c))},s)}}else v.subscribe(function(e){h(e,o)&&o.onMouseDown(e,o)});else y.subscribe(function(e){h(e,o)&&o.onMouseUp(e,o)})};for(var p in o)u(p);e(t,i,o.children,o,s,c)}},d=0,f=o;d<f.length;d+=1)u()}(e,t,t,void 0,i,o)}(e,d,f,c.prerender),m(e,d,c.prerender)},onDetach:function(){f.cancel()},class:l.class,width:l.width,height:l.height});function h(t,n){if(n.renderedState)switch(n.type){case e.IMAGE:case e.RECTANGLE:case e.TEXT:return t.offsetX>=n.renderedState.x&&t.offsetY>=n.renderedState.y&&t.offsetX<=n.renderedState.x+n.renderedState.width&&t.offsetY<=n.renderedState.y+n.renderedState.height}}function S(e,t){u\|\|(u=requestAnimationFrame(function(){u=void 0,e.isConnected&&m(e,d,t)}))}function m(e,t,n){var r=e.getContext("2d");r.clearRect(0,0,e.width,e.height);for(var i=0,o=t;i<o.length;i+=1)g(r,o[i],0,0,n)}function g(t,l,s,c,u){if(Array.isArray(l))for(var d=0,f=l;d<f.length;d+=1)g(t,f[d],s,c,u);else if(!l[r])if(l[n.aurumElementModelIdentitiy]&&(i.has(l)\|\|i.set(l,u(l)),l=i.get(l)),l instanceof n.ArrayDataSource)for(var p=0,y=l.getData();p<y.length;p+=1)g(t,y[p],c,c,u);else if(l instanceof n.DataSource\|\|l instanceof n.DuplexDataSource)g(t,l.value,c,c,u);else{var v;switch(t.save(),l.type){case e.PATH:v=function(e,t,n,r){var i,a=o(t,["x","y","opacity","strokeColor","fillColor","path","lineWidth"],n,r),l=a.x,s=a.y,c=a.idle,u=a.fillColor,d=a.strokeColor,f=a.opacity,p=a.path,y=a.lineWidth;return t.renderedState=a,e.globalAlpha=f,(u\|\|d)&&(e.lineWidth=y,i=new Path2D(p)),t.fillColor&&(e.translate(l,s),e.fillStyle=u,e.fill(i),e.translate(-l,-s)),t.strokeColor&&(e.translate(l,s),e.strokeStyle=d,e.stroke(i),e.translate(-l,-s)),t.clip&&(e.translate(l,s),e.clip(i),e.translate(-l,-s)),c}(t,l,s,c);break;case e.RECTANGLE:v=function(e,t,n,r){var i=o(t,["x","y","width","height","opacity","strokeColor","fillColor"],n,r),a=i.x,l=i.y,s=i.width,c=i.height,u=i.idle,d=i.fillColor,f=i.strokeColor,p=i.opacity;return t.renderedState=i,e.globalAlpha=p,d&&(e.fillStyle=d,e.fillRect(a,l,s,c)),f&&(e.strokeStyle=f,e.strokeRect(a,l,s,c)),t.clip&&(e.beginPath(),e.rect(a,l,s,c),e.clip()),u}(t,l,s,c);break;case e.TEXT:v=function(e,t,n,r){var i=o(t,["x","y","width","height","font","fontSize","opacity","strokeColor","fillColor","text"],n,r),a=i.x,l=i.y,s=i.idle,c=i.fontSize,u=i.font,d=i.fillColor,f=i.strokeColor,p=i.opacity,y=i.text;return t.renderedState=i,e.globalAlpha=p,e.font=c+"px "+(null!=u?u:"Arial"),d&&(e.fillStyle=d,e.fillText(y,a,l)),f&&(e.strokeStyle=f,e.strokeText(y,a,l)),s}(t,l,s,c);break;case e.LINE:v=function(e,t,n,r){var i=o(t,["x","y","opacity","strokeColor","fillColor","tx","ty","lineWidth"],n,r),a=i.x,l=i.y,s=i.idle,c=i.fillColor,u=i.strokeColor,d=i.opacity,f=i.tx,p=i.ty,y=i.lineWidth;return t.renderedState=i,e.globalAlpha=d,(c\|\|u)&&(e.beginPath(),e.moveTo(a,l),e.lineTo(f,p),e.lineWidth=y),t.fillColor&&(e.fillStyle=c,e.fill()),t.strokeColor&&(e.strokeStyle=u,e.stroke()),t.clip&&e.clip(),s}(t,l,s,c);break;case e.ELIPSE:v=function(e,t,n,r){var i=o(t,["x","y","opacity","strokeColor","fillColor","rotation","rx","ry","startAngle","endAngle"],n,r),a=i.x,l=i.y,s=i.idle,c=i.fillColor,u=i.strokeColor,d=i.opacity,f=i.rx,p=i.ry,y=i.rotation,v=i.startAngle,h=i.endAngle;return t.renderedState=i,e.globalAlpha=d,(c\|\|u)&&(e.beginPath(),e.ellipse(a,l,f,p,y,null!=v?v:0,null!=h?h:2Math.PI)),c&&(e.fillStyle=c,e.fill()),t.strokeColor&&(e.strokeStyle=u,e.stroke()),t.clip&&e.clip(),s}(t,l,s,c)}v\|\|S(t.canvas,u);for(var h=0,m=l.children;h<m.length;h+=1)g(t,m[h],a(l.x)+s,a(l.y)+c,u);t.restore()}}},exports.AurumRectangle=function(t,n,r){var i,o=r.prerender(n);return Object.assign(Object.assign({},t),{opacity:null!==(i=t.opacity)&&void 0!==i?i:1,renderedState:void 0,children:o,animations:[],type:e.RECTANGLE})},exports.AurumText=function(t,r,i){for(var o,a=i.prerender(r),s=new n.DataSource(""),c=0,u=a;c<u.length;c+=1){var d=u[c];d instanceof n.DataSource&&d.unique().listen(function(e){l(s,a)})}return l(s,a),Object.assign(Object.assign({},t),{opacity:null!==(o=t.opacity)&&void 0!==o?o:1,renderedState:void 0,text:s,children:[],animations:[],type:e.TEXT})},exports.AurumLine=function(t,n,r){var i,o,a=r.prerender(n);return Object.assign(Object.assign({},t),{opacity:null!==(i=t.opacity)&&void 0!==i?i:1,lineWidth:null!==(o=t.lineWidth)&&void 0!==o?o:1,renderedState:void 0,children:a,animations:[],type:e.LINE})},exports.AurumElipse=function(t,n,r){var i,o=r.prerender(n);return Object.assign(Object.assign({},t),{opacity:null!==(i=t.opacity)&&void 0!==i?i:1,renderedState:void 0,children:o,animations:[],type:e.ELIPSE})},exports.AurumGroup=function(t,n,r){var i=r.prerender(n);return Object.assign(Object.assign({},t),{renderedState:void 0,children:i,animations:[],type:e.GROUP})},exports.AurumPath=function(t,n,r){var i,o=r.prerender(n);return Object.assign(Object.assign({},t),{opacity:null!==(i=t.opacity)&&void 0!==i?i:1,renderedState:void 0,children:o,animations:[],type:e.PATH})},exports.stateSymbol=r,exports.State=function(t,n,i){var o,a=i.prerender(n);return Object.assign(Object.assign(((o={})[r]=!0,o.x=void 0,o.y=void 0,o),t),{renderedState:void 0,animations:[],children:a,type:e.STATE})};
		var e,t=require("aurumjs");!function(e){e[e.RECTANGLE=0]="RECTANGLE",e[e.ELIPSE=1]="ELIPSE",e[e.LINE=2]="LINE",e[e.TEXT=3]="TEXT",e[e.IMAGE=4]="IMAGE",e[e.GROUP=5]="GROUP",e[e.STATE=6]="STATE",e[e.PATH=7]="PATH"}(e\|\|(e={}));var n=Symbol("state"),r=new WeakMap;function i(e,t,n,r){for(var i,a={idle:!0,x:0,y:0},l=!0,s=function(){var t,n=u[c],r=o(e[n]),s=null===(i=e.animationStates)\|\|void 0===i?void 0:i.find(function(e){return null!=e[n]});s?(t=s.transitionTime?Math.min(1,(Date.now()-e.animationTime)/o(s.transitionTime)):1,a[n]=r+(s[n]-r)t,t<1&&(l=!1)):a[n]=r},c=0,u=t;c<u.length;c+=1)s();return a.x+=n,a.y+=r,"tx"in a&&(a.tx+=n),"ty"in a&&(a.ty+=r),a.idle=l,a}function o(e){return e instanceof t.DataSource?e.value:e}function a(e,t){e.update(t.reduce(function(e,t){return"string"==typeof t?""+e+t:t.value?""+e+t.value:e},""))}exports.AurumCanvas=function(a,l,s){var c,u=s.prerender(l),f=new t.CancellationToken,d=new t.EventEmitter,p=new t.EventEmitter,y=new t.EventEmitter;return t.Aurum.factory("canvas",{onAttach:function(e){!function(e,r,i,a){i.registerDomEvent(e,"mousemove",function(e){d.fire(e)}),i.registerDomEvent(e,"mousedown",function(e){y.fire(e)}),i.registerDomEvent(e,"mouseup",function(e){p.fire(e)}),function e(r,i,a,l,s,c){for(var u=function(){var a=d[f];if(a instanceof t.ArrayDataSource\|\|a instanceof t.DataSource\|\|a instanceof t.DuplexDataSource)a.listen(function(){h(r,c)});else if(a[n]){if(!l)throw new Error("Cannot use <State> nodes at root level");l.animations.push(a)}else{var u=function(e){if("onMouseUp"!==e)if("onMouseDown"!==e){if(a[e]instanceof t.DataSource){var n=a[e].value,i=void 0;if("state"===e){var l=o(a[e]);i=l,a.animationStates=a.animations.filter(function(e){return e.id===l}),a.animationTime=Date.now()}a[e].listen(function(t){n!==t&&(n=t,"state"===e?i!==t&&(i=t,a.animationStates=a.animations.filter(function(e){return e.id===t}),a.animationTime=Date.now(),h(r,c)):h(r,c))},s)}}else y.subscribe(function(e){v(e,a)&&a.onMouseDown(e,a)});else p.subscribe(function(e){v(e,a)&&a.onMouseUp(e,a)})};for(var S in a)u(S);e(r,i,a.children,a,s,c)}},f=0,d=a;f<d.length;f+=1)u()}(e,r,r,void 0,i,a)}(e,u,f,s.prerender),S(e,u,s.prerender)},onDetach:function(){f.cancel()},class:a.class,width:a.width,height:a.height});function v(t,n){if(n.renderedState)switch(n.type){case e.IMAGE:case e.RECTANGLE:case e.TEXT:return t.offsetX>=n.renderedState.x&&t.offsetY>=n.renderedState.y&&t.offsetX<=n.renderedState.x+n.renderedState.width&&t.offsetY<=n.renderedState.y+n.renderedState.height}}function h(e,t){c\|\|(c=requestAnimationFrame(function(){c=void 0,e.isConnected&&S(e,u,t)}))}function S(e,t,n){var r=e.getContext("2d");r.clearRect(0,0,e.width,e.height);for(var i=0,o=t;i<o.length;i+=1)g(r,o[i],0,0,n)}function g(a,l,s,c,u){if(Array.isArray(l))for(var f=0,d=l;f<d.length;f+=1)g(a,d[f],s,c,u);else if(!l[n])if(l[t.aurumElementModelIdentitiy]&&(r.has(l)\|\|r.set(l,u(l)),l=r.get(l)),l instanceof t.ArrayDataSource)for(var p=0,y=l.getData();p<y.length;p+=1)g(a,y[p],c,c,u);else if(l instanceof t.DataSource\|\|l instanceof t.DuplexDataSource)g(a,l.value,c,c,u);else{var v;switch(a.save(),l.type){case e.PATH:v=function(e,t,n,r){var o,a=i(t,["x","y","opacity","strokeColor","fillColor","path","lineWidth"],n,r),l=a.x,s=a.y,c=a.idle,u=a.fillColor,f=a.strokeColor,d=a.opacity,p=a.path,y=a.lineWidth;return t.renderedState=a,e.globalAlpha=d,(u\|\|f)&&(e.lineWidth=y,o=new Path2D(p)),t.fillColor&&(e.translate(l,s),e.fillStyle=u,e.fill(o),e.translate(-l,-s)),t.strokeColor&&(e.translate(l,s),e.strokeStyle=f,e.stroke(o),e.translate(-l,-s)),t.clip&&(e.translate(l,s),e.clip(o),e.translate(-l,-s)),c}(a,l,s,c);break;case e.RECTANGLE:v=function(e,t,n,r){var o=i(t,["x","y","width","height","opacity","strokeColor","fillColor"],n,r),a=o.x,l=o.y,s=o.width,c=o.height,u=o.idle,f=o.fillColor,d=o.strokeColor,p=o.opacity;return t.renderedState=o,e.globalAlpha=p,f&&(e.fillStyle=f,e.fillRect(a,l,s,c)),d&&(e.strokeStyle=d,e.strokeRect(a,l,s,c)),t.clip&&(e.beginPath(),e.rect(a,l,s,c),e.clip()),u}(a,l,s,c);break;case e.TEXT:v=function(e,t,n,r){var o=i(t,["x","y","width","height","font","fontSize","opacity","strokeColor","fillColor","text"],n,r),a=o.x,l=o.y,s=o.idle,c=o.fontSize,u=o.font,f=o.fillColor,d=o.strokeColor,p=o.opacity,y=o.text;return t.renderedState=o,e.globalAlpha=p,e.font=c+"px "+(null!=u?u:"Arial"),f&&(e.fillStyle=f,e.fillText(y,a,l)),d&&(e.strokeStyle=d,e.strokeText(y,a,l)),s}(a,l,s,c);break;case e.LINE:v=function(e,t,n,r){var o=i(t,["x","y","opacity","strokeColor","fillColor","tx","ty","lineWidth"],n,r),a=o.x,l=o.y,s=o.idle,c=o.fillColor,u=o.strokeColor,f=o.opacity,d=o.tx,p=o.ty,y=o.lineWidth;return t.renderedState=o,e.globalAlpha=f,(c\|\|u)&&(e.beginPath(),e.moveTo(a,l),e.lineTo(d,p),e.lineWidth=y),t.fillColor&&(e.fillStyle=c,e.fill()),t.strokeColor&&(e.strokeStyle=u,e.stroke()),t.clip&&e.clip(),s}(a,l,s,c);break;case e.ELIPSE:v=function(e,t,n,r){var o=i(t,["x","y","opacity","strokeColor","fillColor","rotation","rx","ry","startAngle","endAngle"],n,r),a=o.x,l=o.y,s=o.idle,c=o.fillColor,u=o.strokeColor,f=o.opacity,d=o.rx,p=o.ry,y=o.rotation,v=o.startAngle,h=o.endAngle;return t.renderedState=o,e.globalAlpha=f,(c\|\|u)&&(e.beginPath(),e.ellipse(a,l,d,p,y,null!=v?v:0,null!=h?h:2Math.PI)),c&&(e.fillStyle=c,e.fill()),t.strokeColor&&(e.strokeStyle=u,e.stroke()),t.clip&&e.clip(),s}(a,l,s,c)}v\|\|h(a.canvas,u);for(var S=0,m=l.children;S<m.length;S+=1)g(a,m[S],o(l.x)+s,o(l.y)+c,u);a.restore()}}},exports.AurumRectangle=function(t,n,r){var i,o=r.prerender(n);return Object.assign(Object.assign({},t),{opacity:null!==(i=t.opacity)&&void 0!==i?i:1,renderedState:void 0,children:o,animations:[],type:e.RECTANGLE})},exports.AurumText=function(n,r,i){for(var o,l=i.prerender(r),s=new t.DataSource(""),c=0,u=l;c<u.length;c+=1){var f=u[c];f instanceof t.DataSource&&f.unique().listen(function(e){a(s,l)})}return a(s,l),Object.assign(Object.assign({},n),{opacity:null!==(o=n.opacity)&&void 0!==o?o:1,renderedState:void 0,text:s,children:[],animations:[],type:e.TEXT})},exports.AurumLine=function(t,n,r){var i,o,a=r.prerender(n);return Object.assign(Object.assign({},t),{opacity:null!==(i=t.opacity)&&void 0!==i?i:1,lineWidth:null!==(o=t.lineWidth)&&void 0!==o?o:1,renderedState:void 0,children:a,animations:[],type:e.LINE})},exports.AurumElipse=function(t,n,r){var i,o=r.prerender(n);return Object.assign(Object.assign({},t),{opacity:null!==(i=t.opacity)&&void 0!==i?i:1,renderedState:void 0,children:o,animations:[],type:e.ELIPSE})},exports.AurumGroup=function(t,n,r){var i=r.prerender(n);return Object.assign(Object.assign({},t),{renderedState:void 0,children:i,animations:[],type:e.GROUP})},exports.AurumPath=function(t,n,r){var i,o=r.prerender(n);return Object.assign(Object.assign({},t),{opacity:null!==(i=t.opacity)&&void 0!==i?i:1,renderedState:void 0,children:o,animations:[],type:e.PATH})},exports.stateSymbol=n,exports.State=function(t,r,i){var o,a=i.prerender(r);return Object.assign(Object.assign(((o={})[n]=!0,o.x=void 0,o.y=void 0,o),t),{renderedState:void 0,animations:[],children:a,type:e.STATE})};
		//# sourceMappingURL=aurum-canvas.js.map

prebuilt_minified/aurum-canvas.umd.js

		@@ -1,2 +0,2 @@
		!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("aurumjs/dist/utilities/event_emitter"),require("aurumjs")):"function"==typeof define&&define.amd?define(["exports","aurumjs/dist/utilities/event_emitter","aurumjs"],t):t(e["aurum-canvas"]={},e.event_emitter,e.aurumjs)}(this,function(e,t,n){var i;!function(e){e[e.RECTANGLE=0]="RECTANGLE",e[e.ELIPSE=1]="ELIPSE",e[e.LINE=2]="LINE",e[e.TEXT=3]="TEXT",e[e.IMAGE=4]="IMAGE",e[e.GROUP=5]="GROUP",e[e.STATE=6]="STATE",e[e.PATH=7]="PATH"}(i\|\|(i={}));var r=Symbol("state"),o=new WeakMap;function a(e,t,n,i){for(var r,o={idle:!0,x:0,y:0},a=!0,s=function(){var t,n=u[c],i=l(e[n]),s=null===(r=e.animationStates)\|\|void 0===r?void 0:r.find(function(e){return null!=e[n]});s?(t=s.transitionTime?Math.min(1,(Date.now()-e.animationTime)/l(s.transitionTime)):1,o[n]=i+(s[n]-i)t,t<1&&(a=!1)):o[n]=i},c=0,u=t;c<u.length;c+=1)s();return o.x+=n,o.y+=i,"tx"in o&&(o.tx+=n),"ty"in o&&(o.ty+=i),o.idle=a,o}function l(e){return e instanceof n.DataSource?e.value:e}function s(e,t){e.update(t.reduce(function(e,t){return"string"==typeof t?""+e+t:t.value?""+e+t.value:e},""))}e.AurumCanvas=function(e,s,c){var u,f=c.prerender(s),d=new n.CancellationToken,p=new t.EventEmitter,y=new t.EventEmitter,v=new t.EventEmitter;return n.Aurum.factory("canvas",{onAttach:function(e){!function(e,t,i,o){i.registerDomEvent(e,"mousemove",function(e){p.fire(e)}),i.registerDomEvent(e,"mousedown",function(e){v.fire(e)}),i.registerDomEvent(e,"mouseup",function(e){y.fire(e)}),function e(t,i,o,a,s,c){for(var u=function(){var o=d[f];if(o instanceof n.ArrayDataSource\|\|o instanceof n.DataSource\|\|o instanceof n.DuplexDataSource)o.listen(function(){m(t,c)});else if(o[r]){if(!a)throw new Error("Cannot use <State> nodes at root level");a.animations.push(o)}else{var u=function(e){if("onMouseUp"!==e)if("onMouseDown"!==e){if(o[e]instanceof n.DataSource){var i=o[e].value,r=void 0;if("state"===e){var a=l(o[e]);r=a,o.animationStates=o.animations.filter(function(e){return e.id===a}),o.animationTime=Date.now()}o[e].listen(function(n){i!==n&&(i=n,"state"===e?r!==n&&(r=n,o.animationStates=o.animations.filter(function(e){return e.id===n}),o.animationTime=Date.now(),m(t,c)):m(t,c))},s)}}else v.subscribe(function(e){h(e,o)&&o.onMouseDown(e,o)});else y.subscribe(function(e){h(e,o)&&o.onMouseUp(e,o)})};for(var p in o)u(p);e(t,i,o.children,o,s,c)}},f=0,d=o;f<d.length;f+=1)u()}(e,t,t,void 0,i,o)}(e,f,d,c.prerender),S(e,f,c.prerender)},onDetach:function(){d.cancel()},class:e.class,width:e.width,height:e.height});function h(e,t){if(t.renderedState)switch(t.type){case i.IMAGE:case i.RECTANGLE:case i.TEXT:return e.offsetX>=t.renderedState.x&&e.offsetY>=t.renderedState.y&&e.offsetX<=t.renderedState.x+t.renderedState.width&&e.offsetY<=t.renderedState.y+t.renderedState.height}}function m(e,t){u\|\|(u=requestAnimationFrame(function(){u=void 0,e.isConnected&&S(e,f,t)}))}function S(e,t,n){var i=e.getContext("2d");i.clearRect(0,0,e.width,e.height);for(var r=0,o=t;r<o.length;r+=1)g(i,o[r],0,0,n)}function g(e,t,s,c,u){if(Array.isArray(t))for(var f=0,d=t;f<d.length;f+=1)g(e,d[f],s,c,u);else if(!t[r])if(t[n.aurumElementModelIdentitiy]&&(o.has(t)\|\|o.set(t,u(t)),t=o.get(t)),t instanceof n.ArrayDataSource)for(var p=0,y=t.getData();p<y.length;p+=1)g(e,y[p],c,c,u);else if(t instanceof n.DataSource\|\|t instanceof n.DuplexDataSource)g(e,t.value,c,c,u);else{var v;switch(e.save(),t.type){case i.PATH:v=function(e,t,n,i){var r,o=a(t,["x","y","opacity","strokeColor","fillColor","path","lineWidth"],n,i),l=o.x,s=o.y,c=o.idle,u=o.fillColor,f=o.strokeColor,d=o.opacity,p=o.path,y=o.lineWidth;return t.renderedState=o,e.globalAlpha=d,(u\|\|f)&&(e.lineWidth=y,r=new Path2D(p)),t.fillColor&&(e.translate(l,s),e.fillStyle=u,e.fill(r),e.translate(-l,-s)),t.strokeColor&&(e.translate(l,s),e.strokeStyle=f,e.stroke(r),e.translate(-l,-s)),t.clip&&(e.translate(l,s),e.clip(r),e.translate(-l,-s)),c}(e,t,s,c);break;case i.RECTANGLE:v=function(e,t,n,i){var r=a(t,["x","y","width","height","opacity","strokeColor","fillColor"],n,i),o=r.x,l=r.y,s=r.width,c=r.height,u=r.idle,f=r.fillColor,d=r.strokeColor,p=r.opacity;return t.renderedState=r,e.globalAlpha=p,f&&(e.fillStyle=f,e.fillRect(o,l,s,c)),d&&(e.strokeStyle=d,e.strokeRect(o,l,s,c)),t.clip&&(e.beginPath(),e.rect(o,l,s,c),e.clip()),u}(e,t,s,c);break;case i.TEXT:v=function(e,t,n,i){var r=a(t,["x","y","width","height","font","fontSize","opacity","strokeColor","fillColor","text"],n,i),o=r.x,l=r.y,s=r.idle,c=r.fontSize,u=r.font,f=r.fillColor,d=r.strokeColor,p=r.opacity,y=r.text;return t.renderedState=r,e.globalAlpha=p,e.font=c+"px "+(null!=u?u:"Arial"),f&&(e.fillStyle=f,e.fillText(y,o,l)),d&&(e.strokeStyle=d,e.strokeText(y,o,l)),s}(e,t,s,c);break;case i.LINE:v=function(e,t,n,i){var r=a(t,["x","y","opacity","strokeColor","fillColor","tx","ty","lineWidth"],n,i),o=r.x,l=r.y,s=r.idle,c=r.fillColor,u=r.strokeColor,f=r.opacity,d=r.tx,p=r.ty,y=r.lineWidth;return t.renderedState=r,e.globalAlpha=f,(c\|\|u)&&(e.beginPath(),e.moveTo(o,l),e.lineTo(d,p),e.lineWidth=y),t.fillColor&&(e.fillStyle=c,e.fill()),t.strokeColor&&(e.strokeStyle=u,e.stroke()),t.clip&&e.clip(),s}(e,t,s,c);break;case i.ELIPSE:v=function(e,t,n,i){var r=a(t,["x","y","opacity","strokeColor","fillColor","rotation","rx","ry","startAngle","endAngle"],n,i),o=r.x,l=r.y,s=r.idle,c=r.fillColor,u=r.strokeColor,f=r.opacity,d=r.rx,p=r.ry,y=r.rotation,v=r.startAngle,h=r.endAngle;return t.renderedState=r,e.globalAlpha=f,(c\|\|u)&&(e.beginPath(),e.ellipse(o,l,d,p,y,null!=v?v:0,null!=h?h:2Math.PI)),c&&(e.fillStyle=c,e.fill()),t.strokeColor&&(e.strokeStyle=u,e.stroke()),t.clip&&e.clip(),s}(e,t,s,c)}v\|\|m(e.canvas,u);for(var h=0,S=t.children;h<S.length;h+=1)g(e,S[h],l(t.x)+s,l(t.y)+c,u);e.restore()}}},e.AurumRectangle=function(e,t,n){var r,o=n.prerender(t);return Object.assign(Object.assign({},e),{opacity:null!==(r=e.opacity)&&void 0!==r?r:1,renderedState:void 0,children:o,animations:[],type:i.RECTANGLE})},e.AurumText=function(e,t,r){for(var o,a=r.prerender(t),l=new n.DataSource(""),c=0,u=a;c<u.length;c+=1){var f=u[c];f instanceof n.DataSource&&f.unique().listen(function(e){s(l,a)})}return s(l,a),Object.assign(Object.assign({},e),{opacity:null!==(o=e.opacity)&&void 0!==o?o:1,renderedState:void 0,text:l,children:[],animations:[],type:i.TEXT})},e.AurumLine=function(e,t,n){var r,o,a=n.prerender(t);return Object.assign(Object.assign({},e),{opacity:null!==(r=e.opacity)&&void 0!==r?r:1,lineWidth:null!==(o=e.lineWidth)&&void 0!==o?o:1,renderedState:void 0,children:a,animations:[],type:i.LINE})},e.AurumElipse=function(e,t,n){var r,o=n.prerender(t);return Object.assign(Object.assign({},e),{opacity:null!==(r=e.opacity)&&void 0!==r?r:1,renderedState:void 0,children:o,animations:[],type:i.ELIPSE})},e.AurumGroup=function(e,t,n){var r=n.prerender(t);return Object.assign(Object.assign({},e),{renderedState:void 0,children:r,animations:[],type:i.GROUP})},e.AurumPath=function(e,t,n){var r,o=n.prerender(t);return Object.assign(Object.assign({},e),{opacity:null!==(r=e.opacity)&&void 0!==r?r:1,renderedState:void 0,children:o,animations:[],type:i.PATH})},e.stateSymbol=r,e.State=function(e,t,n){var o,a=n.prerender(t);return Object.assign(Object.assign(((o={})[r]=!0,o.x=void 0,o.y=void 0,o),e),{renderedState:void 0,animations:[],children:a,type:i.STATE})}});
		!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("aurumjs")):"function"==typeof define&&define.amd?define(["exports","aurumjs"],t):t(e["aurum-canvas"]={},e.aurumjs)}(this,function(e,t){var n;!function(e){e[e.RECTANGLE=0]="RECTANGLE",e[e.ELIPSE=1]="ELIPSE",e[e.LINE=2]="LINE",e[e.TEXT=3]="TEXT",e[e.IMAGE=4]="IMAGE",e[e.GROUP=5]="GROUP",e[e.STATE=6]="STATE",e[e.PATH=7]="PATH"}(n\|\|(n={}));var r=Symbol("state"),i=new WeakMap;function o(e,t,n,r){for(var i,o={idle:!0,x:0,y:0},l=!0,s=function(){var t,n=u[c],r=a(e[n]),s=null===(i=e.animationStates)\|\|void 0===i?void 0:i.find(function(e){return null!=e[n]});s?(t=s.transitionTime?Math.min(1,(Date.now()-e.animationTime)/a(s.transitionTime)):1,o[n]=r+(s[n]-r)t,t<1&&(l=!1)):o[n]=r},c=0,u=t;c<u.length;c+=1)s();return o.x+=n,o.y+=r,"tx"in o&&(o.tx+=n),"ty"in o&&(o.ty+=r),o.idle=l,o}function a(e){return e instanceof t.DataSource?e.value:e}function l(e,t){e.update(t.reduce(function(e,t){return"string"==typeof t?""+e+t:t.value?""+e+t.value:e},""))}e.AurumCanvas=function(e,l,s){var c,u=s.prerender(l),f=new t.CancellationToken,d=new t.EventEmitter,p=new t.EventEmitter,y=new t.EventEmitter;return t.Aurum.factory("canvas",{onAttach:function(e){!function(e,n,i,o){i.registerDomEvent(e,"mousemove",function(e){d.fire(e)}),i.registerDomEvent(e,"mousedown",function(e){y.fire(e)}),i.registerDomEvent(e,"mouseup",function(e){p.fire(e)}),function e(n,i,o,l,s,c){for(var u=function(){var o=d[f];if(o instanceof t.ArrayDataSource\|\|o instanceof t.DataSource\|\|o instanceof t.DuplexDataSource)o.listen(function(){h(n,c)});else if(o[r]){if(!l)throw new Error("Cannot use <State> nodes at root level");l.animations.push(o)}else{var u=function(e){if("onMouseUp"!==e)if("onMouseDown"!==e){if(o[e]instanceof t.DataSource){var r=o[e].value,i=void 0;if("state"===e){var l=a(o[e]);i=l,o.animationStates=o.animations.filter(function(e){return e.id===l}),o.animationTime=Date.now()}o[e].listen(function(t){r!==t&&(r=t,"state"===e?i!==t&&(i=t,o.animationStates=o.animations.filter(function(e){return e.id===t}),o.animationTime=Date.now(),h(n,c)):h(n,c))},s)}}else y.subscribe(function(e){v(e,o)&&o.onMouseDown(e,o)});else p.subscribe(function(e){v(e,o)&&o.onMouseUp(e,o)})};for(var S in o)u(S);e(n,i,o.children,o,s,c)}},f=0,d=o;f<d.length;f+=1)u()}(e,n,n,void 0,i,o)}(e,u,f,s.prerender),S(e,u,s.prerender)},onDetach:function(){f.cancel()},class:e.class,width:e.width,height:e.height});function v(e,t){if(t.renderedState)switch(t.type){case n.IMAGE:case n.RECTANGLE:case n.TEXT:return e.offsetX>=t.renderedState.x&&e.offsetY>=t.renderedState.y&&e.offsetX<=t.renderedState.x+t.renderedState.width&&e.offsetY<=t.renderedState.y+t.renderedState.height}}function h(e,t){c\|\|(c=requestAnimationFrame(function(){c=void 0,e.isConnected&&S(e,u,t)}))}function S(e,t,n){var r=e.getContext("2d");r.clearRect(0,0,e.width,e.height);for(var i=0,o=t;i<o.length;i+=1)m(r,o[i],0,0,n)}function m(e,l,s,c,u){if(Array.isArray(l))for(var f=0,d=l;f<d.length;f+=1)m(e,d[f],s,c,u);else if(!l[r])if(l[t.aurumElementModelIdentitiy]&&(i.has(l)\|\|i.set(l,u(l)),l=i.get(l)),l instanceof t.ArrayDataSource)for(var p=0,y=l.getData();p<y.length;p+=1)m(e,y[p],c,c,u);else if(l instanceof t.DataSource\|\|l instanceof t.DuplexDataSource)m(e,l.value,c,c,u);else{var v;switch(e.save(),l.type){case n.PATH:v=function(e,t,n,r){var i,a=o(t,["x","y","opacity","strokeColor","fillColor","path","lineWidth"],n,r),l=a.x,s=a.y,c=a.idle,u=a.fillColor,f=a.strokeColor,d=a.opacity,p=a.path,y=a.lineWidth;return t.renderedState=a,e.globalAlpha=d,(u\|\|f)&&(e.lineWidth=y,i=new Path2D(p)),t.fillColor&&(e.translate(l,s),e.fillStyle=u,e.fill(i),e.translate(-l,-s)),t.strokeColor&&(e.translate(l,s),e.strokeStyle=f,e.stroke(i),e.translate(-l,-s)),t.clip&&(e.translate(l,s),e.clip(i),e.translate(-l,-s)),c}(e,l,s,c);break;case n.RECTANGLE:v=function(e,t,n,r){var i=o(t,["x","y","width","height","opacity","strokeColor","fillColor"],n,r),a=i.x,l=i.y,s=i.width,c=i.height,u=i.idle,f=i.fillColor,d=i.strokeColor,p=i.opacity;return t.renderedState=i,e.globalAlpha=p,f&&(e.fillStyle=f,e.fillRect(a,l,s,c)),d&&(e.strokeStyle=d,e.strokeRect(a,l,s,c)),t.clip&&(e.beginPath(),e.rect(a,l,s,c),e.clip()),u}(e,l,s,c);break;case n.TEXT:v=function(e,t,n,r){var i=o(t,["x","y","width","height","font","fontSize","opacity","strokeColor","fillColor","text"],n,r),a=i.x,l=i.y,s=i.idle,c=i.fontSize,u=i.font,f=i.fillColor,d=i.strokeColor,p=i.opacity,y=i.text;return t.renderedState=i,e.globalAlpha=p,e.font=c+"px "+(null!=u?u:"Arial"),f&&(e.fillStyle=f,e.fillText(y,a,l)),d&&(e.strokeStyle=d,e.strokeText(y,a,l)),s}(e,l,s,c);break;case n.LINE:v=function(e,t,n,r){var i=o(t,["x","y","opacity","strokeColor","fillColor","tx","ty","lineWidth"],n,r),a=i.x,l=i.y,s=i.idle,c=i.fillColor,u=i.strokeColor,f=i.opacity,d=i.tx,p=i.ty,y=i.lineWidth;return t.renderedState=i,e.globalAlpha=f,(c\|\|u)&&(e.beginPath(),e.moveTo(a,l),e.lineTo(d,p),e.lineWidth=y),t.fillColor&&(e.fillStyle=c,e.fill()),t.strokeColor&&(e.strokeStyle=u,e.stroke()),t.clip&&e.clip(),s}(e,l,s,c);break;case n.ELIPSE:v=function(e,t,n,r){var i=o(t,["x","y","opacity","strokeColor","fillColor","rotation","rx","ry","startAngle","endAngle"],n,r),a=i.x,l=i.y,s=i.idle,c=i.fillColor,u=i.strokeColor,f=i.opacity,d=i.rx,p=i.ry,y=i.rotation,v=i.startAngle,h=i.endAngle;return t.renderedState=i,e.globalAlpha=f,(c\|\|u)&&(e.beginPath(),e.ellipse(a,l,d,p,y,null!=v?v:0,null!=h?h:2Math.PI)),c&&(e.fillStyle=c,e.fill()),t.strokeColor&&(e.strokeStyle=u,e.stroke()),t.clip&&e.clip(),s}(e,l,s,c)}v\|\|h(e.canvas,u);for(var S=0,g=l.children;S<g.length;S+=1)m(e,g[S],a(l.x)+s,a(l.y)+c,u);e.restore()}}},e.AurumRectangle=function(e,t,r){var i,o=r.prerender(t);return Object.assign(Object.assign({},e),{opacity:null!==(i=e.opacity)&&void 0!==i?i:1,renderedState:void 0,children:o,animations:[],type:n.RECTANGLE})},e.AurumText=function(e,r,i){for(var o,a=i.prerender(r),s=new t.DataSource(""),c=0,u=a;c<u.length;c+=1){var f=u[c];f instanceof t.DataSource&&f.unique().listen(function(e){l(s,a)})}return l(s,a),Object.assign(Object.assign({},e),{opacity:null!==(o=e.opacity)&&void 0!==o?o:1,renderedState:void 0,text:s,children:[],animations:[],type:n.TEXT})},e.AurumLine=function(e,t,r){var i,o,a=r.prerender(t);return Object.assign(Object.assign({},e),{opacity:null!==(i=e.opacity)&&void 0!==i?i:1,lineWidth:null!==(o=e.lineWidth)&&void 0!==o?o:1,renderedState:void 0,children:a,animations:[],type:n.LINE})},e.AurumElipse=function(e,t,r){var i,o=r.prerender(t);return Object.assign(Object.assign({},e),{opacity:null!==(i=e.opacity)&&void 0!==i?i:1,renderedState:void 0,children:o,animations:[],type:n.ELIPSE})},e.AurumGroup=function(e,t,r){var i=r.prerender(t);return Object.assign(Object.assign({},e),{renderedState:void 0,children:i,animations:[],type:n.GROUP})},e.AurumPath=function(e,t,r){var i,o=r.prerender(t);return Object.assign(Object.assign({},e),{opacity:null!==(i=e.opacity)&&void 0!==i?i:1,renderedState:void 0,children:o,animations:[],type:n.PATH})},e.stateSymbol=r,e.State=function(e,t,i){var o,a=i.prerender(t);return Object.assign(Object.assign(((o={})[r]=!0,o.x=void 0,o.y=void 0,o),e),{renderedState:void 0,animations:[],children:a,type:n.STATE})}});
		//# sourceMappingURL=aurum-canvas.umd.js.map

prebuilt/aurum-canvas.js

		@@ -1,2 +0,1 @@
		var event_emitter = require('aurumjs/dist/utilities/event_emitter');
		var aurumjs = require('aurumjs');
		@@ -35,5 +34,5 @@
		var cancellationToken = new aurumjs.CancellationToken();
		var onMouseMove = new event_emitter.EventEmitter();
		var onMouseUp = new event_emitter.EventEmitter();
		var onMouseDown = new event_emitter.EventEmitter();
		var onMouseMove = new aurumjs.EventEmitter();
		var onMouseUp = new aurumjs.EventEmitter();
		var onMouseDown = new aurumjs.EventEmitter();
		return aurumjs.Aurum.factory("canvas", {
		@@ -40,0 +39,0 @@ onAttach: function (canvas) {

prebuilt/aurum-canvas.umd.js

		(function (global, factory) {
		typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('aurumjs/dist/utilities/event_emitter'), require('aurumjs')) :
		typeof define === 'function' && define.amd ? define(['exports', 'aurumjs/dist/utilities/event_emitter', 'aurumjs'], factory) :
		(factory((global['aurum-canvas'] = {}),global.event_emitter,global.aurumjs));
		}(this, (function (exports,event_emitter,aurumjs) {
		typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('aurumjs')) :
		typeof define === 'function' && define.amd ? define(['exports', 'aurumjs'], factory) :
		(factory((global['aurum-canvas'] = {}),global.aurumjs));
		}(this, (function (exports,aurumjs) {
		var ComponentType;
		@@ -37,5 +37,5 @@
		var cancellationToken = new aurumjs.CancellationToken();
		var onMouseMove = new event_emitter.EventEmitter();
		var onMouseUp = new event_emitter.EventEmitter();
		var onMouseDown = new event_emitter.EventEmitter();
		var onMouseMove = new aurumjs.EventEmitter();
		var onMouseUp = new aurumjs.EventEmitter();
		var onMouseDown = new aurumjs.EventEmitter();
		return aurumjs.Aurum.factory("canvas", {
		@@ -42,0 +42,0 @@ onAttach: function (canvas) {

dist/components/canvas.d.ts.map