client/js/renderer/nodeeditor.js
changeset 331 0628ed75e8d3
parent 330 4f92e61f87ba
child 384 6a7930a0d4d1
equal deleted inserted replaced
330:4f92e61f87ba 331:0628ed75e8d3
    20                 '<% if (options.show_node_editor_image) { %><div class="Rk-Edit-ImgWrap"><div class="Rk-Edit-ImgPreview"><img src="<%-node.image || node.image_placeholder%>" />' +
    20                 '<% if (options.show_node_editor_image) { %><div class="Rk-Edit-ImgWrap"><div class="Rk-Edit-ImgPreview"><img src="<%-node.image || node.image_placeholder%>" />' +
    21                 '<% if (node.clip_path) { %><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none"><path style="stroke-width: .02; stroke:red; fill-opacity:.3; fill:red;" d="<%- node.clip_path %>"/></svg><% }%>' +
    21                 '<% if (node.clip_path) { %><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none"><path style="stroke-width: .02; stroke:red; fill-opacity:.3; fill:red;" d="<%- node.clip_path %>"/></svg><% }%>' +
    22                 '</div></div><p><label><%-renkan.translate("Image URL:")%></label><input class="Rk-Edit-Image" type="text" value="<%-node.image%>"/></p>' +
    22                 '</div></div><p><label><%-renkan.translate("Image URL:")%></label><input class="Rk-Edit-Image" type="text" value="<%-node.image%>"/></p>' +
    23                 '<p><label><%-renkan.translate("Choose Image File:")%></label><input class="Rk-Edit-Image-File" type="file" accept="image/*"/></p><% } %>' +
    23                 '<p><label><%-renkan.translate("Choose Image File:")%></label><input class="Rk-Edit-Image-File" type="file" accept="image/*"/></p><% } %>' +
    24                 '<% if (options.show_node_editor_creator && node.has_creator) { %><p><span class="Rk-Editor-Label"><%-renkan.translate("Created by:")%></span> <span class="Rk-UserColor" style="background:<%-node.created_by_color%>;"></span><%- shortenText(node.created_by_title, 25) %></p><% } %>' +
    24                 '<% if (options.show_node_editor_creator && node.has_creator) { %><p><span class="Rk-Editor-Label"><%-renkan.translate("Created by:")%></span> <span class="Rk-UserColor" style="background:<%-node.created_by_color%>;"></span><%- shortenText(node.created_by_title, 25) %></p><% } %>' +
    25                 '<% if (options.change_shapes) { %><p><label><%-renkan.translate("Shapes available:")%></label><select class="Rk-Edit-Shape">' +
    25                 '<% if (options.change_shapes) { %><p><label><%-renkan.translate("Shapes available")%>:</label> <select class="Rk-Edit-Shape">' +
    26                 '<option class="Rk-Edit-Vocabulary-Property" value="circle"<% if (node.shape === "circle") { %> selected<% } %>><%- renkan.translate("Circle") %></option>' +
    26                 '<option class="Rk-Edit-Vocabulary-Property" value="circle"<% if (node.shape === "circle") { %> selected<% } %>><%- renkan.translate("Circle") %></option>' +
    27                 '<option class="Rk-Edit-Vocabulary-Property" value="rectangle"<% if (node.shape === "rectangle") { %> selected<% } %>><%- renkan.translate("Square") %></option>' +
    27                 '<option class="Rk-Edit-Vocabulary-Property" value="rectangle"<% if (node.shape === "rectangle") { %> selected<% } %>><%- renkan.translate("Square") %></option>' +
    28                 '<option class="Rk-Edit-Vocabulary-Property" value="diamond"<% if (node.shape === "diamond") { %> selected<% } %>><%- renkan.translate("Diamond") %></option>' +
    28                 '<option class="Rk-Edit-Vocabulary-Property" value="diamond"<% if (node.shape === "diamond") { %> selected<% } %>><%- renkan.translate("Diamond") %></option>' +
    29                 '<option class="Rk-Edit-Vocabulary-Property" value="polygon"<% if (node.shape === "polygon") { %> selected<% } %>><%- renkan.translate("Hexagone") %></option>' +
    29                 '<option class="Rk-Edit-Vocabulary-Property" value="polygon"<% if (node.shape === "polygon") { %> selected<% } %>><%- renkan.translate("Hexagone") %></option>' +
    30                 '<option class="Rk-Edit-Vocabulary-Property" value="ellipse"<% if (node.shape === "ellipse") { %> selected<% } %>><%- renkan.translate("Ellipse") %></option>' +
    30                 '<option class="Rk-Edit-Vocabulary-Property" value="ellipse"<% if (node.shape === "ellipse") { %> selected<% } %>><%- renkan.translate("Ellipse") %></option>' +
    99                             }
    99                             }
   100                             if (_this.options.show_node_editor_description) {
   100                             if (_this.options.show_node_editor_description) {
   101                                 _data.description = _this.editor_$.find(".Rk-Edit-Description").val();
   101                                 _data.description = _this.editor_$.find(".Rk-Edit-Description").val();
   102                             }
   102                             }
   103                             if (_this.options.change_shapes) {
   103                             if (_this.options.change_shapes) {
   104                                 _data.shape = _this.editor_$.find(".Rk-Edit-Shape").val();
   104                                 if(_model.get("shape")!==_this.editor_$.find(".Rk-Edit-Shape").val()){
   105                                 _data.shape_changed = true;
   105                                     _data.shape = _this.editor_$.find(".Rk-Edit-Shape").val();
       
   106                                     _data.shape_changed = true;
       
   107                                 }
   106                             }
   108                             }
   107                             _model.set(_data);
   109                             _model.set(_data);
   108                             _this.redraw();
   110                             _this.redraw();
       
   111                             // For an unknown reason, we have to set data twice when we change shape, otherwise the image disappears.
       
   112                             if(_data.shape_changed===true){
       
   113                                 _model.set(_data);
       
   114                             }
   109                         } else {
   115                         } else {
   110                             closeEditor();
   116                             closeEditor();
   111                         }
   117                         }
   112                     }).defer();
   118                     }).defer();
   113                 }).throttle(500);
   119                 }).throttle(500);
   114 
   120                 
   115                 this.editor_$.on("keyup", function(_e) {
   121                 this.editor_$.on("keyup", function(_e) {
   116                     if (_e.keyCode === 27) {
   122                     if (_e.keyCode === 27) {
   117                         closeEditor();
   123                         closeEditor();
   118                     }
   124                     }
   119                 });
   125                 });