1 Rkns.Renderer = {}

     2 

     3 Rkns.Renderer.Utils = {

     4     _EDITOR_ARROW_LENGTH : 20,

     5     _EDITOR_ARROW_WIDTH : 40,

     6     _EDITOR_MARGIN : 15,

     7     _EDITOR_PADDING : 10,

     8     _EDITOR_GRADIENT : new paper.Gradient(['#f0f0f0', '#d0d0d0']),

     9     drawEditBox : function(_coords, _path, _width, _height) {

    10         var _isLeft = (_coords.x < paper.view.center.x ? 1 : -1),

    11             _left = _coords.x + _isLeft * ( this._EDITOR_MARGIN + this._EDITOR_ARROW_LENGTH ),

    12             _right = _coords.x + _isLeft * ( this._EDITOR_MARGIN + this._EDITOR_ARROW_LENGTH + _width ),

    13             _top = _coords.y - _height / 2;

    14         if (_top < this._EDITOR_MARGIN) {

    15             _top = Math.min( this._EDITOR_MARGIN, _coords.y - this._EDITOR_ARROW_WIDTH / 2 );

    16         }

    17         var _bottom = _top + _height;

    18         if (_bottom > (paper.view.size.height - this._EDITOR_MARGIN)) {

    19             _bottom = Math.max( paper.view.size.height - this._EDITOR_MARGIN, _coords.y + this._EDITOR_ARROW_WIDTH / 2 );

    20             _top = _bottom - _height;

    21         }

    22         _path.segments[0].point

    23             = _path.segments[7].point

    24             = _coords.add([_isLeft * this._EDITOR_MARGIN, 0]);

    25         _path.segments[1].point.x

    26             = _path.segments[2].point.x

    27             = _path.segments[5].point.x

    28             = _path.segments[6].point.x

    29             = _left;

    30         _path.segments[3].point.x

    31             = _path.segments[4].point.x

    32             = _right;

    33         _path.segments[2].point.y

    34             = _path.segments[3].point.y

    35             = _top;

    36         _path.segments[4].point.y

    37             = _path.segments[5].point.y

    38             = _bottom;

    39         _path.segments[1].point.y = _coords.y - this._EDITOR_ARROW_WIDTH / 2;

    40         _path.segments[6].point.y = _coords.y + this._EDITOR_ARROW_WIDTH / 2;

    41         _path.fillColor = new paper.GradientColor(this._EDITOR_GRADIENT, [0,_top], [0, _bottom])

    42         return {

    43             left: (this._EDITOR_PADDING + Math.min(_left, _right)),

    44             top: (this._EDITOR_PADDING + _top)

    45         }

    46     },

    47     sector : function(_inR, _outR, _startAngle, _endAngle, _padding, _imgsrc) {

    48         _path = new paper.Path();

    49         var _startRads = _startAngle * Math.PI / 180,

    50             _endRads = _endAngle * Math.PI / 180,

    51             _img = new Image(),

    52             _span = _endRads - _startRads,

    53             _k = .0879 * _span,

    54             _kin = _k * _inR,

    55             _kout = _k * _outR,

    56             _startdx = - Math.sin(_startRads),

    57             _startdy = Math.cos(_startRads),

    58             _startXIn = Math.cos(_startRads) * _inR + _padding * _startdx,

    59             _startYIn = Math.sin(_startRads) * _inR + _padding * _startdy,

    60             _startXOut = Math.cos(_startRads) * _outR + _padding * _startdx,

    61             _startYOut = Math.sin(_startRads) * _outR + _padding * _startdy,

    62             _enddx = - Math.sin(_endRads),

    63             _enddy = Math.cos(_endRads),

    64             _endXIn = Math.cos(_endRads) * _inR - _padding * _enddx,

    65             _endYIn = Math.sin(_endRads) * _inR - _padding * _enddy,

    66             _endXOut = Math.cos(_endRads) * _outR - _padding * _enddx,

    67             _endYOut = Math.sin(_endRads) * _outR - _padding * _enddy,

    68             _centerR = (_inR + _outR)/2,

    69             _centerRads = (_startRads + _endRads) / 2,

    70             _centerX = Math.cos(_centerRads) * _centerR,

    71             _centerY = Math.sin(_centerRads) * _centerR,

    72             _segments = [];

    73         _segments.push([[_startXIn, _startYIn], [0, 0], [ _kin * _startdx, _kin * _startdy ]]);

    74         for (var i = 1; i < 4; i++) {

    75             var _rads = i * _span / 4 + _startRads,

    76                 _dx = - Math.sin(_rads),

    77                 _dy = Math.cos(_rads),

    78                 _x = Math.cos(_rads) * _inR,

    79                 _y = Math.sin(_rads) * _inR;

    80             _segments.push([[_x, _y], [ - _kin * _dx, - _kin * _dy], [ _kin * _dx, _kin * _dy ]]);

    81         }

    82         _segments.push([[_endXIn, _endYIn], [ - _kin * _enddx, - _kin * _enddy ], [0,0]]);

    83         _segments.push([[_endXOut, _endYOut], [ 0,0 ], [ - _kout * _enddx, - _kout * _enddy ]]);

    84         for (var i = 3; i > 0; i--) {

    85             var _rads = i * _span / 4 + _startRads,

    86                 _dx = - Math.sin(_rads),

    87                 _dy = Math.cos(_rads),

    88                 _x = Math.cos(_rads) * _outR,

    89                 _y = Math.sin(_rads) * _outR;

    90             _segments.push([[_x, _y], [ _kout * _dx, _kout * _dy], [ - _kout * _dx, - _kout * _dy ]]);

    91         }

    92         _segments.push([[_startXOut, _startYOut], [ _kout * _startdx, _kout * _startdy ], [0, 0]]);

    93         _path.add.apply(_path, _segments);

    94         _path.fillColor = "#333333";

    95         _path.closed = true;

    96         var _grp = new paper.Group([_path]),

    97             _res = {

    98                 group: _grp,

    99                 circle: _path,

   100                 delta: new paper.Point(0,0),

   101                 img: _img,

   102                 imgdelta: new paper.Point([_centerX, _centerY])

   103             }

   104         _img.onload = function() {

   105             var _w = _img.width,

   106                 _h = _img.height;

   107             var _raster = new paper.Raster(_img);

   108             _raster.position = _res.imgdelta.add(_grp.position).subtract(_res.delta);

   109             _grp.addChild(_raster);

   110         }

   111         _img.src = _imgsrc;

   112         return _res

   113     }

   114 }

   115 

   116 Rkns.Renderer._BaseController = function(_renderer, _element) {

   117     if (typeof _renderer !== "undefined") {

   118         this.id = Rkns.Utils.getUID('controller');

   119         this._renderer = _renderer;

   120         this._project = _renderer._project;

   121         this._element = _element;

   122         this._element.__controller = this;

   123     }

   124 }

   125 

   126 Rkns.Renderer._BaseController.prototype.select = function() {}

   127 

   128 Rkns.Renderer._BaseController.prototype.unselect = function() {}

   129 

   130 Rkns.Renderer._BaseController.prototype.mouseup = function() {}

   131 

   132 Rkns.Renderer._BaseController.prototype.destroy = function() {}

   133 

   134 Rkns.Renderer.Node = Rkns.Utils.inherit(Rkns.Renderer._BaseController);

   135 

   136 Rkns.Renderer.Node.prototype._init = function() {

   137     this._renderer.node_layer.activate();

   138     this.type = "node";

   139     this.circle = new paper.Path.Circle([0, 0], Rkns._NODE_RADIUS);

   140     this.circle.fillColor = '#ffffff';

   141     this.circle.opacity = .9;

   142     this.circle.__controller = this;

   143     this.title = new paper.PointText([0,0]);

   144     this.title.characterStyle = {

   145         fontSize: Rkns._NODE_FONT_SIZE,

   146         fillColor: 'black'

   147     };

   148     this.edit_button = new Rkns.Renderer.NodeEditButton(this._renderer, {});

   149     this.edit_button.node_controller = this;

   150     this.remove_button = new Rkns.Renderer.NodeRemoveButton(this._renderer, {});

   151     this.remove_button.node_controller = this;

   152     this.title.paragraphStyle.justification = 'center';

   153     this.title.__controller = this;

   154 }

   155 

   156 Rkns.Renderer.Node.prototype.redraw = function() {

   157     var _model_coords = new paper.Point(this._element.position);

   158     this.paper_coords = this._renderer.toPaperCoords(_model_coords);

   159     this.circle.position = this.paper_coords;

   160     this.title.content = this._element.title;

   161     this.title.position = this.paper_coords.add([0, 2 * Rkns._NODE_RADIUS]);

   162     this.circle.strokeColor = this._element.created_by.color;

   163     this.edit_button.moveTo(this.paper_coords);

   164     this.remove_button.moveTo(this.paper_coords);

   165 }

   166 

   167 Rkns.Renderer.Node.prototype.paperShift = function(_delta) {

   168     var _coords = this._renderer.toModelCoords(this.paper_coords.add(_delta)),

   169         _data = {

   170             position: {

   171                 x: _coords.x,

   172                 y: _coords.y

   173             }

   174         };

   175     this._project.updateElement(this._element, _data, Rkns._SAVE);

   176     this._renderer.redraw();

   177 }

   178 

   179 Rkns.Renderer.Node.prototype.openEditor = function() {

   180     this._renderer.removeControllersOfType("editor");

   181     var _editor = this._renderer.addController("NodeEditor",{});

   182     _editor.node_controller = this;

   183     _editor.redraw();

   184 }

   185 

   186 Rkns.Renderer.Node.prototype.select = function() {

   187     this.circle.strokeWidth = 3;

   188     this.edit_button.show();

   189     this.remove_button.show();

   190 }

   191 

   192 Rkns.Renderer.Node.prototype.unselect = function(_newTarget) {

   193     if (!_newTarget || (_newTarget !== this.edit_button && _newTarget !== this.remove_button)) {

   194         this.edit_button.hide();

   195         this.remove_button.hide();

   196     }

   197     this.circle.strokeWidth = 1;

   198 }

   199 

   200 Rkns.Renderer.Node.prototype.mouseup = function(_event) {

   201     if (!this._renderer.is_dragging) {

   202         this.openEditor();

   203     }

   204 }

   205 

   206 Rkns.Renderer.Node.prototype.destroy = function(_event) {

   207     this.edit_button.destroy();

   208     this.remove_button.destroy();

   209     this.circle.remove();

   210     this.title.remove();

   211 }

   212 

   213 /* */

   214 

   215 Rkns.Renderer.Edge = Rkns.Utils.inherit(Rkns.Renderer._BaseController);

   216 

   217 Rkns.Renderer.Edge.prototype._init = function() {

   218     this._renderer.edge_layer.activate();

   219     this.type = "edge";

   220     this.from_controller = this._element.from.__controller;

   221     this.to_node_controller = this._element.to.__controller;

   222     this.line = new paper.Path();

   223     this.line.add([0,0],[0,0]);

   224     this.line.__controller = this;

   225     this.arrow = new paper.Path();

   226     this.arrow.add([0,0],[Rkns._ARROW_LENGTH,Rkns._ARROW_WIDTH / 2],[0,Rkns._ARROW_WIDTH]);

   227     this.arrow.__controller = this;

   228     this.text = new paper.PointText();

   229     this.text.characterStyle = {

   230         fontSize: Rkns._EDGE_FONT_SIZE,

   231         fillColor: 'black'

   232     };

   233     this.text.paragraphStyle.justification = 'center';

   234     this.text.__controller = this;

   235     this.text_angle = 0;

   236     this.arrow_angle = 0;

   237 }

   238 

   239 Rkns.Renderer.Edge.prototype.redraw = function() {

   240     var _p0 = this.from_controller.paper_coords,

   241         _p1 = this.to_node_controller.paper_coords,

   242         _a = _p1.subtract(_p0).angle,

   243         _color = this._element.created_by.color;

   244     this.edge_paper_coords = _p0.add(_p1).divide(2);

   245     this.line.strokeColor = _color;

   246     this.line.segments[0].point = _p0;

   247     this.line.segments[1].point = _p1;

   248     this.arrow.rotate(_a - this.arrow_angle);

   249     this.arrow.fillColor = _color;

   250     this.arrow.position = this.edge_paper_coords;

   251     this.arrow_angle = _a;

   252     if (_a > 90) {

   253         _a -= 180;

   254     }

   255     if (_a < -90) {

   256         _a += 180;

   257     }

   258     this.text.rotate(_a - this.text_angle);

   259     this.text.content = this._element.title;

   260     this.text.position = this.edge_paper_coords;

   261     this.text_angle = _a;

   262 }

   263 

   264 Rkns.Renderer.Edge.prototype.select = function() {

   265     this.line.strokeWidth = 3;

   266 }

   267 

   268 Rkns.Renderer.Edge.prototype.unselect = function(_newTarget) {

   269     this.line.strokeWidth = 1;

   270 }

   271 

   272 Rkns.Renderer.Edge.prototype.mouseup = function(_event) {

   273     if (!this._renderer.is_dragging) {

   274         this._renderer.removeControllersOfType("editor");

   275         var _editor = this._renderer.addController("EdgeEditor",{});

   276         _editor.edge_controller = this;

   277         _editor.redraw();

   278     }

   279 }

   280 

   281 Rkns.Renderer.Edge.prototype.paperShift = function(_delta) {

   282     this.from_controller.paperShift(_delta);

   283     this.to_node_controller.paperShift(_delta);

   284     this._renderer.redraw();

   285 }

   286 

   287 Rkns.Renderer.Edge.prototype.destroy = function() {

   288     this.line.remove();

   289     this.arrow.remove();

   290     this.text.remove();

   291 }

   292 

   293 /* */

   294 

   295 Rkns.Renderer.TempEdge = Rkns.Utils.inherit(Rkns.Renderer._BaseController);

   296 

   297 Rkns.Renderer.TempEdge.prototype._init = function() {

   298     this._renderer.edge_layer.activate();

   299     this.type = "temp-edge";

   300     var _color = this._project.current_user.color;

   301     this.line = new paper.Path();

   302     this.line.strokeColor = _color;

   303     this.line.add([0,0],[0,0]);

   304     this.line.__controller = this;

   305     this.arrow = new paper.Path();

   306     this.arrow.fillColor = _color;

   307     this.arrow.add([0,0],[Rkns._ARROW_LENGTH,Rkns._ARROW_WIDTH / 2],[0,Rkns._ARROW_WIDTH]);

   308     this.arrow.__controller = this;

   309     this.arrow_angle = 0;

   310 }

   311 

   312 Rkns.Renderer.TempEdge.prototype.redraw = function() {

   313     var _p0 = this.from_controller.paper_coords,

   314         _p1 = this.end_pos,

   315         _a = _p1.subtract(_p0).angle,

   316         _c = _p0.add(_p1).divide(2);

   317     this.line.segments[0].point = _p0;

   318     this.line.segments[1].point = _p1;

   319     this.arrow.rotate(_a - this.arrow_angle);

   320     this.arrow.position = _c;

   321     this.arrow_angle = _a;

   322 }

   323 

   324 Rkns.Renderer.TempEdge.prototype.paperShift = function(_delta) {

   325     this.end_pos = this.end_pos.add(_delta);

   326     this._renderer.onMouseMove({point: this.end_pos});

   327     this.redraw();

   328 }

   329 

   330 Rkns.Renderer.TempEdge.prototype.mouseup = function(_event) {

   331     var _hitResult = paper.project.hitTest(_event.point);

   332     if (_hitResult && typeof _hitResult.item.__controller !== "undefined") {

   333         var _target = _hitResult.item.__controller;

   334         if (_target.type === "node" && this.from_controller._element.id !== _target._element.id) {

   335             this._project.addEdge({

   336                 from: this.from_controller._element.id,

   337                 to: _target._element.id

   338             }, Rkns._RENDER_AND_SAVE)

   339         }

   340     }

   341     this._renderer.removeController(this);

   342 }

   343 

   344 Rkns.Renderer.TempEdge.prototype.destroy = function() {

   345     this.arrow.remove();

   346     this.line.remove();

   347 }

   348 

   349 /* */

   350 

   351 Rkns.Renderer.NodeEditor = Rkns.Utils.inherit(Rkns.Renderer._BaseController);

   352 

   353 Rkns.Renderer.NodeEditor.prototype._init = function() {

   354     this._renderer.overlay_layer.activate();

   355     this.type = "editor";

   356     this.editor_block = new paper.Path();

   357     var _pts = Rkns._(Rkns._.range(8)).map(function() {return [0,0]});

   358     this.editor_block.add.apply(this.editor_block, _pts);

   359     this.editor_block.strokeWidth = 2;

   360     this.editor_block.strokeColor = "#999999";

   361     this.editor_block.fillColor = "#e0e0e0";

   362     this.editor_block.opacity = .8;

   363     this.editor_$ = Rkns.$('<div>')

   364         .appendTo('.Rk-Editor')

   365         .css({

   366             position: "absolute",

   367             opacity: .8

   368         })

   369         .hide();

   370 }

   371 

   372 Rkns.Renderer.NodeEditor.prototype.template = Rkns._.template(

   373     '<h2><span class="Rk-CloseX">&times;</span><%=l10n.edit_node%></span></h2>'

   374     + '<p><label><%=l10n.edit_title%></label><input class="Rk-Edit-Title" type="text" value="<%=node.title%>"/></p>'

   375     + '<p><label><%=l10n.edit_uri%></label><input class="Rk-Edit-URI" type="text" value="<%=node.uri%>"/></p>'

   376     + '<p><label><%=l10n.edit_description%></label><textarea class="Rk-Edit-Description"><%=node.description%></textarea></p>'

   377     + '<p><label><%=l10n.created_by%></label> <span class="Rk-UserColor" style="background:<%=node.created_by.color%>;"></span> <%=node.created_by.title%></p>'

   378 );

   379 

   380 Rkns.Renderer.NodeEditor.prototype.redraw = function() {

   381     var _coords = this.node_controller.paper_coords,

   382         _element = this.node_controller._element,

   383         _css = Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 300);

   384     this.editor_$

   385         .html(this.template({

   386             node: _element,

   387             l10n: this._project.l10n

   388         }))

   389         .show()

   390         .css(_css);

   391     var _this = this;

   392     this.editor_$.find(".Rk-CloseX").click(function() {

   393         _this._renderer.removeController(_this);

   394         paper.view.draw();

   395     });

   396     this.editor_$.find("input, textarea").bind("keyup change", function() {

   397         var _data = {

   398             title: _this.editor_$.find(".Rk-Edit-Title").val(),

   399             description: _this.editor_$.find(".Rk-Edit-Description").val(),

   400             uri: _this.editor_$.find(".Rk-Edit-URI").val()

   401         }

   402         _this._project.updateElement(

   403             _element,

   404             _data,

   405             Rkns._SAVE

   406         );

   407         _this.node_controller.redraw();

   408         paper.view.draw();

   409     });

   410     this.editor_$.find(".Rk-Edit-Title")[0].focus();

   411 }

   412 

   413 Rkns.Renderer.NodeEditor.prototype.destroy = function() {

   414     this.editor_block.remove();

   415     this.editor_$.detach();

   416 }

   417 

   418 /* */

   419 

   420 Rkns.Renderer.EdgeEditor = Rkns.Utils.inherit(Rkns.Renderer._BaseController);

   421 

   422 Rkns.Renderer.EdgeEditor.prototype._init = function() {

   423     this._renderer.overlay_layer.activate();

   424     this.type = "editor";

   425     this.editor_block = new paper.Path();

   426     var _pts = Rkns._(Rkns._.range(8)).map(function() {return [0,0]});

   427     this.editor_block.add.apply(this.editor_block, _pts);

   428     this.editor_block.strokeWidth = 2;

   429     this.editor_block.strokeColor = "#999999";

   430     this.editor_block.fillColor = "#e0e0e0";

   431     this.editor_block.opacity = .8;

   432     this.editor_$ = Rkns.$('<div>')

   433         .appendTo('.Rk-Editor')

   434         .css({

   435             position: "absolute",

   436             opacity: .8

   437         })

   438         .hide();

   439 }

   440 

   441 Rkns.Renderer.EdgeEditor.prototype.template = Rkns._.template(

   442     '<h2><span class="Rk-CloseX">&times;</span><%=l10n.edit_edge%></span></h2>'

   443     + '<p><label><%=l10n.edit_title%></label><input class="Rk-Edit-Title" type="text" value="<%=edge.title%>"/></p>'

   444     + '<p><label><%=l10n.edit_uri%></label><input class="Rk-Edit-URI" type="text" value="<%=edge.uri%>"/></p>'

   445     + '<p><label><%=l10n.edit_from%></label><span class="Rk-UserColor" style="background:<%=edge.from.created_by.color%>;"></span><%=edge.from.title%></p>'

   446     + '<p><label><%=l10n.edit_to%></label><span class="Rk-UserColor" style="background:<%=edge.to.created_by.color%>;"></span><%=edge.to.title%></p>'

   447     + '<p><label><%=l10n.created_by%> </label><span class="Rk-UserColor" style="background:<%=edge.created_by.color%>;"></span> <%=edge.created_by.title%></p>'

   448 );

   449 

   450 Rkns.Renderer.EdgeEditor.prototype.redraw = function() {

   451     var _coords = this.edge_controller.edge_paper_coords,

   452         _element = this.edge_controller._element,

   453         _css = Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 200);

   454     this.editor_$

   455         .html(this.template({

   456             edge: _element,

   457             l10n: this._project.l10n

   458         }))

   459         .show()

   460         .css(_css);

   461     var _this = this;

   462     this.editor_$.find(".Rk-CloseX").click(function() {

   463         _this._renderer.removeController(_this);

   464         paper.view.draw();

   465     });

   466     this.editor_$.find("input, textarea").bind("keyup change", function() {

   467         var _data = {

   468             title: _this.editor_$.find(".Rk-Edit-Title").val(),

   469             uri: _this.editor_$.find(".Rk-Edit-URI").val()

   470         }

   471         _this._project.updateElement(

   472             _element,

   473             _data,

   474             Rkns._SAVE

   475         );

   476         _this.edge_controller.redraw();

   477         paper.view.draw();

   478     });

   479 }

   480 

   481 Rkns.Renderer.EdgeEditor.prototype.destroy = function() {

   482     this.editor_block.remove();

   483     this.editor_$.detach();

   484 }

   485 

   486 /* */

   487 

   488 Rkns.Renderer.NodeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseController);

   489 

   490 Rkns.Renderer.NodeEditButton.prototype._init = function() {

   491     this._renderer.node_layer.activate();

   492     this.type = "node-edit-button";

   493     this.sector = Rkns.Renderer.Utils.sector(1 + Rkns._NODE_RADIUS, 3 * Rkns._NODE_RADIUS, - 90, 30, 2, 'img/edit.png');

   494     this.sector.group.visible = false;

   495     this.sector.group.opacity = .5;

   496     this.sector.circle.__controller = this;

   497     this.sector.delta = this.sector.group.position;

   498 }

   499 

   500 Rkns.Renderer.NodeEditButton.prototype.moveTo = function(_pos) {

   501     this.sector.group.position = this.sector.delta.add(_pos);

   502 }

   503 

   504 Rkns.Renderer.NodeEditButton.prototype.show = function() {

   505     this.sector.group.visible = true;

   506 }

   507 

   508 Rkns.Renderer.NodeEditButton.prototype.hide = function() {

   509     this.sector.group.visible = false;

   510 }

   511 

   512 Rkns.Renderer.NodeEditButton.prototype.select = function() {

   513     this.sector.group.opacity = .8;

   514 }

   515 

   516 Rkns.Renderer.NodeEditButton.prototype.unselect = function() {

   517     this.sector.group.opacity = .5;

   518     this.hide();

   519     this.node_controller.remove_button.hide();

   520 }

   521 

   522 Rkns.Renderer.NodeEditButton.prototype.mouseup = function() {

   523     if (!this._renderer.is_dragging) {

   524         this.node_controller.openEditor();

   525     }

   526 }

   527 

   528 Rkns.Renderer.NodeEditButton.prototype.destroy = function() {

   529     this.sector.group.remove();

   530 }

   531 

   532 /* */

   533 

   534 Rkns.Renderer.NodeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseController);

   535 

   536 Rkns.Renderer.NodeRemoveButton.prototype._init = function() {

   537     this._renderer.node_layer.activate();

   538     this.type = "node-remove-button";

   539     this.sector = Rkns.Renderer.Utils.sector(1 + Rkns._NODE_RADIUS, 3 * Rkns._NODE_RADIUS, -210, -90, 2, 'img/remove.png');

   540     this.sector.group.visible = false;

   541     this.sector.group.opacity = .5;

   542     this.sector.circle.__controller = this;

   543     this.sector.delta = this.sector.group.position;

   544 }

   545 

   546 Rkns.Renderer.NodeRemoveButton.prototype.moveTo = function(_pos) {

   547     this.sector.group.position = this.sector.delta.add(_pos);

   548 }

   549 

   550 Rkns.Renderer.NodeRemoveButton.prototype.show = function() {

   551     this.sector.group.visible = true;

   552 }

   553 

   554 Rkns.Renderer.NodeRemoveButton.prototype.hide = function() {

   555     this.sector.group.visible = false;

   556 }

   557 

   558 Rkns.Renderer.NodeRemoveButton.prototype.select = function() {

   559     this.sector.group.opacity = .8;

   560 }

   561 

   562 Rkns.Renderer.NodeRemoveButton.prototype.unselect = function() {

   563     this.sector.group.opacity = .5;

   564     this.hide();

   565     this.node_controller.edit_button.hide();

   566 }

   567 

   568 Rkns.Renderer.NodeRemoveButton.prototype.mouseup = function() {

   569     this._renderer._project.removeNode(this.node_controller._element, Rkns._RENDER_AND_SAVE)

   570 }

   571 

   572 Rkns.Renderer.NodeRemoveButton.prototype.destroy = function() {

   573     this.sector.group.remove();

   574 }

   575 

   576 /* */

   577 

   578 Rkns.Renderer.Scene = function(_project) {

   579     this._project = _project;

   580     this._MARGIN_X = 80;

   581     this._MARGIN_Y = 50;

   582     var _canvas_id = this._project._opts.canvas_id;

   583     this.$ = Rkns.$("#"+_canvas_id)

   584     paper.setup(document.getElementById(_canvas_id));

   585     this.scale = 1;

   586     this.offset = paper.view.center;

   587     this.totalScroll = 0;

   588     this.click_target = null;

   589     this.selected_target = null;

   590     this.edge_layer = new paper.Layer();

   591     this.node_layer = new paper.Layer();

   592     this.overlay_layer = new paper.Layer();

   593     var _tool = new paper.Tool(),

   594         _this = this;

   595     _tool.minDistance = Rkns._MIN_DRAG_DISTANCE;

   596     _tool.onMouseMove = function(_event) {

   597         _this.onMouseMove(_event);

   598     }

   599     _tool.onMouseDown = function(_event) {

   600         _this.onMouseDown(_event);

   601     }

   602     _tool.onMouseDrag = function(_event) {

   603         _this.onMouseDrag(_event);

   604     }

   605     _tool.onMouseUp = function(_event) {

   606         _this.onMouseUp(_event);

   607     }

   608     this.$.mousewheel(function(_event, _delta) {

   609         _this.onScroll(_event, _delta);

   610     })

   611     this.$.dblclick(function(_event) {

   612         _this.onDoubleClick(_event);

   613     })

   614     paper.view.onResize = function(_event) {

   615         _this.offset = _this.offset.add(_event.delta.divide(2));

   616         _this.redraw();

   617     }

   618 }

   619 

   620 Rkns.Renderer.Scene.prototype.toPaperCoords = function(_point) {

   621     return _point.multiply(this.scale).add(this.offset);

   622 }

   623 

   624 

   625 Rkns.Renderer.Scene.prototype.toModelCoords = function(_point) {

   626     return _point.subtract(this.offset).divide(this.scale);

   627 }

   628 

   629 Rkns.Renderer.Scene.prototype.draw = function() {

   630     var _this = this,

   631         _xx = this._project.nodes.map(function(_node) { return _node.position.x }),

   632         _yy = this._project.nodes.map(function(_node) { return _node.position.y }),

   633         _minx = Math.min.apply(Math, _xx),

   634         _miny = Math.min.apply(Math, _yy),

   635         _maxx = Math.max.apply(Math, _xx),

   636         _maxy = Math.max.apply(Math, _yy);

   637     this.scale = Math.min((paper.view.size.width - 2 * this._MARGIN_X) / (_maxx - _minx), (paper.view.size.height - 2 * this._MARGIN_Y) / (_maxy - _miny));

   638     this.offset = paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(this.scale));

   639     this.controllers = new Rkns.Model.List();

   640     this._project.nodes.forEach(function(_node) {

   641         _this.addController("Node", _node);

   642     });

   643     this._project.edges.forEach(function(_edge) {

   644         _this.addController("Edge", _edge);

   645     });

   646     

   647     this.redraw();

   648 }

   649 

   650 Rkns.Renderer.Scene.prototype.addController = function(_type, _controller) {

   651     var _el = new Rkns.Renderer[_type](this, _controller);

   652     this.controllers.push(_el);

   653     return _el;

   654 }

   655 

   656 Rkns.Renderer.Scene.prototype.removeController = function(_controller) {

   657     _controller.destroy();

   658     this.controllers.removeId(_controller.id);

   659 }

   660 

   661 Rkns.Renderer.Scene.prototype.removeControllersOfType = function(_type) {

   662     var _controllers = this.controllers.filter(function(_ctrl) {

   663             return _ctrl.type == _type;

   664         }),

   665         _this = this;

   666     _controllers.forEach(function(_ctrl) {

   667         _this.removeController(_ctrl);

   668     });

   669 }

   670 

   671 Rkns.Renderer.Scene.prototype.redraw = function() {

   672     this.controllers.forEach(function(_controller) {

   673         _controller.redraw();

   674     });

   675     paper.view.draw();

   676 }

   677 

   678 Rkns.Renderer.Scene.prototype.onMouseMove = function(_event) {

   679     var _hitResult = paper.project.hitTest(_event.point);

   680     if (_hitResult && typeof _hitResult.item.__controller !== "undefined") {

   681         var _newTarget = _hitResult.item.__controller;

   682         if (this.selected_target !== _hitResult.item.__controller) {

   683             if (this.selected_target) {

   684                 this.selected_target.unselect(_newTarget);

   685             }

   686             _newTarget.select(this.selected_target);

   687             this.selected_target = _newTarget;

   688         }

   689     } else {

   690         if (this.selected_target) {

   691             this.selected_target.unselect(null);

   692         }

   693         this.selected_target = null;

   694     }

   695 }

   696 

   697 Rkns.Renderer.Scene.prototype.onMouseDown = function(_event) {

   698     this.is_dragging = false;

   699     var _hitResult = paper.project.hitTest(_event.point);

   700     if (_hitResult && typeof _hitResult.item.__controller !== "undefined") {

   701         this.click_target = _hitResult.item.__controller;

   702         if (this.click_target.type === "node" && _hitResult.type === "stroke") {

   703             var _tmpEdge = this.addController("TempEdge",{});

   704             _tmpEdge.end_pos = _event.point;

   705             _tmpEdge.from_controller = this.click_target;

   706             _tmpEdge.redraw();

   707             this.click_target = _tmpEdge;

   708         }

   709     } else {

   710         this.click_target = null;

   711     }

   712 }

   713 

   714 Rkns.Renderer.Scene.prototype.onMouseDrag = function(_event) {

   715     this.is_dragging = true;

   716     if (this.click_target && typeof this.click_target.paperShift === "function") {

   717         this.click_target.paperShift(_event.delta);

   718     } else {

   719         this.offset = this.offset.add(_event.delta);

   720         this.redraw();

   721     }

   722 }

   723 

   724 Rkns.Renderer.Scene.prototype.onMouseUp = function(_event) {

   725     if (this.click_target) {

   726         this.click_target.mouseup(_event);

   727     }

   728     this.is_dragging = false;

   729     this.click_target = null;

   730 }

   731 

   732 Rkns.Renderer.Scene.prototype.onScroll = function(_event, _scrolldelta) {

   733     this.totalScroll += _scrolldelta;

   734     if (Math.abs(this.totalScroll) >= 1) {

   735         var _off = this.$.offset(),

   736             _delta = new paper.Point([

   737                 _event.pageX - _off.left,

   738                 _event.pageY - _off.top

   739             ]).subtract(this.offset).multiply( Math.SQRT2 - 1 );

   740         if (this.totalScroll > 0) {

   741             this.offset = this.offset.subtract(_delta);

   742             this.scale *= Math.SQRT2;

   743         } else {

   744             this.offset = this.offset.add(_delta.divide( Math.SQRT2 ));

   745             this.scale *= Math.SQRT1_2;

   746         }

   747         this.totalScroll = 0;

   748         this.redraw();

   749     }

   750 }

   751 

   752 Rkns.Renderer.Scene.prototype.onDoubleClick = function(_event) {

   753     var _off = this.$.offset(),

   754         _point = new paper.Point([

   755             _event.pageX - _off.left,

   756             _event.pageY - _off.top

   757         ]);

   758     var _hitResult = paper.project.hitTest(_point);

   759     if (!_hitResult || typeof _hitResult.item.__controller === "undefined") {

   760         var _coords = this.toModelCoords(_point),

   761             _node = this._project.addNode({

   762                 position: {

   763                     x: _coords.x,

   764                     y: _coords.y

   765                 }

   766             }, Rkns._RENDER_AND_SAVE);

   767         _node.__controller.openEditor();

   768     }

   769     paper.view.draw();

   770 }