Skip to content

Commit

Permalink
continued shape refactoring #19
Browse files Browse the repository at this point in the history
  • Loading branch information
@torpedro
torpedro committed Aug 29, 2014
1 parent 0ddbc88 commit d5ec239
Show file tree
Hide file tree
Showing 5 changed files with 95 additions and 136 deletions.
23 changes: 16 additions & 7 deletions js/geom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ geom.Vector = xbase.Class.extend({

x: function(x) {
if (!x) return this._v.e(1);
this.setElements([x, this.y()]);
this._v.setElements([x, this.y()]);
return this;
},

y: function(y) {
if (!y) return this._v.e(2);
this.setElements([this.x(), y]);
this._v.setElements([this.x(), y]);
return this;
},

Expand All @@ -28,12 +28,21 @@ geom.Vector = xbase.Class.extend({
return new geom.Vector(this._v.toUnitVector());
},

sub: function(geomV) {
return new Vector(this._v.subtract(geomV._v));
angleFrom: function(vector) {
return this._v.angleFrom(vector._v);
},

add: function(geomV) {
return new Vector(this._v.add(geomV._v));
rotate: function(angle, vector) {
if (!vector) vector = new geom.Vector(0, 0);
return new geom.Vector(this._v.rotate(angle, vector._v));
},

sub: function(vector) {
return new geom.Vector(this._v.subtract(vector._v));
},

add: function(vector) {
return new geom.Vector(this._v.add(vector._v));
}
});

Expand Down Expand Up @@ -177,7 +186,7 @@ geom.invertLine = function(line, invCircle) {
// n is unit vector of line
// a is a point on the line
var a = $V([line._origin.x, line._origin.y]);
var n = $V([line._vector.x, line._vector.y]);
var n = $V([line._vector.x(), line._vector.y()]);

// p is the point of which we want to know the distance
var p = $V([invCircle.x, invCircle.y]);
Expand Down
3 changes: 1 addition & 2 deletions js/presets.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,7 @@ PresetLoader.presets = {
var invCircle2 = new Circle(x, y-363.5, r);
canvas.addInversionCircle(invCircle2);

var metaCircle = new Circle(x, y, 250);
var points = metaCircle.calculatePoints(10);
var points = Circle.calculatePoints(x, y, 250, 10);
$.each(points, function(i, p) {
canvas.addShape(new Circle(p.x, p.y, 19.6));
});
Expand Down
2 changes: 0 additions & 2 deletions js/shapes/circle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,6 @@ var Circle = TransformableShape.extend({

// @overridden
render: function(svg) {
var self = this;

this._parent = svg;
this._svg = svg.append("g").classed("circle", true);

Expand Down
92 changes: 35 additions & 57 deletions js/shapes/line.js
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,33 @@

var Line = Shape.extend({
// Line => x = origin + t * vector

/**
* @class Line
* x = origin + t * vector
*/
var Line = TransformableShape.extend({
// @overridden
init: function(x, y, dx, dy) {
this._super();
this._origin = new Point(x, y);
this._vector = new geom.Vector(dx, dy).normalized();
this._type = 'normal';
this._shapeKind = 'line';
},

// @overridden
copy: function(otherLine) {
if (!(otherLine instanceof Line)) return false;
console.warn('TODO: Implement copy');
},

remove: function() {
this._svg.remove();
this._svg = null;
},

_showOn: function(svg) {
if (this._svg) {
this._svg.style('visibility', '');
return this;
}

// @overridden
render: function(svg) {
this._parent = svg;
this._svg = svg.append('g');

var line = this._svg.append('line')
.attr('x1', this._origin.x - this._vector.x*6000)
.attr('y1', this._origin.y - this._vector.y*6000)
.attr('x2', this._origin.x + this._vector.x*6000)
.attr('y2', this._origin.y + this._vector.y*6000);
.attr('x1', this._origin.x - this._vector.x()*6000)
.attr('y1', this._origin.y - this._vector.y()*6000)
.attr('x2', this._origin.x + this._vector.x()*6000)
.attr('y2', this._origin.y + this._vector.y()*6000);

var origin = this._svg.append('circle')
.attr("cx", this._origin.x)
Expand All @@ -41,60 +36,43 @@ var Line = Shape.extend({
.classed("origin", "true");

var rotator = this._svg.append('circle')
.attr("cx", this._origin.x + this._vector.x*25)
.attr("cy", this._origin.y + this._vector.y*25)
.attr("cx", this._origin.x + this._vector.x()*25)
.attr("cy", this._origin.y + this._vector.y()*25)
.attr("r", 5)
.classed("rotator", "true");


var self = this;
Shape.makeDraggable(origin, svg.canvas, this.setPosition, this);

Shape.makeDraggable(rotator, svg.canvas, function(x, y) {
var dx = x - this._origin.x;
var dy = y - this._origin.y;
this._vector = new geom.Vector(dx, dy).normalized();
this.remove();
this.showOn(this._parent);
this.trigger('move');
}, this);

this._setMoveHandle(origin);
this._setResizeHandle(rotator);
this._applyClasses();

return this;
},

setPosition: function(x, y) {
this._origin.x = x;
this._origin.y = y;
// @overridden
onMove: function(x, y) { return this.setPosition(x, y); },

// @overridden
onResize: function(x, y) {
var dx = x - this._origin.x;
var dy = y - this._origin.y;
this._vector = new geom.Vector(dx, dy).normalized();
this.remove();
this.showOn(this._parent);
this.render(this._parent);
this.trigger('move');
},

_hide: function() {
this._svg.style('visibility', 'hidden');
},


setType: function(type) {
this._type = type;
this._applyClasses();
},

_applyClasses: function() {
if (this._svg) {
this._svg.attr('class', 'line ' + this._type);
}
},

// @overridden
invertAtCircle: function(invCircle) {
return geom.invertLine(this, invCircle);
},

setPosition: function(x, y) {
this._origin.x = x;
this._origin.y = y;
this.remove();
this.render(this._parent);
this.trigger('move');
},

remove: function() {
this._svg.remove();
this._svg = null;
}
});
111 changes: 43 additions & 68 deletions js/shapes/polygon.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@


var Polygon = Shape.extend({
// TODO: Make movable
/**
* @class Polygon
* Implementation of a polygon shape
*/
var Polygon = TransformableShape.extend({
// @overridden
init: function(points) {
this._super();
this._shapeKind = 'polygon';
this.setPoints(points);
this._type = 'normal';
},


// @overridden
copy: function(otherPolygon) {
this.setPoints(otherPolygon._points);
},
Expand Down Expand Up @@ -43,19 +46,16 @@ var Polygon = Shape.extend({
this._polygon.attr('points', pointsString);

var center = this.getCenter();
this._origin.attr('cx', center.x).attr('cy', center.y);
this._rotator.attr('cx', center.x + this._direction.e(1)*18).attr('cy', center.y + this._direction.e(2)*18);
this._origin.attr('cx', center.x()).attr('cy', center.y());
this._rotator.attr('cx', center.x() + this._direction.x()*18).attr('cy', center.y() + this._direction.y()*18);

this.trigger('move');
},


_showOn: function(svg) {
if (this._svg) {
this._svg.style('visibility', '');
return this;
}

// @overridden
render: function(svg) {
this._parent = svg;
this._svg = svg.append('g');

this._polygon = this._svg.append('polygon');
Expand All @@ -68,83 +68,59 @@ var Polygon = Shape.extend({
.attr('r', 5)
.classed("rotator", "true");


Shape.makeDraggable(this._origin, svg.canvas, this.setCenter, this);

this._direction = $V([1, -1]).toUnitVector();
Shape.makeDraggable(this._rotator, svg.canvas, function(x, y) {
var center = this.getCenter();
var newDirection = $V([x - center.x, y - center.y]).toUnitVector();
var angle = newDirection.angleFrom(this._direction);

// We need to figure out if this rotation is clockwise or counter-clockwise.
// We do half the rotation we just calculated and calculate the new angle.
// We'd expect the new angle to be smaller, because we've already rotated half way.
// If this angle is greater than the original angle, we have a counter-clockwise rotation.
var half = this._direction.rotate(angle/2, $V([0, 0]));
var angle2 = newDirection.angleFrom(half);
if (angle2 > angle) {
angle *= -1;
}

this._direction = newDirection;
this._rotate(angle);
}, this);
this._direction = new geom.Vector(1, -1).normalized();
this._setMoveHandle(this._origin);
this._setResizeHandle(this._rotator);

this._updatePolygonPointsAttr();
this._applyClasses();
return this;
},

// @overridden
onMove: function(x, y) { return this.setCenter(x, y); },

_hide: function() {
this._svg.style('visibility', 'hidden');
},


setType: function(type) {
this._type = type;
this._applyClasses();
},


_applyClasses: function() {
if (this._svg) {
this._svg.attr("class", 'polygon ' + this._type);
// @overridden
onResize: function(x, y) {
var v = new geom.Vector(x, y);
var center = this.getCenter();
var newDirection = v.sub(center).normalized();
var angle = newDirection.angleFrom(this._direction);

// We need to figure out if this rotation is clockwise or counter-clockwise.
// We do half the rotation we just calculated and calculate the new angle.
// We'd expect the new angle to be smaller, because we've already rotated half way.
// If this angle is greater than the original angle, we have a counter-clockwise rotation.
var half = this._direction.rotate(angle/2);
var angle2 = newDirection.angleFrom(half);
if (angle2 > angle) {
angle *= -1;
}
},

this._direction = newDirection;
this._rotate(angle);
},

invertAtCircle: function(circle) {
return geom.invertPolygon(this, circle);
},


remove: function() {
this._svg.remove();
this._svg = null;
},


getCenter: function() {
var xSum = 0,
ySum = 0;
$.each(this._points, function(i, point) {
xSum += point.x;
ySum += point.y;
});
return {
'x': xSum / this._points.length,
'y': ySum / this._points.length
}
return new geom.Vector(xSum / this._points.length, ySum / this._points.length);
},


setCenter: function(x, y) {
// calculate diff to current center
var center = this.getCenter();
var diffX = x - center.x;
var diffY = y - center.y;
var diffX = x - center.x();
var diffY = y - center.y();

$.each(this._points, function(i, point) {
point.x += diffX;
Expand All @@ -156,14 +132,13 @@ var Polygon = Shape.extend({


_rotate: function(angle) {
var c = this.getCenter();
var vCenter = $V([c.x, c.y]);
var vCenter = this.getCenter();

$.each(this._points, function(i, point) {
var v = $V([point.x, point.y]);
var v = new geom.Vector(point.x, point.y);
v = v.rotate(angle, vCenter);
point.x = v.e(1);
point.y = v.e(2);
point.x = v.x();
point.y = v.y();
});
this._updatePolygonPointsAttr();
}
Expand Down

0 comments on commit d5ec239

Please sign in to comment.