diff -r 399690e161cc -r 4423bfcd8f9f client/js/paper-renderer.js
--- a/client/js/paper-renderer.js	Thu Aug 16 16:04:54 2012 +0200
+++ b/client/js/paper-renderer.js	Thu Aug 16 17:23:45 2012 +0200
@@ -44,8 +44,7 @@
             top: (this._EDITOR_PADDING + _top)
         }
     },
-    sector : function(_inR, _outR, _startAngle, _endAngle, _padding, _imgsrc) {
-        _path = new paper.Path();
+    sector : function(_ctrl, _inR, _outR, _startAngle, _endAngle, _padding, _imgsrc) {
         var _startRads = _startAngle * Math.PI / 180,
             _endRads = _endAngle * Math.PI / 180,
             _img = new Image(),
@@ -90,23 +89,52 @@
             _segments.push([[_x, _y], [ _kout * _dx, _kout * _dy], [ - _kout * _dx, - _kout * _dy ]]);
         }
         _segments.push([[_startXOut, _startYOut], [ _kout * _startdx, _kout * _startdy ], [0, 0]]);
+        var _path = new paper.Path();
         _path.add.apply(_path, _segments);
         _path.fillColor = "#333333";
         _path.opacity = .5;
         _path.closed = true;
-        var _grp = new paper.Group([_path]),
-            _res = {
-                group: _grp,
-                circle: _path,
-                delta: new paper.Point(0,0),
-                img: _img,
-                imgdelta: new paper.Point([_centerX, _centerY])
+        _path.__controller = _ctrl;
+        var _visible = false,
+            _restPos = new paper.Point(-200, -200),
+            _grp = new paper.Group([_path]),
+            _delta = _grp.position,
+            _imgdelta = new paper.Point([_centerX, _centerY]),
+            _currentPos = new paper.Point(0,0);
+        _grp.visible = false;
+        _grp.position = _restPos;
+        var _res = {
+            show: function() {
+                _visible = true;
+                _grp.position = _currentPos.add(_delta);
+                _grp.visible = true;
+            },
+            moveTo: function(_point) {
+                _currentPos = _point;
+                if (_visible) {
+                    _grp.position = _point.add(_delta);
+                }
+            },
+            hide: function() {
+                _visible = false;
+                _grp.visible = false;
+                _grp.position = _restPos;
+            },
+            select: function() {
+                _path.opacity = .8;
+            },
+            unselect: function() {
+                _path.opacity = .5;
+            },
+            destroy: function() {
+                _grp.remove();
             }
+        }
         _img.onload = function() {
             var _w = _img.width,
                 _h = _img.height;
             var _raster = new paper.Raster(_img);
-            _raster.position = _res.imgdelta.add(_grp.position).subtract(_res.delta);
+            _raster.position = _imgdelta.add(_grp.position).subtract(_delta);
             _grp.addChild(_raster);
         }
         _img.src = _imgsrc;
@@ -250,7 +278,8 @@
         _p1o = this.to_node_controller.paper_coords,
         _v = _p1o.subtract(_p0o),
         _r = _v.length,
-        _delta = new paper.Point([- _v.y, _v.x]).multiply( 4 / _r ),
+        _u = _v.divide(_r),
+        _delta = new paper.Point([- _u.y, _u.x]).multiply( 4 ),
         _p0 = _p0o.add(_delta), /* Adding a 4 px difference */
         _p1 = _p1o.add(_delta), /* to differentiate inbound and outbound links */
         _a = _v.angle,
@@ -261,7 +290,7 @@
     this.line.segments[1].point = _p1;
     this.arrow.rotate(_a - this.arrow_angle);
     this.arrow.fillColor = _color;
-    this.arrow.position = this.paper_coords;
+    this.arrow.position = this.paper_coords.subtract(_u.multiply(4));
     this.arrow_angle = _a;
     if (_a > 90) {
         _a -= 180;
@@ -277,6 +306,13 @@
     this.remove_button.moveTo(this.paper_coords);
 }
 
+Rkns.Renderer.Edge.prototype.openEditor = function() {
+    this._renderer.removeControllersOfType("editor");
+    var _editor = this._renderer.addController("EdgeEditor",{});
+    _editor.edge_controller = this;
+    _editor.redraw();
+}
+
 Rkns.Renderer.Edge.prototype.select = function() {
     this.line.strokeWidth = 3;
     this.edit_button.show();
@@ -293,10 +329,7 @@
 
 Rkns.Renderer.Edge.prototype.mouseup = function(_event) {
     if (!this._renderer.is_dragging) {
-        this._renderer.removeControllersOfType("editor");
-        var _editor = this._renderer.addController("EdgeEditor",{});
-        _editor.edge_controller = this;
-        _editor.redraw();
+        this.openEditor();
     }
 }
 
@@ -514,41 +547,27 @@
 Rkns.Renderer.NodeEditButton.prototype._init = function() {
     this._renderer.node_layer.activate();
     this.type = "node-edit-button";
-    this.sector = Rkns.Renderer.Utils.sector(1 + Rkns._NODE_RADIUS, 3 * Rkns._NODE_RADIUS, - 90, 30, 2, 'img/edit.png');
-    this.sector.group.visible = false;
-    this.sector.group.opacity = .5;
-    this.sector.circle.__controller = this;
-    this.sector.delta = this.sector.group.position;
-    this.visible = false;
-    this.actual_position = new paper.Point([-100,-100]);
-    this.sector.group.position = this.actual_position;
+    this.sector = Rkns.Renderer.Utils.sector(this, 1 + Rkns._NODE_RADIUS, 3 * Rkns._NODE_RADIUS, - 90, 30, 2, 'img/edit.png');
 }
 
 Rkns.Renderer.NodeEditButton.prototype.moveTo = function(_pos) {
-    if (this.visible) {
-        this.sector.group.position = this.sector.delta.add(_pos);
-    }
-    this.actual_position = _pos;
+    this.sector.moveTo(_pos);
 }
 
 Rkns.Renderer.NodeEditButton.prototype.show = function() {
-    this.visible = true;
-    this.sector.group.position = this.sector.delta.add(this.actual_position);
-    this.sector.group.visible = true;
+    this.sector.show();
 }
 
 Rkns.Renderer.NodeEditButton.prototype.hide = function() {
-    this.visible = false;
-    this.sector.group.position = new paper.Point([-100,-100]);
-    this.sector.group.visible = false;
+    this.sector.hide();
 }
 
 Rkns.Renderer.NodeEditButton.prototype.select = function() {
-    this.sector.group.opacity = .8;
+    this.sector.select();
 }
 
 Rkns.Renderer.NodeEditButton.prototype.unselect = function() {
-    this.sector.group.opacity = .5;
+    this.sector.unselect();
     this.hide();
     this.node_controller.remove_button.hide();
     this.node_controller.link_button.hide();
@@ -561,7 +580,7 @@
 }
 
 Rkns.Renderer.NodeEditButton.prototype.destroy = function() {
-    this.sector.group.remove();
+    this.sector.destroy();
 }
 
 /* */
@@ -571,31 +590,27 @@
 Rkns.Renderer.NodeRemoveButton.prototype._init = function() {
     this._renderer.node_layer.activate();
     this.type = "node-remove-button";
-    this.sector = Rkns.Renderer.Utils.sector(1 + Rkns._NODE_RADIUS, 3 * Rkns._NODE_RADIUS, -210, -90, 2, 'img/remove.png');
-    this.sector.group.visible = false;
-    this.sector.group.opacity = .5;
-    this.sector.circle.__controller = this;
-    this.sector.delta = this.sector.group.position;
+    this.sector = Rkns.Renderer.Utils.sector(this, 1 + Rkns._NODE_RADIUS, 3 * Rkns._NODE_RADIUS, -210, -90, 2, 'img/remove.png');
 }
 
 Rkns.Renderer.NodeRemoveButton.prototype.moveTo = function(_pos) {
-    this.sector.group.position = this.sector.delta.add(_pos);
+    this.sector.moveTo(_pos);
 }
 
 Rkns.Renderer.NodeRemoveButton.prototype.show = function() {
-    this.sector.group.visible = true;
+    this.sector.show();
 }
 
 Rkns.Renderer.NodeRemoveButton.prototype.hide = function() {
-    this.sector.group.visible = false;
+    this.sector.hide();
 }
 
 Rkns.Renderer.NodeRemoveButton.prototype.select = function() {
-    this.sector.group.opacity = .8;
+    this.sector.select();
 }
 
 Rkns.Renderer.NodeRemoveButton.prototype.unselect = function() {
-    this.sector.group.opacity = .5;
+    this.sector.unselect();
     this.hide();
     this.node_controller.edit_button.hide();
     this.node_controller.link_button.hide();
@@ -608,7 +623,7 @@
 }
 
 Rkns.Renderer.NodeRemoveButton.prototype.destroy = function() {
-    this.sector.group.remove();
+    this.sector.destroy();
 }
 
 /* */
@@ -618,38 +633,34 @@
 Rkns.Renderer.NodeLinkButton.prototype._init = function() {
     this._renderer.node_layer.activate();
     this.type = "node-link-button";
-    this.sector = Rkns.Renderer.Utils.sector(1 + Rkns._NODE_RADIUS , 3 * Rkns._NODE_RADIUS, 30, 150, 2, 'img/link.png');
-    this.sector.group.visible = false;
-    this.sector.group.opacity = .5;
-    this.sector.circle.__controller = this;
-    this.sector.delta = this.sector.group.position;
+    this.sector = Rkns.Renderer.Utils.sector(this, 1 + Rkns._NODE_RADIUS , 3 * Rkns._NODE_RADIUS, 30, 150, 2, 'img/link.png');
 }
 
 Rkns.Renderer.NodeLinkButton.prototype.moveTo = function(_pos) {
-    this.sector.group.position = this.sector.delta.add(_pos);
+    this.sector.moveTo(_pos);
 }
 
 Rkns.Renderer.NodeLinkButton.prototype.show = function() {
-    this.sector.group.visible = true;
+    this.sector.show();
 }
 
 Rkns.Renderer.NodeLinkButton.prototype.hide = function() {
-    this.sector.group.visible = false;
+    this.sector.hide();
 }
 
 Rkns.Renderer.NodeLinkButton.prototype.select = function() {
-    this.sector.group.opacity = .8;
+    this.sector.select();
 }
 
 Rkns.Renderer.NodeLinkButton.prototype.unselect = function() {
-    this.sector.group.opacity = .5;
+    this.sector.unselect();
     this.hide();
     this.node_controller.edit_button.hide();
     this.node_controller.remove_button.hide();
 }
 
 Rkns.Renderer.NodeLinkButton.prototype.destroy = function() {
-    this.sector.group.remove();
+    this.sector.destroy();
 }
 
 /* */
@@ -659,31 +670,27 @@
 Rkns.Renderer.EdgeEditButton.prototype._init = function() {
     this._renderer.edge_layer.activate();
     this.type = "edge-edit-button";
-    this.sector = Rkns.Renderer.Utils.sector(5 , 2 * Rkns._NODE_RADIUS, - 90, 90, 2, 'img/edit.png');
-    this.sector.group.visible = false;
-    this.sector.group.opacity = .5;
-    this.sector.circle.__controller = this;
-    this.sector.delta = this.sector.group.position;
+    this.sector = Rkns.Renderer.Utils.sector(this, 5 , 2 * Rkns._NODE_RADIUS, - 60, 60, 2, 'img/edit.png');
 }
 
 Rkns.Renderer.EdgeEditButton.prototype.moveTo = function(_pos) {
-    this.sector.group.position = this.sector.delta.add(_pos);
+    this.sector.moveTo(_pos);
 }
 
 Rkns.Renderer.EdgeEditButton.prototype.show = function() {
-    this.sector.group.visible = true;
+    this.sector.show();
 }
 
 Rkns.Renderer.EdgeEditButton.prototype.hide = function() {
-    this.sector.group.visible = false;
+    this.sector.hide();
 }
 
 Rkns.Renderer.EdgeEditButton.prototype.select = function() {
-    this.sector.group.opacity = .8;
+    this.sector.select();
 }
 
 Rkns.Renderer.EdgeEditButton.prototype.unselect = function() {
-    this.sector.group.opacity = .5;
+    this.sector.unselect();
     this.hide();
     this.edge_controller.remove_button.hide();
 }
@@ -695,7 +702,7 @@
 }
 
 Rkns.Renderer.EdgeEditButton.prototype.destroy = function() {
-    this.sector.group.remove();
+    this.sector.destroy();
 }
 
 /* */
@@ -705,31 +712,26 @@
 Rkns.Renderer.EdgeRemoveButton.prototype._init = function() {
     this._renderer.edge_layer.activate();
     this.type = "edge-remove-button";
-    this.sector = Rkns.Renderer.Utils.sector(5, 2 * Rkns._NODE_RADIUS, -270, -90, 2, 'img/remove.png');
-    this.sector.group.visible = false;
-    this.sector.group.opacity = .5;
-    this.sector.circle.__controller = this;
-    this.sector.delta = this.sector.group.position;
+    this.sector = Rkns.Renderer.Utils.sector(this, 5, 2 * Rkns._NODE_RADIUS, - 240, -120, 2, 'img/remove.png');
 }
-
 Rkns.Renderer.EdgeRemoveButton.prototype.moveTo = function(_pos) {
-    this.sector.group.position = this.sector.delta.add(_pos);
+    this.sector.moveTo(_pos);
 }
 
 Rkns.Renderer.EdgeRemoveButton.prototype.show = function() {
-    this.sector.group.visible = true;
+    this.sector.show();
 }
 
 Rkns.Renderer.EdgeRemoveButton.prototype.hide = function() {
-    this.sector.group.visible = false;
+    this.sector.hide();
 }
 
 Rkns.Renderer.EdgeRemoveButton.prototype.select = function() {
-    this.sector.group.opacity = .8;
+    this.sector.select();
 }
 
 Rkns.Renderer.EdgeRemoveButton.prototype.unselect = function() {
-    this.sector.group.opacity = .5;
+    this.sector.unselect();
     this.hide();
     this.edge_controller.edit_button.hide();
 }
@@ -741,7 +743,7 @@
 }
 
 Rkns.Renderer.EdgeRemoveButton.prototype.destroy = function() {
-    this.sector.group.remove();
+    this.sector.destroy();
 }
 
 /* */