client/js/paper-renderer.js
changeset 5 67085e6281e5
parent 4 f5297dde9053
child 6 a7b54105f74e
equal deleted inserted replaced
4:f5297dde9053 5:67085e6281e5
     1 Rkns.Renderers.Paper = Rkns.Utils.inherit(Rkns.Renderers._Base);
     1 Rkns.Renderers.Paper = Rkns.Utils.inherit(Rkns.Renderers._Base);
       
     2 
       
     3 Rkns.Renderers.Paper__Utils = {
       
     4     _EDITOR_ARROW_LENGTH : 20,
       
     5     _EDITOR_ARROW_WIDTH : 40,
       
     6     _EDITOR_MARGIN : 15,
       
     7     _EDITOR_PADDING : 10,
       
     8     drawEditBox : function(_coords, _path, _width, _height) {
       
     9         var _isLeft = (_coords.x < paper.view.center.x ? 1 : -1),
       
    10             _left = _coords.x + _isLeft * ( this._EDITOR_MARGIN + this._EDITOR_ARROW_LENGTH ),
       
    11             _right = _coords.x + _isLeft * ( this._EDITOR_MARGIN + this._EDITOR_ARROW_LENGTH + _width ),
       
    12             _top = _coords.y - _height / 2;
       
    13         if (_top < this._EDITOR_MARGIN) {
       
    14             _top = Math.min( this._EDITOR_MARGIN, _coords.y - this._EDITOR_ARROW_WIDTH / 2 );
       
    15         }
       
    16         var _bottom = _top + _height;
       
    17         if (_bottom > (paper.view.size.height - this._EDITOR_MARGIN)) {
       
    18             _bottom = Math.max( paper.view.size.height - this._EDITOR_MARGIN, _coords.y + this._EDITOR_ARROW_WIDTH / 2 );
       
    19             _top = _bottom - _height;
       
    20         }
       
    21         _path.segments[0].point
       
    22             = _path.segments[7].point
       
    23             = _coords.add([_isLeft * this._EDITOR_MARGIN, 0]);
       
    24         _path.segments[1].point.x
       
    25             = _path.segments[2].point.x
       
    26             = _path.segments[5].point.x
       
    27             = _path.segments[6].point.x
       
    28             = _left;
       
    29         _path.segments[3].point.x
       
    30             = _path.segments[4].point.x
       
    31             = _right;
       
    32         _path.segments[2].point.y
       
    33             = _path.segments[3].point.y
       
    34             = _top;
       
    35         _path.segments[4].point.y
       
    36             = _path.segments[5].point.y
       
    37             = _bottom;
       
    38         _path.segments[1].point.y = _coords.y - this._EDITOR_ARROW_WIDTH / 2;
       
    39         _path.segments[6].point.y = _coords.y + this._EDITOR_ARROW_WIDTH / 2;
       
    40         return {
       
    41             left: (this._EDITOR_PADDING + Math.min(_left, _right)),
       
    42             top: (this._EDITOR_PADDING + _top)
       
    43         }
       
    44     }
       
    45 }
     2 
    46 
     3 Rkns.Renderers.Paper__Controllers = {}
    47 Rkns.Renderers.Paper__Controllers = {}
     4 
    48 
     5 Rkns.Renderers.Paper__Controllers._Base = function(_renderer, _element) {
    49 Rkns.Renderers.Paper__Controllers._Base = function(_renderer, _element) {
     6     if (typeof _renderer !== "undefined") {
    50     if (typeof _renderer !== "undefined") {
     7         this.id = Rkns.Utils.getUID('controller');
    51         this.id = Rkns.Utils.getUID('controller');
     8         this._renderer = _renderer;
    52         this._renderer = _renderer;
       
    53         this._project = _renderer._project;
     9         this._element = _element;
    54         this._element = _element;
    10         this._element.__controller = this;
    55         this._element.__controller = this;
    11     }
    56     }
    12 }
    57 }
    13 
    58 
    14 Rkns.Renderers.Paper__Controllers._Base.prototype.select = function() {}
    59 Rkns.Renderers.Paper__Controllers._Base.prototype.select = function() {}
    15 
    60 
    16 Rkns.Renderers.Paper__Controllers._Base.prototype.unselect = function() {}
    61 Rkns.Renderers.Paper__Controllers._Base.prototype.unselect = function() {}
       
    62 
       
    63 Rkns.Renderers.Paper__Controllers._Base.prototype.destroy = function() {}
    17 
    64 
    18 Rkns.Renderers.Paper__Controllers.Node = Rkns.Utils.inherit(Rkns.Renderers.Paper__Controllers._Base);
    65 Rkns.Renderers.Paper__Controllers.Node = Rkns.Utils.inherit(Rkns.Renderers.Paper__Controllers._Base);
    19 
    66 
    20 Rkns.Renderers.Paper__Controllers.Node.prototype._init = function() {
    67 Rkns.Renderers.Paper__Controllers.Node.prototype._init = function() {
    21     this._renderer.node_layer.activate();
    68     this._renderer.node_layer.activate();
    40     this.node_text.position = this.node_paper_coords.add([0, 2 * Rkns._NODE_RADIUS]);
    87     this.node_text.position = this.node_paper_coords.add([0, 2 * Rkns._NODE_RADIUS]);
    41     this.node_circle.strokeColor = this._element.created_by.color;
    88     this.node_circle.strokeColor = this._element.created_by.color;
    42 }
    89 }
    43 
    90 
    44 Rkns.Renderers.Paper__Controllers.Node.prototype.paperShift = function(_delta) {
    91 Rkns.Renderers.Paper__Controllers.Node.prototype.paperShift = function(_delta) {
    45     this._element.setPosition(this._renderer.toModelCoords(this.node_paper_coords.add(_delta)));
    92     var _coords = this._renderer.toModelCoords(this.node_paper_coords.add(_delta)),
    46     this._renderer._project.serializer.save();
    93         _data = {
       
    94             position: {
       
    95                 x: _coords.x,
       
    96                 y: _coords.y
       
    97             }
       
    98         };
       
    99     this._project.updateElement(this._element, _data, Rkns._SAVE);
    47     this._renderer.redraw();
   100     this._renderer.redraw();
    48 }
   101 }
    49 
   102 
    50 Rkns.Renderers.Paper__Controllers.Node.prototype.select = function(_delta) {
   103 Rkns.Renderers.Paper__Controllers.Node.prototype.select = function(_delta) {
    51     this.node_circle.strokeWidth = 3;
   104     this.node_circle.strokeWidth = 3;
    83 
   136 
    84 Rkns.Renderers.Paper__Controllers.Edge.prototype.redraw = function() {
   137 Rkns.Renderers.Paper__Controllers.Edge.prototype.redraw = function() {
    85     var _p0 = this.from_node_controller.node_paper_coords,
   138     var _p0 = this.from_node_controller.node_paper_coords,
    86         _p1 = this.to_node_controller.node_paper_coords,
   139         _p1 = this.to_node_controller.node_paper_coords,
    87         _a = _p1.subtract(_p0).angle,
   140         _a = _p1.subtract(_p0).angle,
    88         _center = _p0.add(_p1).divide(2),
       
    89         _color = this._element.created_by.color;
   141         _color = this._element.created_by.color;
       
   142     this.edge_paper_coords = _p0.add(_p1).divide(2);
    90     this.edge_line.strokeColor = _color;
   143     this.edge_line.strokeColor = _color;
    91     this.edge_line.segments[0].point = _p0;
   144     this.edge_line.segments[0].point = _p0;
    92     this.edge_line.segments[1].point = _p1;
   145     this.edge_line.segments[1].point = _p1;
    93     this.edge_arrow.rotate(_a - this.edge_arrow_angle);
   146     this.edge_arrow.rotate(_a - this.edge_arrow_angle);
    94     this.edge_arrow.fillColor = _color;
   147     this.edge_arrow.fillColor = _color;
    95     this.edge_arrow.position = _center;
   148     this.edge_arrow.position = this.edge_paper_coords;
    96     this.edge_arrow_angle = _a;
   149     this.edge_arrow_angle = _a;
    97     if (_a > 90) {
   150     if (_a > 90) {
    98         _a -= 180;
   151         _a -= 180;
    99     }
   152     }
   100     if (_a < -90) {
   153     if (_a < -90) {
   101         _a += 180;
   154         _a += 180;
   102     }
   155     }
   103     this.edge_text.rotate(_a - this.edge_text_angle);
   156     this.edge_text.rotate(_a - this.edge_text_angle);
   104     this.edge_text.content = this._element.title;
   157     this.edge_text.content = this._element.title;
   105     this.edge_text.position = _center;
   158     this.edge_text.position = this.edge_paper_coords;
   106     this.edge_text_angle = _a;
   159     this.edge_text_angle = _a;
   107 }
   160 }
   108 
   161 
   109 Rkns.Renderers.Paper__Controllers.Edge.prototype.select = function(_delta) {
   162 Rkns.Renderers.Paper__Controllers.Edge.prototype.select = function(_delta) {
   110     this.edge_line.strokeWidth = 3;
   163     this.edge_line.strokeWidth = 3;
   117 Rkns.Renderers.Paper__Controllers.Edge.prototype.paperShift = function(_delta) {
   170 Rkns.Renderers.Paper__Controllers.Edge.prototype.paperShift = function(_delta) {
   118     this.from_node_controller.paperShift(_delta);
   171     this.from_node_controller.paperShift(_delta);
   119     this.to_node_controller.paperShift(_delta);
   172     this.to_node_controller.paperShift(_delta);
   120     this._renderer.redraw();
   173     this._renderer.redraw();
   121 }
   174 }
       
   175 
   122 /* */
   176 /* */
   123 
   177 
   124 Rkns.Renderers.Paper__Controllers.TempEdge = Rkns.Utils.inherit(Rkns.Renderers.Paper__Controllers._Base);
   178 Rkns.Renderers.Paper__Controllers.TempEdge = Rkns.Utils.inherit(Rkns.Renderers.Paper__Controllers._Base);
   125 
   179 
   126 Rkns.Renderers.Paper__Controllers.TempEdge.prototype._init = function() {
   180 Rkns.Renderers.Paper__Controllers.TempEdge.prototype._init = function() {
   127     this._renderer.edge_layer.activate();
   181     this._renderer.edge_layer.activate();
   128     this.type = "temp-edge";
   182     this.type = "temp-edge";
   129     var _color = this._renderer._project.current_user.color;
   183     var _color = this._project.current_user.color;
   130     this.edge_line = new paper.Path();
   184     this.edge_line = new paper.Path();
   131     this.edge_line.strokeColor = _color;
   185     this.edge_line.strokeColor = _color;
   132     this.edge_line.add([0,0],[0,0]);
   186     this.edge_line.add([0,0],[0,0]);
   133     this.edge_line.__controller = this;
   187     this.edge_line.__controller = this;
   134     this.edge_arrow = new paper.Path();
   188     this.edge_arrow = new paper.Path();
   159 Rkns.Renderers.Paper__Controllers.TempEdge.prototype.finishEdge = function(_event) {
   213 Rkns.Renderers.Paper__Controllers.TempEdge.prototype.finishEdge = function(_event) {
   160     var _hitResult = paper.project.hitTest(_event.point);
   214     var _hitResult = paper.project.hitTest(_event.point);
   161     if (_hitResult && typeof _hitResult.item.__controller !== "undefined") {
   215     if (_hitResult && typeof _hitResult.item.__controller !== "undefined") {
   162         var _target = _hitResult.item.__controller;
   216         var _target = _hitResult.item.__controller;
   163         if (_target.type === "node" && this.from_node_controller._element.id !== _target._element.id) {
   217         if (_target.type === "node" && this.from_node_controller._element.id !== _target._element.id) {
   164             this._renderer._project.addEdge({
   218             this._project.addEdge({
   165                 from: this.from_node_controller._element.id,
   219                 from: this.from_node_controller._element.id,
   166                 to: _target._element.id
   220                 to: _target._element.id
   167             }, Rkns._RENDER_AND_SAVE)
   221             }, Rkns._RENDER_AND_SAVE)
   168         }
   222         }
   169     }
   223     }
       
   224     this._renderer.removeController(this);
       
   225 }
       
   226 
       
   227 Rkns.Renderers.Paper__Controllers.TempEdge.prototype.destroy = function() {
   170     this.edge_arrow.remove();
   228     this.edge_arrow.remove();
   171     this.edge_line.remove();
   229     this.edge_line.remove();
   172     this._renderer.controllers.removeId(this.id);
   230 }
       
   231 
       
   232 /* */
       
   233 
       
   234 Rkns.Renderers.Paper__Controllers.NodeEditor = Rkns.Utils.inherit(Rkns.Renderers.Paper__Controllers._Base);
       
   235 
       
   236 Rkns.Renderers.Paper__Controllers.NodeEditor.prototype._init = function() {
       
   237     this._renderer.overlay_layer.activate();
       
   238     this.type = "editor";
       
   239     this.editor_block = new paper.Path();
       
   240     var _pts = Rkns._(Rkns._.range(8)).map(function() {return [0,0]});
       
   241     this.editor_block.add.apply(this.editor_block, _pts);
       
   242     this.editor_block.strokeWidth = 2;
       
   243     this.editor_block.strokeColor = "#999999";
       
   244     this.editor_block.fillColor = "#e0e0e0";
       
   245     this.editor_block.opacity = .8;
       
   246     this.editor_$ = Rkns.$('<div>')
       
   247         .appendTo('.Rk-Editor')
       
   248         .css({
       
   249             position: "absolute",
       
   250             opacity: .8
       
   251         })
       
   252         .hide();
       
   253 }
       
   254 
       
   255 Rkns.Renderers.Paper__Controllers.NodeEditor.prototype.template = Rkns._.template(
       
   256     '<h2><span class="Rk-CloseX">&times;</span><%=l10n.edit_node%></span></h2>'
       
   257     + '<p><label><%=l10n.edit_title%></label><input class="Rk-Edit-Title" type="text" value="<%=node.title%>"/></p>'
       
   258     + '<p><label><%=l10n.edit_uri%></label><input class="Rk-Edit-URI" type="text" value="<%=node.uri%>"/></p>'
       
   259     + '<p><label><%=l10n.edit_description%></label><textarea class="Rk-Edit-Description"><%=node.description%></textarea></p>'
       
   260     + '<p><label><%=l10n.created_by%></label> <span class="Rk-UserColor" style="background:<%=node.created_by.color%>;"></span> <%=node.created_by.title%></p>'
       
   261 );
       
   262 
       
   263 Rkns.Renderers.Paper__Controllers.NodeEditor.prototype.redraw = function() {
       
   264     var _coords = this.node_controller.node_paper_coords,
       
   265         _element = this.node_controller._element,
       
   266         _css = Rkns.Renderers.Paper__Utils.drawEditBox(_coords, this.editor_block, 250, 300);
       
   267     this.editor_$
       
   268         .html(this.template({
       
   269             node: _element,
       
   270             l10n: this._project.l10n
       
   271         }))
       
   272         .show()
       
   273         .css(_css);
       
   274     var _this = this;
       
   275     this.editor_$.find(".Rk-CloseX").click(function() {
       
   276         _this._renderer.removeController(_this);
       
   277         paper.view.draw();
       
   278     });
       
   279     this.editor_$.find("input, textarea").bind("keyup change", function() {
       
   280         var _data = {
       
   281             title: _this.editor_$.find(".Rk-Edit-Title").val(),
       
   282             description: _this.editor_$.find(".Rk-Edit-Description").val(),
       
   283             uri: _this.editor_$.find(".Rk-Edit-URI").val()
       
   284         }
       
   285         _this._project.updateElement(
       
   286             _element,
       
   287             _data,
       
   288             Rkns._SAVE
       
   289         );
       
   290         _this.node_controller.redraw();
       
   291         paper.view.draw();
       
   292     });
       
   293 }
       
   294 
       
   295 Rkns.Renderers.Paper__Controllers.NodeEditor.prototype.destroy = function() {
       
   296     this.editor_block.remove();
       
   297     this.editor_$.detach();
       
   298 }
       
   299 
       
   300 
       
   301 /* */
       
   302 
       
   303 Rkns.Renderers.Paper__Controllers.EdgeEditor = Rkns.Utils.inherit(Rkns.Renderers.Paper__Controllers._Base);
       
   304 
       
   305 Rkns.Renderers.Paper__Controllers.EdgeEditor.prototype._init = function() {
       
   306     this._renderer.overlay_layer.activate();
       
   307     this.type = "editor";
       
   308     this.editor_block = new paper.Path();
       
   309     var _pts = Rkns._(Rkns._.range(8)).map(function() {return [0,0]});
       
   310     this.editor_block.add.apply(this.editor_block, _pts);
       
   311     this.editor_block.strokeWidth = 2;
       
   312     this.editor_block.strokeColor = "#999999";
       
   313     this.editor_block.fillColor = "#e0e0e0";
       
   314     this.editor_block.opacity = .8;
       
   315     this.editor_$ = Rkns.$('<div>')
       
   316         .appendTo('.Rk-Editor')
       
   317         .css({
       
   318             position: "absolute",
       
   319             opacity: .8
       
   320         })
       
   321         .hide();
       
   322 }
       
   323 
       
   324 Rkns.Renderers.Paper__Controllers.EdgeEditor.prototype.template = Rkns._.template(
       
   325     '<h2><span class="Rk-CloseX">&times;</span><%=l10n.edit_edge%></span></h2>'
       
   326     + '<p><label><%=l10n.edit_title%></label><input class="Rk-Edit-Title" type="text" value="<%=edge.title%>"/></p>'
       
   327     + '<p><label><%=l10n.edit_uri%></label><input class="Rk-Edit-URI" type="text" value="<%=edge.uri%>"/></p>'
       
   328     + '<p><label><%=l10n.edit_from%></label><span class="Rk-UserColor" style="background:<%=edge.from.created_by.color%>;"></span><%=edge.from.title%></p>'
       
   329     + '<p><label><%=l10n.edit_to%></label><span class="Rk-UserColor" style="background:<%=edge.to.created_by.color%>;"></span><%=edge.to.title%></p>'
       
   330     + '<p><label><%=l10n.created_by%> </label><span class="Rk-UserColor" style="background:<%=edge.created_by.color%>;"></span> <%=edge.created_by.title%></p>'
       
   331 );
       
   332 
       
   333 Rkns.Renderers.Paper__Controllers.EdgeEditor.prototype.redraw = function() {
       
   334     var _coords = this.edge_controller.edge_paper_coords,
       
   335         _element = this.edge_controller._element,
       
   336         _css = Rkns.Renderers.Paper__Utils.drawEditBox(_coords, this.editor_block, 250, 200);
       
   337     this.editor_$
       
   338         .html(this.template({
       
   339             edge: _element,
       
   340             l10n: this._project.l10n
       
   341         }))
       
   342         .show()
       
   343         .css(_css);
       
   344     var _this = this;
       
   345     this.editor_$.find(".Rk-CloseX").click(function() {
       
   346         _this._renderer.removeController(_this);
       
   347         paper.view.draw();
       
   348     });
       
   349     this.editor_$.find("input, textarea").bind("keyup change", function() {
       
   350         var _data = {
       
   351             title: _this.editor_$.find(".Rk-Edit-Title").val(),
       
   352             uri: _this.editor_$.find(".Rk-Edit-URI").val()
       
   353         }
       
   354         _this._project.updateElement(
       
   355             _element,
       
   356             _data,
       
   357             Rkns._SAVE
       
   358         );
       
   359         _this.edge_controller.redraw();
       
   360         paper.view.draw();
       
   361     });
       
   362 }
       
   363 
       
   364 Rkns.Renderers.Paper__Controllers.EdgeEditor.prototype.destroy = function() {
       
   365     this.editor_block.remove();
       
   366     this.editor_$.detach();
   173 }
   367 }
   174 
   368 
   175 /* */
   369 /* */
   176 
   370 
   177 Rkns.Renderers.Paper.prototype._init = function() {
   371 Rkns.Renderers.Paper.prototype._init = function() {
   181     this.$ = Rkns.$("#"+_canvas_id)
   375     this.$ = Rkns.$("#"+_canvas_id)
   182     paper.setup(document.getElementById(_canvas_id));
   376     paper.setup(document.getElementById(_canvas_id));
   183     this.scale = 1;
   377     this.scale = 1;
   184     this.offset = paper.view.center;
   378     this.offset = paper.view.center;
   185     this.totalScroll = 0;
   379     this.totalScroll = 0;
   186     this.dragging_target = null;
   380     this.click_target = null;
   187     this.selected_target = null;
   381     this.selected_target = null;
   188     this.edge_layer = new paper.Layer();
   382     this.edge_layer = new paper.Layer();
   189     this.node_layer = new paper.Layer();
   383     this.node_layer = new paper.Layer();
       
   384     this.overlay_layer = new paper.Layer();
   190     var _tool = new paper.Tool(),
   385     var _tool = new paper.Tool(),
   191         _this = this;
   386         _this = this;
       
   387     _tool.minDistance = Rkns._MIN_DRAG_DISTANCE;
   192     _tool.onMouseMove = function(_event) {
   388     _tool.onMouseMove = function(_event) {
   193         _this.onMouseMove(_event);
   389         _this.onMouseMove(_event);
   194     }
   390     }
   195     _tool.onMouseDown = function(_event) {
   391     _tool.onMouseDown = function(_event) {
   196         _this.onMouseDown(_event);
   392         _this.onMouseDown(_event);
   232         _maxy = Math.max.apply(Math, _yy);
   428         _maxy = Math.max.apply(Math, _yy);
   233     this.scale = Math.min((paper.view.size.width - 2 * this._MARGIN_X) / (_maxx - _minx), (paper.view.size.height - 2 * this._MARGIN_Y) / (_maxy - _miny));
   429     this.scale = Math.min((paper.view.size.width - 2 * this._MARGIN_X) / (_maxx - _minx), (paper.view.size.height - 2 * this._MARGIN_Y) / (_maxy - _miny));
   234     this.offset = paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(this.scale));
   430     this.offset = paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(this.scale));
   235     this.controllers = new Rkns.Model.List();
   431     this.controllers = new Rkns.Model.List();
   236     this._project.nodes.forEach(function(_node) {
   432     this._project.nodes.forEach(function(_node) {
   237         _this.addElement("Node", _node);
   433         _this.addController("Node", _node);
   238     });
   434     });
   239     this._project.edges.forEach(function(_edge) {
   435     this._project.edges.forEach(function(_edge) {
   240         _this.addElement("Edge", _edge);
   436         _this.addController("Edge", _edge);
   241     });
   437     });
   242     
   438     
   243     this.redraw();
   439     this.redraw();
   244 }
   440 }
   245 
   441 
   246 Rkns.Renderers.Paper.prototype.addElement = function(_type, _element) {
   442 Rkns.Renderers.Paper.prototype.addController = function(_type, _controller) {
   247     var _el = new Rkns.Renderers.Paper__Controllers[_type](this, _element);
   443     var _el = new Rkns.Renderers.Paper__Controllers[_type](this, _controller);
   248     this.controllers.push(_el);
   444     this.controllers.push(_el);
   249     return _el;
   445     return _el;
       
   446 }
       
   447 
       
   448 Rkns.Renderers.Paper.prototype.removeController = function(_controller) {
       
   449     _controller.destroy();
       
   450     this.controllers.removeId(_controller);
       
   451 }
       
   452 
       
   453 Rkns.Renderers.Paper.prototype.removeControllersOfType = function(_type) {
       
   454     var _controllers = this.controllers.filter(function(_ctrl) {
       
   455             return _ctrl.type == _type;
       
   456         }),
       
   457         _this = this;
       
   458     _controllers.forEach(function(_ctrl) {
       
   459         _this.removeController(_ctrl);
       
   460     });
   250 }
   461 }
   251 
   462 
   252 Rkns.Renderers.Paper.prototype.redraw = function() {
   463 Rkns.Renderers.Paper.prototype.redraw = function() {
   253     this.controllers.forEach(function(_controller) {
   464     this.controllers.forEach(function(_controller) {
   254         _controller.redraw();
   465         _controller.redraw();
   273         this.selected_target = null;
   484         this.selected_target = null;
   274     }
   485     }
   275 }
   486 }
   276 
   487 
   277 Rkns.Renderers.Paper.prototype.onMouseDown = function(_event) {
   488 Rkns.Renderers.Paper.prototype.onMouseDown = function(_event) {
       
   489     this.is_dragging = false;
   278     var _hitResult = paper.project.hitTest(_event.point);
   490     var _hitResult = paper.project.hitTest(_event.point);
   279     if (_hitResult && typeof _hitResult.item.__controller !== "undefined") {
   491     if (_hitResult && typeof _hitResult.item.__controller !== "undefined") {
   280         this.dragging_target = _hitResult.item.__controller;
   492         this.click_target = _hitResult.item.__controller;
   281         if (this.dragging_target.type === "node" && _hitResult.type === "stroke") {
   493         if (this.click_target.type === "node" && _hitResult.type === "stroke") {
   282             var _tmpEdge = this.addElement("TempEdge",{});
   494             var _tmpEdge = this.addController("TempEdge",{});
   283             _tmpEdge.end_pos = _event.point;
   495             _tmpEdge.end_pos = _event.point;
   284             _tmpEdge.from_node_controller = this.dragging_target;
   496             _tmpEdge.from_node_controller = this.click_target;
   285             _tmpEdge.redraw();
   497             _tmpEdge.redraw();
   286             this.dragging_target = _tmpEdge;
   498             this.click_target = _tmpEdge;
   287         }
   499         }
   288     } else {
   500     } else {
   289         this.dragging_target = null;
   501         this.click_target = null;
   290     }
   502     }
   291 }
   503 }
   292 
   504 
   293 Rkns.Renderers.Paper.prototype.onMouseDrag = function(_event) {
   505 Rkns.Renderers.Paper.prototype.onMouseDrag = function(_event) {
   294     if (this.dragging_target && typeof this.dragging_target.paperShift === "function") {
   506     this.is_dragging = true;
   295         this.dragging_target.paperShift(_event.delta);
   507     if (this.click_target && typeof this.click_target.paperShift === "function") {
       
   508         this.click_target.paperShift(_event.delta);
   296     } else {
   509     } else {
   297         this.offset = this.offset.add(_event.delta);
   510         this.offset = this.offset.add(_event.delta);
   298         this.redraw();
   511         this.redraw();
   299     }
   512     }
   300 }
   513 }
   301 
   514 
   302 Rkns.Renderers.Paper.prototype.onMouseUp = function(_event) {
   515 Rkns.Renderers.Paper.prototype.onMouseUp = function(_event) {
   303     if (this.dragging_target && this.dragging_target.type === "temp-edge") {
   516     if (this.click_target) {
   304         this.dragging_target.finishEdge(_event);
   517         switch (this.click_target.type) {
   305     }
   518             case "node":
   306     this.dragging_target = null;
   519                 if (!this.is_dragging) {
       
   520                     this.removeControllersOfType("editor");
       
   521                     var _editor = this.addController("NodeEditor",{});
       
   522                     _editor.node_controller = this.click_target;
       
   523                     _editor.redraw();
       
   524                 }
       
   525             break;
       
   526             case "edge":
       
   527                 if (!this.is_dragging) {
       
   528                     this.removeControllersOfType("editor");
       
   529                     var _editor = this.addController("EdgeEditor",{});
       
   530                     _editor.edge_controller = this.click_target;
       
   531                     _editor.redraw();
       
   532                 }
       
   533             break;
       
   534             case "temp-edge":
       
   535                 this.click_target.finishEdge(_event);
       
   536             break;
       
   537         }
       
   538     }
       
   539     this.is_dragging = false;
       
   540     this.click_target = null;
   307 }
   541 }
   308 
   542 
   309 Rkns.Renderers.Paper.prototype.onScroll = function(_event, _scrolldelta) {
   543 Rkns.Renderers.Paper.prototype.onScroll = function(_event, _scrolldelta) {
   310     this.totalScroll += _scrolldelta;
   544     this.totalScroll += _scrolldelta;
   311     if (Math.abs(this.totalScroll) >= 1) {
   545     if (Math.abs(this.totalScroll) >= 1) {