# HG changeset patch
# User ymh <ymh.work@gmail.com>
# Date 1433198387 -7200
# Node ID 423bdf56d103985a26d14f9a76109bd6831acea9
# Parent  b38cf3d4cf1f037816ab7055fb777500901e9c6b
migrated to style, added dash style to client + small refactoring for shapes + triangle

diff -r b38cf3d4cf1f -r 423bdf56d103 client/css/renkan.css
--- a/client/css/renkan.css	Mon Jun 01 11:53:03 2015 +0200
+++ b/client/css/renkan.css	Tue Jun 02 00:39:47 2015 +0200
@@ -27,7 +27,7 @@
 /* Renkan CSS */
 
 #renkan{
-	overflow: hidden;
+  overflow: hidden;
 }
 
 .Rk-Main ul, .Rk-Main li, .Rk-Main h4, .Rk-Main h3, .Rk-Main p {
@@ -213,7 +213,7 @@
 .Rk-Save-Button:active,
 .Rk-Save-Button.saved:active,
 .Rk-Save-Button.Rk-Save-Online:active {
-	background-position: -104px 0;
+  background-position: -104px 0;
 }
 .Rk-Save-Button.to-save {
     background-position: -172px -35px;
@@ -383,13 +383,13 @@
 }
 
 .Rk-Edit-Image{
-	font-size: 12px; width: 220px;
+  font-size: 12px; width: 220px;
 }
 
 .Rk-Edit-Image-Del{
-	display: inline-block;
-	background: url(../img/remove.png);
-	background-size: 15px 20px;
+  display: inline-block;
+  background: url(../img/remove.png);
+  background-size: 15px 20px;
     background-repeat: no-repeat;
     vertical-align: top;
     height: 20px;
@@ -461,6 +461,11 @@
     float: left; width: 11px; height: 11px; margin: 0 1px 1px 0; cursor: pointer;
 }
 
+.Rk-Edit-Dash {
+    float: left;
+    display: inline-block;
+}
+
 .Rk-Edit-Size-Up, .Rk-Edit-Size-Down {
     font-size: 13px; font-weight: bold; padding: 0 4px; background: #ffffff; color: #000000; border: 1px solid #cccccc;
     text-decoration: none;
diff -r b38cf3d4cf1f -r 423bdf56d103 client/js/dataloader.js
--- a/client/js/dataloader.js	Mon Jun 01 11:53:03 2015 +0200
+++ b/client/js/dataloader.js	Tue Jun 02 00:39:47 2015 +0200
@@ -6,10 +6,39 @@
         converters: {
             from1to2: function(data) {
 
-                //TODO: implement
+                var i, len;
+                if(typeof data.nodes !== 'undefined') {
+                    for(i=0, len=data.nodes.length; i<len; i++) {
+                        var node = data.nodes[i];
+                        if(node.color) {
+                            console.log("node color : ", node.color);
+                            node.style = {
+                                color: node.color,
+                            };
+                        }
+                        else {
+                            node.style = {};
+                        }
+                    }
+                }
+                if(typeof data.edges !== 'undefined') {
+                    for(i=0, len=data.edges.length; i<len; i++) {
+                        var edge = data.edges[i];
+                        if(edge.color) {
+                            edge.style = {
+                                color: edge.color,
+                            };
+                        }
+                        else {
+                            edge.style = {};
+                        }
+                    }
+                }
+
+                data.schema_version = "2";
 
                 return data;
-            }
+            },
         }
     };
 
@@ -27,6 +56,7 @@
         if (schemaVersionFrom !== schemaVersionTo) {
             var converterName = "from" + schemaVersionFrom + "to" + schemaVersionTo;
             if (typeof this.dataConverters[converterName] === 'function') {
+                console.log("Apply conversion function :", converterName);
                 data = this.dataConverters[converterName](data);
             }
         }
diff -r b38cf3d4cf1f -r 423bdf56d103 client/js/defaults.js
--- a/client/js/defaults.js	Mon Jun 01 11:53:03 2015 +0200
+++ b/client/js/defaults.js	Tue Jun 02 00:39:47 2015 +0200
@@ -37,7 +37,7 @@
            Set to 0 for delete confirm */
     autoscale_padding: 50,
     resize: true,
-    
+
     /* zoom options */
     show_zoom: true,
         /* show zoom buttons */
@@ -45,8 +45,8 @@
         /* show buttons to save view */
     default_view: false,
         /* Allows to load default view (zoom+offset) at start on read_only mode, instead of autoScale. the default_view will be the last */
-    
-    
+
+
     /* TOP BAR BUTTONS */
     show_search_field: true,
     show_user_list: true,
@@ -74,7 +74,7 @@
     minimap_border_color: "#cccccc",
     minimap_highlight_color: "#ffff00",
     minimap_highlight_weight: 5,
-    
+
 
     /* EDGE/NODE COMMON OPTIONS */
 
@@ -82,6 +82,8 @@
     buttons_label_color: "#c000c0",
     buttons_label_font_size: 9,
 
+    default_dash_array : [4, 5],
+
     /* NODE DISPLAY OPTIONS */
 
     show_node_circles: true,
@@ -133,7 +135,7 @@
     show_node_editor_uri: true,
     show_node_editor_description: true,
     show_node_editor_size: true,
-    show_node_editor_color: true,
+    show_node_editor_style: true,
     show_node_editor_image: true,
     show_node_editor_creator: true,
     allow_image_upload: true,
diff -r b38cf3d4cf1f -r 423bdf56d103 client/js/i18n.js
--- a/client/js/i18n.js	Mon Jun 01 11:53:03 2015 +0200
+++ b/client/js/i18n.js	Tue Jun 02 00:39:47 2015 +0200
@@ -38,6 +38,7 @@
         "Lignes de Temps": "Lignes de Temps",
         "Loading, please wait": "Chargement en cours, merci de patienter",
         "Edge color:": "Couleur :",
+        "Dash:": "Point. :",
         "Node color:": "Couleur :",
         "Choose color": "Choisir une couleur",
         "Change edge direction": "Changer le sens du lien",
@@ -81,6 +82,7 @@
         "Ellipse": "Ellipse",
         "Star": "Étoile",
         "Cloud": "Nuage",
+        "Triangle": "Triangle",
         "Zoom Fit": "Ajuster le Zoom",
         "Download Project": "Télécharger le projet",
         "Zoom Save": "Sauver le Zoom",
diff -r b38cf3d4cf1f -r 423bdf56d103 client/js/models.js
--- a/client/js/models.js	Mon Jun 01 11:53:03 2015 +0200
+++ b/client/js/models.js	Tue Jun 02 00:39:47 2015 +0200
@@ -94,7 +94,7 @@
                 description : this.get("description"),
                 position : this.get("position"),
                 image : this.get("image"),
-                color : this.get("color"),
+                style : this.get("style"),
                 created_by : this.get("created_by") ? this.get("created_by")
                         .get("_id") : null,
                 size : this.get("size"),
@@ -139,7 +139,7 @@
                 description : this.get("description"),
                 from : this.get("from") ? this.get("from").get("_id") : null,
                 to : this.get("to") ? this.get("to").get("_id") : null,
-                color : this.get("color"),
+                style : this.get("style"),
                 created_by : this.get("created_by") ? this.get("created_by")
                         .get("_id") : null
             };
@@ -190,9 +190,9 @@
 
     // PROJECT
     var Project = Models.Project = RenkanModel.extend({
-        schemaVersion : "1",
+        schema_version : "2",
         type : "project",
-        blacklist : [ 'saveStatus', 'loadingStatus',],
+        blacklist : [ 'saveStatus', 'loadingStatus'],
         relations : [ {
             type : Backbone.HasMany,
             key : "users",
@@ -274,7 +274,7 @@
           if(typeof(t) === "undefined") {
             t = this;
           }
-          var version = t.schemaVersion;
+          var version = t.schema_version;
           if(!version) {
             return 1;
           }
@@ -296,8 +296,6 @@
         },
         toJSON : function() {
             var json = _.clone(this.attributes);
-            delete json.schemaVersion;
-            json.schema_version = this.schemaVersion;
             for ( var attr in json) {
                 if ((json[attr] instanceof Backbone.Model) ||
                         (json[attr] instanceof Backbone.Collection) ||
diff -r b38cf3d4cf1f -r 423bdf56d103 client/js/renderer/edge.js
--- a/client/js/renderer/edge.js	Mon Jun 01 11:53:03 2015 +0200
+++ b/client/js/renderer/edge.js	Tue Jun 02 00:39:47 2015 +0200
@@ -67,20 +67,21 @@
                 return;
             }
             var _p0a = this.from_representation.paper_coords,
-            _p1a = this.to_representation.paper_coords,
-            _v = _p1a.subtract(_p0a),
-            _r = _v.length,
-            _u = _v.divide(_r),
-            _ortho = new paper.Point([- _u.y, _u.x]),
-            _group_pos = this.bundle.getPosition(this),
-            _delta = _ortho.multiply( this.options.edge_gap_in_bundles * _group_pos ),
-            _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),
-            _handle = _v.divide(3),
-            _color = this.model.get("color") || this.model.get("color") || (this.model.get("created_by") || Utils._USER_PLACEHOLDER(this.renkan)).get("color"),
-            opacity = 1;
+                _p1a = this.to_representation.paper_coords,
+                _v = _p1a.subtract(_p0a),
+                _r = _v.length,
+                _u = _v.divide(_r),
+                _ortho = new paper.Point([- _u.y, _u.x]),
+                _group_pos = this.bundle.getPosition(this),
+                _delta = _ortho.multiply( this.options.edge_gap_in_bundles * _group_pos ),
+                _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),
+                _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,
+                opacity = 1;
 
             if (this.model.get("delete_scheduled") || this.from_representation.model.get("delete_scheduled") || this.to_representation.model.get("delete_scheduled")) {
                 opacity = 0.5;
@@ -103,8 +104,11 @@
                 });
             }
 
+
+
             this.paper_coords = _p0b.add(_p1b).divide(2);
             this.line.strokeColor = _color;
+            this.line.dashArray = _dash;
             this.line.opacity = opacity;
             this.line.segments[0].point = _p0a;
             this.line.segments[1].point = this.paper_coords;
diff -r b38cf3d4cf1f -r 423bdf56d103 client/js/renderer/edgeeditor.js
--- a/client/js/renderer/edgeeditor.js	Mon Jun 01 11:53:03 2015 +0200
+++ b/client/js/renderer/edgeeditor.js	Tue Jun 02 00:39:47 2015 +0200
@@ -29,11 +29,12 @@
                     uri: _model.get("uri"),
                     short_uri:  Utils.shortenText((_model.get("uri") || "").replace(/^(https?:\/\/)?(www\.)?/,'').replace(/\/$/,''),40),
                     description: _model.get("description"),
-                    color: _model.get("color") || _created_by.get("color"),
+                    color: (_model.has("style") && _model.get("style").color) || _created_by.get("color"),
+                    dash: _model.has("style") && _model.get("style").dash ? "checked" : "",
                     from_title: _from_model.get("title"),
                     to_title: _to_model.get("title"),
-                    from_color: _from_model.get("color") || (_from_model.get("created_by") || Utils._USER_PLACEHOLDER(this.renkan)).get("color"),
-                    to_color: _to_model.get("color") || (_to_model.get("created_by") || Utils._USER_PLACEHOLDER(this.renkan)).get("color"),
+                    from_color: (_from_model.has("style") && _from_model.get("style").color) || (_from_model.get("created_by") || Utils._USER_PLACEHOLDER(this.renkan)).get("color"),
+                    to_color: (_to_model.has("style") && _to_model.get("style").color) || (_to_model.get("created_by") || Utils._USER_PLACEHOLDER(this.renkan)).get("color"),
                     created_by_color: _created_by.get("color"),
                     created_by_title: _created_by.get("title")
                 },
@@ -65,6 +66,10 @@
                             if (_this.options.show_edge_editor_uri) {
                                 _data.uri = _this.editor_$.find(".Rk-Edit-URI").val();
                             }
+                            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});
+                            }
                             _this.editor_$.find(".Rk-Edit-Goto").attr("href",_data.uri || "#");
                             _model.set(_data);
                             paper.view.draw();
@@ -123,12 +128,12 @@
                         },
                         function(_e) {
                             _e.preventDefault();
-                            _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Utils._USER_PLACEHOLDER(_this.renkan)).get("color"));
+                            _this.editor_$.find(".Rk-Edit-Color").css("background", (_model.has("style") && _model.get("style").color)|| (_model.get("created_by") || Utils._USER_PLACEHOLDER(_this.renkan)).get("color"));
                         }
                 ).click(function(_e) {
                     _e.preventDefault();
                     if (_this.renderer.isEditable()) {
-                        _model.set("color", $(this).attr("data-color"));
+                        _model.set("style", _.assign( ((_model.has("style") && _.clone(_model.get("style"))) || {}), {color: $(this).attr("data-color")}));
                         _picker.hide();
                         paper.view.draw();
                     } else {
diff -r b38cf3d4cf1f -r 423bdf56d103 client/js/renderer/nodeeditor.js
--- a/client/js/renderer/nodeeditor.js	Mon Jun 01 11:53:03 2015 +0200
+++ b/client/js/renderer/nodeeditor.js	Tue Jun 02 00:39:47 2015 +0200
@@ -1,5 +1,5 @@
 
-define(['jquery', 'underscore', 'requtils', 'renderer/baseeditor'], function ($, _, requtils, BaseEditor) {
+define(['jquery', 'underscore', 'requtils', 'renderer/baseeditor', 'renderer/shapebuilder'], function ($, _, requtils, BaseEditor, ShapeBuilder) {
     'use strict';
 
     var Utils = requtils.getUtils();
@@ -30,7 +30,8 @@
                     description: _model.get("description"),
                     image: _model.get("image") || "",
                     image_placeholder: _image_placeholder,
-                    color: _model.get("color") || _created_by.get("color"),
+                    color: (_model.has("style") && _model.get("style").color) || _created_by.get("color"),
+                    dash: _model.has("style") && _model.get("style").dash ? "checked" : "",
                     clip_path: _model.get("clip_path") || false,
                     created_by_color: _created_by.get("color"),
                     created_by_title: _created_by.get("title"),
@@ -39,7 +40,8 @@
                 },
                 renkan: this.renkan,
                 options: this.options,
-                shortenText: Utils.shortenText
+                shortenText: Utils.shortenText,
+                shapes : _(ShapeBuilder.builders).omit('svg').keys().value(),
             }));
             this.redraw();
             var _this = this,
@@ -86,6 +88,10 @@
                         if (_this.options.show_node_editor_description) {
                             _data.description = _this.editor_$.find(".Rk-Edit-Description").val();
                         }
+                        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});
+                        }
                         if (_this.options.change_shapes) {
                             if(_model.get("shape")!==_this.editor_$.find(".Rk-Edit-Shape").val()){
                                 _data.shape = _this.editor_$.find(".Rk-Edit-Shape").val();
@@ -150,12 +156,12 @@
                         },
                         function(_e) {
                             _e.preventDefault();
-                            _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Utils._USER_PLACEHOLDER(_this.renkan)).get("color"));
+                            _this.editor_$.find(".Rk-Edit-Color").css("background", (_model.has("style") && _model.get("style").color) || (_model.get("created_by") || Utils._USER_PLACEHOLDER(_this.renkan)).get("color"));
                         }
                 ).click(function(_e) {
                     _e.preventDefault();
                     if (_this.renderer.isEditable()) {
-                        _model.set("color", $(this).attr("data-color"));
+                        _model.set("style", _.assign( ((_model.has("style") && _.clone(_model.get("style"))) || {}), {color: $(this).attr("data-color")}));
                         _picker.hide();
                         paper.view.draw();
                     } else {
diff -r b38cf3d4cf1f -r 423bdf56d103 client/js/renderer/noderepr.js
--- a/client/js/renderer/noderepr.js	Mon Jun 01 11:53:03 2015 +0200
+++ b/client/js/renderer/noderepr.js	Tue Jun 02 00:39:47 2015 +0200
@@ -142,8 +142,10 @@
                 top: this.paper_coords.y + this.circle_radius * this.h_ratio + this.options.node_label_distance,
                 opacity: opacity
             });
-            var _color = this.model.get("color") || (this.model.get("created_by") || Utils._USER_PLACEHOLDER(this.renkan)).get("color");
+            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.strokeColor = _color;
+            this.circle.dashArray = _dash;
             var _pc = this.paper_coords;
             this.all_buttons.forEach(function(b) {
                 b.moveTo(_pc);
diff -r b38cf3d4cf1f -r 423bdf56d103 client/js/renderer/shapebuilder.js
--- a/client/js/renderer/shapebuilder.js	Mon Jun 01 11:53:03 2015 +0200
+++ b/client/js/renderer/shapebuilder.js	Tue Jun 02 00:39:47 2015 +0200
@@ -35,7 +35,7 @@
                 return new paper.Path.RegularPolygon([0, 0], 6, 1);
             },
             getImageShape: function(center, radius) {
-                return new paper.Path.RegularPolygon([0, 0], 6, radius);
+                return new paper.Path.RegularPolygon(center, 6, radius);
             }
         },
         "diamond":{
@@ -55,7 +55,7 @@
                 return new paper.Path.Star([0, 0], 8, 1, 0.7);
             },
             getImageShape: function(center, radius) {
-                return new paper.Path.Star([0, 0], 8, radius*1, radius*0.7);
+                return new paper.Path.Star(center, 8, radius*1, radius*0.7);
             }
         },
         "cloud": {
@@ -71,6 +71,14 @@
                 return path;
             }
         },
+        "triangle": {
+            getShape: function() {
+                return new paper.Path.RegularPolygon([0,0], 3, 1);
+            },
+            getImageShape: function(center, radius) {
+                return new paper.Path.RegularPolygon(center, 3, radius);
+            }
+        },
         "svg": function(path){
             return {
                 getShape: function() {
@@ -97,6 +105,8 @@
         return builders[shape];
     };
 
+    ShapeBuilder.builders = builders;
+
     return ShapeBuilder;
 
 });
diff -r b38cf3d4cf1f -r 423bdf56d103 client/templates/edgeeditor.html
--- a/client/templates/edgeeditor.html	Mon Jun 01 11:53:03 2015 +0200
+++ b/client/templates/edgeeditor.html	Tue Jun 02 00:39:47 2015 +0200
@@ -31,6 +31,7 @@
 <% } } %>
 <% if (options.show_edge_editor_color) { %>
     <div class="Rk-Editor-p">
+      <div id="Rk-Editor-p-color">
         <span class="Rk-Editor-Label"><%-renkan.translate("Edge color:")%></span>
         <div class="Rk-Edit-ColorPicker-Wrapper">
             <span class="Rk-Edit-Color" style="background: &lt;%-edge.color%>;">
@@ -39,6 +40,11 @@
             <%= renkan.colorPicker %>
             <span class="Rk-Edit-ColorPicker-Text"><%- renkan.translate("Choose color") %></span>
         </div>
+      </div>
+      <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>
     </div>
 <% } %>
 <% if (options.show_edge_editor_direction) { %>
diff -r b38cf3d4cf1f -r 423bdf56d103 client/templates/nodeeditor.html
--- a/client/templates/nodeeditor.html	Mon Jun 01 11:53:03 2015 +0200
+++ b/client/templates/nodeeditor.html	Tue Jun 02 00:39:47 2015 +0200
@@ -23,8 +23,9 @@
         <span class="Rk-Edit-Size-Value"><%-node.size%></span>
         <a href="#" class="Rk-Edit-Size-Up">+</a>
     </p>
-<% } %> <% if (options.show_node_editor_color) { %>
+<% } %> <% if (options.show_node_editor_style) { %>
     <div class="Rk-Editor-p">
+      <div id="Rk-Editor-p-color">
         <span class="Rk-Editor-Label">
         <%-renkan.translate("Node color:")%></span>
         <div class="Rk-Edit-ColorPicker-Wrapper">
@@ -34,6 +35,11 @@
             <%= renkan.colorPicker %>
             <span class="Rk-Edit-ColorPicker-Text"><%- renkan.translate("Choose color") %></span>
         </div>
+      </div>
+      <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>
     </div>
 <% } %> <% if (options.show_node_editor_image) { %>
     <div class="Rk-Edit-ImgWrap">
@@ -68,27 +74,11 @@
     <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") %>
+          <% _.each(shapes, function(shape) { %>
+            <option class="Rk-Edit-Vocabulary-Property" value="<%- shape %>"<% if (node.shape === shape) { %> selected<% } %>>
+                <%- renkan.translate(shape.charAt(0).toUpperCase() + shape.substring(1)) %>
             </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>
-            <option class="Rk-Edit-Vocabulary-Property" value="cloud"<% if (node.shape === "cloud") { %> selected<% } %>>
-                <%- renkan.translate("Cloud") %>
-            </option>
+          <% }); %>
         </select>
     </p>
 <% } %>