1 /* paper-renderer.js */

     2 "use strict";

     3 

     4 (function(root) {

     5 

     6     var Rkns = root.Rkns,

     7     _ = Rkns._,

     8     $ = Rkns.$;

     9 

    10     /* Rkns.Renderer Object */

    11 

    12     /* This object contains constants, utility functions and classes for Renkan's Graph Manipulation GUI */

    13 

    14     var Renderer = Rkns.Renderer = {};

    15 

    16     /* Rkns.Renderer._BaseRepresentation Class */

    17 

    18     /* In Renkan, a "Representation" is a sort of ViewModel (in the MVVM paradigm) and bridges the gap between

    19      * models (written with Backbone.js) and the view (written with Paper.js)

    20      * Renkan's representations all inherit from Rkns.Renderer._BaseRepresentation '*/

    21 

    22     var _BaseRepresentation = Renderer._BaseRepresentation = function(_renderer, _model) {

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

    24             this.renderer = _renderer;

    25             this.renkan = _renderer.renkan;

    26             this.project = _renderer.renkan.project;

    27             this.options = _renderer.renkan.options;

    28             this.model = _model;

    29             if (this.model) {

    30                 var _this = this;

    31                 this._changeBinding = function() {

    32                     _this.redraw();

    33                 };

    34                 this._removeBinding = function() {

    35                     _renderer.removeRepresentation(_this);

    36                     _(function() {

    37                         _renderer.redraw();

    38                     }).defer();

    39                 };

    40                 this._selectBinding = function() {

    41                     _this.select();

    42                 };

    43                 this._unselectBinding = function() {

    44                     _this.unselect();

    45                 };

    46                 this.model.on("change", this._changeBinding );

    47                 this.model.on("remove", this._removeBinding );

    48                 this.model.on("select", this._selectBinding );

    49                 this.model.on("unselect", this._unselectBinding );

    50             }

    51         }

    52     };

    53 

    54     /* Rkns.Renderer._BaseRepresentation Methods */

    55 

    56     _(_BaseRepresentation.prototype).extend({

    57         _super: function(_func) {

    58             return _BaseRepresentation.prototype[_func].apply(this, Array.prototype.slice.call(arguments, 1));

    59         },

    60         redraw: function() {},

    61         moveTo: function() {},

    62         show: function() {},

    63         hide: function() {},

    64         select: function() {

    65             if (this.model) {

    66                 this.model.trigger("selected");

    67             }

    68         },

    69         unselect: function() {

    70             if (this.model) {

    71                 this.model.trigger("unselected");

    72             }

    73         },

    74         highlight: function() {},

    75         unhighlight: function() {},

    76         mousedown: function() {},

    77         mouseup: function() {

    78             if (this.model) {

    79                 this.model.trigger("clicked");

    80             }

    81         },

    82         destroy: function() {

    83             if (this.model) {

    84                 this.model.off("change", this._changeBinding );

    85                 this.model.off("remove", this._removeBinding );

    86                 this.model.off("select", this._selectBinding );

    87                 this.model.off("unselect", this._unselectBinding );

    88             }

    89         }

    90     });

    91 

    92     /* End of Rkns.Renderer._BaseRepresentation Class */

    93 

    94     /* Rkns.Renderer._BaseButton Class */

    95 

    96     /* BaseButton is extended by contextual buttons that appear when hovering on nodes and edges */

    97 

    98     var _BaseButton = Renderer._BaseButton = Rkns.Utils.inherit(_BaseRepresentation);

    99 

   100     _(_BaseButton.prototype).extend({

   101         moveTo: function(_pos) {

   102             this.sector.moveTo(_pos);

   103         },

   104         show: function() {

   105             this.sector.show();

   106         },

   107         hide: function() {

   108             this.sector.hide();

   109         },

   110         select: function() {

   111             this.sector.select();

   112         },

   113         unselect: function(_newTarget) {

   114             this.sector.unselect();

   115             if (!_newTarget || (_newTarget !== this.source_representation && _newTarget.source_representation !== this.source_representation)) {

   116                 this.source_representation.unselect();

   117             }

   118         },

   119         destroy: function() {

   120             this.sector.destroy();

   121         }

   122     });

   123 

   124     /* End of Rkns.Renderer._BaseButton Class */

   125 

   126     /* Rkns.Renderer.Node Class */

   127 

   128     /* The representation for the node : A circle, with an image inside and a text label underneath.

   129      * The circle and the image are drawn on canvas and managed by Paper.js.

   130      * The text label is an HTML node, managed by jQuery. */

   131 

   132     var NodeRepr = Renderer.Node = Rkns.Utils.inherit(_BaseRepresentation);

   133 

   134     _(NodeRepr.prototype).extend({

   135         _init: function() {

   136             this.renderer.node_layer.activate();

   137             this.type = "Node";

   138             this.circle = new paper.Path.Circle([0, 0], 1);

   139             this.circle.__representation = this;

   140             if (this.options.show_node_circles) {

   141                 this.circle.strokeWidth = this.options.node_stroke_width;

   142                 this.h_ratio = 1;

   143             } else {

   144                 this.h_ratio = 0;

   145             }

   146             this.title = $('<div class="Rk-Label">').appendTo(this.renderer.labels_$);

   147             if (this.options.editor_mode) {

   148                 this.normal_buttons = [

   149                                        new NodeEditButton(this.renderer, null),

   150                                        new NodeRemoveButton(this.renderer, null),

   151                                        new NodeLinkButton(this.renderer, null),

   152                                        new NodeEnlargeButton(this.renderer, null),

   153                                        new NodeShrinkButton(this.renderer, null)

   154                                        ];

   155                 this.pending_delete_buttons = [

   156                                                new NodeRevertButton(this.renderer, null)

   157                                                ];

   158                 this.all_buttons = this.normal_buttons.concat(this.pending_delete_buttons);

   159                 for (var i = 0; i < this.all_buttons.length; i++) {

   160                     this.all_buttons[i].source_representation = this;

   161                 }

   162                 this.active_buttons = [];

   163             } else {

   164                 this.active_buttons = this.all_buttons = [];

   165             }

   166             this.last_circle_radius = 1;

   167 

   168             if (this.renderer.minimap) {

   169                 this.renderer.minimap.node_layer.activate();

   170                 this.minimap_circle = new paper.Path.Circle([0, 0], 1);

   171                 this.minimap_circle.__representation = this.renderer.minimap.miniframe.__representation;

   172                 this.renderer.minimap.node_group.addChild(this.minimap_circle);

   173             }

   174         },

   175         redraw: function(_dontRedrawEdges) {

   176             var _model_coords = new paper.Point(this.model.get("position")),

   177             _baseRadius = this.options.node_size_base * Math.exp((this.model.get("size") || 0) * Rkns.Utils._NODE_SIZE_STEP);

   178             if (!this.is_dragging || !this.paper_coords) {

   179                 this.paper_coords = this.renderer.toPaperCoords(_model_coords);

   180             }

   181             this.circle_radius = _baseRadius * this.renderer.scale;

   182             if (this.last_circle_radius !== this.circle_radius) {

   183                 this.all_buttons.forEach(function(b) {

   184                     b.setSectorSize();

   185                 });

   186                 this.circle.scale(this.circle_radius / this.last_circle_radius);

   187                 if (this.node_image) {

   188                     this.node_image.scale(this.circle_radius / this.last_circle_radius);

   189                 }

   190             }

   191             this.circle.position = this.paper_coords;

   192             if (this.node_image) {

   193                 this.node_image.position = this.paper_coords.subtract(this.image_delta.multiply(this.circle_radius));

   194             }

   195             this.last_circle_radius = this.circle_radius;

   196 

   197             var old_act_btn = this.active_buttons;

   198 

   199             var opacity = 1;

   200             if (this.model.get("delete_scheduled")) {

   201                 opacity = .5;

   202                 this.active_buttons = this.pending_delete_buttons;

   203                 this.circle.dashArray = [2,2];

   204             } else {

   205                 opacity = 1;

   206                 this.active_buttons = this.normal_buttons;

   207                 this.circle.dashArray = null;

   208             }

   209 

   210             if (this.selected && this.renderer.isEditable()) {

   211                 if (old_act_btn !== this.active_buttons) {

   212                     old_act_btn.forEach(function(b) {

   213                         b.hide();

   214                     });

   215                 }

   216                 this.active_buttons.forEach(function(b) {

   217                     b.show();

   218                 });

   219             }

   220 

   221             if (this.node_image) {

   222                 this.node_image.opacity = this.highlighted ? opacity * .5 : (opacity - .01);

   223             }

   224 

   225             this.circle.fillColor = this.highlighted ? this.options.highlighted_node_fill_color : this.options.node_fill_color;

   226 

   227             this.circle.opacity = this.options.show_node_circles ? opacity : .01;

   228 

   229             var _text = this.model.get("title") || this.renkan.translate(this.options.label_untitled_nodes) || "";

   230             _text = Rkns.Utils.shortenText(_text, this.options.node_label_max_length);

   231 

   232             if (typeof this.highlighted === "object") {

   233                 this.title.html(this.highlighted.replace(_(_text).escape(),'<span class="Rk-Highlighted">$1</span>'));

   234             } else {

   235                 this.title.text(_text);

   236             }

   237 

   238             this.title.css({

   239                 left: this.paper_coords.x,

   240                 top: this.paper_coords.y + this.circle_radius * this.h_ratio + this.options.node_label_distance,

   241                 opacity: opacity

   242             });

   243             var _color = this.model.get("color") || (this.model.get("created_by") || Rkns.Utils._USER_PLACEHOLDER(this.renkan)).get("color");

   244             this.circle.strokeColor = _color;

   245             var _pc = this.paper_coords;

   246             this.all_buttons.forEach(function(b) {

   247                 b.moveTo(_pc);

   248             });

   249             var lastImage = this.img;

   250             this.img = this.model.get("image");

   251             if (this.img && this.img !== lastImage) {

   252                 this.showImage();

   253             }

   254             if (this.node_image && !this.img) {

   255                 this.node_image.remove();

   256                 delete this.node_image;

   257             }

   258 

   259             if (this.renderer.minimap) {

   260                 this.minimap_circle.fillColor = _color;

   261                 var minipos = this.renderer.toMinimapCoords(_model_coords),

   262                 miniradius = this.renderer.minimap.scale * _baseRadius,

   263                 minisize = new paper.Size([miniradius, miniradius]);

   264                 this.minimap_circle.fitBounds(minipos.subtract(minisize), minisize.multiply(2));

   265             }

   266 

   267             if (!_dontRedrawEdges) {

   268                 var _this = this;

   269                 _.each(

   270                         this.project.get("edges").filter(

   271                                 function (ed) {

   272                                     return ((ed.get("to") === _this.model) || (ed.get("from") === _this.model));

   273                                 }

   274                         ),

   275                         function(edge, index, list) {

   276                             var repr = _this.renderer.getRepresentationByModel(edge);

   277                             if (repr && typeof repr.from_representation !== "undefined" && typeof repr.from_representation.paper_coords !== "undefined" && typeof repr.to_representation !== "undefined" && typeof repr.to_representation.paper_coords !== "undefined") {

   278                                 repr.redraw();

   279                             }

   280                         }

   281                 );

   282             }

   283 

   284         },

   285         showImage: function() {

   286             var _image = null;

   287             if (typeof this.renderer.image_cache[this.img] === "undefined") {

   288                 _image = new Image();

   289                 this.renderer.image_cache[this.img] = _image;

   290                 _image.src = this.img;

   291             } else {

   292                 _image = this.renderer.image_cache[this.img];

   293             }

   294             if (_image.width) {

   295                 if (this.node_image) {

   296                     this.node_image.remove();

   297                 }

   298                 this.renderer.node_layer.activate();

   299                 var width = _image.width,

   300                 height = _image.height,

   301                 clipPath = this.model.get("clip_path"),

   302                 hasClipPath = (typeof clipPath !== "undefined" && clipPath),

   303                 _clip = null,

   304                 baseRadius = null,

   305                 centerPoint = null;

   306 

   307                 if (hasClipPath) {

   308                     _clip = new paper.Path();

   309                     var instructions = clipPath.match(/[a-z][^a-z]+/gi) || [],

   310                     lastCoords = [0,0],

   311                     minX = Infinity,

   312                     minY = Infinity,

   313                     maxX = -Infinity,

   314                     maxY = -Infinity;

   315 

   316                     var transformCoords = function(tabc, relative) {

   317                         var newCoords = tabc.slice(1).map(function(v, k) {

   318                             var res = parseFloat(v),

   319                             isY = k % 2;

   320                             if (isY) {

   321                                 res = ( res - .5 ) * height;

   322                             } else {

   323                                 res = ( res - .5 ) * width;

   324                             }

   325                             if (relative) {

   326                                 res += lastCoords[isY];

   327                             }

   328                             if (isY) {

   329                                 minY = Math.min(minY, res);

   330                                 maxY = Math.max(maxY, res);

   331                             } else {

   332                                 minX = Math.min(minX, res);

   333                                 maxX = Math.max(maxX, res);

   334                             }

   335                             return res;

   336                         });

   337                         lastCoords = newCoords.slice(-2);

   338                         return newCoords;

   339                     };

   340 

   341                     instructions.forEach(function(instr) {

   342                         var coords = instr.match(/([a-z]|[0-9.-]+)/ig) || [""];

   343                         switch(coords[0]) {

   344                         case "M":

   345                             _clip.moveTo(transformCoords(coords));

   346                             break;

   347                         case "m":

   348                             _clip.moveTo(transformCoords(coords, true));

   349                             break;

   350                         case "L":

   351                             _clip.lineTo(transformCoords(coords));

   352                             break;

   353                         case "l":

   354                             _clip.lineTo(transformCoords(coords, true));

   355                             break;

   356                         case "C":

   357                             _clip.cubicCurveTo(transformCoords(coords));

   358                             break;

   359                         case "c":

   360                             _clip.cubicCurveTo(transformCoords(coords, true));

   361                             break;

   362                         case "Q":

   363                             _clip.quadraticCurveTo(transformCoords(coords));

   364                             break;

   365                         case "q":

   366                             _clip.quadraticCurveTo(transformCoords(coords, true));

   367                             break;

   368                         }

   369                     });

   370 

   371                     baseRadius = Math[this.options.node_images_fill_mode ? "min" : "max"](maxX - minX, maxY - minY) / 2;

   372                     centerPoint = new paper.Point((maxX + minX) / 2, (maxY + minY) / 2);

   373                     if (!this.options.show_node_circles) {

   374                         this.h_ratio = (maxY - minY) / (2 * baseRadius);

   375                     }

   376                 } else {

   377                     baseRadius = Math[this.options.node_images_fill_mode ? "min" : "max"](width, height) / 2;

   378                     centerPoint = new paper.Point(0,0);

   379                     if (!this.options.show_node_circles) {

   380                         this.h_ratio = height / (2 * baseRadius);

   381                     }

   382                 }

   383                 var _raster = new paper.Raster(_image);

   384                 _raster.locked = true; // Disable mouse events on icon

   385                 if (hasClipPath) {

   386                     _raster = new paper.Group(_clip, _raster);

   387                     _raster.opacity = .99;

   388                     /* This is a workaround to allow clipping at group level

   389                      * If opacity was set to 1, paper.js would merge all clipping groups in one (known bug).

   390                      */

   391                     _raster.clipped = true;

   392                     _clip.__representation = this;

   393                 }

   394                 if (this.options.clip_node_images) {

   395                     var _circleClip = new paper.Path.Circle(centerPoint, baseRadius);

   396                     _raster = new paper.Group(_circleClip, _raster);

   397                     _raster.opacity = .99;

   398                     _raster.clipped = true;

   399                     _circleClip.__representation = this;

   400                 }

   401                 this.image_delta = centerPoint.divide(baseRadius);

   402                 this.node_image = _raster;

   403                 this.node_image.__representation = _this;

   404                 this.node_image.scale(this.circle_radius / baseRadius);

   405                 this.node_image.position = this.paper_coords.subtract(this.image_delta.multiply(this.circle_radius));

   406                 this.redraw();

   407                 this.renderer.throttledPaperDraw();

   408             } else {

   409                 var _this = this;

   410                 $(_image).on("load", function() {

   411                     _this.showImage();

   412                 });

   413             }

   414         },

   415         paperShift: function(_delta) {

   416             if (this.options.editor_mode) {

   417                 if (!this.renkan.read_only) {

   418                     this.is_dragging = true;

   419                     this.paper_coords = this.paper_coords.add(_delta);

   420                     this.redraw();

   421                 }

   422             } else {

   423                 this.renderer.paperShift(_delta);

   424             }

   425         },

   426         openEditor: function() {

   427             this.renderer.removeRepresentationsOfType("editor");

   428             var _editor = this.renderer.addRepresentation("NodeEditor",null);

   429             _editor.source_representation = this;

   430             _editor.draw();

   431         },

   432         select: function() {

   433             this.selected = true;

   434             this.circle.strokeWidth = this.options.selected_node_stroke_width;

   435             if (this.renderer.isEditable()) {

   436                 this.active_buttons.forEach(function(b) {

   437                     b.show();

   438                 });

   439             }

   440             var _uri = this.model.get("uri");

   441             if (_uri) {

   442                 $('.Rk-Bin-Item').each(function() {

   443                     var _el = $(this);

   444                     if (_el.attr("data-uri") == _uri) {

   445                         _el.addClass("selected");

   446                     }

   447                 });

   448             }

   449             if (!this.options.editor_mode) {

   450                 this.openEditor();

   451             }

   452 

   453             if (this.renderer.minimap) {

   454                 this.minimap_circle.strokeWidth = this.options.minimap_highlight_weight;

   455                 this.minimap_circle.strokeColor = this.options.minimap_highlight_color;

   456             }

   457             this._super("select");

   458         },

   459         unselect: function(_newTarget) {

   460             if (!_newTarget || _newTarget.source_representation !== this) {

   461                 this.selected = false;

   462                 this.all_buttons.forEach(function(b) {

   463                     b.hide();

   464                 });

   465                 this.circle.strokeWidth = this.options.node_stroke_width;

   466                 $('.Rk-Bin-Item').removeClass("selected");

   467                 if (this.renderer.minimap) {

   468                     this.minimap_circle.strokeColor = undefined;

   469                 }

   470                 this._super("unselect");

   471             }

   472         },

   473         highlight: function(textToReplace) {

   474             var hlvalue = textToReplace || true;

   475             if (this.highlighted === hlvalue) {

   476                 return;

   477             }

   478             this.highlighted = hlvalue;

   479             this.redraw();

   480             this.renderer.throttledPaperDraw();

   481         },

   482         unhighlight: function() {

   483             if (!this.highlighted) {

   484                 return;

   485             }

   486             this.highlighted = false;

   487             this.redraw();

   488             this.renderer.throttledPaperDraw();

   489         },

   490         saveCoords: function() {

   491             var _coords = this.renderer.toModelCoords(this.paper_coords),

   492             _data = {

   493                 position: {

   494                     x: _coords.x,

   495                     y: _coords.y

   496                 }

   497             };

   498             if (this.renderer.isEditable()) {

   499                 this.model.set(_data);

   500             }

   501         },

   502         mousedown: function(_event, _isTouch) {

   503             if (_isTouch) {

   504                 this.renderer.unselectAll();

   505                 this.select();

   506             }

   507         },

   508         mouseup: function(_event, _isTouch) {

   509             if (this.renderer.is_dragging && this.renderer.isEditable()) {

   510                 this.saveCoords();

   511             } else {

   512                 if (!_isTouch && !this.model.get("delete_scheduled")) {

   513                     this.openEditor();

   514                 }

   515                 this.model.trigger("clicked");

   516             }

   517             this.renderer.click_target = null;

   518             this.renderer.is_dragging = false;

   519             this.is_dragging = false;

   520         },

   521         destroy: function(_event) {

   522             this._super("destroy");

   523             this.all_buttons.forEach(function(b) {

   524                 b.destroy();

   525             });

   526             this.circle.remove();

   527             this.title.remove();

   528             if (this.renderer.minimap) {

   529                 this.minimap_circle.remove();

   530             }

   531             if (this.node_image) {

   532                 this.node_image.remove();

   533             }

   534         }

   535     });

   536 

   537     /* */

   538 

   539     var Edge = Renderer.Edge = Rkns.Utils.inherit(_BaseRepresentation);

   540 

   541     _(Edge.prototype).extend({

   542         _init: function() {

   543             this.renderer.edge_layer.activate();

   544             this.type = "Edge";

   545             this.from_representation = this.renderer.getRepresentationByModel(this.model.get("from"));

   546             this.to_representation = this.renderer.getRepresentationByModel(this.model.get("to"));

   547             this.bundle = this.renderer.addToBundles(this);

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

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

   550             this.line.__representation = this;

   551             this.line.strokeWidth = this.options.edge_stroke_width;

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

   553             this.arrow.add(

   554                     [ 0, 0 ],

   555                     [ this.options.edge_arrow_length, this.options.edge_arrow_width / 2 ],

   556                     [ 0, this.options.edge_arrow_width ]

   557             );

   558             this.arrow.__representation = this;

   559             this.text = $('<div class="Rk-Label Rk-Edge-Label">').appendTo(this.renderer.labels_$);

   560             this.arrow_angle = 0;

   561             if (this.options.editor_mode) {

   562                 this.normal_buttons = [

   563                                        new EdgeEditButton(this.renderer, null),

   564                                        new EdgeRemoveButton(this.renderer, null)

   565                                        ];

   566                 this.pending_delete_buttons = [

   567                                                new EdgeRevertButton(this.renderer, null)

   568                                                ];

   569                 this.all_buttons = this.normal_buttons.concat(this.pending_delete_buttons);

   570                 for (var i = 0; i < this.all_buttons.length; i++) {

   571                     this.all_buttons[i].source_representation = this;

   572                 }

   573                 this.active_buttons = [];

   574             } else {

   575                 this.active_buttons = this.all_buttons = [];

   576             }

   577 

   578             if (this.renderer.minimap) {

   579                 this.renderer.minimap.edge_layer.activate();

   580                 this.minimap_line = new paper.Path();

   581                 this.minimap_line.add([0,0],[0,0]);

   582                 this.minimap_line.__representation = this.renderer.minimap.miniframe.__representation;

   583                 this.minimap_line.strokeWidth = 1;

   584             }

   585         },

   586         redraw: function() {

   587             var from = this.model.get("from"),

   588             to = this.model.get("to");

   589             if (!from || !to) {

   590                 return;

   591             }

   592             this.from_representation = this.renderer.getRepresentationByModel(from);

   593             this.to_representation = this.renderer.getRepresentationByModel(to);

   594             if (typeof this.from_representation === "undefined" || typeof this.to_representation === "undefined") {

   595                 return;

   596             }

   597             var _p0a = this.from_representation.paper_coords,

   598             _p1a = this.to_representation.paper_coords,

   599             _v = _p1a.subtract(_p0a),

   600             _r = _v.length,

   601             _u = _v.divide(_r),

   602             _ortho = new paper.Point([- _u.y, _u.x]),

   603             _group_pos = this.bundle.getPosition(this),

   604             _delta = _ortho.multiply( this.options.edge_gap_in_bundles * _group_pos ),

   605             _p0b = _p0a.add(_delta), /* Adding a 4 px difference */

   606             _p1b = _p1a.add(_delta), /* to differentiate bundled links */

   607             _a = _v.angle,

   608             _textdelta = _ortho.multiply(this.options.edge_label_distance),

   609             _handle = _v.divide(3),

   610             _color = this.model.get("color") || this.model.get("color") || (this.model.get("created_by") || Rkns.Utils._USER_PLACEHOLDER(this.renkan)).get("color"),

   611             opacity = 1;

   612 

   613             if (this.model.get("delete_scheduled") || this.from_representation.model.get("delete_scheduled") || this.to_representation.model.get("delete_scheduled")) {

   614                 opacity = .5;

   615                 this.line.dashArray = [2, 2];

   616             } else {

   617                 opacity = 1;

   618                 this.line.dashArray = null;

   619             }

   620 

   621             var old_act_btn = this.active_buttons;

   622 

   623             this.active_buttons = this.model.get("delete_scheduled") ? this.pending_delete_buttons : this.normal_buttons;

   624 

   625             if (this.selected && this.renderer.isEditable() && old_act_btn !== this.active_buttons) {

   626                 old_act_btn.forEach(function(b) {

   627                     b.hide();

   628                 });

   629                 this.active_buttons.forEach(function(b) {

   630                     b.show();

   631                 });

   632             }

   633 

   634             this.paper_coords = _p0b.add(_p1b).divide(2);

   635             this.line.strokeColor = _color;

   636             this.line.opacity = opacity;

   637             this.line.segments[0].point = _p0a;

   638             this.line.segments[1].point = this.paper_coords;

   639             this.line.segments[1].handleIn = _handle.multiply(-1);

   640             this.line.segments[1].handleOut = _handle;

   641             this.line.segments[2].point = _p1a;

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

   643             this.arrow.fillColor = _color;

   644             this.arrow.opacity = opacity;

   645             this.arrow.position = this.paper_coords;

   646             this.arrow_angle = _a;

   647             if (_a > 90) {

   648                 _a -= 180;

   649                 _textdelta = _textdelta.multiply(-1);

   650             }

   651             if (_a < -90) {

   652                 _a += 180;

   653                 _textdelta = _textdelta.multiply(-1);

   654             }

   655             var _text = this.model.get("title") || this.renkan.translate(this.options.label_untitled_edges) || "";

   656             _text = Rkns.Utils.shortenText(_text, this.options.node_label_max_length);

   657             this.text.text(_text);

   658             var _textpos = this.paper_coords.add(_textdelta);

   659             this.text.css({

   660                 left: _textpos.x,

   661                 top: _textpos.y,

   662                 transform: "rotate(" + _a + "deg)",

   663                 "-moz-transform": "rotate(" + _a + "deg)",

   664                 "-webkit-transform": "rotate(" + _a + "deg)",

   665                 opacity: opacity

   666             });

   667             this.text_angle = _a;

   668 

   669             var _pc = this.paper_coords;

   670             this.all_buttons.forEach(function(b) {

   671                 b.moveTo(_pc);

   672             });

   673 

   674             if (this.renderer.minimap) {

   675                 this.minimap_line.strokeColor = _color;

   676                 this.minimap_line.segments[0].point = this.renderer.toMinimapCoords(new paper.Point(this.from_representation.model.get("position")));

   677                 this.minimap_line.segments[1].point = this.renderer.toMinimapCoords(new paper.Point(this.to_representation.model.get("position")));

   678             }

   679         },

   680         openEditor: function() {

   681             this.renderer.removeRepresentationsOfType("editor");

   682             var _editor = this.renderer.addRepresentation("EdgeEditor",null);

   683             _editor.source_representation = this;

   684             _editor.draw();

   685         },

   686         select: function() {

   687             this.selected = true;

   688             this.line.strokeWidth = this.options.selected_edge_stroke_width;

   689             if (this.renderer.isEditable()) {

   690                 this.active_buttons.forEach(function(b) {

   691                     b.show();

   692                 });

   693             }

   694             if (!this.options.editor_mode) {

   695                 this.openEditor();

   696             }

   697             this._super("select");

   698         },

   699         unselect: function(_newTarget) {

   700             if (!_newTarget || _newTarget.source_representation !== this) {

   701                 this.selected = false;

   702                 if (this.options.editor_mode) {

   703                     this.all_buttons.forEach(function(b) {

   704                         b.hide();

   705                     });

   706                 }

   707                 this.line.strokeWidth = this.options.edge_stroke_width;

   708                 this._super("unselect");

   709             }

   710         },

   711         mousedown: function(_event, _isTouch) {

   712             if (_isTouch) {

   713                 this.renderer.unselectAll();

   714                 this.select();

   715             }

   716         },

   717         mouseup: function(_event, _isTouch) {

   718             if (!this.renkan.read_only && this.renderer.is_dragging) {

   719                 this.from_representation.saveCoords();

   720                 this.to_representation.saveCoords();

   721                 this.from_representation.is_dragging = false;

   722                 this.to_representation.is_dragging = false;

   723             } else {

   724                 if (!_isTouch) {

   725                     this.openEditor();

   726                 }

   727                 this.model.trigger("clicked");

   728             }

   729             this.renderer.click_target = null;

   730             this.renderer.is_dragging = false;

   731         },

   732         paperShift: function(_delta) {

   733             if (this.options.editor_mode) {

   734                 if (!this.options.read_only) {

   735                     this.from_representation.paperShift(_delta);

   736                     this.to_representation.paperShift(_delta);

   737                 }

   738             } else {

   739                 this.renderer.paperShift(_delta);

   740             }

   741         },

   742         destroy: function() {

   743             this._super("destroy");

   744             this.line.remove();

   745             this.arrow.remove();

   746             this.text.remove();

   747             if (this.renderer.minimap) {

   748                 this.minimap_line.remove();

   749             }

   750             this.all_buttons.forEach(function(b) {

   751                 b.destroy();

   752             });

   753             var _this = this;

   754             this.bundle.edges = _(this.bundle.edges).reject(function(_edge) {

   755                 return _this === _edge;

   756             });

   757         }

   758     });

   759 

   760     /* */

   761 

   762     var TempEdge = Renderer.TempEdge = Rkns.Utils.inherit(_BaseRepresentation);

   763 

   764     _(TempEdge.prototype).extend({

   765         _init: function() {

   766             this.renderer.edge_layer.activate();

   767             this.type = "Temp-edge";

   768 

   769             var _color = (this.project.get("users").get(this.renkan.current_user) || Rkns.Utils._USER_PLACEHOLDER(this.renkan)).get("color");

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

   771             this.line.strokeColor = _color;

   772             this.line.dashArray = [4, 2];

   773             this.line.strokeWidth = this.options.selected_edge_stroke_width;

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

   775             this.line.__representation = this;

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

   777             this.arrow.fillColor = _color;

   778             this.arrow.add(

   779                     [ 0, 0 ],

   780                     [ this.options.edge_arrow_length, this.options.edge_arrow_width / 2 ],

   781                     [ 0, this.options.edge_arrow_width ]

   782             );

   783             this.arrow.__representation = this;

   784             this.arrow_angle = 0;

   785         },

   786         redraw: function() {

   787             var _p0 = this.from_representation.paper_coords,

   788             _p1 = this.end_pos,

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

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

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

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

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

   794             this.arrow.position = _c;

   795             this.arrow_angle = _a;

   796         },

   797         paperShift: function(_delta) {

   798             if (!this.renderer.isEditable()) {

   799                 this.renderer.removeRepresentation(_this);

   800                 paper.view.draw();

   801                 return;

   802             }

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

   804             var _hitResult = paper.project.hitTest(this.end_pos);

   805             this.renderer.findTarget(_hitResult);

   806             this.redraw();

   807         },

   808         mouseup: function(_event, _isTouch) {

   809             var _hitResult = paper.project.hitTest(_event.point),

   810             _model = this.from_representation.model,

   811             _endDrag = true;

   812             if (_hitResult && typeof _hitResult.item.__representation !== "undefined") {

   813                 var _target = _hitResult.item.__representation;

   814                 if (_target.type.substr(0,4) === "Node") {

   815                     var _destmodel = _target.model || _target.source_representation.model;

   816                     if (_model !== _destmodel) {

   817                         var _data = {

   818                                 id: Rkns.Utils.getUID('edge'),

   819                                 created_by: this.renkan.current_user,

   820                                 from: _model,

   821                                 to: _destmodel

   822                         };

   823                         if (this.renderer.isEditable()) {

   824                             this.project.addEdge(_data);

   825                         }

   826                     }

   827                 }

   828 

   829                 if (_model === _target.model || (_target.source_representation && _target.source_representation.model === _model)) {

   830                     _endDrag = false;

   831                     this.renderer.is_dragging = true;

   832                 }

   833             }

   834             if (_endDrag) {

   835                 this.renderer.click_target = null;

   836                 this.renderer.is_dragging = false;

   837                 this.renderer.removeRepresentation(this);

   838                 paper.view.draw();

   839             }

   840         },

   841         destroy: function() {

   842             this.arrow.remove();

   843             this.line.remove();

   844         }

   845     });

   846 

   847     /* */

   848 

   849     var _BaseEditor = Renderer._BaseEditor = Rkns.Utils.inherit(_BaseRepresentation);

   850 

   851     _(_BaseEditor.prototype).extend({

   852         _init: function() {

   853             this.renderer.buttons_layer.activate();

   854             this.type = "editor";

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

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

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

   858             this.editor_block.strokeWidth = this.options.tooltip_border_width;

   859             this.editor_block.strokeColor = this.options.tooltip_border_color;

   860             this.editor_block.opacity = .8;

   861             this.editor_$ = $('<div>')

   862             .appendTo(this.renderer.editor_$)

   863             .css({

   864                 position: "absolute",

   865                 opacity: .8

   866             })

   867             .hide();

   868         },

   869         destroy: function() {

   870             this.editor_block.remove();

   871             this.editor_$.remove();

   872         }

   873     });

   874 

   875     /* */

   876 

   877     var NodeEditor = Renderer.NodeEditor = Rkns.Utils.inherit(_BaseEditor);

   878 

   879     _(NodeEditor.prototype).extend({

   880         template: _.template(

   881                 '<h2><span class="Rk-CloseX">&times;</span><%-renkan.translate("Edit Node")%></span></h2>'

   882                 + '<p><label><%-renkan.translate("Title:")%></label><input class="Rk-Edit-Title" type="text" value="<%-node.title%>"/></p>'

   883                 + '<% if (options.show_node_editor_uri) { %><p><label><%-renkan.translate("URI:")%></label><input class="Rk-Edit-URI" type="text" value="<%-node.uri%>"/><a class="Rk-Edit-Goto" href="<%-node.uri%>" target="_blank"></a></p><% } %>'

   884                 + '<% if (options.show_node_editor_description) { %><p><label><%-renkan.translate("Description:")%></label><textarea class="Rk-Edit-Description"><%-node.description%></textarea></p><% } %>'

   885                 + '<% if (options.show_node_editor_size) { %><p><span class="Rk-Editor-Label"><%-renkan.translate("Size:")%></span><a href="#" class="Rk-Edit-Size-Down">-</a><span class="Rk-Edit-Size-Value"><%-node.size%></span><a href="#" class="Rk-Edit-Size-Up">+</a></p><% } %>'

   886                 + '<% if (options.show_node_editor_color) { %><div class="Rk-Editor-p"><span class="Rk-Editor-Label"><%-renkan.translate("Node color:")%></span><div class="Rk-Edit-ColorPicker-Wrapper"><span class="Rk-Edit-Color" style="background:<%-node.color%>;"><span class="Rk-Edit-ColorTip"></span></span>'

   887                 + '<%= renkan.colorPicker %><span class="Rk-Edit-ColorPicker-Text"><%- renkan.translate("Choose color") %></span></div></div><% } %>'

   888                 + '<% if (options.show_node_editor_image) { %><div class="Rk-Edit-ImgWrap"><div class="Rk-Edit-ImgPreview"><img src="<%-node.image || node.image_placeholder%>" />'

   889                 + '<% if (node.clip_path) { %><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none"><path style="stroke-width: .02; stroke:red; fill-opacity:.3; fill:red;" d="<%- node.clip_path %>"/></svg><% }%>'

   890                 + '</div></div><p><label><%-renkan.translate("Image URL:")%></label><input class="Rk-Edit-Image" type="text" value="<%-node.image%>"/></p>'

   891                 + '<p><label><%-renkan.translate("Choose Image File:")%></label><input class="Rk-Edit-Image-File" type="file" accept="image/*"/></p><% } %>'    

   892                 + '<% if (options.show_node_editor_creator && node.has_creator) { %><p><span class="Rk-Editor-Label"><%-renkan.translate("Created by:")%></span> <span class="Rk-UserColor" style="background:<%-node.created_by_color%>;"></span><%- shortenText(node.created_by_title, 25) %></p><% } %>'

   893         ),

   894         readOnlyTemplate: _.template(

   895                 '<h2><span class="Rk-CloseX">&times;</span><% if (options.show_node_tooltip_color) { %><span class="Rk-UserColor" style="background:<%-node.color%>;"></span><% } %>'

   896                 + '<span class="Rk-Display-Title"><% if (node.uri) { %><a href="<%-node.uri%>" target="_blank"><% } %><%-node.title%><% if (node.uri) { %></a><% } %></span></h2>'

   897                 + '<% if (node.uri && options.show_node_tooltip_uri) { %><p class="Rk-Display-URI"><a href="<%-node.uri%>" target="_blank"><%-node.short_uri%></a></p><% } %>'

   898                 + '<% if (options.show_node_tooltip_description) { %><p class="Rk-Display-Description"><%-node.description%></p><% } %>'

   899                 + '<% if (node.image && options.show_node_tooltip_image) { %><img class="Rk-Display-ImgPreview" src="<%-node.image%>" /><% } %>'

   900                 + '<% if (node.has_creator && options.show_node_tooltip_creator) { %><p><span class="Rk-Editor-Label"><%-renkan.translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-node.created_by_color%>;"></span><%- shortenText(node.created_by_title, 25) %></p><% } %>'

   901         ),

   902         draw: function() {

   903             var _model = this.source_representation.model,

   904             _created_by = _model.get("created_by") || Rkns.Utils._USER_PLACEHOLDER(this.renkan),

   905             _template = (this.renderer.isEditable() ? this.template : this.readOnlyTemplate ),

   906             _image_placeholder = this.options.static_url + "img/image-placeholder.png",

   907             _size = (_model.get("size") || 0);

   908             this.editor_$

   909             .html(_template({

   910                 node: {

   911                     has_creator: !!_model.get("created_by"),

   912                     title: _model.get("title"),

   913                     uri: _model.get("uri"),

   914                     short_uri:  Rkns.Utils.shortenText((_model.get("uri") || "").replace(/^(https?:\/\/)?(www\.)?/,'').replace(/\/$/,''),40),

   915                     description: _model.get("description"),

   916                     image: _model.get("image") || "",

   917                     image_placeholder: _image_placeholder,

   918                     color: _model.get("color") || _created_by.get("color"),

   919                     clip_path: _model.get("clip_path") || false,

   920                     created_by_color: _created_by.get("color"),

   921                     created_by_title: _created_by.get("title"),

   922                     size: (_size > 0 ? "+" : "") + _size

   923                 },

   924                 renkan: this.renkan,

   925                 options: this.options,

   926                 shortenText: Rkns.Utils.shortenText

   927             }));

   928             this.redraw();

   929             var _this = this,

   930             closeEditor = function() {

   931                 _this.renderer.removeRepresentation(_this);

   932                 paper.view.draw();

   933             };

   934 

   935             this.editor_$.find(".Rk-CloseX").click(closeEditor);

   936 

   937             this.editor_$.find(".Rk-Edit-Goto").click(function() {

   938                 if (!_model.get("uri")) {

   939                     return false;

   940                 }

   941             });

   942 

   943             if (this.renderer.isEditable()) {

   944 

   945                 var onFieldChange = _(function() {

   946                     _(function() {

   947                         if (_this.renderer.isEditable()) {

   948                             var _data = {

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

   950                             };

   951                             if (_this.options.show_node_editor_uri) {

   952                                 _data.uri = _this.editor_$.find(".Rk-Edit-URI").val();

   953                                 _this.editor_$.find(".Rk-Edit-Goto").attr("href",_data.uri || "#");

   954                             }

   955                             if (_this.options.show_node_editor_image) {

   956                                 _data.image = _this.editor_$.find(".Rk-Edit-Image").val();

   957                                 _this.editor_$.find(".Rk-Edit-ImgPreview").attr("src", _data.image || _image_placeholder);

   958                             }

   959                             if (_this.options.show_node_editor_description) {

   960                                 _data.description = _this.editor_$.find(".Rk-Edit-Description").val();

   961                             }

   962                             _model.set(_data);

   963                             _this.redraw();

   964                         } else {

   965                             closeEditor();

   966                         }

   967 

   968                     }).defer();

   969                 }).throttle(500);

   970 

   971                 this.editor_$.on("keyup", function(_e) {

   972                     if (_e.keyCode === 27) {

   973                         closeEditor();

   974                     }

   975                 });

   976 

   977                 this.editor_$.find("input, textarea").on("change keyup paste", onFieldChange);

   978 

   979                 this.editor_$.find(".Rk-Edit-Image-File").change(function() {

   980                     if (this.files.length) {

   981                         var f = this.files[0],

   982                         fr = new FileReader();

   983                         if (f.type.substr(0,5) !== "image") {

   984                             alert(_this.renkan.translate("This file is not an image"));

   985                             return;

   986                         }

   987                         if (f.size > (_this.options.uploaded_image_max_kb * 1024)) {

   988                             alert(_this.renkan.translate("Image size must be under ") + _this.options.uploaded_image_max_kb + _this.renkan.translate("KB"));

   989                             return;

   990                         }

   991                         fr.onload = function(e) {

   992                             _this.editor_$.find(".Rk-Edit-Image").val(e.target.result);

   993                             onFieldChange();

   994                         };

   995                         fr.readAsDataURL(f);

   996                     }

   997                 });

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

   999 

  1000                 var _picker = _this.editor_$.find(".Rk-Edit-ColorPicker");

  1001 

  1002                 this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover(

  1003                         function(_e) {

  1004                             _e.preventDefault();

  1005                             _picker.show();

  1006                         },

  1007                         function(_e) {

  1008                             _e.preventDefault();

  1009                             _picker.hide();

  1010                         }

  1011                 );

  1012 

  1013                 _picker.find("li").hover(

  1014                         function(_e) {

  1015                             _e.preventDefault();

  1016                             _this.editor_$.find(".Rk-Edit-Color").css("background", $(this).attr("data-color"));

  1017                         },

  1018                         function(_e) {

  1019                             _e.preventDefault();

  1020                             _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Rkns.Utils._USER_PLACEHOLDER(_this.renkan)).get("color"));

  1021                         }

  1022                 ).click(function(_e) {

  1023                     _e.preventDefault();

  1024                     if (_this.renderer.isEditable()) {

  1025                         _model.set("color", $(this).attr("data-color"));

  1026                         _picker.hide();

  1027                         paper.view.draw();

  1028                     } else {

  1029                         closeEditor();

  1030                     }

  1031                 });

  1032 

  1033                 var shiftSize = function(n) {

  1034                     if (_this.renderer.isEditable()) {

  1035                         var _newsize = n+(_model.get("size") || 0);

  1036                         _this.editor_$.find(".Rk-Edit-Size-Value").text((_newsize > 0 ? "+" : "") + _newsize);

  1037                         _model.set("size", _newsize);

  1038                         paper.view.draw();

  1039                     } else {

  1040                         closeEditor();

  1041                     }

  1042                 };

  1043 

  1044                 this.editor_$.find(".Rk-Edit-Size-Down").click(function() {

  1045                     shiftSize(-1);

  1046                     return false;

  1047                 });

  1048                 this.editor_$.find(".Rk-Edit-Size-Up").click(function() {

  1049                     shiftSize(1);

  1050                     return false;

  1051                 });

  1052             } else {

  1053                 if (typeof this.source_representation.highlighted === "object") {

  1054                     var titlehtml = this.source_representation.highlighted.replace(_(_model.get("title")).escape(),'<span class="Rk-Highlighted">$1</span>');

  1055                     this.editor_$.find(".Rk-Display-Title" + (_model.get("uri") ? " a" : "")).html(titlehtml);

  1056                     if (this.options.show_node_tooltip_description) {

  1057                         this.editor_$.find(".Rk-Display-Description").html(this.source_representation.highlighted.replace(_(_model.get("description")).escape(),'<span class="Rk-Highlighted">$1</span>'));

  1058                     }

  1059                 }

  1060             }

  1061             this.editor_$.find("img").load(function() {

  1062                 _this.redraw();

  1063             });

  1064         },

  1065         redraw: function() {

  1066             var _coords = this.source_representation.paper_coords;

  1067             Rkns.Utils.drawEditBox(this.options, _coords, this.editor_block, this.source_representation.circle_radius * .75, this.editor_$);

  1068             this.editor_$.show();

  1069             paper.view.draw();

  1070         }

  1071     });

  1072 

  1073     /* */

  1074 

  1075     var EdgeEditor = Renderer.EdgeEditor = Rkns.Utils.inherit(_BaseEditor);

  1076 

  1077     _(EdgeEditor.prototype).extend({

  1078         template: _.template(

  1079                 '<h2><span class="Rk-CloseX">&times;</span><%-renkan.translate("Edit Edge")%></span></h2>'

  1080                 + '<p><label><%-renkan.translate("Title:")%></label><input class="Rk-Edit-Title" type="text" value="<%-edge.title%>"/></p>'

  1081                 + '<% if (options.show_edge_editor_uri) { %><p><label><%-renkan.translate("URI:")%></label><input class="Rk-Edit-URI" type="text" value="<%-edge.uri%>"/><a class="Rk-Edit-Goto" href="<%-edge.uri%>" target="_blank"></a></p>'

  1082                 + '<% if (options.properties.length) { %><p><label><%-renkan.translate("Choose from vocabulary:")%></label><select class="Rk-Edit-Vocabulary">'

  1083                 + '<% _(options.properties).each(function(ontology) { %><option class="Rk-Edit-Vocabulary-Class" value=""><%- renkan.translate(ontology.label) %></option>'

  1084                 + '<% _(ontology.properties).each(function(property) { var uri = ontology["base-uri"] + property.uri; %><option class="Rk-Edit-Vocabulary-Property" value="<%- uri %>'

  1085                 + '"<% if (uri === edge.uri) { %> selected<% } %>><%- renkan.translate(property.label) %></option>'

  1086                 + '<% }) %><% }) %></select></p><% } } %>'

  1087                 + '<% if (options.show_edge_editor_color) { %><div class="Rk-Editor-p"><span class="Rk-Editor-Label"><%-renkan.translate("Edge color:")%></span><div class="Rk-Edit-ColorPicker-Wrapper"><span class="Rk-Edit-Color" style="background:<%-edge.color%>;"><span class="Rk-Edit-ColorTip"></span></span>'

  1088                 + '<%= renkan.colorPicker %><span class="Rk-Edit-ColorPicker-Text"><%- renkan.translate("Choose color") %></span></div></div><% } %>'

  1089                 + '<% if (options.show_edge_editor_direction) { %><p><span class="Rk-Edit-Direction"><%- renkan.translate("Change edge direction") %></span></p><% } %>'

  1090                 + '<% if (options.show_edge_editor_nodes) { %><p><span class="Rk-Editor-Label"><%-renkan.translate("From:")%></span><span class="Rk-UserColor" style="background:<%-edge.from_color%>;"></span><%- shortenText(edge.from_title, 25) %></p>'

  1091                 + '<p><span class="Rk-Editor-Label"><%-renkan.translate("To:")%></span><span class="Rk-UserColor" style="background:<%-edge.to_color%>;"></span><%- shortenText(edge.to_title, 25) %></p><% } %>'

  1092                 + '<% if (options.show_edge_editor_creator && edge.has_creator) { %><p><span class="Rk-Editor-Label"><%-renkan.translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-edge.created_by_color%>;"></span><%- shortenText(edge.created_by_title, 25) %></p><% } %>'

  1093         ),

  1094         readOnlyTemplate: _.template(

  1095                 '<h2><span class="Rk-CloseX">&times;</span><% if (options.show_edge_tooltip_color) { %><span class="Rk-UserColor" style="background:<%-edge.color%>;"></span><% } %>'

  1096                 + '<span class="Rk-Display-Title"><% if (edge.uri) { %><a href="<%-edge.uri%>" target="_blank"><% } %><%-edge.title%><% if (edge.uri) { %></a><% } %></span></h2>'

  1097                 + '<% if (options.show_edge_tooltip_uri && edge.uri) { %><p class="Rk-Display-URI"><a href="<%-edge.uri%>" target="_blank"><%-edge.short_uri%></a></p><% } %>'

  1098                 + '<p><%-edge.description%></p>'

  1099                 + '<% if (options.show_edge_tooltip_nodes) { %><p><span class="Rk-Editor-Label"><%-renkan.translate("From:")%></span><span class="Rk-UserColor" style="background:<%-edge.from_color%>;"></span><%- shortenText(edge.from_title, 25) %></p>'

  1100                 + '<p><span class="Rk-Editor-Label"><%-renkan.translate("To:")%></span><span class="Rk-UserColor" style="background:<%-edge.to_color%>;"></span><%- shortenText(edge.to_title, 25) %></p><% } %>'

  1101                 + '<% if (options.show_edge_tooltip_creator && edge.has_creator) { %><p><span class="Rk-Editor-Label"><%-renkan.translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-edge.created_by_color%>;"></span><%- shortenText(edge.created_by_title, 25) %></p><% } %>'

  1102         ),

  1103         draw: function() {

  1104             var _model = this.source_representation.model,

  1105             _from_model = _model.get("from"),

  1106             _to_model = _model.get("to"),

  1107             _created_by = _model.get("created_by") || Rkns.Utils._USER_PLACEHOLDER(this.renkan),

  1108             _template = (this.renderer.isEditable() ? this.template : this.readOnlyTemplate);

  1109             this.editor_$

  1110             .html(_template({

  1111                 edge: {

  1112                     has_creator: !!_model.get("created_by"),

  1113                     title: _model.get("title"),

  1114                     uri: _model.get("uri"),

  1115                     short_uri:  Rkns.Utils.shortenText((_model.get("uri") || "").replace(/^(https?:\/\/)?(www\.)?/,'').replace(/\/$/,''),40),

  1116                     description: _model.get("description"),

  1117                     color: _model.get("color") || _created_by.get("color"),

  1118                     from_title: _from_model.get("title"),

  1119                     to_title: _to_model.get("title"),

  1120                     from_color: _from_model.get("color") || (_from_model.get("created_by") || Rkns.Utils._USER_PLACEHOLDER(this.renkan)).get("color"),

  1121                     to_color: _to_model.get("color") || (_to_model.get("created_by") || Rkns.Utils._USER_PLACEHOLDER(this.renkan)).get("color"),

  1122                     created_by_color: _created_by.get("color"),

  1123                     created_by_title: _created_by.get("title")

  1124                 },

  1125                 renkan: this.renkan,

  1126                 shortenText: Rkns.Utils.shortenText,

  1127                 options: this.options

  1128             }));

  1129             this.redraw();

  1130             var _this = this,

  1131             closeEditor = function() {

  1132                 _this.renderer.removeRepresentation(_this);

  1133                 paper.view.draw();

  1134             };

  1135             this.editor_$.find(".Rk-CloseX").click(closeEditor);