# HG changeset patch
# User veltr
# Date 1343237791 -7200
# Node ID 45cca39b00ac4d262fd0ef605ccbac7cc6b5178f
# Parent  4b07ff5c2dd6c54d09bcbca367d5930481cdf5b3
First rendering tests

diff -r 4b07ff5c2dd6 -r 45cca39b00ac client/data/test-data.json
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/data/test-data.json	Wed Jul 25 19:36:31 2012 +0200
@@ -0,0 +1,112 @@
+{
+    "title": "Test Graph",
+    "creation_date": "2012-07-25T11:00:00.0Z",
+    "users": [
+        {
+            "id": "u-cybunk",
+            "title": "Samuel",
+            "uri": "http://twitter.com/cybunk",
+            "color": "#e00000"
+        },
+        {
+            "id": "u-raphv",
+            "title": "Raphael",
+            "uri": "http://twitter.com/raphv",
+            "color": "#00a000"
+        }
+    ],
+    "nodes": [
+        {
+            "id": "n-001",
+            "title": "連環 (Renkan)",
+            "uri": "http://ja.wikipedia.org/wiki/%E7%99%BE%E5%AD%A6%E9%80%A3%E7%92%B0",
+            "created_by": "u-cybunk",
+            "position": {
+                "x": 0,
+                "y": 0
+            }
+        },
+        {
+            "id": "n-002",
+            "title": "Savoir",
+            "uri": "http://fr.wikipedia.org/wiki/Savoir",
+            "created_by": "u-raphv",
+            "position": {
+                "x": 200,
+                "y": 50
+            }
+        },
+        {
+            "id": "n-003",
+            "title": "Connaissance",
+            "uri": "http://fr.wikipedia.org/wiki/Connaissance",
+            "created_by": "u-raphv",
+            "position": {
+                "x": 300,
+                "y": -50
+            }
+        },
+        {
+            "id": "n-004",
+            "title": "graphe",
+            "uri": "http://fr.wikipedia.org/wiki/Th%C3%A9orie_des_graphes",
+            "created_by": "u-cybunk",
+            "position": {
+                "x": -200,
+                "y": 0
+            }
+        },
+        {
+            "id": "n-005",
+            "title": "nœud",
+            "uri": "http://fr.wikipedia.org/wiki/Th%C3%A9orie_des_graphes",
+            "created_by": "u-cybunk",
+            "position": {
+                "x": -300,
+                "y": 100
+            }
+        },
+        {
+            "id": "n-006",
+            "title": "lien",
+            "uri": "http://fr.wikipedia.org/wiki/Th%C3%A9orie_des_graphes",
+            "created_by": "u-cybunk",
+            "position": {
+                "x": -300,
+                "y": -100
+            }
+        }
+    ],
+    "edges": [
+        {
+            "id": "e-001",
+            "from": "n-001",
+            "to": "n-002",
+            "created_by": "u_raphv"
+        },
+        {
+            "id": "e-002",
+            "from": "n-002",
+            "to": "n-003",
+            "created_by": "u_raphv"
+        },
+        {
+            "id": "e-003",
+            "from": "n-001",
+            "to": "n-004",
+            "created_by": "u_cybunk"
+        },
+        {
+            "id": "e-004",
+            "from": "n-004",
+            "to": "n-005",
+            "created_by": "u_cybunk"
+        },
+        {
+            "id": "e-005",
+            "from": "n-004",
+            "to": "n-006",
+            "created_by": "u_cybunk"
+        }
+    ]
+}
diff -r 4b07ff5c2dd6 -r 45cca39b00ac client/js/json-serializer.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/js/json-serializer.js	Wed Jul 25 19:36:31 2012 +0200
@@ -0,0 +1,42 @@
+Rkns.Serializers.BasicJson = Rkns.Utils.inherit(Rkns.Serializers._Base);
+
+Rkns.Serializers.BasicJson.prototype._init = function() {
+    this.load(this._project._opts.url);
+}
+
+Rkns.Serializers.BasicJson.prototype.load = function(_url) {
+    var _this = this;
+    Rkns.$.getJSON(_url, function(_data) {
+        _this.deserialize(_data);
+        _this.handleCallbacks();
+    });
+}
+
+Rkns.Serializers.BasicJson.prototype.deserialize = function(_serializedData) {
+    if (typeof _serializedData === "string") {
+        _serializedData = JSON.parse(_serializedData);
+    }
+    var _proj = this._project;
+    _proj.title = _serializedData.title || "(untitled project)";
+    if (typeof _serializedData.users === "object" && _serializedData.users) {
+        _proj.users.addElements(
+            Rkns._(_serializedData.users).map(function(_userData) {
+                return new Rkns.Model.User(_proj, _userData);
+            })
+        );
+    }
+    if (typeof _serializedData.nodes === "object" && _serializedData.nodes) {
+        _proj.nodes.addElements(
+            Rkns._(_serializedData.nodes).map(function(_nodeData) {
+                return new Rkns.Model.Node(_proj, _nodeData);
+            })
+        );
+    }
+    if (typeof _serializedData.edges === "object" && _serializedData.edges) {
+        _proj.edges.addElements(
+            Rkns._(_serializedData.edges).map(function(_edgeData) {
+                return new Rkns.Model.Edge(_proj, _edgeData);
+            })
+        );
+    }
+}
diff -r 4b07ff5c2dd6 -r 45cca39b00ac client/js/main.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/js/main.js	Wed Jul 25 19:36:31 2012 +0200
@@ -0,0 +1,128 @@
+/* 
+ *  Copyright 2012 Institut de recherche et d'innovation 
+ *  contributor(s) : Samuel Huron, Raphael Velt
+ *   
+ *  contact@iri.centrepompidou.fr
+ *  http://www.iri.centrepompidou.fr 
+ *   
+ *  This software is a computer program whose purpose is to show and add annotations on a video .
+ *  This software is governed by the CeCILL-C license under French law and
+ *  abiding by the rules of distribution of free software. You can  use, 
+ *  modify and/ or redistribute the software under the terms of the CeCILL-C
+ *  license as circulated by CEA, CNRS and INRIA at the following URL
+ *  "http://www.cecill.info". 
+ *  
+ *  The fact that you are presently reading this means that you have had
+ *  knowledge of the CeCILL-C license and that you accept its terms.
+*/
+
+/* Declaring the Renkan Namespace Rkns */
+
+Rkns = {}
+
+Rkns.$ = jQuery;
+
+Rkns._ = _;
+
+Rkns.Serializers = {};
+
+Rkns.Serializers._Base = function(_project) {
+    if (typeof _project !== "undefined") {
+        this._project = _project;
+        this._callbackQueue = [];
+        this._loaded = false;
+    }
+}
+
+Rkns.Serializers._Base.prototype.deserialize = function() {}
+
+Rkns.Serializers._Base.prototype.deferCallback = function(_callback) {
+    var _this = this;
+    Rkns._.defer(function() {
+        _callback.call(_this);
+    });
+}
+
+Rkns.Serializers._Base.prototype.handleCallbacks = function() {
+    this._loaded = true;
+    while (this._callbackQueue.length) {
+        this.deferCallback(this._callbackQueue.splice(0,1)[0]);
+    }
+}
+
+Rkns.Serializers._Base.prototype.onLoad = function(_callback) {
+    if (this._loaded) {
+        this.deferCallback(_callback);
+    } else {
+        this._callbackQueue.push(_callback);
+    }
+}
+
+Rkns.Renderers = {};
+
+Rkns.Renderers._Base = function(_project) {
+    if (typeof _project !== "undefined") {
+        this._project = _project;
+    }
+}
+
+Rkns.Project = function(_opts) {
+    if (typeof _opts.serializer == "undefined") {
+        _opts.serializer = "BasicJson";
+    }
+    if (typeof _opts.renderer == "undefined") {
+        _opts.renderer = "Paper";
+    }
+    this._opts = _opts;
+    this.users = new Rkns.Model.List();
+    this.nodes = new Rkns.Model.List();
+    this.edges = new Rkns.Model.List();
+    this.serializer = new Rkns.Serializers[_opts.serializer](this);
+    this.renderer = new Rkns.Renderers[_opts.renderer](this);
+    var _this = this;
+    this.serializer.onLoad(function() {
+        _this.renderer.draw();
+    })
+}
+
+/* Utility functions */
+
+Rkns.Utils = {
+    _ID_AUTO_INCREMENT : 0,
+    _ID_BASE : (function(_d) {
+        function pad(n){return n<10 ? '0'+n : n}
+        function fillrand(n) {
+            var _res = ''
+            for (var i=0; i<n; i++) {
+                _res += Math.floor(16*Math.random()).toString(16);
+            }
+            return _res;
+        }
+        return _d.getUTCFullYear() + '-'  
+            + pad(_d.getUTCMonth()+1) + '-'  
+            + pad(_d.getUTCDate()) + '-'
+            + fillrand(16);
+    })(new Date()),
+    getUID : function(_base) {
+        var _n = (++this._ID_AUTO_INCREMENT).toString(16),
+            _base = (typeof _base === "undefined" ? "" : _base + "-" );
+        while (_n.length < 4) {
+            _n = '0' + _n
+        }
+        return _base + this._ID_BASE + '-' + _n;
+    },
+    inherit : function(_baseClass, _callbefore) {
+        var _class = function() {
+            if (typeof _callbefore === "function") {
+                _callbefore.apply(this, Array.prototype.slice.call(arguments, 0));
+            }
+            if (typeof _baseClass.prototype._init !== "function") {
+                _baseClass.prototype._init = function() {}
+            }
+            _baseClass.apply(this, Array.prototype.slice.call(arguments, 0));
+            this._init.apply(this, Array.prototype.slice.call(arguments, 0));
+        }
+        _class.prototype = new _baseClass();
+        return _class;
+    }
+}
\ No newline at end of file
diff -r 4b07ff5c2dd6 -r 45cca39b00ac client/js/model.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/js/model.js	Wed Jul 25 19:36:31 2012 +0200
@@ -0,0 +1,177 @@
+Rkns.Model = {}
+
+Rkns.Model._BaseElement = function(_project, _props) {
+    if (typeof _props !== "undefined") {
+        this._project = _project;
+        this.id = _props.id || Rkns.utils.getUID(this.type);
+        this.title = _props.title || "(untitled " + this.type + ")";
+        this.description = _props.description || "";
+        this.uri = _props.uri || "";
+//        this._backRefs = [];
+    }
+}
+
+Rkns.Model._BaseElement.prototype.addReference = function(_propName, _list, _id) {
+    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 */
+
+Rkns.Model._elementClass = function(_type) {
+    return Rkns.Utils.inherit(Rkns.Model._BaseElement, function() {
+        this.type = _type;
+    });
+}
+
+/* User Model */
+
+Rkns.Model.User = Rkns.Model._elementClass("user");
+
+Rkns.Model.User.prototype._init = function(_project, _props) {
+    this.color = _props.color || "#666666";
+}
+
+/* Node Model */
+
+Rkns.Model.Node = Rkns.Model._elementClass("node");
+
+Rkns.Model.Node.prototype._init = function(_project, _props) {
+    this.addReference("created_by", this._project.users, _props.created_by);
+    this.position = _props.position;
+}
+
+/* Edge Model */
+
+Rkns.Model.Edge = Rkns.Model._elementClass("edge");
+
+Rkns.Model.Edge.prototype._init = function(_project, _props) {
+    this.addReference("from", this._project.nodes, _props.from);
+    this.addReference("to", this._project.nodes, _props.to);
+}
+
+/* List Helper Functions */
+
+Rkns.Model.List = function() {
+    Array.call(this);
+    this.idIndex = [];
+}
+
+Rkns.Model.List.prototype = new Array();
+
+Rkns.Model.List.prototype.hasId = function(_id) {
+    return Rkns._(this.idIndex).include(_id);
+}
+
+Rkns.Model.List.prototype.getIds = function(_id) {
+    return this.idIndex;
+}
+
+/* On recent browsers, forEach and map are defined and do what we want.
+ * Otherwise, we'll use the Underscore.js functions
+ */
+if (typeof Array.prototype.forEach === "undefined") {
+    Rkns.Model.List.prototype.forEach = function(_callback) {
+        var _this = this;
+        Rkns._(this).forEach(function(_value, _key) {
+            _callback(_value, _key, _this);
+        });
+    }
+}
+
+if (typeof Array.prototype.map === "undefined") {
+    Rkns.Model.List.prototype.map = function(_callback) {
+        var _this = this;
+        return Rkns._(this).map(function(_value, _key) {
+            return _callback(_value, _key, _this);
+        });
+    }
+}
+
+/* We override Array's filter function because it doesn't return an Rkns.Model.List
+ */
+Rkns.Model.List.prototype.filter = function(_callback) {
+    var _this = this,
+        _res = new Rkns.Model.List();
+    _res.addElements(Rkns._(this).filter(function(_value, _key) {
+        return _callback(_value, _key, _this);
+    }));
+    return _res;
+}
+
+Rkns.Model.List.prototype.slice = function(_start, _end) {
+    var _res = new Rkns.Model.List();
+    _res.addElements(Array.prototype.slice.call(this, _start, _end));
+    return _res;
+}
+
+Rkns.Model.List.prototype.splice = function(_start, _end) {
+    var _res = new Rkns.Model.List();
+    _res.addElements(Array.prototype.splice.call(this, _start, _end));
+    this.idIndex.splice(_start, _end);
+    return _res;
+}
+
+/* Array has a sort function, but it's not as interesting as Underscore.js's sortBy
+ * and won't return a new Rkns.Model.List
+ */
+Rkns.Model.List.prototype.sortBy = function(_callback) {
+    var _this = this,
+        _res = new Rkns.Model.List();
+    _res.addElements(Rkns._(this).sortBy(function(_value, _key) {
+        return _callback(_value, _key, _this);
+    }));
+    return _res;
+}
+
+Rkns.Model.List.prototype.push = function(_el) {
+    if (typeof _el === "undefined" || typeof _el.id === "undefined") {
+        return;
+    }
+    var _index = (Rkns._(this.idIndex).indexOf(_el.id));
+    if (_index === -1) {
+        this.idIndex.push(_el.id);
+        Array.prototype.push.call(this, _el);
+    } else {
+        this[_index] = _el;
+    }
+}
+
+Rkns.Model.List.prototype.addElements = function(_array) {
+    var _this = this;
+    Rkns._(_array).forEach(function(_el) {
+        _this.push(_el);
+    });
+}
+
+Rkns.Model.List.prototype.removeId = function(_id) {
+    var _index = (Rkns._(this.idIndex).indexOf(_id));
+    if (_index !== -1) {
+        this.splice(_index,1);
+    }
+}
+
+Rkns.Model.List.prototype.removeIds = function(_list) {
+    var _this = this;
+    Rkns._(_list).forEach(function(_id) {
+        _this.removeId(_id);
+    });
+}
+
+Rkns.Model.List.prototype.getElement = function(_id) {
+    var _index = Rkns._(this.idIndex).indexOf(_id);
+    if (_index === -1) {
+        return undefined;
+    } else {
+        return this[_index];
+    }
+}
diff -r 4b07ff5c2dd6 -r 45cca39b00ac client/js/paper-renderer.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/js/paper-renderer.js	Wed Jul 25 19:36:31 2012 +0200
@@ -0,0 +1,47 @@
+Rkns.Renderers.Paper = Rkns.Utils.inherit(Rkns.Renderers._Base);
+
+Rkns.Renderers.Paper__Controllers = {}
+
+Rkns.Renderers.Paper__Controllers._Base = function(_renderer, _element) {
+    if (typeof _renderer !== "undefined") {
+        this._renderer = _renderer;
+        this._element = _element;
+        this._element._renderer_controller = this;
+    }
+}
+
+Rkns.Renderers.Paper__Controllers.Node = Rkns.Utils.inherit(Rkns.Renderers.Paper__Controllers._Base);
+
+Rkns.Renderers.Paper__Controllers.Node.prototype._init = function() {
+    this.node_circle = new paper.Path.Circle([0, 0], 20);
+    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_circle.strokeColor = this._element.created_by.color;
+}
+
+Rkns.Renderers.Paper__Controllers.Edge = Rkns.Utils.inherit(Rkns.Renderers._Base);
+
+Rkns.Renderers.Paper.prototype._init = function() {
+    paper.setup(document.getElementById(this._project._opts.canvas_id));
+}
+
+Rkns.Renderers.Paper.prototype.draw = function() {
+    var _this = this;
+    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();
+    }
+}
+
+Rkns.Renderers.Paper.prototype.redraw = function() {
+    Rkns._(this.nodes).each(function(_node) {
+        _node.redraw();
+    })
+}
diff -r 4b07ff5c2dd6 -r 45cca39b00ac client/render-test.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/render-test.html	Wed Jul 25 19:36:31 2012 +0200
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="fr">
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+        <title>Test de Rendu RENKAN</title>
+        <meta name="description" content="" />
+        <meta name="author" content="Institut de Recherche et d'Innovation" />
+        <script src="lib/jquery.min.js"></script>
+        <script src="lib/underscore-min.js"></script>
+        <script src="lib/paper.js"></script>
+        <script src="js/main.js"></script>
+        <script src="js/model.js"></script>
+        <script src="js/json-serializer.js"></script>
+        <script src="js/paper-renderer.js"></script>
+        <script type="text/javascript">
+            var _proj;
+            $(function() {
+                _proj = new Rkns.Project({
+                    url: "data/test-data.json",
+                    canvas_id: "renkanvas"
+                });
+            });
+        </script>
+        <style type="text/css">
+            #renkanvas { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
+        </style>
+    </head>
+
+    <body>
+        <canvas id="renkanvas" resize></canvas>
+    </body>
+</html>