# HG changeset patch
# User veltr
# Date 1343318765 -7200
# Node ID 3360c3f7fb18f5aea4e508e125378fdc5226773d
# Parent  45cca39b00ac4d262fd0ef605ccbac7cc6b5178f
Added Edge management to the rendering engine

diff -r 45cca39b00ac -r 3360c3f7fb18 client/data/test-data.json
--- a/client/data/test-data.json	Wed Jul 25 19:36:31 2012 +0200
+++ b/client/data/test-data.json	Thu Jul 26 18:06:05 2012 +0200
@@ -62,7 +62,7 @@
             "uri": "http://fr.wikipedia.org/wiki/Th%C3%A9orie_des_graphes",
             "created_by": "u-cybunk",
             "position": {
-                "x": -300,
+                "x": -350,
                 "y": 100
             }
         },
@@ -82,31 +82,31 @@
             "id": "e-001",
             "from": "n-001",
             "to": "n-002",
-            "created_by": "u_raphv"
+            "created_by": "u-raphv"
         },
         {
             "id": "e-002",
             "from": "n-002",
             "to": "n-003",
-            "created_by": "u_raphv"
+            "created_by": "u-raphv"
         },
         {
             "id": "e-003",
             "from": "n-001",
             "to": "n-004",
-            "created_by": "u_cybunk"
+            "created_by": "u-cybunk"
         },
         {
             "id": "e-004",
             "from": "n-004",
             "to": "n-005",
-            "created_by": "u_cybunk"
+            "created_by": "u-cybunk"
         },
         {
             "id": "e-005",
             "from": "n-004",
             "to": "n-006",
-            "created_by": "u_cybunk"
+            "created_by": "u-cybunk"
         }
     ]
 }
diff -r 45cca39b00ac -r 3360c3f7fb18 client/js/json-serializer.js
--- a/client/js/json-serializer.js	Wed Jul 25 19:36:31 2012 +0200
+++ b/client/js/json-serializer.js	Thu Jul 26 18:06:05 2012 +0200
@@ -20,21 +20,40 @@
     _proj.title = _serializedData.title || "(untitled project)";
     if (typeof _serializedData.users === "object" && _serializedData.users) {
         _proj.users.addElements(
-            Rkns._(_serializedData.users).map(function(_userData) {
+            Rkns._(_serializedData.users).map(function(_data) {
+                var _userData = {
+                    id: _data.id,
+                    title: _data.title,
+                    uri: _data.uri,
+                    color: _data.color
+                };
                 return new Rkns.Model.User(_proj, _userData);
             })
         );
     }
     if (typeof _serializedData.nodes === "object" && _serializedData.nodes) {
         _proj.nodes.addElements(
-            Rkns._(_serializedData.nodes).map(function(_nodeData) {
+            Rkns._(_serializedData.nodes).map(function(_data) {
+                var _nodeData = {
+                    id: _data.id,
+                    title: _data.title,
+                    uri: _data.uri,
+                    created_by: _data.created_by,
+                    position: {
+                        x: _data.position.x,
+                        y: _data.position.y
+                        //x: 800 * Math.random() - 400,
+                        //y: 600 * Math.random() - 300
+                    }
+                };
                 return new Rkns.Model.Node(_proj, _nodeData);
             })
         );
     }
     if (typeof _serializedData.edges === "object" && _serializedData.edges) {
         _proj.edges.addElements(
-            Rkns._(_serializedData.edges).map(function(_edgeData) {
+            Rkns._(_serializedData.edges).map(function(_data) {
+                var _edgeData = _data;
                 return new Rkns.Model.Edge(_proj, _edgeData);
             })
         );
diff -r 45cca39b00ac -r 3360c3f7fb18 client/js/main.js
--- a/client/js/main.js	Wed Jul 25 19:36:31 2012 +0200
+++ b/client/js/main.js	Thu Jul 26 18:06:05 2012 +0200
@@ -82,7 +82,7 @@
     var _this = this;
     this.serializer.onLoad(function() {
         _this.renderer.draw();
-    })
+    });
 }
 
 /* Utility functions */
diff -r 45cca39b00ac -r 3360c3f7fb18 client/js/model.js
--- a/client/js/model.js	Wed Jul 25 19:36:31 2012 +0200
+++ b/client/js/model.js	Thu Jul 26 18:06:05 2012 +0200
@@ -15,14 +15,6 @@
     this[ _propName + "_id" ] = _id;
     var _element = _list.getElement(_id);
     this[ _propName ] = _element;
-/*    if (typeof _element !== "undefined" && typeof _element._backRefs !== "undefined") {
-        _element._backRefs.push({
-            type: this.type,
-            id: this.id,
-            pointing_property: _propName,
-            element: this
-        });
-    } */
 }
 
 /* Element Class Generator */
@@ -55,11 +47,12 @@
 Rkns.Model.Edge = Rkns.Model._elementClass("edge");
 
 Rkns.Model.Edge.prototype._init = function(_project, _props) {
+    this.addReference("created_by", this._project.users, _props.created_by);
     this.addReference("from", this._project.nodes, _props.from);
     this.addReference("to", this._project.nodes, _props.to);
 }
 
-/* List Helper Functions */
+/* List Helper Functions -- See Metadataplayer */
 
 Rkns.Model.List = function() {
     Array.call(this);
diff -r 45cca39b00ac -r 3360c3f7fb18 client/js/paper-renderer.js
--- a/client/js/paper-renderer.js	Wed Jul 25 19:36:31 2012 +0200
+++ b/client/js/paper-renderer.js	Thu Jul 26 18:06:05 2012 +0200
@@ -6,42 +6,187 @@
     if (typeof _renderer !== "undefined") {
         this._renderer = _renderer;
         this._element = _element;
-        this._element._renderer_controller = this;
+        this._element.__controller = this;
     }
 }
 
 Rkns.Renderers.Paper__Controllers.Node = Rkns.Utils.inherit(Rkns.Renderers.Paper__Controllers._Base);
 
 Rkns.Renderers.Paper__Controllers.Node.prototype._init = function() {
+    this._renderer.node_layer.activate();
+    this.type = "node";
     this.node_circle = new paper.Path.Circle([0, 0], 20);
+    this.node_circle.fillColor = '#ffffff';
+    this.node_circle.__controller = this;
+    this.node_text = new paper.PointText([0,0]);
+    this.node_text.characterStyle = {
+        fontSize: 14,
+        fillColor: 'black'
+    };
+    this.node_text.paragraphStyle.justification = 'center';
+    this.node_text.__controller = this;
     this.redraw();
 }
 
 Rkns.Renderers.Paper__Controllers.Node.prototype.redraw = function() {
-    var _centerPoint = paper.view.center.add([this._element.position.x, this._element.position.y]);
-    this.node_circle.position = _centerPoint;
+    this.node_model_coords = new paper.Point(this._element.position.x, this._element.position.y);
+    this.node_paper_coords = this._renderer.toPaperCoords(this.node_model_coords);
+    this.node_circle.position = this.node_paper_coords;
+    this.node_text.content = this._element.title;
+    this.node_text.position = this.node_paper_coords.add([0, 35]);
     this.node_circle.strokeColor = this._element.created_by.color;
 }
 
-Rkns.Renderers.Paper__Controllers.Edge = Rkns.Utils.inherit(Rkns.Renderers._Base);
+Rkns.Renderers.Paper__Controllers.Node.prototype.paperShift = function(_delta) {
+    this.node_paper_coords = this.node_paper_coords.add(_delta);
+    this.node_model_coords = this._renderer.toModelCoords(this.node_paper_coords);
+    this._element.position.x = this.node_model_coords.x;
+    this._element.position.y = this.node_model_coords.y;
+    this._renderer.redraw();
+}
+
+/* */
+
+Rkns.Renderers.Paper__Controllers.Edge = Rkns.Utils.inherit(Rkns.Renderers.Paper__Controllers._Base);
+
+
+Rkns.Renderers.Paper__Controllers.Edge.prototype._init = function() {
+    this._renderer.edge_layer.activate();
+    this.type = "edge";
+    this.from_node_controller = this._element.from.__controller;
+    this.to_node_controller = this._element.to.__controller;
+    this.edge_line = new paper.Path();
+    this.edge_line.add([0,0],[0,0]);
+    this.edge_line.__controller = this;
+    this.edge_text = new paper.PointText();
+    this.edge_text.characterStyle = {
+        fontSize: 10,
+        fillColor: 'black'
+    };
+    this.edge_text.paragraphStyle.justification = 'center';
+    this.edge_text.__controller = this;
+    this.edge_angle = 0;
+}
+
+Rkns.Renderers.Paper__Controllers.Edge.prototype.redraw = function() {
+    this.edge_line.strokeColor = this._element.created_by.color;
+    var _p0 = this.from_node_controller.node_paper_coords,
+        _p1 = this.to_node_controller.node_paper_coords,
+        _a = _p1.subtract(_p0).angle;
+    this.edge_line.segments[0].point = _p0;
+    this.edge_line.segments[1].point = _p1;
+    this.edge_text.content = this._element.title;
+    this.edge_text.position = _p0.add(_p1).divide(2);
+    if (_a > 90) {
+        _a -= 180;
+    }
+    if (_a < -90) {
+        _a += 180;
+    }
+    this.edge_text.rotate(_a - this.edge_angle);
+    this.edge_angle = _a;
+}
+
+Rkns.Renderers.Paper__Controllers.Edge.prototype.paperShift = function(_delta) {
+    this.from_node_controller.paperShift(_delta);
+    this.to_node_controller.paperShift(_delta);
+    this._renderer.redraw();
+}
+
+/* */
 
 Rkns.Renderers.Paper.prototype._init = function() {
     paper.setup(document.getElementById(this._project._opts.canvas_id));
+    this.scale = 1;
+    this.offset = paper.view.center;
+    this.totalScroll = 0;
+    this.dragging_target = null;
+    this.edge_layer = new paper.Layer();
+    this.node_layer = new paper.Layer();
+    var _tool = new paper.Tool(),
+        _this = this;
+    _tool.onMouseDown = function(_event) {
+        _this.onMouseDown(_event);
+    }
+    _tool.onMouseDrag = function(_event) {
+        _this.onMouseDrag(_event);
+    }
+    Rkns.$("#"+this._project._opts.canvas_id).mousewheel(function(_event, _delta) {
+        _this.onScroll(_event, _delta);
+    })
+    paper.view.onResize = function(_event) {
+        _this.offset = _this.offset.add(_event.delta.divide(2));
+        _this.redraw();
+    }
+}
+
+Rkns.Renderers.Paper.prototype.toPaperCoords = function(_point) {
+    return _point.multiply(this.scale).add(this.offset);
+}
+
+
+Rkns.Renderers.Paper.prototype.toModelCoords = function(_point) {
+    return _point.subtract(this.offset).divide(this.scale);
 }
 
 Rkns.Renderers.Paper.prototype.draw = function() {
-    var _this = this;
+    var _this = this,
+        _xx = this._project.nodes.map(function(_node) { return _node.position.x }),
+        _yy = this._project.nodes.map(function(_node) { return _node.position.y }),
+        _minx = Math.min.apply(Math, _xx),
+        _miny = Math.min.apply(Math, _yy),
+        _maxx = Math.max.apply(Math, _xx),
+        _maxy = Math.max.apply(Math, _yy);
+    this.scale = Math.min((paper.view.size.width - 100) / (_maxx - _minx), (paper.view.size.height - 100) / (_maxy - _miny));
+    this.offset = paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(this.scale));
     this.nodes = this._project.nodes.map(function(_node) {
         return new Rkns.Renderers.Paper__Controllers.Node(_this, _node);
     });
-    paper.view.draw();
-    paper.view.onResize = function() {
-        _this.redraw();
-    }
+    this.edges = this._project.edges.map(function(_edge) {
+        return new Rkns.Renderers.Paper__Controllers.Edge(_this, _edge);
+    });
+    
+    this.redraw();
 }
 
 Rkns.Renderers.Paper.prototype.redraw = function() {
     Rkns._(this.nodes).each(function(_node) {
         _node.redraw();
-    })
+    });
+    Rkns._(this.edges).each(function(_edge) {
+        _edge.redraw();
+    });
+    paper.view.draw();
+}
+
+Rkns.Renderers.Paper.prototype.onMouseDown = function(_event) {
+    var _hitResult = paper.project.hitTest(_event.point);
+    if (_hitResult && typeof _hitResult.item.__controller !== "undefined") {
+        this.dragging_target = _hitResult.item.__controller;
+    } else {
+        this.dragging_target = null;
+    }
 }
+
+Rkns.Renderers.Paper.prototype.onMouseDrag = function(_event) {
+    if (this.dragging_target && typeof this.dragging_target.paperShift === "function") {
+        this.dragging_target.paperShift(_event.delta);
+    } else {
+        this.offset = this.offset.add(_event.delta);
+        this.redraw();
+    }
+}
+
+Rkns.Renderers.Paper.prototype.onScroll = function(_event, _delta) {
+    this.totalScroll += _delta;
+    if (Math.abs(this.totalScroll) >= 1) {
+        if (this.totalScroll > 0) {
+            this.scale *= Math.SQRT2;
+        } else {
+            this.scale *= Math.SQRT1_2;
+        }
+        console.log(this.scale);
+        this.totalScroll = 0;
+        this.redraw();
+    }
+}
diff -r 45cca39b00ac -r 3360c3f7fb18 client/lib/jquery.mousewheel.min.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/lib/jquery.mousewheel.min.js	Thu Jul 26 18:06:05 2012 +0200
@@ -0,0 +1,12 @@
+/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY
+ *
+ * Version: 3.0.6
+ * 
+ * Requires: 1.2.2+
+ */
+(function(a){function d(b){var c=b||window.event,d=[].slice.call(arguments,1),e=0,f=!0,g=0,h=0;return b=a.event.fix(c),b.type="mousewheel",c.wheelDelta&&(e=c.wheelDelta/120),c.detail&&(e=-c.detail/3),h=e,c.axis!==undefined&&c.axis===c.HORIZONTAL_AXIS&&(h=0,g=-1*e),c.wheelDeltaY!==undefined&&(h=c.wheelDeltaY/120),c.wheelDeltaX!==undefined&&(g=-1*c.wheelDeltaX/120),d.unshift(b,e,g,h),(a.event.dispatch||a.event.handle).apply(this,d)}var b=["DOMMouseScroll","mousewheel"];if(a.event.fixHooks)for(var c=b.length;c;)a.event.fixHooks[b[--c]]=a.event.mouseHooks;a.event.special.mousewheel={setup:function(){if(this.addEventListener)for(var a=b.length;a;)this.addEventListener(b[--a],d,!1);else this.onmousewheel=d},teardown:function(){if(this.removeEventListener)for(var a=b.length;a;)this.removeEventListener(b[--a],d,!1);else this.onmousewheel=null}},a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})})(jQuery)
diff -r 45cca39b00ac -r 3360c3f7fb18 client/render-test.html
--- a/client/render-test.html	Wed Jul 25 19:36:31 2012 +0200
+++ b/client/render-test.html	Thu Jul 26 18:06:05 2012 +0200
@@ -7,6 +7,7 @@
         <meta name="description" content="" />
         <meta name="author" content="Institut de Recherche et d'Innovation" />
         <script src="lib/jquery.min.js"></script>
+        <script src="lib/jquery.mousewheel.min.js"></script>
         <script src="lib/underscore-min.js"></script>
         <script src="lib/paper.js"></script>
         <script src="js/main.js"></script>