trenette.js
Advanced tools
Comparing version 0.1.1 to 0.1.2
@@ -73,2 +73,7 @@ (function (global, factory) { | ||
| /** | ||
| * Class representing a 2D vector. A 2D vector is an ordered pair of numbers (labeled x and y), which can be used to represent points in space, directions, etc. | ||
| * | ||
| * @class | ||
| */ | ||
| function Vector2(x, y) | ||
@@ -80,271 +85,269 @@ { | ||
| Object.assign(Vector2.prototype, | ||
| Vector2.prototype.set = function(x, y) | ||
| { | ||
| set: function(x, y) | ||
| { | ||
| this.x = x; | ||
| this.y = y; | ||
| }, | ||
| this.x = x; | ||
| this.y = y; | ||
| }; | ||
| setScalar: function(scalar) | ||
| { | ||
| this.x = scalar; | ||
| this.y = scalar; | ||
| }, | ||
| Vector2.prototype.setScalar = function(scalar) | ||
| { | ||
| this.x = scalar; | ||
| this.y = scalar; | ||
| }; | ||
| clone: function() | ||
| { | ||
| return new Vector2(this.x, this.y); | ||
| }, | ||
| Vector2.prototype.clone = function() | ||
| { | ||
| return new Vector2(this.x, this.y); | ||
| }; | ||
| copy: function(v) | ||
| { | ||
| this.x = v.x; | ||
| this.y = v.y; | ||
| }, | ||
| Vector2.prototype.copy = function(v) | ||
| { | ||
| this.x = v.x; | ||
| this.y = v.y; | ||
| }; | ||
| add: function(v, w) | ||
| { | ||
| this.x += v.x; | ||
| this.y += v.y; | ||
| }, | ||
| Vector2.prototype.add = function(v) | ||
| { | ||
| this.x += v.x; | ||
| this.y += v.y; | ||
| }; | ||
| addScalar: function(s) | ||
| { | ||
| this.x += s; | ||
| this.y += s; | ||
| }, | ||
| Vector2.prototype.addScalar = function(s) | ||
| { | ||
| this.x += s; | ||
| this.y += s; | ||
| }; | ||
| addVectors: function(a, b) | ||
| { | ||
| this.x = a.x + b.x; | ||
| this.y = a.y + b.y; | ||
| }, | ||
| Vector2.prototype.addVectors = function(a, b) | ||
| { | ||
| this.x = a.x + b.x; | ||
| this.y = a.y + b.y; | ||
| }; | ||
| addScaledVector: function(v, s) | ||
| { | ||
| this.x += v.x * s; | ||
| this.y += v.y * s; | ||
| }, | ||
| Vector2.prototype.addScaledVector = function(v, s) | ||
| { | ||
| this.x += v.x * s; | ||
| this.y += v.y * s; | ||
| }; | ||
| sub: function(v, w) | ||
| { | ||
| this.x -= v.x; | ||
| this.y -= v.y; | ||
| }, | ||
| Vector2.prototype.sub = function(v) | ||
| { | ||
| this.x -= v.x; | ||
| this.y -= v.y; | ||
| }; | ||
| subScalar: function(s) | ||
| { | ||
| this.x -= s; | ||
| this.y -= s; | ||
| }, | ||
| Vector2.prototype.subScalar = function(s) | ||
| { | ||
| this.x -= s; | ||
| this.y -= s; | ||
| }; | ||
| subVectors: function(a, b) | ||
| { | ||
| this.x = a.x - b.x; | ||
| this.y = a.y - b.y; | ||
| }, | ||
| Vector2.prototype.subVectors = function(a, b) | ||
| { | ||
| this.x = a.x - b.x; | ||
| this.y = a.y - b.y; | ||
| }; | ||
| multiply: function(v) | ||
| { | ||
| this.x *= v.x; | ||
| this.y *= v.y; | ||
| }, | ||
| Vector2.prototype.multiply = function(v) | ||
| { | ||
| this.x *= v.x; | ||
| this.y *= v.y; | ||
| }; | ||
| multiplyScalar: function(scalar) | ||
| { | ||
| this.x *= scalar; | ||
| this.y *= scalar; | ||
| }, | ||
| Vector2.prototype.multiplyScalar = function(scalar) | ||
| { | ||
| this.x *= scalar; | ||
| this.y *= scalar; | ||
| }; | ||
| divide: function(v) | ||
| { | ||
| this.x /= v.x; | ||
| this.y /= v.y; | ||
| }, | ||
| Vector2.prototype.divide = function(v) | ||
| { | ||
| this.x /= v.x; | ||
| this.y /= v.y; | ||
| }; | ||
| divideScalar: function(scalar) | ||
| { | ||
| return this.multiplyScalar(1 / scalar); | ||
| }, | ||
| Vector2.prototype.divideScalar = function(scalar) | ||
| { | ||
| return this.multiplyScalar(1 / scalar); | ||
| }; | ||
| min: function(v) | ||
| { | ||
| this.x = Math.min(this.x, v.x); | ||
| this.y = Math.min(this.y, v.y); | ||
| }, | ||
| Vector2.prototype.min = function(v) | ||
| { | ||
| this.x = Math.min(this.x, v.x); | ||
| this.y = Math.min(this.y, v.y); | ||
| }; | ||
| max: function(v) | ||
| { | ||
| this.x = Math.max(this.x, v.x); | ||
| this.y = Math.max(this.y, v.y); | ||
| }, | ||
| Vector2.prototype.max = function(v) | ||
| { | ||
| this.x = Math.max(this.x, v.x); | ||
| this.y = Math.max(this.y, v.y); | ||
| }; | ||
| clamp: function(min, max) | ||
| { | ||
| // assumes min < max, componentwise | ||
| this.x = Math.max(min.x, Math.min(max.x, this.x)); | ||
| this.y = Math.max(min.y, Math.min(max.y, this.y)); | ||
| }, | ||
| Vector2.prototype.clamp = function(min, max) | ||
| { | ||
| // assumes min < max, componentwise | ||
| this.x = Math.max(min.x, Math.min(max.x, this.x)); | ||
| this.y = Math.max(min.y, Math.min(max.y, this.y)); | ||
| }; | ||
| clampScalar: function(minVal, maxVal) | ||
| { | ||
| Vector2.prototype.clampScalar = function(minVal, maxVal) | ||
| { | ||
| this.x = Math.max(minVal, Math.min(maxVal, this.x)); | ||
| this.y = Math.max(minVal, Math.min(maxVal, this.y)); | ||
| }; | ||
| this.x = Math.max(minVal, Math.min(maxVal, this.x)); | ||
| this.y = Math.max(minVal, Math.min(maxVal, this.y)); | ||
| }, | ||
| Vector2.prototype.clampLength = function(min, max) | ||
| { | ||
| var length = this.length(); | ||
| clampLength: function(min, max) | ||
| { | ||
| var length = this.length(); | ||
| return this.divideScalar(length || 1).multiplyScalar(Math.max(min, Math.min(max, length))); | ||
| }, | ||
| return this.divideScalar(length || 1).multiplyScalar(Math.max(min, Math.min(max, length))); | ||
| }; | ||
| floor: function() | ||
| { | ||
| Vector2.prototype.floor = function() | ||
| { | ||
| this.x = Math.floor(this.x); | ||
| this.y = Math.floor(this.y); | ||
| }; | ||
| this.x = Math.floor(this.x); | ||
| this.y = Math.floor(this.y); | ||
| }, | ||
| Vector2.prototype.ceil = function() | ||
| { | ||
| this.x = Math.ceil(this.x); | ||
| this.y = Math.ceil(this.y); | ||
| }; | ||
| ceil: function() | ||
| { | ||
| Vector2.prototype.round = function() | ||
| { | ||
| this.x = Math.round(this.x); | ||
| this.y = Math.round(this.y); | ||
| }; | ||
| this.x = Math.ceil(this.x); | ||
| this.y = Math.ceil(this.y); | ||
| }, | ||
| Vector2.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); | ||
| }; | ||
| round: function() | ||
| { | ||
| Vector2.prototype.negate = function() | ||
| { | ||
| this.x = -this.x; | ||
| this.y = -this.y; | ||
| this.x = Math.round(this.x); | ||
| this.y = Math.round(this.y); | ||
| }, | ||
| return this; | ||
| }; | ||
| 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); | ||
| }, | ||
| Vector2.prototype.dot = function(v) | ||
| { | ||
| return this.x * v.x + this.y * v.y; | ||
| }; | ||
| negate: function() | ||
| { | ||
| this.x = -this.x; | ||
| this.y = -this.y; | ||
| Vector2.prototype.cross = function(v) | ||
| { | ||
| return this.x * v.y - this.y * v.x; | ||
| }; | ||
| return this; | ||
| }, | ||
| Vector2.prototype.lengthSq = function() | ||
| { | ||
| return this.x * this.x + this.y * this.y; | ||
| }; | ||
| dot: function(v) | ||
| { | ||
| return this.x * v.x + this.y * v.y; | ||
| }, | ||
| Vector2.prototype.length = function() | ||
| { | ||
| return Math.sqrt(this.x * this.x + this.y * this.y); | ||
| }; | ||
| cross: function(v) | ||
| { | ||
| return this.x * v.y - this.y * v.x; | ||
| }, | ||
| Vector2.prototype.manhattanLength = function() | ||
| { | ||
| return Math.abs(this.x) + Math.abs(this.y); | ||
| }; | ||
| lengthSq: function() | ||
| { | ||
| return this.x * this.x + this.y * this.y; | ||
| }, | ||
| Vector2.prototype.normalize = function() | ||
| { | ||
| return this.divideScalar(this.length() || 1); | ||
| }; | ||
| length: function() | ||
| { | ||
| return Math.sqrt(this.x * this.x + this.y * this.y); | ||
| }, | ||
| /** | ||
| * Computes the angle in radians with respect to the positive x-axis | ||
| */ | ||
| Vector2.prototype.angle = function() | ||
| { | ||
| var angle = Math.atan2(this.y, this.x); | ||
| manhattanLength: function() | ||
| if(angle < 0) | ||
| { | ||
| return Math.abs(this.x) + Math.abs(this.y); | ||
| }, | ||
| angle += 2 * Math.PI; | ||
| } | ||
| return angle; | ||
| }; | ||
| normalize: function() | ||
| { | ||
| return this.divideScalar(this.length() || 1); | ||
| }, | ||
| Vector2.prototype.distanceTo = function(v) | ||
| { | ||
| return Math.sqrt(this.distanceToSquared(v)); | ||
| }; | ||
| /** | ||
| * Computes the angle in radians with respect to the positive x-axis | ||
| */ | ||
| angle: function() | ||
| { | ||
| var angle = Math.atan2(this.y, this.x); | ||
| Vector2.prototype.distanceToSquared = function(v) | ||
| { | ||
| var dx = this.x - v.x; | ||
| var dy = this.y - v.y; | ||
| if(angle < 0) angle += 2 * Math.PI; | ||
| return dx * dx + dy * dy; | ||
| }; | ||
| return angle; | ||
| }, | ||
| Vector2.prototype.manhattanDistanceTo = function(v) | ||
| { | ||
| return Math.abs(this.x - v.x) + Math.abs(this.y - v.y); | ||
| }; | ||
| distanceTo: function(v) | ||
| { | ||
| return Math.sqrt(this.distanceToSquared(v)); | ||
| }, | ||
| Vector2.prototype.setLength = function(length) | ||
| { | ||
| return this.normalize().multiplyScalar(length); | ||
| }; | ||
| distanceToSquared: function(v) | ||
| { | ||
| var dx = this.x - v.x, | ||
| dy = this.y - v.y; | ||
| return dx * dx + dy * dy; | ||
| }, | ||
| Vector2.prototype.lerp = function(v, alpha) | ||
| { | ||
| this.x += (v.x - this.x) * alpha; | ||
| this.y += (v.y - this.y) * alpha; | ||
| }; | ||
| manhattanDistanceTo: function(v) | ||
| { | ||
| return Math.abs(this.x - v.x) + Math.abs(this.y - v.y); | ||
| }, | ||
| Vector2.prototype.lerpVectors = function(v1, v2, alpha) | ||
| { | ||
| return this.subVectors(v2, v1).multiplyScalar(alpha).add(v1); | ||
| }; | ||
| setLength: function(length) | ||
| { | ||
| return this.normalize().multiplyScalar(length); | ||
| }, | ||
| Vector2.prototype.equals = function(v) | ||
| { | ||
| return ((v.x === this.x) && (v.y === this.y)); | ||
| }; | ||
| lerp: function(v, alpha) | ||
| { | ||
| this.x += (v.x - this.x) * alpha; | ||
| this.y += (v.y - this.y) * alpha; | ||
| }, | ||
| Vector2.prototype.fromArray = function(array, offset) | ||
| { | ||
| if(offset === undefined) offset = 0; | ||
| lerpVectors: function(v1, v2, alpha) | ||
| { | ||
| return this.subVectors(v2, v1).multiplyScalar(alpha).add(v1); | ||
| }, | ||
| this.x = array[offset]; | ||
| this.y = array[offset + 1]; | ||
| }; | ||
| equals: function(v) | ||
| { | ||
| return ((v.x === this.x) && (v.y === this.y)); | ||
| }, | ||
| Vector2.prototype.toArray = function(array, offset) | ||
| { | ||
| if(array === undefined) array = []; | ||
| if(offset === undefined) offset = 0; | ||
| fromArray: function(array, offset) | ||
| { | ||
| if(offset === undefined) offset = 0; | ||
| array[offset] = this.x; | ||
| array[offset + 1] = this.y; | ||
| this.x = array[offset]; | ||
| this.y = array[offset + 1]; | ||
| }, | ||
| return array; | ||
| }; | ||
| toArray: function(array, offset) | ||
| { | ||
| if(array === undefined) array = []; | ||
| if(offset === undefined) offset = 0; | ||
| Vector2.prototype.rotateAround = function(center, angle) | ||
| { | ||
| var c = Math.cos(angle); | ||
| var s = Math.sin(angle); | ||
| array[offset] = this.x; | ||
| array[offset + 1] = this.y; | ||
| var x = this.x - center.x; | ||
| var y = this.y - center.y; | ||
| return array; | ||
| }, | ||
| this.x = x * c - y * s + center.x; | ||
| this.y = x * s + y * c + center.y; | ||
| }; | ||
| rotateAround: function(center, angle) | ||
| { | ||
| var c = Math.cos(angle), | ||
| s = Math.sin(angle); | ||
| var x = this.x - center.x; | ||
| var y = this.y - center.y; | ||
| this.x = x * c - y * s + center.x; | ||
| this.y = x * s + y * c + center.y; | ||
| } | ||
| }); | ||
| /** | ||
@@ -426,13 +429,24 @@ * 2D 3x2 transformation matrix, applied to the canvas elements. | ||
| /** | ||
| * Compose this transformation matrix with position scale and rotation. | ||
| * Compose this transformation matrix with position scale and rotation and origin point. | ||
| */ | ||
| Matrix.prototype.compose = function(px, py, sx, sy, a) | ||
| Matrix.prototype.compose = function(px, py, sx, sy, ox, oy, a) | ||
| { | ||
| this.m = [1, 0, 0, 1, px, py]; | ||
| var c = Math.cos(a); | ||
| var s = Math.sin(a); | ||
| this.multiply(new Matrix([c, s, -s, c, 0, 0])); | ||
| if(a !== 0) | ||
| { | ||
| var c = Math.cos(a); | ||
| var s = Math.sin(a); | ||
| this.multiply(new Matrix([c, s, -s, c, 0, 0])); | ||
| } | ||
| this.scale(sx, sy); | ||
| if(ox !== 0 || oy !== 0) | ||
| { | ||
| this.multiply(new Matrix([1, 0, 0, 1, -ox, -oy])); | ||
| } | ||
| if(sx !== 1 || sy !== 1) | ||
| { | ||
| this.scale(sx, sy); | ||
| } | ||
| }; | ||
@@ -629,2 +643,7 @@ | ||
| /** | ||
| * Origin of the object used as point of rotation. | ||
| */ | ||
| this.origin = new Vector2(0, 0); | ||
| /** | ||
| * Scale of the object. | ||
@@ -680,5 +699,25 @@ */ | ||
| */ | ||
| this.draggable = true; | ||
| this.draggable = false; | ||
| /** | ||
| * Flag to indicate wheter this objet ignores the viewport transformation. | ||
| */ | ||
| this.ignoreViewport = false; | ||
| /** | ||
| * Flag to indicate if the context of canvas should be saved before render. | ||
| */ | ||
| this.saveContextState = true; | ||
| /** | ||
| * Flag to indicate if the context of canvas should be restored after render. | ||
| */ | ||
| this.restoreContextState = true; | ||
| /** | ||
| * 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. | ||
@@ -754,3 +793,3 @@ * | ||
| { | ||
| this.matrix.compose(this.position.x, this.position.y, this.scale.x, this.scale.y, this.rotation); | ||
| 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); | ||
@@ -769,2 +808,12 @@ | ||
| /** | ||
| * Apply the transform to the rendering context. | ||
| * | ||
| * Can also be used for pre rendering logic. | ||
| */ | ||
| Object2D.prototype.transform = function(context, viewport) | ||
| { | ||
| this.globalMatrix.tranformContext(context); | ||
| }; | ||
| /** | ||
| * Draw the object into the canvas. | ||
@@ -776,3 +825,3 @@ * | ||
| */ | ||
| Object2D.prototype.draw = function(context){}; | ||
| Object2D.prototype.draw = function(context, viewport){}; | ||
@@ -812,3 +861,6 @@ /** | ||
| */ | ||
| Object2D.prototype.onPointerDrag = null; | ||
| Object2D.prototype.onPointerDrag = function(pointer, viewport, delta) | ||
| { | ||
| this.position.add(delta); | ||
| }; | ||
@@ -1333,2 +1385,7 @@ /** | ||
| this.pointer.setCanvas(canvas); | ||
| /** | ||
| * Indicates if the canvas should be automatically cleared on each new frame. | ||
| */ | ||
| this.autoClear = true; | ||
| } | ||
@@ -1382,3 +1439,3 @@ | ||
| var child = objects[i]; | ||
| var childPoint = child.inverseGlobalMatrix.transformPoint(viewportPoint); | ||
| var childPoint = child.inverseGlobalMatrix.transformPoint(child.ignoreViewport ? point : viewportPoint); | ||
@@ -1400,2 +1457,14 @@ // Check if the pointer pointer is inside | ||
| // Pointer pressed | ||
| if(pointer.buttonPressed(Pointer.LEFT) && child.onButtonPressed !== null) | ||
| { | ||
| child.onButtonPressed(pointer, viewport); | ||
| } | ||
| // Just released | ||
| if(pointer.buttonJustReleased(Pointer.LEFT) && child.onButtonUp !== null) | ||
| { | ||
| child.onButtonUp(pointer, viewport); | ||
| } | ||
| // Pointer just pressed | ||
@@ -1412,2 +1481,4 @@ if(pointer.buttonJustPressed(Pointer.LEFT)) | ||
| child.beingDragged = true; | ||
| // Only start a drag operation on the top element. | ||
| break; | ||
@@ -1417,14 +1488,2 @@ } | ||
| // Pointer pressed | ||
| if(pointer.buttonPressed(Pointer.LEFT) && child.onButtonPressed !== null) | ||
| { | ||
| child.onButtonPressed(pointer, viewport); | ||
| } | ||
| // Just released | ||
| if(pointer.buttonJustReleased(Pointer.LEFT) && child.onButtonUp !== null) | ||
| { | ||
| child.onButtonUp(pointer, viewport); | ||
| } | ||
| child.pointerInside = true; | ||
@@ -1459,13 +1518,15 @@ } | ||
| if(child.beingDragged) | ||
| { | ||
| var matrix = viewport.inverseMatrix.clone(); | ||
| matrix.multiply(child.inverseGlobalMatrix); | ||
| matrix.setPosition(0, 0); | ||
| { | ||
| var lastPosition = pointer.position.clone(); | ||
| lastPosition.sub(pointer.delta); | ||
| var delta = matrix.transformPoint(pointer.delta); | ||
| child.position.add(delta); | ||
| var positionWorld = viewport.inverseMatrix.transformPoint(pointer.position); | ||
| var lastWorld = viewport.inverseMatrix.transformPoint(lastPosition); | ||
| // Mouse delta in world coordinates | ||
| positionWorld.sub(lastWorld); | ||
| if(child.onPointerDrag !== null) | ||
| { | ||
| child.onPointerDrag(pointer, viewport, delta); | ||
| child.onPointerDrag(pointer, viewport, positionWorld); | ||
| } | ||
@@ -1489,19 +1550,32 @@ } | ||
| // Render the content | ||
| var context = this.context; | ||
| // Clear canvas | ||
| context.setTransform(1, 0, 0, 1, 0, 0); | ||
| context.clearRect(0, 0, this.canvas.width, this.canvas.height); | ||
| 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(context); | ||
| viewport.matrix.setContextTransform(this.context); | ||
| // Render into the canvas | ||
| for(var i = 0; i < objects.length; i++) | ||
| { | ||
| context.save(); | ||
| objects[i].globalMatrix.tranformContext(context); | ||
| objects[i].draw(context); | ||
| context.restore(); | ||
| { | ||
| if(objects[i].saveContextState) | ||
| { | ||
| this.context.save(); | ||
| } | ||
| if(objects[i].ignoreViewport) | ||
| { | ||
| this.context.setTransform(1, 0, 0, 1, 0, 0); | ||
| } | ||
| objects[i].transform(this.context, viewport); | ||
| objects[i].draw(this.context, viewport); | ||
| if(objects[i].restoreContextState) | ||
| { | ||
| this.context.restore(); | ||
| } | ||
| } | ||
@@ -1594,3 +1668,3 @@ }; | ||
| { | ||
| this.matrix.compose(this.position.x, this.position.y, this.scale, this.scale, this.rotation); | ||
| this.matrix.compose(this.position.x, this.position.y, this.scale, this.scale, 0, 0, this.rotation); | ||
| this.inverseMatrix = this.matrix.getInverse(); | ||
@@ -1602,5 +1676,29 @@ //this.matrixNeedsUpdate = false; | ||
| /** | ||
| * 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. | ||
| * | ||
| * Can be used for collision detection with points and other boxes. | ||
| * | ||
| * @class | ||
| */ | ||
@@ -1613,162 +1711,186 @@ function Box2(min, max) | ||
| Object.assign(Box2.prototype, | ||
| /** | ||
| * Set the box values. | ||
| */ | ||
| Box2.prototype.set = function(min, max) | ||
| { | ||
| set: function(min, max) | ||
| { | ||
| this.min.copy(min); | ||
| this.max.copy(max); | ||
| this.min.copy(min); | ||
| this.max.copy(max); | ||
| return this; | ||
| }, | ||
| return this; | ||
| }; | ||
| setFromPoints: function(points) | ||
| { | ||
| this.min = new Vector2(+Infinity, +Infinity); | ||
| this.max = new Vector2(-Infinity, -Infinity); | ||
| /** | ||
| * Set the box from a list of Vector2 points. | ||
| */ | ||
| Box2.prototype.setFromPoints = function(points) | ||
| { | ||
| this.min = new Vector2(+Infinity, +Infinity); | ||
| this.max = new Vector2(-Infinity, -Infinity); | ||
| for(var i = 0, il = points.length; i < il; i++) | ||
| { | ||
| this.expandByPoint(points[i]); | ||
| } | ||
| return this; | ||
| }, | ||
| setFromCenterAndSize: function(center, size) | ||
| for(var i = 0, il = points.length; i < il; i++) | ||
| { | ||
| var v1 = new Vector2(); | ||
| var halfSize = v1.copy(size).multiplyScalar(0.5); | ||
| this.min.copy(center).sub(halfSize); | ||
| this.max.copy(center).add(halfSize); | ||
| this.expandByPoint(points[i]); | ||
| } | ||
| return this; | ||
| }, | ||
| return this; | ||
| }; | ||
| clone: function() | ||
| { | ||
| var box = new Box2(); | ||
| box.copy(this); | ||
| return box; | ||
| }, | ||
| /** | ||
| * Set the box minimum and maximum from center point and size. | ||
| */ | ||
| Box2.prototype.setFromCenterAndSize = function(center, size) | ||
| { | ||
| var v1 = new Vector2(); | ||
| var halfSize = v1.copy(size).multiplyScalar(0.5); | ||
| this.min.copy(center).sub(halfSize); | ||
| this.max.copy(center).add(halfSize); | ||
| copy: function(box) | ||
| { | ||
| this.min.copy(box.min); | ||
| this.max.copy(box.max); | ||
| return this; | ||
| }; | ||
| return this; | ||
| }, | ||
| /** | ||
| * Clone the box into a new object. | ||
| */ | ||
| Box2.prototype.clone = function() | ||
| { | ||
| var box = new Box2(); | ||
| box.copy(this); | ||
| return box; | ||
| }; | ||
| /** | ||
| * Copy the box value from another box. | ||
| */ | ||
| Box2.prototype.copy = function(box) | ||
| { | ||
| this.min.copy(box.min); | ||
| this.max.copy(box.max); | ||
| }; | ||
| 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); | ||
| }, | ||
| 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); | ||
| }; | ||
| getCenter: function(target) | ||
| { | ||
| return this.isEmpty() ? target.set(0, 0) : target.addVectors(this.min, this.max).multiplyScalar(0.5); | ||
| }, | ||
| Box2.prototype.getCenter = function(target) | ||
| { | ||
| return this.isEmpty() ? target.set(0, 0) : target.addVectors(this.min, this.max).multiplyScalar(0.5); | ||
| }; | ||
| getSize: function(target) | ||
| { | ||
| return this.isEmpty() ? target.set(0, 0) : target.subVectors(this.max, this.min); | ||
| }, | ||
| Box2.prototype.getSize = function(target) | ||
| { | ||
| return this.isEmpty() ? target.set(0, 0) : target.subVectors(this.max, this.min); | ||
| }; | ||
| expandByPoint: function(point) | ||
| { | ||
| this.min.min(point); | ||
| this.max.max(point); | ||
| Box2.prototype.expandByPoint = function(point) | ||
| { | ||
| this.min.min(point); | ||
| this.max.max(point); | ||
| return this; | ||
| }, | ||
| return this; | ||
| }; | ||
| expandByVector: function(vector) | ||
| { | ||
| this.min.sub(vector); | ||
| this.max.add(vector); | ||
| Box2.prototype.expandByVector = function(vector) | ||
| { | ||
| this.min.sub(vector); | ||
| this.max.add(vector); | ||
| }; | ||
| return this; | ||
| }, | ||
| Box2.prototype.expandByScalar = function(scalar) | ||
| { | ||
| this.min.addScalar(-scalar); | ||
| this.max.addScalar(scalar); | ||
| }; | ||
| expandByScalar: function(scalar) | ||
| { | ||
| this.min.addScalar(-scalar); | ||
| this.max.addScalar(scalar); | ||
| Box2.prototype.containsPoint = function(point) | ||
| { | ||
| return point.x < this.min.x || point.x > this.max.x || point.y < this.min.y || point.y > this.max.y ? false : true; | ||
| }; | ||
| return this; | ||
| }, | ||
| Box2.prototype.containsBox = function(box) | ||
| { | ||
| return this.min.x <= box.min.x && box.max.x <= this.max.x && this.min.y <= box.min.y && box.max.y <= this.max.y; | ||
| }; | ||
| containsPoint: function(point) | ||
| { | ||
| return point.x < this.min.x || point.x > this.max.x || point.y < this.min.y || point.y > this.max.y ? false : true; | ||
| }, | ||
| /** | ||
| * Check if two boxes intersect each other, using 4 splitting planes to rule out intersections. | ||
| * | ||
| * @param {Box2} box | ||
| */ | ||
| Box2.prototype.intersectsBox = function(box) | ||
| { | ||
| return box.max.x < this.min.x || box.min.x > this.max.x || box.max.y < this.min.y || box.min.y > this.max.y ? false : true; | ||
| }; | ||
| containsBox: function(box) | ||
| { | ||
| return this.min.x <= box.min.x && box.max.x <= this.max.x && this.min.y <= box.min.y && box.max.y <= this.max.y; | ||
| }, | ||
| Box2.prototype.clampPoint = function(point, target) | ||
| { | ||
| return target.copy(point).clamp(this.min, this.max); | ||
| }; | ||
| getParameter: function(point, target) | ||
| { | ||
| // This can potentially have a divide by zero if the box | ||
| // has a size dimension of 0. | ||
| /** | ||
| * Calculate the distance to a point. | ||
| * | ||
| * @param {Vector2} point | ||
| */ | ||
| Box2.prototype.distanceToPoint = function(point) | ||
| { | ||
| var v = new Vector2(); | ||
| var clampedPoint = v.copy(point).clamp(this.min, this.max); | ||
| return clampedPoint.sub(point).length(); | ||
| }; | ||
| return target.set( | ||
| (point.x - this.min.x) / (this.max.x - this.min.x), | ||
| (point.y - this.min.y) / (this.max.y - this.min.y) | ||
| ); | ||
| }, | ||
| /** | ||
| * Make a intersection between this box and another box. | ||
| * | ||
| * Store the result in this object. | ||
| * | ||
| * @param {Box2} box | ||
| */ | ||
| Box2.prototype.intersect = function(box) | ||
| { | ||
| this.min.max(box.min); | ||
| this.max.min(box.max); | ||
| }; | ||
| intersectsBox: function(box) | ||
| { | ||
| // using 4 splitting planes to rule out intersections | ||
| return box.max.x < this.min.x || box.min.x > this.max.x || box.max.y < this.min.y || box.min.y > this.max.y ? false : true; | ||
| }, | ||
| /** | ||
| * Make a union between this box and another box. | ||
| * | ||
| * Store the result in this object. | ||
| * | ||
| * @param {Box2} box | ||
| */ | ||
| Box2.prototype.union = function(box) | ||
| { | ||
| this.min.min(box.min); | ||
| this.max.max(box.max); | ||
| }; | ||
| clampPoint: function(point, target) | ||
| { | ||
| return target.copy(point).clamp(this.min, this.max); | ||
| }, | ||
| /** | ||
| * Translate the box by a offset value, adds the offset to booth min and max. | ||
| * | ||
| * @param {Vector2} offset | ||
| */ | ||
| Box2.prototype.translate = function(offset) | ||
| { | ||
| this.min.add(offset); | ||
| this.max.add(offset); | ||
| }; | ||
| distanceToPoint: function(point) | ||
| { | ||
| var v = new Vector2(); | ||
| var clampedPoint = v.copy(point).clamp(this.min, this.max); | ||
| return clampedPoint.sub(point).length(); | ||
| }, | ||
| /** | ||
| * Checks if two boxes are equal. | ||
| * | ||
| * @param {Box2} box | ||
| * @return {boolean} True if the two boxes are equal. | ||
| */ | ||
| Box2.prototype.equals = function(box) | ||
| { | ||
| return box.min.equals(this.min) && box.max.equals(this.max); | ||
| }; | ||
| intersect: function(box) | ||
| { | ||
| this.min.max(box.min); | ||
| this.max.min(box.max); | ||
| return this; | ||
| }, | ||
| union: function(box) | ||
| { | ||
| this.min.min(box.min); | ||
| this.max.max(box.max); | ||
| return this; | ||
| }, | ||
| translate: function(offset) | ||
| { | ||
| this.min.add(offset); | ||
| this.max.add(offset); | ||
| return this; | ||
| }, | ||
| equals: function(box) | ||
| { | ||
| return box.min.equals(this.min) && box.max.equals(this.max); | ||
| } | ||
| }); | ||
| /** | ||
| * Circle object draw a circular object. | ||
| * Circle object draw a circular object, into the canvas. | ||
| * | ||
| * @class | ||
| */ | ||
@@ -1828,42 +1950,41 @@ function Circle() | ||
| function Helpers(){} | ||
| /** | ||
| * Box object draw a box. | ||
| * Create a rotation tool | ||
| */ | ||
| function Box(resizable) | ||
| Helpers.rotateTool = function(object) | ||
| { | ||
| Object2D.call(this); | ||
| var tool = new Circle(); | ||
| tool.radius = 4; | ||
| tool.layer = object.layer + 1; | ||
| tool.onPointerDrag = function(pointer, viewport, delta) | ||
| { | ||
| object.rotation += delta.x * 1e-3; | ||
| }; | ||
| object.add(tool); | ||
| }; | ||
| /** | ||
| * Box object containing the size of the object. | ||
| */ | ||
| this.box = new Box2(new Vector2(-50, -35), new Vector2(50, 35)); | ||
| /** | ||
| * Color of the box border line. | ||
| */ | ||
| this.strokeStyle = "#000000"; | ||
| /** | ||
| * Background color of the box. | ||
| */ | ||
| this.fillStyle = "#FFFFFF"; | ||
| if(resizable) | ||
| /** | ||
| * Create a box resize helper and attach it to an object to change the size of the object box. | ||
| * | ||
| * Each helper is positioned on one corner of the box, and the value of the corner is copied to the boxes as they are dragged. | ||
| * | ||
| * This method required to object to have a box property. | ||
| */ | ||
| Helpers.boxResizeTool = function(object) | ||
| { | ||
| if(object.box === undefined) | ||
| { | ||
| this.createResizeHelpers(); | ||
| console.warn("trenette.js: Helpers.boxResizeTool(), object box property missing."); | ||
| return; | ||
| } | ||
| } | ||
| Box.prototype = Object.create(Object2D.prototype); | ||
| Box.prototype.createResizeHelpers = function(first_argument) | ||
| { | ||
| var self = this; | ||
| function updateHelpers() | ||
| { | ||
| topRight.position.copy(self.box.min); | ||
| bottomLeft.position.copy(self.box.max); | ||
| topLeft.position.set(self.box.max.x, self.box.min.y); | ||
| bottomRight.position.set(self.box.min.x, self.box.max.y); | ||
| topRight.position.copy(object.box.min); | ||
| bottomLeft.position.copy(object.box.max); | ||
| topLeft.position.set(object.box.max.x, object.box.min.y); | ||
| bottomRight.position.set(object.box.min.x, object.box.max.y); | ||
| } | ||
@@ -1873,37 +1994,53 @@ | ||
| topRight.radius = 4; | ||
| topRight.layer = object.layer + 1; | ||
| topRight.draggable = true; | ||
| topRight.onPointerDrag = function(pointer, viewport, delta) | ||
| { | ||
| self.box.min.copy(topRight.position); | ||
| Object2D.prototype.onPointerDrag.call(this, pointer, viewport, delta); | ||
| object.box.min.copy(topRight.position); | ||
| updateHelpers(); | ||
| }; | ||
| this.add(topRight); | ||
| object.add(topRight); | ||
| var topLeft = new Circle(); | ||
| topLeft.radius = 4; | ||
| topLeft.layer = object.layer + 1; | ||
| topLeft.draggable = true; | ||
| topLeft.onPointerDrag = function(pointer, viewport, delta) | ||
| { | ||
| self.box.max.x = topLeft.position.x; | ||
| self.box.min.y = topLeft.position.y; | ||
| Object2D.prototype.onPointerDrag.call(this, pointer, viewport, delta); | ||
| object.box.max.x = topLeft.position.x; | ||
| object.box.min.y = topLeft.position.y; | ||
| updateHelpers(); | ||
| }; | ||
| this.add(topLeft); | ||
| object.add(topLeft); | ||
| var bottomLeft = new Circle(); | ||
| bottomLeft.radius = 4; | ||
| bottomLeft.layer = object.layer + 1; | ||
| bottomLeft.draggable = true; | ||
| bottomLeft.onPointerDrag = function(pointer, viewport, delta) | ||
| { | ||
| self.box.max.copy(bottomLeft.position); | ||
| Object2D.prototype.onPointerDrag.call(this, pointer, viewport, delta); | ||
| object.box.max.copy(bottomLeft.position); | ||
| updateHelpers(); | ||
| }; | ||
| this.add(bottomLeft); | ||
| object.add(bottomLeft); | ||
| var bottomRight = new Circle(); | ||
| bottomRight.radius = 4; | ||
| bottomRight.layer = object.layer + 1; | ||
| bottomRight.draggable = true; | ||
| bottomRight.onPointerDrag = function(pointer, viewport, delta) | ||
| { | ||
| self.box.min.x = bottomRight.position.x; | ||
| self.box.max.y = bottomRight.position.y; | ||
| Object2D.prototype.onPointerDrag.call(this, pointer, viewport, delta); | ||
| object.box.min.x = bottomRight.position.x; | ||
| object.box.max.y = bottomRight.position.y; | ||
| updateHelpers(); | ||
| }; | ||
| this.add(bottomRight); | ||
| object.add(bottomRight); | ||
@@ -1913,2 +2050,29 @@ updateHelpers(); | ||
| /** | ||
| * Box object draw a box. | ||
| * | ||
| * @class | ||
| */ | ||
| function Box() | ||
| { | ||
| Object2D.call(this); | ||
| /** | ||
| * Box object containing the size of the object. | ||
| */ | ||
| this.box = new Box2(new Vector2(-50, -35), new Vector2(50, 35)); | ||
| /** | ||
| * Color of the box border line. | ||
| */ | ||
| this.strokeStyle = "#000000"; | ||
| /** | ||
| * Background color of the box. | ||
| */ | ||
| this.fillStyle = "#FFFFFF"; | ||
| } | ||
| Box.prototype = Object.create(Object2D.prototype); | ||
| Box.prototype.onPointerEnter = function(pointer, viewport) | ||
@@ -1944,2 +2108,4 @@ { | ||
| * Line object draw a line from one point to another. | ||
| * | ||
| * @class | ||
| */ | ||
@@ -1968,2 +2134,12 @@ function Line() | ||
| this.strokeStyle = "#000000"; | ||
| /** | ||
| * Dash line pattern to be used, is empty draws a solid line. | ||
| */ | ||
| this.dashPattern = [5, 5]; | ||
| /** | ||
| * Line width. | ||
| */ | ||
| this.lineWidth = 1; | ||
| } | ||
@@ -1975,5 +2151,5 @@ | ||
| { | ||
| context.lineWidth = 1; | ||
| context.lineWidth = this.lineWidth; | ||
| context.strokeStyle = this.strokeStyle; | ||
| context.setLineDash([5, 5]); | ||
| context.setLineDash(this.dashPattern); | ||
@@ -1986,2 +2162,7 @@ context.beginPath(); | ||
| /** | ||
| * Text element, used to draw text into the canvas. | ||
| * | ||
| * @class | ||
| */ | ||
| function Text() | ||
@@ -2005,2 +2186,7 @@ { | ||
| this.color = "#000000"; | ||
| /** | ||
| * Text align property. | ||
| */ | ||
| this.textAlign = "center"; | ||
| } | ||
@@ -2013,3 +2199,3 @@ | ||
| context.font = this.font; | ||
| context.textAlign = "center"; | ||
| context.textAlign = this.textAlign; | ||
| context.fillStyle = this.color; | ||
@@ -2020,8 +2206,26 @@ | ||
| /** | ||
| * Image object is used to draw an image from URL. | ||
| * | ||
| * @class | ||
| * @param {string} [src] Source URL of the image. | ||
| */ | ||
| function Image(src) | ||
| { | ||
| Object2D.call(this); | ||
| /** | ||
| * Box object containing the size of the object. | ||
| */ | ||
| this.box = new Box2(); | ||
| /** | ||
| * Image source DOM element. | ||
| */ | ||
| this.image = document.createElement("img"); | ||
| this.image.src = src; | ||
| if(src !== undefined) | ||
| { | ||
| this.setImage(src); | ||
| } | ||
| } | ||
@@ -2031,11 +2235,152 @@ | ||
| /** | ||
| * Set the image of the object. | ||
| * | ||
| * Automatically sets the box size to match the image. | ||
| * | ||
| * @param {string} src Source URL of the image. | ||
| */ | ||
| Image.prototype.setImage = function(src) | ||
| { | ||
| var self = this; | ||
| this.image.onload = function() | ||
| { | ||
| self.box.min.set(0, 0); | ||
| self.box.max.set(this.naturalWidth, this.naturalHeight); | ||
| }; | ||
| this.image.src = src; | ||
| }; | ||
| Image.prototype.isInside = function(point) | ||
| { | ||
| return this.box.containsPoint(point); | ||
| }; | ||
| Image.prototype.draw = function(context) | ||
| { | ||
| context.drawImage(this.image, 0, 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); | ||
| }; | ||
| /** | ||
| * A DOM object transformed using CSS3D to ver included in the graph. | ||
| * | ||
| * DOM objects always stay on top of everything else, mouse events are not supported for these. | ||
| * | ||
| * Use the normal DOM events for interaction. | ||
| * | ||
| * @class | ||
| * @param parent Parent DOM element that contains the drawing canvas. | ||
| * @param type Type of the DOM element (e.g. "div", "p", ...) | ||
| */ | ||
| function DOM(parent, type) | ||
| { | ||
| Object2D.call(this); | ||
| /** | ||
| * DOM element contained by this object. | ||
| */ | ||
| 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"; | ||
| parent.appendChild(this.element); | ||
| /** | ||
| * Size of the DOM element (in world coordinates). | ||
| */ | ||
| this.size = new Vector2(100, 100); | ||
| } | ||
| DOM.prototype = Object.create(Object2D.prototype); | ||
| DOM.prototype.draw = function(context, viewport) | ||
| { | ||
| // CSS trasnformation matrix | ||
| var projection = viewport.matrix.clone(); | ||
| projection.multiply(this.globalMatrix); | ||
| this.element.style.transform = projection.cssTransform(); | ||
| // Size of the element | ||
| this.element.style.width = this.size.x + "px"; | ||
| this.element.style.height = this.size.y + "px"; | ||
| }; | ||
| /** | ||
| * Pattern object draw a image repeated as a pattern. | ||
| * | ||
| * Its similar to the Image class but the image can be repeat infinitly. | ||
| * | ||
| * @class | ||
| */ | ||
| function Pattern(src) | ||
| { | ||
| Object2D.call(this); | ||
| /** | ||
| * Box object containing the size of the object. | ||
| */ | ||
| this.box = new Box2(); | ||
| /** | ||
| * Image source DOM element. | ||
| */ | ||
| this.image = document.createElement("img"); | ||
| /** | ||
| * A DOMString indicating how to repeat the pattern image. | ||
| */ | ||
| this.repetition = "repeat"; | ||
| if(src !== undefined) | ||
| { | ||
| this.setImage(src); | ||
| } | ||
| } | ||
| Pattern.prototype = Object.create(Object2D.prototype); | ||
| /** | ||
| * Set the image of the object. | ||
| * | ||
| * Automatically sets the box size to match the image. | ||
| */ | ||
| Pattern.prototype.setImage = function(src) | ||
| { | ||
| var self = this; | ||
| this.image.onload = function() | ||
| { | ||
| self.box.min.set(0, 0); | ||
| self.box.max.set(this.naturalWidth, this.naturalHeight); | ||
| }; | ||
| this.image.src = src; | ||
| }; | ||
| Pattern.prototype.isInside = function(point) | ||
| { | ||
| return this.box.containsPoint(point); | ||
| }; | ||
| Pattern.prototype.draw = function(context, viewport) | ||
| { | ||
| var width = this.box.max.x - this.box.min.x; | ||
| var height = this.box.max.y - this.box.min.y; | ||
| var pattern = context.createPattern(this.image, this.repetition); | ||
| //pattern.setTransform(); | ||
| context.fillStyle = pattern; | ||
| context.fillRect(this.box.min.x, this.box.min.y, width, height); | ||
| }; | ||
| exports.Box = Box; | ||
| exports.Box2 = Box2; | ||
| exports.Circle = Circle; | ||
| exports.DOM = DOM; | ||
| exports.EventManager = EventManager; | ||
| exports.Helpers = Helpers; | ||
| exports.Image = Image; | ||
@@ -2046,4 +2391,6 @@ exports.Key = Key; | ||
| exports.Object2D = Object2D; | ||
| exports.Pattern = Pattern; | ||
| exports.Pointer = Pointer; | ||
| exports.Renderer = Renderer; | ||
| exports.Stencil = Stencil; | ||
| exports.Text = Text; | ||
@@ -2050,0 +2397,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 r(t){void 0!==t?this.m=t:this.identity()}function i(){}function e(){this.uuid=i.generate(),this.children=[],this.parent=null,this.position=new o(0,0),this.scale=new o(1,1),this.rotation=0,this.visible=!0,this.layer=0,this.matrix=new r,this.globalMatrix=new r,this.inverseGlobalMatrix=new r,this.matrixNeedsUpdate=!0,this.draggable=!0,this.pointerInside=!1,this.beingDragged=!1}function h(){this.pressed=!1,this.justPressed=!1,this.justReleased=!1}function m(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 h,this.keys[i]=new h;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(m.LEFT,h.DOWN),s.set(i.clientX,i.clientY)}),this.events.add(this.domElement,"touchend",function(t){e.updateKey(m.LEFT,h.UP)}),this.events.add(this.domElement,"touchcancel",function(t){e.updateKey(m.LEFT,h.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,h.DOWN)}),this.events.add(this.domElement,"mouseup",function(t){e.updateKey(t.which-1,h.UP)}),this.events.add(this.domElement,"dragstart",function(t){e.updateKey(t.which-1,h.UP)}),this.events.add(this.domElement,"dblclick",function(t){e._doubleClicked[t.which-1]=!0}),this.create()}function s(t){this.canvas=t,this.context=t.getContext("2d"),this.context.imageSmoothingEnabled=!0,this.context.globalCompositeOperation="source-over",this.pointer=new m,this.pointer.setCanvas(t)}function a(){this.uuid=i.generate(),this.position=new o(0,0),this.scale=1,this.rotation=0,this.matrix=new r,this.inverseMatrix=new r,this.matrixNeedsUpdate=!0,this.moveOnScale=!0}function u(t,i){this.min=void 0!==t?t:new o,this.max=void 0!==i?i:new o}function l(){e.call(this),this.radius=10,this.strokeStyle="#000000",this.fillStyle="#FFFFFF"}function c(t){e.call(this),this.box=new u(new o(-50,-35),new o(50,35)),this.strokeStyle="#000000",this.fillStyle="#FFFFFF",t&&this.createResizeHelpers()}function d(){e.call(this),this.from=new o,this.to=new o,this.strokeStyle="#000000"}function p(){e.call(this),this.text="",this.font="16px Arial",this.color="#000000"}function y(t){e.call(this),this.image=document.createElement("img"),this.image.src=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}},Object.assign(o.prototype,{set:function(t,i){this.x=t,this.y=i},setScalar:function(t){this.x=t,this.y=t},clone:function(){return new o(this.x,this.y)},copy:function(t){this.x=t.x,this.y=t.y},add:function(t,i){this.x+=t.x,this.y+=t.y},addScalar:function(t){this.x+=t,this.y+=t},addVectors:function(t,i){this.x=t.x+i.x,this.y=t.y+i.y},addScaledVector:function(t,i){this.x+=t.x*i,this.y+=t.y*i},sub:function(t,i){this.x-=t.x,this.y-=t.y},subScalar:function(t){this.x-=t,this.y-=t},subVectors:function(t,i){this.x=t.x-i.x,this.y=t.y-i.y},multiply:function(t){this.x*=t.x,this.y*=t.y},multiplyScalar:function(t){this.x*=t,this.y*=t},divide:function(t){this.x/=t.x,this.y/=t.y},divideScalar:function(t){return this.multiplyScalar(1/t)},min:function(t){this.x=Math.min(this.x,t.x),this.y=Math.min(this.y,t.y)},max:function(t){this.x=Math.max(this.x,t.x),this.y=Math.max(this.y,t.y)},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))},clampScalar:function(t,i){this.x=Math.max(t,Math.min(i,this.x)),this.y=Math.max(t,Math.min(i,this.y))},clampLength:function(t,i){var e=this.length();return this.divideScalar(e||1).multiplyScalar(Math.max(t,Math.min(i,e)))},floor:function(){this.x=Math.floor(this.x),this.y=Math.floor(this.y)},ceil:function(){this.x=Math.ceil(this.x),this.y=Math.ceil(this.y)},round:function(){this.x=Math.round(this.x),this.y=Math.round(this.y)},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)},negate:function(){return this.x=-this.x,this.y=-this.y,this},dot:function(t){return this.x*t.x+this.y*t.y},cross:function(t){return this.x*t.y-this.y*t.x},lengthSq:function(){return this.x*this.x+this.y*this.y},length:function(){return Math.sqrt(this.x*this.x+this.y*this.y)},manhattanLength:function(){return Math.abs(this.x)+Math.abs(this.y)},normalize:function(){return this.divideScalar(this.length()||1)},angle:function(){var t=Math.atan2(this.y,this.x);return t<0&&(t+=2*Math.PI),t},distanceTo:function(t){return Math.sqrt(this.distanceToSquared(t))},distanceToSquared:function(t){var i=this.x-t.x,e=this.y-t.y;return i*i+e*e},manhattanDistanceTo:function(t){return Math.abs(this.x-t.x)+Math.abs(this.y-t.y)},setLength:function(t){return this.normalize().multiplyScalar(t)},lerp:function(t,i){this.x+=(t.x-this.x)*i,this.y+=(t.y-this.y)*i},lerpVectors:function(t,i,e){return this.subVectors(i,t).multiplyScalar(e).add(t)},equals:function(t){return t.x===this.x&&t.y===this.y},fromArray:function(t,i){void 0===i&&(i=0),this.x=t[i],this.y=t[i+1]},toArray:function(t,i){return void 0===t&&(t=[]),void 0===i&&(i=0),t[i]=this.x,t[i+1]=this.y,t},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}}),r.prototype.copy=function(t){this.m=t.m.slice(0)},r.prototype.clone=function(){return new r(this.m.slice(0))},r.prototype.identity=function(){this.m=[1,0,0,1,0,0]},r.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],h=this.m[1]*t.m[4]+this.m[3]*t.m[5]+this.m[5];this.m=[i,e,s,n,o,h]},r.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],h=t.m[1]*this.m[4]+t.m[3]*this.m[5]+t.m[5];this.m=[i,e,s,n,o,h]},r.prototype.compose=function(t,i,e,s,n){this.m=[1,0,0,1,t,i];var o=Math.cos(n),h=Math.sin(n);this.multiply(new r([o,h,-h,o,0,0])),this.scale(e,s)},r.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},r.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,h=this.m[1]*-e+this.m[3]*i;this.m[0]=s,this.m[1]=n,this.m[2]=o,this.m[3]=h},r.prototype.scale=function(t,i){this.m[0]*=t,this.m[1]*=t,this.m[2]*=i,this.m[3]*=i},r.prototype.setPosition=function(t,i){this.m[4]=t,this.m[5]=i},r.prototype.getScale=function(){return new o(this.m[0],this.m[3])},r.prototype.getPosition=function(){return new o(this.m[4],this.m[5])},r.prototype.skew=function(t,i){this.multiply(new r([1,Math.tan(i),Math.tan(t),1,0,0]))},r.prototype.determinant=function(){return 1/(this.m[0]*this.m[3]-this.m[1]*this.m[2])},r.prototype.getInverse=function(){var t=this.determinant();return new r([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])])},r.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])},r.prototype.setContextTransform=function(t){t.setTransform(this.m[0],this.m[1],this.m[2],this.m[3],this.m[4],this.m[5])},r.prototype.tranformContext=function(t){t.transform(this.m[0],this.m[1],this.m[2],this.m[3],this.m[4],this.m[5])},r.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()}}(),e.prototype.traverse=function(t){t(this);for(var i=this.children,e=0;e<i.length;e++)i[e].traverse(t)},e.prototype.add=function(t){(t.parent=this).children.push(t)},e.prototype.remove=function(t){var i=this.children.indexOf(t);-1!==i&&(this.children[i].parent=null,this.children.splice(i,1))},e.prototype.isInside=function(t){return!1},e.prototype.updateMatrix=function(t){this.matrixNeedsUpdate&&(this.matrix.compose(this.position.x,this.position.y,this.scale.x,this.scale.y,this.rotation),this.globalMatrix.copy(this.matrix),null!==this.parent&&this.globalMatrix.premultiply(this.parent.globalMatrix),this.inverseGlobalMatrix=this.globalMatrix.getInverse())},e.prototype.draw=function(t){},e.prototype.onUpdate=null,e.prototype.onPointerEnter=null,e.prototype.onPointerLeave=null,e.prototype.onPointerOver=null,e.prototype.onPointerDrag=null,e.prototype.onButtonPressed=null,e.prototype.onButtonDown=null,e.prototype.onButtonUp=null,h.DOWN=-1,h.UP=1,h.RESET=0,(h.prototype.constructor=h).prototype.update=function(t){this.justPressed=!1,this.justReleased=!1,t===h.DOWN?(!1===this.pressed&&(this.justPressed=!0),this.pressed=!0):t===h.UP?(this.pressed&&(this.justReleased=!0),this.pressed=!1):t===h.RESET&&(this.justReleased=!1,this.justPressed=!1)},h.prototype.set=function(t,i,e){this.justPressed=t,this.pressed=i,this.justReleased=e},h.prototype.reset=function(){this.justPressed=!1,this.pressed=!1,this.justReleased=!1},((m.prototype=m).constructor=m).LEFT=0,m.MIDDLE=1,m.RIGHT=2,m.BACK=3,m.FORWARD=4,m.setCanvas=function(t){(this.canvas=t).pointerInside=!1,t.addEventListener("mouseenter",function(){this.pointerInside=!0}),t.addEventListener("mouseleave",function(){this.pointerInside=!1})},m.insideCanvas=function(){return null!==this.canvas&&this.canvas.pointerInside},m.buttonPressed=function(t){return this.keys[t].pressed},m.buttonDoubleClicked=function(t){return this.doubleClicked[t]},m.buttonJustPressed=function(t){return this.keys[t].justPressed},m.buttonJustReleased=function(t){return this.keys[t].justReleased},m.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},m.updateKey=function(t,i){-1<t&&this._keys[t].update(i)},m.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)},m.create=function(){this.events.create()},m.dispose=function(){this.events.destroy()},s.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),h=0;h<e.length;h++){var r=(a=e[h]).inverseGlobalMatrix.transformPoint(o);if(a.isInside(r)){if(a.pointerInside||null===a.onPointerEnter||a.onPointerEnter(s,i),null!==a.onPointerOver&&a.onPointerOver(s,i),s.buttonJustPressed(m.LEFT)&&(null!==a.onButtonDown&&a.onButtonDown(s,i),a.draggable)){a.beingDragged=!0;break}s.buttonPressed(m.LEFT)&&null!==a.onButtonPressed&&a.onButtonPressed(s,i),s.buttonJustReleased(m.LEFT)&&null!==a.onButtonUp&&a.onButtonUp(s,i),a.pointerInside=!0}else a.pointerInside&&(null!==a.onPointerLeave&&a.onPointerLeave(s,i),a.pointerInside=!1);s.buttonJustReleased(m.LEFT)&&a.draggable&&(a.beingDragged=!1)}for(h=0;h<e.length;h++){var a;if((a=e[h]).beingDragged){var u=i.inverseMatrix.clone();u.multiply(a.inverseGlobalMatrix),u.setPosition(0,0);var l=u.transformPoint(s.delta);a.position.add(l),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});var c=this.context;c.setTransform(1,0,0,1,0,0),c.clearRect(0,0,this.canvas.width,this.canvas.height),i.matrix.setContextTransform(c);for(h=0;h<e.length;h++)c.save(),e[h].globalMatrix.tranformContext(c),e[h].draw(c),c.restore()},a.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(m.RIGHT)&&(this.position.x+=t.delta.x,this.position.y+=t.delta.y)},a.prototype.updateMatrix=function(){this.matrixNeedsUpdate&&(this.matrix.compose(this.position.x,this.position.y,this.scale,this.scale,this.rotation),this.inverseMatrix=this.matrix.getInverse())},Object.assign(u.prototype,{set:function(t,i){return this.min.copy(t),this.max.copy(i),this},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},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},clone:function(){var t=new u;return t.copy(this),t},copy:function(t){return this.min.copy(t.min),this.max.copy(t.max),this},isEmpty:function(){return this.max.x<this.min.x||this.max.y<this.min.y},getCenter:function(t){return this.isEmpty()?t.set(0,0):t.addVectors(this.min,this.max).multiplyScalar(.5)},getSize:function(t){return this.isEmpty()?t.set(0,0):t.subVectors(this.max,this.min)},expandByPoint:function(t){return this.min.min(t),this.max.max(t),this},expandByVector:function(t){return this.min.sub(t),this.max.add(t),this},expandByScalar:function(t){return this.min.addScalar(-t),this.max.addScalar(t),this},containsPoint:function(t){return!(t.x<this.min.x||t.x>this.max.x||t.y<this.min.y||t.y>this.max.y)},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},getParameter:function(t,i){return i.set((t.x-this.min.x)/(this.max.x-this.min.x),(t.y-this.min.y)/(this.max.y-this.min.y))},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)},clampPoint:function(t,i){return i.copy(t).clamp(this.min,this.max)},distanceToPoint:function(t){return(new o).copy(t).clamp(this.min,this.max).sub(t).length()},intersect:function(t){return this.min.max(t.min),this.max.min(t.max),this},union:function(t){return this.min.min(t.min),this.max.max(t.max),this},translate:function(t){return this.min.add(t),this.max.add(t),this},equals:function(t){return t.min.equals(this.min)&&t.max.equals(this.max)}}),(l.prototype=Object.create(e.prototype)).isInside=function(t){return t.length()<=this.radius},l.prototype.onPointerEnter=function(t,i){this.fillStyle="#CCCCCC"},l.prototype.onPointerLeave=function(t,i){this.fillStyle="#FFFFFF"},l.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()},(c.prototype=Object.create(e.prototype)).createResizeHelpers=function(t){var s=this;function n(){o.position.copy(s.box.min),r.position.copy(s.box.max),h.position.set(s.box.max.x,s.box.min.y),a.position.set(s.box.min.x,s.box.max.y)}var o=new l;o.radius=4,o.onPointerDrag=function(t,i,e){s.box.min.copy(o.position),n()},this.add(o);var h=new l;h.radius=4,h.onPointerDrag=function(t,i,e){s.box.max.x=h.position.x,s.box.min.y=h.position.y,n()},this.add(h);var r=new l;r.radius=4,r.onPointerDrag=function(t,i,e){s.box.max.copy(r.position),n()},this.add(r);var a=new l;a.radius=4,a.onPointerDrag=function(t,i,e){s.box.min.x=a.position.x,s.box.max.y=a.position.y,n()},this.add(a),n()},c.prototype.onPointerEnter=function(t,i){this.fillStyle="#CCCCCC"},c.prototype.onPointerLeave=function(t,i){this.fillStyle="#FFFFFF"},c.prototype.isInside=function(t){return this.box.containsPoint(t)},c.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(e.prototype)).draw=function(t){t.lineWidth=1,t.strokeStyle=this.strokeStyle,t.setLineDash([5,5]),t.beginPath(),t.moveTo(this.from.x,this.from.y),t.lineTo(this.to.x,this.to.y),t.stroke()},(p.prototype=Object.create(e.prototype)).draw=function(t){t.font=this.font,t.textAlign="center",t.fillStyle=this.color,t.fillText(this.text,0,0)},(y.prototype=Object.create(e.prototype)).draw=function(t){t.drawImage(this.image,0,0)},t.Box=c,t.Box2=u,t.Circle=l,t.EventManager=n,t.Image=y,t.Key=h,t.Line=d,t.Matrix=r,t.Object2D=e,t.Pointer=m,t.Renderer=s,t.Text=p,t.UUID=i,t.Vector2=o,t.Viewport=a,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.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})}); |
@@ -67,2 +67,7 @@ /** | ||
| /** | ||
| * Class representing a 2D vector. A 2D vector is an ordered pair of numbers (labeled x and y), which can be used to represent points in space, directions, etc. | ||
| * | ||
| * @class | ||
| */ | ||
| function Vector2(x, y) | ||
@@ -74,271 +79,269 @@ { | ||
| Object.assign(Vector2.prototype, | ||
| Vector2.prototype.set = function(x, y) | ||
| { | ||
| set: function(x, y) | ||
| { | ||
| this.x = x; | ||
| this.y = y; | ||
| }, | ||
| this.x = x; | ||
| this.y = y; | ||
| }; | ||
| setScalar: function(scalar) | ||
| { | ||
| this.x = scalar; | ||
| this.y = scalar; | ||
| }, | ||
| Vector2.prototype.setScalar = function(scalar) | ||
| { | ||
| this.x = scalar; | ||
| this.y = scalar; | ||
| }; | ||
| clone: function() | ||
| { | ||
| return new Vector2(this.x, this.y); | ||
| }, | ||
| Vector2.prototype.clone = function() | ||
| { | ||
| return new Vector2(this.x, this.y); | ||
| }; | ||
| copy: function(v) | ||
| { | ||
| this.x = v.x; | ||
| this.y = v.y; | ||
| }, | ||
| Vector2.prototype.copy = function(v) | ||
| { | ||
| this.x = v.x; | ||
| this.y = v.y; | ||
| }; | ||
| add: function(v, w) | ||
| { | ||
| this.x += v.x; | ||
| this.y += v.y; | ||
| }, | ||
| Vector2.prototype.add = function(v) | ||
| { | ||
| this.x += v.x; | ||
| this.y += v.y; | ||
| }; | ||
| addScalar: function(s) | ||
| { | ||
| this.x += s; | ||
| this.y += s; | ||
| }, | ||
| Vector2.prototype.addScalar = function(s) | ||
| { | ||
| this.x += s; | ||
| this.y += s; | ||
| }; | ||
| addVectors: function(a, b) | ||
| { | ||
| this.x = a.x + b.x; | ||
| this.y = a.y + b.y; | ||
| }, | ||
| Vector2.prototype.addVectors = function(a, b) | ||
| { | ||
| this.x = a.x + b.x; | ||
| this.y = a.y + b.y; | ||
| }; | ||
| addScaledVector: function(v, s) | ||
| { | ||
| this.x += v.x * s; | ||
| this.y += v.y * s; | ||
| }, | ||
| Vector2.prototype.addScaledVector = function(v, s) | ||
| { | ||
| this.x += v.x * s; | ||
| this.y += v.y * s; | ||
| }; | ||
| sub: function(v, w) | ||
| { | ||
| this.x -= v.x; | ||
| this.y -= v.y; | ||
| }, | ||
| Vector2.prototype.sub = function(v) | ||
| { | ||
| this.x -= v.x; | ||
| this.y -= v.y; | ||
| }; | ||
| subScalar: function(s) | ||
| { | ||
| this.x -= s; | ||
| this.y -= s; | ||
| }, | ||
| Vector2.prototype.subScalar = function(s) | ||
| { | ||
| this.x -= s; | ||
| this.y -= s; | ||
| }; | ||
| subVectors: function(a, b) | ||
| { | ||
| this.x = a.x - b.x; | ||
| this.y = a.y - b.y; | ||
| }, | ||
| Vector2.prototype.subVectors = function(a, b) | ||
| { | ||
| this.x = a.x - b.x; | ||
| this.y = a.y - b.y; | ||
| }; | ||
| multiply: function(v) | ||
| { | ||
| this.x *= v.x; | ||
| this.y *= v.y; | ||
| }, | ||
| Vector2.prototype.multiply = function(v) | ||
| { | ||
| this.x *= v.x; | ||
| this.y *= v.y; | ||
| }; | ||
| multiplyScalar: function(scalar) | ||
| { | ||
| this.x *= scalar; | ||
| this.y *= scalar; | ||
| }, | ||
| Vector2.prototype.multiplyScalar = function(scalar) | ||
| { | ||
| this.x *= scalar; | ||
| this.y *= scalar; | ||
| }; | ||
| divide: function(v) | ||
| { | ||
| this.x /= v.x; | ||
| this.y /= v.y; | ||
| }, | ||
| Vector2.prototype.divide = function(v) | ||
| { | ||
| this.x /= v.x; | ||
| this.y /= v.y; | ||
| }; | ||
| divideScalar: function(scalar) | ||
| { | ||
| return this.multiplyScalar(1 / scalar); | ||
| }, | ||
| Vector2.prototype.divideScalar = function(scalar) | ||
| { | ||
| return this.multiplyScalar(1 / scalar); | ||
| }; | ||
| min: function(v) | ||
| { | ||
| this.x = Math.min(this.x, v.x); | ||
| this.y = Math.min(this.y, v.y); | ||
| }, | ||
| Vector2.prototype.min = function(v) | ||
| { | ||
| this.x = Math.min(this.x, v.x); | ||
| this.y = Math.min(this.y, v.y); | ||
| }; | ||
| max: function(v) | ||
| { | ||
| this.x = Math.max(this.x, v.x); | ||
| this.y = Math.max(this.y, v.y); | ||
| }, | ||
| Vector2.prototype.max = function(v) | ||
| { | ||
| this.x = Math.max(this.x, v.x); | ||
| this.y = Math.max(this.y, v.y); | ||
| }; | ||
| clamp: function(min, max) | ||
| { | ||
| // assumes min < max, componentwise | ||
| this.x = Math.max(min.x, Math.min(max.x, this.x)); | ||
| this.y = Math.max(min.y, Math.min(max.y, this.y)); | ||
| }, | ||
| Vector2.prototype.clamp = function(min, max) | ||
| { | ||
| // assumes min < max, componentwise | ||
| this.x = Math.max(min.x, Math.min(max.x, this.x)); | ||
| this.y = Math.max(min.y, Math.min(max.y, this.y)); | ||
| }; | ||
| clampScalar: function(minVal, maxVal) | ||
| { | ||
| Vector2.prototype.clampScalar = function(minVal, maxVal) | ||
| { | ||
| this.x = Math.max(minVal, Math.min(maxVal, this.x)); | ||
| this.y = Math.max(minVal, Math.min(maxVal, this.y)); | ||
| }; | ||
| this.x = Math.max(minVal, Math.min(maxVal, this.x)); | ||
| this.y = Math.max(minVal, Math.min(maxVal, this.y)); | ||
| }, | ||
| Vector2.prototype.clampLength = function(min, max) | ||
| { | ||
| var length = this.length(); | ||
| clampLength: function(min, max) | ||
| { | ||
| var length = this.length(); | ||
| return this.divideScalar(length || 1).multiplyScalar(Math.max(min, Math.min(max, length))); | ||
| }, | ||
| return this.divideScalar(length || 1).multiplyScalar(Math.max(min, Math.min(max, length))); | ||
| }; | ||
| floor: function() | ||
| { | ||
| Vector2.prototype.floor = function() | ||
| { | ||
| this.x = Math.floor(this.x); | ||
| this.y = Math.floor(this.y); | ||
| }; | ||
| this.x = Math.floor(this.x); | ||
| this.y = Math.floor(this.y); | ||
| }, | ||
| Vector2.prototype.ceil = function() | ||
| { | ||
| this.x = Math.ceil(this.x); | ||
| this.y = Math.ceil(this.y); | ||
| }; | ||
| ceil: function() | ||
| { | ||
| Vector2.prototype.round = function() | ||
| { | ||
| this.x = Math.round(this.x); | ||
| this.y = Math.round(this.y); | ||
| }; | ||
| this.x = Math.ceil(this.x); | ||
| this.y = Math.ceil(this.y); | ||
| }, | ||
| Vector2.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); | ||
| }; | ||
| round: function() | ||
| { | ||
| Vector2.prototype.negate = function() | ||
| { | ||
| this.x = -this.x; | ||
| this.y = -this.y; | ||
| this.x = Math.round(this.x); | ||
| this.y = Math.round(this.y); | ||
| }, | ||
| return this; | ||
| }; | ||
| 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); | ||
| }, | ||
| Vector2.prototype.dot = function(v) | ||
| { | ||
| return this.x * v.x + this.y * v.y; | ||
| }; | ||
| negate: function() | ||
| { | ||
| this.x = -this.x; | ||
| this.y = -this.y; | ||
| Vector2.prototype.cross = function(v) | ||
| { | ||
| return this.x * v.y - this.y * v.x; | ||
| }; | ||
| return this; | ||
| }, | ||
| Vector2.prototype.lengthSq = function() | ||
| { | ||
| return this.x * this.x + this.y * this.y; | ||
| }; | ||
| dot: function(v) | ||
| { | ||
| return this.x * v.x + this.y * v.y; | ||
| }, | ||
| Vector2.prototype.length = function() | ||
| { | ||
| return Math.sqrt(this.x * this.x + this.y * this.y); | ||
| }; | ||
| cross: function(v) | ||
| { | ||
| return this.x * v.y - this.y * v.x; | ||
| }, | ||
| Vector2.prototype.manhattanLength = function() | ||
| { | ||
| return Math.abs(this.x) + Math.abs(this.y); | ||
| }; | ||
| lengthSq: function() | ||
| { | ||
| return this.x * this.x + this.y * this.y; | ||
| }, | ||
| Vector2.prototype.normalize = function() | ||
| { | ||
| return this.divideScalar(this.length() || 1); | ||
| }; | ||
| length: function() | ||
| { | ||
| return Math.sqrt(this.x * this.x + this.y * this.y); | ||
| }, | ||
| /** | ||
| * Computes the angle in radians with respect to the positive x-axis | ||
| */ | ||
| Vector2.prototype.angle = function() | ||
| { | ||
| var angle = Math.atan2(this.y, this.x); | ||
| manhattanLength: function() | ||
| if(angle < 0) | ||
| { | ||
| return Math.abs(this.x) + Math.abs(this.y); | ||
| }, | ||
| angle += 2 * Math.PI; | ||
| } | ||
| return angle; | ||
| }; | ||
| normalize: function() | ||
| { | ||
| return this.divideScalar(this.length() || 1); | ||
| }, | ||
| Vector2.prototype.distanceTo = function(v) | ||
| { | ||
| return Math.sqrt(this.distanceToSquared(v)); | ||
| }; | ||
| /** | ||
| * Computes the angle in radians with respect to the positive x-axis | ||
| */ | ||
| angle: function() | ||
| { | ||
| var angle = Math.atan2(this.y, this.x); | ||
| Vector2.prototype.distanceToSquared = function(v) | ||
| { | ||
| var dx = this.x - v.x; | ||
| var dy = this.y - v.y; | ||
| if(angle < 0) angle += 2 * Math.PI; | ||
| return dx * dx + dy * dy; | ||
| }; | ||
| return angle; | ||
| }, | ||
| Vector2.prototype.manhattanDistanceTo = function(v) | ||
| { | ||
| return Math.abs(this.x - v.x) + Math.abs(this.y - v.y); | ||
| }; | ||
| distanceTo: function(v) | ||
| { | ||
| return Math.sqrt(this.distanceToSquared(v)); | ||
| }, | ||
| Vector2.prototype.setLength = function(length) | ||
| { | ||
| return this.normalize().multiplyScalar(length); | ||
| }; | ||
| distanceToSquared: function(v) | ||
| { | ||
| var dx = this.x - v.x, | ||
| dy = this.y - v.y; | ||
| return dx * dx + dy * dy; | ||
| }, | ||
| Vector2.prototype.lerp = function(v, alpha) | ||
| { | ||
| this.x += (v.x - this.x) * alpha; | ||
| this.y += (v.y - this.y) * alpha; | ||
| }; | ||
| manhattanDistanceTo: function(v) | ||
| { | ||
| return Math.abs(this.x - v.x) + Math.abs(this.y - v.y); | ||
| }, | ||
| Vector2.prototype.lerpVectors = function(v1, v2, alpha) | ||
| { | ||
| return this.subVectors(v2, v1).multiplyScalar(alpha).add(v1); | ||
| }; | ||
| setLength: function(length) | ||
| { | ||
| return this.normalize().multiplyScalar(length); | ||
| }, | ||
| Vector2.prototype.equals = function(v) | ||
| { | ||
| return ((v.x === this.x) && (v.y === this.y)); | ||
| }; | ||
| lerp: function(v, alpha) | ||
| { | ||
| this.x += (v.x - this.x) * alpha; | ||
| this.y += (v.y - this.y) * alpha; | ||
| }, | ||
| Vector2.prototype.fromArray = function(array, offset) | ||
| { | ||
| if(offset === undefined) offset = 0; | ||
| lerpVectors: function(v1, v2, alpha) | ||
| { | ||
| return this.subVectors(v2, v1).multiplyScalar(alpha).add(v1); | ||
| }, | ||
| this.x = array[offset]; | ||
| this.y = array[offset + 1]; | ||
| }; | ||
| equals: function(v) | ||
| { | ||
| return ((v.x === this.x) && (v.y === this.y)); | ||
| }, | ||
| Vector2.prototype.toArray = function(array, offset) | ||
| { | ||
| if(array === undefined) array = []; | ||
| if(offset === undefined) offset = 0; | ||
| fromArray: function(array, offset) | ||
| { | ||
| if(offset === undefined) offset = 0; | ||
| array[offset] = this.x; | ||
| array[offset + 1] = this.y; | ||
| this.x = array[offset]; | ||
| this.y = array[offset + 1]; | ||
| }, | ||
| return array; | ||
| }; | ||
| toArray: function(array, offset) | ||
| { | ||
| if(array === undefined) array = []; | ||
| if(offset === undefined) offset = 0; | ||
| Vector2.prototype.rotateAround = function(center, angle) | ||
| { | ||
| var c = Math.cos(angle); | ||
| var s = Math.sin(angle); | ||
| array[offset] = this.x; | ||
| array[offset + 1] = this.y; | ||
| var x = this.x - center.x; | ||
| var y = this.y - center.y; | ||
| return array; | ||
| }, | ||
| this.x = x * c - y * s + center.x; | ||
| this.y = x * s + y * c + center.y; | ||
| }; | ||
| rotateAround: function(center, angle) | ||
| { | ||
| var c = Math.cos(angle), | ||
| s = Math.sin(angle); | ||
| var x = this.x - center.x; | ||
| var y = this.y - center.y; | ||
| this.x = x * c - y * s + center.x; | ||
| this.y = x * s + y * c + center.y; | ||
| } | ||
| }); | ||
| /** | ||
@@ -420,13 +423,24 @@ * 2D 3x2 transformation matrix, applied to the canvas elements. | ||
| /** | ||
| * Compose this transformation matrix with position scale and rotation. | ||
| * Compose this transformation matrix with position scale and rotation and origin point. | ||
| */ | ||
| Matrix.prototype.compose = function(px, py, sx, sy, a) | ||
| Matrix.prototype.compose = function(px, py, sx, sy, ox, oy, a) | ||
| { | ||
| this.m = [1, 0, 0, 1, px, py]; | ||
| var c = Math.cos(a); | ||
| var s = Math.sin(a); | ||
| this.multiply(new Matrix([c, s, -s, c, 0, 0])); | ||
| if(a !== 0) | ||
| { | ||
| var c = Math.cos(a); | ||
| var s = Math.sin(a); | ||
| this.multiply(new Matrix([c, s, -s, c, 0, 0])); | ||
| } | ||
| this.scale(sx, sy); | ||
| if(ox !== 0 || oy !== 0) | ||
| { | ||
| this.multiply(new Matrix([1, 0, 0, 1, -ox, -oy])); | ||
| } | ||
| if(sx !== 1 || sy !== 1) | ||
| { | ||
| this.scale(sx, sy); | ||
| } | ||
| }; | ||
@@ -623,2 +637,7 @@ | ||
| /** | ||
| * Origin of the object used as point of rotation. | ||
| */ | ||
| this.origin = new Vector2(0, 0); | ||
| /** | ||
| * Scale of the object. | ||
@@ -674,5 +693,25 @@ */ | ||
| */ | ||
| this.draggable = true; | ||
| this.draggable = false; | ||
| /** | ||
| * Flag to indicate wheter this objet ignores the viewport transformation. | ||
| */ | ||
| this.ignoreViewport = false; | ||
| /** | ||
| * Flag to indicate if the context of canvas should be saved before render. | ||
| */ | ||
| this.saveContextState = true; | ||
| /** | ||
| * Flag to indicate if the context of canvas should be restored after render. | ||
| */ | ||
| this.restoreContextState = true; | ||
| /** | ||
| * 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. | ||
@@ -748,3 +787,3 @@ * | ||
| { | ||
| this.matrix.compose(this.position.x, this.position.y, this.scale.x, this.scale.y, this.rotation); | ||
| 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); | ||
@@ -763,2 +802,12 @@ | ||
| /** | ||
| * Apply the transform to the rendering context. | ||
| * | ||
| * Can also be used for pre rendering logic. | ||
| */ | ||
| Object2D.prototype.transform = function(context, viewport) | ||
| { | ||
| this.globalMatrix.tranformContext(context); | ||
| }; | ||
| /** | ||
| * Draw the object into the canvas. | ||
@@ -770,3 +819,3 @@ * | ||
| */ | ||
| Object2D.prototype.draw = function(context){}; | ||
| Object2D.prototype.draw = function(context, viewport){}; | ||
@@ -806,3 +855,6 @@ /** | ||
| */ | ||
| Object2D.prototype.onPointerDrag = null; | ||
| Object2D.prototype.onPointerDrag = function(pointer, viewport, delta) | ||
| { | ||
| this.position.add(delta); | ||
| }; | ||
@@ -1327,2 +1379,7 @@ /** | ||
| this.pointer.setCanvas(canvas); | ||
| /** | ||
| * Indicates if the canvas should be automatically cleared on each new frame. | ||
| */ | ||
| this.autoClear = true; | ||
| } | ||
@@ -1376,3 +1433,3 @@ | ||
| var child = objects[i]; | ||
| var childPoint = child.inverseGlobalMatrix.transformPoint(viewportPoint); | ||
| var childPoint = child.inverseGlobalMatrix.transformPoint(child.ignoreViewport ? point : viewportPoint); | ||
@@ -1394,2 +1451,14 @@ // Check if the pointer pointer is inside | ||
| // Pointer pressed | ||
| if(pointer.buttonPressed(Pointer.LEFT) && child.onButtonPressed !== null) | ||
| { | ||
| child.onButtonPressed(pointer, viewport); | ||
| } | ||
| // Just released | ||
| if(pointer.buttonJustReleased(Pointer.LEFT) && child.onButtonUp !== null) | ||
| { | ||
| child.onButtonUp(pointer, viewport); | ||
| } | ||
| // Pointer just pressed | ||
@@ -1406,2 +1475,4 @@ if(pointer.buttonJustPressed(Pointer.LEFT)) | ||
| child.beingDragged = true; | ||
| // Only start a drag operation on the top element. | ||
| break; | ||
@@ -1411,14 +1482,2 @@ } | ||
| // Pointer pressed | ||
| if(pointer.buttonPressed(Pointer.LEFT) && child.onButtonPressed !== null) | ||
| { | ||
| child.onButtonPressed(pointer, viewport); | ||
| } | ||
| // Just released | ||
| if(pointer.buttonJustReleased(Pointer.LEFT) && child.onButtonUp !== null) | ||
| { | ||
| child.onButtonUp(pointer, viewport); | ||
| } | ||
| child.pointerInside = true; | ||
@@ -1453,13 +1512,15 @@ } | ||
| if(child.beingDragged) | ||
| { | ||
| var matrix = viewport.inverseMatrix.clone(); | ||
| matrix.multiply(child.inverseGlobalMatrix); | ||
| matrix.setPosition(0, 0); | ||
| { | ||
| var lastPosition = pointer.position.clone(); | ||
| lastPosition.sub(pointer.delta); | ||
| var delta = matrix.transformPoint(pointer.delta); | ||
| child.position.add(delta); | ||
| var positionWorld = viewport.inverseMatrix.transformPoint(pointer.position); | ||
| var lastWorld = viewport.inverseMatrix.transformPoint(lastPosition); | ||
| // Mouse delta in world coordinates | ||
| positionWorld.sub(lastWorld); | ||
| if(child.onPointerDrag !== null) | ||
| { | ||
| child.onPointerDrag(pointer, viewport, delta); | ||
| child.onPointerDrag(pointer, viewport, positionWorld); | ||
| } | ||
@@ -1483,19 +1544,32 @@ } | ||
| // Render the content | ||
| var context = this.context; | ||
| // Clear canvas | ||
| context.setTransform(1, 0, 0, 1, 0, 0); | ||
| context.clearRect(0, 0, this.canvas.width, this.canvas.height); | ||
| 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(context); | ||
| viewport.matrix.setContextTransform(this.context); | ||
| // Render into the canvas | ||
| for(var i = 0; i < objects.length; i++) | ||
| { | ||
| context.save(); | ||
| objects[i].globalMatrix.tranformContext(context); | ||
| objects[i].draw(context); | ||
| context.restore(); | ||
| { | ||
| if(objects[i].saveContextState) | ||
| { | ||
| this.context.save(); | ||
| } | ||
| if(objects[i].ignoreViewport) | ||
| { | ||
| this.context.setTransform(1, 0, 0, 1, 0, 0); | ||
| } | ||
| objects[i].transform(this.context, viewport); | ||
| objects[i].draw(this.context, viewport); | ||
| if(objects[i].restoreContextState) | ||
| { | ||
| this.context.restore(); | ||
| } | ||
| } | ||
@@ -1588,3 +1662,3 @@ }; | ||
| { | ||
| this.matrix.compose(this.position.x, this.position.y, this.scale, this.scale, this.rotation); | ||
| this.matrix.compose(this.position.x, this.position.y, this.scale, this.scale, 0, 0, this.rotation); | ||
| this.inverseMatrix = this.matrix.getInverse(); | ||
@@ -1596,5 +1670,29 @@ //this.matrixNeedsUpdate = false; | ||
| /** | ||
| * 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. | ||
| * | ||
| * Can be used for collision detection with points and other boxes. | ||
| * | ||
| * @class | ||
| */ | ||
@@ -1607,162 +1705,186 @@ function Box2(min, max) | ||
| Object.assign(Box2.prototype, | ||
| /** | ||
| * Set the box values. | ||
| */ | ||
| Box2.prototype.set = function(min, max) | ||
| { | ||
| set: function(min, max) | ||
| { | ||
| this.min.copy(min); | ||
| this.max.copy(max); | ||
| this.min.copy(min); | ||
| this.max.copy(max); | ||
| return this; | ||
| }, | ||
| return this; | ||
| }; | ||
| setFromPoints: function(points) | ||
| { | ||
| this.min = new Vector2(+Infinity, +Infinity); | ||
| this.max = new Vector2(-Infinity, -Infinity); | ||
| /** | ||
| * Set the box from a list of Vector2 points. | ||
| */ | ||
| Box2.prototype.setFromPoints = function(points) | ||
| { | ||
| this.min = new Vector2(+Infinity, +Infinity); | ||
| this.max = new Vector2(-Infinity, -Infinity); | ||
| for(var i = 0, il = points.length; i < il; i++) | ||
| { | ||
| this.expandByPoint(points[i]); | ||
| } | ||
| return this; | ||
| }, | ||
| setFromCenterAndSize: function(center, size) | ||
| for(var i = 0, il = points.length; i < il; i++) | ||
| { | ||
| var v1 = new Vector2(); | ||
| var halfSize = v1.copy(size).multiplyScalar(0.5); | ||
| this.min.copy(center).sub(halfSize); | ||
| this.max.copy(center).add(halfSize); | ||
| this.expandByPoint(points[i]); | ||
| } | ||
| return this; | ||
| }, | ||
| return this; | ||
| }; | ||
| clone: function() | ||
| { | ||
| var box = new Box2(); | ||
| box.copy(this); | ||
| return box; | ||
| }, | ||
| /** | ||
| * Set the box minimum and maximum from center point and size. | ||
| */ | ||
| Box2.prototype.setFromCenterAndSize = function(center, size) | ||
| { | ||
| var v1 = new Vector2(); | ||
| var halfSize = v1.copy(size).multiplyScalar(0.5); | ||
| this.min.copy(center).sub(halfSize); | ||
| this.max.copy(center).add(halfSize); | ||
| copy: function(box) | ||
| { | ||
| this.min.copy(box.min); | ||
| this.max.copy(box.max); | ||
| return this; | ||
| }; | ||
| return this; | ||
| }, | ||
| /** | ||
| * Clone the box into a new object. | ||
| */ | ||
| Box2.prototype.clone = function() | ||
| { | ||
| var box = new Box2(); | ||
| box.copy(this); | ||
| return box; | ||
| }; | ||
| /** | ||
| * Copy the box value from another box. | ||
| */ | ||
| Box2.prototype.copy = function(box) | ||
| { | ||
| this.min.copy(box.min); | ||
| this.max.copy(box.max); | ||
| }; | ||
| 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); | ||
| }, | ||
| 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); | ||
| }; | ||
| getCenter: function(target) | ||
| { | ||
| return this.isEmpty() ? target.set(0, 0) : target.addVectors(this.min, this.max).multiplyScalar(0.5); | ||
| }, | ||
| Box2.prototype.getCenter = function(target) | ||
| { | ||
| return this.isEmpty() ? target.set(0, 0) : target.addVectors(this.min, this.max).multiplyScalar(0.5); | ||
| }; | ||
| getSize: function(target) | ||
| { | ||
| return this.isEmpty() ? target.set(0, 0) : target.subVectors(this.max, this.min); | ||
| }, | ||
| Box2.prototype.getSize = function(target) | ||
| { | ||
| return this.isEmpty() ? target.set(0, 0) : target.subVectors(this.max, this.min); | ||
| }; | ||
| expandByPoint: function(point) | ||
| { | ||
| this.min.min(point); | ||
| this.max.max(point); | ||
| Box2.prototype.expandByPoint = function(point) | ||
| { | ||
| this.min.min(point); | ||
| this.max.max(point); | ||
| return this; | ||
| }, | ||
| return this; | ||
| }; | ||
| expandByVector: function(vector) | ||
| { | ||
| this.min.sub(vector); | ||
| this.max.add(vector); | ||
| Box2.prototype.expandByVector = function(vector) | ||
| { | ||
| this.min.sub(vector); | ||
| this.max.add(vector); | ||
| }; | ||
| return this; | ||
| }, | ||
| Box2.prototype.expandByScalar = function(scalar) | ||
| { | ||
| this.min.addScalar(-scalar); | ||
| this.max.addScalar(scalar); | ||
| }; | ||
| expandByScalar: function(scalar) | ||
| { | ||
| this.min.addScalar(-scalar); | ||
| this.max.addScalar(scalar); | ||
| Box2.prototype.containsPoint = function(point) | ||
| { | ||
| return point.x < this.min.x || point.x > this.max.x || point.y < this.min.y || point.y > this.max.y ? false : true; | ||
| }; | ||
| return this; | ||
| }, | ||
| Box2.prototype.containsBox = function(box) | ||
| { | ||
| return this.min.x <= box.min.x && box.max.x <= this.max.x && this.min.y <= box.min.y && box.max.y <= this.max.y; | ||
| }; | ||
| containsPoint: function(point) | ||
| { | ||
| return point.x < this.min.x || point.x > this.max.x || point.y < this.min.y || point.y > this.max.y ? false : true; | ||
| }, | ||
| /** | ||
| * Check if two boxes intersect each other, using 4 splitting planes to rule out intersections. | ||
| * | ||
| * @param {Box2} box | ||
| */ | ||
| Box2.prototype.intersectsBox = function(box) | ||
| { | ||
| return box.max.x < this.min.x || box.min.x > this.max.x || box.max.y < this.min.y || box.min.y > this.max.y ? false : true; | ||
| }; | ||
| containsBox: function(box) | ||
| { | ||
| return this.min.x <= box.min.x && box.max.x <= this.max.x && this.min.y <= box.min.y && box.max.y <= this.max.y; | ||
| }, | ||
| Box2.prototype.clampPoint = function(point, target) | ||
| { | ||
| return target.copy(point).clamp(this.min, this.max); | ||
| }; | ||
| getParameter: function(point, target) | ||
| { | ||
| // This can potentially have a divide by zero if the box | ||
| // has a size dimension of 0. | ||
| /** | ||
| * Calculate the distance to a point. | ||
| * | ||
| * @param {Vector2} point | ||
| */ | ||
| Box2.prototype.distanceToPoint = function(point) | ||
| { | ||
| var v = new Vector2(); | ||
| var clampedPoint = v.copy(point).clamp(this.min, this.max); | ||
| return clampedPoint.sub(point).length(); | ||
| }; | ||
| return target.set( | ||
| (point.x - this.min.x) / (this.max.x - this.min.x), | ||
| (point.y - this.min.y) / (this.max.y - this.min.y) | ||
| ); | ||
| }, | ||
| /** | ||
| * Make a intersection between this box and another box. | ||
| * | ||
| * Store the result in this object. | ||
| * | ||
| * @param {Box2} box | ||
| */ | ||
| Box2.prototype.intersect = function(box) | ||
| { | ||
| this.min.max(box.min); | ||
| this.max.min(box.max); | ||
| }; | ||
| intersectsBox: function(box) | ||
| { | ||
| // using 4 splitting planes to rule out intersections | ||
| return box.max.x < this.min.x || box.min.x > this.max.x || box.max.y < this.min.y || box.min.y > this.max.y ? false : true; | ||
| }, | ||
| /** | ||
| * Make a union between this box and another box. | ||
| * | ||
| * Store the result in this object. | ||
| * | ||
| * @param {Box2} box | ||
| */ | ||
| Box2.prototype.union = function(box) | ||
| { | ||
| this.min.min(box.min); | ||
| this.max.max(box.max); | ||
| }; | ||
| clampPoint: function(point, target) | ||
| { | ||
| return target.copy(point).clamp(this.min, this.max); | ||
| }, | ||
| /** | ||
| * Translate the box by a offset value, adds the offset to booth min and max. | ||
| * | ||
| * @param {Vector2} offset | ||
| */ | ||
| Box2.prototype.translate = function(offset) | ||
| { | ||
| this.min.add(offset); | ||
| this.max.add(offset); | ||
| }; | ||
| distanceToPoint: function(point) | ||
| { | ||
| var v = new Vector2(); | ||
| var clampedPoint = v.copy(point).clamp(this.min, this.max); | ||
| return clampedPoint.sub(point).length(); | ||
| }, | ||
| /** | ||
| * Checks if two boxes are equal. | ||
| * | ||
| * @param {Box2} box | ||
| * @return {boolean} True if the two boxes are equal. | ||
| */ | ||
| Box2.prototype.equals = function(box) | ||
| { | ||
| return box.min.equals(this.min) && box.max.equals(this.max); | ||
| }; | ||
| intersect: function(box) | ||
| { | ||
| this.min.max(box.min); | ||
| this.max.min(box.max); | ||
| return this; | ||
| }, | ||
| union: function(box) | ||
| { | ||
| this.min.min(box.min); | ||
| this.max.max(box.max); | ||
| return this; | ||
| }, | ||
| translate: function(offset) | ||
| { | ||
| this.min.add(offset); | ||
| this.max.add(offset); | ||
| return this; | ||
| }, | ||
| equals: function(box) | ||
| { | ||
| return box.min.equals(this.min) && box.max.equals(this.max); | ||
| } | ||
| }); | ||
| /** | ||
| * Circle object draw a circular object. | ||
| * Circle object draw a circular object, into the canvas. | ||
| * | ||
| * @class | ||
| */ | ||
@@ -1822,42 +1944,41 @@ function Circle() | ||
| function Helpers(){} | ||
| /** | ||
| * Box object draw a box. | ||
| * Create a rotation tool | ||
| */ | ||
| function Box(resizable) | ||
| Helpers.rotateTool = function(object) | ||
| { | ||
| Object2D.call(this); | ||
| var tool = new Circle(); | ||
| tool.radius = 4; | ||
| tool.layer = object.layer + 1; | ||
| tool.onPointerDrag = function(pointer, viewport, delta) | ||
| { | ||
| object.rotation += delta.x * 1e-3; | ||
| }; | ||
| object.add(tool); | ||
| }; | ||
| /** | ||
| * Box object containing the size of the object. | ||
| */ | ||
| this.box = new Box2(new Vector2(-50, -35), new Vector2(50, 35)); | ||
| /** | ||
| * Color of the box border line. | ||
| */ | ||
| this.strokeStyle = "#000000"; | ||
| /** | ||
| * Background color of the box. | ||
| */ | ||
| this.fillStyle = "#FFFFFF"; | ||
| if(resizable) | ||
| /** | ||
| * Create a box resize helper and attach it to an object to change the size of the object box. | ||
| * | ||
| * Each helper is positioned on one corner of the box, and the value of the corner is copied to the boxes as they are dragged. | ||
| * | ||
| * This method required to object to have a box property. | ||
| */ | ||
| Helpers.boxResizeTool = function(object) | ||
| { | ||
| if(object.box === undefined) | ||
| { | ||
| this.createResizeHelpers(); | ||
| console.warn("trenette.js: Helpers.boxResizeTool(), object box property missing."); | ||
| return; | ||
| } | ||
| } | ||
| Box.prototype = Object.create(Object2D.prototype); | ||
| Box.prototype.createResizeHelpers = function(first_argument) | ||
| { | ||
| var self = this; | ||
| function updateHelpers() | ||
| { | ||
| topRight.position.copy(self.box.min); | ||
| bottomLeft.position.copy(self.box.max); | ||
| topLeft.position.set(self.box.max.x, self.box.min.y); | ||
| bottomRight.position.set(self.box.min.x, self.box.max.y); | ||
| topRight.position.copy(object.box.min); | ||
| bottomLeft.position.copy(object.box.max); | ||
| topLeft.position.set(object.box.max.x, object.box.min.y); | ||
| bottomRight.position.set(object.box.min.x, object.box.max.y); | ||
| } | ||
@@ -1867,37 +1988,53 @@ | ||
| topRight.radius = 4; | ||
| topRight.layer = object.layer + 1; | ||
| topRight.draggable = true; | ||
| topRight.onPointerDrag = function(pointer, viewport, delta) | ||
| { | ||
| self.box.min.copy(topRight.position); | ||
| Object2D.prototype.onPointerDrag.call(this, pointer, viewport, delta); | ||
| object.box.min.copy(topRight.position); | ||
| updateHelpers(); | ||
| }; | ||
| this.add(topRight); | ||
| object.add(topRight); | ||
| var topLeft = new Circle(); | ||
| topLeft.radius = 4; | ||
| topLeft.layer = object.layer + 1; | ||
| topLeft.draggable = true; | ||
| topLeft.onPointerDrag = function(pointer, viewport, delta) | ||
| { | ||
| self.box.max.x = topLeft.position.x; | ||
| self.box.min.y = topLeft.position.y; | ||
| Object2D.prototype.onPointerDrag.call(this, pointer, viewport, delta); | ||
| object.box.max.x = topLeft.position.x; | ||
| object.box.min.y = topLeft.position.y; | ||
| updateHelpers(); | ||
| }; | ||
| this.add(topLeft); | ||
| object.add(topLeft); | ||
| var bottomLeft = new Circle(); | ||
| bottomLeft.radius = 4; | ||
| bottomLeft.layer = object.layer + 1; | ||
| bottomLeft.draggable = true; | ||
| bottomLeft.onPointerDrag = function(pointer, viewport, delta) | ||
| { | ||
| self.box.max.copy(bottomLeft.position); | ||
| Object2D.prototype.onPointerDrag.call(this, pointer, viewport, delta); | ||
| object.box.max.copy(bottomLeft.position); | ||
| updateHelpers(); | ||
| }; | ||
| this.add(bottomLeft); | ||
| object.add(bottomLeft); | ||
| var bottomRight = new Circle(); | ||
| bottomRight.radius = 4; | ||
| bottomRight.layer = object.layer + 1; | ||
| bottomRight.draggable = true; | ||
| bottomRight.onPointerDrag = function(pointer, viewport, delta) | ||
| { | ||
| self.box.min.x = bottomRight.position.x; | ||
| self.box.max.y = bottomRight.position.y; | ||
| Object2D.prototype.onPointerDrag.call(this, pointer, viewport, delta); | ||
| object.box.min.x = bottomRight.position.x; | ||
| object.box.max.y = bottomRight.position.y; | ||
| updateHelpers(); | ||
| }; | ||
| this.add(bottomRight); | ||
| object.add(bottomRight); | ||
@@ -1907,2 +2044,29 @@ updateHelpers(); | ||
| /** | ||
| * Box object draw a box. | ||
| * | ||
| * @class | ||
| */ | ||
| function Box() | ||
| { | ||
| Object2D.call(this); | ||
| /** | ||
| * Box object containing the size of the object. | ||
| */ | ||
| this.box = new Box2(new Vector2(-50, -35), new Vector2(50, 35)); | ||
| /** | ||
| * Color of the box border line. | ||
| */ | ||
| this.strokeStyle = "#000000"; | ||
| /** | ||
| * Background color of the box. | ||
| */ | ||
| this.fillStyle = "#FFFFFF"; | ||
| } | ||
| Box.prototype = Object.create(Object2D.prototype); | ||
| Box.prototype.onPointerEnter = function(pointer, viewport) | ||
@@ -1938,2 +2102,4 @@ { | ||
| * Line object draw a line from one point to another. | ||
| * | ||
| * @class | ||
| */ | ||
@@ -1962,2 +2128,12 @@ function Line() | ||
| this.strokeStyle = "#000000"; | ||
| /** | ||
| * Dash line pattern to be used, is empty draws a solid line. | ||
| */ | ||
| this.dashPattern = [5, 5]; | ||
| /** | ||
| * Line width. | ||
| */ | ||
| this.lineWidth = 1; | ||
| } | ||
@@ -1969,5 +2145,5 @@ | ||
| { | ||
| context.lineWidth = 1; | ||
| context.lineWidth = this.lineWidth; | ||
| context.strokeStyle = this.strokeStyle; | ||
| context.setLineDash([5, 5]); | ||
| context.setLineDash(this.dashPattern); | ||
@@ -1980,2 +2156,7 @@ context.beginPath(); | ||
| /** | ||
| * Text element, used to draw text into the canvas. | ||
| * | ||
| * @class | ||
| */ | ||
| function Text() | ||
@@ -1999,2 +2180,7 @@ { | ||
| this.color = "#000000"; | ||
| /** | ||
| * Text align property. | ||
| */ | ||
| this.textAlign = "center"; | ||
| } | ||
@@ -2007,3 +2193,3 @@ | ||
| context.font = this.font; | ||
| context.textAlign = "center"; | ||
| context.textAlign = this.textAlign; | ||
| context.fillStyle = this.color; | ||
@@ -2014,8 +2200,26 @@ | ||
| /** | ||
| * Image object is used to draw an image from URL. | ||
| * | ||
| * @class | ||
| * @param {string} [src] Source URL of the image. | ||
| */ | ||
| function Image(src) | ||
| { | ||
| Object2D.call(this); | ||
| /** | ||
| * Box object containing the size of the object. | ||
| */ | ||
| this.box = new Box2(); | ||
| /** | ||
| * Image source DOM element. | ||
| */ | ||
| this.image = document.createElement("img"); | ||
| this.image.src = src; | ||
| if(src !== undefined) | ||
| { | ||
| this.setImage(src); | ||
| } | ||
| } | ||
@@ -2025,7 +2229,146 @@ | ||
| /** | ||
| * Set the image of the object. | ||
| * | ||
| * Automatically sets the box size to match the image. | ||
| * | ||
| * @param {string} src Source URL of the image. | ||
| */ | ||
| Image.prototype.setImage = function(src) | ||
| { | ||
| var self = this; | ||
| this.image.onload = function() | ||
| { | ||
| self.box.min.set(0, 0); | ||
| self.box.max.set(this.naturalWidth, this.naturalHeight); | ||
| }; | ||
| this.image.src = src; | ||
| }; | ||
| Image.prototype.isInside = function(point) | ||
| { | ||
| return this.box.containsPoint(point); | ||
| }; | ||
| Image.prototype.draw = function(context) | ||
| { | ||
| context.drawImage(this.image, 0, 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); | ||
| }; | ||
| export { Box, Box2, Circle, EventManager, Image, Key, Line, Matrix, Object2D, Pointer, Renderer, Text, UUID, Vector2, Viewport }; | ||
| /** | ||
| * A DOM object transformed using CSS3D to ver included in the graph. | ||
| * | ||
| * DOM objects always stay on top of everything else, mouse events are not supported for these. | ||
| * | ||
| * Use the normal DOM events for interaction. | ||
| * | ||
| * @class | ||
| * @param parent Parent DOM element that contains the drawing canvas. | ||
| * @param type Type of the DOM element (e.g. "div", "p", ...) | ||
| */ | ||
| function DOM(parent, type) | ||
| { | ||
| Object2D.call(this); | ||
| /** | ||
| * DOM element contained by this object. | ||
| */ | ||
| 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"; | ||
| parent.appendChild(this.element); | ||
| /** | ||
| * Size of the DOM element (in world coordinates). | ||
| */ | ||
| this.size = new Vector2(100, 100); | ||
| } | ||
| DOM.prototype = Object.create(Object2D.prototype); | ||
| DOM.prototype.draw = function(context, viewport) | ||
| { | ||
| // CSS trasnformation matrix | ||
| var projection = viewport.matrix.clone(); | ||
| projection.multiply(this.globalMatrix); | ||
| this.element.style.transform = projection.cssTransform(); | ||
| // Size of the element | ||
| this.element.style.width = this.size.x + "px"; | ||
| this.element.style.height = this.size.y + "px"; | ||
| }; | ||
| /** | ||
| * Pattern object draw a image repeated as a pattern. | ||
| * | ||
| * Its similar to the Image class but the image can be repeat infinitly. | ||
| * | ||
| * @class | ||
| */ | ||
| function Pattern(src) | ||
| { | ||
| Object2D.call(this); | ||
| /** | ||
| * Box object containing the size of the object. | ||
| */ | ||
| this.box = new Box2(); | ||
| /** | ||
| * Image source DOM element. | ||
| */ | ||
| this.image = document.createElement("img"); | ||
| /** | ||
| * A DOMString indicating how to repeat the pattern image. | ||
| */ | ||
| this.repetition = "repeat"; | ||
| if(src !== undefined) | ||
| { | ||
| this.setImage(src); | ||
| } | ||
| } | ||
| Pattern.prototype = Object.create(Object2D.prototype); | ||
| /** | ||
| * Set the image of the object. | ||
| * | ||
| * Automatically sets the box size to match the image. | ||
| */ | ||
| Pattern.prototype.setImage = function(src) | ||
| { | ||
| var self = this; | ||
| this.image.onload = function() | ||
| { | ||
| self.box.min.set(0, 0); | ||
| self.box.max.set(this.naturalWidth, this.naturalHeight); | ||
| }; | ||
| this.image.src = src; | ||
| }; | ||
| Pattern.prototype.isInside = function(point) | ||
| { | ||
| return this.box.containsPoint(point); | ||
| }; | ||
| Pattern.prototype.draw = function(context, viewport) | ||
| { | ||
| var width = this.box.max.x - this.box.min.x; | ||
| var height = this.box.max.y - this.box.min.y; | ||
| var pattern = context.createPattern(this.image, this.repetition); | ||
| //pattern.setTransform(); | ||
| context.fillStyle = pattern; | ||
| context.fillRect(this.box.min.x, this.box.min.y, width, height); | ||
| }; | ||
| export { Box, Box2, Circle, DOM, EventManager, Helpers, Image, Key, Line, Matrix, Object2D, Pattern, Pointer, Renderer, Stencil, Text, UUID, Vector2, Viewport }; |
| { | ||
| "name": "trenette.js", | ||
| "version": "0.1.1", | ||
| "version": "0.1.2", | ||
| "description": "trenette.js is a web library for building interactive diagrams and graphs.", | ||
@@ -12,3 +12,3 @@ "main": "build/trenette.min.js", | ||
| "build": "rollup -c && npm run uglify", | ||
| "docs": "jsdoc -d docs source", | ||
| "docs": "jsdoc -d docs -r source", | ||
| "uglify": "uglifyjs --compress --mangle --output build/trenette.min.js -- build/trenette.js", | ||
@@ -15,0 +15,0 @@ "pub": "npm run build && npm run docs && npm publish --access public ." |
@@ -6,1 +6,9 @@ # trenette.js | ||
| ## Basic example | ||
| ## Rendering pipeline | ||
| - | ||
@@ -8,3 +8,3 @@ import strip from "rollup-plugin-strip"; | ||
| { | ||
| functions: ["console.*", "assert.*", "debug", "alert"], | ||
| functions: ["assert.*", "debug", "alert"], | ||
| debugger: false, | ||
@@ -11,0 +11,0 @@ sourceMap: false |
@@ -9,2 +9,4 @@ "use strict"; | ||
| * Can be used for collision detection with points and other boxes. | ||
| * | ||
| * @class | ||
| */ | ||
@@ -17,160 +19,182 @@ function Box2(min, max) | ||
| Object.assign(Box2.prototype, | ||
| /** | ||
| * Set the box values. | ||
| */ | ||
| Box2.prototype.set = function(min, max) | ||
| { | ||
| set: function(min, max) | ||
| { | ||
| this.min.copy(min); | ||
| this.max.copy(max); | ||
| this.min.copy(min); | ||
| this.max.copy(max); | ||
| return this; | ||
| }, | ||
| return this; | ||
| }; | ||
| setFromPoints: function(points) | ||
| { | ||
| this.min = new Vector2(+Infinity, +Infinity); | ||
| this.max = new Vector2(-Infinity, -Infinity); | ||
| /** | ||
| * Set the box from a list of Vector2 points. | ||
| */ | ||
| Box2.prototype.setFromPoints = function(points) | ||
| { | ||
| this.min = new Vector2(+Infinity, +Infinity); | ||
| this.max = new Vector2(-Infinity, -Infinity); | ||
| for(var i = 0, il = points.length; i < il; i++) | ||
| { | ||
| this.expandByPoint(points[i]); | ||
| } | ||
| return this; | ||
| }, | ||
| setFromCenterAndSize: function(center, size) | ||
| for(var i = 0, il = points.length; i < il; i++) | ||
| { | ||
| var v1 = new Vector2(); | ||
| var halfSize = v1.copy(size).multiplyScalar(0.5); | ||
| this.min.copy(center).sub(halfSize); | ||
| this.max.copy(center).add(halfSize); | ||
| this.expandByPoint(points[i]); | ||
| } | ||
| return this; | ||
| }, | ||
| return this; | ||
| }; | ||
| clone: function() | ||
| { | ||
| var box = new Box2(); | ||
| box.copy(this); | ||
| return box; | ||
| }, | ||
| /** | ||
| * Set the box minimum and maximum from center point and size. | ||
| */ | ||
| Box2.prototype.setFromCenterAndSize = function(center, size) | ||
| { | ||
| var v1 = new Vector2(); | ||
| var halfSize = v1.copy(size).multiplyScalar(0.5); | ||
| this.min.copy(center).sub(halfSize); | ||
| this.max.copy(center).add(halfSize); | ||
| copy: function(box) | ||
| { | ||
| this.min.copy(box.min); | ||
| this.max.copy(box.max); | ||
| return this; | ||
| }; | ||
| return this; | ||
| }, | ||
| /** | ||
| * Clone the box into a new object. | ||
| */ | ||
| Box2.prototype.clone = function() | ||
| { | ||
| var box = new Box2(); | ||
| box.copy(this); | ||
| return box; | ||
| }; | ||
| /** | ||
| * Copy the box value from another box. | ||
| */ | ||
| Box2.prototype.copy = function(box) | ||
| { | ||
| this.min.copy(box.min); | ||
| this.max.copy(box.max); | ||
| }; | ||
| 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); | ||
| }, | ||
| 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); | ||
| }; | ||
| getCenter: function(target) | ||
| { | ||
| return this.isEmpty() ? target.set(0, 0) : target.addVectors(this.min, this.max).multiplyScalar(0.5); | ||
| }, | ||
| Box2.prototype.getCenter = function(target) | ||
| { | ||
| return this.isEmpty() ? target.set(0, 0) : target.addVectors(this.min, this.max).multiplyScalar(0.5); | ||
| }; | ||
| getSize: function(target) | ||
| { | ||
| return this.isEmpty() ? target.set(0, 0) : target.subVectors(this.max, this.min); | ||
| }, | ||
| Box2.prototype.getSize = function(target) | ||
| { | ||
| return this.isEmpty() ? target.set(0, 0) : target.subVectors(this.max, this.min); | ||
| }; | ||
| expandByPoint: function(point) | ||
| { | ||
| this.min.min(point); | ||
| this.max.max(point); | ||
| Box2.prototype.expandByPoint = function(point) | ||
| { | ||
| this.min.min(point); | ||
| this.max.max(point); | ||
| return this; | ||
| }, | ||
| return this; | ||
| }; | ||
| expandByVector: function(vector) | ||
| { | ||
| this.min.sub(vector); | ||
| this.max.add(vector); | ||
| Box2.prototype.expandByVector = function(vector) | ||
| { | ||
| this.min.sub(vector); | ||
| this.max.add(vector); | ||
| }; | ||
| return this; | ||
| }, | ||
| Box2.prototype.expandByScalar = function(scalar) | ||
| { | ||
| this.min.addScalar(-scalar); | ||
| this.max.addScalar(scalar); | ||
| }; | ||
| expandByScalar: function(scalar) | ||
| { | ||
| this.min.addScalar(-scalar); | ||
| this.max.addScalar(scalar); | ||
| Box2.prototype.containsPoint = function(point) | ||
| { | ||
| return point.x < this.min.x || point.x > this.max.x || point.y < this.min.y || point.y > this.max.y ? false : true; | ||
| }; | ||
| return this; | ||
| }, | ||
| Box2.prototype.containsBox = function(box) | ||
| { | ||
| return this.min.x <= box.min.x && box.max.x <= this.max.x && this.min.y <= box.min.y && box.max.y <= this.max.y; | ||
| }; | ||
| containsPoint: function(point) | ||
| { | ||
| return point.x < this.min.x || point.x > this.max.x || point.y < this.min.y || point.y > this.max.y ? false : true; | ||
| }, | ||
| /** | ||
| * Check if two boxes intersect each other, using 4 splitting planes to rule out intersections. | ||
| * | ||
| * @param {Box2} box | ||
| */ | ||
| Box2.prototype.intersectsBox = function(box) | ||
| { | ||
| return box.max.x < this.min.x || box.min.x > this.max.x || box.max.y < this.min.y || box.min.y > this.max.y ? false : true; | ||
| }; | ||
| containsBox: function(box) | ||
| { | ||
| return this.min.x <= box.min.x && box.max.x <= this.max.x && this.min.y <= box.min.y && box.max.y <= this.max.y; | ||
| }, | ||
| Box2.prototype.clampPoint = function(point, target) | ||
| { | ||
| return target.copy(point).clamp(this.min, this.max); | ||
| }; | ||
| getParameter: function(point, target) | ||
| { | ||
| // This can potentially have a divide by zero if the box | ||
| // has a size dimension of 0. | ||
| /** | ||
| * Calculate the distance to a point. | ||
| * | ||
| * @param {Vector2} point | ||
| */ | ||
| Box2.prototype.distanceToPoint = function(point) | ||
| { | ||
| var v = new Vector2(); | ||
| var clampedPoint = v.copy(point).clamp(this.min, this.max); | ||
| return clampedPoint.sub(point).length(); | ||
| }; | ||
| return target.set( | ||
| (point.x - this.min.x) / (this.max.x - this.min.x), | ||
| (point.y - this.min.y) / (this.max.y - this.min.y) | ||
| ); | ||
| }, | ||
| /** | ||
| * Make a intersection between this box and another box. | ||
| * | ||
| * Store the result in this object. | ||
| * | ||
| * @param {Box2} box | ||
| */ | ||
| Box2.prototype.intersect = function(box) | ||
| { | ||
| this.min.max(box.min); | ||
| this.max.min(box.max); | ||
| }; | ||
| intersectsBox: function(box) | ||
| { | ||
| // using 4 splitting planes to rule out intersections | ||
| return box.max.x < this.min.x || box.min.x > this.max.x || box.max.y < this.min.y || box.min.y > this.max.y ? false : true; | ||
| }, | ||
| /** | ||
| * Make a union between this box and another box. | ||
| * | ||
| * Store the result in this object. | ||
| * | ||
| * @param {Box2} box | ||
| */ | ||
| Box2.prototype.union = function(box) | ||
| { | ||
| this.min.min(box.min); | ||
| this.max.max(box.max); | ||
| }; | ||
| clampPoint: function(point, target) | ||
| { | ||
| return target.copy(point).clamp(this.min, this.max); | ||
| }, | ||
| /** | ||
| * Translate the box by a offset value, adds the offset to booth min and max. | ||
| * | ||
| * @param {Vector2} offset | ||
| */ | ||
| Box2.prototype.translate = function(offset) | ||
| { | ||
| this.min.add(offset); | ||
| this.max.add(offset); | ||
| }; | ||
| distanceToPoint: function(point) | ||
| { | ||
| var v = new Vector2(); | ||
| var clampedPoint = v.copy(point).clamp(this.min, this.max); | ||
| return clampedPoint.sub(point).length(); | ||
| }, | ||
| /** | ||
| * Checks if two boxes are equal. | ||
| * | ||
| * @param {Box2} box | ||
| * @return {boolean} True if the two boxes are equal. | ||
| */ | ||
| Box2.prototype.equals = function(box) | ||
| { | ||
| return box.min.equals(this.min) && box.max.equals(this.max); | ||
| }; | ||
| intersect: function(box) | ||
| { | ||
| this.min.max(box.min); | ||
| this.max.min(box.max); | ||
| return this; | ||
| }, | ||
| union: function(box) | ||
| { | ||
| this.min.min(box.min); | ||
| this.max.max(box.max); | ||
| return this; | ||
| }, | ||
| translate: function(offset) | ||
| { | ||
| this.min.add(offset); | ||
| this.max.add(offset); | ||
| return this; | ||
| }, | ||
| equals: function(box) | ||
| { | ||
| return box.min.equals(this.min) && box.max.equals(this.max); | ||
| } | ||
| }); | ||
| export {Box2}; |
@@ -81,13 +81,24 @@ "use strict"; | ||
| /** | ||
| * Compose this transformation matrix with position scale and rotation. | ||
| * Compose this transformation matrix with position scale and rotation and origin point. | ||
| */ | ||
| Matrix.prototype.compose = function(px, py, sx, sy, a) | ||
| Matrix.prototype.compose = function(px, py, sx, sy, ox, oy, a) | ||
| { | ||
| this.m = [1, 0, 0, 1, px, py]; | ||
| var c = Math.cos(a); | ||
| var s = Math.sin(a); | ||
| this.multiply(new Matrix([c, s, -s, c, 0, 0])); | ||
| if(a !== 0) | ||
| { | ||
| var c = Math.cos(a); | ||
| var s = Math.sin(a); | ||
| this.multiply(new Matrix([c, s, -s, c, 0, 0])); | ||
| } | ||
| this.scale(sx, sy); | ||
| if(ox !== 0 || oy !== 0) | ||
| { | ||
| this.multiply(new Matrix([1, 0, 0, 1, -ox, -oy])); | ||
| } | ||
| if(sx !== 1 || sy !== 1) | ||
| { | ||
| this.scale(sx, sy); | ||
| } | ||
| }; | ||
@@ -219,3 +230,2 @@ | ||
| export {Matrix}; |
| "use strict"; | ||
| /** | ||
| * Class representing a 2D vector. A 2D vector is an ordered pair of numbers (labeled x and y), which can be used to represent points in space, directions, etc. | ||
| * | ||
| * @class | ||
| */ | ||
| function Vector2(x, y) | ||
@@ -9,271 +15,269 @@ { | ||
| Object.assign(Vector2.prototype, | ||
| Vector2.prototype.set = function(x, y) | ||
| { | ||
| set: function(x, y) | ||
| { | ||
| this.x = x; | ||
| this.y = y; | ||
| }, | ||
| this.x = x; | ||
| this.y = y; | ||
| }; | ||
| setScalar: function(scalar) | ||
| { | ||
| this.x = scalar; | ||
| this.y = scalar; | ||
| }, | ||
| Vector2.prototype.setScalar = function(scalar) | ||
| { | ||
| this.x = scalar; | ||
| this.y = scalar; | ||
| }; | ||
| clone: function() | ||
| { | ||
| return new Vector2(this.x, this.y); | ||
| }, | ||
| Vector2.prototype.clone = function() | ||
| { | ||
| return new Vector2(this.x, this.y); | ||
| }; | ||
| copy: function(v) | ||
| { | ||
| this.x = v.x; | ||
| this.y = v.y; | ||
| }, | ||
| Vector2.prototype.copy = function(v) | ||
| { | ||
| this.x = v.x; | ||
| this.y = v.y; | ||
| }; | ||
| add: function(v, w) | ||
| { | ||
| this.x += v.x; | ||
| this.y += v.y; | ||
| }, | ||
| Vector2.prototype.add = function(v) | ||
| { | ||
| this.x += v.x; | ||
| this.y += v.y; | ||
| }; | ||
| addScalar: function(s) | ||
| { | ||
| this.x += s; | ||
| this.y += s; | ||
| }, | ||
| Vector2.prototype.addScalar = function(s) | ||
| { | ||
| this.x += s; | ||
| this.y += s; | ||
| }; | ||
| addVectors: function(a, b) | ||
| { | ||
| this.x = a.x + b.x; | ||
| this.y = a.y + b.y; | ||
| }, | ||
| Vector2.prototype.addVectors = function(a, b) | ||
| { | ||
| this.x = a.x + b.x; | ||
| this.y = a.y + b.y; | ||
| }; | ||
| addScaledVector: function(v, s) | ||
| { | ||
| this.x += v.x * s; | ||
| this.y += v.y * s; | ||
| }, | ||
| Vector2.prototype.addScaledVector = function(v, s) | ||
| { | ||
| this.x += v.x * s; | ||
| this.y += v.y * s; | ||
| }; | ||
| sub: function(v, w) | ||
| { | ||
| this.x -= v.x; | ||
| this.y -= v.y; | ||
| }, | ||
| Vector2.prototype.sub = function(v) | ||
| { | ||
| this.x -= v.x; | ||
| this.y -= v.y; | ||
| }; | ||
| subScalar: function(s) | ||
| { | ||
| this.x -= s; | ||
| this.y -= s; | ||
| }, | ||
| Vector2.prototype.subScalar = function(s) | ||
| { | ||
| this.x -= s; | ||
| this.y -= s; | ||
| }; | ||
| subVectors: function(a, b) | ||
| { | ||
| this.x = a.x - b.x; | ||
| this.y = a.y - b.y; | ||
| }, | ||
| Vector2.prototype.subVectors = function(a, b) | ||
| { | ||
| this.x = a.x - b.x; | ||
| this.y = a.y - b.y; | ||
| }; | ||
| multiply: function(v) | ||
| { | ||
| this.x *= v.x; | ||
| this.y *= v.y; | ||
| }, | ||
| Vector2.prototype.multiply = function(v) | ||
| { | ||
| this.x *= v.x; | ||
| this.y *= v.y; | ||
| }; | ||
| multiplyScalar: function(scalar) | ||
| { | ||
| this.x *= scalar; | ||
| this.y *= scalar; | ||
| }, | ||
| Vector2.prototype.multiplyScalar = function(scalar) | ||
| { | ||
| this.x *= scalar; | ||
| this.y *= scalar; | ||
| }; | ||
| divide: function(v) | ||
| { | ||
| this.x /= v.x; | ||
| this.y /= v.y; | ||
| }, | ||
| Vector2.prototype.divide = function(v) | ||
| { | ||
| this.x /= v.x; | ||
| this.y /= v.y; | ||
| }; | ||
| divideScalar: function(scalar) | ||
| { | ||
| return this.multiplyScalar(1 / scalar); | ||
| }, | ||
| Vector2.prototype.divideScalar = function(scalar) | ||
| { | ||
| return this.multiplyScalar(1 / scalar); | ||
| }; | ||
| min: function(v) | ||
| { | ||
| this.x = Math.min(this.x, v.x); | ||
| this.y = Math.min(this.y, v.y); | ||
| }, | ||
| Vector2.prototype.min = function(v) | ||
| { | ||
| this.x = Math.min(this.x, v.x); | ||
| this.y = Math.min(this.y, v.y); | ||
| }; | ||
| max: function(v) | ||
| { | ||
| this.x = Math.max(this.x, v.x); | ||
| this.y = Math.max(this.y, v.y); | ||
| }, | ||
| Vector2.prototype.max = function(v) | ||
| { | ||
| this.x = Math.max(this.x, v.x); | ||
| this.y = Math.max(this.y, v.y); | ||
| }; | ||
| clamp: function(min, max) | ||
| { | ||
| // assumes min < max, componentwise | ||
| this.x = Math.max(min.x, Math.min(max.x, this.x)); | ||
| this.y = Math.max(min.y, Math.min(max.y, this.y)); | ||
| }, | ||
| Vector2.prototype.clamp = function(min, max) | ||
| { | ||
| // assumes min < max, componentwise | ||
| this.x = Math.max(min.x, Math.min(max.x, this.x)); | ||
| this.y = Math.max(min.y, Math.min(max.y, this.y)); | ||
| }; | ||
| clampScalar: function(minVal, maxVal) | ||
| { | ||
| Vector2.prototype.clampScalar = function(minVal, maxVal) | ||
| { | ||
| this.x = Math.max(minVal, Math.min(maxVal, this.x)); | ||
| this.y = Math.max(minVal, Math.min(maxVal, this.y)); | ||
| }; | ||
| this.x = Math.max(minVal, Math.min(maxVal, this.x)); | ||
| this.y = Math.max(minVal, Math.min(maxVal, this.y)); | ||
| }, | ||
| Vector2.prototype.clampLength = function(min, max) | ||
| { | ||
| var length = this.length(); | ||
| clampLength: function(min, max) | ||
| { | ||
| var length = this.length(); | ||
| return this.divideScalar(length || 1).multiplyScalar(Math.max(min, Math.min(max, length))); | ||
| }, | ||
| return this.divideScalar(length || 1).multiplyScalar(Math.max(min, Math.min(max, length))); | ||
| }; | ||
| floor: function() | ||
| { | ||
| Vector2.prototype.floor = function() | ||
| { | ||
| this.x = Math.floor(this.x); | ||
| this.y = Math.floor(this.y); | ||
| }; | ||
| this.x = Math.floor(this.x); | ||
| this.y = Math.floor(this.y); | ||
| }, | ||
| Vector2.prototype.ceil = function() | ||
| { | ||
| this.x = Math.ceil(this.x); | ||
| this.y = Math.ceil(this.y); | ||
| }; | ||
| ceil: function() | ||
| { | ||
| Vector2.prototype.round = function() | ||
| { | ||
| this.x = Math.round(this.x); | ||
| this.y = Math.round(this.y); | ||
| }; | ||
| this.x = Math.ceil(this.x); | ||
| this.y = Math.ceil(this.y); | ||
| }, | ||
| Vector2.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); | ||
| }; | ||
| round: function() | ||
| { | ||
| Vector2.prototype.negate = function() | ||
| { | ||
| this.x = -this.x; | ||
| this.y = -this.y; | ||
| this.x = Math.round(this.x); | ||
| this.y = Math.round(this.y); | ||
| }, | ||
| return this; | ||
| }; | ||
| 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); | ||
| }, | ||
| Vector2.prototype.dot = function(v) | ||
| { | ||
| return this.x * v.x + this.y * v.y; | ||
| }; | ||
| negate: function() | ||
| { | ||
| this.x = -this.x; | ||
| this.y = -this.y; | ||
| Vector2.prototype.cross = function(v) | ||
| { | ||
| return this.x * v.y - this.y * v.x; | ||
| }; | ||
| return this; | ||
| }, | ||
| Vector2.prototype.lengthSq = function() | ||
| { | ||
| return this.x * this.x + this.y * this.y; | ||
| }; | ||
| dot: function(v) | ||
| { | ||
| return this.x * v.x + this.y * v.y; | ||
| }, | ||
| Vector2.prototype.length = function() | ||
| { | ||
| return Math.sqrt(this.x * this.x + this.y * this.y); | ||
| }; | ||
| cross: function(v) | ||
| { | ||
| return this.x * v.y - this.y * v.x; | ||
| }, | ||
| Vector2.prototype.manhattanLength = function() | ||
| { | ||
| return Math.abs(this.x) + Math.abs(this.y); | ||
| }; | ||
| lengthSq: function() | ||
| { | ||
| return this.x * this.x + this.y * this.y; | ||
| }, | ||
| Vector2.prototype.normalize = function() | ||
| { | ||
| return this.divideScalar(this.length() || 1); | ||
| }; | ||
| length: function() | ||
| { | ||
| return Math.sqrt(this.x * this.x + this.y * this.y); | ||
| }, | ||
| /** | ||
| * Computes the angle in radians with respect to the positive x-axis | ||
| */ | ||
| Vector2.prototype.angle = function() | ||
| { | ||
| var angle = Math.atan2(this.y, this.x); | ||
| manhattanLength: function() | ||
| if(angle < 0) | ||
| { | ||
| return Math.abs(this.x) + Math.abs(this.y); | ||
| }, | ||
| angle += 2 * Math.PI; | ||
| } | ||
| return angle; | ||
| }; | ||
| normalize: function() | ||
| { | ||
| return this.divideScalar(this.length() || 1); | ||
| }, | ||
| Vector2.prototype.distanceTo = function(v) | ||
| { | ||
| return Math.sqrt(this.distanceToSquared(v)); | ||
| }; | ||
| /** | ||
| * Computes the angle in radians with respect to the positive x-axis | ||
| */ | ||
| angle: function() | ||
| { | ||
| var angle = Math.atan2(this.y, this.x); | ||
| Vector2.prototype.distanceToSquared = function(v) | ||
| { | ||
| var dx = this.x - v.x; | ||
| var dy = this.y - v.y; | ||
| if(angle < 0) angle += 2 * Math.PI; | ||
| return dx * dx + dy * dy; | ||
| }; | ||
| return angle; | ||
| }, | ||
| Vector2.prototype.manhattanDistanceTo = function(v) | ||
| { | ||
| return Math.abs(this.x - v.x) + Math.abs(this.y - v.y); | ||
| }; | ||
| distanceTo: function(v) | ||
| { | ||
| return Math.sqrt(this.distanceToSquared(v)); | ||
| }, | ||
| Vector2.prototype.setLength = function(length) | ||
| { | ||
| return this.normalize().multiplyScalar(length); | ||
| }; | ||
| distanceToSquared: function(v) | ||
| { | ||
| var dx = this.x - v.x, | ||
| dy = this.y - v.y; | ||
| return dx * dx + dy * dy; | ||
| }, | ||
| Vector2.prototype.lerp = function(v, alpha) | ||
| { | ||
| this.x += (v.x - this.x) * alpha; | ||
| this.y += (v.y - this.y) * alpha; | ||
| }; | ||
| manhattanDistanceTo: function(v) | ||
| { | ||
| return Math.abs(this.x - v.x) + Math.abs(this.y - v.y); | ||
| }, | ||
| Vector2.prototype.lerpVectors = function(v1, v2, alpha) | ||
| { | ||
| return this.subVectors(v2, v1).multiplyScalar(alpha).add(v1); | ||
| }; | ||
| setLength: function(length) | ||
| { | ||
| return this.normalize().multiplyScalar(length); | ||
| }, | ||
| Vector2.prototype.equals = function(v) | ||
| { | ||
| return ((v.x === this.x) && (v.y === this.y)); | ||
| }; | ||
| lerp: function(v, alpha) | ||
| { | ||
| this.x += (v.x - this.x) * alpha; | ||
| this.y += (v.y - this.y) * alpha; | ||
| }, | ||
| Vector2.prototype.fromArray = function(array, offset) | ||
| { | ||
| if(offset === undefined) offset = 0; | ||
| lerpVectors: function(v1, v2, alpha) | ||
| { | ||
| return this.subVectors(v2, v1).multiplyScalar(alpha).add(v1); | ||
| }, | ||
| this.x = array[offset]; | ||
| this.y = array[offset + 1]; | ||
| }; | ||
| equals: function(v) | ||
| { | ||
| return ((v.x === this.x) && (v.y === this.y)); | ||
| }, | ||
| Vector2.prototype.toArray = function(array, offset) | ||
| { | ||
| if(array === undefined) array = []; | ||
| if(offset === undefined) offset = 0; | ||
| fromArray: function(array, offset) | ||
| { | ||
| if(offset === undefined) offset = 0; | ||
| array[offset] = this.x; | ||
| array[offset + 1] = this.y; | ||
| this.x = array[offset]; | ||
| this.y = array[offset + 1]; | ||
| }, | ||
| return array; | ||
| }; | ||
| toArray: function(array, offset) | ||
| { | ||
| if(array === undefined) array = []; | ||
| if(offset === undefined) offset = 0; | ||
| Vector2.prototype.rotateAround = function(center, angle) | ||
| { | ||
| var c = Math.cos(angle); | ||
| var s = Math.sin(angle); | ||
| array[offset] = this.x; | ||
| array[offset + 1] = this.y; | ||
| var x = this.x - center.x; | ||
| var y = this.y - center.y; | ||
| return array; | ||
| }, | ||
| this.x = x * c - y * s + center.x; | ||
| this.y = x * s + y * c + center.y; | ||
| }; | ||
| rotateAround: function(center, angle) | ||
| { | ||
| var c = Math.cos(angle), | ||
| s = Math.sin(angle); | ||
| var x = this.x - center.x; | ||
| var y = this.y - center.y; | ||
| this.x = x * c - y * s + center.x; | ||
| this.y = x * s + y * c + center.y; | ||
| } | ||
| }); | ||
| export {Vector2}; |
@@ -35,2 +35,7 @@ "use strict"; | ||
| /** | ||
| * Origin of the object used as point of rotation. | ||
| */ | ||
| this.origin = new Vector2(0, 0); | ||
| /** | ||
| * Scale of the object. | ||
@@ -86,5 +91,25 @@ */ | ||
| */ | ||
| this.draggable = true; | ||
| this.draggable = false; | ||
| /** | ||
| * Flag to indicate wheter this objet ignores the viewport transformation. | ||
| */ | ||
| this.ignoreViewport = false; | ||
| /** | ||
| * Flag to indicate if the context of canvas should be saved before render. | ||
| */ | ||
| this.saveContextState = true; | ||
| /** | ||
| * Flag to indicate if the context of canvas should be restored after render. | ||
| */ | ||
| this.restoreContextState = true; | ||
| /** | ||
| * 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. | ||
@@ -160,3 +185,3 @@ * | ||
| { | ||
| this.matrix.compose(this.position.x, this.position.y, this.scale.x, this.scale.y, this.rotation); | ||
| 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); | ||
@@ -175,2 +200,12 @@ | ||
| /** | ||
| * Apply the transform to the rendering context. | ||
| * | ||
| * Can also be used for pre rendering logic. | ||
| */ | ||
| Object2D.prototype.transform = function(context, viewport) | ||
| { | ||
| this.globalMatrix.tranformContext(context); | ||
| }; | ||
| /** | ||
| * Draw the object into the canvas. | ||
@@ -182,3 +217,3 @@ * | ||
| */ | ||
| Object2D.prototype.draw = function(context){}; | ||
| Object2D.prototype.draw = function(context, viewport){}; | ||
@@ -218,3 +253,6 @@ /** | ||
| */ | ||
| Object2D.prototype.onPointerDrag = null; | ||
| Object2D.prototype.onPointerDrag = function(pointer, viewport, delta) | ||
| { | ||
| this.position.add(delta); | ||
| }; | ||
@@ -221,0 +259,0 @@ /** |
@@ -6,7 +6,11 @@ "use strict"; | ||
| import {Box2} from "../math/Box2.js"; | ||
| import {Helpers} from "../utils/Helpers.js"; | ||
| import {Circle} from "./Circle.js"; | ||
| /** | ||
| * Box object draw a box. | ||
| * | ||
| * @class | ||
| */ | ||
| function Box(resizable) | ||
| function Box() | ||
| { | ||
@@ -31,7 +35,2 @@ Object2D.call(this); | ||
| this.fillStyle = "#FFFFFF"; | ||
| if(resizable) | ||
| { | ||
| this.createResizeHelpers(); | ||
| } | ||
| } | ||
@@ -41,55 +40,2 @@ | ||
| Box.prototype.createResizeHelpers = function(first_argument) | ||
| { | ||
| var self = this; | ||
| function updateHelpers() | ||
| { | ||
| topRight.position.copy(self.box.min); | ||
| bottomLeft.position.copy(self.box.max); | ||
| topLeft.position.set(self.box.max.x, self.box.min.y); | ||
| bottomRight.position.set(self.box.min.x, self.box.max.y); | ||
| } | ||
| var topRight = new Circle(); | ||
| topRight.radius = 4; | ||
| topRight.onPointerDrag = function(pointer, viewport, delta) | ||
| { | ||
| self.box.min.copy(topRight.position); | ||
| updateHelpers(); | ||
| }; | ||
| this.add(topRight); | ||
| var topLeft = new Circle(); | ||
| topLeft.radius = 4; | ||
| topLeft.onPointerDrag = function(pointer, viewport, delta) | ||
| { | ||
| self.box.max.x = topLeft.position.x; | ||
| self.box.min.y = topLeft.position.y; | ||
| updateHelpers(); | ||
| }; | ||
| this.add(topLeft); | ||
| var bottomLeft = new Circle(); | ||
| bottomLeft.radius = 4; | ||
| bottomLeft.onPointerDrag = function(pointer, viewport, delta) | ||
| { | ||
| self.box.max.copy(bottomLeft.position); | ||
| updateHelpers(); | ||
| }; | ||
| this.add(bottomLeft); | ||
| var bottomRight = new Circle(); | ||
| bottomRight.radius = 4; | ||
| bottomRight.onPointerDrag = function(pointer, viewport, delta) | ||
| { | ||
| self.box.min.x = bottomRight.position.x; | ||
| self.box.max.y = bottomRight.position.y; | ||
| updateHelpers(); | ||
| }; | ||
| this.add(bottomRight); | ||
| updateHelpers(); | ||
| }; | ||
| Box.prototype.onPointerEnter = function(pointer, viewport) | ||
@@ -96,0 +42,0 @@ { |
@@ -7,3 +7,5 @@ "use strict"; | ||
| /** | ||
| * Circle object draw a circular object. | ||
| * Circle object draw a circular object, into the canvas. | ||
| * | ||
| * @class | ||
| */ | ||
@@ -10,0 +12,0 @@ function Circle() |
| "use strict"; | ||
| import {Object2D} from "../Object2D.js"; | ||
| import {Box2} from "../math/Box2.js"; | ||
| import {Vector2} from "../math/Vector2.js"; | ||
| /** | ||
| * Image object is used to draw an image from URL. | ||
| * | ||
| * @class | ||
| * @param {string} [src] Source URL of the image. | ||
| */ | ||
| function Image(src) | ||
| { | ||
| Object2D.call(this); | ||
| /** | ||
| * Box object containing the size of the object. | ||
| */ | ||
| this.box = new Box2(); | ||
| /** | ||
| * Image source DOM element. | ||
| */ | ||
| this.image = document.createElement("img"); | ||
| this.image.src = src; | ||
| if(src !== undefined) | ||
| { | ||
| this.setImage(src); | ||
| } | ||
| } | ||
@@ -15,7 +35,31 @@ | ||
| /** | ||
| * Set the image of the object. | ||
| * | ||
| * Automatically sets the box size to match the image. | ||
| * | ||
| * @param {string} src Source URL of the image. | ||
| */ | ||
| Image.prototype.setImage = function(src) | ||
| { | ||
| var self = this; | ||
| this.image.onload = function() | ||
| { | ||
| self.box.min.set(0, 0); | ||
| self.box.max.set(this.naturalWidth, this.naturalHeight); | ||
| }; | ||
| this.image.src = src; | ||
| }; | ||
| Image.prototype.isInside = function(point) | ||
| { | ||
| return this.box.containsPoint(point); | ||
| }; | ||
| Image.prototype.draw = function(context) | ||
| { | ||
| context.drawImage(this.image, 0, 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); | ||
| }; | ||
| export {Image}; |
@@ -8,2 +8,4 @@ "use strict"; | ||
| * Line object draw a line from one point to another. | ||
| * | ||
| * @class | ||
| */ | ||
@@ -32,2 +34,12 @@ function Line() | ||
| this.strokeStyle = "#000000"; | ||
| /** | ||
| * Dash line pattern to be used, is empty draws a solid line. | ||
| */ | ||
| this.dashPattern = [5, 5]; | ||
| /** | ||
| * Line width. | ||
| */ | ||
| this.lineWidth = 1; | ||
| } | ||
@@ -39,5 +51,5 @@ | ||
| { | ||
| context.lineWidth = 1; | ||
| context.lineWidth = this.lineWidth; | ||
| context.strokeStyle = this.strokeStyle; | ||
| context.setLineDash([5, 5]); | ||
| context.setLineDash(this.dashPattern); | ||
@@ -44,0 +56,0 @@ context.beginPath(); |
@@ -5,2 +5,7 @@ "use strict"; | ||
| /** | ||
| * Text element, used to draw text into the canvas. | ||
| * | ||
| * @class | ||
| */ | ||
| function Text() | ||
@@ -24,2 +29,7 @@ { | ||
| this.color = "#000000"; | ||
| /** | ||
| * Text align property. | ||
| */ | ||
| this.textAlign = "center"; | ||
| } | ||
@@ -32,3 +42,3 @@ | ||
| context.font = this.font; | ||
| context.textAlign = "center"; | ||
| context.textAlign = this.textAlign; | ||
| context.fillStyle = this.color; | ||
@@ -35,0 +45,0 @@ |
@@ -31,2 +31,7 @@ "use strict"; | ||
| this.pointer.setCanvas(canvas); | ||
| /** | ||
| * Indicates if the canvas should be automatically cleared on each new frame. | ||
| */ | ||
| this.autoClear = true; | ||
| } | ||
@@ -80,3 +85,3 @@ | ||
| var child = objects[i]; | ||
| var childPoint = child.inverseGlobalMatrix.transformPoint(viewportPoint); | ||
| var childPoint = child.inverseGlobalMatrix.transformPoint(child.ignoreViewport ? point : viewportPoint); | ||
@@ -98,2 +103,14 @@ // Check if the pointer pointer is inside | ||
| // Pointer pressed | ||
| if(pointer.buttonPressed(Pointer.LEFT) && child.onButtonPressed !== null) | ||
| { | ||
| child.onButtonPressed(pointer, viewport); | ||
| } | ||
| // Just released | ||
| if(pointer.buttonJustReleased(Pointer.LEFT) && child.onButtonUp !== null) | ||
| { | ||
| child.onButtonUp(pointer, viewport); | ||
| } | ||
| // Pointer just pressed | ||
@@ -110,2 +127,4 @@ if(pointer.buttonJustPressed(Pointer.LEFT)) | ||
| child.beingDragged = true; | ||
| // Only start a drag operation on the top element. | ||
| break; | ||
@@ -115,14 +134,2 @@ } | ||
| // Pointer pressed | ||
| if(pointer.buttonPressed(Pointer.LEFT) && child.onButtonPressed !== null) | ||
| { | ||
| child.onButtonPressed(pointer, viewport); | ||
| } | ||
| // Just released | ||
| if(pointer.buttonJustReleased(Pointer.LEFT) && child.onButtonUp !== null) | ||
| { | ||
| child.onButtonUp(pointer, viewport); | ||
| } | ||
| child.pointerInside = true; | ||
@@ -157,13 +164,15 @@ } | ||
| if(child.beingDragged) | ||
| { | ||
| var matrix = viewport.inverseMatrix.clone(); | ||
| matrix.multiply(child.inverseGlobalMatrix); | ||
| matrix.setPosition(0, 0); | ||
| { | ||
| var lastPosition = pointer.position.clone(); | ||
| lastPosition.sub(pointer.delta); | ||
| var delta = matrix.transformPoint(pointer.delta); | ||
| child.position.add(delta); | ||
| var positionWorld = viewport.inverseMatrix.transformPoint(pointer.position); | ||
| var lastWorld = viewport.inverseMatrix.transformPoint(lastPosition); | ||
| // Mouse delta in world coordinates | ||
| positionWorld.sub(lastWorld); | ||
| if(child.onPointerDrag !== null) | ||
| { | ||
| child.onPointerDrag(pointer, viewport, delta); | ||
| child.onPointerDrag(pointer, viewport, positionWorld); | ||
| } | ||
@@ -187,19 +196,32 @@ } | ||
| // Render the content | ||
| var context = this.context; | ||
| // Clear canvas | ||
| context.setTransform(1, 0, 0, 1, 0, 0); | ||
| context.clearRect(0, 0, this.canvas.width, this.canvas.height); | ||
| 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(context); | ||
| viewport.matrix.setContextTransform(this.context); | ||
| // Render into the canvas | ||
| for(var i = 0; i < objects.length; i++) | ||
| { | ||
| context.save(); | ||
| objects[i].globalMatrix.tranformContext(context); | ||
| objects[i].draw(context); | ||
| context.restore(); | ||
| { | ||
| if(objects[i].saveContextState) | ||
| { | ||
| this.context.save(); | ||
| } | ||
| if(objects[i].ignoreViewport) | ||
| { | ||
| this.context.setTransform(1, 0, 0, 1, 0, 0); | ||
| } | ||
| objects[i].transform(this.context, viewport); | ||
| objects[i].draw(this.context, viewport); | ||
| if(objects[i].restoreContextState) | ||
| { | ||
| this.context.restore(); | ||
| } | ||
| } | ||
@@ -206,0 +228,0 @@ }; |
@@ -8,2 +8,4 @@ "use strict"; | ||
| export {Stencil} from "./stencil/Stencil.js"; | ||
| export {Key} from "./input/Key.js"; | ||
@@ -22,1 +24,5 @@ export {Pointer} from "./input/Pointer.js"; | ||
| export {Image} from "./objects/Image.js"; | ||
| export {DOM} from "./objects/DOM.js"; | ||
| export {Pattern} from "./objects/Pattern.js"; | ||
| export {Helpers} from "./utils/Helpers.js"; |
@@ -92,3 +92,3 @@ "use strict"; | ||
| { | ||
| this.matrix.compose(this.position.x, this.position.y, this.scale, this.scale, this.rotation); | ||
| this.matrix.compose(this.position.x, this.position.y, this.scale, this.scale, 0, 0, this.rotation); | ||
| this.inverseMatrix = this.matrix.getInverse(); | ||
@@ -95,0 +95,0 @@ //this.matrixNeedsUpdate = false; |
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
No alert changes
Improved metrics
- Total package byte prevSize
- increased by16.07%
1657918
- Number of package files
- increased by60%
96
- Lines of code
- increased by16.46%
6714
- Number of lines in readme file
- increased by133.33%
14
No dependency changes