19     _EDITOR_PADDING : 10,

    19     _EDITOR_PADDING : 10,

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

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

    21     _CLICKMODE_ADDNODE : 1,

    21     _CLICKMODE_ADDNODE : 1,

    22     _CLICKMODE_STARTEDGE : 2,

    22     _CLICKMODE_STARTEDGE : 2,

    23     _CLICKMODE_ENDEDGE : 3,

    23     _CLICKMODE_ENDEDGE : 3,

    24     _USER_PLACEHOLDER : {

    25     _USER_PLACEHOLDER : {

    25         color: "#000000",

    26         color: "#000000",

    26         title: "(unknown user)",

    27         title: "(unknown user)",

    27         get: function(attr) {

    28         get: function(attr) {

    28             return this[attr] || false;

    29             return this[attr] || false;

   643         })

   644         })

   644         .hide();

   645         .hide();

   645 }

   646 }

   646 

   647 

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

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

   653     + '<% print(Rkns.pickerColors.reduce(function(m,c) { return m + "<li data-color=\'" + c + "\' style=\'background: " + c + "\'></li>"},"")); %></ul><span class="Rk-Edit-ColorPicker-Text">Choose color</span></div></div>'

   654     + '<% print(Rkns.pickerColors.reduce(function(m,c) { return m + "<li data-color=\'" + c + "\' style=\'background: " + c + "\'></li>"},"")); %></ul><span class="Rk-Edit-ColorPicker-Text">Choose color</span></div></div>'

   656 );

   659 );

   657 

   660 

   658 Rkns.Renderer.NodeEditor.prototype.readOnlyTemplate = Rkns._.template(

   661 Rkns.Renderer.NodeEditor.prototype.readOnlyTemplate = Rkns._.template(

   659     '<h2><span class="Rk-CloseX">&times;</span><span class="Rk-UserColor" style="background:<%=node.color%>;"></span><%-node.title%></span></h2>'

   662     '<h2><span class="Rk-CloseX">&times;</span><span class="Rk-UserColor" style="background:<%=node.color%>;"></span><%-node.title%></span></h2>'

   660     + '<p><a href="<%-node.uri%>" target="_blank"><%-node.uri%></a></p>'

   663     + '<p><a href="<%-node.uri%>" target="_blank"><%-node.uri%></a></p>'

   661     + '<p><%-node.description%></p>'

   664     + '<p><%-node.description%></p>'

   663 );

   666 );

   664 

   667 

   665 Rkns.Renderer.NodeEditor.prototype.draw = function() {

   668 Rkns.Renderer.NodeEditor.prototype.draw = function() {

   666     var _model = this.node_representation.model,

   669     var _model = this.node_representation.model,

   667         _created_by = _model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER,

   670         _created_by = _model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER,

   671             node: {

   674             node: {

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

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

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

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

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

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

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

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

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

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

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

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

   678                 created_by_title: _created_by.get("title")

   682                 created_by_title: _created_by.get("title")

   679             },

   683             },

   681         }));

   685         }));

   682     this.redraw();

   686     this.redraw();

   683     var _this = this;

   687     var _this = this;

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

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

   685         _this.renderer.removeRepresentation(_this);

   689         _this.renderer.removeRepresentation(_this);

   686         paper.view.draw();

   690         paper.view.draw();

   687     });

   691     });

   688     if (!this.renderer.renkan.read_only) {

   692     if (!this.renderer.renkan.read_only) {

   702         });

   731         });

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

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

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

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

   705             function() { _this.editor_$.find(".Rk-Edit-ColorPicker").show(); },

   734             function() { _this.editor_$.find(".Rk-Edit-ColorPicker").show(); },

   706             function() { _this.editor_$.find(".Rk-Edit-ColorPicker").hide(); }

   735             function() { _this.editor_$.find(".Rk-Edit-ColorPicker").hide(); }

   752         })

   781         })

   753         .hide();

   782         .hide();

   754 }

   783 }

   755 

   784 

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

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

   761     + '<% print(Rkns.pickerColors.reduce(function(m,c) { return m + "<li data-color=\'" + c + "\' style=\'background: " + c + "\'></li>"},"")); %></ul><span class="Rk-Edit-ColorPicker-Text">Choose color</span></div></div>'

   790     + '<% print(Rkns.pickerColors.reduce(function(m,c) { return m + "<li data-color=\'" + c + "\' style=\'background: " + c + "\'></li>"},"")); %></ul><span class="Rk-Edit-ColorPicker-Text">Choose color</span></div></div>'

   765 );

   794 );

   766 

   795 

   767 Rkns.Renderer.EdgeEditor.prototype.readOnlyTemplate = Rkns._.template(

   796 Rkns.Renderer.EdgeEditor.prototype.readOnlyTemplate = Rkns._.template(

   768     '<h2><span class="Rk-CloseX">&times;</span><span class="Rk-UserColor" style="background:<%=edge.color%>;"></span><%- edge.title %></span></h2>'

   797     '<h2><span class="Rk-CloseX">&times;</span><span class="Rk-UserColor" style="background:<%=edge.color%>;"></span><%- edge.title %></span></h2>'

   769     + '<p><a href="<%-edge.uri%>" target="_blank"><%-edge.uri%></a></p>'

   798     + '<p><a href="<%-edge.uri%>" target="_blank"><%-edge.uri%></a></p>'

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

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

   774 );

   803 );

   775 

   804 

   776 Rkns.Renderer.EdgeEditor.prototype.draw = function() {

   805 Rkns.Renderer.EdgeEditor.prototype.draw = function() {

   777     var _model = this.edge_representation.model,

   806     var _model = this.edge_representation.model,

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

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

   791                 from_color: _from_model.get("color") || (_from_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color"),

   820                 from_color: _from_model.get("color") || (_from_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color"),

   792                 to_color: _to_model.get("color") || (_to_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color"),

   821                 to_color: _to_model.get("color") || (_to_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color"),

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

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

   794                 created_by_title: _created_by.get("title")

   823                 created_by_title: _created_by.get("title")

   795             },

   824             },

   797         }));

   826         }));

   798     this.redraw();

   827     this.redraw();

   799     var _this = this;

   828     var _this = this;

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

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

   801         _this.renderer.removeRepresentation(_this);

   830         _this.renderer.removeRepresentation(_this);

   802         paper.view.draw();

   831         paper.view.draw();

   803     });

   832     });

   804     if (!this.renderer.renkan.read_only) {

   833     if (!this.renderer.renkan.read_only) {

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

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

   815             function() { _this.editor_$.find(".Rk-Edit-ColorPicker").show(); },

   849             function() { _this.editor_$.find(".Rk-Edit-ColorPicker").show(); },

   816             function() { _this.editor_$.find(".Rk-Edit-ColorPicker").hide(); }

   850             function() { _this.editor_$.find(".Rk-Edit-ColorPicker").hide(); }

   817         );

   851         );

   818         this.editor_$.find(".Rk-Edit-ColorPicker li").hover(

   852         this.editor_$.find(".Rk-Edit-ColorPicker li").hover(

   842 Rkns.Renderer.NodeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);

   876 Rkns.Renderer.NodeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);

   843 

   877 

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

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

   845     this.renderer.overlay_layer.activate();

   879     this.renderer.overlay_layer.activate();

   846     this.type = "Node-edit-button";

   880     this.type = "Node-edit-button";

   848 }

   882 }

   849 

   883 

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

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

   851     this.sector.moveTo(_pos);

   885     this.sector.moveTo(_pos);

   852 }

   886 }

   885 Rkns.Renderer.NodeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);

   919 Rkns.Renderer.NodeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);

   886 

   920 

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

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

   888     this.renderer.overlay_layer.activate();

   922     this.renderer.overlay_layer.activate();

   889     this.type = "Node-remove-button";

   923     this.type = "Node-remove-button";

   891 }

   925 }

   892 

   926 

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

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

   894     this.sector.moveTo(_pos);

   928     this.sector.moveTo(_pos);

   895 }

   929 }

   913     }

   947     }

   914 }

   948 }

   915 

   949 

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

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

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

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

   919         this.project.removeNode(this.node_representation.model);

   953         this.project.removeNode(this.node_representation.model);

   920     }

   954     }

   921 }

   955 }

   922 

   956 

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

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

   929 Rkns.Renderer.NodeLinkButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);

   963 Rkns.Renderer.NodeLinkButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);

   930 

   964 

   931 Rkns.Renderer.NodeLinkButton.prototype._init = function() {

   965 Rkns.Renderer.NodeLinkButton.prototype._init = function() {

   932     this.renderer.overlay_layer.activate();

   966     this.renderer.overlay_layer.activate();

   933     this.type = "Node-link-button";

   967     this.type = "Node-link-button";

   935 }

   969 }

   936 

   970 

   937 Rkns.Renderer.NodeLinkButton.prototype.moveTo = function(_pos) {

   971 Rkns.Renderer.NodeLinkButton.prototype.moveTo = function(_pos) {

   938     this.sector.moveTo(_pos);

   972     this.sector.moveTo(_pos);

   939 }

   973 }

   966 Rkns.Renderer.EdgeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);

  1000 Rkns.Renderer.EdgeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);

   967 

  1001 

   968 Rkns.Renderer.EdgeEditButton.prototype._init = function() {

  1002 Rkns.Renderer.EdgeEditButton.prototype._init = function() {

   969     this.renderer.overlay_layer.activate();

  1003     this.renderer.overlay_layer.activate();

   970     this.type = "Edge-edit-button";

  1004     this.type = "Edge-edit-button";

   972 }

  1006 }

   973 

  1007 

   974 Rkns.Renderer.EdgeEditButton.prototype.moveTo = function(_pos) {

  1008 Rkns.Renderer.EdgeEditButton.prototype.moveTo = function(_pos) {

   975     this.sector.moveTo(_pos);

  1009     this.sector.moveTo(_pos);

   976 }

  1010 }

  1009 Rkns.Renderer.EdgeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);

  1043 Rkns.Renderer.EdgeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);

  1010 

  1044 

  1011 Rkns.Renderer.EdgeRemoveButton.prototype._init = function() {

  1045 Rkns.Renderer.EdgeRemoveButton.prototype._init = function() {

  1012     this.renderer.overlay_layer.activate();

  1046     this.renderer.overlay_layer.activate();

  1013     this.type = "Edge-remove-button";

  1047     this.type = "Edge-remove-button";

  1015 }

  1049 }

  1016 Rkns.Renderer.EdgeRemoveButton.prototype.moveTo = function(_pos) {

  1050 Rkns.Renderer.EdgeRemoveButton.prototype.moveTo = function(_pos) {

  1017     this.sector.moveTo(_pos);

  1051     this.sector.moveTo(_pos);

  1018 }

  1052 }

  1019 

  1053 

  1036     }

  1070     }

  1037 }

  1071 }

  1038 

  1072 

  1039 Rkns.Renderer.EdgeRemoveButton.prototype.mouseup = function() {

  1073 Rkns.Renderer.EdgeRemoveButton.prototype.mouseup = function() {

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

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

  1042         this.project.removeEdge(this.edge_representation.model);

  1076         this.project.removeEdge(this.edge_representation.model);

  1043     }

  1077     }

  1044 }

  1078 }

  1045 

  1079 

  1046 Rkns.Renderer.EdgeRemoveButton.prototype.destroy = function() {

  1080 Rkns.Renderer.EdgeRemoveButton.prototype.destroy = function() {

  1090         _this.onDoubleClick(_event);

  1124         _this.onDoubleClick(_event);

  1091     });

  1125     });

  1092     this.canvas_$.mouseenter(function(_event) {

  1126     this.canvas_$.mouseenter(function(_event) {

  1093         _this.onMouseEnter(_event);

  1127         _this.onMouseEnter(_event);

  1094     });

  1128     });

  1095     this.editor_$.find(".Rk-ZoomOut").click(function() {

  1182     this.editor_$.find(".Rk-ZoomOut").click(function() {

  1096         _this.offset = new paper.Point([

  1183         _this.offset = new paper.Point([

  1097             _this.canvas_$.width(),

  1184             _this.canvas_$.width(),

  1098             _this.canvas_$.height()

  1185             _this.canvas_$.height()

  1099         ]).multiply( .5 * ( 1 - Math.SQRT1_2 ) ).add(_this.offset.multiply( Math.SQRT1_2 ));

  1186         ]).multiply( .5 * ( 1 - Math.SQRT1_2 ) ).add(_this.offset.multiply( Math.SQRT1_2 ));

  1139         if (_this.click_mode === Rkns.Renderer._CLICKMODE_ADDNODE) {

  1226         if (_this.click_mode === Rkns.Renderer._CLICKMODE_ADDNODE) {

  1140             _this.click_mode = false;

  1227             _this.click_mode = false;

  1141             _this.notif_$.hide();

  1228             _this.notif_$.hide();

  1142         } else {

  1229         } else {

  1143             _this.click_mode = Rkns.Renderer._CLICKMODE_ADDNODE;

  1230             _this.click_mode = Rkns.Renderer._CLICKMODE_ADDNODE;

  1145         }

  1232         }

  1146     });

  1233     });

  1147     this.$.find(".Rk-AddEdge-Button").click(function() {

  1234     this.$.find(".Rk-AddEdge-Button").click(function() {

  1148         if (_this.click_mode === Rkns.Renderer._CLICKMODE_STARTEDGE || _this.click_mode === Rkns.Renderer._CLICKMODE_ENDEDGE) {

  1235         if (_this.click_mode === Rkns.Renderer._CLICKMODE_STARTEDGE || _this.click_mode === Rkns.Renderer._CLICKMODE_ENDEDGE) {

  1149             _this.click_mode = false;

  1236             _this.click_mode = false;

  1150             _this.notif_$.hide();

  1237             _this.notif_$.hide();

  1151         } else {

  1238         } else {

  1152             _this.click_mode = Rkns.Renderer._CLICKMODE_STARTEDGE;

  1239             _this.click_mode = Rkns.Renderer._CLICKMODE_STARTEDGE;

  1154         }

  1241         }

  1155     });

  1242     });

  1156     this.$.find(".Rk-TopBar-Button").mouseover(function() {

  1243     this.$.find(".Rk-TopBar-Button").mouseover(function() {

  1157         Rkns.$(this).find(".Rk-TopBar-Tooltip").show();

  1244         Rkns.$(this).find(".Rk-TopBar-Tooltip").show();

  1158     }).mouseout(function() {

  1245     }).mouseout(function() {

  1207     

  1294     

  1208     this.redraw();

  1295     this.redraw();

  1209 }

  1296 }

  1210 

  1297 

  1211 Rkns.Renderer.Scene.prototype.template = Rkns._.template(

  1298 Rkns.Renderer.Scene.prototype.template = Rkns._.template(

  1214     + '<div class="Rk-Users"><div class="Rk-CurrentUser"><span class="Rk-CurrentUser-Color"></span><span class="Rk-CurrentUser-Name">&lt;unknown user&gt;</span></div><ul class="Rk-UserList"></ul></div>'

  1301     + '<div class="Rk-Users"><div class="Rk-CurrentUser"><span class="Rk-CurrentUser-Color"></span><span class="Rk-CurrentUser-Name">&lt;unknown user&gt;</span></div><ul class="Rk-UserList"></ul></div>'

  1216     + '<% if (!read_only) { %>'

  1303     + '<% if (!read_only) { %>'

  1220     + '<div class="Rk-TopBar-Separator"></div></div>'

  1307     + '<div class="Rk-TopBar-Separator"></div></div>'

  1221     + '<% } %>'

  1308     + '<% } %>'

  1222     + '<canvas class="Rk-Canvas" resize></canvas><div class="Rk-Editor"><div class="Rk-Notifications"></div>'

  1309     + '<canvas class="Rk-Canvas" resize></canvas><div class="Rk-Editor"><div class="Rk-Notifications"></div>'

  1224     + '</div>'

  1311     + '</div>'

  1225 );

  1312 );

  1226 

  1313 

  1227 Rkns.Renderer.Scene.prototype.addToBundles = function(_edgeRepr) {

  1314 Rkns.Renderer.Scene.prototype.addToBundles = function(_edgeRepr) {

  1228     var _bundle = Rkns._(this.bundles).find(function(_bundle) {

  1315     var _bundle = Rkns._(this.bundles).find(function(_bundle) {

  1439         if (this.click_mode === Rkns.Renderer._CLICKMODE_STARTEDGE && this.click_target && this.click_target.type === "Node") {

  1526         if (this.click_mode === Rkns.Renderer._CLICKMODE_STARTEDGE && this.click_target && this.click_target.type === "Node") {

  1440             this.removeRepresentationsOfType("editor");

  1527             this.removeRepresentationsOfType("editor");

  1441             this.addTempEdge(this.click_target, _event.point);

  1528             this.addTempEdge(this.click_target, _event.point);

  1442             this.click_mode = Rkns.Renderer._CLICKMODE_ENDEDGE;

  1529             this.click_mode = Rkns.Renderer._CLICKMODE_ENDEDGE;

  1443             this.notif_$.fadeOut(function() {

  1530             this.notif_$.fadeOut(function() {

  1445             });

  1532             });

  1446         } else {

  1533         } else {

  1447             this.notif_$.hide();

  1534             this.notif_$.hide();

  1448             this.click_mode = false;

  1535             this.click_mode = false;

  1449         }

  1536         }