--- a/client/js/paper-renderer.js	Thu Aug 16 15:12:18 2012 +0200
+++ b/client/js/paper-renderer.js	Thu Aug 16 16:03:52 2012 +0200
@@ -92,6 +92,7 @@
         _segments.push([[_startXOut, _startYOut], [ _kout * _startdx, _kout * _startdy ], [0, 0]]);
         _path.add.apply(_path, _segments);
         _path.fillColor = "#333333";
+        _path.opacity = .5;
         _path.closed = true;
         var _grp = new paper.Group([_path]),
             _res = {
@@ -138,7 +139,6 @@
     this.type = "node";
     this.circle = new paper.Path.Circle([0, 0], Rkns._NODE_RADIUS);
     this.circle.fillColor = '#ffffff';
-    this.circle.opacity = .9;
     this.circle.__controller = this;
     this.title = new paper.PointText([0,0]);
     this.title.characterStyle = {
@@ -239,20 +239,29 @@
     this.text.__controller = this;
     this.text_angle = 0;
     this.arrow_angle = 0;
+    this.edit_button = new Rkns.Renderer.EdgeEditButton(this._renderer, {});
+    this.edit_button.edge_controller = this;
+    this.remove_button = new Rkns.Renderer.EdgeRemoveButton(this._renderer, {});
+    this.remove_button.edge_controller = this;
 }
 
 Rkns.Renderer.Edge.prototype.redraw = function() {
-    var _p0 = this.from_controller.paper_coords,
-        _p1 = this.to_node_controller.paper_coords,
-        _a = _p1.subtract(_p0).angle,
+    var _p0o = this.from_controller.paper_coords,
+        _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 ),
+        _p0 = _p0o.add(_delta), /* Adding a 4 px difference */
+        _p1 = _p1o.add(_delta), /* to differentiate inbound and outbound links */
+        _a = _v.angle,
         _color = this._element.created_by.color;
-    this.edge_paper_coords = _p0.add(_p1).divide(2);
+    this.paper_coords = _p0.add(_p1).divide(2);
     this.line.strokeColor = _color;
     this.line.segments[0].point = _p0;
     this.line.segments[1].point = _p1;
     this.arrow.rotate(_a - this.arrow_angle);
     this.arrow.fillColor = _color;
-    this.arrow.position = this.edge_paper_coords;
+    this.arrow.position = this.paper_coords;
     this.arrow_angle = _a;
     if (_a > 90) {
         _a -= 180;
@@ -262,15 +271,23 @@
     }
     this.text.rotate(_a - this.text_angle);
     this.text.content = this._element.title;
-    this.text.position = this.edge_paper_coords;
+    this.text.position = this.paper_coords;
     this.text_angle = _a;
+    this.edit_button.moveTo(this.paper_coords);
+    this.remove_button.moveTo(this.paper_coords);
 }
 
 Rkns.Renderer.Edge.prototype.select = function() {
     this.line.strokeWidth = 3;
+    this.edit_button.show();
+    this.remove_button.show();
 }
 
 Rkns.Renderer.Edge.prototype.unselect = function(_newTarget) {
+    if (!_newTarget || (_newTarget !== this.edit_button && _newTarget !== this.remove_button)) {
+        this.edit_button.hide();
+        this.remove_button.hide();
+    }
     this.line.strokeWidth = 1;
 }
 
@@ -293,6 +310,8 @@
     this.line.remove();
     this.arrow.remove();
     this.text.remove();
+    this.edit_button.destroy();
+    this.remove_button.destroy();
 }
 
 /* */
@@ -453,7 +472,7 @@
 );
 
 Rkns.Renderer.EdgeEditor.prototype.redraw = function() {
-    var _coords = this.edge_controller.edge_paper_coords,
+    var _coords = this.edge_controller.paper_coords,
         _element = this.edge_controller._element,
         _css = Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 200);
     this.editor_$
@@ -500,17 +519,27 @@
     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;
 }
 
 Rkns.Renderer.NodeEditButton.prototype.moveTo = function(_pos) {
-    this.sector.group.position = this.sector.delta.add(_pos);
+    if (this.visible) {
+        this.sector.group.position = this.sector.delta.add(_pos);
+    }
+    this.actual_position = _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;
 }
 
 Rkns.Renderer.NodeEditButton.prototype.hide = function() {
+    this.visible = false;
+    this.sector.group.position = new paper.Point([-100,-100]);
     this.sector.group.visible = false;
 }
 
@@ -589,7 +618,7 @@
 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 = 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;
@@ -625,6 +654,98 @@
 
 /* */
 
+Rkns.Renderer.EdgeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
+
+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;
+}
+
+Rkns.Renderer.EdgeEditButton.prototype.moveTo = function(_pos) {
+    this.sector.group.position = this.sector.delta.add(_pos);
+}
+
+Rkns.Renderer.EdgeEditButton.prototype.show = function() {
+    this.sector.group.visible = true;
+}
+
+Rkns.Renderer.EdgeEditButton.prototype.hide = function() {
+    this.sector.group.visible = false;
+}
+
+Rkns.Renderer.EdgeEditButton.prototype.select = function() {
+    this.sector.group.opacity = .8;
+}
+
+Rkns.Renderer.EdgeEditButton.prototype.unselect = function() {
+    this.sector.group.opacity = .5;
+    this.hide();
+    this.edge_controller.remove_button.hide();
+}
+
+Rkns.Renderer.EdgeEditButton.prototype.mouseup = function() {
+    if (!this._renderer.is_dragging) {
+        this.edge_controller.openEditor();
+    }
+}
+
+Rkns.Renderer.EdgeEditButton.prototype.destroy = function() {
+    this.sector.group.remove();
+}
+
+/* */
+
+Rkns.Renderer.EdgeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
+
+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;
+}
+
+Rkns.Renderer.EdgeRemoveButton.prototype.moveTo = function(_pos) {
+    this.sector.group.position = this.sector.delta.add(_pos);
+}
+
+Rkns.Renderer.EdgeRemoveButton.prototype.show = function() {
+    this.sector.group.visible = true;
+}
+
+Rkns.Renderer.EdgeRemoveButton.prototype.hide = function() {
+    this.sector.group.visible = false;
+}
+
+Rkns.Renderer.EdgeRemoveButton.prototype.select = function() {
+    this.sector.group.opacity = .8;
+}
+
+Rkns.Renderer.EdgeRemoveButton.prototype.unselect = function() {
+    this.sector.group.opacity = .5;
+    this.hide();
+    this.edge_controller.edit_button.hide();
+}
+
+Rkns.Renderer.EdgeRemoveButton.prototype.mouseup = function() {
+    if (confirm('Do you really wish to remove edge "' + this.edge_controller._element.title + '"?')) {
+        this._renderer._project.removeEdge(this.edge_controller._element, Rkns._RENDER_AND_SAVE);
+    }
+}
+
+Rkns.Renderer.EdgeRemoveButton.prototype.destroy = function() {
+    this.sector.group.remove();
+}
+
+/* */
+
 Rkns.Renderer.Scene = function(_project) {
     this._project = _project;
     this._MARGIN_X = 80;