--- a/client/css/renkan.css Thu Jan 05 19:34:53 2017 +0100
+++ b/client/css/renkan.css Tue Jan 10 17:36:30 2017 +0100
@@ -341,12 +341,40 @@
}
.Rk-Label {
- position: absolute; width: 160px; margin-left: -80px; text-align: center; font-size: 13px; line-height: 13px;
+ position: absolute; width: 160px; margin-left: -80px; text-align: center;
+}
+
+/* Separate this declaration to isolate the node title size */
+.Rk-Label {
+ font-size: 13px; line-height: 13px;
+}
+
+/* Node label size +1 */
+.Rk-Label-p1 {
+ font-size: 14px; line-height: 14px;
+}
+
+/* Node label size +2 */
+.Rk-Label-p2 {
+ font-size: 15px; line-height: 15px;
+}
+
+/* Node label size -1 */
+.Rk-Label-m1 {
+ font-size: 12px; line-height: 12px;
+}
+
+/* Node label size -2 */
+.Rk-Label-m2 {
+ font-size: 11px; line-height: 11px;
}
.Rk-Edge-Label {
- font-size: 11px; transform-origin: 50% 0; -moz-transform-origin: 50% 0;
- -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0;
+ font-size: 11px;
+ transform-origin: 50% 0;
+ -ms-transform-origin: 50% 0;
+ -moz-transform-origin: 50% 0;
+ -webkit-transform-origin: 50% 0;
}
/* Editors */
@@ -489,6 +517,35 @@
left: -105px; top: 2px;
}
+.Rk-Editor-p-title-color .Rk-Edit-ColorPicker {
+ left: 67px; top: 114px;
+}
+
+.Rk-Editor-p-title-style {
+ width: 100%;
+}
+
+.Rk-Editor-p-title-style .Rk-Editor-Label {
+ width: 50px;
+}
+
+.Rk-Editor-p-title-style div {
+ float: left;
+}
+
+.Rk-Editor-p-title-style .Rk-Editor-p-title-color {
+ width: 40%;
+}
+
+.Rk-Editor-p-title-color .Rk-Edit-Color {
+ margin-top: 2px;
+}
+
+.Rk-Editor-p-title-style .Rk-Editor-p-title-size {
+ width: 60%;
+}
+
+
.Rk-Edit-ColorPicker-Text {
color: #303080; font-weight: bold;
}
--- a/client/js/defaults.js Thu Jan 05 19:34:53 2017 +0100
+++ b/client/js/defaults.js Tue Jan 10 17:36:30 2017 +0100
@@ -126,8 +126,18 @@
selected_node_stroke_width: 4,
selected_node_stroke_max_width: 24,
node_stroke_witdh_scale: 5,
+ node_title_size_min: 0,
+ /* minimum relative size for node title (in graph) */
+ node_title_size_max: 5,
+ /* maximum relative size for node title (in graph) */
+ node_title_size_step: 0.1,
+ /* step for relative size for node title (in graph) */
node_fill_color: "#ffffff",
+ /* default color to fill node background */
highlighted_node_fill_color: "#ffff00",
+ /* default color to fill highlighted node background */
+ node_title_color: "#000000",
+ /* default title color */
node_label_distance: 5,
/* Vertical distance between node and label */
node_label_max_length: 60,
@@ -190,13 +200,14 @@
/* NODE EDITOR OPTIONS */
+ show_node_title_style: true,
show_node_editor_uri: true,
show_node_editor_title: true,
show_node_editor_title_richtext: true,
show_node_editor_description: true,
show_node_editor_description_richtext: true,
show_node_editor_size: true,
- show_node_editor_style: true,
+ show_node_editor_style: true, // show node title style editor
show_node_editor_style_color: true,
show_node_editor_style_dash: true,
show_node_editor_style_thickness: true,
--- a/client/js/i18n.js Thu Jan 05 19:34:53 2017 +0100
+++ b/client/js/i18n.js Tue Jan 10 17:36:30 2017 +0100
@@ -98,6 +98,8 @@
"Show hidden nodes": "Montrer les noeuds cachés",
"Show neighbors": "Montrer les voisins",
"Hide": "Cacher",
- "Fullscreen not supported by your browser": "Le plein écran n'est pas supporté par votre navigateur"
+ "Fullscreen not supported by your browser": "Le plein écran n'est pas supporté par votre navigateur",
+ "Title size:": "Taille :",
+ "Title color:": "Couleur :",
}
};
--- a/client/js/main.js Thu Jan 05 19:34:53 2017 +0100
+++ b/client/js/main.js Tue Jan 10 17:36:30 2017 +0100
@@ -151,14 +151,14 @@
}
});
- this.colorPicker = (function() {
+ this.colorPicker = function(pickerClass) {
var _tmpl = _this.options.templates['templates/colorpicker.html'];
- return '<ul class="Rk-Edit-ColorPicker">' + Rkns.pickerColors.map(function(c) {
+ return '<ul class="Rk-Edit-ColorPicker '+pickerClass+'">' + Rkns.pickerColors.map(function(c) {
return _tmpl({
c: c
});
}).join("") + '</ul>';
- })();
+ };
if (this.options.show_editor) {
this.renderer = new Rkns.Renderer.Scene(this);
--- a/client/js/renderer/basebutton.js Thu Jan 05 19:34:53 2017 +0100
+++ b/client/js/renderer/basebutton.js Tue Jan 10 17:36:30 2017 +0100
@@ -19,7 +19,7 @@
},
hide: function() {
if (this.sector){
- this.sector.hide();
+ this.sector.hide();
}
},
select: function() {
--- a/client/js/renderer/edgeeditor.js Thu Jan 05 19:34:53 2017 +0100
+++ b/client/js/renderer/edgeeditor.js Tue Jan 10 17:36:30 2017 +0100
@@ -112,7 +112,7 @@
}
});
- var _picker = _this.editor_$.find(".Rk-Edit-ColorPicker");
+ var _picker = _this.editor_$.find(".Rk-Editor-ColorPicker-Edge");
this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover(
function(_e) {
--- a/client/js/renderer/nodeeditor.js Thu Jan 05 19:34:53 2017 +0100
+++ b/client/js/renderer/nodeeditor.js Tue Jan 10 17:36:30 2017 +0100
@@ -34,6 +34,8 @@
image: _model.get("image") || "",
image_placeholder: _image_placeholder,
color: (_model.has("style") && _model.get("style").color) || _created_by.get("color"),
+ title_size: (_model.has("style") && _model.get("style").title_size) || 1,
+ title_color: (_model.has("style") && _model.get("style").title_color) || this.options.node_title_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,
@@ -203,7 +205,7 @@
}
this.editor_$.find(".Rk-Edit-Title")[0].focus();
- var _picker = _this.editor_$.find(".Rk-Edit-ColorPicker");
+ var _picker = _this.editor_$.find(".Rk-Editor-ColorPicker-Node");
this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover(
function(_e) {
@@ -286,6 +288,76 @@
return false;
});
+ var shiftTitleSize = function(n) {
+ var min = _this.options.node_title_size_min;
+ var max = _this.options.node_title_size_max;
+ if (_this.renderer.isEditable()) {
+ var _oldTitleSize = ((_model.has('style') && _model.get('style').title_size) || 1),
+ _newTitleSize = n + _oldTitleSize;
+ if(_newTitleSize < min ) {
+ _newTitleSize = min;
+ }
+ else if (_newTitleSize > max) {
+ _newTitleSize = max;
+ }
+ if (_newTitleSize !== _oldTitleSize) {
+ _this.editor_$.find("#Rk-Edit-Title-Size-Value").text(_newTitleSize.toFixed(1));
+ _model.set("style", _.assign( ((_model.has("style") && _.clone(_model.get("style"))) || {}), {title_size: _newTitleSize}));
+ paper.view.draw();
+ }
+ }
+ else {
+ closeEditor();
+ }
+ };
+
+
+ var _pickerTitle = _this.editor_$.find(".Rk-Editor-ColorPicker-Title");
+
+ this.editor_$.find(".Rk-Editor-p-title-color").hover(
+ function(_e) {
+ _e.preventDefault();
+ _pickerTitle.show();
+ },
+ function(_e) {
+ _e.preventDefault();
+ _pickerTitle.hide();
+ }
+ );
+
+ _pickerTitle.find("li").hover(
+ function(_e) {
+ _e.preventDefault();
+ _this.editor_$.find(".Rk-Editor-p-title-color .Rk-Edit-Color").css("background", $(this).attr("data-color"));
+ },
+ function(_e) {
+ _e.preventDefault();
+ var title_color = (_model.has("style") && _model.get("style").title_color) || _this.options.node_fill_color;
+ _this.editor_$.find(".Rk-Editor-p-title-color .Rk-Edit-Color").css("background", title_color);
+ }
+ ).click(function(_e) {
+ _e.preventDefault();
+ if (_this.renderer.isEditable()) {
+ _model.set("style", _.assign( ((_model.has("style") && _.clone(_model.get("style"))) || {}), {title_color: $(this).attr("data-color")}));
+ _pickerTitle.hide();
+ paper.view.draw();
+ } else {
+ closeEditor();
+ }
+ });
+
+
+ this.editor_$.find("#Rk-Edit-Title-Size-Down").click(function() {
+ var step = _this.options.node_title_size_step;
+ shiftTitleSize(-step);
+ return false;
+ });
+ this.editor_$.find("#Rk-Edit-Title-Size-Up").click(function() {
+ var step = _this.options.node_title_size_step;
+ shiftTitleSize(step);
+ 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 Thu Jan 05 19:34:53 2017 +0100
+++ b/client/js/renderer/noderepr.js Tue Jan 10 17:36:30 2017 +0100
@@ -153,12 +153,34 @@
var _text = clean_title || this.renkan.translate(this.options.label_untitled_nodes) || "";
_text = Utils.shortenText(_text, this.options.node_label_max_length);
+ //_formatedText = _text;
+
+
if (typeof this.highlighted === "object") {
- this.title.html(this.highlighted.replace(_(_text).escape(),'<span class="Rk-Highlighted">$1</span>'));
- } else {
- this.title.text(_text);
+ _text = this.highlighted.replace(_(_text).escape(),'<span class="Rk-Highlighted">$1</span>');
}
+ //TODO: default text node color
+ var node_style = (this.model.get("style") || {'title_size': 1, 'title-color': '#00000' });
+ var text_size = node_style.title_size || 1;
+ var text_color = node_style.title_color || this.options.node_title_color;
+
+ var text_style = {
+ 'line-height': "1em"
+ };
+
+ if(text_size !== 1) {
+ text_style['font-size'] = text_size.toFixed(1)+"em";
+ }
+ //TODO: compare with default value
+ if(text_color !== "#000000") {
+ text_style.color = text_color;
+ }
+
+ var text_node = $("<span>").css(text_style).html(_text);
+
+ this.title.empty().append(text_node);
+
var _strokeWidth = this._getStrokeWidth();
this.title.css({
left: this.paper_coords.x,
--- a/client/js/renderer/scene.js Thu Jan 05 19:34:53 2017 +0100
+++ b/client/js/renderer/scene.js Tue Jan 10 17:36:30 2017 +0100
@@ -438,7 +438,7 @@
if (_renkan.options.show_user_list && _renkan.options.user_color_editable) {
var $cpwrapper = this.$.find(".Rk-Users .Rk-Edit-ColorPicker-Wrapper"),
- $cplist = this.$.find(".Rk-Users .Rk-Edit-ColorPicker");
+ $cplist = this.$.find(".Rk-Users .Rk-Editor-ColorPicker-User");
$cpwrapper.hover(
function(_e) {
--- a/client/templates/edgeeditor.html Thu Jan 05 19:34:53 2017 +0100
+++ b/client/templates/edgeeditor.html Tue Jan 10 17:36:30 2017 +0100
@@ -38,7 +38,7 @@
<span class="Rk-Edit-Color" style="background: <%-edge.color%>;">
<span class="Rk-Edit-ColorTip"></span>
</span>
- <%= renkan.colorPicker %>
+ <%= renkan.colorPicker('Rk-Editor-ColorPicker-Edge') %>
<span class="Rk-Edit-ColorPicker-Text"><%- renkan.translate("Choose color") %></span>
</div>
</div>
--- a/client/templates/nodeeditor.html Thu Jan 05 19:34:53 2017 +0100
+++ b/client/templates/nodeeditor.html Tue Jan 10 17:36:30 2017 +0100
@@ -10,7 +10,23 @@
<input class="Rk-Edit-Title" type="text" value="<%-node.title%>" />
<% } %>
</p>
-<% if (options.show_node_editor_uri) { %>
+<% if (options.show_node_title_style) { %>
+ <div class="Rk-Editor-p-title-style">
+ <div class="Rk-Editor-p-title-color">
+ <span class="Rk-Editor-Label"><%-renkan.translate("Title color:")%></span>
+ <span class="Rk-Edit-Color" style="background: <%-node.title_color%>;">
+ <span class="Rk-Edit-ColorTip"></span>
+ </span>
+ <%= renkan.colorPicker('Rk-Editor-ColorPicker-Title') %>
+ </div>
+ <div class="Rk-Editor-p-title-size">
+ <span class="Rk-Editor-Label"><%-renkan.translate("Title size:")%></span>
+ <a href="#" class="Rk-Edit-Size-Btn" id="Rk-Edit-Title-Size-Down">-</a>
+ <span class="Rk-Edit-Size-Disp" id="Rk-Edit-Title-Size-Value"><%-node.title_size.toFixed(1)%></span>
+ <a href="#" class="Rk-Edit-Size-Btn" id="Rk-Edit-Title-Size-Up">+</a>
+ </div>
+ </div>
+<% } %> <% if (options.show_node_editor_uri) { %>
<p>
<label><%-renkan.translate("URI:")%></label>
<input class="Rk-Edit-URI" type="text" value="<%-node.uri%>" />
@@ -53,7 +69,7 @@
<span class="Rk-Edit-Color" style="background: <%-node.color%>;">
<span class="Rk-Edit-ColorTip"></span>
</span>
- <%= renkan.colorPicker %>
+ <%= renkan.colorPicker('Rk-Editor-ColorPicker-Node') %>
<span class="Rk-Edit-ColorPicker-Text"><%- renkan.translate("Choose color") %></span>
</div>
</div>
--- a/client/templates/scene.html Thu Jan 05 19:34:53 2017 +0100
+++ b/client/templates/scene.html Tue Jan 10 17:36:30 2017 +0100
@@ -18,7 +18,7 @@
<span class="Rk-Edit-ColorTip"></span>
<% } %>
</span>
- <% if (options.user_color_editable) { print(colorPicker) } %>
+ <% if (options.user_color_editable) { print(colorPicker('Rk-Editor-ColorPicker-User')) } %>
</div>
<% } %>
<span class="Rk-CurrentUser-Name"><unknown user></span>