--- /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;
+}
--- 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
--- 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);
--- /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:"
+ }
+}
--- 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) {
}
);
--- 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 = {
--- 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) {
--- 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">×</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">×</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) {
--- 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>