trenette.js
Advanced tools
trenette.js - npm Package Compare versions
Comparing version 0.1.2 to 0.1.3
@@ -576,3 +576,3 @@ (function (global, factory) { | ||
| /** | ||
| * Implements all UUID related methods. | ||
| * Class to implement UUID generation methods. | ||
| * | ||
@@ -587,2 +587,4 @@ * @class | ||
| * http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript/21963136#21963136 | ||
| * | ||
| * @static | ||
| */ | ||
@@ -688,2 +690,9 @@ UUID.generate = (function () | ||
| /** | ||
| * Masks being applied to this object. | ||
| * | ||
| * Multiple masks can be used simultaneously. | ||
| */ | ||
| this.masks = []; | ||
| /** | ||
| * If true the matrix is updated before rendering the object. | ||
@@ -701,2 +710,9 @@ */ | ||
| /** | ||
| * Indicates if this object uses pointer events. | ||
| * | ||
| * Can be set false to skip the pointer interaction events. | ||
| */ | ||
| this.pointerEvents = true; | ||
| /** | ||
| * Flag to indicate wheter this objet ignores the viewport transformation. | ||
@@ -717,7 +733,2 @@ */ | ||
| /** | ||
| * Flag to indicate if the context of canvas should be restored after render. | ||
| */ | ||
| this.restoreContextState = true; | ||
| /** | ||
| * Flag indicating if the pointer is inside of the element. | ||
@@ -809,3 +820,8 @@ * | ||
| * | ||
| * It is assumed that the viewport transform is pre-applied to the context. | ||
| * | ||
| * Can also be used for pre rendering logic. | ||
| * | ||
| * @param {CanvasContext} context Canvas 2d drawing context. | ||
| * @param {Viewport} viewport Viewport applied to the canvas. | ||
| */ | ||
@@ -822,5 +838,7 @@ Object2D.prototype.transform = function(context, viewport) | ||
| * | ||
| * @param context Canvas 2d drawing context. | ||
| * @param {CanvasContext} context Canvas 2d drawing context. | ||
| * @param {Viewport} viewport Viewport applied to the canvas. | ||
| * @param {DOM} canvas DOM canvas element where the content is being drawn. | ||
| */ | ||
| Object2D.prototype.draw = function(context, viewport){}; | ||
| Object2D.prototype.draw = function(context, viewport, canvas){}; | ||
@@ -1391,2 +1409,29 @@ /** | ||
| /** | ||
| * Creates a infinite render loop to render the group into a viewport each frame. | ||
| * | ||
| * The render loop cannot be destroyed. | ||
| * | ||
| * @param {Object2D} group Group to be rendererd. | ||
| * @param {Viewport} viewport Viewport into the objects. | ||
| * @param {Function} onUpdate Function called before rendering the frame. | ||
| */ | ||
| Renderer.prototype.createRenderLoop = function(group, viewport, onUpdate) | ||
| { | ||
| var self = this; | ||
| function loop() | ||
| { | ||
| if(onUpdate !== undefined) | ||
| { | ||
| onUpdate(); | ||
| } | ||
| self.update(group, viewport); | ||
| requestAnimationFrame(loop); | ||
| } | ||
| loop(); | ||
| }; | ||
| /** | ||
| * Update the renderer state, update the input handlers, calculate the object and viewport transformation matrices. | ||
@@ -1398,3 +1443,3 @@ * | ||
| * | ||
| * Should be called at a fixed rate preferably using the requestAnimationFrame() method. | ||
| * Should be called at a fixed rate preferably using the requestAnimationFrame() method, its also possible to use the createRenderLoop() method, that automatically creates a infinite render loop. | ||
| * | ||
@@ -1434,71 +1479,75 @@ * @param object Object to be updated. | ||
| // Object transformation matrices | ||
| // Object pointer events | ||
| for(var i = 0; i < objects.length; i++) | ||
| { | ||
| var child = objects[i]; | ||
| var childPoint = child.inverseGlobalMatrix.transformPoint(child.ignoreViewport ? point : viewportPoint); | ||
| // Check if the pointer pointer is inside | ||
| if(child.isInside(childPoint)) | ||
| //Process the | ||
| if(child.pointerEvents) | ||
| { | ||
| // Pointer enter | ||
| if(!child.pointerInside && child.onPointerEnter !== null) | ||
| { | ||
| child.onPointerEnter(pointer, viewport); | ||
| } | ||
| var childPoint = child.inverseGlobalMatrix.transformPoint(child.ignoreViewport ? point : viewportPoint); | ||
| // Pointer over | ||
| if(child.onPointerOver !== null) | ||
| // Check if the pointer pointer is inside | ||
| if(child.isInside(childPoint)) | ||
| { | ||
| child.onPointerOver(pointer, viewport); | ||
| } | ||
| // Pointer enter | ||
| if(!child.pointerInside && child.onPointerEnter !== null) | ||
| { | ||
| child.onPointerEnter(pointer, viewport); | ||
| } | ||
| // Pointer pressed | ||
| if(pointer.buttonPressed(Pointer.LEFT) && child.onButtonPressed !== null) | ||
| { | ||
| child.onButtonPressed(pointer, viewport); | ||
| } | ||
| // Pointer over | ||
| if(child.onPointerOver !== null) | ||
| { | ||
| child.onPointerOver(pointer, viewport); | ||
| } | ||
| // Just released | ||
| if(pointer.buttonJustReleased(Pointer.LEFT) && child.onButtonUp !== null) | ||
| { | ||
| child.onButtonUp(pointer, viewport); | ||
| } | ||
| // Pointer pressed | ||
| if(pointer.buttonPressed(Pointer.LEFT) && child.onButtonPressed !== null) | ||
| { | ||
| child.onButtonPressed(pointer, viewport); | ||
| } | ||
| // Pointer just pressed | ||
| if(pointer.buttonJustPressed(Pointer.LEFT)) | ||
| { | ||
| if(child.onButtonDown !== null) | ||
| { | ||
| child.onButtonDown(pointer, viewport); | ||
| // Just released | ||
| if(pointer.buttonJustReleased(Pointer.LEFT) && child.onButtonUp !== null) | ||
| { | ||
| child.onButtonUp(pointer, viewport); | ||
| } | ||
| if(child.draggable) | ||
| // Pointer just pressed | ||
| if(pointer.buttonJustPressed(Pointer.LEFT)) | ||
| { | ||
| child.beingDragged = true; | ||
| if(child.onButtonDown !== null) | ||
| { | ||
| child.onButtonDown(pointer, viewport); | ||
| } | ||
| // Only start a drag operation on the top element. | ||
| break; | ||
| // Drag object and break to only start a drag operation on the top element. | ||
| if(child.draggable) | ||
| { | ||
| child.beingDragged = true; | ||
| break; | ||
| } | ||
| } | ||
| child.pointerInside = true; | ||
| } | ||
| else if(child.pointerInside) | ||
| { | ||
| // Pointer leave | ||
| if(child.onPointerLeave !== null) | ||
| { | ||
| child.onPointerLeave(pointer, viewport); | ||
| } | ||
| child.pointerInside = true; | ||
| } | ||
| else if(child.pointerInside) | ||
| { | ||
| // Pointer leave | ||
| if(child.onPointerLeave !== null) | ||
| { | ||
| child.onPointerLeave(pointer, viewport); | ||
| child.pointerInside = false; | ||
| } | ||
| child.pointerInside = false; | ||
| } | ||
| // Stop object drag | ||
| if(pointer.buttonJustReleased(Pointer.LEFT)) | ||
| { | ||
| if(child.draggable) | ||
| { | ||
| child.beingDragged = false; | ||
| // Stop object drag | ||
| if(pointer.buttonJustReleased(Pointer.LEFT)) | ||
| { | ||
| if(child.draggable) | ||
| { | ||
| child.beingDragged = false; | ||
| } | ||
| } | ||
@@ -1508,3 +1557,3 @@ } | ||
| // Pointer drag event | ||
| // Object drag events and update logic | ||
| for(var i = 0; i < objects.length; i++) | ||
@@ -1514,2 +1563,3 @@ { | ||
| // Pointer drag event | ||
| if(child.beingDragged) | ||
@@ -1537,6 +1587,10 @@ { | ||
| } | ||
| } | ||
| // Update transformation matrices | ||
| object.traverse(function(child) | ||
| { | ||
| child.updateMatrix(); | ||
| } | ||
| }); | ||
| // Sort objects by layer | ||
@@ -1547,16 +1601,19 @@ objects.sort(function(a, b) | ||
| }); | ||
| // Clear canvas | ||
| this.context.setTransform(1, 0, 0, 1, 0, 0); | ||
| // Clear canvas content | ||
| if(this.autoClear) | ||
| { | ||
| this.context.setTransform(1, 0, 0, 1, 0, 0); | ||
| this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); | ||
| } | ||
| // Set viewport matrix transform | ||
| viewport.matrix.setContextTransform(this.context); | ||
| // Render into the canvas | ||
| for(var i = 0; i < objects.length; i++) | ||
| { | ||
| if(objects[i].isMask) | ||
| { | ||
| continue; | ||
| } | ||
| if(objects[i].saveContextState) | ||
@@ -1567,9 +1624,28 @@ { | ||
| if(objects[i].ignoreViewport) | ||
| // Apply all masks | ||
| var masks = objects[i].masks; | ||
| for(var j = 0; j < masks.length; j++) | ||
| { | ||
| if(!masks[j].ignoreViewport) | ||
| { | ||
| viewport.matrix.setContextTransform(this.context); | ||
| } | ||
| masks[j].transform(this.context, viewport, this.canvas); | ||
| masks[j].clip(this.context, viewport, this.canvas); | ||
| } | ||
| // Set the viewport transform | ||
| if(!objects[i].ignoreViewport) | ||
| { | ||
| viewport.matrix.setContextTransform(this.context); | ||
| } | ||
| else if(masks.length > 0) | ||
| { | ||
| this.context.setTransform(1, 0, 0, 1, 0, 0); | ||
| } | ||
| objects[i].transform(this.context, viewport); | ||
| objects[i].draw(this.context, viewport); | ||
| // Apply the object transform to the canvas context | ||
| objects[i].transform(this.context, viewport, this.canvas); | ||
| objects[i].draw(this.context, viewport, this.canvas); | ||
@@ -1674,24 +1750,2 @@ if(objects[i].restoreContextState) | ||
| /** | ||
| * A stencil can be used to set the drawing region. | ||
| * | ||
| * Stencils are treated as objects their shaphe is used to filter other objects shape. | ||
| * | ||
| * Multiple stencil objects can be active simulatenously. | ||
| * | ||
| * @class | ||
| */ | ||
| function Stencil() | ||
| { | ||
| //TODO <ADD CODE HERE> | ||
| } | ||
| /** | ||
| * Activate the stencil. | ||
| */ | ||
| Stencil.prototype.draw = function() | ||
| { | ||
| // body... | ||
| }; | ||
| /** | ||
| * Box is described by a minimum and maximum points. | ||
@@ -1768,8 +1822,16 @@ * | ||
| /** | ||
| * Check if the box is empty (size equals zero or is negative). | ||
| * | ||
| * The box size is condireded valid on two negative axis. | ||
| */ | ||
| Box2.prototype.isEmpty = function() | ||
| { | ||
| // this is a more robust check for empty than ( volume <= 0 ) because volume can get positive with two negative axes | ||
| return (this.max.x < this.min.x) || (this.max.y < this.min.y); | ||
| }; | ||
| /** | ||
| * Calculate the center point of the box. | ||
| */ | ||
| Box2.prototype.getCenter = function(target) | ||
@@ -1780,2 +1842,5 @@ { | ||
| /** | ||
| * Get the size of the box. | ||
| */ | ||
| Box2.prototype.getSize = function(target) | ||
@@ -1786,2 +1851,5 @@ { | ||
| /** | ||
| * Expand the box to contain a new point. | ||
| */ | ||
| Box2.prototype.expandByPoint = function(point) | ||
@@ -1795,2 +1863,7 @@ { | ||
| /** | ||
| * Expand the box by adding a border with the vector size. | ||
| * | ||
| * Vector is subtracted from min and added to the max points. | ||
| */ | ||
| Box2.prototype.expandByVector = function(vector) | ||
@@ -1802,2 +1875,5 @@ { | ||
| /** | ||
| * Expand the box by adding a border with the scalar value. | ||
| */ | ||
| Box2.prototype.expandByScalar = function(scalar) | ||
@@ -1809,2 +1885,8 @@ { | ||
| /** | ||
| * Check if the box contains a point inside. | ||
| * | ||
| * @param {Vector2} point | ||
| * @return {boolean} True if the box contains point. | ||
| */ | ||
| Box2.prototype.containsPoint = function(point) | ||
@@ -1815,2 +1897,10 @@ { | ||
| /** | ||
| * Check if the box fully contains another box inside (different from intersects box). | ||
| * | ||
| * Only returns true if the box is fully contained. | ||
| * | ||
| * @param {Box2} box | ||
| * @return {boolean} True if the box contains box. | ||
| */ | ||
| Box2.prototype.containsBox = function(box) | ||
@@ -1825,2 +1915,3 @@ { | ||
| * @param {Box2} box | ||
| * @return {boolean} True if the boxes intersect each other. | ||
| */ | ||
@@ -1898,2 +1989,81 @@ Box2.prototype.intersectsBox = function(box) | ||
| /** | ||
| * A mask can be used to set the drawing region. | ||
| * | ||
| * Masks are treated as objects their shape is used to filter other objects shape. | ||
| * | ||
| * Multiple mask objects can be active simulatenously, they have to be attached to the object mask list to filter the render region. | ||
| * | ||
| * @class | ||
| */ | ||
| function Mask() | ||
| { | ||
| Object2D.call(this); | ||
| } | ||
| Mask.prototype = Object.create(Object2D.prototype); | ||
| Mask.prototype.isMask = true; | ||
| /** | ||
| * Clip the canvas context, to ensure that next objects being drawn are cliped to the path stored here. | ||
| * | ||
| * @param {CanvasContext} context Canvas 2d drawing context. | ||
| * @param {Viewport} viewport Viewport applied to the canvas. | ||
| * @param {DOM} canvas DOM canvas element where the content is being drawn. | ||
| */ | ||
| Mask.prototype.clip = function(context, viewport, canvas){}; | ||
| /** | ||
| * Box mask can be used to clear a box mask region. | ||
| * | ||
| * It will limit the drwaing region to this box. | ||
| * | ||
| * @class | ||
| * @extends {Mask} | ||
| */ | ||
| function BoxMask() | ||
| { | ||
| Mask.call(this); | ||
| /** | ||
| * Box object containing the size of the object. | ||
| */ | ||
| this.box = new Box2(new Vector2(-50, -35), new Vector2(50, 35)); | ||
| /** | ||
| * If inverted the mask considers the outside of the box instead of the inside. | ||
| */ | ||
| this.invert = false; | ||
| } | ||
| BoxMask.prototype = Object.create(Mask.prototype); | ||
| BoxMask.prototype.isInside = function(point) | ||
| { | ||
| return this.box.containsPoint(point); | ||
| }; | ||
| BoxMask.prototype.clip = function(context, viewport, canvas) | ||
| { | ||
| context.beginPath(); | ||
| var width = this.box.max.x - this.box.min.x; | ||
| if(this.invert) | ||
| { | ||
| context.rect(this.box.min.x - 1e4, -5e3, 1e4, 1e4); | ||
| context.rect(this.box.max.x, -5e3, 1e4, 1e4); | ||
| context.rect(this.box.min.x, this.box.min.y - 1e4, width, 1e4); | ||
| context.rect(this.box.min.x, this.box.max.y, width, 1e4); | ||
| } | ||
| else | ||
| { | ||
| var height = this.box.max.y - this.box.min.y; | ||
| context.fillRect(this.box.min.x, this.box.min.y, width, height); | ||
| } | ||
| context.clip(); | ||
| }; | ||
| /** | ||
| * Circle object draw a circular object, into the canvas. | ||
@@ -1940,3 +2110,3 @@ * | ||
| Circle.prototype.draw = function(context) | ||
| Circle.prototype.draw = function(context, viewport, canvas) | ||
| { | ||
@@ -1957,7 +2127,15 @@ context.fillStyle = this.fillStyle; | ||
| /** | ||
| * Class contains helper functions to create editing object tools. | ||
| * | ||
| * @class | ||
| */ | ||
| function Helpers(){} | ||
| /** | ||
| * Create a rotation tool | ||
| * Create a rotation tool helper. | ||
| * | ||
| * When the object is dragged is changes the parent object rotation. | ||
| * | ||
| * @static | ||
| */ | ||
@@ -1982,2 +2160,4 @@ Helpers.rotateTool = function(object) | ||
| * This method required to object to have a box property. | ||
| * | ||
| * @static | ||
| */ | ||
@@ -2099,3 +2279,3 @@ Helpers.boxResizeTool = function(object) | ||
| Box.prototype.draw = function(context) | ||
| Box.prototype.draw = function(context, viewport, canvas) | ||
| { | ||
@@ -2154,3 +2334,3 @@ var width = this.box.max.x - this.box.min.x; | ||
| Line.prototype.draw = function(context) | ||
| Line.prototype.draw = function(context, viewport, canvas) | ||
| { | ||
@@ -2199,3 +2379,3 @@ context.lineWidth = this.lineWidth; | ||
| Text.prototype.draw = function(context) | ||
| Text.prototype.draw = function(context, viewport, canvas) | ||
| { | ||
@@ -2261,3 +2441,3 @@ context.font = this.font; | ||
| Image.prototype.draw = function(context) | ||
| Image.prototype.draw = function(context, viewport, canvas) | ||
| { | ||
@@ -2302,3 +2482,3 @@ context.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); | ||
| DOM.prototype.draw = function(context, viewport) | ||
| DOM.prototype.draw = function(context, viewport, canvas) | ||
| { | ||
@@ -2371,3 +2551,3 @@ // CSS trasnformation matrix | ||
| Pattern.prototype.draw = function(context, viewport) | ||
| Pattern.prototype.draw = function(context, viewport, canvas) | ||
| { | ||
@@ -2386,2 +2566,3 @@ var width = this.box.max.x - this.box.min.x; | ||
| exports.Box2 = Box2; | ||
| exports.BoxMask = BoxMask; | ||
| exports.Circle = Circle; | ||
@@ -2394,2 +2575,3 @@ exports.DOM = DOM; | ||
| exports.Line = Line; | ||
| exports.Mask = Mask; | ||
| exports.Matrix = Matrix; | ||
@@ -2400,3 +2582,2 @@ exports.Object2D = Object2D; | ||
| exports.Renderer = Renderer; | ||
| exports.Stencil = Stencil; | ||
| exports.Text = Text; | ||
@@ -2403,0 +2584,0 @@ exports.UUID = UUID; |
@@ -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.matrixNeedsUpdate=!0,this.draggable=!1,this.ignoreViewport=!1,this.saveContextState=!0,this.restoreContextState=!0,this.restoreContextState=!0,this.pointerInside=!1,this.beingDragged=!1}function r(){this.pressed=!1,this.justPressed=!1,this.justReleased=!1}function c(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(c.LEFT,r.DOWN),s.set(i.clientX,i.clientY)}),this.events.add(this.domElement,"touchend",function(t){e.updateKey(c.LEFT,r.UP)}),this.events.add(this.domElement,"touchcancel",function(t){e.updateKey(c.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 c,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(){}function a(t,i){this.min=void 0!==t?t:new o,this.max=void 0!==i?i:new o}function u(){l.call(this),this.radius=10,this.strokeStyle="#000000",this.fillStyle="#FFFFFF"}function m(){}function y(){l.call(this),this.box=new a(new o(-50,-35),new o(50,35)),this.strokeStyle="#000000",this.fillStyle="#FFFFFF"}function d(){l.call(this),this.from=new o,this.to=new o,this.strokeStyle="#000000",this.dashPattern=[5,5],this.lineWidth=1}function x(){l.call(this),this.text="",this.font="16px Arial",this.color="#000000",this.textAlign="center"}function f(t){l.call(this),this.box=new a,this.image=document.createElement("img"),void 0!==t&&this.setImage(t)}function v(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",t.appendChild(this.element),this.size=new o(100,100)}function b(t){l.call(this),this.box=new a,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){},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},((c.prototype=c).constructor=c).LEFT=0,c.MIDDLE=1,c.RIGHT=2,c.BACK=3,c.FORWARD=4,c.setCanvas=function(t){(this.canvas=t).pointerInside=!1,t.addEventListener("mouseenter",function(){this.pointerInside=!0}),t.addEventListener("mouseleave",function(){this.pointerInside=!1})},c.insideCanvas=function(){return null!==this.canvas&&this.canvas.pointerInside},c.buttonPressed=function(t){return this.keys[t].pressed},c.buttonDoubleClicked=function(t){return this.doubleClicked[t]},c.buttonJustPressed=function(t){return this.keys[t].justPressed},c.buttonJustReleased=function(t){return this.keys[t].justReleased},c.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},c.updateKey=function(t,i){-1<t&&this._keys[t].update(i)},c.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)},c.create=function(){this.events.create()},c.dispose=function(){this.events.destroy()},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++){var h=(a=e[r]).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(c.LEFT)&&null!==a.onButtonPressed&&a.onButtonPressed(s,i),s.buttonJustReleased(c.LEFT)&&null!==a.onButtonUp&&a.onButtonUp(s,i),s.buttonJustPressed(c.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(c.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),u=i.inverseMatrix.transformPoint(p);l.sub(u),null!==a.onPointerDrag&&a.onPointerDrag(s,i,l)}null!==a.onUpdate&&a.onUpdate(),a.updateMatrix()}e.sort(function(t,i){return t.layer-i.layer}),this.autoClear&&(this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.canvas.width,this.canvas.height)),i.matrix.setContextTransform(this.context);for(r=0;r<e.length;r++)e[r].saveContextState&&this.context.save(),e[r].ignoreViewport&&this.context.setTransform(1,0,0,1,0,0),e[r].transform(this.context,i),e[r].draw(this.context,i),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(c.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.draw=function(){},a.prototype.set=function(t,i){return this.min.copy(t),this.max.copy(i),this},a.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},a.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},a.prototype.clone=function(){var t=new a;return t.copy(this),t},a.prototype.copy=function(t){this.min.copy(t.min),this.max.copy(t.max)},a.prototype.isEmpty=function(){return this.max.x<this.min.x||this.max.y<this.min.y},a.prototype.getCenter=function(t){return this.isEmpty()?t.set(0,0):t.addVectors(this.min,this.max).multiplyScalar(.5)},a.prototype.getSize=function(t){return this.isEmpty()?t.set(0,0):t.subVectors(this.max,this.min)},a.prototype.expandByPoint=function(t){return this.min.min(t),this.max.max(t),this},a.prototype.expandByVector=function(t){this.min.sub(t),this.max.add(t)},a.prototype.expandByScalar=function(t){this.min.addScalar(-t),this.max.addScalar(t)},a.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)},a.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},a.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)},a.prototype.clampPoint=function(t,i){return i.copy(t).clamp(this.min,this.max)},a.prototype.distanceToPoint=function(t){return(new o).copy(t).clamp(this.min,this.max).sub(t).length()},a.prototype.intersect=function(t){this.min.max(t.min),this.max.min(t.max)},a.prototype.union=function(t){this.min.min(t.min),this.max.max(t.max)},a.prototype.translate=function(t){this.min.add(t),this.max.add(t)},a.prototype.equals=function(t){return t.min.equals(this.min)&&t.max.equals(this.max)},(u.prototype=Object.create(l.prototype)).isInside=function(t){return t.length()<=this.radius},u.prototype.onPointerEnter=function(t,i){this.fillStyle="#CCCCCC"},u.prototype.onPointerLeave=function(t,i){this.fillStyle="#FFFFFF"},u.prototype.draw=function(t){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()},m.rotateTool=function(s){var t=new u;t.radius=4,t.layer=s.layer+1,t.onPointerDrag=function(t,i,e){s.rotation+=.001*e.x},s.add(t)},m.boxResizeTool=function(s){if(void 0!==s.box){var n=new u;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 u;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 u;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 u;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)}},(y.prototype=Object.create(l.prototype)).onPointerEnter=function(t,i){this.fillStyle="#CCCCCC"},y.prototype.onPointerLeave=function(t,i){this.fillStyle="#FFFFFF"},y.prototype.isInside=function(t){return this.box.containsPoint(t)},y.prototype.draw=function(t){var i=this.box.max.x-this.box.min.x,e=this.box.max.y-this.box.min.y;t.fillStyle=this.fillStyle,t.fillRect(this.box.min.x,this.box.min.y,i,e),t.lineWidth=1,t.strokeStyle=this.strokeStyle,t.strokeRect(this.box.min.x,this.box.min.y,i,e)},(d.prototype=Object.create(l.prototype)).draw=function(t){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()},(x.prototype=Object.create(l.prototype)).draw=function(t){t.font=this.font,t.textAlign=this.textAlign,t.fillStyle=this.color,t.fillText(this.text,0,0)},(f.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},f.prototype.isInside=function(t){return this.box.containsPoint(t)},f.prototype.draw=function(t){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)},(v.prototype=Object.create(l.prototype)).draw=function(t,i){var e=i.matrix.clone();e.multiply(this.globalMatrix),this.element.style.transform=e.cssTransform(),this.element.style.width=this.size.x+"px",this.element.style.height=this.size.y+"px"},(b.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},b.prototype.isInside=function(t){return this.box.containsPoint(t)},b.prototype.draw=function(t,i){var e=this.box.max.x-this.box.min.x,s=this.box.max.y-this.box.min.y,n=t.createPattern(this.image,this.repetition);t.fillStyle=n,t.fillRect(this.box.min.x,this.box.min.y,e,s)},t.Box=y,t.Box2=a,t.Circle=u,t.DOM=v,t.EventManager=n,t.Helpers=m,t.Image=f,t.Key=r,t.Line=d,t.Matrix=p,t.Object2D=l,t.Pattern=b,t.Pointer=c,t.Renderer=e,t.Stencil=h,t.Text=x,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 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 u(){l.call(this),this.radius=10,this.strokeStyle="#000000",this.fillStyle="#FFFFFF"}function m(){}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",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()}),e.sort(function(t,i){return t.layer-i.layer}),this.context.setTransform(1,0,0,1,0,0),this.autoClear&&this.context.clearRect(0,0,this.canvas.width,this.canvas.height);for(r=0;r<e.length;r++)if(!e[r].isMask){e[r].saveContextState&&this.context.save();for(var u=e[r].masks,m=0;m<u.length;m++)u[m].ignoreViewport||i.matrix.setContextTransform(this.context),u[m].transform(this.context,i,this.canvas),u[m].clip(this.context,i,this.canvas);e[r].ignoreViewport?0<u.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()},(u.prototype=Object.create(l.prototype)).isInside=function(t){return t.length()<=this.radius},u.prototype.onPointerEnter=function(t,i){this.fillStyle="#CCCCCC"},u.prototype.onPointerLeave=function(t,i){this.fillStyle="#FFFFFF"},u.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()},m.rotateTool=function(s){var t=new u;t.radius=4,t.layer=s.layer+1,t.onPointerDrag=function(t,i,e){s.rotation+=.001*e.x},s.add(t)},m.boxResizeTool=function(s){if(void 0!==s.box){var n=new u;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 u;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 u;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 u;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.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){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)).draw=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"},(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,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=u,t.DOM=b,t.EventManager=n,t.Helpers=m,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})}); |
@@ -570,3 +570,3 @@ /** | ||
| /** | ||
| * Implements all UUID related methods. | ||
| * Class to implement UUID generation methods. | ||
| * | ||
@@ -581,2 +581,4 @@ * @class | ||
| * http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript/21963136#21963136 | ||
| * | ||
| * @static | ||
| */ | ||
@@ -682,2 +684,9 @@ UUID.generate = (function () | ||
| /** | ||
| * Masks being applied to this object. | ||
| * | ||
| * Multiple masks can be used simultaneously. | ||
| */ | ||
| this.masks = []; | ||
| /** | ||
| * If true the matrix is updated before rendering the object. | ||
@@ -695,2 +704,9 @@ */ | ||
| /** | ||
| * Indicates if this object uses pointer events. | ||
| * | ||
| * Can be set false to skip the pointer interaction events. | ||
| */ | ||
| this.pointerEvents = true; | ||
| /** | ||
| * Flag to indicate wheter this objet ignores the viewport transformation. | ||
@@ -711,7 +727,2 @@ */ | ||
| /** | ||
| * Flag to indicate if the context of canvas should be restored after render. | ||
| */ | ||
| this.restoreContextState = true; | ||
| /** | ||
| * Flag indicating if the pointer is inside of the element. | ||
@@ -803,3 +814,8 @@ * | ||
| * | ||
| * It is assumed that the viewport transform is pre-applied to the context. | ||
| * | ||
| * Can also be used for pre rendering logic. | ||
| * | ||
| * @param {CanvasContext} context Canvas 2d drawing context. | ||
| * @param {Viewport} viewport Viewport applied to the canvas. | ||
| */ | ||
@@ -816,5 +832,7 @@ Object2D.prototype.transform = function(context, viewport) | ||
| * | ||
| * @param context Canvas 2d drawing context. | ||
| * @param {CanvasContext} context Canvas 2d drawing context. | ||
| * @param {Viewport} viewport Viewport applied to the canvas. | ||
| * @param {DOM} canvas DOM canvas element where the content is being drawn. | ||
| */ | ||
| Object2D.prototype.draw = function(context, viewport){}; | ||
| Object2D.prototype.draw = function(context, viewport, canvas){}; | ||
@@ -1385,2 +1403,29 @@ /** | ||
| /** | ||
| * Creates a infinite render loop to render the group into a viewport each frame. | ||
| * | ||
| * The render loop cannot be destroyed. | ||
| * | ||
| * @param {Object2D} group Group to be rendererd. | ||
| * @param {Viewport} viewport Viewport into the objects. | ||
| * @param {Function} onUpdate Function called before rendering the frame. | ||
| */ | ||
| Renderer.prototype.createRenderLoop = function(group, viewport, onUpdate) | ||
| { | ||
| var self = this; | ||
| function loop() | ||
| { | ||
| if(onUpdate !== undefined) | ||
| { | ||
| onUpdate(); | ||
| } | ||
| self.update(group, viewport); | ||
| requestAnimationFrame(loop); | ||
| } | ||
| loop(); | ||
| }; | ||
| /** | ||
| * Update the renderer state, update the input handlers, calculate the object and viewport transformation matrices. | ||
@@ -1392,3 +1437,3 @@ * | ||
| * | ||
| * Should be called at a fixed rate preferably using the requestAnimationFrame() method. | ||
| * Should be called at a fixed rate preferably using the requestAnimationFrame() method, its also possible to use the createRenderLoop() method, that automatically creates a infinite render loop. | ||
| * | ||
@@ -1428,71 +1473,75 @@ * @param object Object to be updated. | ||
| // Object transformation matrices | ||
| // Object pointer events | ||
| for(var i = 0; i < objects.length; i++) | ||
| { | ||
| var child = objects[i]; | ||
| var childPoint = child.inverseGlobalMatrix.transformPoint(child.ignoreViewport ? point : viewportPoint); | ||
| // Check if the pointer pointer is inside | ||
| if(child.isInside(childPoint)) | ||
| //Process the | ||
| if(child.pointerEvents) | ||
| { | ||
| // Pointer enter | ||
| if(!child.pointerInside && child.onPointerEnter !== null) | ||
| { | ||
| child.onPointerEnter(pointer, viewport); | ||
| } | ||
| var childPoint = child.inverseGlobalMatrix.transformPoint(child.ignoreViewport ? point : viewportPoint); | ||
| // Pointer over | ||
| if(child.onPointerOver !== null) | ||
| // Check if the pointer pointer is inside | ||
| if(child.isInside(childPoint)) | ||
| { | ||
| child.onPointerOver(pointer, viewport); | ||
| } | ||
| // Pointer enter | ||
| if(!child.pointerInside && child.onPointerEnter !== null) | ||
| { | ||
| child.onPointerEnter(pointer, viewport); | ||
| } | ||
| // Pointer pressed | ||
| if(pointer.buttonPressed(Pointer.LEFT) && child.onButtonPressed !== null) | ||
| { | ||
| child.onButtonPressed(pointer, viewport); | ||
| } | ||
| // Pointer over | ||
| if(child.onPointerOver !== null) | ||
| { | ||
| child.onPointerOver(pointer, viewport); | ||
| } | ||
| // Just released | ||
| if(pointer.buttonJustReleased(Pointer.LEFT) && child.onButtonUp !== null) | ||
| { | ||
| child.onButtonUp(pointer, viewport); | ||
| } | ||
| // Pointer pressed | ||
| if(pointer.buttonPressed(Pointer.LEFT) && child.onButtonPressed !== null) | ||
| { | ||
| child.onButtonPressed(pointer, viewport); | ||
| } | ||
| // Pointer just pressed | ||
| if(pointer.buttonJustPressed(Pointer.LEFT)) | ||
| { | ||
| if(child.onButtonDown !== null) | ||
| { | ||
| child.onButtonDown(pointer, viewport); | ||
| // Just released | ||
| if(pointer.buttonJustReleased(Pointer.LEFT) && child.onButtonUp !== null) | ||
| { | ||
| child.onButtonUp(pointer, viewport); | ||
| } | ||
| if(child.draggable) | ||
| // Pointer just pressed | ||
| if(pointer.buttonJustPressed(Pointer.LEFT)) | ||
| { | ||
| child.beingDragged = true; | ||
| if(child.onButtonDown !== null) | ||
| { | ||
| child.onButtonDown(pointer, viewport); | ||
| } | ||
| // Only start a drag operation on the top element. | ||
| break; | ||
| // Drag object and break to only start a drag operation on the top element. | ||
| if(child.draggable) | ||
| { | ||
| child.beingDragged = true; | ||
| break; | ||
| } | ||
| } | ||
| child.pointerInside = true; | ||
| } | ||
| else if(child.pointerInside) | ||
| { | ||
| // Pointer leave | ||
| if(child.onPointerLeave !== null) | ||
| { | ||
| child.onPointerLeave(pointer, viewport); | ||
| } | ||
| child.pointerInside = true; | ||
| } | ||
| else if(child.pointerInside) | ||
| { | ||
| // Pointer leave | ||
| if(child.onPointerLeave !== null) | ||
| { | ||
| child.onPointerLeave(pointer, viewport); | ||
| child.pointerInside = false; | ||
| } | ||
| child.pointerInside = false; | ||
| } | ||
| // Stop object drag | ||
| if(pointer.buttonJustReleased(Pointer.LEFT)) | ||
| { | ||
| if(child.draggable) | ||
| { | ||
| child.beingDragged = false; | ||
| // Stop object drag | ||
| if(pointer.buttonJustReleased(Pointer.LEFT)) | ||
| { | ||
| if(child.draggable) | ||
| { | ||
| child.beingDragged = false; | ||
| } | ||
| } | ||
@@ -1502,3 +1551,3 @@ } | ||
| // Pointer drag event | ||
| // Object drag events and update logic | ||
| for(var i = 0; i < objects.length; i++) | ||
@@ -1508,2 +1557,3 @@ { | ||
| // Pointer drag event | ||
| if(child.beingDragged) | ||
@@ -1531,6 +1581,10 @@ { | ||
| } | ||
| } | ||
| // Update transformation matrices | ||
| object.traverse(function(child) | ||
| { | ||
| child.updateMatrix(); | ||
| } | ||
| }); | ||
| // Sort objects by layer | ||
@@ -1541,16 +1595,19 @@ objects.sort(function(a, b) | ||
| }); | ||
| // Clear canvas | ||
| this.context.setTransform(1, 0, 0, 1, 0, 0); | ||
| // Clear canvas content | ||
| if(this.autoClear) | ||
| { | ||
| this.context.setTransform(1, 0, 0, 1, 0, 0); | ||
| this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); | ||
| } | ||
| // Set viewport matrix transform | ||
| viewport.matrix.setContextTransform(this.context); | ||
| // Render into the canvas | ||
| for(var i = 0; i < objects.length; i++) | ||
| { | ||
| if(objects[i].isMask) | ||
| { | ||
| continue; | ||
| } | ||
| if(objects[i].saveContextState) | ||
@@ -1561,9 +1618,28 @@ { | ||
| if(objects[i].ignoreViewport) | ||
| // Apply all masks | ||
| var masks = objects[i].masks; | ||
| for(var j = 0; j < masks.length; j++) | ||
| { | ||
| if(!masks[j].ignoreViewport) | ||
| { | ||
| viewport.matrix.setContextTransform(this.context); | ||
| } | ||
| masks[j].transform(this.context, viewport, this.canvas); | ||
| masks[j].clip(this.context, viewport, this.canvas); | ||
| } | ||
| // Set the viewport transform | ||
| if(!objects[i].ignoreViewport) | ||
| { | ||
| viewport.matrix.setContextTransform(this.context); | ||
| } | ||
| else if(masks.length > 0) | ||
| { | ||
| this.context.setTransform(1, 0, 0, 1, 0, 0); | ||
| } | ||
| objects[i].transform(this.context, viewport); | ||
| objects[i].draw(this.context, viewport); | ||
| // Apply the object transform to the canvas context | ||
| objects[i].transform(this.context, viewport, this.canvas); | ||
| objects[i].draw(this.context, viewport, this.canvas); | ||
@@ -1668,24 +1744,2 @@ if(objects[i].restoreContextState) | ||
| /** | ||
| * A stencil can be used to set the drawing region. | ||
| * | ||
| * Stencils are treated as objects their shaphe is used to filter other objects shape. | ||
| * | ||
| * Multiple stencil objects can be active simulatenously. | ||
| * | ||
| * @class | ||
| */ | ||
| function Stencil() | ||
| { | ||
| //TODO <ADD CODE HERE> | ||
| } | ||
| /** | ||
| * Activate the stencil. | ||
| */ | ||
| Stencil.prototype.draw = function() | ||
| { | ||
| // body... | ||
| }; | ||
| /** | ||
| * Box is described by a minimum and maximum points. | ||
@@ -1762,8 +1816,16 @@ * | ||
| /** | ||
| * Check if the box is empty (size equals zero or is negative). | ||
| * | ||
| * The box size is condireded valid on two negative axis. | ||
| */ | ||
| Box2.prototype.isEmpty = function() | ||
| { | ||
| // this is a more robust check for empty than ( volume <= 0 ) because volume can get positive with two negative axes | ||
| return (this.max.x < this.min.x) || (this.max.y < this.min.y); | ||
| }; | ||
| /** | ||
| * Calculate the center point of the box. | ||
| */ | ||
| Box2.prototype.getCenter = function(target) | ||
@@ -1774,2 +1836,5 @@ { | ||
| /** | ||
| * Get the size of the box. | ||
| */ | ||
| Box2.prototype.getSize = function(target) | ||
@@ -1780,2 +1845,5 @@ { | ||
| /** | ||
| * Expand the box to contain a new point. | ||
| */ | ||
| Box2.prototype.expandByPoint = function(point) | ||
@@ -1789,2 +1857,7 @@ { | ||
| /** | ||
| * Expand the box by adding a border with the vector size. | ||
| * | ||
| * Vector is subtracted from min and added to the max points. | ||
| */ | ||
| Box2.prototype.expandByVector = function(vector) | ||
@@ -1796,2 +1869,5 @@ { | ||
| /** | ||
| * Expand the box by adding a border with the scalar value. | ||
| */ | ||
| Box2.prototype.expandByScalar = function(scalar) | ||
@@ -1803,2 +1879,8 @@ { | ||
| /** | ||
| * Check if the box contains a point inside. | ||
| * | ||
| * @param {Vector2} point | ||
| * @return {boolean} True if the box contains point. | ||
| */ | ||
| Box2.prototype.containsPoint = function(point) | ||
@@ -1809,2 +1891,10 @@ { | ||
| /** | ||
| * Check if the box fully contains another box inside (different from intersects box). | ||
| * | ||
| * Only returns true if the box is fully contained. | ||
| * | ||
| * @param {Box2} box | ||
| * @return {boolean} True if the box contains box. | ||
| */ | ||
| Box2.prototype.containsBox = function(box) | ||
@@ -1819,2 +1909,3 @@ { | ||
| * @param {Box2} box | ||
| * @return {boolean} True if the boxes intersect each other. | ||
| */ | ||
@@ -1892,2 +1983,81 @@ Box2.prototype.intersectsBox = function(box) | ||
| /** | ||
| * A mask can be used to set the drawing region. | ||
| * | ||
| * Masks are treated as objects their shape is used to filter other objects shape. | ||
| * | ||
| * Multiple mask objects can be active simulatenously, they have to be attached to the object mask list to filter the render region. | ||
| * | ||
| * @class | ||
| */ | ||
| function Mask() | ||
| { | ||
| Object2D.call(this); | ||
| } | ||
| Mask.prototype = Object.create(Object2D.prototype); | ||
| Mask.prototype.isMask = true; | ||
| /** | ||
| * Clip the canvas context, to ensure that next objects being drawn are cliped to the path stored here. | ||
| * | ||
| * @param {CanvasContext} context Canvas 2d drawing context. | ||
| * @param {Viewport} viewport Viewport applied to the canvas. | ||
| * @param {DOM} canvas DOM canvas element where the content is being drawn. | ||
| */ | ||
| Mask.prototype.clip = function(context, viewport, canvas){}; | ||
| /** | ||
| * Box mask can be used to clear a box mask region. | ||
| * | ||
| * It will limit the drwaing region to this box. | ||
| * | ||
| * @class | ||
| * @extends {Mask} | ||
| */ | ||
| function BoxMask() | ||
| { | ||
| Mask.call(this); | ||
| /** | ||
| * Box object containing the size of the object. | ||
| */ | ||
| this.box = new Box2(new Vector2(-50, -35), new Vector2(50, 35)); | ||
| /** | ||
| * If inverted the mask considers the outside of the box instead of the inside. | ||
| */ | ||
| this.invert = false; | ||
| } | ||
| BoxMask.prototype = Object.create(Mask.prototype); | ||
| BoxMask.prototype.isInside = function(point) | ||
| { | ||
| return this.box.containsPoint(point); | ||
| }; | ||
| BoxMask.prototype.clip = function(context, viewport, canvas) | ||
| { | ||
| context.beginPath(); | ||
| var width = this.box.max.x - this.box.min.x; | ||
| if(this.invert) | ||
| { | ||
| context.rect(this.box.min.x - 1e4, -5e3, 1e4, 1e4); | ||
| context.rect(this.box.max.x, -5e3, 1e4, 1e4); | ||
| context.rect(this.box.min.x, this.box.min.y - 1e4, width, 1e4); | ||
| context.rect(this.box.min.x, this.box.max.y, width, 1e4); | ||
| } | ||
| else | ||
| { | ||
| var height = this.box.max.y - this.box.min.y; | ||
| context.fillRect(this.box.min.x, this.box.min.y, width, height); | ||
| } | ||
| context.clip(); | ||
| }; | ||
| /** | ||
| * Circle object draw a circular object, into the canvas. | ||
@@ -1934,3 +2104,3 @@ * | ||
| Circle.prototype.draw = function(context) | ||
| Circle.prototype.draw = function(context, viewport, canvas) | ||
| { | ||
@@ -1951,7 +2121,15 @@ context.fillStyle = this.fillStyle; | ||
| /** | ||
| * Class contains helper functions to create editing object tools. | ||
| * | ||
| * @class | ||
| */ | ||
| function Helpers(){} | ||
| /** | ||
| * Create a rotation tool | ||
| * Create a rotation tool helper. | ||
| * | ||
| * When the object is dragged is changes the parent object rotation. | ||
| * | ||
| * @static | ||
| */ | ||
@@ -1976,2 +2154,4 @@ Helpers.rotateTool = function(object) | ||
| * This method required to object to have a box property. | ||
| * | ||
| * @static | ||
| */ | ||
@@ -2093,3 +2273,3 @@ Helpers.boxResizeTool = function(object) | ||
| Box.prototype.draw = function(context) | ||
| Box.prototype.draw = function(context, viewport, canvas) | ||
| { | ||
@@ -2148,3 +2328,3 @@ var width = this.box.max.x - this.box.min.x; | ||
| Line.prototype.draw = function(context) | ||
| Line.prototype.draw = function(context, viewport, canvas) | ||
| { | ||
@@ -2193,3 +2373,3 @@ context.lineWidth = this.lineWidth; | ||
| Text.prototype.draw = function(context) | ||
| Text.prototype.draw = function(context, viewport, canvas) | ||
| { | ||
@@ -2255,3 +2435,3 @@ context.font = this.font; | ||
| Image.prototype.draw = function(context) | ||
| Image.prototype.draw = function(context, viewport, canvas) | ||
| { | ||
@@ -2296,3 +2476,3 @@ context.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); | ||
| DOM.prototype.draw = function(context, viewport) | ||
| DOM.prototype.draw = function(context, viewport, canvas) | ||
| { | ||
@@ -2365,3 +2545,3 @@ // CSS trasnformation matrix | ||
| Pattern.prototype.draw = function(context, viewport) | ||
| Pattern.prototype.draw = function(context, viewport, canvas) | ||
| { | ||
@@ -2378,2 +2558,2 @@ var width = this.box.max.x - this.box.min.x; | ||
| export { Box, Box2, Circle, DOM, EventManager, Helpers, Image, Key, Line, Matrix, Object2D, Pattern, Pointer, Renderer, Stencil, Text, UUID, Vector2, Viewport }; | ||
| export { Box, Box2, BoxMask, Circle, DOM, EventManager, Helpers, Image, Key, Line, Mask, Matrix, Object2D, Pattern, Pointer, Renderer, Text, UUID, Vector2, Viewport }; |
| { | ||
| "name": "trenette.js", | ||
| "version": "0.1.2", | ||
| "version": "0.1.3", | ||
| "description": "trenette.js is a web library for building interactive diagrams and graphs.", | ||
@@ -5,0 +5,0 @@ "main": "build/trenette.min.js", |
@@ -0,0 +0,0 @@ # trenette.js |
@@ -0,0 +0,0 @@ import strip from "rollup-plugin-strip"; |
@@ -0,0 +0,0 @@ "use strict"; |
@@ -0,0 +0,0 @@ "use strict"; |
@@ -0,0 +0,0 @@ "use strict"; |
@@ -77,8 +77,16 @@ "use strict"; | ||
| /** | ||
| * Check if the box is empty (size equals zero or is negative). | ||
| * | ||
| * The box size is condireded valid on two negative axis. | ||
| */ | ||
| Box2.prototype.isEmpty = function() | ||
| { | ||
| // this is a more robust check for empty than ( volume <= 0 ) because volume can get positive with two negative axes | ||
| return (this.max.x < this.min.x) || (this.max.y < this.min.y); | ||
| }; | ||
| /** | ||
| * Calculate the center point of the box. | ||
| */ | ||
| Box2.prototype.getCenter = function(target) | ||
@@ -89,2 +97,5 @@ { | ||
| /** | ||
| * Get the size of the box. | ||
| */ | ||
| Box2.prototype.getSize = function(target) | ||
@@ -95,2 +106,5 @@ { | ||
| /** | ||
| * Expand the box to contain a new point. | ||
| */ | ||
| Box2.prototype.expandByPoint = function(point) | ||
@@ -104,2 +118,7 @@ { | ||
| /** | ||
| * Expand the box by adding a border with the vector size. | ||
| * | ||
| * Vector is subtracted from min and added to the max points. | ||
| */ | ||
| Box2.prototype.expandByVector = function(vector) | ||
@@ -111,2 +130,5 @@ { | ||
| /** | ||
| * Expand the box by adding a border with the scalar value. | ||
| */ | ||
| Box2.prototype.expandByScalar = function(scalar) | ||
@@ -118,2 +140,8 @@ { | ||
| /** | ||
| * Check if the box contains a point inside. | ||
| * | ||
| * @param {Vector2} point | ||
| * @return {boolean} True if the box contains point. | ||
| */ | ||
| Box2.prototype.containsPoint = function(point) | ||
@@ -124,2 +152,10 @@ { | ||
| /** | ||
| * Check if the box fully contains another box inside (different from intersects box). | ||
| * | ||
| * Only returns true if the box is fully contained. | ||
| * | ||
| * @param {Box2} box | ||
| * @return {boolean} True if the box contains box. | ||
| */ | ||
| Box2.prototype.containsBox = function(box) | ||
@@ -134,2 +170,3 @@ { | ||
| * @param {Box2} box | ||
| * @return {boolean} True if the boxes intersect each other. | ||
| */ | ||
@@ -136,0 +173,0 @@ Box2.prototype.intersectsBox = function(box) |
@@ -0,0 +0,0 @@ "use strict"; |
| "use strict"; | ||
| /** | ||
| * Implements all UUID related methods. | ||
| * Class to implement UUID generation methods. | ||
| * | ||
@@ -14,2 +14,4 @@ * @class | ||
| * http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript/21963136#21963136 | ||
| * | ||
| * @static | ||
| */ | ||
@@ -16,0 +18,0 @@ UUID.generate = (function () |
@@ -0,0 +0,0 @@ "use strict"; |
@@ -81,2 +81,9 @@ "use strict"; | ||
| /** | ||
| * Masks being applied to this object. | ||
| * | ||
| * Multiple masks can be used simultaneously. | ||
| */ | ||
| this.masks = []; | ||
| /** | ||
| * If true the matrix is updated before rendering the object. | ||
@@ -94,2 +101,9 @@ */ | ||
| /** | ||
| * Indicates if this object uses pointer events. | ||
| * | ||
| * Can be set false to skip the pointer interaction events. | ||
| */ | ||
| this.pointerEvents = true; | ||
| /** | ||
| * Flag to indicate wheter this objet ignores the viewport transformation. | ||
@@ -110,7 +124,2 @@ */ | ||
| /** | ||
| * Flag to indicate if the context of canvas should be restored after render. | ||
| */ | ||
| this.restoreContextState = true; | ||
| /** | ||
| * Flag indicating if the pointer is inside of the element. | ||
@@ -202,3 +211,8 @@ * | ||
| * | ||
| * It is assumed that the viewport transform is pre-applied to the context. | ||
| * | ||
| * Can also be used for pre rendering logic. | ||
| * | ||
| * @param {CanvasContext} context Canvas 2d drawing context. | ||
| * @param {Viewport} viewport Viewport applied to the canvas. | ||
| */ | ||
@@ -215,5 +229,7 @@ Object2D.prototype.transform = function(context, viewport) | ||
| * | ||
| * @param context Canvas 2d drawing context. | ||
| * @param {CanvasContext} context Canvas 2d drawing context. | ||
| * @param {Viewport} viewport Viewport applied to the canvas. | ||
| * @param {DOM} canvas DOM canvas element where the content is being drawn. | ||
| */ | ||
| Object2D.prototype.draw = function(context, viewport){}; | ||
| Object2D.prototype.draw = function(context, viewport, canvas){}; | ||
@@ -220,0 +236,0 @@ /** |
@@ -53,3 +53,3 @@ "use strict"; | ||
| Box.prototype.draw = function(context) | ||
| Box.prototype.draw = function(context, viewport, canvas) | ||
| { | ||
@@ -56,0 +56,0 @@ var width = this.box.max.x - this.box.min.x; |
@@ -48,3 +48,3 @@ "use strict"; | ||
| Circle.prototype.draw = function(context) | ||
| Circle.prototype.draw = function(context, viewport, canvas) | ||
| { | ||
@@ -51,0 +51,0 @@ context.fillStyle = this.fillStyle; |
@@ -41,3 +41,3 @@ "use strict"; | ||
| DOM.prototype.draw = function(context, viewport) | ||
| DOM.prototype.draw = function(context, viewport, canvas) | ||
| { | ||
@@ -44,0 +44,0 @@ // CSS trasnformation matrix |
@@ -59,3 +59,3 @@ "use strict"; | ||
| Image.prototype.draw = function(context) | ||
| Image.prototype.draw = function(context, viewport, canvas) | ||
| { | ||
@@ -62,0 +62,0 @@ context.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); |
@@ -47,3 +47,3 @@ "use strict"; | ||
| Line.prototype.draw = function(context) | ||
| Line.prototype.draw = function(context, viewport, canvas) | ||
| { | ||
@@ -50,0 +50,0 @@ context.lineWidth = this.lineWidth; |
@@ -65,3 +65,3 @@ "use strict"; | ||
| Pattern.prototype.draw = function(context, viewport) | ||
| Pattern.prototype.draw = function(context, viewport, canvas) | ||
| { | ||
@@ -68,0 +68,0 @@ var width = this.box.max.x - this.box.min.x; |
@@ -37,3 +37,3 @@ "use strict"; | ||
| Text.prototype.draw = function(context) | ||
| Text.prototype.draw = function(context, viewport, canvas) | ||
| { | ||
@@ -40,0 +40,0 @@ context.font = this.font; |
@@ -39,2 +39,29 @@ "use strict"; | ||
| /** | ||
| * Creates a infinite render loop to render the group into a viewport each frame. | ||
| * | ||
| * The render loop cannot be destroyed. | ||
| * | ||
| * @param {Object2D} group Group to be rendererd. | ||
| * @param {Viewport} viewport Viewport into the objects. | ||
| * @param {Function} onUpdate Function called before rendering the frame. | ||
| */ | ||
| Renderer.prototype.createRenderLoop = function(group, viewport, onUpdate) | ||
| { | ||
| var self = this; | ||
| function loop() | ||
| { | ||
| if(onUpdate !== undefined) | ||
| { | ||
| onUpdate(); | ||
| } | ||
| self.update(group, viewport); | ||
| requestAnimationFrame(loop); | ||
| } | ||
| loop(); | ||
| }; | ||
| /** | ||
| * Update the renderer state, update the input handlers, calculate the object and viewport transformation matrices. | ||
@@ -46,3 +73,3 @@ * | ||
| * | ||
| * Should be called at a fixed rate preferably using the requestAnimationFrame() method. | ||
| * Should be called at a fixed rate preferably using the requestAnimationFrame() method, its also possible to use the createRenderLoop() method, that automatically creates a infinite render loop. | ||
| * | ||
@@ -82,71 +109,75 @@ * @param object Object to be updated. | ||
| // Object transformation matrices | ||
| // Object pointer events | ||
| for(var i = 0; i < objects.length; i++) | ||
| { | ||
| var child = objects[i]; | ||
| var childPoint = child.inverseGlobalMatrix.transformPoint(child.ignoreViewport ? point : viewportPoint); | ||
| // Check if the pointer pointer is inside | ||
| if(child.isInside(childPoint)) | ||
| //Process the | ||
| if(child.pointerEvents) | ||
| { | ||
| // Pointer enter | ||
| if(!child.pointerInside && child.onPointerEnter !== null) | ||
| { | ||
| child.onPointerEnter(pointer, viewport); | ||
| } | ||
| var childPoint = child.inverseGlobalMatrix.transformPoint(child.ignoreViewport ? point : viewportPoint); | ||
| // Pointer over | ||
| if(child.onPointerOver !== null) | ||
| // Check if the pointer pointer is inside | ||
| if(child.isInside(childPoint)) | ||
| { | ||
| child.onPointerOver(pointer, viewport); | ||
| } | ||
| // Pointer enter | ||
| if(!child.pointerInside && child.onPointerEnter !== null) | ||
| { | ||
| child.onPointerEnter(pointer, viewport); | ||
| } | ||
| // Pointer pressed | ||
| if(pointer.buttonPressed(Pointer.LEFT) && child.onButtonPressed !== null) | ||
| { | ||
| child.onButtonPressed(pointer, viewport); | ||
| } | ||
| // Pointer over | ||
| if(child.onPointerOver !== null) | ||
| { | ||
| child.onPointerOver(pointer, viewport); | ||
| } | ||
| // Just released | ||
| if(pointer.buttonJustReleased(Pointer.LEFT) && child.onButtonUp !== null) | ||
| { | ||
| child.onButtonUp(pointer, viewport); | ||
| } | ||
| // Pointer pressed | ||
| if(pointer.buttonPressed(Pointer.LEFT) && child.onButtonPressed !== null) | ||
| { | ||
| child.onButtonPressed(pointer, viewport); | ||
| } | ||
| // Pointer just pressed | ||
| if(pointer.buttonJustPressed(Pointer.LEFT)) | ||
| { | ||
| if(child.onButtonDown !== null) | ||
| { | ||
| child.onButtonDown(pointer, viewport); | ||
| // Just released | ||
| if(pointer.buttonJustReleased(Pointer.LEFT) && child.onButtonUp !== null) | ||
| { | ||
| child.onButtonUp(pointer, viewport); | ||
| } | ||
| if(child.draggable) | ||
| // Pointer just pressed | ||
| if(pointer.buttonJustPressed(Pointer.LEFT)) | ||
| { | ||
| child.beingDragged = true; | ||
| if(child.onButtonDown !== null) | ||
| { | ||
| child.onButtonDown(pointer, viewport); | ||
| } | ||
| // Only start a drag operation on the top element. | ||
| break; | ||
| // Drag object and break to only start a drag operation on the top element. | ||
| if(child.draggable) | ||
| { | ||
| child.beingDragged = true; | ||
| break; | ||
| } | ||
| } | ||
| child.pointerInside = true; | ||
| } | ||
| else if(child.pointerInside) | ||
| { | ||
| // Pointer leave | ||
| if(child.onPointerLeave !== null) | ||
| { | ||
| child.onPointerLeave(pointer, viewport); | ||
| } | ||
| child.pointerInside = true; | ||
| } | ||
| else if(child.pointerInside) | ||
| { | ||
| // Pointer leave | ||
| if(child.onPointerLeave !== null) | ||
| { | ||
| child.onPointerLeave(pointer, viewport); | ||
| child.pointerInside = false; | ||
| } | ||
| child.pointerInside = false; | ||
| } | ||
| // Stop object drag | ||
| if(pointer.buttonJustReleased(Pointer.LEFT)) | ||
| { | ||
| if(child.draggable) | ||
| { | ||
| child.beingDragged = false; | ||
| // Stop object drag | ||
| if(pointer.buttonJustReleased(Pointer.LEFT)) | ||
| { | ||
| if(child.draggable) | ||
| { | ||
| child.beingDragged = false; | ||
| } | ||
| } | ||
@@ -156,3 +187,3 @@ } | ||
| // Pointer drag event | ||
| // Object drag events and update logic | ||
| for(var i = 0; i < objects.length; i++) | ||
@@ -162,2 +193,3 @@ { | ||
| // Pointer drag event | ||
| if(child.beingDragged) | ||
@@ -185,6 +217,10 @@ { | ||
| } | ||
| } | ||
| // Update transformation matrices | ||
| object.traverse(function(child) | ||
| { | ||
| child.updateMatrix(); | ||
| } | ||
| }); | ||
| // Sort objects by layer | ||
@@ -195,16 +231,19 @@ objects.sort(function(a, b) | ||
| }); | ||
| // Clear canvas | ||
| this.context.setTransform(1, 0, 0, 1, 0, 0); | ||
| // Clear canvas content | ||
| if(this.autoClear) | ||
| { | ||
| this.context.setTransform(1, 0, 0, 1, 0, 0); | ||
| this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); | ||
| } | ||
| // Set viewport matrix transform | ||
| viewport.matrix.setContextTransform(this.context); | ||
| // Render into the canvas | ||
| for(var i = 0; i < objects.length; i++) | ||
| { | ||
| if(objects[i].isMask) | ||
| { | ||
| continue; | ||
| } | ||
| if(objects[i].saveContextState) | ||
@@ -215,9 +254,28 @@ { | ||
| if(objects[i].ignoreViewport) | ||
| // Apply all masks | ||
| var masks = objects[i].masks; | ||
| for(var j = 0; j < masks.length; j++) | ||
| { | ||
| if(!masks[j].ignoreViewport) | ||
| { | ||
| viewport.matrix.setContextTransform(this.context); | ||
| } | ||
| masks[j].transform(this.context, viewport, this.canvas); | ||
| masks[j].clip(this.context, viewport, this.canvas); | ||
| } | ||
| // Set the viewport transform | ||
| if(!objects[i].ignoreViewport) | ||
| { | ||
| viewport.matrix.setContextTransform(this.context); | ||
| } | ||
| else if(masks.length > 0) | ||
| { | ||
| this.context.setTransform(1, 0, 0, 1, 0, 0); | ||
| } | ||
| objects[i].transform(this.context, viewport); | ||
| objects[i].draw(this.context, viewport); | ||
| // Apply the object transform to the canvas context | ||
| objects[i].transform(this.context, viewport, this.canvas); | ||
| objects[i].draw(this.context, viewport, this.canvas); | ||
@@ -224,0 +282,0 @@ if(objects[i].restoreContextState) |
@@ -8,3 +8,4 @@ "use strict"; | ||
| export {Stencil} from "./stencil/Stencil.js"; | ||
| export {Mask} from "./mask/Mask.js"; | ||
| export {BoxMask} from "./mask/BoxMask.js"; | ||
@@ -11,0 +12,0 @@ export {Key} from "./input/Key.js"; |
@@ -6,7 +6,15 @@ "use strict"; | ||
| /** | ||
| * Class contains helper functions to create editing object tools. | ||
| * | ||
| * @class | ||
| */ | ||
| function Helpers(){} | ||
| /** | ||
| * Create a rotation tool | ||
| * Create a rotation tool helper. | ||
| * | ||
| * When the object is dragged is changes the parent object rotation. | ||
| * | ||
| * @static | ||
| */ | ||
@@ -31,2 +39,4 @@ Helpers.rotateTool = function(object) | ||
| * This method required to object to have a box property. | ||
| * | ||
| * @static | ||
| */ | ||
@@ -33,0 +43,0 @@ Helpers.boxResizeTool = function(object) |
@@ -0,0 +0,0 @@ "use strict"; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by3.47%
1715423
- Number of package files
- increased by9.38%
105
- Lines of code
- increased by7.33%
7206
No dependency changes