diff -r 2ab67fa1e78d -r 6d0e0100f4e8 server/src/main/webapp/js/paper-renderer.js
--- a/server/src/main/webapp/js/paper-renderer.js	Thu Aug 16 14:14:09 2012 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,770 +0,0 @@
-Rkns.Renderer = {}
-
-Rkns.Renderer.Utils = {
-    _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 ),
-            _top = _coords.y - _height / 2;
-        if (_top < this._EDITOR_MARGIN) {
-            _top = Math.min( this._EDITOR_MARGIN, _coords.y - this._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 );
-            _top = _bottom - _height;
-        }
-        _path.segments[0].point
-            = _path.segments[7].point
-            = _coords.add([_isLeft * this._EDITOR_MARGIN, 0]);
-        _path.segments[1].point.x
-            = _path.segments[2].point.x
-            = _path.segments[5].point.x
-            = _path.segments[6].point.x
-            = _left;
-        _path.segments[3].point.x
-            = _path.segments[4].point.x
-            = _right;
-        _path.segments[2].point.y
-            = _path.segments[3].point.y
-            = _top;
-        _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)
-        }
-    },
-    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.Renderer._BaseController = function(_renderer, _element) {
-    if (typeof _renderer !== "undefined") {
-        this.id = Rkns.Utils.getUID('controller');
-        this._renderer = _renderer;
-        this._project = _renderer._project;
-        this._element = _element;
-        this._element.__controller = this;
-    }
-}
-
-Rkns.Renderer._BaseController.prototype.select = function() {}
-
-Rkns.Renderer._BaseController.prototype.unselect = function() {}
-
-Rkns.Renderer._BaseController.prototype.mouseup = function() {}
-
-Rkns.Renderer._BaseController.prototype.destroy = function() {}
-
-Rkns.Renderer.Node = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
-
-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.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.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.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.Renderer.Node.prototype.paperShift = function(_delta) {
-    var _coords = this._renderer.toModelCoords(this.paper_coords.add(_delta)),
-        _data = {
-            position: {
-                x: _coords.x,
-                y: _coords.y
-            }
-        };
-    this._project.updateElement(this._element, _data, Rkns._SAVE);
-    this._renderer.redraw();
-}
-
-Rkns.Renderer.Node.prototype.openEditor = function() {
-    this._renderer.removeControllersOfType("editor");
-    var _editor = this._renderer.addController("NodeEditor",{});
-    _editor.node_controller = this;
-    _editor.redraw();
-}
-
-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.Renderer.Node.prototype.mouseup = function(_event) {
-    if (!this._renderer.is_dragging) {
-        this.openEditor();
-    }
-}
-
-Rkns.Renderer.Node.prototype.destroy = function(_event) {
-    this.edit_button.destroy();
-    this.remove_button.destroy();
-    this.circle.remove();
-    this.title.remove();
-}
-
-/* */
-
-Rkns.Renderer.Edge = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
-
-Rkns.Renderer.Edge.prototype._init = function() {
-    this._renderer.edge_layer.activate();
-    this.type = "edge";
-    this.from_controller = this._element.from.__controller;
-    this.to_node_controller = this._element.to.__controller;
-    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.text.paragraphStyle.justification = 'center';
-    this.text.__controller = this;
-    this.text_angle = 0;
-    this.arrow_angle = 0;
-}
-
-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.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.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.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.Renderer.Edge.prototype.paperShift = function(_delta) {
-    this.from_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.Renderer.TempEdge = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
-
-Rkns.Renderer.TempEdge.prototype._init = function() {
-    this._renderer.edge_layer.activate();
-    this.type = "temp-edge";
-    var _color = this._project.current_user.color;
-    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.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.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.Renderer.TempEdge.prototype.paperShift = function(_delta) {
-    this.end_pos = this.end_pos.add(_delta);
-    this._renderer.onMouseMove({point: this.end_pos});
-    this.redraw();
-}
-
-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_controller._element.id !== _target._element.id) {
-            this._project.addEdge({
-                from: this.from_controller._element.id,
-                to: _target._element.id
-            }, Rkns._RENDER_AND_SAVE)
-        }
-    }
-    this._renderer.removeController(this);
-}
-
-Rkns.Renderer.TempEdge.prototype.destroy = function() {
-    this.arrow.remove();
-    this.line.remove();
-}
-
-/* */
-
-Rkns.Renderer.NodeEditor = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
-
-Rkns.Renderer.NodeEditor.prototype._init = function() {
-    this._renderer.overlay_layer.activate();
-    this.type = "editor";
-    this.editor_block = new paper.Path();
-    var _pts = Rkns._(Rkns._.range(8)).map(function() {return [0,0]});
-    this.editor_block.add.apply(this.editor_block, _pts);
-    this.editor_block.strokeWidth = 2;
-    this.editor_block.strokeColor = "#999999";
-    this.editor_block.fillColor = "#e0e0e0";
-    this.editor_block.opacity = .8;
-    this.editor_$ = Rkns.$('<div>')
-        .appendTo('.Rk-Editor')
-        .css({
-            position: "absolute",
-            opacity: .8
-        })
-        .hide();
-}
-
-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>'
-    + '<p><label><%=l10n.edit_description%></label><textarea class="Rk-Edit-Description"><%=node.description%></textarea></p>'
-    + '<p><label><%=l10n.created_by%></label> <span class="Rk-UserColor" style="background:<%=node.created_by.color%>;"></span> <%=node.created_by.title%></p>'
-);
-
-Rkns.Renderer.NodeEditor.prototype.redraw = function() {
-    var _coords = this.node_controller.paper_coords,
-        _element = this.node_controller._element,
-        _css = Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 300);
-    this.editor_$
-        .html(this.template({
-            node: _element,
-            l10n: this._project.l10n
-        }))
-        .show()
-        .css(_css);
-    var _this = this;
-    this.editor_$.find(".Rk-CloseX").click(function() {
-        _this._renderer.removeController(_this);
-        paper.view.draw();
-    });
-    this.editor_$.find("input, textarea").bind("keyup change", function() {
-        var _data = {
-            title: _this.editor_$.find(".Rk-Edit-Title").val(),
-            description: _this.editor_$.find(".Rk-Edit-Description").val(),
-            uri: _this.editor_$.find(".Rk-Edit-URI").val()
-        }
-        _this._project.updateElement(
-            _element,
-            _data,
-            Rkns._SAVE
-        );
-        _this.node_controller.redraw();
-        paper.view.draw();
-    });
-    this.editor_$.find(".Rk-Edit-Title")[0].focus();
-}
-
-Rkns.Renderer.NodeEditor.prototype.destroy = function() {
-    this.editor_block.remove();
-    this.editor_$.detach();
-}
-
-/* */
-
-Rkns.Renderer.EdgeEditor = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
-
-Rkns.Renderer.EdgeEditor.prototype._init = function() {
-    this._renderer.overlay_layer.activate();
-    this.type = "editor";
-    this.editor_block = new paper.Path();
-    var _pts = Rkns._(Rkns._.range(8)).map(function() {return [0,0]});
-    this.editor_block.add.apply(this.editor_block, _pts);
-    this.editor_block.strokeWidth = 2;
-    this.editor_block.strokeColor = "#999999";
-    this.editor_block.fillColor = "#e0e0e0";
-    this.editor_block.opacity = .8;
-    this.editor_$ = Rkns.$('<div>')
-        .appendTo('.Rk-Editor')
-        .css({
-            position: "absolute",
-            opacity: .8
-        })
-        .hide();
-}
-
-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>'
-    + '<p><label><%=l10n.edit_from%></label><span class="Rk-UserColor" style="background:<%=edge.from.created_by.color%>;"></span><%=edge.from.title%></p>'
-    + '<p><label><%=l10n.edit_to%></label><span class="Rk-UserColor" style="background:<%=edge.to.created_by.color%>;"></span><%=edge.to.title%></p>'
-    + '<p><label><%=l10n.created_by%> </label><span class="Rk-UserColor" style="background:<%=edge.created_by.color%>;"></span> <%=edge.created_by.title%></p>'
-);
-
-Rkns.Renderer.EdgeEditor.prototype.redraw = function() {
-    var _coords = this.edge_controller.edge_paper_coords,
-        _element = this.edge_controller._element,
-        _css = Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 200);
-    this.editor_$
-        .html(this.template({
-            edge: _element,
-            l10n: this._project.l10n
-        }))
-        .show()
-        .css(_css);
-    var _this = this;
-    this.editor_$.find(".Rk-CloseX").click(function() {
-        _this._renderer.removeController(_this);
-        paper.view.draw();
-    });
-    this.editor_$.find("input, textarea").bind("keyup change", function() {
-        var _data = {
-            title: _this.editor_$.find(".Rk-Edit-Title").val(),
-            uri: _this.editor_$.find(".Rk-Edit-URI").val()
-        }
-        _this._project.updateElement(
-            _element,
-            _data,
-            Rkns._SAVE
-        );
-        _this.edge_controller.redraw();
-        paper.view.draw();
-    });
-}
-
-Rkns.Renderer.EdgeEditor.prototype.destroy = function() {
-    this.editor_block.remove();
-    this.editor_$.detach();
-}
-
-/* */
-
-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.openEditor();
-    }
-}
-
-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;
-    this.$ = Rkns.$("#"+_canvas_id)
-    paper.setup(document.getElementById(_canvas_id));
-    this.scale = 1;
-    this.offset = paper.view.center;
-    this.totalScroll = 0;
-    this.click_target = null;
-    this.selected_target = null;
-    this.edge_layer = new paper.Layer();
-    this.node_layer = new paper.Layer();
-    this.overlay_layer = new paper.Layer();
-    var _tool = new paper.Tool(),
-        _this = this;
-    _tool.minDistance = Rkns._MIN_DRAG_DISTANCE;
-    _tool.onMouseMove = function(_event) {
-        _this.onMouseMove(_event);
-    }
-    _tool.onMouseDown = function(_event) {
-        _this.onMouseDown(_event);
-    }
-    _tool.onMouseDrag = function(_event) {
-        _this.onMouseDrag(_event);
-    }
-    _tool.onMouseUp = function(_event) {
-        _this.onMouseUp(_event);
-    }
-    this.$.mousewheel(function(_event, _delta) {
-        _this.onScroll(_event, _delta);
-    })
-    this.$.dblclick(function(_event) {
-        _this.onDoubleClick(_event);
-    })
-    paper.view.onResize = function(_event) {
-        _this.offset = _this.offset.add(_event.delta.divide(2));
-        _this.redraw();
-    }
-}
-
-Rkns.Renderer.Scene.prototype.toPaperCoords = function(_point) {
-    return _point.multiply(this.scale).add(this.offset);
-}
-
-
-Rkns.Renderer.Scene.prototype.toModelCoords = function(_point) {
-    return _point.subtract(this.offset).divide(this.scale);
-}
-
-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 }),
-        _minx = Math.min.apply(Math, _xx),
-        _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.controllers = new Rkns.Model.List();
-    this._project.nodes.forEach(function(_node) {
-        _this.addController("Node", _node);
-    });
-    this._project.edges.forEach(function(_edge) {
-        _this.addController("Edge", _edge);
-    });
-    
-    this.redraw();
-}
-
-Rkns.Renderer.Scene.prototype.addController = function(_type, _controller) {
-    var _el = new Rkns.Renderer[_type](this, _controller);
-    this.controllers.push(_el);
-    return _el;
-}
-
-Rkns.Renderer.Scene.prototype.removeController = function(_controller) {
-    _controller.destroy();
-    this.controllers.removeId(_controller.id);
-}
-
-Rkns.Renderer.Scene.prototype.removeControllersOfType = function(_type) {
-    var _controllers = this.controllers.filter(function(_ctrl) {
-            return _ctrl.type == _type;
-        }),
-        _this = this;
-    _controllers.forEach(function(_ctrl) {
-        _this.removeController(_ctrl);
-    });
-}
-
-Rkns.Renderer.Scene.prototype.redraw = function() {
-    this.controllers.forEach(function(_controller) {
-        _controller.redraw();
-    });
-    paper.view.draw();
-}
-
-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(_newTarget);
-            }
-            _newTarget.select(this.selected_target);
-            this.selected_target = _newTarget;
-        }
-    } else {
-        if (this.selected_target) {
-            this.selected_target.unselect(null);
-        }
-        this.selected_target = null;
-    }
-}
-
-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") {
-        this.click_target = _hitResult.item.__controller;
-        if (this.click_target.type === "node" && _hitResult.type === "stroke") {
-            var _tmpEdge = this.addController("TempEdge",{});
-            _tmpEdge.end_pos = _event.point;
-            _tmpEdge.from_controller = this.click_target;
-            _tmpEdge.redraw();
-            this.click_target = _tmpEdge;
-        }
-    } else {
-        this.click_target = null;
-    }
-}
-
-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);
-    } else {
-        this.offset = this.offset.add(_event.delta);
-        this.redraw();
-    }
-}
-
-Rkns.Renderer.Scene.prototype.onMouseUp = function(_event) {
-    if (this.click_target) {
-        this.click_target.mouseup(_event);
-    }
-    this.is_dragging = false;
-    this.click_target = null;
-}
-
-Rkns.Renderer.Scene.prototype.onScroll = function(_event, _scrolldelta) {
-    this.totalScroll += _scrolldelta;
-    if (Math.abs(this.totalScroll) >= 1) {
-        var _off = this.$.offset(),
-            _delta = new paper.Point([
-                _event.pageX - _off.left,
-                _event.pageY - _off.top
-            ]).subtract(this.offset).multiply( Math.SQRT2 - 1 );
-        if (this.totalScroll > 0) {
-            this.offset = this.offset.subtract(_delta);
-            this.scale *= Math.SQRT2;
-        } else {
-            this.offset = this.offset.add(_delta.divide( Math.SQRT2 ));
-            this.scale *= Math.SQRT1_2;
-        }
-        this.totalScroll = 0;
-        this.redraw();
-    }
-}
-
-Rkns.Renderer.Scene.prototype.onDoubleClick = function(_event) {
-    var _off = this.$.offset(),
-        _point = new paper.Point([
-            _event.pageX - _off.left,
-            _event.pageY - _off.top
-        ]);
-    var _hitResult = paper.project.hitTest(_point);
-    if (!_hitResult || typeof _hitResult.item.__controller === "undefined") {
-        var _coords = this.toModelCoords(_point),
-            _node = this._project.addNode({
-                position: {
-                    x: _coords.x,
-                    y: _coords.y
-                }
-            }, Rkns._RENDER_AND_SAVE);
-        _node.__controller.openEditor();
-    }
-    paper.view.draw();
-}