# HG changeset patch
# User cavaliet
# Date 1410446985 -7200
# Node ID 4f92e61f87baad1c54c2b25915a137afe9d665ec
# Parent  a276b36ae58ed05b711a07ed1553b09ab2de1dd6
change shape in node editor

diff -r a276b36ae58e -r 4f92e61f87ba client/js/defaults.js
--- a/client/js/defaults.js	Wed Sep 10 16:58:01 2014 +0200
+++ b/client/js/defaults.js	Thu Sep 11 16:49:45 2014 +0200
@@ -92,6 +92,8 @@
         /* Maximum displayed text length */
     label_untitled_nodes: "(untitled)",
         /* Label to display on untitled nodes */
+    change_shapes: true,
+        /* Change shapes enabled */
 
     /* EDGE DISPLAY OPTIONS */
 
diff -r a276b36ae58e -r 4f92e61f87ba client/js/renderer/nodeeditor.js
--- a/client/js/renderer/nodeeditor.js	Wed Sep 10 16:58:01 2014 +0200
+++ b/client/js/renderer/nodeeditor.js	Thu Sep 11 16:49:45 2014 +0200
@@ -21,7 +21,15 @@
                 '<% 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><% }%>' +
                 '</div></div><p><label><%-renkan.translate("Image URL:")%></label><input class="Rk-Edit-Image" type="text" value="<%-node.image%>"/></p>' +
                 '<p><label><%-renkan.translate("Choose Image File:")%></label><input class="Rk-Edit-Image-File" type="file" accept="image/*"/></p><% } %>' +
-                '<% 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><% } %>'
+                '<% 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><% } %>' +
+                '<% if (options.change_shapes) { %><p><label><%-renkan.translate("Shapes available:")%></label><select class="Rk-Edit-Shape">' +
+                '<option class="Rk-Edit-Vocabulary-Property" value="circle"<% if (node.shape === "circle") { %> selected<% } %>><%- renkan.translate("Circle") %></option>' +
+                '<option class="Rk-Edit-Vocabulary-Property" value="rectangle"<% if (node.shape === "rectangle") { %> selected<% } %>><%- renkan.translate("Square") %></option>' +
+                '<option class="Rk-Edit-Vocabulary-Property" value="diamond"<% if (node.shape === "diamond") { %> selected<% } %>><%- renkan.translate("Diamond") %></option>' +
+                '<option class="Rk-Edit-Vocabulary-Property" value="polygon"<% if (node.shape === "polygon") { %> selected<% } %>><%- renkan.translate("Hexagone") %></option>' +
+                '<option class="Rk-Edit-Vocabulary-Property" value="ellipse"<% if (node.shape === "ellipse") { %> selected<% } %>><%- renkan.translate("Ellipse") %></option>' +
+                '<option class="Rk-Edit-Vocabulary-Property" value="star"<% if (node.shape === "star") { %> selected<% } %>><%- renkan.translate("Star") %></option>' +
+                '</select></p><% } %>'
         ),
         readOnlyTemplate: _.template(
                 '<h2><span class="Rk-CloseX">&times;</span><% if (options.show_node_tooltip_color) { %><span class="Rk-UserColor" style="background:<%-node.color%>;"></span><% } %>' +
@@ -51,7 +59,8 @@
                     clip_path: _model.get("clip_path") || false,
                     created_by_color: _created_by.get("color"),
                     created_by_title: _created_by.get("title"),
-                    size: (_size > 0 ? "+" : "") + _size
+                    size: (_size > 0 ? "+" : "") + _size,
+                    shape: _model.get("shape") || "circle"
                 },
                 renkan: this.renkan,
                 options: this.options,
@@ -78,7 +87,7 @@
                     _(function() {
                         if (_this.renderer.isEditable()) {
                             var _data = {
-                                    title: _this.editor_$.find(".Rk-Edit-Title").val()
+                                title: _this.editor_$.find(".Rk-Edit-Title").val()
                             };
                             if (_this.options.show_node_editor_uri) {
                                 _data.uri = _this.editor_$.find(".Rk-Edit-URI").val();
@@ -91,12 +100,15 @@
                             if (_this.options.show_node_editor_description) {
                                 _data.description = _this.editor_$.find(".Rk-Edit-Description").val();
                             }
+                            if (_this.options.change_shapes) {
+                                _data.shape = _this.editor_$.find(".Rk-Edit-Shape").val();
+                                _data.shape_changed = true;
+                            }
                             _model.set(_data);
                             _this.redraw();
                         } else {
                             closeEditor();
                         }
-
                     }).defer();
                 }).throttle(500);
 
@@ -106,7 +118,7 @@
                     }
                 });
 
-                this.editor_$.find("input, textarea").on("change keyup paste", onFieldChange);
+                this.editor_$.find("input, textarea, select").on("change keyup paste", onFieldChange);
 
                 this.editor_$.find(".Rk-Edit-Image-File").change(function() {
                     if (this.files.length) {
diff -r a276b36ae58e -r 4f92e61f87ba client/js/renderer/noderepr.js
--- a/client/js/renderer/noderepr.js	Wed Sep 10 16:58:01 2014 +0200
+++ b/client/js/renderer/noderepr.js	Thu Sep 11 16:49:45 2014 +0200
@@ -1,5 +1,3 @@
-
-
 define(['jquery', 'underscore', 'requtils', 'renderer/baserepresentation', 'renderer/shapebuilder'], function ($, _, requtils, BaseRepresentation, ShapeBuilder) {
     'use strict';
 
@@ -18,10 +16,7 @@
         _init: function() {
             this.renderer.node_layer.activate();
             this.type = "Node";
-            this.shapeBuilder = new ShapeBuilder(this.model.get("shape"));
-            // "circle" "rectangle" "ellipse" "regularpolygon" "star" "diamond"
-            this.circle = this.shapeBuilder.getShape();
-            this.circle.__representation = this;
+            this.buildShape();
             if (this.options.show_node_circles) {
                 this.circle.strokeWidth = this.options.node_stroke_width;
                 this.h_ratio = 1;
@@ -29,6 +24,7 @@
                 this.h_ratio = 0;
             }
             this.title = $('<div class="Rk-Label">').appendTo(this.renderer.labels_$);
+            
             if (this.options.editor_mode) {
                 var Renderer = requtils.getRenderer();
                 this.normal_buttons = [
@@ -42,6 +38,7 @@
                                                new Renderer.NodeRevertButton(this.renderer, null)
                                                ];
                 this.all_buttons = this.normal_buttons.concat(this.pending_delete_buttons);
+                
                 for (var i = 0; i < this.all_buttons.length; i++) {
                     this.all_buttons[i].source_representation = this;
                 }
@@ -58,7 +55,34 @@
                 this.renderer.minimap.node_group.addChild(this.minimap_circle);
             }
         },
+        buildShape: function(){
+            console.log("buildShape");//, this.model.get("shape_changed"), this.model.get("shape"));
+            if(typeof this.model.get("shape_changed")!=="undefined" && this.model.get("shape_changed")===true){
+                this.model.set("shape_changed", false);
+                console.log("REMOVE IMG !!");
+                this.img = "a";
+                //delete this.renderer.image_cache[this.img];
+            }
+            if(this.circle){
+                this.circle.remove();
+                delete this.circle;
+            }
+            // "circle" "rectangle" "ellipse" "polygon" "star" "diamond"
+            this.shapeBuilder = new ShapeBuilder(this.model.get("shape"));
+            this.circle = this.shapeBuilder.getShape();
+            this.circle.__representation = this;
+            this.last_circle_radius = 1;
+            /*if (this.node_image) {
+                console.log("this.node_image.remove();")
+                this.node_image.remove();
+                delete this.node_image;
+            }*/
+        },
         redraw: function(_dontRedrawEdges) {
+            //console.log("redraw");
+            if(typeof this.model.get("shape_changed")!=="undefined" && this.model.get("shape_changed")===true){
+                this.buildShape();
+            }
             var _model_coords = new paper.Point(this.model.get("position")),
             _baseRadius = this.options.node_size_base * Math.exp((this.model.get("size") || 0) * Utils._NODE_SIZE_STEP);
             if (!this.is_dragging || !this.paper_coords) {
@@ -135,9 +159,11 @@
             var lastImage = this.img;
             this.img = this.model.get("image");
             if (this.img && this.img !== lastImage) {
+                console.log("test 1 = " + lastImage + ", img = " + this.img);
                 this.showImage();
             }
             if (this.node_image && !this.img) {
+                console.log("tes 2 = ");
                 this.node_image.remove();
                 delete this.node_image;
             }
@@ -169,16 +195,22 @@
 
         },
         showImage: function() {
+            console.log("showImage " + this.img);
             var _image = null;
             if (typeof this.renderer.image_cache[this.img] === "undefined") {
+                console.log("showImage 1");
                 _image = new Image();
                 this.renderer.image_cache[this.img] = _image;
                 _image.src = this.img;
             } else {
+                console.log("showImage 2");
                 _image = this.renderer.image_cache[this.img];
             }
+            console.log("showImage 3");
             if (_image.width) {
+                console.log("showImage 4");
                 if (this.node_image) {
+                    console.log("showImage 5");
                     this.node_image.remove();
                 }
                 this.renderer.node_layer.activate();
@@ -415,6 +447,7 @@
                 this.minimap_circle.remove();
             }
             if (this.node_image) {
+                console.log("remove image 1");
                 this.node_image.remove();
             }
         }