# HG changeset patch
# User veltr
# Date 1343663533 -7200
# Node ID 67085e6281e5ec2b4d868bf37b07d4eba0657c67
# Parent  f5297dde90534beafdbd19913925691fd8bf36a7
Added basic node/edge editing

diff -r f5297dde9053 -r 67085e6281e5 client/css/renkan.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/css/renkan.css	Mon Jul 30 17:52:13 2012 +0200
@@ -0,0 +1,74 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+
+ul, li {
+    list-style: none;
+}
+
+input::-moz-focus-inner /*Remove button padding in FF*/
+{ 
+    border: 0;
+    padding: 0;
+}
+
+table {
+    border-collapse: separate; border-spacing: 0;
+}
+
+th, td {
+    vertical-align: top;
+}
+
+img a {
+    border: none;
+}
+
+body {
+    font-size: 10px; font-family: Arial, Helvetica, sans-serif;
+}
+
+.Rk-CloseX {
+    float: right; cursor: pointer;
+}
+
+.Rk-Editor h2 {
+    font-size: 16px; font-weight: bold;
+}
+
+.Rk-Editor p {
+    margin: 5px 0; font-size: 12px;
+}
+
+.Rk-Editor label {
+    display: inline-block; width: 80px;
+}
+
+.Rk-Editor input[type=text] {
+    font-size: 12px; width: 225px;
+}
+
+.Rk-Editor textarea {
+    width: 225px; height: 120px; resize: none;
+}
+
+.Rk-UserColor {
+    display: inline-block; width: 1em; height: 1em; border: 1px solid #666666; margin: -2px 2px;
+}
diff -r f5297dde9053 -r 67085e6281e5 client/data/dynamic-data.json
--- a/client/data/dynamic-data.json	Fri Jul 27 19:15:32 2012 +0200
+++ b/client/data/dynamic-data.json	Mon Jul 30 17:52:13 2012 +0200
@@ -1,112 +1,1 @@
-{
-    "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": -350,
-                "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"
-        }
-    ]
-}
+{"title":"Test Graph","users":[{"id":"anonymous","title":"anonymous","uri":"","color":"#0000ff"},{"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":-25.88895000000003,"y":87.51464999999999}},{"id":"n-002","title":"Savoir","uri":"http://fr.wikipedia.org/wiki/Savoir","created_by":"u-raphv","position":{"x":188.95000000000002,"y":96.14999999999998}},{"id":"n-003","title":"Connaissance","uri":"http://fr.wikipedia.org/wiki/Connaissance","created_by":"u-raphv","position":{"x":289.4208034783762,"y":-126.35817503078205}},{"id":"n-004","title":"graphe","uri":"http://fr.wikipedia.org/wiki/Th%C3%A9orie_des_graphes","created_by":"u-cybunk","position":{"x":-255.49131419301492,"y":14.045175554077602}},{"id":"n-005","title":"nœud","uri":"http://fr.wikipedia.org/wiki/Th%C3%A9orie_des_graphes","created_by":"u-cybunk","position":{"x":"-350","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"}},{"id":"node-2012-07-30-228fe77f55e6c8cb-000c","title":"Tree of Knowledge","uri":"","created_by":"anonymous","position":{"x":16.731250153910498,"y":-33.2191000923462}},{"id":"node-2012-07-30-228fe77f55e6c8cb-0019","title":"Tree (木)","uri":"","created_by":"anonymous","position":{"x":-65.06465000000001,"y":-117.73549999999994}},{"id":"node-2012-07-30-9b22dc180265ecd3-0018","title":"(untitled node)","uri":"","created_by":"anonymous","position":{"x":-209.8383754309492,"y":-95.79672580033416}}],"edges":[{"id":"e-001","title":"(untitled edge)","description":"","uri":"","from":"n-001","to":"n-002","created_by":"u-raphv"},{"id":"e-002","title":"(untitled edge)","description":"","uri":"","from":"n-002","to":"n-003","created_by":"u-raphv"},{"id":"e-003","title":"(untitled edge)","description":"","uri":"","from":"n-001","to":"n-004","created_by":"u-cybunk"},{"id":"e-004","title":"(untitled edge)","description":"","uri":"","from":"n-004","to":"n-005","created_by":"u-cybunk"},{"id":"e-005","title":"(untitled edge)","description":"","uri":"","from":"n-004","to":"n-006","created_by":"u-cybunk"},{"id":"edge-2012-07-30-228fe77f55e6c8cb-0010","title":"(untitled edge)","description":"","uri":"","from":"node-2012-07-30-228fe77f55e6c8cb-000c","to":"n-001","created_by":"anonymous"},{"id":"edge-2012-07-30-228fe77f55e6c8cb-0013","title":"arête sans titre","description":"","uri":"","from":"node-2012-07-30-228fe77f55e6c8cb-000c","to":"n-003","created_by":"anonymous"},{"id":"edge-2012-07-30-228fe77f55e6c8cb-0016","title":"Similarité","description":"","uri":"","from":"n-004","to":"node-2012-07-30-228fe77f55e6c8cb-000c","created_by":"anonymous"},{"id":"edge-2012-07-30-228fe77f55e6c8cb-001d","title":"(untitled edge)","description":"","uri":"","from":"node-2012-07-30-228fe77f55e6c8cb-0019","to":"node-2012-07-30-228fe77f55e6c8cb-000c","created_by":"anonymous"}]}
\ No newline at end of file
diff -r f5297dde9053 -r 67085e6281e5 client/data/simple-persist.php
--- a/client/data/simple-persist.php	Fri Jul 27 19:15:32 2012 +0200
+++ b/client/data/simple-persist.php	Mon Jul 30 17:52:13 2012 +0200
@@ -5,8 +5,8 @@
         $resetfile = "test-data.json";
         file_put_contents($file, file_get_contents($resetfile));
     }
-    if ($_POST) {
-        file_put_contents($file, json_encode($_POST));
+    if (isset($_POST['data'])) {
+        file_put_contents($file, $_POST['data']);
         echo json_encode(array("result" => "OK"));
     } else {
         echo file_get_contents($file);
diff -r f5297dde9053 -r 67085e6281e5 client/js/i18n.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/js/i18n.js	Mon Jul 30 17:52:13 2012 +0200
@@ -0,0 +1,12 @@
+Rkns.i18n = {
+    en: {
+        edit_node: "Edit Node",
+        edit_edge: "Edit Edge",
+        edit_title: "Title:",
+        edit_uri: "URI:",
+        edit_description: "Description:",
+        edit_from: "From:",
+        edit_to: "To:",
+        created_by: "Created by:"
+    }
+}
diff -r f5297dde9053 -r 67085e6281e5 client/js/json-serializer.js
--- a/client/js/json-serializer.js	Fri Jul 27 19:15:32 2012 +0200
+++ b/client/js/json-serializer.js	Mon Jul 30 17:52:13 2012 +0200
@@ -38,6 +38,7 @@
             var _nodeData = {
                 id: _data.id,
                 title: _data.title,
+                description: _data.description,
                 uri: _data.uri,
                 created_by: _data.created_by,
                 position: {
@@ -90,6 +91,7 @@
             return {
                 id: _node.id,
                 title: _node.title,
+                description: _node.description,
                 uri: _node.uri,
                 from: _node.from.id,
                 to: _node.to.id,
@@ -101,10 +103,10 @@
 }
 
 Rkns.Serializers.BasicJson.prototype._save = function() {
-    var _data = this.serialize();
+    var _data = JSON.stringify(this.serialize());
     Rkns.$.post(
         this._project._opts.url,
-        _data,
+        { 'data': _data },
         function(_res) {
         }
     );
diff -r f5297dde9053 -r 67085e6281e5 client/js/main.js
--- a/client/js/main.js	Fri Jul 27 19:15:32 2012 +0200
+++ b/client/js/main.js	Mon Jul 30 17:52:13 2012 +0200
@@ -16,9 +16,10 @@
  *  knowledge of the CeCILL-C license and that you accept its terms.
 */
 
-/* Declaring the Renkan Namespace Rkns */
+/* Declaring the Renkan Namespace Rkns and Default values */
 
 Rkns = {
+    _MIN_DRAG_DISTANCE: 4,
     _NODE_RADIUS: 20,
     _NODE_FONT_SIZE: 14,
     _ARROW_LENGTH: 20,
@@ -83,6 +84,10 @@
     if (typeof _opts.renderer == "undefined") {
         _opts.renderer = "Paper";
     }
+    if (typeof _opts.language == "undefined" || typeof Rkns.i18n[_opts.language] == "undefined") {
+        _opts.language = "en";
+    }
+    this.l10n = Rkns.i18n[_opts.language];
     this._opts = _opts;
     this.users = new Rkns.Model.List();
     this.nodes = new Rkns.Model.List();
@@ -105,7 +110,7 @@
     var _node = new Rkns.Model.Node(this, _props);
     this.nodes.push(_node);
     if (typeof _render_save !== "undefined" && (_render_save&Rkns._RENDER)) {
-        var _controller = this.renderer.addElement("Node", _node);
+        var _controller = this.renderer.addController("Node", _node);
         _controller.redraw();
     }
     if (typeof _render_save !== "undefined" && (_render_save&Rkns._SAVE)) {
@@ -118,7 +123,7 @@
     var _edge = new Rkns.Model.Edge(this, _props);
     this.edges.push(_edge);
     if (typeof _render_save !== "undefined" && (_render_save&Rkns._RENDER)) {
-        var _controller = this.renderer.addElement("Edge", _edge);
+        var _controller = this.renderer.addController("Edge", _edge);
         _controller.redraw();
     }
     if (typeof _render_save !== "undefined" && (_render_save&Rkns._SAVE)) {
@@ -133,6 +138,23 @@
     return _user;
 }
 
+Rkns.Project.prototype.updateElement = function(_element, _props, _render_save) {
+    Rkns._(_props).each(function(_v, _k) {
+        _element[_k] = _v;
+    });
+    if (typeof _render_save !== "undefined" && (_render_save&Rkns._RENDER)) {
+        console.log("Shall redraw");
+        if (typeof _element.__controller !== "undefined") {
+            _element.__controller.redraw();
+        } else {
+            this._renderer.redraw();
+        }
+    }
+    if (typeof _render_save !== "undefined" && (_render_save&Rkns._SAVE)) {
+        this.serializer.save();
+    }
+}
+
 /* Utility functions */
 
 Rkns.Utils = {
diff -r f5297dde9053 -r 67085e6281e5 client/js/model.js
--- a/client/js/model.js	Fri Jul 27 19:15:32 2012 +0200
+++ b/client/js/model.js	Mon Jul 30 17:52:13 2012 +0200
@@ -52,6 +52,7 @@
 Rkns.Model.Node.prototype._init = function(_project, _props) {
     this.addReference("created_by", this._project.users, _props.created_by, _project.current_user);
     this.position = _props.position;
+    this.description = _props.description || "";
 }
 
 Rkns.Model.Node.prototype.setPosition = function(_x, _y) {
diff -r f5297dde9053 -r 67085e6281e5 client/js/paper-renderer.js
--- a/client/js/paper-renderer.js	Fri Jul 27 19:15:32 2012 +0200
+++ b/client/js/paper-renderer.js	Mon Jul 30 17:52:13 2012 +0200
@@ -1,11 +1,56 @@
 Rkns.Renderers.Paper = Rkns.Utils.inherit(Rkns.Renderers._Base);
 
+Rkns.Renderers.Paper__Utils = {
+    _EDITOR_ARROW_LENGTH : 20,
+    _EDITOR_ARROW_WIDTH : 40,
+    _EDITOR_MARGIN : 15,
+    _EDITOR_PADDING : 10,
+    drawEditBox : function(_coords, _path, _width, _height) {
+        var _isLeft = (_coords.x < paper.view.center.x ? 1 : -1),
+            _left = _coords.x + _isLeft * ( this._EDITOR_MARGIN + this._EDITOR_ARROW_LENGTH ),
+            _right = _coords.x + _isLeft * ( this._EDITOR_MARGIN + this._EDITOR_ARROW_LENGTH + _width ),
+            _top = _coords.y - _height / 2;
+        if (_top < this._EDITOR_MARGIN) {
+            _top = Math.min( this._EDITOR_MARGIN, _coords.y - this._EDITOR_ARROW_WIDTH / 2 );
+        }
+        var _bottom = _top + _height;
+        if (_bottom > (paper.view.size.height - this._EDITOR_MARGIN)) {
+            _bottom = Math.max( paper.view.size.height - this._EDITOR_MARGIN, _coords.y + this._EDITOR_ARROW_WIDTH / 2 );
+            _top = _bottom - _height;
+        }
+        _path.segments[0].point
+            = _path.segments[7].point
+            = _coords.add([_isLeft * this._EDITOR_MARGIN, 0]);
+        _path.segments[1].point.x
+            = _path.segments[2].point.x
+            = _path.segments[5].point.x
+            = _path.segments[6].point.x
+            = _left;
+        _path.segments[3].point.x
+            = _path.segments[4].point.x
+            = _right;
+        _path.segments[2].point.y
+            = _path.segments[3].point.y
+            = _top;
+        _path.segments[4].point.y
+            = _path.segments[5].point.y
+            = _bottom;
+        _path.segments[1].point.y = _coords.y - this._EDITOR_ARROW_WIDTH / 2;
+        _path.segments[6].point.y = _coords.y + this._EDITOR_ARROW_WIDTH / 2;
+        return {
+            left: (this._EDITOR_PADDING + Math.min(_left, _right)),
+            top: (this._EDITOR_PADDING + _top)
+        }
+    }
+}
+
 Rkns.Renderers.Paper__Controllers = {}
 
 Rkns.Renderers.Paper__Controllers._Base = function(_renderer, _element) {
     if (typeof _renderer !== "undefined") {
         this.id = Rkns.Utils.getUID('controller');
         this._renderer = _renderer;
+        this._project = _renderer._project;
         this._element = _element;
         this._element.__controller = this;
     }
@@ -15,6 +60,8 @@
 
 Rkns.Renderers.Paper__Controllers._Base.prototype.unselect = function() {}
 
+Rkns.Renderers.Paper__Controllers._Base.prototype.destroy = function() {}
+
 Rkns.Renderers.Paper__Controllers.Node = Rkns.Utils.inherit(Rkns.Renderers.Paper__Controllers._Base);
 
 Rkns.Renderers.Paper__Controllers.Node.prototype._init = function() {
@@ -42,8 +89,14 @@
 }
 
 Rkns.Renderers.Paper__Controllers.Node.prototype.paperShift = function(_delta) {
-    this._element.setPosition(this._renderer.toModelCoords(this.node_paper_coords.add(_delta)));
-    this._renderer._project.serializer.save();
+    var _coords = this._renderer.toModelCoords(this.node_paper_coords.add(_delta)),
+        _data = {
+            position: {
+                x: _coords.x,
+                y: _coords.y
+            }
+        };
+    this._project.updateElement(this._element, _data, Rkns._SAVE);
     this._renderer.redraw();
 }
 
@@ -85,14 +138,14 @@
     var _p0 = this.from_node_controller.node_paper_coords,
         _p1 = this.to_node_controller.node_paper_coords,
         _a = _p1.subtract(_p0).angle,
-        _center = _p0.add(_p1).divide(2),
         _color = this._element.created_by.color;
+    this.edge_paper_coords = _p0.add(_p1).divide(2);
     this.edge_line.strokeColor = _color;
     this.edge_line.segments[0].point = _p0;
     this.edge_line.segments[1].point = _p1;
     this.edge_arrow.rotate(_a - this.edge_arrow_angle);
     this.edge_arrow.fillColor = _color;
-    this.edge_arrow.position = _center;
+    this.edge_arrow.position = this.edge_paper_coords;
     this.edge_arrow_angle = _a;
     if (_a > 90) {
         _a -= 180;
@@ -102,7 +155,7 @@
     }
     this.edge_text.rotate(_a - this.edge_text_angle);
     this.edge_text.content = this._element.title;
-    this.edge_text.position = _center;
+    this.edge_text.position = this.edge_paper_coords;
     this.edge_text_angle = _a;
 }
 
@@ -119,6 +172,7 @@
     this.to_node_controller.paperShift(_delta);
     this._renderer.redraw();
 }
+
 /* */
 
 Rkns.Renderers.Paper__Controllers.TempEdge = Rkns.Utils.inherit(Rkns.Renderers.Paper__Controllers._Base);
@@ -126,7 +180,7 @@
 Rkns.Renderers.Paper__Controllers.TempEdge.prototype._init = function() {
     this._renderer.edge_layer.activate();
     this.type = "temp-edge";
-    var _color = this._renderer._project.current_user.color;
+    var _color = this._project.current_user.color;
     this.edge_line = new paper.Path();
     this.edge_line.strokeColor = _color;
     this.edge_line.add([0,0],[0,0]);
@@ -161,15 +215,155 @@
     if (_hitResult && typeof _hitResult.item.__controller !== "undefined") {
         var _target = _hitResult.item.__controller;
         if (_target.type === "node" && this.from_node_controller._element.id !== _target._element.id) {
-            this._renderer._project.addEdge({
+            this._project.addEdge({
                 from: this.from_node_controller._element.id,
                 to: _target._element.id
             }, Rkns._RENDER_AND_SAVE)
         }
     }
+    this._renderer.removeController(this);
+}
+
+Rkns.Renderers.Paper__Controllers.TempEdge.prototype.destroy = function() {
     this.edge_arrow.remove();
     this.edge_line.remove();
-    this._renderer.controllers.removeId(this.id);
+}
+
+/* */
+
+Rkns.Renderers.Paper__Controllers.NodeEditor = Rkns.Utils.inherit(Rkns.Renderers.Paper__Controllers._Base);
+
+Rkns.Renderers.Paper__Controllers.NodeEditor.prototype._init = function() {
+    this._renderer.overlay_layer.activate();
+    this.type = "editor";
+    this.editor_block = new paper.Path();
+    var _pts = Rkns._(Rkns._.range(8)).map(function() {return [0,0]});
+    this.editor_block.add.apply(this.editor_block, _pts);
+    this.editor_block.strokeWidth = 2;
+    this.editor_block.strokeColor = "#999999";
+    this.editor_block.fillColor = "#e0e0e0";
+    this.editor_block.opacity = .8;
+    this.editor_$ = Rkns.$('<div>')
+        .appendTo('.Rk-Editor')
+        .css({
+            position: "absolute",
+            opacity: .8
+        })
+        .hide();
+}
+
+Rkns.Renderers.Paper__Controllers.NodeEditor.prototype.template = Rkns._.template(
+    '<h2><span class="Rk-CloseX">&times;</span><%=l10n.edit_node%></span></h2>'
+    + '<p><label><%=l10n.edit_title%></label><input class="Rk-Edit-Title" type="text" value="<%=node.title%>"/></p>'
+    + '<p><label><%=l10n.edit_uri%></label><input class="Rk-Edit-URI" type="text" value="<%=node.uri%>"/></p>'
+    + '<p><label><%=l10n.edit_description%></label><textarea class="Rk-Edit-Description"><%=node.description%></textarea></p>'
+    + '<p><label><%=l10n.created_by%></label> <span class="Rk-UserColor" style="background:<%=node.created_by.color%>;"></span> <%=node.created_by.title%></p>'
+);
+
+Rkns.Renderers.Paper__Controllers.NodeEditor.prototype.redraw = function() {
+    var _coords = this.node_controller.node_paper_coords,
+        _element = this.node_controller._element,
+        _css = Rkns.Renderers.Paper__Utils.drawEditBox(_coords, this.editor_block, 250, 300);
+    this.editor_$
+        .html(this.template({
+            node: _element,
+            l10n: this._project.l10n
+        }))
+        .show()
+        .css(_css);
+    var _this = this;
+    this.editor_$.find(".Rk-CloseX").click(function() {
+        _this._renderer.removeController(_this);
+        paper.view.draw();
+    });
+    this.editor_$.find("input, textarea").bind("keyup change", function() {
+        var _data = {
+            title: _this.editor_$.find(".Rk-Edit-Title").val(),
+            description: _this.editor_$.find(".Rk-Edit-Description").val(),
+            uri: _this.editor_$.find(".Rk-Edit-URI").val()
+        }
+        _this._project.updateElement(
+            _element,
+            _data,
+            Rkns._SAVE
+        );
+        _this.node_controller.redraw();
+        paper.view.draw();
+    });
+}
+
+Rkns.Renderers.Paper__Controllers.NodeEditor.prototype.destroy = function() {
+    this.editor_block.remove();
+    this.editor_$.detach();
+}
+
+
+/* */
+
+Rkns.Renderers.Paper__Controllers.EdgeEditor = Rkns.Utils.inherit(Rkns.Renderers.Paper__Controllers._Base);
+
+Rkns.Renderers.Paper__Controllers.EdgeEditor.prototype._init = function() {
+    this._renderer.overlay_layer.activate();
+    this.type = "editor";
+    this.editor_block = new paper.Path();
+    var _pts = Rkns._(Rkns._.range(8)).map(function() {return [0,0]});
+    this.editor_block.add.apply(this.editor_block, _pts);
+    this.editor_block.strokeWidth = 2;
+    this.editor_block.strokeColor = "#999999";
+    this.editor_block.fillColor = "#e0e0e0";
+    this.editor_block.opacity = .8;
+    this.editor_$ = Rkns.$('<div>')
+        .appendTo('.Rk-Editor')
+        .css({
+            position: "absolute",
+            opacity: .8
+        })
+        .hide();
+}
+
+Rkns.Renderers.Paper__Controllers.EdgeEditor.prototype.template = Rkns._.template(
+    '<h2><span class="Rk-CloseX">&times;</span><%=l10n.edit_edge%></span></h2>'
+    + '<p><label><%=l10n.edit_title%></label><input class="Rk-Edit-Title" type="text" value="<%=edge.title%>"/></p>'
+    + '<p><label><%=l10n.edit_uri%></label><input class="Rk-Edit-URI" type="text" value="<%=edge.uri%>"/></p>'
+    + '<p><label><%=l10n.edit_from%></label><span class="Rk-UserColor" style="background:<%=edge.from.created_by.color%>;"></span><%=edge.from.title%></p>'
+    + '<p><label><%=l10n.edit_to%></label><span class="Rk-UserColor" style="background:<%=edge.to.created_by.color%>;"></span><%=edge.to.title%></p>'
+    + '<p><label><%=l10n.created_by%> </label><span class="Rk-UserColor" style="background:<%=edge.created_by.color%>;"></span> <%=edge.created_by.title%></p>'
+);
+
+Rkns.Renderers.Paper__Controllers.EdgeEditor.prototype.redraw = function() {
+    var _coords = this.edge_controller.edge_paper_coords,
+        _element = this.edge_controller._element,
+        _css = Rkns.Renderers.Paper__Utils.drawEditBox(_coords, this.editor_block, 250, 200);
+    this.editor_$
+        .html(this.template({
+            edge: _element,
+            l10n: this._project.l10n
+        }))
+        .show()
+        .css(_css);
+    var _this = this;
+    this.editor_$.find(".Rk-CloseX").click(function() {
+        _this._renderer.removeController(_this);
+        paper.view.draw();
+    });
+    this.editor_$.find("input, textarea").bind("keyup change", function() {
+        var _data = {
+            title: _this.editor_$.find(".Rk-Edit-Title").val(),
+            uri: _this.editor_$.find(".Rk-Edit-URI").val()
+        }
+        _this._project.updateElement(
+            _element,
+            _data,
+            Rkns._SAVE
+        );
+        _this.edge_controller.redraw();
+        paper.view.draw();
+    });
+}
+
+Rkns.Renderers.Paper__Controllers.EdgeEditor.prototype.destroy = function() {
+    this.editor_block.remove();
+    this.editor_$.detach();
 }
 
 /* */
@@ -183,12 +377,14 @@
     this.scale = 1;
     this.offset = paper.view.center;
     this.totalScroll = 0;
-    this.dragging_target = null;
+    this.click_target = null;
     this.selected_target = null;
     this.edge_layer = new paper.Layer();
     this.node_layer = new paper.Layer();
+    this.overlay_layer = new paper.Layer();
     var _tool = new paper.Tool(),
         _this = this;
+    _tool.minDistance = Rkns._MIN_DRAG_DISTANCE;
     _tool.onMouseMove = function(_event) {
         _this.onMouseMove(_event);
     }
@@ -234,21 +430,36 @@
     this.offset = paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(this.scale));
     this.controllers = new Rkns.Model.List();
     this._project.nodes.forEach(function(_node) {
-        _this.addElement("Node", _node);
+        _this.addController("Node", _node);
     });
     this._project.edges.forEach(function(_edge) {
-        _this.addElement("Edge", _edge);
+        _this.addController("Edge", _edge);
     });
     
     this.redraw();
 }
 
-Rkns.Renderers.Paper.prototype.addElement = function(_type, _element) {
-    var _el = new Rkns.Renderers.Paper__Controllers[_type](this, _element);
+Rkns.Renderers.Paper.prototype.addController = function(_type, _controller) {
+    var _el = new Rkns.Renderers.Paper__Controllers[_type](this, _controller);
     this.controllers.push(_el);
     return _el;
 }
 
+Rkns.Renderers.Paper.prototype.removeController = function(_controller) {
+    _controller.destroy();
+    this.controllers.removeId(_controller);
+}
+
+Rkns.Renderers.Paper.prototype.removeControllersOfType = function(_type) {
+    var _controllers = this.controllers.filter(function(_ctrl) {
+            return _ctrl.type == _type;
+        }),
+        _this = this;
+    _controllers.forEach(function(_ctrl) {
+        _this.removeController(_ctrl);
+    });
+}
+
 Rkns.Renderers.Paper.prototype.redraw = function() {
     this.controllers.forEach(function(_controller) {
         _controller.redraw();
@@ -275,24 +486,26 @@
 }
 
 Rkns.Renderers.Paper.prototype.onMouseDown = function(_event) {
+    this.is_dragging = false;
     var _hitResult = paper.project.hitTest(_event.point);
     if (_hitResult && typeof _hitResult.item.__controller !== "undefined") {
-        this.dragging_target = _hitResult.item.__controller;
-        if (this.dragging_target.type === "node" && _hitResult.type === "stroke") {
-            var _tmpEdge = this.addElement("TempEdge",{});
+        this.click_target = _hitResult.item.__controller;
+        if (this.click_target.type === "node" && _hitResult.type === "stroke") {
+            var _tmpEdge = this.addController("TempEdge",{});
             _tmpEdge.end_pos = _event.point;
-            _tmpEdge.from_node_controller = this.dragging_target;
+            _tmpEdge.from_node_controller = this.click_target;
             _tmpEdge.redraw();
-            this.dragging_target = _tmpEdge;
+            this.click_target = _tmpEdge;
         }
     } else {
-        this.dragging_target = null;
+        this.click_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);
+    this.is_dragging = true;
+    if (this.click_target && typeof this.click_target.paperShift === "function") {
+        this.click_target.paperShift(_event.delta);
     } else {
         this.offset = this.offset.add(_event.delta);
         this.redraw();
@@ -300,10 +513,31 @@
 }
 
 Rkns.Renderers.Paper.prototype.onMouseUp = function(_event) {
-    if (this.dragging_target && this.dragging_target.type === "temp-edge") {
-        this.dragging_target.finishEdge(_event);
+    if (this.click_target) {
+        switch (this.click_target.type) {
+            case "node":
+                if (!this.is_dragging) {
+                    this.removeControllersOfType("editor");
+                    var _editor = this.addController("NodeEditor",{});
+                    _editor.node_controller = this.click_target;
+                    _editor.redraw();
+                }
+            break;
+            case "edge":
+                if (!this.is_dragging) {
+                    this.removeControllersOfType("editor");
+                    var _editor = this.addController("EdgeEditor",{});
+                    _editor.edge_controller = this.click_target;
+                    _editor.redraw();
+                }
+            break;
+            case "temp-edge":
+                this.click_target.finishEdge(_event);
+            break;
+        }
     }
-    this.dragging_target = null;
+    this.is_dragging = false;
+    this.click_target = null;
 }
 
 Rkns.Renderers.Paper.prototype.onScroll = function(_event, _scrolldelta) {
diff -r f5297dde9053 -r 67085e6281e5 client/render-test.html
--- a/client/render-test.html	Fri Jul 27 19:15:32 2012 +0200
+++ b/client/render-test.html	Mon Jul 30 17:52:13 2012 +0200
@@ -11,6 +11,7 @@
         <script src="lib/underscore-min.js"></script>
         <script src="lib/paper.js"></script>
         <script src="js/main.js"></script>
+        <script src="js/i18n.js"></script>
         <script src="js/model.js"></script>
         <script src="js/json-serializer.js"></script>
         <script src="js/random-data.js"></script>
@@ -23,18 +24,32 @@
                     //serializer: "RandomData",
                     canvas_id: "renkanvas",
                     user: {
+                        id: "anonymous",
                         title: "anonymous",
                         color: "#0000ff"
                     }
                 });
             });
         </script>
+        <link rel="stylesheet" href="css/renkan.css" />
         <style type="text/css">
+            #topbar { position: absolute; left: 0; top: 0; right: 0; height: 40px; background: #f0f0f0; font-size: 20px; color: #a0a0a0; }
+            #leftbar { position: absolute; left: 0; top: 40px; width: 200px; bottom: 0; background: #d0d0d0; font-size: 20px; color: #ffffff; }
+            #renkan-container { position: absolute; top: 40px; left: 200px; right: 0; bottom: 0; overflow: hidden; }
             #renkanvas { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
+            .Rk-Editor { position: absolute; top: 0; left: 0; }
         </style>
     </head>
 
     <body>
-        <canvas id="renkanvas" resize></canvas>
+        <div id="topbar">Renkan Top Bar</div>
+        <div id="bottompart">
+            <div id="leftbar">Renkan "Stock Box"</div>
+            <div id="renkan-container">
+                <canvas id="renkanvas" resize></canvas>
+                <div class="Rk-Editor"></div>
+            </div>
+        </div>
+        
     </body>
 </html>