--- a/client/js/paper-renderer.js Wed Aug 22 16:50:42 2012 +0200
+++ b/client/js/paper-renderer.js Tue Aug 28 18:26:13 2012 +0200
@@ -1,27 +1,42 @@
-Rkns.Renderer = {}
-
-Rkns.Renderer.Utils = {
+Rkns.Renderer = {
+ _MARGIN_X: 80,
+ _MARGIN_Y: 50,
+ _MIN_DRAG_DISTANCE: 2,
+ _NODE_RADIUS: 15,
+ _NODE_FONT_SIZE: 10,
+ _EDGE_FONT_SIZE: 9,
+ _NODE_MAX_CHAR: 50,
+ _EDGE_MAX_CHAR: 40,
+ _ARROW_LENGTH: 16,
+ _ARROW_WIDTH: 8,
_EDITOR_ARROW_LENGTH : 20,
_EDITOR_ARROW_WIDTH : 40,
_EDITOR_MARGIN : 15,
_EDITOR_PADDING : 10,
- _EDITOR_GRADIENT : new paper.Gradient(['#f0f0f0', '#d0d0d0']),
- drawEditBox : function(_coords, _path, _width, _height) {
- var _isLeft = (_coords.x < paper.view.center.x ? 1 : -1),
- _left = _coords.x + _isLeft * ( this._EDITOR_MARGIN + this._EDITOR_ARROW_LENGTH ),
- _right = _coords.x + _isLeft * ( this._EDITOR_MARGIN + this._EDITOR_ARROW_LENGTH + _width ),
+ _EDITOR_GRADIENT : new paper.Gradient(['#f0f0f0', '#d0d0d0'])
+}
+
+Rkns.Renderer.Utils = {
+ drawEditBox : function(_coords, _path, _width, _xmargin, _selector) {
+ _selector.css({
+ width: (_width - 2* Rkns.Renderer._EDITOR_PADDING),
+ })
+ var _height = _selector.outerHeight() + 2* Rkns.Renderer._EDITOR_PADDING,
+ _isLeft = (_coords.x < paper.view.center.x ? 1 : -1),
+ _left = _coords.x + _isLeft * ( _xmargin + Rkns.Renderer._EDITOR_ARROW_LENGTH ),
+ _right = _coords.x + _isLeft * ( _xmargin + Rkns.Renderer._EDITOR_ARROW_LENGTH + _width ),
_top = _coords.y - _height / 2;
- if (_top < this._EDITOR_MARGIN) {
- _top = Math.min( this._EDITOR_MARGIN, _coords.y - this._EDITOR_ARROW_WIDTH / 2 );
+ if (_top < Rkns.Renderer._EDITOR_MARGIN) {
+ _top = Math.min( Rkns.Renderer._EDITOR_MARGIN, _coords.y - Rkns.Renderer._EDITOR_ARROW_WIDTH / 2 );
}
var _bottom = _top + _height;
- if (_bottom > (paper.view.size.height - this._EDITOR_MARGIN)) {
- _bottom = Math.max( paper.view.size.height - this._EDITOR_MARGIN, _coords.y + this._EDITOR_ARROW_WIDTH / 2 );
+ if (_bottom > (paper.view.size.height - Rkns.Renderer._EDITOR_MARGIN)) {
+ _bottom = Math.max( paper.view.size.height - Rkns.Renderer._EDITOR_MARGIN, _coords.y + Rkns.Renderer._EDITOR_ARROW_WIDTH / 2 );
_top = _bottom - _height;
}
_path.segments[0].point
= _path.segments[7].point
- = _coords.add([_isLeft * this._EDITOR_MARGIN, 0]);
+ = _coords.add([_isLeft * _xmargin, 0]);
_path.segments[1].point.x
= _path.segments[2].point.x
= _path.segments[5].point.x
@@ -36,13 +51,14 @@
_path.segments[4].point.y
= _path.segments[5].point.y
= _bottom;
- _path.segments[1].point.y = _coords.y - this._EDITOR_ARROW_WIDTH / 2;
- _path.segments[6].point.y = _coords.y + this._EDITOR_ARROW_WIDTH / 2;
- _path.fillColor = new paper.GradientColor(this._EDITOR_GRADIENT, [0,_top], [0, _bottom])
- return {
- left: (this._EDITOR_PADDING + Math.min(_left, _right)),
- top: (this._EDITOR_PADDING + _top)
- }
+ _path.segments[1].point.y = _coords.y - Rkns.Renderer._EDITOR_ARROW_WIDTH / 2;
+ _path.segments[6].point.y = _coords.y + Rkns.Renderer._EDITOR_ARROW_WIDTH / 2;
+ _path.closed = true;
+ _path.fillColor = new paper.GradientColor(Rkns.Renderer._EDITOR_GRADIENT, [0,_top], [0, _bottom]);
+ _selector.css({
+ left: (Rkns.Renderer._EDITOR_PADDING + Math.min(_left, _right)),
+ top: (Rkns.Renderer._EDITOR_PADDING + _top)
+ });
},
sector : function(_repr, _inR, _outR, _startAngle, _endAngle, _padding, _imgsrc) {
var _startRads = _startAngle * Math.PI / 180,
@@ -167,12 +183,12 @@
Rkns.Renderer.Node.prototype._init = function() {
this.renderer.node_layer.activate();
this.type = "Node";
- this.circle = new paper.Path.Circle([0, 0], Rkns._NODE_RADIUS);
+ this.circle = new paper.Path.Circle([0, 0], Rkns.Renderer._NODE_RADIUS);
this.circle.fillColor = '#ffffff';
this.circle.__representation = this;
this.title = new paper.PointText([0,0]);
this.title.characterStyle = {
- fontSize: Rkns._NODE_FONT_SIZE,
+ fontSize: Rkns.Renderer._NODE_FONT_SIZE,
fillColor: 'black'
};
this.edit_button = new Rkns.Renderer.NodeEditButton(this.renderer, {});
@@ -190,7 +206,7 @@
this.paper_coords = this.renderer.toPaperCoords(_model_coords);
this.circle.position = this.paper_coords;
this.title.content = this.model.get("title");
- this.title.position = this.paper_coords.add([0, 2 * Rkns._NODE_RADIUS]);
+ this.title.position = this.paper_coords.add([0, 2 * Rkns.Renderer._NODE_RADIUS]);
this.circle.strokeColor = this.model.get("created_by").get("color");
this.edit_button.moveTo(this.paper_coords);
this.remove_button.moveTo(this.paper_coords);
@@ -275,11 +291,11 @@
this.line.add([0,0],[0,0]);
this.line.__representation = this;
this.arrow = new paper.Path();
- this.arrow.add([0,0],[Rkns._ARROW_LENGTH,Rkns._ARROW_WIDTH / 2],[0,Rkns._ARROW_WIDTH]);
+ this.arrow.add([0,0],[Rkns.Renderer._ARROW_LENGTH,Rkns.Renderer._ARROW_WIDTH / 2],[0,Rkns.Renderer._ARROW_WIDTH]);
this.arrow.__representation = this;
this.text = new paper.PointText();
this.text.characterStyle = {
- fontSize: Rkns._EDGE_FONT_SIZE,
+ fontSize: Rkns.Renderer._EDGE_FONT_SIZE,
fillColor: 'black'
};
this.text.paragraphStyle.justification = 'center';
@@ -381,7 +397,7 @@
this.line.__representation = this;
this.arrow = new paper.Path();
this.arrow.fillColor = _color;
- this.arrow.add([0,0],[Rkns._ARROW_LENGTH,Rkns._ARROW_WIDTH / 2],[0,Rkns._ARROW_WIDTH]);
+ this.arrow.add([0,0],[Rkns.Renderer._ARROW_LENGTH,Rkns.Renderer._ARROW_WIDTH / 2],[0,Rkns.Renderer._ARROW_WIDTH]);
this.arrow.__representation = this;
this.arrow_angle = 0;
}
@@ -460,8 +476,7 @@
Rkns.Renderer.NodeEditor.prototype.redraw = function() {
var _coords = this.node_representation.paper_coords,
- _model = this.node_representation.model,
- _css = Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 300);
+ _model = this.node_representation.model;
this.editor_$
.html(this.template({
node: {
@@ -473,8 +488,8 @@
},
l10n: this.renderer.renkan.l10n
}))
- .show()
- .css(_css);
+ .show();
+ Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 20, this.editor_$);
var _this = this;
this.editor_$.find(".Rk-CloseX").click(function() {
_this.renderer.removeRepresentation(_this);
@@ -533,8 +548,7 @@
Rkns.Renderer.EdgeEditor.prototype.redraw = function() {
var _coords = this.edge_representation.paper_coords,
- _model = this.edge_representation.model,
- _css = Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 200);
+ _model = this.edge_representation.model;
this.editor_$
.html(this.template({
edge: {
@@ -550,14 +564,15 @@
},
l10n: this.renderer.renkan.l10n
}))
- .show()
- .css(_css);
+ .show();
+ Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 5, this.editor_$);
var _this = this;
this.editor_$.find(".Rk-CloseX").click(function() {
_this.renderer.removeRepresentation(_this);
paper.view.draw();
});
this.editor_$.find("input, textarea").bind("keyup change", function() {
+ _this.editor_$.find(".Rk-Edit-Goto").attr("href",_this.editor_$.find(".Rk-Edit-URI").val());
var _data = {
title: _this.editor_$.find(".Rk-Edit-Title").val(),
uri: _this.editor_$.find(".Rk-Edit-URI").val()
@@ -580,7 +595,7 @@
Rkns.Renderer.NodeEditButton.prototype._init = function() {
this.renderer.node_layer.activate();
this.type = "Node-edit-button";
- this.sector = Rkns.Renderer.Utils.sector(this, 1 + Rkns._NODE_RADIUS, 3 * Rkns._NODE_RADIUS, - 90, 30, 2, 'img/edit.png');
+ this.sector = Rkns.Renderer.Utils.sector(this, 1 + Rkns.Renderer._NODE_RADIUS, 3 * Rkns.Renderer._NODE_RADIUS, - 90, 30, 2, 'img/edit.png');
}
Rkns.Renderer.NodeEditButton.prototype.moveTo = function(_pos) {
@@ -623,7 +638,7 @@
Rkns.Renderer.NodeRemoveButton.prototype._init = function() {
this.renderer.node_layer.activate();
this.type = "Node-remove-button";
- this.sector = Rkns.Renderer.Utils.sector(this, 1 + Rkns._NODE_RADIUS, 3 * Rkns._NODE_RADIUS, -210, -90, 2, 'img/remove.png');
+ this.sector = Rkns.Renderer.Utils.sector(this, 1 + Rkns.Renderer._NODE_RADIUS, 3 * Rkns.Renderer._NODE_RADIUS, -210, -90, 2, 'img/remove.png');
}
Rkns.Renderer.NodeRemoveButton.prototype.moveTo = function(_pos) {
@@ -666,7 +681,7 @@
Rkns.Renderer.NodeLinkButton.prototype._init = function() {
this.renderer.node_layer.activate();
this.type = "Node-link-button";
- this.sector = Rkns.Renderer.Utils.sector(this, 1 + Rkns._NODE_RADIUS , 3 * Rkns._NODE_RADIUS, 30, 150, 2, 'img/link.png');
+ this.sector = Rkns.Renderer.Utils.sector(this, 1 + Rkns.Renderer._NODE_RADIUS , 3 * Rkns.Renderer._NODE_RADIUS, 30, 150, 2, 'img/link.png');
}
Rkns.Renderer.NodeLinkButton.prototype.moveTo = function(_pos) {
@@ -703,7 +718,7 @@
Rkns.Renderer.EdgeEditButton.prototype._init = function() {
this.renderer.edge_layer.activate();
this.type = "Edge-edit-button";
- this.sector = Rkns.Renderer.Utils.sector(this, 5 , 2 * Rkns._NODE_RADIUS, - 60, 60, 2, 'img/edit.png');
+ this.sector = Rkns.Renderer.Utils.sector(this, 5 , 2 * Rkns.Renderer._NODE_RADIUS, - 60, 60, 2, 'img/edit.png');
}
Rkns.Renderer.EdgeEditButton.prototype.moveTo = function(_pos) {
@@ -745,7 +760,7 @@
Rkns.Renderer.EdgeRemoveButton.prototype._init = function() {
this.renderer.edge_layer.activate();
this.type = "Edge-remove-button";
- this.sector = Rkns.Renderer.Utils.sector(this, 5, 2 * Rkns._NODE_RADIUS, - 240, -120, 2, 'img/remove.png');
+ this.sector = Rkns.Renderer.Utils.sector(this, 5, 2 * Rkns.Renderer._NODE_RADIUS, - 240, -120, 2, 'img/remove.png');
}
Rkns.Renderer.EdgeRemoveButton.prototype.moveTo = function(_pos) {
this.sector.moveTo(_pos);
@@ -783,8 +798,6 @@
Rkns.Renderer.Scene = function(_renkan) {
this.renkan = _renkan;
- this._MARGIN_X = 80;
- this._MARGIN_Y = 50;
this.$ = Rkns.$(".Rk-Render");
this.representations = [];
this.$.html(this.template({
@@ -803,7 +816,7 @@
this.overlay_layer = new paper.Layer();
var _tool = new paper.Tool(),
_this = this;
- _tool.minDistance = Rkns._MIN_DRAG_DISTANCE;
+ _tool.minDistance = Rkns.Renderer._MIN_DRAG_DISTANCE;
_tool.onMouseMove = function(_event) {
_this.onMouseMove(_event);
}
@@ -830,7 +843,7 @@
_this.canvas_$.width(),
_this.canvas_$.height()
]).multiply( .5 * ( 1 - Math.SQRT1_2 ) ).add(_this.offset.multiply( Math.SQRT1_2 ));
- _this.scale *= Math.SQRT1_2;
+ _this.setScale( _this.scale * Math.SQRT1_2 );
_this.redraw();
});
this.editor_$.find(".Rk-ZoomIn").click(function() {
@@ -838,7 +851,7 @@
_this.canvas_$.width(),
_this.canvas_$.height()
]).multiply( .5 * ( 1 - Math.SQRT2 ) ).add(_this.offset.multiply( Math.SQRT2 ));
- _this.scale *= Math.SQRT2;
+ _this.setScale( _this.scale * Math.SQRT2 );
_this.redraw();
});
paper.view.onResize = function(_event) {
@@ -871,6 +884,11 @@
+ '</div>'
);
+Rkns.Renderer.Scene.prototype.setScale = function(_newScale) {
+ this.scale = _newScale;
+ this.redraw();
+}
+
Rkns.Renderer.Scene.prototype.autoScale = function() {
if (this.renkan.project.get("nodes").length) {
var _xx = this.renkan.project.get("nodes").map(function(_node) { return _node.get("position").x }),
@@ -879,9 +897,9 @@
_miny = Math.min.apply(Math, _yy),
_maxx = Math.max.apply(Math, _xx),
_maxy = Math.max.apply(Math, _yy);
- this.scale = Math.min((paper.view.size.width - 2 * this._MARGIN_X) / (_maxx - _minx), (paper.view.size.height - 2 * this._MARGIN_Y) / (_maxy - _miny));
- this.offset = paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(this.scale));
- this.redraw();
+ var _scale = Math.min((paper.view.size.width - 2 * Rkns.Renderer._MARGIN_X) / (_maxx - _minx), (paper.view.size.height - 2 * Rkns.Renderer._MARGIN_Y) / (_maxy - _miny));
+ this.offset = paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(_scale));
+ this.setScale(_scale);
}
}
@@ -1049,10 +1067,10 @@
]).subtract(this.offset).multiply( Math.SQRT2 - 1 );
if (this.totalScroll > 0) {
this.offset = this.offset.subtract(_delta);
- this.scale *= Math.SQRT2;
+ this.setScale( this.scale * Math.SQRT2 );
} else {
this.offset = this.offset.add(_delta.divide( Math.SQRT2 ));
- this.scale *= Math.SQRT1_2;
+ this.setScale( this.scale * Math.SQRT1_2);
}
this.totalScroll = 0;
this.redraw();