client/js/renderer/nodeeditor.js
changeset 649 2b9c120dba55
parent 648 e388117572d8
--- 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();