--- 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"
}
]
}
--- 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);
})
);
--- 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 */
--- 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);
--- 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();
+ }
+}
--- /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)
--- 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>