# HG changeset patch # User ymh # Date 1433330206 -7200 # Node ID 98cae534083db8fabb33b419084f9f74313b3f5d # Parent 423bdf56d103985a26d14f9a76109bd6831acea9 add node and edge stroke width + adjust text + arrow placement + conrol arrow visibility diff -r 423bdf56d103 -r 98cae534083d client/css/renkan.css --- a/client/css/renkan.css Tue Jun 02 00:39:47 2015 +0200 +++ b/client/css/renkan.css Wed Jun 03 13:16:46 2015 +0200 @@ -366,7 +366,7 @@ font-size: 16px; font-weight: bold; } -.Rk-Editor p, .Rk-Editor-p { +.Rk-Editor p, .Rk-Editor-p, .Rk-Editor-p > div { margin: 5px 0; font-size: 12px; clear: both; } @@ -466,16 +466,16 @@ display: inline-block; } -.Rk-Edit-Size-Up, .Rk-Edit-Size-Down { +.Rk-Edit-Size-Btn { font-size: 13px; font-weight: bold; padding: 0 4px; background: #ffffff; color: #000000; border: 1px solid #cccccc; text-decoration: none; } -.Rk-Edit-Size-Up:hover, .Rk-Edit-Size-Down:hover { +.Rk-Edit-Size-Btn:hover { background: #666666; } -.Rk-Edit-Size-Value { +.Rk-Edit-Size-Disp { display: inline-block; padding: 0 5px; text-align: center; diff -r 423bdf56d103 -r 98cae534083d client/js/defaults.js --- a/client/js/defaults.js Tue Jun 02 00:39:47 2015 +0200 +++ b/client/js/defaults.js Wed Jun 03 13:16:46 2015 +0200 @@ -95,7 +95,10 @@ Set to true for "crop" (adapted to fill circle) */ node_size_base: 25, node_stroke_width: 2, + node_stroke_max_width: 12, selected_node_stroke_width: 4, + selected_node_stroke_max_width: 24, + node_stroke_witdh_scale: 5, node_fill_color: "#ffffff", highlighted_node_fill_color: "#ffff00", node_label_distance: 5, @@ -110,11 +113,16 @@ /* EDGE DISPLAY OPTIONS */ edge_stroke_width: 2, + edge_stroke_max_width: 12, selected_edge_stroke_width: 4, + selected_edge_stroke_max_width: 24, + edge_stroke_witdh_scale: 5, + edge_label_distance: 0, edge_label_max_length: 20, edge_arrow_length: 18, edge_arrow_width: 12, + edge_arrow_max_width: 32, edge_gap_in_bundles: 12, label_untitled_edges: "", @@ -136,6 +144,9 @@ show_node_editor_description: true, show_node_editor_size: true, show_node_editor_style: true, + show_node_editor_style_color: true, + show_node_editor_style_dash: true, + show_node_editor_style_thickness: true, show_node_editor_image: true, show_node_editor_creator: true, allow_image_upload: true, @@ -152,7 +163,11 @@ /* EDGE EDITOR OPTIONS */ show_edge_editor_uri: true, - show_edge_editor_color: true, + show_edge_editor_style: true, + show_edge_editor_style_color: true, + show_edge_editor_style_dash: true, + show_edge_editor_style_thickness: true, + show_edge_editor_style_arrow: true, show_edge_editor_direction: true, show_edge_editor_nodes: true, show_edge_editor_creator: true, diff -r 423bdf56d103 -r 98cae534083d client/js/i18n.js --- a/client/js/i18n.js Tue Jun 02 00:39:47 2015 +0200 +++ b/client/js/i18n.js Wed Jun 03 13:16:46 2015 +0200 @@ -39,6 +39,8 @@ "Loading, please wait": "Chargement en cours, merci de patienter", "Edge color:": "Couleur :", "Dash:": "Point. :", + "Thickness:": "Epaisseur :", + "Arrow:": "Flèche :", "Node color:": "Couleur :", "Choose color": "Choisir une couleur", "Change edge direction": "Changer le sens du lien", diff -r 423bdf56d103 -r 98cae534083d client/js/main.js --- a/client/js/main.js Tue Jun 02 00:39:47 2015 +0200 +++ b/client/js/main.js Wed Jun 03 13:16:46 2015 +0200 @@ -561,6 +561,25 @@ top: (_options.tooltip_padding + _top) }); return _path; + }, + // from http://stackoverflow.com/a/6444043 + increaseBrightness: function (hex, percent){ + // strip the leading # if it's there + hex = hex.replace(/^\s*#|\s*$/g, ''); + + // convert 3 char codes --> 6, e.g. `E0F` --> `EE00FF` + if(hex.length === 3){ + hex = hex.replace(/(.)/g, '$1$1'); + } + + var r = parseInt(hex.substr(0, 2), 16), + g = parseInt(hex.substr(2, 2), 16), + b = parseInt(hex.substr(4, 2), 16); + + return '#' + + ((0|(1<<8) + r + (256 - r) * percent / 100).toString(16)).substr(1) + + ((0|(1<<8) + g + (256 - g) * percent / 100).toString(16)).substr(1) + + ((0|(1<<8) + b + (256 - b) * percent / 100).toString(16)).substr(1); } }; })(window); diff -r 423bdf56d103 -r 98cae534083d client/js/renderer/edge.js --- a/client/js/renderer/edge.js Tue Jun 02 00:39:47 2015 +0200 +++ b/client/js/renderer/edge.js Wed Jun 03 13:16:46 2015 +0200 @@ -20,12 +20,14 @@ this.line.add([0,0],[0,0],[0,0]); this.line.__representation = this; this.line.strokeWidth = this.options.edge_stroke_width; + this.arrow_scale = 1; this.arrow = new paper.Path(); this.arrow.add( [ 0, 0 ], [ this.options.edge_arrow_length, this.options.edge_arrow_width / 2 ], [ 0, this.options.edge_arrow_width ] ); + this.arrow.pivot = new paper.Point([ this.options.edge_arrow_length / 2, this.options.edge_arrow_width / 2 ]); this.arrow.__representation = this; this.text = $('
').appendTo(this.renderer.labels_$); this.arrow_angle = 0; @@ -55,6 +57,18 @@ this.minimap_line.strokeWidth = 1; } }, + _getStrokeWidth: function() { + var thickness = (this.model.has('style') && this.model.get('style').thickness) || 1; + return this.options.edge_stroke_width + (thickness-1) * (this.options.edge_stroke_max_width - this.options.edge_stroke_width) / (this.options.edge_stroke_witdh_scale-1); + }, + _getSelectedStrokeWidth: function() { + var thickness = (this.model.has('style') && this.model.get('style').thickness) || 1; + return this.options.selected_edge_stroke_width + (thickness-1) * (this.options.selected_edge_stroke_max_width - this.options.selected_edge_stroke_width) / (this.options.edge_stroke_witdh_scale-1); + }, + _getArrowScale: function() { + var thickness = (this.model.has('style') && this.model.get('style').thickness) || 1; + return 1 + (thickness-1) * ((this.options.edge_arrow_max_width / this.options.edge_arrow_width) - 1) / (this.options.edge_stroke_witdh_scale-1); + }, redraw: function() { var from = this.model.get("from"), to = this.model.get("to"); @@ -66,7 +80,9 @@ if (typeof this.from_representation === "undefined" || typeof this.to_representation === "undefined") { return; } - var _p0a = this.from_representation.paper_coords, + var _strokeWidth = this._getStrokeWidth(), + _arrow_scale = this._getArrowScale(), + _p0a = this.from_representation.paper_coords, _p1a = this.to_representation.paper_coords, _v = _p1a.subtract(_p0a), _r = _v.length, @@ -77,7 +93,7 @@ _p0b = _p0a.add(_delta), /* Adding a 4 px difference */ _p1b = _p1a.add(_delta), /* to differentiate bundled links */ _a = _v.angle, - _textdelta = _ortho.multiply(this.options.edge_label_distance), + _textdelta = _ortho.multiply(this.options.edge_label_distance + 0.5 * _arrow_scale * this.options.edge_arrow_width), _handle = _v.divide(3), _color = (this.model.has("style") && this.model.get("style").color) || (this.model.get("created_by") || Utils._USER_PLACEHOLDER(this.renkan)).get("color"), _dash = (this.model.has("style") && this.model.get("style").dash) ? this.options.default_dash_array : null, @@ -93,6 +109,9 @@ var old_act_btn = this.active_buttons; + var array_opacity = + (this.model.has("style") && this.model.get("style").arrow) || !this.model.has("style") || (typeof this.model.get("style").arrow === 'undefined') ? opacity : 0; + this.active_buttons = this.model.get("delete_scheduled") ? this.pending_delete_buttons : this.normal_buttons; if (this.selected && this.renderer.isEditable() && old_act_btn !== this.active_buttons) { @@ -107,6 +126,7 @@ this.paper_coords = _p0b.add(_p1b).divide(2); + this.line.strokeWidth = _strokeWidth; this.line.strokeColor = _color; this.line.dashArray = _dash; this.line.opacity = opacity; @@ -115,10 +135,13 @@ this.line.segments[1].handleIn = _handle.multiply(-1); this.line.segments[1].handleOut = _handle; this.line.segments[2].point = _p1a; - this.arrow.rotate(_a - this.arrow_angle); + this.arrow.scale(_arrow_scale / this.arrow_scale); + this.arrow_scale = _arrow_scale; this.arrow.fillColor = _color; - this.arrow.opacity = opacity; + this.arrow.opacity = array_opacity; + this.arrow.rotate(_a - this.arrow_angle, this.arrow.bounds.center); this.arrow.position = this.paper_coords; + this.arrow_angle = _a; if (_a > 90) { _a -= 180; @@ -161,7 +184,7 @@ }, select: function() { this.selected = true; - this.line.strokeWidth = this.options.selected_edge_stroke_width; + this.line.strokeWidth = this._getSelectedStrokeWidth(); if (this.renderer.isEditable()) { this.active_buttons.forEach(function(b) { b.show(); @@ -180,7 +203,7 @@ b.hide(); }); } - this.line.strokeWidth = this.options.edge_stroke_width; + this.line.strokeWidth = this._getStrokeWidth(); this._super("unselect"); } }, diff -r 423bdf56d103 -r 98cae534083d client/js/renderer/edgeeditor.js --- a/client/js/renderer/edgeeditor.js Tue Jun 02 00:39:47 2015 +0200 +++ b/client/js/renderer/edgeeditor.js Wed Jun 03 13:16:46 2015 +0200 @@ -31,6 +31,8 @@ description: _model.get("description"), color: (_model.has("style") && _model.get("style").color) || _created_by.get("color"), dash: _model.has("style") && _model.get("style").dash ? "checked" : "", + arrow: (_model.has("style") && _model.get("style").arrow) || !_model.has("style") || (typeof _model.get("style").arrow === 'undefined') ? "checked" : "", + thickness: (_model.has("style") && _model.get("style").thickness) || 1, from_title: _from_model.get("title"), to_title: _to_model.get("title"), from_color: (_from_model.has("style") && _from_model.get("style").color) || (_from_model.get("created_by") || Utils._USER_PLACEHOLDER(this.renkan)).get("color"), @@ -46,6 +48,7 @@ var _this = this, closeEditor = function() { _this.renderer.removeRepresentation(_this); + _this.editor_$.find(".Rk-Edit-Size-Btn").off('click'); paper.view.draw(); }; this.editor_$.find(".Rk-CloseX").click(closeEditor); @@ -69,6 +72,8 @@ if (_this.options.show_node_editor_style) { var dash = _this.editor_$.find(".Rk-Edit-Dash").is(':checked'); _data.style = _.assign( ((_model.has("style") && _.clone(_model.get("style"))) || {}), {dash: dash}); + var arrow = _this.editor_$.find(".Rk-Edit-Arrow").is(':checked'); + _data.style = _.assign( ((_model.has("style") && _.clone(_model.get("style"))) || {}), {arrow: arrow}); } _this.editor_$.find(".Rk-Edit-Goto").attr("href",_data.uri || "#"); _model.set(_data); @@ -140,6 +145,35 @@ closeEditor(); } }); + var shiftThickness = function(n) { + if (_this.renderer.isEditable()) { + var _oldThickness = ((_model.has('style') && _model.get('style').thickness) || 1), + _newThickness = n + _oldThickness; + if(_newThickness < 1 ) { + _newThickness = 1; + } + else if (_newThickness > _this.options.node_stroke_witdh_scale) { + _newThickness = _this.options.node_stroke_witdh_scale; + } + if (_newThickness !== _oldThickness) { + _this.editor_$.find("#Rk-Edit-Thickness-Value").text(_newThickness); + _model.set("style", _.assign( ((_model.has("style") && _.clone(_model.get("style"))) || {}), {thickness: _newThickness})); + paper.view.draw(); + } + } + else { + closeEditor(); + } + }; + + this.editor_$.find("#Rk-Edit-Thickness-Down").click(function() { + shiftThickness(-1); + return false; + }); + this.editor_$.find("#Rk-Edit-Thickness-Up").click(function() { + shiftThickness(1); + return false; + }); } }, redraw: function() { diff -r 423bdf56d103 -r 98cae534083d client/js/renderer/nodeeditor.js --- a/client/js/renderer/nodeeditor.js Tue Jun 02 00:39:47 2015 +0200 +++ b/client/js/renderer/nodeeditor.js Wed Jun 03 13:16:46 2015 +0200 @@ -31,6 +31,7 @@ image: _model.get("image") || "", image_placeholder: _image_placeholder, color: (_model.has("style") && _model.get("style").color) || _created_by.get("color"), + thickness: (_model.has("style") && _model.get("style").thickness) || 1, dash: _model.has("style") && _model.get("style").dash ? "checked" : "", clip_path: _model.get("clip_path") || false, created_by_color: _created_by.get("color"), @@ -50,8 +51,7 @@ _this.editor_$.find("input, textarea, select").off("change keyup paste"); _this.editor_$.find(".Rk-Edit-Image-File").off('change'); _this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").off('hover'); - _this.editor_$.find(".Rk-Edit-Size-Down").off('click'); - _this.editor_$.find(".Rk-Edit-Size-Up").off('click'); + _this.editor_$.find(".Rk-Edit-Size-Btn").off('click'); _this.editor_$.find(".Rk-Edit-Image-Del").off('click'); _this.editor_$.find(".Rk-Edit-ColorPicker").find("li").off('hover click'); _this.editor_$.find(".Rk-CloseX").off('click'); @@ -172,7 +172,7 @@ var shiftSize = function(n) { if (_this.renderer.isEditable()) { var _newsize = n+(_model.get("size") || 0); - _this.editor_$.find(".Rk-Edit-Size-Value").text((_newsize > 0 ? "+" : "") + _newsize); + _this.editor_$.find("#Rk-Edit-Size-Value").text((_newsize > 0 ? "+" : "") + _newsize); _model.set("size", _newsize); paper.view.draw(); } else { @@ -180,15 +180,45 @@ } }; - this.editor_$.find(".Rk-Edit-Size-Down").click(function() { + this.editor_$.find("#Rk-Edit-Size-Down").click(function() { shiftSize(-1); return false; }); - this.editor_$.find(".Rk-Edit-Size-Up").click(function() { + this.editor_$.find("#Rk-Edit-Size-Up").click(function() { shiftSize(1); return false; }); + var shiftThickness = function(n) { + if (_this.renderer.isEditable()) { + var _oldThickness = ((_model.has('style') && _model.get('style').thickness) || 1), + _newThickness = n + _oldThickness; + if(_newThickness < 1 ) { + _newThickness = 1; + } + else if (_newThickness > _this.options.node_stroke_witdh_scale) { + _newThickness = _this.options.node_stroke_witdh_scale; + } + if (_newThickness !== _oldThickness) { + _this.editor_$.find("#Rk-Edit-Thickness-Value").text(_newThickness); + _model.set("style", _.assign( ((_model.has("style") && _.clone(_model.get("style"))) || {}), {thickness: _newThickness})); + paper.view.draw(); + } + } + else { + closeEditor(); + } + }; + + this.editor_$.find("#Rk-Edit-Thickness-Down").click(function() { + shiftThickness(-1); + return false; + }); + this.editor_$.find("#Rk-Edit-Thickness-Up").click(function() { + shiftThickness(1); + return false; + }); + this.editor_$.find(".Rk-Edit-Image-Del").click(function() { _this.editor_$.find(".Rk-Edit-Image").val(''); onFieldChange(); diff -r 423bdf56d103 -r 98cae534083d client/js/renderer/noderepr.js --- a/client/js/renderer/noderepr.js Tue Jun 02 00:39:47 2015 +0200 +++ b/client/js/renderer/noderepr.js Wed Jun 03 13:16:46 2015 +0200 @@ -55,6 +55,14 @@ this.renderer.minimap.node_group.addChild(this.minimap_circle); } }, + _getStrokeWidth: function() { + var thickness = (this.model.has('style') && this.model.get('style').thickness) || 1; + return this.options.node_stroke_width + (thickness-1) * (this.options.node_stroke_max_width - this.options.node_stroke_width) / (this.options.node_stroke_witdh_scale-1); + }, + _getSelectedStrokeWidth: function() { + var thickness = (this.model.has('style') && this.model.get('style').thickness) || 1; + return this.options.selected_node_stroke_width + (thickness-1) * (this.options.selected_node_stroke_max_width - this.options.selected_node_stroke_width) / (this.options.node_stroke_witdh_scale-1); + }, buildShape: function(){ if( 'shape' in this.model.changed ) { delete this.img; @@ -137,13 +145,15 @@ this.title.text(_text); } + var _strokeWidth = this._getStrokeWidth(); this.title.css({ left: this.paper_coords.x, - top: this.paper_coords.y + this.circle_radius * this.h_ratio + this.options.node_label_distance, + top: this.paper_coords.y + this.circle_radius * this.h_ratio + this.options.node_label_distance + 0.5*_strokeWidth, opacity: opacity }); var _color = (this.model.has("style") && this.model.get("style").color) || (this.model.get("created_by") || Utils._USER_PLACEHOLDER(this.renkan)).get("color"), _dash = (this.model.has("style") && this.model.get("style").dash) ? this.options.default_dash_array : null; + this.circle.strokeWidth = _strokeWidth; this.circle.strokeColor = _color; this.circle.dashArray = _dash; var _pc = this.paper_coords; @@ -337,7 +347,7 @@ }, select: function() { this.selected = true; - this.circle.strokeWidth = this.options.selected_node_stroke_width; + this.circle.strokeWidth = this._getSelectedStrokeWidth(); if (this.renderer.isEditable()) { this.active_buttons.forEach(function(b) { b.show(); @@ -373,7 +383,7 @@ this.selected = false; var _this = this; this.buttons_timeout = setTimeout(function() { _this.hideButtons(); }, 200); - this.circle.strokeWidth = this.options.node_stroke_width; + this.circle.strokeWidth = this._getStrokeWidth(); $('.Rk-Bin-Item').removeClass("selected"); if (this.renderer.minimap) { this.minimap_circle.strokeColor = undefined; diff -r 423bdf56d103 -r 98cae534083d client/templates/edgeeditor.html --- a/client/templates/edgeeditor.html Tue Jun 02 00:39:47 2015 +0200 +++ b/client/templates/edgeeditor.html Wed Jun 03 13:16:46 2015 +0200 @@ -29,8 +29,9 @@

<% } } %> -<% if (options.show_edge_editor_color) { %> +<% if (options.show_edge_editor_style) { %>
+ <% if (options.show_edge_editor_style_color) { %>
<%-renkan.translate("Edge color:")%>
@@ -41,10 +42,27 @@ <%- renkan.translate("Choose color") %>
+ <% } %> + <% if (options.show_edge_editor_style_dash) { %>
<%-renkan.translate("Dash:")%> />
+ <% } %> + <% if (options.show_edge_editor_style_thickness) { %> +
+ <%-renkan.translate("Thickness:")%> + - + <%- edge.thickness %> + + +
+ <% } %> + <% if (options.show_edge_editor_style_arrow) { %> +
+ <%-renkan.translate("Arrow:")%> + /> +
+ <% } %>
<% } %> <% if (options.show_edge_editor_direction) { %> diff -r 423bdf56d103 -r 98cae534083d client/templates/nodeeditor.html --- a/client/templates/nodeeditor.html Tue Jun 02 00:39:47 2015 +0200 +++ b/client/templates/nodeeditor.html Wed Jun 03 13:16:46 2015 +0200 @@ -1,3 +1,4 @@ +<% //TODO: change class to id %>

×<%-renkan.translate("Edit Node")%>

@@ -19,12 +20,13 @@ <% } %> <% if (options.show_node_editor_size) { %>

<%-renkan.translate("Size:")%> - - - <%-node.size%> - + + - + <%-node.size%> + +

<% } %> <% if (options.show_node_editor_style) { %>
+ <% if (options.show_node_editor_style_color) { %>
<%-renkan.translate("Node color:")%> @@ -36,10 +38,21 @@ <%- renkan.translate("Choose color") %>
+ <% } %> + <% if (options.show_node_editor_style_dash) { %>
<%-renkan.translate("Dash:")%> />
+ <% } %> + <% if (options.show_node_editor_style_thickness) { %> +
+ <%-renkan.translate("Thickness:")%> + - + <%-node.thickness%> + + +
+ <% } %>
<% } %> <% if (options.show_node_editor_image) { %>