diff -r 2fad193bae98 -r 805d85b3f390 client/js/paper-renderer.js
--- 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();