add node and edge stroke width + adjust text + arrow placement + conrol arrow visibility
authorymh <ymh.work@gmail.com>
Wed, 03 Jun 2015 13:16:46 +0200
changeset 459 98cae534083d
parent 458 423bdf56d103
child 460 bdf851bb1c4f
add node and edge stroke width + adjust text + arrow placement + conrol arrow visibility
client/css/renkan.css
client/js/defaults.js
client/js/i18n.js
client/js/main.js
client/js/renderer/edge.js
client/js/renderer/edgeeditor.js
client/js/renderer/nodeeditor.js
client/js/renderer/noderepr.js
client/templates/edgeeditor.html
client/templates/nodeeditor.html
--- 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">&times;</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">