add node and edge stroke width + adjust text + arrow placement + conrol arrow visibility
--- 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;
--- 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,
--- 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",
--- 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);
--- 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 = $('<div class="Rk-Label Rk-Edge-Label">').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");
}
},
--- 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() {
--- 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();
--- 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;
--- 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 @@
</select>
</p>
<% } } %>
-<% if (options.show_edge_editor_color) { %>
+<% if (options.show_edge_editor_style) { %>
<div class="Rk-Editor-p">
+ <% if (options.show_edge_editor_style_color) { %>
<div id="Rk-Editor-p-color">
<span class="Rk-Editor-Label"><%-renkan.translate("Edge color:")%></span>
<div class="Rk-Edit-ColorPicker-Wrapper">
@@ -41,10 +42,27 @@
<span class="Rk-Edit-ColorPicker-Text"><%- renkan.translate("Choose color") %></span>
</div>
</div>
+ <% } %>
+ <% if (options.show_edge_editor_style_dash) { %>
<div id="Rk-Editor-p-dash">
<span class="Rk-Editor-Label"><%-renkan.translate("Dash:")%></span>
<input type="checkbox" name="Rk-Edit-Dash" class="Rk-Edit-Dash" <%- edge.dash %> />
</div>
+ <% } %>
+ <% if (options.show_edge_editor_style_thickness) { %>
+ <div id="Rk-Editor-p-thickness">
+ <span class="Rk-Editor-Label"><%-renkan.translate("Thickness:")%></span>
+ <a href="#" class="Rk-Edit-Size-Btn" id="Rk-Edit-Thickness-Down">-</a>
+ <span class="Rk-Edit-Size-Disp" id="Rk-Edit-Thickness-Value"><%- edge.thickness %></span>
+ <a href="#" class="Rk-Edit-Size-Btn" id="Rk-Edit-Thickness-Up">+</a>
+ </div>
+ <% } %>
+ <% if (options.show_edge_editor_style_arrow) { %>
+ <div id="Rk-Editor-p-arrow">
+ <span class="Rk-Editor-Label"><%-renkan.translate("Arrow:")%></span>
+ <input type="checkbox" name="Rk-Edit-Arrow" class="Rk-Edit-Arrow" <%- edge.arrow %> />
+ </div>
+ <% } %>
</div>
<% } %>
<% if (options.show_edge_editor_direction) { %>
--- 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 %>
<h2>
<span class="Rk-CloseX">×</span><%-renkan.translate("Edit Node")%></span>
</h2>
@@ -19,12 +20,13 @@
<% } %> <% 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>
+ <a href="#" class="Rk-Edit-Size-Btn" id="Rk-Edit-Size-Down">-</a>
+ <span class="Rk-Edit-Size-Disp" id="Rk-Edit-Size-Value"><%-node.size%></span>
+ <a href="#" class="Rk-Edit-Size-Btn" id="Rk-Edit-Size-Up">+</a>
</p>
<% } %> <% if (options.show_node_editor_style) { %>
<div class="Rk-Editor-p">
+ <% if (options.show_node_editor_style_color) { %>
<div id="Rk-Editor-p-color">
<span class="Rk-Editor-Label">
<%-renkan.translate("Node color:")%></span>
@@ -36,10 +38,21 @@
<span class="Rk-Edit-ColorPicker-Text"><%- renkan.translate("Choose color") %></span>
</div>
</div>
+ <% } %>
+ <% if (options.show_node_editor_style_dash) { %>
<div id="Rk-Editor-p-dash">
<span class="Rk-Editor-Label"><%-renkan.translate("Dash:")%></span>
<input type="checkbox" name="Rk-Edit-Dash" class="Rk-Edit-Dash" <%- node.dash %> />
</div>
+ <% } %>
+ <% if (options.show_node_editor_style_thickness) { %>
+ <div id="Rk-Editor-p-thickness">
+ <span class="Rk-Editor-Label"><%-renkan.translate("Thickness:")%></span>
+ <a href="#" class="Rk-Edit-Size-Btn" id="Rk-Edit-Thickness-Down">-</a>
+ <span class="Rk-Edit-Size-Disp" id="Rk-Edit-Thickness-Value"><%-node.thickness%></span>
+ <a href="#" class="Rk-Edit-Size-Btn" id="Rk-Edit-Thickness-Up">+</a>
+ </div>
+ <% } %>
</div>
<% } %> <% if (options.show_node_editor_image) { %>
<div class="Rk-Edit-ImgWrap">