trenette.js - npm Package Compare versions

Comparing version 0.1.4 to 0.1.5

build/trenette.js

@@ -705,2 +705,9 @@ (function (global, factory) {
 		/**
+		 * Depth level in the object tree, objects with higher depth are drawn on top.
+		 *
+		 * The layer value is considered first. 
+		 */
+		this.level = 0;
+
+		/**
 		 * Position of the object.
@@ -835,2 +842,12 @@ */
 		object.parent = this;
+		object.level = this.level + 1;
+
+		object.traverse(function(child)
+		{
+			if(child.onAdd !== null)
+			{
+				child.onAdd(this);
+			}
+		});
+
 		this.children.push(object);
@@ -847,5 +864,17 @@ };
 		var index = this.children.indexOf(object);
+		
 		if(index !== -1)
 		{
-			this.children[index].parent = null;
+			var object = this.children[index];
+			object.parent = null;
+			object.level = 0;
+
+			object.traverse(function(child)
+			{
+				if(child.onRemove !== null)
+				{
+					child.onRemove(this);
+				}
+			});
+
 			this.children.splice(index, 1);
@@ -910,2 +939,16 @@ }
 	/**
+	 * Method called when the object its added to a parent.
+	 *
+	 * Receives (parent) as arguments.
+	 */
+	Object2D.prototype.onAdd = null;
+
+	/**
+	 * Method called when the object gets removed from its parent
+	 *
+	 * Receives (parent) as arguments.
+	 */
+	Object2D.prototype.onRemove = null;
+
+	/**
 	 * Callback method called every time before the object is draw into the canvas.
@@ -957,2 +1000,4 @@ *
 	 * Callback method called when the pointer button is pressed down (single time).
+	 *
+	 * Receives (pointer, viewport) as arguments.
 	 */
@@ -963,2 +1008,4 @@ Object2D.prototype.onButtonDown = null;
 	 * Callback method called when the pointer button is released (single time).
+	 *
+	 * Receives (pointer, viewport) as arguments.
 	 */
@@ -1449,4 +1496,12 @@ Object2D.prototype.onButtonUp = null;
 	 */
-	function Renderer(canvas)
+	function Renderer(canvas, options)
 	{
+		if(options === undefined)
+		{
+			options = 
+			{
+				alpha: true
+			};
+		}
+
 		/**
@@ -1460,3 +1515,3 @@ * Canvas DOM element, has to be managed by the user.
 		 */
-		this.context = canvas.getContext("2d");
+		this.context = canvas.getContext("2d", {alpha: options.alpha});
 		this.context.imageSmoothingEnabled = true;
@@ -1531,2 +1586,7 @@ this.context.globalCompositeOperation = "source-over";
 		{
+			if(b.layer === a.layer)
+			{
+				return b.level - a.level;
+			}
+			
 			return b.layer - a.layer;
@@ -1659,3 +1719,2 @@ });
 		});
-		
 
@@ -1765,2 +1824,9 @@ this.context.setTransform(1, 0, 0, 1, 0, 0);
 		this.moveOnScale = true;
+
+		/**
+		 * Value of the initial point of rotation if the viewport is being rotated.
+		 *
+		 * Is set to null when the viewport is not being rotated.
+		 */
+		this.rotationPoint = null;
 	}
@@ -1788,7 +1854,13 @@
 
-		if(pointer.buttonPressed(Pointer.RIGHT))
+		if(pointer.buttonPressed(Pointer.RIGHT) && pointer.buttonPressed(Pointer.LEFT))
 		{
+			this.rotation += pointer.delta.angle() * 1e-2;
+		}
+		else if(pointer.buttonPressed(Pointer.RIGHT))
+		{
 			this.position.x += pointer.delta.x;
 			this.position.y += pointer.delta.y;
 		}
+
+
 	};
@@ -1888,3 +1960,2 @@
 	{
-
 		return (this.max.x < this.min.x) || (this.max.y < this.min.y);
@@ -1898,3 +1969,10 @@ };
 	{
-		return this.isEmpty() ? target.set(0, 0) : target.addVectors(this.min, this.max).multiplyScalar(0.5);
+		if(target === undefined)
+		{
+			target = new Vector2();
+		}
+
+		this.isEmpty() ? target.set(0, 0) : target.addVectors(this.min, this.max).multiplyScalar(0.5);
+
+		return target;
 	};
@@ -1907,3 +1985,10 @@
 	{
-		return this.isEmpty() ? target.set(0, 0) : target.subVectors(this.max, this.min);
+		if(target === undefined)
+		{
+			target = new Vector2();
+		}
+
+		this.isEmpty() ? target.set(0, 0) : target.subVectors(this.max, this.min);
+
+		return target;
 	};
@@ -1979,3 +2064,10 @@
 	{
-		return target.copy(point).clamp(this.min, this.max);
+		if(target === undefined)
+		{
+			target = new Vector2();
+		}
+
+		target.copy(point).clamp(this.min, this.max);
+
+		return target;
 	};
@@ -2166,6 +2258,6 @@
 	{
-		context.fillStyle = this.fillStyle;
-
 		context.beginPath();
 		context.arc(0, 0, this.radius, 0, 2 * Math.PI);
+		
+		context.fillStyle = this.fillStyle;
 		context.fill();
@@ -2175,5 +2267,2 @@
 		context.strokeStyle = this.strokeStyle;
-
-		context.beginPath();
-		context.arc(0, 0, this.radius, 0, 2 * Math.PI);
 		context.stroke();
@@ -2508,6 +2597,6 @@ };
 	 * @class
-	 * @param parent Parent DOM element that contains the drawing canvas.
+	 * @param parentDOM Parent DOM element that contains the drawing canvas.
 	 * @param type Type of the DOM element (e.g. "div", "p", ...)
 	 */
-	function DOM(parent, type)
+	function DOM(parentDOM, type)
 	{
@@ -2517,2 +2606,7 @@ Object2D.call(this);
 		/**
+		 * Parent element that contains this DOM div.
+		 */
+		this.parentDOM = parentDOM;
+
+		/**
 		 * DOM element contained by this object.
@@ -2530,3 +2624,2 @@ *
 		this.element.style.pointerEvents = "none";
-		parent.appendChild(this.element);
 		
@@ -2541,2 +2634,12 @@ /**
 
+	DOM.prototype.onAdd = function()
+	{
+		this.parentDOM.appendChild(this.element);
+	};
+
+	DOM.prototype.onRemove = function()
+	{
+		this.parentDOM.removeChild(this.element);
+	};
+
 	DOM.prototype.transform = function(context, viewport, canvas)
@@ -2621,4 +2724,2 @@ {
 			var pattern = context.createPattern(this.image, this.repetition);
-			
-			//pattern.setTransform();
 
@@ -2625,0 +2726,0 @@ context.fillStyle = pattern;

build/trenette.min.js

@@ -1,1 +0,1 @@
-!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports):"function"==typeof define&&define.amd?define(["exports"],i):i((t=t||self).Trenette={})}(this,function(t){"use strict";function n(){this.events=[]}function o(t,i){this.x=t||0,this.y=i||0}function p(t){void 0!==t?this.m=t:this.identity()}function i(){}function l(){this.uuid=i.generate(),this.children=[],this.parent=null,this.position=new o(0,0),this.origin=new o(0,0),this.scale=new o(1,1),this.rotation=0,this.visible=!0,this.layer=0,this.matrix=new p,this.globalMatrix=new p,this.inverseGlobalMatrix=new p,this.masks=[],this.matrixNeedsUpdate=!0,this.draggable=!1,this.pointerEvents=!0,this.ignoreViewport=!1,this.saveContextState=!0,this.restoreContextState=!0,this.pointerInside=!1,this.beingDragged=!1}function r(){this.pressed=!1,this.justPressed=!1,this.justReleased=!1}function y(t){this._keys=new Array(5),this._position=new o(0,0),this._positionUpdated=!1,this._delta=new o(0,0),this._wheel=0,this._wheelUpdated=!1,this._doubleClicked=new Array(5),this.keys=new Array(5),this.position=new o(0,0),this.delta=new o(0,0),this.wheel=0,this.doubleClicked=new Array(5),this.domElement=void 0!==t?t:window,this.canvas=null,this.events=new n;for(var i=0;i<5;i++)this._doubleClicked[i]=!1,this.doubleClicked[i]=!1,this._keys[i]=new r,this.keys[i]=new r;var e=this;if(void 0!==window.onmousewheel?this.events.add(this.domElement,"mousewheel",function(t){e._wheel=t.deltaY,e._wheelUpdated=!0}):void 0!==window.addEventListener?this.events.add(this.domElement,"DOMMouseScroll",function(t){e._wheel=30*t.detail,e._wheelUpdated=!0}):this.events.add(this.domElement,"wheel",function(t){e._wheel=t.deltaY,e._wheelUpdated=!0}),void 0!==window.ontouchstart||0<navigator.msMaxTouchPoints){var s=new o(0,0);this.events.add(this.domElement,"touchstart",function(t){var i=t.touches[0];e.updatePosition(i.clientX,i.clientY,0,0),e.updateKey(y.LEFT,r.DOWN),s.set(i.clientX,i.clientY)}),this.events.add(this.domElement,"touchend",function(t){e.updateKey(y.LEFT,r.UP)}),this.events.add(this.domElement,"touchcancel",function(t){e.updateKey(y.LEFT,r.UP)}),this.events.add(document.body,"touchmove",function(t){var i=t.touches[0];e.updatePosition(i.clientX,i.clientY,i.clientX-s.x,i.clientY-s.y),s.set(i.clientX,i.clientY)})}this.events.add(this.domElement,"mousemove",function(t){e.updatePosition(t.clientX,t.clientY,t.movementX,t.movementY)}),this.events.add(this.domElement,"mousedown",function(t){e.updateKey(t.which-1,r.DOWN)}),this.events.add(this.domElement,"mouseup",function(t){e.updateKey(t.which-1,r.UP)}),this.events.add(this.domElement,"dragstart",function(t){e.updateKey(t.which-1,r.UP)}),this.events.add(this.domElement,"dblclick",function(t){e._doubleClicked[t.which-1]=!0}),this.create()}function e(t){this.canvas=t,this.context=t.getContext("2d"),this.context.imageSmoothingEnabled=!0,this.context.globalCompositeOperation="source-over",this.pointer=new y,this.pointer.setCanvas(t),this.autoClear=!0}function s(){this.uuid=i.generate(),this.position=new o(0,0),this.scale=1,this.rotation=0,this.matrix=new p,this.inverseMatrix=new p,this.matrixNeedsUpdate=!0,this.moveOnScale=!0}function h(t,i){this.min=void 0!==t?t:new o,this.max=void 0!==i?i:new o}function a(){l.call(this)}function c(){a.call(this),this.box=new h(new o(-50,-35),new o(50,35)),this.invert=!1}function m(){l.call(this),this.radius=10,this.strokeStyle="#000000",this.fillStyle="#FFFFFF"}function u(){}function d(){l.call(this),this.box=new h(new o(-50,-35),new o(50,35)),this.strokeStyle="#000000",this.fillStyle="#FFFFFF"}function x(){l.call(this),this.from=new o,this.to=new o,this.strokeStyle="#000000",this.dashPattern=[5,5],this.lineWidth=1}function f(){l.call(this),this.text="",this.font="16px Arial",this.color="#000000",this.textAlign="center"}function v(t){l.call(this),this.box=new h,this.image=document.createElement("img"),void 0!==t&&this.setImage(t)}function b(t,i){l.call(this),this.element=document.createElement("div"),this.element.style.transformStyle="preserve-3d",this.element.style.position="absolute",this.element.style.top="0px",this.element.style.bottom="0px",this.element.style.transformOrigin="0px 0px",this.element.style.overflow="auto",this.element.style.pointerEvents="none",t.appendChild(this.element),this.size=new o(100,100)}function g(t){l.call(this),this.box=new h,this.image=document.createElement("img"),this.repetition="repeat",void 0!==t&&this.setImage(t)}n.prototype.add=function(t,i,e){this.events.push([t,i,e,!1])},n.prototype.clear=function(){this.destroy(),this.events=[]},n.prototype.create=function(){for(var t=0;t<this.events.length;t++){var i=this.events[t];i[0].addEventListener(i[1],i[2]),i[3]=!0}},n.prototype.destroy=function(){for(var t=0;t<this.events.length;t++){var i=this.events[t];i[0].removeEventListener(i[1],i[2]),i[3]=!1}},o.prototype.set=function(t,i){this.x=t,this.y=i},o.prototype.setScalar=function(t){this.x=t,this.y=t},o.prototype.clone=function(){return new o(this.x,this.y)},o.prototype.copy=function(t){this.x=t.x,this.y=t.y},o.prototype.add=function(t){this.x+=t.x,this.y+=t.y},o.prototype.addScalar=function(t){this.x+=t,this.y+=t},o.prototype.addVectors=function(t,i){this.x=t.x+i.x,this.y=t.y+i.y},o.prototype.addScaledVector=function(t,i){this.x+=t.x*i,this.y+=t.y*i},o.prototype.sub=function(t){this.x-=t.x,this.y-=t.y},o.prototype.subScalar=function(t){this.x-=t,this.y-=t},o.prototype.subVectors=function(t,i){this.x=t.x-i.x,this.y=t.y-i.y},o.prototype.multiply=function(t){this.x*=t.x,this.y*=t.y},o.prototype.multiplyScalar=function(t){this.x*=t,this.y*=t},o.prototype.divide=function(t){this.x/=t.x,this.y/=t.y},o.prototype.divideScalar=function(t){return this.multiplyScalar(1/t)},o.prototype.min=function(t){this.x=Math.min(this.x,t.x),this.y=Math.min(this.y,t.y)},o.prototype.max=function(t){this.x=Math.max(this.x,t.x),this.y=Math.max(this.y,t.y)},o.prototype.clamp=function(t,i){this.x=Math.max(t.x,Math.min(i.x,this.x)),this.y=Math.max(t.y,Math.min(i.y,this.y))},o.prototype.clampScalar=function(t,i){this.x=Math.max(t,Math.min(i,this.x)),this.y=Math.max(t,Math.min(i,this.y))},o.prototype.clampLength=function(t,i){var e=this.length();return this.divideScalar(e||1).multiplyScalar(Math.max(t,Math.min(i,e)))},o.prototype.floor=function(){this.x=Math.floor(this.x),this.y=Math.floor(this.y)},o.prototype.ceil=function(){this.x=Math.ceil(this.x),this.y=Math.ceil(this.y)},o.prototype.round=function(){this.x=Math.round(this.x),this.y=Math.round(this.y)},o.prototype.roundToZero=function(){this.x=this.x<0?Math.ceil(this.x):Math.floor(this.x),this.y=this.y<0?Math.ceil(this.y):Math.floor(this.y)},o.prototype.negate=function(){return this.x=-this.x,this.y=-this.y,this},o.prototype.dot=function(t){return this.x*t.x+this.y*t.y},o.prototype.cross=function(t){return this.x*t.y-this.y*t.x},o.prototype.lengthSq=function(){return this.x*this.x+this.y*this.y},o.prototype.length=function(){return Math.sqrt(this.x*this.x+this.y*this.y)},o.prototype.manhattanLength=function(){return Math.abs(this.x)+Math.abs(this.y)},o.prototype.normalize=function(){return this.divideScalar(this.length()||1)},o.prototype.angle=function(){var t=Math.atan2(this.y,this.x);return t<0&&(t+=2*Math.PI),t},o.prototype.distanceTo=function(t){return Math.sqrt(this.distanceToSquared(t))},o.prototype.distanceToSquared=function(t){var i=this.x-t.x,e=this.y-t.y;return i*i+e*e},o.prototype.manhattanDistanceTo=function(t){return Math.abs(this.x-t.x)+Math.abs(this.y-t.y)},o.prototype.setLength=function(t){return this.normalize().multiplyScalar(t)},o.prototype.lerp=function(t,i){this.x+=(t.x-this.x)*i,this.y+=(t.y-this.y)*i},o.prototype.lerpVectors=function(t,i,e){return this.subVectors(i,t).multiplyScalar(e).add(t)},o.prototype.equals=function(t){return t.x===this.x&&t.y===this.y},o.prototype.fromArray=function(t,i){void 0===i&&(i=0),this.x=t[i],this.y=t[i+1]},o.prototype.toArray=function(t,i){return void 0===t&&(t=[]),void 0===i&&(i=0),t[i]=this.x,t[i+1]=this.y,t},o.prototype.rotateAround=function(t,i){var e=Math.cos(i),s=Math.sin(i),n=this.x-t.x,o=this.y-t.y;this.x=n*e-o*s+t.x,this.y=n*s+o*e+t.y},p.prototype.copy=function(t){this.m=t.m.slice(0)},p.prototype.clone=function(){return new p(this.m.slice(0))},p.prototype.identity=function(){this.m=[1,0,0,1,0,0]},p.prototype.multiply=function(t){var i=this.m[0]*t.m[0]+this.m[2]*t.m[1],e=this.m[1]*t.m[0]+this.m[3]*t.m[1],s=this.m[0]*t.m[2]+this.m[2]*t.m[3],n=this.m[1]*t.m[2]+this.m[3]*t.m[3],o=this.m[0]*t.m[4]+this.m[2]*t.m[5]+this.m[4],r=this.m[1]*t.m[4]+this.m[3]*t.m[5]+this.m[5];this.m=[i,e,s,n,o,r]},p.prototype.premultiply=function(t){var i=t.m[0]*this.m[0]+t.m[2]*this.m[1],e=t.m[1]*this.m[0]+t.m[3]*this.m[1],s=t.m[0]*this.m[2]+t.m[2]*this.m[3],n=t.m[1]*this.m[2]+t.m[3]*this.m[3],o=t.m[0]*this.m[4]+t.m[2]*this.m[5]+t.m[4],r=t.m[1]*this.m[4]+t.m[3]*this.m[5]+t.m[5];this.m=[i,e,s,n,o,r]},p.prototype.compose=function(t,i,e,s,n,o,r){if(this.m=[1,0,0,1,t,i],0!==r){var h=Math.cos(r),a=Math.sin(r);this.multiply(new p([h,a,-a,h,0,0]))}0===n&&0===o||this.multiply(new p([1,0,0,1,-n,-o])),1===e&&1===s||this.scale(e,s)},p.prototype.translate=function(t,i){this.m[4]+=this.m[0]*t+this.m[2]*i,this.m[5]+=this.m[1]*t+this.m[3]*i},p.prototype.rotate=function(t){var i=Math.cos(t),e=Math.sin(t),s=this.m[0]*i+this.m[2]*e,n=this.m[1]*i+this.m[3]*e,o=this.m[0]*-e+this.m[2]*i,r=this.m[1]*-e+this.m[3]*i;this.m[0]=s,this.m[1]=n,this.m[2]=o,this.m[3]=r},p.prototype.scale=function(t,i){this.m[0]*=t,this.m[1]*=t,this.m[2]*=i,this.m[3]*=i},p.prototype.setPosition=function(t,i){this.m[4]=t,this.m[5]=i},p.prototype.getScale=function(){return new o(this.m[0],this.m[3])},p.prototype.getPosition=function(){return new o(this.m[4],this.m[5])},p.prototype.skew=function(t,i){this.multiply(new p([1,Math.tan(i),Math.tan(t),1,0,0]))},p.prototype.determinant=function(){return 1/(this.m[0]*this.m[3]-this.m[1]*this.m[2])},p.prototype.getInverse=function(){var t=this.determinant();return new p([this.m[3]*t,-this.m[1]*t,-this.m[2]*t,this.m[0]*t,t*(this.m[2]*this.m[5]-this.m[3]*this.m[4]),t*(this.m[1]*this.m[4]-this.m[0]*this.m[5])])},p.prototype.transformPoint=function(t){return new o(t.x*this.m[0]+t.y*this.m[2]+this.m[4],t.x*this.m[1]+t.y*this.m[3]+this.m[5])},p.prototype.setContextTransform=function(t){t.setTransform(this.m[0],this.m[1],this.m[2],this.m[3],this.m[4],this.m[5])},p.prototype.tranformContext=function(t){t.transform(this.m[0],this.m[1],this.m[2],this.m[3],this.m[4],this.m[5])},p.prototype.cssTransform=function(){return"matrix("+this.m[0]+","+this.m[1]+","+this.m[2]+","+this.m[3]+","+this.m[4]+","+this.m[5]+")"},i.generate=function(){for(var n=[],t=0;t<256;t++)n[t]=(t<16?"0":"")+t.toString(16);return function(){var t=4294967295*Math.random()|0,i=4294967295*Math.random()|0,e=4294967295*Math.random()|0,s=4294967295*Math.random()|0;return(n[255&t]+n[t>>8&255]+n[t>>16&255]+n[t>>24&255]+"-"+n[255&i]+n[i>>8&255]+"-"+n[i>>16&15|64]+n[i>>24&255]+"-"+n[63&e|128]+n[e>>8&255]+"-"+n[e>>16&255]+n[e>>24&255]+n[255&s]+n[s>>8&255]+n[s>>16&255]+n[s>>24&255]).toUpperCase()}}(),l.prototype.traverse=function(t){t(this);for(var i=this.children,e=0;e<i.length;e++)i[e].traverse(t)},l.prototype.add=function(t){(t.parent=this).children.push(t)},l.prototype.remove=function(t){var i=this.children.indexOf(t);-1!==i&&(this.children[i].parent=null,this.children.splice(i,1))},l.prototype.isInside=function(t){return!1},l.prototype.updateMatrix=function(t){this.matrixNeedsUpdate&&(this.matrix.compose(this.position.x,this.position.y,this.scale.x,this.scale.y,this.origin.x,this.origin.y,this.rotation),this.globalMatrix.copy(this.matrix),null!==this.parent&&this.globalMatrix.premultiply(this.parent.globalMatrix),this.inverseGlobalMatrix=this.globalMatrix.getInverse())},l.prototype.transform=function(t,i){this.globalMatrix.tranformContext(t)},l.prototype.draw=function(t,i,e){},l.prototype.onUpdate=null,l.prototype.onPointerEnter=null,l.prototype.onPointerLeave=null,l.prototype.onPointerOver=null,l.prototype.onPointerDrag=function(t,i,e){this.position.add(e)},l.prototype.onButtonPressed=null,l.prototype.onButtonDown=null,l.prototype.onButtonUp=null,r.DOWN=-1,r.UP=1,r.RESET=0,(r.prototype.constructor=r).prototype.update=function(t){this.justPressed=!1,this.justReleased=!1,t===r.DOWN?(!1===this.pressed&&(this.justPressed=!0),this.pressed=!0):t===r.UP?(this.pressed&&(this.justReleased=!0),this.pressed=!1):t===r.RESET&&(this.justReleased=!1,this.justPressed=!1)},r.prototype.set=function(t,i,e){this.justPressed=t,this.pressed=i,this.justReleased=e},r.prototype.reset=function(){this.justPressed=!1,this.pressed=!1,this.justReleased=!1},((y.prototype=y).constructor=y).LEFT=0,y.MIDDLE=1,y.RIGHT=2,y.BACK=3,y.FORWARD=4,y.setCanvas=function(t){(this.canvas=t).pointerInside=!1,t.addEventListener("mouseenter",function(){this.pointerInside=!0}),t.addEventListener("mouseleave",function(){this.pointerInside=!1})},y.insideCanvas=function(){return null!==this.canvas&&this.canvas.pointerInside},y.buttonPressed=function(t){return this.keys[t].pressed},y.buttonDoubleClicked=function(t){return this.doubleClicked[t]},y.buttonJustPressed=function(t){return this.keys[t].justPressed},y.buttonJustReleased=function(t){return this.keys[t].justReleased},y.updatePosition=function(t,i,e,s){if(null!==this.canvas){var n=this.canvas.getBoundingClientRect();t-=n.left,i-=n.top}this._position.set(t,i),this._delta.x+=e,this._delta.y+=s,this._positionUpdated=!0},y.updateKey=function(t,i){-1<t&&this._keys[t].update(i)},y.update=function(){for(var t=0;t<5;t++)this._keys[t].justPressed&&this.keys[t].justPressed&&(this._keys[t].justPressed=!1),this._keys[t].justReleased&&this.keys[t].justReleased&&(this._keys[t].justReleased=!1),this.keys[t].set(this._keys[t].justPressed,this._keys[t].pressed,this._keys[t].justReleased),!0===this._doubleClicked[t]?(this.doubleClicked[t]=!0,this._doubleClicked[t]=!1):this.doubleClicked[t]=!1;this._wheelUpdated?(this.wheel=this._wheel,this._wheelUpdated=!1):this.wheel=0,this._positionUpdated?(this.delta.copy(this._delta),this.position.copy(this._position),this._delta.set(0,0),this._positionUpdated=!1):(this.delta.x=0,this.delta.y=0)},y.create=function(){this.events.create()},y.dispose=function(){this.events.destroy()},e.prototype.createRenderLoop=function(i,e,s){var n=this;!function t(){void 0!==s&&s(),n.update(i,e),requestAnimationFrame(t)}()},e.prototype.update=function(t,i){var e=[];t.traverse(function(t){t.visible&&e.push(t)}),e.sort(function(t,i){return i.layer-t.layer});var s=this.pointer;s.update(),i.updateControls(s),i.updateMatrix();for(var n=s.position.clone(),o=i.inverseMatrix.transformPoint(n),r=0;r<e.length;r++){if((a=e[r]).pointerEvents){var h=a.inverseGlobalMatrix.transformPoint(a.ignoreViewport?n:o);if(a.isInside(h)){if(a.pointerInside||null===a.onPointerEnter||a.onPointerEnter(s,i),null!==a.onPointerOver&&a.onPointerOver(s,i),s.buttonPressed(y.LEFT)&&null!==a.onButtonPressed&&a.onButtonPressed(s,i),s.buttonJustReleased(y.LEFT)&&null!==a.onButtonUp&&a.onButtonUp(s,i),s.buttonJustPressed(y.LEFT)&&(null!==a.onButtonDown&&a.onButtonDown(s,i),a.draggable)){a.beingDragged=!0;break}a.pointerInside=!0}else a.pointerInside&&(null!==a.onPointerLeave&&a.onPointerLeave(s,i),a.pointerInside=!1);s.buttonJustReleased(y.LEFT)&&a.draggable&&(a.beingDragged=!1)}}for(r=0;r<e.length;r++){var a;if((a=e[r]).beingDragged){var p=s.position.clone();p.sub(s.delta);var l=i.inverseMatrix.transformPoint(s.position),c=i.inverseMatrix.transformPoint(p);l.sub(c),null!==a.onPointerDrag&&a.onPointerDrag(s,i,l)}null!==a.onUpdate&&a.onUpdate()}t.traverse(function(t){t.updateMatrix()}),this.context.setTransform(1,0,0,1,0,0),this.autoClear&&this.context.clearRect(0,0,this.canvas.width,this.canvas.height);for(r=e.length-1;0<=r;r--)if(!e[r].isMask){e[r].saveContextState&&this.context.save();for(var m=e[r].masks,u=0;u<m.length;u++)m[u].ignoreViewport||i.matrix.setContextTransform(this.context),m[u].transform(this.context,i,this.canvas),m[u].clip(this.context,i,this.canvas);e[r].ignoreViewport?0<m.length&&this.context.setTransform(1,0,0,1,0,0):i.matrix.setContextTransform(this.context),e[r].transform(this.context,i,this.canvas),e[r].draw(this.context,i,this.canvas),e[r].restoreContextState&&this.context.restore()}},s.prototype.updateControls=function(t){if(0!==t.wheel&&(this.scale-=.001*t.wheel*this.scale,this.moveOnScale)){var i=t.wheel/this.scale,e=t.canvas.width/2,s=t.canvas.height/2;this.position.x+=(t.position.x-e)/e*i,this.position.y+=(t.position.y-s)/s*i}t.buttonPressed(y.RIGHT)&&(this.position.x+=t.delta.x,this.position.y+=t.delta.y)},s.prototype.updateMatrix=function(){this.matrixNeedsUpdate&&(this.matrix.compose(this.position.x,this.position.y,this.scale,this.scale,0,0,this.rotation),this.inverseMatrix=this.matrix.getInverse())},h.prototype.set=function(t,i){return this.min.copy(t),this.max.copy(i),this},h.prototype.setFromPoints=function(t){this.min=new o(1/0,1/0),this.max=new o(-1/0,-1/0);for(var i=0,e=t.length;i<e;i++)this.expandByPoint(t[i]);return this},h.prototype.setFromCenterAndSize=function(t,i){var e=(new o).copy(i).multiplyScalar(.5);return this.min.copy(t).sub(e),this.max.copy(t).add(e),this},h.prototype.clone=function(){var t=new h;return t.copy(this),t},h.prototype.copy=function(t){this.min.copy(t.min),this.max.copy(t.max)},h.prototype.isEmpty=function(){return this.max.x<this.min.x||this.max.y<this.min.y},h.prototype.getCenter=function(t){return this.isEmpty()?t.set(0,0):t.addVectors(this.min,this.max).multiplyScalar(.5)},h.prototype.getSize=function(t){return this.isEmpty()?t.set(0,0):t.subVectors(this.max,this.min)},h.prototype.expandByPoint=function(t){return this.min.min(t),this.max.max(t),this},h.prototype.expandByVector=function(t){this.min.sub(t),this.max.add(t)},h.prototype.expandByScalar=function(t){this.min.addScalar(-t),this.max.addScalar(t)},h.prototype.containsPoint=function(t){return!(t.x<this.min.x||t.x>this.max.x||t.y<this.min.y||t.y>this.max.y)},h.prototype.containsBox=function(t){return this.min.x<=t.min.x&&t.max.x<=this.max.x&&this.min.y<=t.min.y&&t.max.y<=this.max.y},h.prototype.intersectsBox=function(t){return!(t.max.x<this.min.x||t.min.x>this.max.x||t.max.y<this.min.y||t.min.y>this.max.y)},h.prototype.clampPoint=function(t,i){return i.copy(t).clamp(this.min,this.max)},h.prototype.distanceToPoint=function(t){return(new o).copy(t).clamp(this.min,this.max).sub(t).length()},h.prototype.intersect=function(t){this.min.max(t.min),this.max.min(t.max)},h.prototype.union=function(t){this.min.min(t.min),this.max.max(t.max)},h.prototype.translate=function(t){this.min.add(t),this.max.add(t)},h.prototype.equals=function(t){return t.min.equals(this.min)&&t.max.equals(this.max)},(a.prototype=Object.create(l.prototype)).isMask=!0,a.prototype.clip=function(t,i,e){},(c.prototype=Object.create(a.prototype)).isInside=function(t){return this.box.containsPoint(t)},c.prototype.clip=function(t,i,e){t.beginPath();var s=this.box.max.x-this.box.min.x;if(this.invert)t.rect(this.box.min.x-1e4,-5e3,1e4,1e4),t.rect(this.box.max.x,-5e3,1e4,1e4),t.rect(this.box.min.x,this.box.min.y-1e4,s,1e4),t.rect(this.box.min.x,this.box.max.y,s,1e4);else{var n=this.box.max.y-this.box.min.y;t.fillRect(this.box.min.x,this.box.min.y,s,n)}t.clip()},(m.prototype=Object.create(l.prototype)).isInside=function(t){return t.length()<=this.radius},m.prototype.onPointerEnter=function(t,i){this.fillStyle="#CCCCCC"},m.prototype.onPointerLeave=function(t,i){this.fillStyle="#FFFFFF"},m.prototype.draw=function(t,i,e){t.fillStyle=this.fillStyle,t.beginPath(),t.arc(0,0,this.radius,0,2*Math.PI),t.fill(),t.lineWidth=1,t.strokeStyle=this.strokeStyle,t.beginPath(),t.arc(0,0,this.radius,0,2*Math.PI),t.stroke()},u.rotateTool=function(s){var t=new m;t.radius=4,t.layer=s.layer+1,t.onPointerDrag=function(t,i,e){s.rotation+=.001*e.x},s.add(t)},u.boxResizeTool=function(s){if(void 0!==s.box){var n=new m;n.radius=4,n.layer=s.layer+1,n.draggable=!0,n.onPointerDrag=function(t,i,e){l.prototype.onPointerDrag.call(this,t,i,e),s.box.min.copy(n.position),a()},s.add(n);var o=new m;o.radius=4,o.layer=s.layer+1,o.draggable=!0,o.onPointerDrag=function(t,i,e){l.prototype.onPointerDrag.call(this,t,i,e),s.box.max.x=o.position.x,s.box.min.y=o.position.y,a()},s.add(o);var r=new m;r.radius=4,r.layer=s.layer+1,r.draggable=!0,r.onPointerDrag=function(t,i,e){l.prototype.onPointerDrag.call(this,t,i,e),s.box.max.copy(r.position),a()},s.add(r);var h=new m;h.radius=4,h.layer=s.layer+1,h.draggable=!0,h.onPointerDrag=function(t,i,e){l.prototype.onPointerDrag.call(this,t,i,e),s.box.min.x=h.position.x,s.box.max.y=h.position.y,a()},s.add(h),a()}else console.warn("trenette.js: Helpers.boxResizeTool(), object box property missing.");function a(){n.position.copy(s.box.min),r.position.copy(s.box.max),o.position.set(s.box.max.x,s.box.min.y),h.position.set(s.box.min.x,s.box.max.y)}},(d.prototype=Object.create(l.prototype)).onPointerEnter=function(t,i){this.fillStyle="#CCCCCC"},d.prototype.onPointerLeave=function(t,i){this.fillStyle="#FFFFFF"},d.prototype.isInside=function(t){return this.box.containsPoint(t)},d.prototype.draw=function(t,i,e){var s=this.box.max.x-this.box.min.x,n=this.box.max.y-this.box.min.y;t.fillStyle=this.fillStyle,t.fillRect(this.box.min.x,this.box.min.y,s,n),t.lineWidth=1,t.strokeStyle=this.strokeStyle,t.strokeRect(this.box.min.x,this.box.min.y,s,n)},(x.prototype=Object.create(l.prototype)).draw=function(t,i,e){t.lineWidth=this.lineWidth,t.strokeStyle=this.strokeStyle,t.setLineDash(this.dashPattern),t.beginPath(),t.moveTo(this.from.x,this.from.y),t.lineTo(this.to.x,this.to.y),t.stroke()},(f.prototype=Object.create(l.prototype)).draw=function(t,i,e){t.font=this.font,t.textAlign=this.textAlign,t.fillStyle=this.color,t.textBaseline="middle",t.fillText(this.text,0,0)},(v.prototype=Object.create(l.prototype)).setImage=function(t){var i=this;this.image.onload=function(){i.box.min.set(0,0),i.box.max.set(this.naturalWidth,this.naturalHeight)},this.image.src=t},v.prototype.isInside=function(t){return this.box.containsPoint(t)},v.prototype.draw=function(t,i,e){0<this.image.src.length&&t.drawImage(this.image,0,0,this.image.naturalWidth,this.image.naturalHeight,this.box.min.x,this.box.min.y,this.box.max.x-this.box.min.x,this.box.max.y-this.box.min.y)},(b.prototype=Object.create(l.prototype)).transform=function(t,i,e){var s=i.matrix.clone();s.multiply(this.globalMatrix),this.element.style.transform=s.cssTransform(),this.element.style.width=this.size.x+"px",this.element.style.height=this.size.y+"px",this.element.style.display=this.visible?"block":"none"},(g.prototype=Object.create(l.prototype)).setImage=function(t){var i=this;this.image.onload=function(){i.box.min.set(0,0),i.box.max.set(this.naturalWidth,this.naturalHeight)},this.image.src=t},g.prototype.isInside=function(t){return this.box.containsPoint(t)},g.prototype.draw=function(t,i,e){var s=this.box.max.x-this.box.min.x,n=this.box.max.y-this.box.min.y;if(0<this.image.src.length){var o=t.createPattern(this.image,this.repetition);t.fillStyle=o,t.fillRect(this.box.min.x,this.box.min.y,s,n)}},t.Box=d,t.Box2=h,t.BoxMask=c,t.Circle=m,t.DOM=b,t.EventManager=n,t.Helpers=u,t.Image=v,t.Key=r,t.Line=x,t.Mask=a,t.Matrix=p,t.Object2D=l,t.Pattern=g,t.Pointer=y,t.Renderer=e,t.Text=f,t.UUID=i,t.Vector2=o,t.Viewport=s,Object.defineProperty(t,"__esModule",{value:!0})});
+!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports):"function"==typeof define&&define.amd?define(["exports"],i):i((t=t||self).Trenette={})}(this,function(t){"use strict";function s(){this.events=[]}function o(t,i){this.x=t||0,this.y=i||0}function p(t){void 0!==t?this.m=t:this.identity()}function i(){}function l(){this.uuid=i.generate(),this.children=[],this.parent=null,this.level=0,this.position=new o(0,0),this.origin=new o(0,0),this.scale=new o(1,1),this.rotation=0,this.visible=!0,this.layer=0,this.matrix=new p,this.globalMatrix=new p,this.inverseGlobalMatrix=new p,this.masks=[],this.matrixNeedsUpdate=!0,this.draggable=!1,this.pointerEvents=!0,this.ignoreViewport=!1,this.saveContextState=!0,this.restoreContextState=!0,this.pointerInside=!1,this.beingDragged=!1}function r(){this.pressed=!1,this.justPressed=!1,this.justReleased=!1}function y(t){this._keys=new Array(5),this._position=new o(0,0),this._positionUpdated=!1,this._delta=new o(0,0),this._wheel=0,this._wheelUpdated=!1,this._doubleClicked=new Array(5),this.keys=new Array(5),this.position=new o(0,0),this.delta=new o(0,0),this.wheel=0,this.doubleClicked=new Array(5),this.domElement=void 0!==t?t:window,this.canvas=null,this.events=new s;for(var i=0;i<5;i++)this._doubleClicked[i]=!1,this.doubleClicked[i]=!1,this._keys[i]=new r,this.keys[i]=new r;var e=this;if(void 0!==window.onmousewheel?this.events.add(this.domElement,"mousewheel",function(t){e._wheel=t.deltaY,e._wheelUpdated=!0}):void 0!==window.addEventListener?this.events.add(this.domElement,"DOMMouseScroll",function(t){e._wheel=30*t.detail,e._wheelUpdated=!0}):this.events.add(this.domElement,"wheel",function(t){e._wheel=t.deltaY,e._wheelUpdated=!0}),void 0!==window.ontouchstart||0<navigator.msMaxTouchPoints){var n=new o(0,0);this.events.add(this.domElement,"touchstart",function(t){var i=t.touches[0];e.updatePosition(i.clientX,i.clientY,0,0),e.updateKey(y.LEFT,r.DOWN),n.set(i.clientX,i.clientY)}),this.events.add(this.domElement,"touchend",function(t){e.updateKey(y.LEFT,r.UP)}),this.events.add(this.domElement,"touchcancel",function(t){e.updateKey(y.LEFT,r.UP)}),this.events.add(document.body,"touchmove",function(t){var i=t.touches[0];e.updatePosition(i.clientX,i.clientY,i.clientX-n.x,i.clientY-n.y),n.set(i.clientX,i.clientY)})}this.events.add(this.domElement,"mousemove",function(t){e.updatePosition(t.clientX,t.clientY,t.movementX,t.movementY)}),this.events.add(this.domElement,"mousedown",function(t){e.updateKey(t.which-1,r.DOWN)}),this.events.add(this.domElement,"mouseup",function(t){e.updateKey(t.which-1,r.UP)}),this.events.add(this.domElement,"dragstart",function(t){e.updateKey(t.which-1,r.UP)}),this.events.add(this.domElement,"dblclick",function(t){e._doubleClicked[t.which-1]=!0}),this.create()}function e(t,i){void 0===i&&(i={alpha:!0}),this.canvas=t,this.context=t.getContext("2d",{alpha:i.alpha}),this.context.imageSmoothingEnabled=!0,this.context.globalCompositeOperation="source-over",this.pointer=new y,this.pointer.setCanvas(t),this.autoClear=!0}function n(){this.uuid=i.generate(),this.position=new o(0,0),this.scale=1,this.rotation=0,this.matrix=new p,this.inverseMatrix=new p,this.matrixNeedsUpdate=!0,this.moveOnScale=!0,this.rotationPoint=null}function h(t,i){this.min=void 0!==t?t:new o,this.max=void 0!==i?i:new o}function a(){l.call(this)}function c(){a.call(this),this.box=new h(new o(-50,-35),new o(50,35)),this.invert=!1}function m(){l.call(this),this.radius=10,this.strokeStyle="#000000",this.fillStyle="#FFFFFF"}function u(){}function d(){l.call(this),this.box=new h(new o(-50,-35),new o(50,35)),this.strokeStyle="#000000",this.fillStyle="#FFFFFF"}function x(){l.call(this),this.from=new o,this.to=new o,this.strokeStyle="#000000",this.dashPattern=[5,5],this.lineWidth=1}function f(){l.call(this),this.text="",this.font="16px Arial",this.color="#000000",this.textAlign="center"}function v(t){l.call(this),this.box=new h,this.image=document.createElement("img"),void 0!==t&&this.setImage(t)}function b(t,i){l.call(this),this.parentDOM=t,this.element=document.createElement("div"),this.element.style.transformStyle="preserve-3d",this.element.style.position="absolute",this.element.style.top="0px",this.element.style.bottom="0px",this.element.style.transformOrigin="0px 0px",this.element.style.overflow="auto",this.element.style.pointerEvents="none",this.size=new o(100,100)}function g(t){l.call(this),this.box=new h,this.image=document.createElement("img"),this.repetition="repeat",void 0!==t&&this.setImage(t)}s.prototype.add=function(t,i,e){this.events.push([t,i,e,!1])},s.prototype.clear=function(){this.destroy(),this.events=[]},s.prototype.create=function(){for(var t=0;t<this.events.length;t++){var i=this.events[t];i[0].addEventListener(i[1],i[2]),i[3]=!0}},s.prototype.destroy=function(){for(var t=0;t<this.events.length;t++){var i=this.events[t];i[0].removeEventListener(i[1],i[2]),i[3]=!1}},o.prototype.set=function(t,i){this.x=t,this.y=i},o.prototype.setScalar=function(t){this.x=t,this.y=t},o.prototype.clone=function(){return new o(this.x,this.y)},o.prototype.copy=function(t){this.x=t.x,this.y=t.y},o.prototype.add=function(t){this.x+=t.x,this.y+=t.y},o.prototype.addScalar=function(t){this.x+=t,this.y+=t},o.prototype.addVectors=function(t,i){this.x=t.x+i.x,this.y=t.y+i.y},o.prototype.addScaledVector=function(t,i){this.x+=t.x*i,this.y+=t.y*i},o.prototype.sub=function(t){this.x-=t.x,this.y-=t.y},o.prototype.subScalar=function(t){this.x-=t,this.y-=t},o.prototype.subVectors=function(t,i){this.x=t.x-i.x,this.y=t.y-i.y},o.prototype.multiply=function(t){this.x*=t.x,this.y*=t.y},o.prototype.multiplyScalar=function(t){this.x*=t,this.y*=t},o.prototype.divide=function(t){this.x/=t.x,this.y/=t.y},o.prototype.divideScalar=function(t){return this.multiplyScalar(1/t)},o.prototype.min=function(t){this.x=Math.min(this.x,t.x),this.y=Math.min(this.y,t.y)},o.prototype.max=function(t){this.x=Math.max(this.x,t.x),this.y=Math.max(this.y,t.y)},o.prototype.clamp=function(t,i){this.x=Math.max(t.x,Math.min(i.x,this.x)),this.y=Math.max(t.y,Math.min(i.y,this.y))},o.prototype.clampScalar=function(t,i){this.x=Math.max(t,Math.min(i,this.x)),this.y=Math.max(t,Math.min(i,this.y))},o.prototype.clampLength=function(t,i){var e=this.length();return this.divideScalar(e||1).multiplyScalar(Math.max(t,Math.min(i,e)))},o.prototype.floor=function(){this.x=Math.floor(this.x),this.y=Math.floor(this.y)},o.prototype.ceil=function(){this.x=Math.ceil(this.x),this.y=Math.ceil(this.y)},o.prototype.round=function(){this.x=Math.round(this.x),this.y=Math.round(this.y)},o.prototype.roundToZero=function(){this.x=this.x<0?Math.ceil(this.x):Math.floor(this.x),this.y=this.y<0?Math.ceil(this.y):Math.floor(this.y)},o.prototype.negate=function(){return this.x=-this.x,this.y=-this.y,this},o.prototype.dot=function(t){return this.x*t.x+this.y*t.y},o.prototype.cross=function(t){return this.x*t.y-this.y*t.x},o.prototype.lengthSq=function(){return this.x*this.x+this.y*this.y},o.prototype.length=function(){return Math.sqrt(this.x*this.x+this.y*this.y)},o.prototype.manhattanLength=function(){return Math.abs(this.x)+Math.abs(this.y)},o.prototype.normalize=function(){return this.divideScalar(this.length()||1)},o.prototype.angle=function(){var t=Math.atan2(this.y,this.x);return t<0&&(t+=2*Math.PI),t},o.prototype.distanceTo=function(t){return Math.sqrt(this.distanceToSquared(t))},o.prototype.distanceToSquared=function(t){var i=this.x-t.x,e=this.y-t.y;return i*i+e*e},o.prototype.manhattanDistanceTo=function(t){return Math.abs(this.x-t.x)+Math.abs(this.y-t.y)},o.prototype.setLength=function(t){return this.normalize().multiplyScalar(t)},o.prototype.lerp=function(t,i){this.x+=(t.x-this.x)*i,this.y+=(t.y-this.y)*i},o.prototype.lerpVectors=function(t,i,e){return this.subVectors(i,t).multiplyScalar(e).add(t)},o.prototype.equals=function(t){return t.x===this.x&&t.y===this.y},o.prototype.fromArray=function(t,i){void 0===i&&(i=0),this.x=t[i],this.y=t[i+1]},o.prototype.toArray=function(t,i){return void 0===t&&(t=[]),void 0===i&&(i=0),t[i]=this.x,t[i+1]=this.y,t},o.prototype.rotateAround=function(t,i){var e=Math.cos(i),n=Math.sin(i),s=this.x-t.x,o=this.y-t.y;this.x=s*e-o*n+t.x,this.y=s*n+o*e+t.y},p.prototype.copy=function(t){this.m=t.m.slice(0)},p.prototype.clone=function(){return new p(this.m.slice(0))},p.prototype.identity=function(){this.m=[1,0,0,1,0,0]},p.prototype.multiply=function(t){var i=this.m[0]*t.m[0]+this.m[2]*t.m[1],e=this.m[1]*t.m[0]+this.m[3]*t.m[1],n=this.m[0]*t.m[2]+this.m[2]*t.m[3],s=this.m[1]*t.m[2]+this.m[3]*t.m[3],o=this.m[0]*t.m[4]+this.m[2]*t.m[5]+this.m[4],r=this.m[1]*t.m[4]+this.m[3]*t.m[5]+this.m[5];this.m=[i,e,n,s,o,r]},p.prototype.premultiply=function(t){var i=t.m[0]*this.m[0]+t.m[2]*this.m[1],e=t.m[1]*this.m[0]+t.m[3]*this.m[1],n=t.m[0]*this.m[2]+t.m[2]*this.m[3],s=t.m[1]*this.m[2]+t.m[3]*this.m[3],o=t.m[0]*this.m[4]+t.m[2]*this.m[5]+t.m[4],r=t.m[1]*this.m[4]+t.m[3]*this.m[5]+t.m[5];this.m=[i,e,n,s,o,r]},p.prototype.compose=function(t,i,e,n,s,o,r){if(this.m=[1,0,0,1,t,i],0!==r){var h=Math.cos(r),a=Math.sin(r);this.multiply(new p([h,a,-a,h,0,0]))}0===s&&0===o||this.multiply(new p([1,0,0,1,-s,-o])),1===e&&1===n||this.scale(e,n)},p.prototype.translate=function(t,i){this.m[4]+=this.m[0]*t+this.m[2]*i,this.m[5]+=this.m[1]*t+this.m[3]*i},p.prototype.rotate=function(t){var i=Math.cos(t),e=Math.sin(t),n=this.m[0]*i+this.m[2]*e,s=this.m[1]*i+this.m[3]*e,o=this.m[0]*-e+this.m[2]*i,r=this.m[1]*-e+this.m[3]*i;this.m[0]=n,this.m[1]=s,this.m[2]=o,this.m[3]=r},p.prototype.scale=function(t,i){this.m[0]*=t,this.m[1]*=t,this.m[2]*=i,this.m[3]*=i},p.prototype.setPosition=function(t,i){this.m[4]=t,this.m[5]=i},p.prototype.getScale=function(){return new o(this.m[0],this.m[3])},p.prototype.getPosition=function(){return new o(this.m[4],this.m[5])},p.prototype.skew=function(t,i){this.multiply(new p([1,Math.tan(i),Math.tan(t),1,0,0]))},p.prototype.determinant=function(){return 1/(this.m[0]*this.m[3]-this.m[1]*this.m[2])},p.prototype.getInverse=function(){var t=this.determinant();return new p([this.m[3]*t,-this.m[1]*t,-this.m[2]*t,this.m[0]*t,t*(this.m[2]*this.m[5]-this.m[3]*this.m[4]),t*(this.m[1]*this.m[4]-this.m[0]*this.m[5])])},p.prototype.transformPoint=function(t){return new o(t.x*this.m[0]+t.y*this.m[2]+this.m[4],t.x*this.m[1]+t.y*this.m[3]+this.m[5])},p.prototype.setContextTransform=function(t){t.setTransform(this.m[0],this.m[1],this.m[2],this.m[3],this.m[4],this.m[5])},p.prototype.tranformContext=function(t){t.transform(this.m[0],this.m[1],this.m[2],this.m[3],this.m[4],this.m[5])},p.prototype.cssTransform=function(){return"matrix("+this.m[0]+","+this.m[1]+","+this.m[2]+","+this.m[3]+","+this.m[4]+","+this.m[5]+")"},i.generate=function(){for(var s=[],t=0;t<256;t++)s[t]=(t<16?"0":"")+t.toString(16);return function(){var t=4294967295*Math.random()|0,i=4294967295*Math.random()|0,e=4294967295*Math.random()|0,n=4294967295*Math.random()|0;return(s[255&t]+s[t>>8&255]+s[t>>16&255]+s[t>>24&255]+"-"+s[255&i]+s[i>>8&255]+"-"+s[i>>16&15|64]+s[i>>24&255]+"-"+s[63&e|128]+s[e>>8&255]+"-"+s[e>>16&255]+s[e>>24&255]+s[255&n]+s[n>>8&255]+s[n>>16&255]+s[n>>24&255]).toUpperCase()}}(),l.prototype.traverse=function(t){t(this);for(var i=this.children,e=0;e<i.length;e++)i[e].traverse(t)},l.prototype.add=function(t){t.parent=this,t.level=this.level+1,t.traverse(function(t){null!==t.onAdd&&t.onAdd(this)}),this.children.push(t)},l.prototype.remove=function(t){var i=this.children.indexOf(t);-1!==i&&((t=this.children[i]).parent=null,t.level=0,t.traverse(function(t){null!==t.onRemove&&t.onRemove(this)}),this.children.splice(i,1))},l.prototype.isInside=function(t){return!1},l.prototype.updateMatrix=function(t){this.matrixNeedsUpdate&&(this.matrix.compose(this.position.x,this.position.y,this.scale.x,this.scale.y,this.origin.x,this.origin.y,this.rotation),this.globalMatrix.copy(this.matrix),null!==this.parent&&this.globalMatrix.premultiply(this.parent.globalMatrix),this.inverseGlobalMatrix=this.globalMatrix.getInverse())},l.prototype.transform=function(t,i){this.globalMatrix.tranformContext(t)},l.prototype.draw=function(t,i,e){},l.prototype.onAdd=null,l.prototype.onRemove=null,l.prototype.onUpdate=null,l.prototype.onPointerEnter=null,l.prototype.onPointerLeave=null,l.prototype.onPointerOver=null,l.prototype.onPointerDrag=function(t,i,e){this.position.add(e)},l.prototype.onButtonPressed=null,l.prototype.onButtonDown=null,l.prototype.onButtonUp=null,r.DOWN=-1,r.UP=1,r.RESET=0,(r.prototype.constructor=r).prototype.update=function(t){this.justPressed=!1,this.justReleased=!1,t===r.DOWN?(!1===this.pressed&&(this.justPressed=!0),this.pressed=!0):t===r.UP?(this.pressed&&(this.justReleased=!0),this.pressed=!1):t===r.RESET&&(this.justReleased=!1,this.justPressed=!1)},r.prototype.set=function(t,i,e){this.justPressed=t,this.pressed=i,this.justReleased=e},r.prototype.reset=function(){this.justPressed=!1,this.pressed=!1,this.justReleased=!1},((y.prototype=y).constructor=y).LEFT=0,y.MIDDLE=1,y.RIGHT=2,y.BACK=3,y.FORWARD=4,y.setCanvas=function(t){(this.canvas=t).pointerInside=!1,t.addEventListener("mouseenter",function(){this.pointerInside=!0}),t.addEventListener("mouseleave",function(){this.pointerInside=!1})},y.insideCanvas=function(){return null!==this.canvas&&this.canvas.pointerInside},y.buttonPressed=function(t){return this.keys[t].pressed},y.buttonDoubleClicked=function(t){return this.doubleClicked[t]},y.buttonJustPressed=function(t){return this.keys[t].justPressed},y.buttonJustReleased=function(t){return this.keys[t].justReleased},y.updatePosition=function(t,i,e,n){if(null!==this.canvas){var s=this.canvas.getBoundingClientRect();t-=s.left,i-=s.top}this._position.set(t,i),this._delta.x+=e,this._delta.y+=n,this._positionUpdated=!0},y.updateKey=function(t,i){-1<t&&this._keys[t].update(i)},y.update=function(){for(var t=0;t<5;t++)this._keys[t].justPressed&&this.keys[t].justPressed&&(this._keys[t].justPressed=!1),this._keys[t].justReleased&&this.keys[t].justReleased&&(this._keys[t].justReleased=!1),this.keys[t].set(this._keys[t].justPressed,this._keys[t].pressed,this._keys[t].justReleased),!0===this._doubleClicked[t]?(this.doubleClicked[t]=!0,this._doubleClicked[t]=!1):this.doubleClicked[t]=!1;this._wheelUpdated?(this.wheel=this._wheel,this._wheelUpdated=!1):this.wheel=0,this._positionUpdated?(this.delta.copy(this._delta),this.position.copy(this._position),this._delta.set(0,0),this._positionUpdated=!1):(this.delta.x=0,this.delta.y=0)},y.create=function(){this.events.create()},y.dispose=function(){this.events.destroy()},e.prototype.createRenderLoop=function(i,e,n){var s=this;!function t(){void 0!==n&&n(),s.update(i,e),requestAnimationFrame(t)}()},e.prototype.update=function(t,i){var e=[];t.traverse(function(t){t.visible&&e.push(t)}),e.sort(function(t,i){return i.layer===t.layer?i.level-t.level:i.layer-t.layer});var n=this.pointer;n.update(),i.updateControls(n),i.updateMatrix();for(var s=n.position.clone(),o=i.inverseMatrix.transformPoint(s),r=0;r<e.length;r++){if((a=e[r]).pointerEvents){var h=a.inverseGlobalMatrix.transformPoint(a.ignoreViewport?s:o);if(a.isInside(h)){if(a.pointerInside||null===a.onPointerEnter||a.onPointerEnter(n,i),null!==a.onPointerOver&&a.onPointerOver(n,i),n.buttonPressed(y.LEFT)&&null!==a.onButtonPressed&&a.onButtonPressed(n,i),n.buttonJustReleased(y.LEFT)&&null!==a.onButtonUp&&a.onButtonUp(n,i),n.buttonJustPressed(y.LEFT)&&(null!==a.onButtonDown&&a.onButtonDown(n,i),a.draggable)){a.beingDragged=!0;break}a.pointerInside=!0}else a.pointerInside&&(null!==a.onPointerLeave&&a.onPointerLeave(n,i),a.pointerInside=!1);n.buttonJustReleased(y.LEFT)&&a.draggable&&(a.beingDragged=!1)}}for(r=0;r<e.length;r++){var a;if((a=e[r]).beingDragged){var p=n.position.clone();p.sub(n.delta);var l=i.inverseMatrix.transformPoint(n.position),c=i.inverseMatrix.transformPoint(p);l.sub(c),null!==a.onPointerDrag&&a.onPointerDrag(n,i,l)}null!==a.onUpdate&&a.onUpdate()}t.traverse(function(t){t.updateMatrix()}),this.context.setTransform(1,0,0,1,0,0),this.autoClear&&this.context.clearRect(0,0,this.canvas.width,this.canvas.height);for(r=e.length-1;0<=r;r--)if(!e[r].isMask){e[r].saveContextState&&this.context.save();for(var m=e[r].masks,u=0;u<m.length;u++)m[u].ignoreViewport||i.matrix.setContextTransform(this.context),m[u].transform(this.context,i,this.canvas),m[u].clip(this.context,i,this.canvas);e[r].ignoreViewport?0<m.length&&this.context.setTransform(1,0,0,1,0,0):i.matrix.setContextTransform(this.context),e[r].transform(this.context,i,this.canvas),e[r].draw(this.context,i,this.canvas),e[r].restoreContextState&&this.context.restore()}},n.prototype.updateControls=function(t){if(0!==t.wheel&&(this.scale-=.001*t.wheel*this.scale,this.moveOnScale)){var i=t.wheel/this.scale,e=t.canvas.width/2,n=t.canvas.height/2;this.position.x+=(t.position.x-e)/e*i,this.position.y+=(t.position.y-n)/n*i}t.buttonPressed(y.RIGHT)&&t.buttonPressed(y.LEFT)?this.rotation+=.01*t.delta.angle():t.buttonPressed(y.RIGHT)&&(this.position.x+=t.delta.x,this.position.y+=t.delta.y)},n.prototype.updateMatrix=function(){this.matrixNeedsUpdate&&(this.matrix.compose(this.position.x,this.position.y,this.scale,this.scale,0,0,this.rotation),this.inverseMatrix=this.matrix.getInverse())},h.prototype.set=function(t,i){return this.min.copy(t),this.max.copy(i),this},h.prototype.setFromPoints=function(t){this.min=new o(1/0,1/0),this.max=new o(-1/0,-1/0);for(var i=0,e=t.length;i<e;i++)this.expandByPoint(t[i]);return this},h.prototype.setFromCenterAndSize=function(t,i){var e=(new o).copy(i).multiplyScalar(.5);return this.min.copy(t).sub(e),this.max.copy(t).add(e),this},h.prototype.clone=function(){var t=new h;return t.copy(this),t},h.prototype.copy=function(t){this.min.copy(t.min),this.max.copy(t.max)},h.prototype.isEmpty=function(){return this.max.x<this.min.x||this.max.y<this.min.y},h.prototype.getCenter=function(t){return void 0===t&&(t=new o),this.isEmpty()?t.set(0,0):t.addVectors(this.min,this.max).multiplyScalar(.5),t},h.prototype.getSize=function(t){return void 0===t&&(t=new o),this.isEmpty()?t.set(0,0):t.subVectors(this.max,this.min),t},h.prototype.expandByPoint=function(t){return this.min.min(t),this.max.max(t),this},h.prototype.expandByVector=function(t){this.min.sub(t),this.max.add(t)},h.prototype.expandByScalar=function(t){this.min.addScalar(-t),this.max.addScalar(t)},h.prototype.containsPoint=function(t){return!(t.x<this.min.x||t.x>this.max.x||t.y<this.min.y||t.y>this.max.y)},h.prototype.containsBox=function(t){return this.min.x<=t.min.x&&t.max.x<=this.max.x&&this.min.y<=t.min.y&&t.max.y<=this.max.y},h.prototype.intersectsBox=function(t){return!(t.max.x<this.min.x||t.min.x>this.max.x||t.max.y<this.min.y||t.min.y>this.max.y)},h.prototype.clampPoint=function(t,i){return void 0===i&&(i=new o),i.copy(t).clamp(this.min,this.max),i},h.prototype.distanceToPoint=function(t){return(new o).copy(t).clamp(this.min,this.max).sub(t).length()},h.prototype.intersect=function(t){this.min.max(t.min),this.max.min(t.max)},h.prototype.union=function(t){this.min.min(t.min),this.max.max(t.max)},h.prototype.translate=function(t){this.min.add(t),this.max.add(t)},h.prototype.equals=function(t){return t.min.equals(this.min)&&t.max.equals(this.max)},(a.prototype=Object.create(l.prototype)).isMask=!0,a.prototype.clip=function(t,i,e){},(c.prototype=Object.create(a.prototype)).isInside=function(t){return this.box.containsPoint(t)},c.prototype.clip=function(t,i,e){t.beginPath();var n=this.box.max.x-this.box.min.x;if(this.invert)t.rect(this.box.min.x-1e4,-5e3,1e4,1e4),t.rect(this.box.max.x,-5e3,1e4,1e4),t.rect(this.box.min.x,this.box.min.y-1e4,n,1e4),t.rect(this.box.min.x,this.box.max.y,n,1e4);else{var s=this.box.max.y-this.box.min.y;t.fillRect(this.box.min.x,this.box.min.y,n,s)}t.clip()},(m.prototype=Object.create(l.prototype)).isInside=function(t){return t.length()<=this.radius},m.prototype.onPointerEnter=function(t,i){this.fillStyle="#CCCCCC"},m.prototype.onPointerLeave=function(t,i){this.fillStyle="#FFFFFF"},m.prototype.draw=function(t,i,e){t.beginPath(),t.arc(0,0,this.radius,0,2*Math.PI),t.fillStyle=this.fillStyle,t.fill(),t.lineWidth=1,t.strokeStyle=this.strokeStyle,t.stroke()},u.rotateTool=function(n){var t=new m;t.radius=4,t.layer=n.layer+1,t.onPointerDrag=function(t,i,e){n.rotation+=.001*e.x},n.add(t)},u.boxResizeTool=function(n){if(void 0!==n.box){var s=new m;s.radius=4,s.layer=n.layer+1,s.draggable=!0,s.onPointerDrag=function(t,i,e){l.prototype.onPointerDrag.call(this,t,i,e),n.box.min.copy(s.position),a()},n.add(s);var o=new m;o.radius=4,o.layer=n.layer+1,o.draggable=!0,o.onPointerDrag=function(t,i,e){l.prototype.onPointerDrag.call(this,t,i,e),n.box.max.x=o.position.x,n.box.min.y=o.position.y,a()},n.add(o);var r=new m;r.radius=4,r.layer=n.layer+1,r.draggable=!0,r.onPointerDrag=function(t,i,e){l.prototype.onPointerDrag.call(this,t,i,e),n.box.max.copy(r.position),a()},n.add(r);var h=new m;h.radius=4,h.layer=n.layer+1,h.draggable=!0,h.onPointerDrag=function(t,i,e){l.prototype.onPointerDrag.call(this,t,i,e),n.box.min.x=h.position.x,n.box.max.y=h.position.y,a()},n.add(h),a()}else console.warn("trenette.js: Helpers.boxResizeTool(), object box property missing.");function a(){s.position.copy(n.box.min),r.position.copy(n.box.max),o.position.set(n.box.max.x,n.box.min.y),h.position.set(n.box.min.x,n.box.max.y)}},(d.prototype=Object.create(l.prototype)).onPointerEnter=function(t,i){this.fillStyle="#CCCCCC"},d.prototype.onPointerLeave=function(t,i){this.fillStyle="#FFFFFF"},d.prototype.isInside=function(t){return this.box.containsPoint(t)},d.prototype.draw=function(t,i,e){var n=this.box.max.x-this.box.min.x,s=this.box.max.y-this.box.min.y;t.fillStyle=this.fillStyle,t.fillRect(this.box.min.x,this.box.min.y,n,s),t.lineWidth=1,t.strokeStyle=this.strokeStyle,t.strokeRect(this.box.min.x,this.box.min.y,n,s)},(x.prototype=Object.create(l.prototype)).draw=function(t,i,e){t.lineWidth=this.lineWidth,t.strokeStyle=this.strokeStyle,t.setLineDash(this.dashPattern),t.beginPath(),t.moveTo(this.from.x,this.from.y),t.lineTo(this.to.x,this.to.y),t.stroke()},(f.prototype=Object.create(l.prototype)).draw=function(t,i,e){t.font=this.font,t.textAlign=this.textAlign,t.fillStyle=this.color,t.textBaseline="middle",t.fillText(this.text,0,0)},(v.prototype=Object.create(l.prototype)).setImage=function(t){var i=this;this.image.onload=function(){i.box.min.set(0,0),i.box.max.set(this.naturalWidth,this.naturalHeight)},this.image.src=t},v.prototype.isInside=function(t){return this.box.containsPoint(t)},v.prototype.draw=function(t,i,e){0<this.image.src.length&&t.drawImage(this.image,0,0,this.image.naturalWidth,this.image.naturalHeight,this.box.min.x,this.box.min.y,this.box.max.x-this.box.min.x,this.box.max.y-this.box.min.y)},(b.prototype=Object.create(l.prototype)).onAdd=function(){this.parentDOM.appendChild(this.element)},b.prototype.onRemove=function(){this.parentDOM.removeChild(this.element)},b.prototype.transform=function(t,i,e){var n=i.matrix.clone();n.multiply(this.globalMatrix),this.element.style.transform=n.cssTransform(),this.element.style.width=this.size.x+"px",this.element.style.height=this.size.y+"px",this.element.style.display=this.visible?"block":"none"},(g.prototype=Object.create(l.prototype)).setImage=function(t){var i=this;this.image.onload=function(){i.box.min.set(0,0),i.box.max.set(this.naturalWidth,this.naturalHeight)},this.image.src=t},g.prototype.isInside=function(t){return this.box.containsPoint(t)},g.prototype.draw=function(t,i,e){var n=this.box.max.x-this.box.min.x,s=this.box.max.y-this.box.min.y;if(0<this.image.src.length){var o=t.createPattern(this.image,this.repetition);t.fillStyle=o,t.fillRect(this.box.min.x,this.box.min.y,n,s)}},t.Box=d,t.Box2=h,t.BoxMask=c,t.Circle=m,t.DOM=b,t.EventManager=s,t.Helpers=u,t.Image=v,t.Key=r,t.Line=x,t.Mask=a,t.Matrix=p,t.Object2D=l,t.Pattern=g,t.Pointer=y,t.Renderer=e,t.Text=f,t.UUID=i,t.Vector2=o,t.Viewport=n,Object.defineProperty(t,"__esModule",{value:!0})});

build/trenette.module.js

@@ -699,2 +699,9 @@ /**
 	/**
+	 * Depth level in the object tree, objects with higher depth are drawn on top.
+	 *
+	 * The layer value is considered first. 
+	 */
+	this.level = 0;
+
+	/**
 	 * Position of the object.
@@ -829,2 +836,12 @@ */
 	object.parent = this;
+	object.level = this.level + 1;
+
+	object.traverse(function(child)
+	{
+		if(child.onAdd !== null)
+		{
+			child.onAdd(this);
+		}
+	});
+
 	this.children.push(object);
@@ -841,5 +858,17 @@ };
 	var index = this.children.indexOf(object);
+	
 	if(index !== -1)
 	{
-		this.children[index].parent = null;
+		var object = this.children[index];
+		object.parent = null;
+		object.level = 0;
+
+		object.traverse(function(child)
+		{
+			if(child.onRemove !== null)
+			{
+				child.onRemove(this);
+			}
+		});
+
 		this.children.splice(index, 1);
@@ -904,2 +933,16 @@ }
 /**
+ * Method called when the object its added to a parent.
+ *
+ * Receives (parent) as arguments.
+ */
+Object2D.prototype.onAdd = null;
+
+/**
+ * Method called when the object gets removed from its parent
+ *
+ * Receives (parent) as arguments.
+ */
+Object2D.prototype.onRemove = null;
+
+/**
  * Callback method called every time before the object is draw into the canvas.
@@ -951,2 +994,4 @@ *
  * Callback method called when the pointer button is pressed down (single time).
+ *
+ * Receives (pointer, viewport) as arguments.
  */
@@ -957,2 +1002,4 @@ Object2D.prototype.onButtonDown = null;
  * Callback method called when the pointer button is released (single time).
+ *
+ * Receives (pointer, viewport) as arguments.
  */
@@ -1443,4 +1490,12 @@ Object2D.prototype.onButtonUp = null;
  */
-function Renderer(canvas)
+function Renderer(canvas, options)
 {
+	if(options === undefined)
+	{
+		options = 
+		{
+			alpha: true
+		};
+	}
+
 	/**
@@ -1454,3 +1509,3 @@ * Canvas DOM element, has to be managed by the user.
 	 */
-	this.context = canvas.getContext("2d");
+	this.context = canvas.getContext("2d", {alpha: options.alpha});
 	this.context.imageSmoothingEnabled = true;
@@ -1525,2 +1580,7 @@ this.context.globalCompositeOperation = "source-over";
 	{
+		if(b.layer === a.layer)
+		{
+			return b.level - a.level;
+		}
+		
 		return b.layer - a.layer;
@@ -1653,3 +1713,2 @@ });
 	});
-	
 
@@ -1759,2 +1818,9 @@ this.context.setTransform(1, 0, 0, 1, 0, 0);
 	this.moveOnScale = true;
+
+	/**
+	 * Value of the initial point of rotation if the viewport is being rotated.
+	 *
+	 * Is set to null when the viewport is not being rotated.
+	 */
+	this.rotationPoint = null;
 }
@@ -1782,7 +1848,13 @@
 
-	if(pointer.buttonPressed(Pointer.RIGHT))
+	if(pointer.buttonPressed(Pointer.RIGHT) && pointer.buttonPressed(Pointer.LEFT))
 	{
+		this.rotation += pointer.delta.angle() * 1e-2;
+	}
+	else if(pointer.buttonPressed(Pointer.RIGHT))
+	{
 		this.position.x += pointer.delta.x;
 		this.position.y += pointer.delta.y;
 	}
+
+
 };
@@ -1882,3 +1954,2 @@
 {
-
 	return (this.max.x < this.min.x) || (this.max.y < this.min.y);
@@ -1892,3 +1963,10 @@ };
 {
-	return this.isEmpty() ? target.set(0, 0) : target.addVectors(this.min, this.max).multiplyScalar(0.5);
+	if(target === undefined)
+	{
+		target = new Vector2();
+	}
+
+	this.isEmpty() ? target.set(0, 0) : target.addVectors(this.min, this.max).multiplyScalar(0.5);
+
+	return target;
 };
@@ -1901,3 +1979,10 @@
 {
-	return this.isEmpty() ? target.set(0, 0) : target.subVectors(this.max, this.min);
+	if(target === undefined)
+	{
+		target = new Vector2();
+	}
+
+	this.isEmpty() ? target.set(0, 0) : target.subVectors(this.max, this.min);
+
+	return target;
 };
@@ -1973,3 +2058,10 @@
 {
-	return target.copy(point).clamp(this.min, this.max);
+	if(target === undefined)
+	{
+		target = new Vector2();
+	}
+
+	target.copy(point).clamp(this.min, this.max);
+
+	return target;
 };
@@ -2160,6 +2252,6 @@
 {
-	context.fillStyle = this.fillStyle;
-
 	context.beginPath();
 	context.arc(0, 0, this.radius, 0, 2 * Math.PI);
+	
+	context.fillStyle = this.fillStyle;
 	context.fill();
@@ -2169,5 +2261,2 @@
 	context.strokeStyle = this.strokeStyle;
-
-	context.beginPath();
-	context.arc(0, 0, this.radius, 0, 2 * Math.PI);
 	context.stroke();
@@ -2502,6 +2591,6 @@ };
  * @class
- * @param parent Parent DOM element that contains the drawing canvas.
+ * @param parentDOM Parent DOM element that contains the drawing canvas.
  * @param type Type of the DOM element (e.g. "div", "p", ...)
  */
-function DOM(parent, type)
+function DOM(parentDOM, type)
 {
@@ -2511,2 +2600,7 @@ Object2D.call(this);
 	/**
+	 * Parent element that contains this DOM div.
+	 */
+	this.parentDOM = parentDOM;
+
+	/**
 	 * DOM element contained by this object.
@@ -2524,3 +2618,2 @@ *
 	this.element.style.pointerEvents = "none";
-	parent.appendChild(this.element);
 	
@@ -2535,2 +2628,12 @@ /**
 
+DOM.prototype.onAdd = function()
+{
+	this.parentDOM.appendChild(this.element);
+};
+
+DOM.prototype.onRemove = function()
+{
+	this.parentDOM.removeChild(this.element);
+};
+
 DOM.prototype.transform = function(context, viewport, canvas)
@@ -2615,4 +2718,2 @@ {
 		var pattern = context.createPattern(this.image, this.repetition);
-		
-		//pattern.setTransform();
 
@@ -2619,0 +2720,0 @@ context.fillStyle = pattern;

package.json

 {
 	"name": "trenette.js",
-	"version": "0.1.4",
+	"version": "0.1.5",
 	"description": "trenette.js is a web library for building interactive diagrams and graphs.",
@@ -5,0 +5,0 @@ "main": "build/trenette.min.js",

README.md

 # trenette.js
 
  - Web based diagram and graph building framework.
- - Entity based diagram build system.
+ - Entity based diagram build system, entities are stores as a tree. Parent elements transformations affect the children transforms.
+ - Boxes, circle, custom shapes, lines, customizable elements.
+ - Support for DOM elements using CSS transforms (useful for text input, or more complex user interaction).
+ - Built in viewport controls with drag, zoom and move functions.
+ - Supports mobile web browsers.
 
 
-## Basic example
 
+![graph](C:\Users\joseferrao\Documents\Git\trenette.js\examples\graph.png)
 
-## Rendering pipeline
+### Getting started
 
- - 
+- There are a couple of example in the example folder, they can be used as base for your project.
 
+
+
+### Setup
+
+- Trenette is based on web canvas, it requires a DOM canvas element to draw its content.
+- It is necessary for the canvas element width and height parameters to be properly configured since their values are used to process user input.
+- When using other DOM elements with the framework is also necessary to setup a DOM div to store these elements. (Booth the canvas and division should have the same position and size and should be aligned).
+
+
+
+Custom Objects
+
+- Its possible to create custom graph elements by expanding the Object2D class, and overriding its draw(), transform() methods.
+
+
+
+Pointer events
+
+- The system supports multiple pointer events that can be used to control the objects and interact with the users.
+
+
+
+DOM Objects
+
+- Its possible to use DOM elements in the graph, by applying CSS transform to absolute positioned elements the system already provides a DOM base object that creates a basic division.
+
+
+
+### License
+
+ - This project is distributed under MIT license available on the repository page.
+

source/math/Box2.js

@@ -84,3 +84,2 @@ "use strict";
 {
-
 	return (this.max.x < this.min.x) || (this.max.y < this.min.y);
@@ -94,3 +93,10 @@ };
 {
-	return this.isEmpty() ? target.set(0, 0) : target.addVectors(this.min, this.max).multiplyScalar(0.5);
+	if(target === undefined)
+	{
+		target = new Vector2();
+	}
+
+	this.isEmpty() ? target.set(0, 0) : target.addVectors(this.min, this.max).multiplyScalar(0.5);
+
+	return target;
 };
@@ -103,3 +109,10 @@
 {
-	return this.isEmpty() ? target.set(0, 0) : target.subVectors(this.max, this.min);
+	if(target === undefined)
+	{
+		target = new Vector2();
+	}
+
+	this.isEmpty() ? target.set(0, 0) : target.subVectors(this.max, this.min);
+
+	return target;
 };
@@ -175,3 +188,10 @@
 {
-	return target.copy(point).clamp(this.min, this.max);
+	if(target === undefined)
+	{
+		target = new Vector2();
+	}
+
+	target.copy(point).clamp(this.min, this.max);
+
+	return target;
 };
@@ -178,0 +198,0 @@

source/Object2D.js

@@ -30,2 +30,9 @@ "use strict";
 	/**
+	 * Depth level in the object tree, objects with higher depth are drawn on top.
+	 *
+	 * The layer value is considered first. 
+	 */
+	this.level = 0;
+
+	/**
 	 * Position of the object.
@@ -160,2 +167,12 @@ */
 	object.parent = this;
+	object.level = this.level + 1;
+
+	object.traverse(function(child)
+	{
+		if(child.onAdd !== null)
+		{
+			child.onAdd(this);
+		}
+	});
+
 	this.children.push(object);
@@ -172,5 +189,17 @@ };
 	var index = this.children.indexOf(object);
+	
 	if(index !== -1)
 	{
-		this.children[index].parent = null;
+		var object = this.children[index];
+		object.parent = null;
+		object.level = 0;
+
+		object.traverse(function(child)
+		{
+			if(child.onRemove !== null)
+			{
+				child.onRemove(this);
+			}
+		});
+
 		this.children.splice(index, 1)
@@ -235,2 +264,16 @@ }
 /**
+ * Method called when the object its added to a parent.
+ *
+ * Receives (parent) as arguments.
+ */
+Object2D.prototype.onAdd = null;
+
+/**
+ * Method called when the object gets removed from its parent
+ *
+ * Receives (parent) as arguments.
+ */
+Object2D.prototype.onRemove = null;
+
+/**
  * Callback method called every time before the object is draw into the canvas.
@@ -282,2 +325,4 @@ *
  * Callback method called when the pointer button is pressed down (single time).
+ *
+ * Receives (pointer, viewport) as arguments.
  */
@@ -288,2 +333,4 @@ Object2D.prototype.onButtonDown = null;
  * Callback method called when the pointer button is released (single time).
+ *
+ * Receives (pointer, viewport) as arguments.
  */
@@ -290,0 +337,0 @@ Object2D.prototype.onButtonUp = null;

source/objects/Circle.js

@@ -50,6 +50,6 @@ "use strict";
 {
-	context.fillStyle = this.fillStyle;
-
 	context.beginPath();
 	context.arc(0, 0, this.radius, 0, 2 * Math.PI);
+	
+	context.fillStyle = this.fillStyle;
 	context.fill();
@@ -59,5 +59,2 @@
 	context.strokeStyle = this.strokeStyle;
-
-	context.beginPath();
-	context.arc(0, 0, this.radius, 0, 2 * Math.PI);
 	context.stroke();
@@ -64,0 +61,0 @@ };

source/objects/DOM.js

@@ -14,6 +14,6 @@ "use strict";
  * @class
- * @param parent Parent DOM element that contains the drawing canvas.
+ * @param parentDOM Parent DOM element that contains the drawing canvas.
  * @param type Type of the DOM element (e.g. "div", "p", ...)
  */
-function DOM(parent, type)
+function DOM(parentDOM, type)
 {
@@ -23,2 +23,7 @@ Object2D.call(this);
 	/**
+	 * Parent element that contains this DOM div.
+	 */
+	this.parentDOM = parentDOM;
+
+	/**
 	 * DOM element contained by this object.
@@ -36,3 +41,2 @@ *
 	this.element.style.pointerEvents = "none";
-	parent.appendChild(this.element);
 	
@@ -47,2 +51,12 @@ /**
 
+DOM.prototype.onAdd = function()
+{
+	this.parentDOM.appendChild(this.element);
+};
+
+DOM.prototype.onRemove = function()
+{
+	this.parentDOM.removeChild(this.element);
+};
+
 DOM.prototype.transform = function(context, viewport, canvas)
@@ -49,0 +63,0 @@ {

source/objects/Pattern.js

@@ -73,4 +73,2 @@ "use strict";
 		var pattern = context.createPattern(this.image, this.repetition);
-		
-		//pattern.setTransform();
 
@@ -77,0 +75,0 @@ context.fillStyle = pattern;

source/Renderer.js

@@ -12,4 +12,12 @@ "use strict";
  */
-function Renderer(canvas)
+function Renderer(canvas, options)
 {
+	if(options === undefined)
+	{
+		options = 
+		{
+			alpha: true
+		};
+	}
+
 	/**
@@ -23,3 +31,3 @@ * Canvas DOM element, has to be managed by the user.
 	 */
-	this.context = canvas.getContext("2d");
+	this.context = canvas.getContext("2d", {alpha: options.alpha});
 	this.context.imageSmoothingEnabled = true;
@@ -94,2 +102,7 @@ this.context.globalCompositeOperation = "source-over";
 	{
+		if(b.layer === a.layer)
+		{
+			return b.level - a.level;
+		}
+		
 		return b.layer - a.layer;
@@ -222,3 +235,2 @@ });
 	});
-	
 
@@ -225,0 +237,0 @@ this.context.setTransform(1, 0, 0, 1, 0, 0);

source/Trenette.js

@@ -8,5 +8,2 @@ "use strict";
 
-export {Mask} from "./mask/Mask.js";
-export {BoxMask} from "./mask/BoxMask.js";
-
 export {Key} from "./input/Key.js";
@@ -20,2 +17,4 @@ export {Pointer} from "./input/Pointer.js";
 
+export {Mask} from "./objects/mask/Mask.js";
+export {BoxMask} from "./objects/mask/BoxMask.js";
 export {Box} from "./objects/Box.js";
@@ -22,0 +21,0 @@ export {Circle} from "./objects/Circle.js";

source/Viewport.js

@@ -56,2 +56,9 @@ "use strict";
 	this.moveOnScale = true;
+
+	/**
+	 * Value of the initial point of rotation if the viewport is being rotated.
+	 *
+	 * Is set to null when the viewport is not being rotated.
+	 */
+	this.rotationPoint = null;
 }
@@ -79,7 +86,13 @@
 
-	if(pointer.buttonPressed(Pointer.RIGHT))
+	if(pointer.buttonPressed(Pointer.RIGHT) && pointer.buttonPressed(Pointer.LEFT))
 	{
+		this.rotation += pointer.delta.angle() * 1e-2;
+	}
+	else if(pointer.buttonPressed(Pointer.RIGHT))
+	{
 		this.position.x += pointer.delta.x;
 		this.position.y += pointer.delta.y;
 	}
+
+
 };
@@ -86,0 +99,0 @@

No alert changes

Improved metrics

Total package byte prevSize

1787346

increased by2.09%

Number of package files

108

increased by2.86%

Lines of code

7668

increased by3.36%

Number of lines in readme file

50

increased by257.14%

No dependency changes