DiagramComponent.prototype.updateTransformationMatrix = function() {
var rotationRad,
//sinA, cosA,
translation,
transformMat3,
result;
if (angular.isNumber(this.rotation) &&
angular.isNumber(this.x) &&
angular.isNumber(this.y)) {
rotationRad = this.rotation / 180 * Math.PI;
transformMat3 = glMatrix.mat3.create();
translation = glMatrix.vec2.create();
glMatrix.vec2.set(translation, this.x + this._centerOffset[0], this.y + this._centerOffset[1]);
glMatrix.mat3.translate(
transformMat3,
transformMat3,
translation
);
glMatrix.mat3.rotate(
transformMat3,
transformMat3,
rotationRad
);
glMatrix.vec2.set(translation, -this._centerOffset[0], -this._centerOffset[1]);
glMatrix.mat3.translate(
transformMat3,
transformMat3,
translation
);
this.transformationMatrix = transformMat3;
this.svgTransformationMatrix = [
transformMat3[0],
transformMat3[1],
transformMat3[3],
transformMat3[4],
transformMat3[6],
transformMat3[7]
];
result = this.transformationMatrix;
}
return result;
};
initialize: function(attributes, options) {
// Create vectors
this.set('position', glMatrix.vec2.create());
this.set('velocity', glMatrix.vec2.create());
this.set('acceleration', glMatrix.vec2.create());
this.set('force', glMatrix.vec2.create());
// Derived properties
this.set('density', this.get('mass') / this.getVolume());
},
draw: function() {
if (glMatrix.vec2.distance(this.tail, this.head) !== 0) {
// Get normalized direction vector
glMatrix.vec2.sub(this._direction, this.head, this.tail);
glMatrix.vec2.normalize(this._direction, this._direction);
var length = glMatrix.vec2.distance(this.head, this.tail);
var headHeight = this.headHeight;
var headWidth = this.headWidth;
var tailWidth = this.tailWidth;
if (this.scaleHead) {
if (length < headHeight / this.scaledHeadProportion) {
headHeight = length * this.scaledHeadProportion;
if (this.scaleTail) {
tailWidth *= headHeight / this.headHeight;
headWidth *= headHeight / this.headHeight;
}
}
}
// Calculate the normal vector by making it perpendicular to direction vector
this._normal[0] = this._direction[1];
this._normal[1] = -this._direction[0];
// Calculate positions of all the points on the arrow
this._headOffset(this._rightFlap, -headHeight, -headWidth / 2);
this._headOffset(this._leftFlap, -headHeight, headWidth / 2);
this._headOffset(this._rightPin, -headHeight, -tailWidth / 2);
this._headOffset(this._leftPin, -headHeight, tailWidth / 2);
this._headOffset(this._rightTail, -length, -tailWidth / 2);
this._headOffset(this._leftTail, -length, tailWidth / 2);
// Connect the dots
var context = this.context;
context.beginPath();
context.moveTo(this.head[0], this.head[1]);
context.lineTo(this._rightFlap[0], this._rightFlap[1]);
context.lineTo(this._rightPin[0], this._rightPin[1]);
context.lineTo(this._rightTail[0], this._rightTail[1]);
context.lineTo(this._leftTail[0], this._leftTail[1]);
context.lineTo(this._leftPin[0], this._leftPin[1]);
context.lineTo(this._leftFlap[0], this._leftFlap[1]);
context.closePath();
context.lineWidth = this.lineThickness;
context.lineJoin = 'round';
context.strokeStyle = this.lineColor;
context.stroke();
}
},
var ArrowGraphic = function(options) {
options = _.extend({
tail: {
x: 0,
y: 0
},
head: {
x: 0,
y: 0
},
headHeight: 8,
headWidth: 8,
tailWidth: 4,
scaleHead: true,
scaleTail: true,
scaledHeadProportion: 0.5,
lineColor: '#000',
lineThickness: 2,
}, options);
this.tail = glMatrix.vec2.fromValues(options.tail.x, options.tail.y);
this.head = glMatrix.vec2.fromValues(options.head.x, options.head.y);
this.headHeight = options.headHeight;
this.headWidth = options.headWidth;
this.tailWidth = options.tailWidth;
this.scaleHead = options.scaleHead;
this.scaleTail = options.scaleTail;
this.scaledHeadProportion = options.scaledHeadProportion;
this.lineColor = options.lineColor;
this.lineThickness = options.lineThickness;
if (options.context)
this.context = options.context;
else
throw 'ArrowGraphic needs a graphics context to draw to.';
// Initialize vectors
this._direction = glMatrix.vec2.create();
this._normal = glMatrix.vec2.create();
this._rightFlap = glMatrix.vec2.create();
this._rightPin = glMatrix.vec2.create();
this._rightTail = glMatrix.vec2.create();
this._leftTail = glMatrix.vec2.create();
this._leftPin = glMatrix.vec2.create();
this._leftFlap = glMatrix.vec2.create();
};