diff -r a7b54105f74e -r ae86ecebb1be client/js/paper-renderer.js
--- a/client/js/paper-renderer.js	Mon Jul 30 18:44:59 2012 +0200
+++ b/client/js/paper-renderer.js	Tue Jul 31 18:00:13 2012 +0200
@@ -1,6 +1,6 @@
-Rkns.Renderers.Paper = Rkns.Utils.inherit(Rkns.Renderers._Base);
+Rkns.Renderer = {}
 
-Rkns.Renderers.Paper__Utils = {
+Rkns.Renderer.Utils = {
     _EDITOR_ARROW_LENGTH : 20,
     _EDITOR_ARROW_WIDTH : 40,
     _EDITOR_MARGIN : 15,
@@ -43,12 +43,77 @@
             left: (this._EDITOR_PADDING + Math.min(_left, _right)),
             top: (this._EDITOR_PADDING + _top)
         }
+    },
+    sector : function(_inR, _outR, _startAngle, _endAngle, _padding, _imgsrc) {
+        _path = new paper.Path();
+        var _startRads = _startAngle * Math.PI / 180,
+            _endRads = _endAngle * Math.PI / 180,
+            _img = new Image(),
+            _span = _endRads - _startRads,
+            _k = .0879 * _span,
+            _kin = _k * _inR,
+            _kout = _k * _outR,
+            _startdx = - Math.sin(_startRads),
+            _startdy = Math.cos(_startRads),
+            _startXIn = Math.cos(_startRads) * _inR + _padding * _startdx,
+            _startYIn = Math.sin(_startRads) * _inR + _padding * _startdy,
+            _startXOut = Math.cos(_startRads) * _outR + _padding * _startdx,
+            _startYOut = Math.sin(_startRads) * _outR + _padding * _startdy,
+            _enddx = - Math.sin(_endRads),
+            _enddy = Math.cos(_endRads),
+            _endXIn = Math.cos(_endRads) * _inR - _padding * _enddx,
+            _endYIn = Math.sin(_endRads) * _inR - _padding * _enddy,
+            _endXOut = Math.cos(_endRads) * _outR - _padding * _enddx,
+            _endYOut = Math.sin(_endRads) * _outR - _padding * _enddy,
+            _centerR = (_inR + _outR)/2,
+            _centerRads = (_startRads + _endRads) / 2,
+            _centerX = Math.cos(_centerRads) * _centerR,
+            _centerY = Math.sin(_centerRads) * _centerR,
+            _segments = [];
+        _segments.push([[_startXIn, _startYIn], [0, 0], [ _kin * _startdx, _kin * _startdy ]]);
+        for (var i = 1; i < 4; i++) {
+            var _rads = i * _span / 4 + _startRads,
+                _dx = - Math.sin(_rads),
+                _dy = Math.cos(_rads),
+                _x = Math.cos(_rads) * _inR,
+                _y = Math.sin(_rads) * _inR;
+            _segments.push([[_x, _y], [ - _kin * _dx, - _kin * _dy], [ _kin * _dx, _kin * _dy ]]);
+        }
+        _segments.push([[_endXIn, _endYIn], [ - _kin * _enddx, - _kin * _enddy ], [0,0]]);
+        _segments.push([[_endXOut, _endYOut], [ 0,0 ], [ - _kout * _enddx, - _kout * _enddy ]]);
+        for (var i = 3; i > 0; i--) {
+            var _rads = i * _span / 4 + _startRads,
+                _dx = - Math.sin(_rads),
+                _dy = Math.cos(_rads),
+                _x = Math.cos(_rads) * _outR,
+                _y = Math.sin(_rads) * _outR;
+            _segments.push([[_x, _y], [ _kout * _dx, _kout * _dy], [ - _kout * _dx, - _kout * _dy ]]);
+        }
+        _segments.push([[_startXOut, _startYOut], [ _kout * _startdx, _kout * _startdy ], [0, 0]]);
+        _path.add.apply(_path, _segments);
+        _path.fillColor = "#333333";
+        _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])
+            }
+        _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);
+            _grp.addChild(_raster);
+        }
+        _img.src = _imgsrc;
+        return _res
     }
 }
 
-Rkns.Renderers.Paper__Controllers = {}
-
-Rkns.Renderers.Paper__Controllers._Base = function(_renderer, _element) {
+Rkns.Renderer._BaseController = function(_renderer, _element) {
     if (typeof _renderer !== "undefined") {
         this.id = Rkns.Utils.getUID('controller');
         this._renderer = _renderer;
@@ -58,40 +123,49 @@
     }
 }
 
-Rkns.Renderers.Paper__Controllers._Base.prototype.select = function() {}
+Rkns.Renderer._BaseController.prototype.select = function() {}
 
-Rkns.Renderers.Paper__Controllers._Base.prototype.unselect = function() {}
+Rkns.Renderer._BaseController.prototype.unselect = function() {}
+
+Rkns.Renderer._BaseController.prototype.mouseup = function() {}
 
-Rkns.Renderers.Paper__Controllers._Base.prototype.destroy = function() {}
+Rkns.Renderer._BaseController.prototype.destroy = function() {}
 
-Rkns.Renderers.Paper__Controllers.Node = Rkns.Utils.inherit(Rkns.Renderers.Paper__Controllers._Base);
+Rkns.Renderer.Node = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
 
-Rkns.Renderers.Paper__Controllers.Node.prototype._init = function() {
+Rkns.Renderer.Node.prototype._init = function() {
     this._renderer.node_layer.activate();
     this.type = "node";
-    this.node_circle = new paper.Path.Circle([0, 0], Rkns._NODE_RADIUS);
-    this.node_circle.fillColor = '#ffffff';
-    this.node_circle.__controller = this;
-    this.node_text = new paper.PointText([0,0]);
-    this.node_text.characterStyle = {
+    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 = {
         fontSize: Rkns._NODE_FONT_SIZE,
         fillColor: 'black'
     };
-    this.node_text.paragraphStyle.justification = 'center';
-    this.node_text.__controller = this;
+    this.edit_button = new Rkns.Renderer.NodeEditButton(this._renderer, {});
+    this.edit_button.node_controller = this;
+    this.remove_button = new Rkns.Renderer.NodeRemoveButton(this._renderer, {});
+    this.remove_button.node_controller = this;
+    this.title.paragraphStyle.justification = 'center';
+    this.title.__controller = this;
 }
 
-Rkns.Renderers.Paper__Controllers.Node.prototype.redraw = function() {
-    this.node_model_coords = new paper.Point(this._element.position);
-    this.node_paper_coords = this._renderer.toPaperCoords(this.node_model_coords);
-    this.node_circle.position = this.node_paper_coords;
-    this.node_text.content = this._element.title;
-    this.node_text.position = this.node_paper_coords.add([0, 2 * Rkns._NODE_RADIUS]);
-    this.node_circle.strokeColor = this._element.created_by.color;
+Rkns.Renderer.Node.prototype.redraw = function() {
+    var _model_coords = new paper.Point(this._element.position);
+    this.paper_coords = this._renderer.toPaperCoords(_model_coords);
+    this.circle.position = this.paper_coords;
+    this.title.content = this._element.title;
+    this.title.position = this.paper_coords.add([0, 2 * Rkns._NODE_RADIUS]);
+    this.circle.strokeColor = this._element.created_by.color;
+    this.edit_button.moveTo(this.paper_coords);
+    this.remove_button.moveTo(this.paper_coords);
 }
 
-Rkns.Renderers.Paper__Controllers.Node.prototype.paperShift = function(_delta) {
-    var _coords = this._renderer.toModelCoords(this.node_paper_coords.add(_delta)),
+Rkns.Renderer.Node.prototype.paperShift = function(_delta) {
+    var _coords = this._renderer.toModelCoords(this.paper_coords.add(_delta)),
         _data = {
             position: {
                 x: _coords.x,
@@ -102,123 +176,160 @@
     this._renderer.redraw();
 }
 
-Rkns.Renderers.Paper__Controllers.Node.prototype.select = function(_delta) {
-    this.node_circle.strokeWidth = 3;
+Rkns.Renderer.Node.prototype.select = function() {
+    this.circle.strokeWidth = 3;
+    this.edit_button.show();
+    this.remove_button.show();
+}
+
+Rkns.Renderer.Node.prototype.unselect = function(_newTarget) {
+    if (!_newTarget || (_newTarget !== this.edit_button && _newTarget !== this.remove_button)) {
+        this.edit_button.hide();
+        this.remove_button.hide();
+    }
+    this.circle.strokeWidth = 1;
 }
 
-Rkns.Renderers.Paper__Controllers.Node.prototype.unselect = function(_delta) {
-    this.node_circle.strokeWidth = 1;
+Rkns.Renderer.Node.prototype.mouseup = function(_event) {
+    if (!this._renderer.is_dragging) {
+        this._renderer.removeControllersOfType("editor");
+        var _editor = this._renderer.addController("NodeEditor",{});
+        _editor.node_controller = this;
+        _editor.redraw();
+    }
+}
+
+Rkns.Renderer.Node.prototype.destroy = function(_event) {
+    this.edit_button.destroy();
+    this.remove_button.destroy();
+    this.circle.remove();
+    this.title.remove();
 }
 
 /* */
 
-Rkns.Renderers.Paper__Controllers.Edge = Rkns.Utils.inherit(Rkns.Renderers.Paper__Controllers._Base);
+Rkns.Renderer.Edge = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
 
-Rkns.Renderers.Paper__Controllers.Edge.prototype._init = function() {
+Rkns.Renderer.Edge.prototype._init = function() {
     this._renderer.edge_layer.activate();
     this.type = "edge";
-    this.from_node_controller = this._element.from.__controller;
+    this.from_controller = this._element.from.__controller;
     this.to_node_controller = this._element.to.__controller;
-    this.edge_line = new paper.Path();
-    this.edge_line.add([0,0],[0,0]);
-    this.edge_line.__controller = this;
-    this.edge_arrow = new paper.Path();
-    this.edge_arrow.add([0,0],[Rkns._ARROW_LENGTH,Rkns._ARROW_WIDTH / 2],[0,Rkns._ARROW_WIDTH]);
-    this.edge_arrow.__controller = this;
-    this.edge_text = new paper.PointText();
-    this.edge_text.characterStyle = {
+    this.line = new paper.Path();
+    this.line.add([0,0],[0,0]);
+    this.line.__controller = this;
+    this.arrow = new paper.Path();
+    this.arrow.add([0,0],[Rkns._ARROW_LENGTH,Rkns._ARROW_WIDTH / 2],[0,Rkns._ARROW_WIDTH]);
+    this.arrow.__controller = this;
+    this.text = new paper.PointText();
+    this.text.characterStyle = {
         fontSize: Rkns._EDGE_FONT_SIZE,
         fillColor: 'black'
     };
-    this.edge_text.paragraphStyle.justification = 'center';
-    this.edge_text.__controller = this;
-    this.edge_text_angle = 0;
-    this.edge_arrow_angle = 0;
+    this.text.paragraphStyle.justification = 'center';
+    this.text.__controller = this;
+    this.text_angle = 0;
+    this.arrow_angle = 0;
 }
 
-Rkns.Renderers.Paper__Controllers.Edge.prototype.redraw = function() {
-    var _p0 = this.from_node_controller.node_paper_coords,
-        _p1 = this.to_node_controller.node_paper_coords,
+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,
         _color = this._element.created_by.color;
     this.edge_paper_coords = _p0.add(_p1).divide(2);
-    this.edge_line.strokeColor = _color;
-    this.edge_line.segments[0].point = _p0;
-    this.edge_line.segments[1].point = _p1;
-    this.edge_arrow.rotate(_a - this.edge_arrow_angle);
-    this.edge_arrow.fillColor = _color;
-    this.edge_arrow.position = this.edge_paper_coords;
-    this.edge_arrow_angle = _a;
+    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_angle = _a;
     if (_a > 90) {
         _a -= 180;
     }
     if (_a < -90) {
         _a += 180;
     }
-    this.edge_text.rotate(_a - this.edge_text_angle);
-    this.edge_text.content = this._element.title;
-    this.edge_text.position = this.edge_paper_coords;
-    this.edge_text_angle = _a;
+    this.text.rotate(_a - this.text_angle);
+    this.text.content = this._element.title;
+    this.text.position = this.edge_paper_coords;
+    this.text_angle = _a;
+}
+
+Rkns.Renderer.Edge.prototype.select = function() {
+    this.line.strokeWidth = 3;
+}
+
+Rkns.Renderer.Edge.prototype.unselect = function(_newTarget) {
+    this.line.strokeWidth = 1;
 }
 
-Rkns.Renderers.Paper__Controllers.Edge.prototype.select = function(_delta) {
-    this.edge_line.strokeWidth = 3;
+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();
+    }
 }
 
-Rkns.Renderers.Paper__Controllers.Edge.prototype.unselect = function(_delta) {
-    this.edge_line.strokeWidth = 1;
+Rkns.Renderer.Edge.prototype.paperShift = function(_delta) {
+    this.from_controller.paperShift(_delta);
+    this.to_node_controller.paperShift(_delta);
+    this._renderer.redraw();
 }
 
-Rkns.Renderers.Paper__Controllers.Edge.prototype.paperShift = function(_delta) {
-    this.from_node_controller.paperShift(_delta);
-    this.to_node_controller.paperShift(_delta);
-    this._renderer.redraw();
+Rkns.Renderer.Edge.prototype.destroy = function() {
+    this.line.remove();
+    this.arrow.remove();
+    this.text.remove();
 }
 
 /* */
 
-Rkns.Renderers.Paper__Controllers.TempEdge = Rkns.Utils.inherit(Rkns.Renderers.Paper__Controllers._Base);
+Rkns.Renderer.TempEdge = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
 
-Rkns.Renderers.Paper__Controllers.TempEdge.prototype._init = function() {
+Rkns.Renderer.TempEdge.prototype._init = function() {
     this._renderer.edge_layer.activate();
     this.type = "temp-edge";
     var _color = this._project.current_user.color;
-    this.edge_line = new paper.Path();
-    this.edge_line.strokeColor = _color;
-    this.edge_line.add([0,0],[0,0]);
-    this.edge_line.__controller = this;
-    this.edge_arrow = new paper.Path();
-    this.edge_arrow.fillColor = _color;
-    this.edge_arrow.add([0,0],[Rkns._ARROW_LENGTH,Rkns._ARROW_WIDTH / 2],[0,Rkns._ARROW_WIDTH]);
-    this.edge_arrow.__controller = this;
-    this.edge_arrow_angle = 0;
+    this.line = new paper.Path();
+    this.line.strokeColor = _color;
+    this.line.add([0,0],[0,0]);
+    this.line.__controller = 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.__controller = this;
+    this.arrow_angle = 0;
 }
 
-Rkns.Renderers.Paper__Controllers.TempEdge.prototype.redraw = function() {
-    var _p0 = this.from_node_controller.node_paper_coords,
+Rkns.Renderer.TempEdge.prototype.redraw = function() {
+    var _p0 = this.from_controller.paper_coords,
         _p1 = this.end_pos,
         _a = _p1.subtract(_p0).angle,
         _c = _p0.add(_p1).divide(2);
-    this.edge_line.segments[0].point = _p0;
-    this.edge_line.segments[1].point = _p1;
-    this.edge_arrow.rotate(_a - this.edge_arrow_angle);
-    this.edge_arrow.position = _c;
-    this.edge_arrow_angle = _a;
+    this.line.segments[0].point = _p0;
+    this.line.segments[1].point = _p1;
+    this.arrow.rotate(_a - this.arrow_angle);
+    this.arrow.position = _c;
+    this.arrow_angle = _a;
 }
 
-Rkns.Renderers.Paper__Controllers.TempEdge.prototype.paperShift = function(_delta) {
+Rkns.Renderer.TempEdge.prototype.paperShift = function(_delta) {
     this.end_pos = this.end_pos.add(_delta);
     this._renderer.onMouseMove({point: this.end_pos});
     this.redraw();
 }
 
-Rkns.Renderers.Paper__Controllers.TempEdge.prototype.finishEdge = function(_event) {
+Rkns.Renderer.TempEdge.prototype.mouseup = function(_event) {
     var _hitResult = paper.project.hitTest(_event.point);
     if (_hitResult && typeof _hitResult.item.__controller !== "undefined") {
         var _target = _hitResult.item.__controller;
-        if (_target.type === "node" && this.from_node_controller._element.id !== _target._element.id) {
+        if (_target.type === "node" && this.from_controller._element.id !== _target._element.id) {
             this._project.addEdge({
-                from: this.from_node_controller._element.id,
+                from: this.from_controller._element.id,
                 to: _target._element.id
             }, Rkns._RENDER_AND_SAVE)
         }
@@ -226,16 +337,16 @@
     this._renderer.removeController(this);
 }
 
-Rkns.Renderers.Paper__Controllers.TempEdge.prototype.destroy = function() {
-    this.edge_arrow.remove();
-    this.edge_line.remove();
+Rkns.Renderer.TempEdge.prototype.destroy = function() {
+    this.arrow.remove();
+    this.line.remove();
 }
 
 /* */
 
-Rkns.Renderers.Paper__Controllers.NodeEditor = Rkns.Utils.inherit(Rkns.Renderers.Paper__Controllers._Base);
+Rkns.Renderer.NodeEditor = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
 
-Rkns.Renderers.Paper__Controllers.NodeEditor.prototype._init = function() {
+Rkns.Renderer.NodeEditor.prototype._init = function() {
     this._renderer.overlay_layer.activate();
     this.type = "editor";
     this.editor_block = new paper.Path();
@@ -254,7 +365,7 @@
         .hide();
 }
 
-Rkns.Renderers.Paper__Controllers.NodeEditor.prototype.template = Rkns._.template(
+Rkns.Renderer.NodeEditor.prototype.template = Rkns._.template(
     '<h2><span class="Rk-CloseX">&times;</span><%=l10n.edit_node%></span></h2>'
     + '<p><label><%=l10n.edit_title%></label><input class="Rk-Edit-Title" type="text" value="<%=node.title%>"/></p>'
     + '<p><label><%=l10n.edit_uri%></label><input class="Rk-Edit-URI" type="text" value="<%=node.uri%>"/></p>'
@@ -262,10 +373,10 @@
     + '<p><label><%=l10n.created_by%></label> <span class="Rk-UserColor" style="background:<%=node.created_by.color%>;"></span> <%=node.created_by.title%></p>'
 );
 
-Rkns.Renderers.Paper__Controllers.NodeEditor.prototype.redraw = function() {
-    var _coords = this.node_controller.node_paper_coords,
+Rkns.Renderer.NodeEditor.prototype.redraw = function() {
+    var _coords = this.node_controller.paper_coords,
         _element = this.node_controller._element,
-        _css = Rkns.Renderers.Paper__Utils.drawEditBox(_coords, this.editor_block, 250, 300);
+        _css = Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 300);
     this.editor_$
         .html(this.template({
             node: _element,
@@ -294,17 +405,16 @@
     });
 }
 
-Rkns.Renderers.Paper__Controllers.NodeEditor.prototype.destroy = function() {
+Rkns.Renderer.NodeEditor.prototype.destroy = function() {
     this.editor_block.remove();
     this.editor_$.detach();
 }
 
-
 /* */
 
-Rkns.Renderers.Paper__Controllers.EdgeEditor = Rkns.Utils.inherit(Rkns.Renderers.Paper__Controllers._Base);
+Rkns.Renderer.EdgeEditor = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
 
-Rkns.Renderers.Paper__Controllers.EdgeEditor.prototype._init = function() {
+Rkns.Renderer.EdgeEditor.prototype._init = function() {
     this._renderer.overlay_layer.activate();
     this.type = "editor";
     this.editor_block = new paper.Path();
@@ -323,7 +433,7 @@
         .hide();
 }
 
-Rkns.Renderers.Paper__Controllers.EdgeEditor.prototype.template = Rkns._.template(
+Rkns.Renderer.EdgeEditor.prototype.template = Rkns._.template(
     '<h2><span class="Rk-CloseX">&times;</span><%=l10n.edit_edge%></span></h2>'
     + '<p><label><%=l10n.edit_title%></label><input class="Rk-Edit-Title" type="text" value="<%=edge.title%>"/></p>'
     + '<p><label><%=l10n.edit_uri%></label><input class="Rk-Edit-URI" type="text" value="<%=edge.uri%>"/></p>'
@@ -332,10 +442,10 @@
     + '<p><label><%=l10n.created_by%> </label><span class="Rk-UserColor" style="background:<%=edge.created_by.color%>;"></span> <%=edge.created_by.title%></p>'
 );
 
-Rkns.Renderers.Paper__Controllers.EdgeEditor.prototype.redraw = function() {
+Rkns.Renderer.EdgeEditor.prototype.redraw = function() {
     var _coords = this.edge_controller.edge_paper_coords,
         _element = this.edge_controller._element,
-        _css = Rkns.Renderers.Paper__Utils.drawEditBox(_coords, this.editor_block, 250, 200);
+        _css = Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 200);
     this.editor_$
         .html(this.template({
             edge: _element,
@@ -363,14 +473,105 @@
     });
 }
 
-Rkns.Renderers.Paper__Controllers.EdgeEditor.prototype.destroy = function() {
+Rkns.Renderer.EdgeEditor.prototype.destroy = function() {
     this.editor_block.remove();
     this.editor_$.detach();
 }
 
 /* */
 
-Rkns.Renderers.Paper.prototype._init = function() {
+Rkns.Renderer.NodeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
+
+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;
+}
+
+Rkns.Renderer.NodeEditButton.prototype.moveTo = function(_pos) {
+    this.sector.group.position = this.sector.delta.add(_pos);
+}
+
+Rkns.Renderer.NodeEditButton.prototype.show = function() {
+    this.sector.group.visible = true;
+}
+
+Rkns.Renderer.NodeEditButton.prototype.hide = function() {
+    this.sector.group.visible = false;
+}
+
+Rkns.Renderer.NodeEditButton.prototype.select = function() {
+    this.sector.group.opacity = .8;
+}
+
+Rkns.Renderer.NodeEditButton.prototype.unselect = function() {
+    this.sector.group.opacity = .5;
+    this.hide();
+    this.node_controller.remove_button.hide();
+}
+
+Rkns.Renderer.NodeEditButton.prototype.mouseup = function() {
+    if (!this._renderer.is_dragging) {
+        this.node_controller.mouseup();
+    }
+}
+
+Rkns.Renderer.NodeEditButton.prototype.destroy = function() {
+    this.sector.group.remove();
+}
+
+/* */
+
+Rkns.Renderer.NodeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
+
+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;
+}
+
+Rkns.Renderer.NodeRemoveButton.prototype.moveTo = function(_pos) {
+    this.sector.group.position = this.sector.delta.add(_pos);
+}
+
+Rkns.Renderer.NodeRemoveButton.prototype.show = function() {
+    this.sector.group.visible = true;
+}
+
+Rkns.Renderer.NodeRemoveButton.prototype.hide = function() {
+    this.sector.group.visible = false;
+}
+
+Rkns.Renderer.NodeRemoveButton.prototype.select = function() {
+    this.sector.group.opacity = .8;
+}
+
+Rkns.Renderer.NodeRemoveButton.prototype.unselect = function() {
+    this.sector.group.opacity = .5;
+    this.hide();
+    this.node_controller.edit_button.hide();
+}
+
+Rkns.Renderer.NodeRemoveButton.prototype.mouseup = function() {
+    this._renderer._project.removeNode(this.node_controller._element, Rkns._RENDER_AND_SAVE)
+}
+
+Rkns.Renderer.NodeRemoveButton.prototype.destroy = function() {
+    this.sector.group.remove();
+}
+
+/* */
+
+Rkns.Renderer.Scene = function(_project) {
+    this._project = _project;
     this._MARGIN_X = 80;
     this._MARGIN_Y = 50;
     var _canvas_id = this._project._opts.canvas_id;
@@ -411,16 +612,16 @@
     }
 }
 
-Rkns.Renderers.Paper.prototype.toPaperCoords = function(_point) {
+Rkns.Renderer.Scene.prototype.toPaperCoords = function(_point) {
     return _point.multiply(this.scale).add(this.offset);
 }
 
 
-Rkns.Renderers.Paper.prototype.toModelCoords = function(_point) {
+Rkns.Renderer.Scene.prototype.toModelCoords = function(_point) {
     return _point.subtract(this.offset).divide(this.scale);
 }
 
-Rkns.Renderers.Paper.prototype.draw = function() {
+Rkns.Renderer.Scene.prototype.draw = function() {
     var _this = this,
         _xx = this._project.nodes.map(function(_node) { return _node.position.x }),
         _yy = this._project.nodes.map(function(_node) { return _node.position.y }),
@@ -441,18 +642,18 @@
     this.redraw();
 }
 
-Rkns.Renderers.Paper.prototype.addController = function(_type, _controller) {
-    var _el = new Rkns.Renderers.Paper__Controllers[_type](this, _controller);
+Rkns.Renderer.Scene.prototype.addController = function(_type, _controller) {
+    var _el = new Rkns.Renderer[_type](this, _controller);
     this.controllers.push(_el);
     return _el;
 }
 
-Rkns.Renderers.Paper.prototype.removeController = function(_controller) {
+Rkns.Renderer.Scene.prototype.removeController = function(_controller) {
     _controller.destroy();
-    this.controllers.removeId(_controller);
+    this.controllers.removeId(_controller.id);
 }
 
-Rkns.Renderers.Paper.prototype.removeControllersOfType = function(_type) {
+Rkns.Renderer.Scene.prototype.removeControllersOfType = function(_type) {
     var _controllers = this.controllers.filter(function(_ctrl) {
             return _ctrl.type == _type;
         }),
@@ -462,32 +663,33 @@
     });
 }
 
-Rkns.Renderers.Paper.prototype.redraw = function() {
+Rkns.Renderer.Scene.prototype.redraw = function() {
     this.controllers.forEach(function(_controller) {
         _controller.redraw();
     });
     paper.view.draw();
 }
 
-Rkns.Renderers.Paper.prototype.onMouseMove = function(_event) {
+Rkns.Renderer.Scene.prototype.onMouseMove = function(_event) {
     var _hitResult = paper.project.hitTest(_event.point);
     if (_hitResult && typeof _hitResult.item.__controller !== "undefined") {
+        var _newTarget = _hitResult.item.__controller;
         if (this.selected_target !== _hitResult.item.__controller) {
             if (this.selected_target) {
-                this.selected_target.unselect();
+                this.selected_target.unselect(_newTarget);
             }
-            this.selected_target = _hitResult.item.__controller;
-            this.selected_target.select();
+            _newTarget.select(this.selected_target);
+            this.selected_target = _newTarget;
         }
     } else {
         if (this.selected_target) {
-            this.selected_target.unselect();
+            this.selected_target.unselect(null);
         }
         this.selected_target = null;
     }
 }
 
-Rkns.Renderers.Paper.prototype.onMouseDown = function(_event) {
+Rkns.Renderer.Scene.prototype.onMouseDown = function(_event) {
     this.is_dragging = false;
     var _hitResult = paper.project.hitTest(_event.point);
     if (_hitResult && typeof _hitResult.item.__controller !== "undefined") {
@@ -495,7 +697,7 @@
         if (this.click_target.type === "node" && _hitResult.type === "stroke") {
             var _tmpEdge = this.addController("TempEdge",{});
             _tmpEdge.end_pos = _event.point;
-            _tmpEdge.from_node_controller = this.click_target;
+            _tmpEdge.from_controller = this.click_target;
             _tmpEdge.redraw();
             this.click_target = _tmpEdge;
         }
@@ -504,7 +706,7 @@
     }
 }
 
-Rkns.Renderers.Paper.prototype.onMouseDrag = function(_event) {
+Rkns.Renderer.Scene.prototype.onMouseDrag = function(_event) {
     this.is_dragging = true;
     if (this.click_target && typeof this.click_target.paperShift === "function") {
         this.click_target.paperShift(_event.delta);
@@ -514,35 +716,15 @@
     }
 }
 
-Rkns.Renderers.Paper.prototype.onMouseUp = function(_event) {
+Rkns.Renderer.Scene.prototype.onMouseUp = function(_event) {
     if (this.click_target) {
-        switch (this.click_target.type) {
-            case "node":
-                if (!this.is_dragging) {
-                    this.removeControllersOfType("editor");
-                    var _editor = this.addController("NodeEditor",{});
-                    _editor.node_controller = this.click_target;
-                    _editor.redraw();
-                }
-            break;
-            case "edge":
-                if (!this.is_dragging) {
-                    this.removeControllersOfType("editor");
-                    var _editor = this.addController("EdgeEditor",{});
-                    _editor.edge_controller = this.click_target;
-                    _editor.redraw();
-                }
-            break;
-            case "temp-edge":
-                this.click_target.finishEdge(_event);
-            break;
-        }
+        this.click_target.mouseup(_event);
     }
     this.is_dragging = false;
     this.click_target = null;
 }
 
-Rkns.Renderers.Paper.prototype.onScroll = function(_event, _scrolldelta) {
+Rkns.Renderer.Scene.prototype.onScroll = function(_event, _scrolldelta) {
     this.totalScroll += _scrolldelta;
     if (Math.abs(this.totalScroll) >= 1) {
         var _off = this.$.offset(),
@@ -562,7 +744,7 @@
     }
 }
 
-Rkns.Renderers.Paper.prototype.onDoubleClick = function(_event) {
+Rkns.Renderer.Scene.prototype.onDoubleClick = function(_event) {
     var _off = this.$.offset(),
         _point = new paper.Point([
             _event.pageX - _off.left,