# HG changeset patch
# User ymh <ymh.work@gmail.com>
# Date 1484066190 -3600
# Node ID 2b9c120dba55b556fc991151d75690ced870e141
# Parent  e388117572d868c238495a7238ecca60b28daa03
first implementation of node title size and color

diff -r e388117572d8 -r 2b9c120dba55 client/css/renkan.css
--- 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;
 }
diff -r e388117572d8 -r 2b9c120dba55 client/js/defaults.js
--- 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,
diff -r e388117572d8 -r 2b9c120dba55 client/js/i18n.js
--- 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 :",
     }
 };
diff -r e388117572d8 -r 2b9c120dba55 client/js/main.js
--- 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);
diff -r e388117572d8 -r 2b9c120dba55 client/js/renderer/basebutton.js
--- 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() {
diff -r e388117572d8 -r 2b9c120dba55 client/js/renderer/edgeeditor.js
--- 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) {
diff -r e388117572d8 -r 2b9c120dba55 client/js/renderer/nodeeditor.js
--- 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();
diff -r e388117572d8 -r 2b9c120dba55 client/js/renderer/noderepr.js
--- 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,
diff -r e388117572d8 -r 2b9c120dba55 client/js/renderer/scene.js
--- 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) {
diff -r e388117572d8 -r 2b9c120dba55 client/templates/edgeeditor.html
--- 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: &lt;%-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>
diff -r e388117572d8 -r 2b9c120dba55 client/templates/nodeeditor.html
--- 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>
diff -r e388117572d8 -r 2b9c120dba55 client/templates/scene.html
--- 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">&lt;unknown user&gt;</span>