--- a/client/css/renkan.css Wed Aug 22 16:50:42 2012 +0200
+++ b/client/css/renkan.css Tue Aug 28 18:26:13 2012 +0200
@@ -54,10 +54,14 @@
background: #F0F0F0; position: absolute; left: 0; top: 0; width: 300px; bottom: 0; overflow: hidden;
}
-.Rk-Render {
+.Rk-Render-Panel {
position: absolute; left: 300px; top: 0; right: 0; bottom: 0;
}
+.Rk-Render-Full {
+ position: absolute; left: 0; top: 0; right: 0; bottom: 0;
+}
+
.Rk-Canvas {
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
}
--- a/client/js/ldtjson-bin.js Wed Aug 22 16:50:42 2012 +0200
+++ b/client/js/ldtjson-bin.js Tue Aug 28 18:26:13 2012 +0200
@@ -1,17 +1,18 @@
Rkns.Bins.LdtJson = Rkns.Utils.inherit(Rkns.Bins._Base);
Rkns.Bins.LdtJson.prototype.tagTemplate = Rkns._.template(
- '<li class="Rk-Bin-Item" data-uri="http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/search/?search=<%=encodedtitle%>&field=all" data-title="<%-title%>" data-description="Tag \'<%-title%>\'">'
+ '<li class="Rk-Bin-Item" data-uri="<%=ldt_platform%>ldtplatform/ldt/front/search/?search=<%=encodedtitle%>&field=all" data-title="<%-title%>" data-description="Tag \'<%-title%>\'">'
+ '<div class="Rk-Ldt-Icon Rk-Ldt-TagIcon"></div><h4><%-title%></h4></li>'
);
Rkns.Bins.LdtJson.prototype.annotationTemplate = Rkns._.template(
- '<li class="Rk-Bin-Item" data-uri="http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/<%=mediaid%>/#id=<%=annotationid%>" data-title="<%-title%>" data-description="<%-description%>">'
+ '<li class="Rk-Bin-Item" data-uri="<%=ldt_platform%>ldtplatform/ldt/front/player/<%=mediaid%>/#id=<%=annotationid%>" data-title="<%-title%>" data-description="<%-description%>">'
+ '<div class="Rk-Ldt-Icon Rk-Ldt-<%=type%>Icon"></div><h4><%-title%></h4><p><%-description%></p><p>Start: <%=start%>, End: <%=end%>, Duration: <%=duration%></p></li>'
);
Rkns.Bins.LdtJson.prototype._init = function(_renkan, _opts) {
this.proj_id = _opts.project_id;
+ this.ldt_platform = _opts.ldt_platform || "http://ldt.iri.centrepompidou.fr/";
this.title_$.html(_opts.title);
var _this = this;
function convertTC(_ms) {
@@ -34,7 +35,7 @@
return _res;
}
Rkns.$.getJSON(
- 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/' + this.proj_id + '?callback=?',
+ this.ldt_platform + 'ldtplatform/ldt/cljson/id/' + this.proj_id + '?callback=?',
function(_data) {
var _html = '<li><h3>Tags</h3></li>',
_projtitle = _data.meta["dc:title"];
@@ -42,6 +43,7 @@
_html += Rkns._(_data.tags).map(function(_tag) {
var _title = _tag.meta["dc:title"]
return _this.tagTemplate({
+ ldt_platform: _this.ldt_platform,
title: _title,
encodedtitle : encodeURIComponent(_title)
})
@@ -52,6 +54,7 @@
_title = _annotation.content.title.replace(_description,""),
_duration = _annotation.end - _annotation.begin;
return _this.annotationTemplate({
+ ldt_platform: _this.ldt_platform,
title: _title,
description: _description,
start: convertTC(_annotation.begin),
--- a/client/js/main.js Wed Aug 22 16:50:42 2012 +0200
+++ b/client/js/main.js Tue Aug 28 18:26:13 2012 +0200
@@ -1,6 +1,6 @@
/*
* Copyright 2012 Institut de recherche et d'innovation
- * contributor(s) : Samuel Huron, Raphael Velt
+ * contributor(s) : Yves-Marie Haussonne, Raphael Velt, Samuel Huron
*
* contact@iri.centrepompidou.fr
* http://www.iri.centrepompidou.fr
@@ -18,15 +18,8 @@
/* Declaring the Renkan Namespace Rkns and Default values */
-Rkns = {
- _MIN_DRAG_DISTANCE: 2,
- _NODE_RADIUS: 20,
- _NODE_FONT_SIZE: 14,
- _ARROW_LENGTH: 20,
- _ARROW_WIDTH: 15,
- _RENDER: 1,
- _SAVE: 2,
- _RENDER_AND_SAVE: 3
+if (typeof Rkns !== "object") {
+ Rkns = {}
}
Rkns.$ = jQuery;
@@ -55,9 +48,6 @@
/* Point of entry */
Rkns.Renkan = function(_opts) {
- if (typeof _opts.remotemodel !== "string") {
- _opts.remotemodel = "FullJson";
- }
if (typeof _opts.language !== "string" || typeof Rkns.i18n[_opts.language] == "undefined") {
_opts.language = "en";
}
@@ -173,7 +163,7 @@
Rkns.Renkan.prototype.template = Rkns._.template(
'<div class="Rk-Bins">'
+ '<form class="Rk-Search-Form"><input class="Rk-Search-Input" type="search" placeholder="Search" /><select class="Rk-Search-Select"></select></form>'
- + '<ul class="Rk-Bin-List"></ul></div><div class="Rk-Render"></div>'
+ + '<ul class="Rk-Bin-List"></ul></div><div class="Rk-Render Rk-Render-Panel"></div>'
);
@@ -218,11 +208,10 @@
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));
+ if (typeof this._init == "function") {
+ this._init.apply(this, Array.prototype.slice.call(arguments, 0));
}
- _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;
--- a/client/js/paper-renderer.js Wed Aug 22 16:50:42 2012 +0200
+++ b/client/js/paper-renderer.js Tue Aug 28 18:26:13 2012 +0200
@@ -1,27 +1,42 @@
-Rkns.Renderer = {}
-
-Rkns.Renderer.Utils = {
+Rkns.Renderer = {
+ _MARGIN_X: 80,
+ _MARGIN_Y: 50,
+ _MIN_DRAG_DISTANCE: 2,
+ _NODE_RADIUS: 15,
+ _NODE_FONT_SIZE: 10,
+ _EDGE_FONT_SIZE: 9,
+ _NODE_MAX_CHAR: 50,
+ _EDGE_MAX_CHAR: 40,
+ _ARROW_LENGTH: 16,
+ _ARROW_WIDTH: 8,
_EDITOR_ARROW_LENGTH : 20,
_EDITOR_ARROW_WIDTH : 40,
_EDITOR_MARGIN : 15,
_EDITOR_PADDING : 10,
- _EDITOR_GRADIENT : new paper.Gradient(['#f0f0f0', '#d0d0d0']),
- 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 ),
+ _EDITOR_GRADIENT : new paper.Gradient(['#f0f0f0', '#d0d0d0'])
+}
+
+Rkns.Renderer.Utils = {
+ drawEditBox : function(_coords, _path, _width, _xmargin, _selector) {
+ _selector.css({
+ width: (_width - 2* Rkns.Renderer._EDITOR_PADDING),
+ })
+ var _height = _selector.outerHeight() + 2* Rkns.Renderer._EDITOR_PADDING,
+ _isLeft = (_coords.x < paper.view.center.x ? 1 : -1),
+ _left = _coords.x + _isLeft * ( _xmargin + Rkns.Renderer._EDITOR_ARROW_LENGTH ),
+ _right = _coords.x + _isLeft * ( _xmargin + Rkns.Renderer._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 );
+ if (_top < Rkns.Renderer._EDITOR_MARGIN) {
+ _top = Math.min( Rkns.Renderer._EDITOR_MARGIN, _coords.y - Rkns.Renderer._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 );
+ if (_bottom > (paper.view.size.height - Rkns.Renderer._EDITOR_MARGIN)) {
+ _bottom = Math.max( paper.view.size.height - Rkns.Renderer._EDITOR_MARGIN, _coords.y + Rkns.Renderer._EDITOR_ARROW_WIDTH / 2 );
_top = _bottom - _height;
}
_path.segments[0].point
= _path.segments[7].point
- = _coords.add([_isLeft * this._EDITOR_MARGIN, 0]);
+ = _coords.add([_isLeft * _xmargin, 0]);
_path.segments[1].point.x
= _path.segments[2].point.x
= _path.segments[5].point.x
@@ -36,13 +51,14 @@
_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;
- _path.fillColor = new paper.GradientColor(this._EDITOR_GRADIENT, [0,_top], [0, _bottom])
- return {
- left: (this._EDITOR_PADDING + Math.min(_left, _right)),
- top: (this._EDITOR_PADDING + _top)
- }
+ _path.segments[1].point.y = _coords.y - Rkns.Renderer._EDITOR_ARROW_WIDTH / 2;
+ _path.segments[6].point.y = _coords.y + Rkns.Renderer._EDITOR_ARROW_WIDTH / 2;
+ _path.closed = true;
+ _path.fillColor = new paper.GradientColor(Rkns.Renderer._EDITOR_GRADIENT, [0,_top], [0, _bottom]);
+ _selector.css({
+ left: (Rkns.Renderer._EDITOR_PADDING + Math.min(_left, _right)),
+ top: (Rkns.Renderer._EDITOR_PADDING + _top)
+ });
},
sector : function(_repr, _inR, _outR, _startAngle, _endAngle, _padding, _imgsrc) {
var _startRads = _startAngle * Math.PI / 180,
@@ -167,12 +183,12 @@
Rkns.Renderer.Node.prototype._init = function() {
this.renderer.node_layer.activate();
this.type = "Node";
- this.circle = new paper.Path.Circle([0, 0], Rkns._NODE_RADIUS);
+ this.circle = new paper.Path.Circle([0, 0], Rkns.Renderer._NODE_RADIUS);
this.circle.fillColor = '#ffffff';
this.circle.__representation = this;
this.title = new paper.PointText([0,0]);
this.title.characterStyle = {
- fontSize: Rkns._NODE_FONT_SIZE,
+ fontSize: Rkns.Renderer._NODE_FONT_SIZE,
fillColor: 'black'
};
this.edit_button = new Rkns.Renderer.NodeEditButton(this.renderer, {});
@@ -190,7 +206,7 @@
this.paper_coords = this.renderer.toPaperCoords(_model_coords);
this.circle.position = this.paper_coords;
this.title.content = this.model.get("title");
- this.title.position = this.paper_coords.add([0, 2 * Rkns._NODE_RADIUS]);
+ this.title.position = this.paper_coords.add([0, 2 * Rkns.Renderer._NODE_RADIUS]);
this.circle.strokeColor = this.model.get("created_by").get("color");
this.edit_button.moveTo(this.paper_coords);
this.remove_button.moveTo(this.paper_coords);
@@ -275,11 +291,11 @@
this.line.add([0,0],[0,0]);
this.line.__representation = this;
this.arrow = new paper.Path();
- this.arrow.add([0,0],[Rkns._ARROW_LENGTH,Rkns._ARROW_WIDTH / 2],[0,Rkns._ARROW_WIDTH]);
+ this.arrow.add([0,0],[Rkns.Renderer._ARROW_LENGTH,Rkns.Renderer._ARROW_WIDTH / 2],[0,Rkns.Renderer._ARROW_WIDTH]);
this.arrow.__representation = this;
this.text = new paper.PointText();
this.text.characterStyle = {
- fontSize: Rkns._EDGE_FONT_SIZE,
+ fontSize: Rkns.Renderer._EDGE_FONT_SIZE,
fillColor: 'black'
};
this.text.paragraphStyle.justification = 'center';
@@ -381,7 +397,7 @@
this.line.__representation = this;
this.arrow = new paper.Path();
this.arrow.fillColor = _color;
- this.arrow.add([0,0],[Rkns._ARROW_LENGTH,Rkns._ARROW_WIDTH / 2],[0,Rkns._ARROW_WIDTH]);
+ this.arrow.add([0,0],[Rkns.Renderer._ARROW_LENGTH,Rkns.Renderer._ARROW_WIDTH / 2],[0,Rkns.Renderer._ARROW_WIDTH]);
this.arrow.__representation = this;
this.arrow_angle = 0;
}
@@ -460,8 +476,7 @@
Rkns.Renderer.NodeEditor.prototype.redraw = function() {
var _coords = this.node_representation.paper_coords,
- _model = this.node_representation.model,
- _css = Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 300);
+ _model = this.node_representation.model;
this.editor_$
.html(this.template({
node: {
@@ -473,8 +488,8 @@
},
l10n: this.renderer.renkan.l10n
}))
- .show()
- .css(_css);
+ .show();
+ Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 20, this.editor_$);
var _this = this;
this.editor_$.find(".Rk-CloseX").click(function() {
_this.renderer.removeRepresentation(_this);
@@ -533,8 +548,7 @@
Rkns.Renderer.EdgeEditor.prototype.redraw = function() {
var _coords = this.edge_representation.paper_coords,
- _model = this.edge_representation.model,
- _css = Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 200);
+ _model = this.edge_representation.model;
this.editor_$
.html(this.template({
edge: {
@@ -550,14 +564,15 @@
},
l10n: this.renderer.renkan.l10n
}))
- .show()
- .css(_css);
+ .show();
+ Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 5, this.editor_$);
var _this = this;
this.editor_$.find(".Rk-CloseX").click(function() {
_this.renderer.removeRepresentation(_this);
paper.view.draw();
});
this.editor_$.find("input, textarea").bind("keyup change", function() {
+ _this.editor_$.find(".Rk-Edit-Goto").attr("href",_this.editor_$.find(".Rk-Edit-URI").val());
var _data = {
title: _this.editor_$.find(".Rk-Edit-Title").val(),
uri: _this.editor_$.find(".Rk-Edit-URI").val()
@@ -580,7 +595,7 @@
Rkns.Renderer.NodeEditButton.prototype._init = function() {
this.renderer.node_layer.activate();
this.type = "Node-edit-button";
- this.sector = Rkns.Renderer.Utils.sector(this, 1 + Rkns._NODE_RADIUS, 3 * Rkns._NODE_RADIUS, - 90, 30, 2, 'img/edit.png');
+ this.sector = Rkns.Renderer.Utils.sector(this, 1 + Rkns.Renderer._NODE_RADIUS, 3 * Rkns.Renderer._NODE_RADIUS, - 90, 30, 2, 'img/edit.png');
}
Rkns.Renderer.NodeEditButton.prototype.moveTo = function(_pos) {
@@ -623,7 +638,7 @@
Rkns.Renderer.NodeRemoveButton.prototype._init = function() {
this.renderer.node_layer.activate();
this.type = "Node-remove-button";
- this.sector = Rkns.Renderer.Utils.sector(this, 1 + Rkns._NODE_RADIUS, 3 * Rkns._NODE_RADIUS, -210, -90, 2, 'img/remove.png');
+ this.sector = Rkns.Renderer.Utils.sector(this, 1 + Rkns.Renderer._NODE_RADIUS, 3 * Rkns.Renderer._NODE_RADIUS, -210, -90, 2, 'img/remove.png');
}
Rkns.Renderer.NodeRemoveButton.prototype.moveTo = function(_pos) {
@@ -666,7 +681,7 @@
Rkns.Renderer.NodeLinkButton.prototype._init = function() {
this.renderer.node_layer.activate();
this.type = "Node-link-button";
- this.sector = Rkns.Renderer.Utils.sector(this, 1 + Rkns._NODE_RADIUS , 3 * Rkns._NODE_RADIUS, 30, 150, 2, 'img/link.png');
+ this.sector = Rkns.Renderer.Utils.sector(this, 1 + Rkns.Renderer._NODE_RADIUS , 3 * Rkns.Renderer._NODE_RADIUS, 30, 150, 2, 'img/link.png');
}
Rkns.Renderer.NodeLinkButton.prototype.moveTo = function(_pos) {
@@ -703,7 +718,7 @@
Rkns.Renderer.EdgeEditButton.prototype._init = function() {
this.renderer.edge_layer.activate();
this.type = "Edge-edit-button";
- this.sector = Rkns.Renderer.Utils.sector(this, 5 , 2 * Rkns._NODE_RADIUS, - 60, 60, 2, 'img/edit.png');
+ this.sector = Rkns.Renderer.Utils.sector(this, 5 , 2 * Rkns.Renderer._NODE_RADIUS, - 60, 60, 2, 'img/edit.png');
}
Rkns.Renderer.EdgeEditButton.prototype.moveTo = function(_pos) {
@@ -745,7 +760,7 @@
Rkns.Renderer.EdgeRemoveButton.prototype._init = function() {
this.renderer.edge_layer.activate();
this.type = "Edge-remove-button";
- this.sector = Rkns.Renderer.Utils.sector(this, 5, 2 * Rkns._NODE_RADIUS, - 240, -120, 2, 'img/remove.png');
+ this.sector = Rkns.Renderer.Utils.sector(this, 5, 2 * Rkns.Renderer._NODE_RADIUS, - 240, -120, 2, 'img/remove.png');
}
Rkns.Renderer.EdgeRemoveButton.prototype.moveTo = function(_pos) {
this.sector.moveTo(_pos);
@@ -783,8 +798,6 @@
Rkns.Renderer.Scene = function(_renkan) {
this.renkan = _renkan;
- this._MARGIN_X = 80;
- this._MARGIN_Y = 50;
this.$ = Rkns.$(".Rk-Render");
this.representations = [];
this.$.html(this.template({
@@ -803,7 +816,7 @@
this.overlay_layer = new paper.Layer();
var _tool = new paper.Tool(),
_this = this;
- _tool.minDistance = Rkns._MIN_DRAG_DISTANCE;
+ _tool.minDistance = Rkns.Renderer._MIN_DRAG_DISTANCE;
_tool.onMouseMove = function(_event) {
_this.onMouseMove(_event);
}
@@ -830,7 +843,7 @@
_this.canvas_$.width(),
_this.canvas_$.height()
]).multiply( .5 * ( 1 - Math.SQRT1_2 ) ).add(_this.offset.multiply( Math.SQRT1_2 ));
- _this.scale *= Math.SQRT1_2;
+ _this.setScale( _this.scale * Math.SQRT1_2 );
_this.redraw();
});
this.editor_$.find(".Rk-ZoomIn").click(function() {
@@ -838,7 +851,7 @@
_this.canvas_$.width(),
_this.canvas_$.height()
]).multiply( .5 * ( 1 - Math.SQRT2 ) ).add(_this.offset.multiply( Math.SQRT2 ));
- _this.scale *= Math.SQRT2;
+ _this.setScale( _this.scale * Math.SQRT2 );
_this.redraw();
});
paper.view.onResize = function(_event) {
@@ -871,6 +884,11 @@
+ '</div>'
);
+Rkns.Renderer.Scene.prototype.setScale = function(_newScale) {
+ this.scale = _newScale;
+ this.redraw();
+}
+
Rkns.Renderer.Scene.prototype.autoScale = function() {
if (this.renkan.project.get("nodes").length) {
var _xx = this.renkan.project.get("nodes").map(function(_node) { return _node.get("position").x }),
@@ -879,9 +897,9 @@
_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 - 2 * this._MARGIN_X) / (_maxx - _minx), (paper.view.size.height - 2 * this._MARGIN_Y) / (_maxy - _miny));
- this.offset = paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(this.scale));
- this.redraw();
+ var _scale = Math.min((paper.view.size.width - 2 * Rkns.Renderer._MARGIN_X) / (_maxx - _minx), (paper.view.size.height - 2 * Rkns.Renderer._MARGIN_Y) / (_maxy - _miny));
+ this.offset = paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(_scale));
+ this.setScale(_scale);
}
}
@@ -1049,10 +1067,10 @@
]).subtract(this.offset).multiply( Math.SQRT2 - 1 );
if (this.totalScroll > 0) {
this.offset = this.offset.subtract(_delta);
- this.scale *= Math.SQRT2;
+ this.setScale( this.scale * Math.SQRT2 );
} else {
this.offset = this.offset.add(_delta.divide( Math.SQRT2 ));
- this.scale *= Math.SQRT1_2;
+ this.setScale( this.scale * Math.SQRT1_2);
}
this.totalScroll = 0;
this.redraw();
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/js/renkan-publish.js Tue Aug 28 18:26:13 2012 +0200
@@ -0,0 +1,905 @@
+/*
+ * Copyright 2012 Institut de recherche et d'innovation
+ * contributor(s) : Yves-Marie Haussonne, Raphael Velt, Samuel Huron
+ *
+ * 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.
+*/
+
+if (typeof Rkns !== "object") {
+ Rkns = {}
+}
+
+Rkns.$ = jQuery;
+
+Rkns._ = _;
+
+Rkns.i18n = {
+ en: {
+ zoom_in: "Zoom In",
+ zoom_out: "Zoom Out"
+ }
+}
+
+Rkns.Utils = {
+ inherit : function(_baseClass) {
+ var _class = function() {
+ _baseClass.apply(this, Array.prototype.slice.call(arguments, 0));
+ if (typeof this._init == "function") {
+ this._init.apply(this, Array.prototype.slice.call(arguments, 0));
+ }
+ }
+ _class.prototype = new _baseClass();
+ return _class;
+ }
+}
+
+Rkns.Models = {};
+
+Rkns.Models.getUID = function(obj) {
+ var guid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+ var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
+ return v.toString(16);
+ });
+ return obj.type + "-" + guid;
+};
+
+Rkns.Models.RenkanModel = Backbone.RelationalModel.extend({
+ idAttribute : "_id",
+ constructor: function(options) {
+
+ if (typeof options !== "undefined") {
+ options._id = options.id || Rkns.Models.getUID(this);
+ options.title = options.title || "(untitled " + this.type + ")";
+ options.description = options.description || "";
+ options.uri = options.uri || "";
+
+ if(typeof this.prepare === "function") {
+ options = this.prepare(options);
+ }
+ }
+ Backbone.RelationalModel.prototype.constructor.call(this, options);
+ },
+ validate: function() {
+ if(!this.type) {
+ return "object has no type";
+ }
+ },
+ addReference : function(_options, _propName, _list, _id, _default) {
+ var _element = _list.get(_id);
+ if (typeof _element === "undefined" && typeof _default !== "undefined") {
+ _options[_propName ] = _default;
+ }
+ else {
+ _options[_propName ] = _element;
+ }
+ }
+});
+
+// USER
+Rkns.Models.User = Rkns.Models.RenkanModel.extend({
+ type: "user",
+ prepare: function(options) {
+ options.color = options.color || "#666666";
+ return options;
+ },
+ toJSON: function() {
+ return {
+ id: this.get("id"),
+ title: this.get("title"),
+ uri: this.get("uri"),
+ description: this.get("description"),
+ color: this.get("color"),
+ }
+ },
+});
+
+// NODE
+Rkns.Models.Node = Rkns.Models.RenkanModel.extend({
+ type: "node",
+ relations: [{
+ type: Backbone.HasOne,
+ key: "created_by",
+ relatedModel: Rkns.Models.User
+ }],
+ prepare: function(options) {
+ project = options.project;
+ this.addReference(options, "created_by", project.get("users"), options.created_by, project.current_user);
+ options.description = options.description || "";
+ return options;
+ },
+ toJSON: function() {
+ return {
+ id: this.get("id"),
+ title: this.get("title"),
+ uri: this.get("uri"),
+ description: this.get("description"),
+ position: this.get("position"),
+ created_by: this.get("created_by").get("id")
+ }
+ },
+});
+
+// EDGE
+Rkns.Models.Edge = Rkns.Models.RenkanModel.extend({
+ type: "edge",
+ relations: [
+ {
+ type: Backbone.HasOne,
+ key: "created_by",
+ relatedModel: Rkns.Models.User
+ },
+ {
+ type: Backbone.HasOne,
+ key: "from",
+ relatedModel: Rkns.Models.Node
+ },
+ {
+ type: Backbone.HasOne,
+ key: "to",
+ relatedModel: Rkns.Models.Node
+ },
+ ],
+ prepare: function(options) {
+ project = options.project;
+ this.addReference(options, "created_by", project.get("users"), options.created_by, project.current_user);
+ this.addReference(options, "from", project.get("nodes"), options.from);
+ this.addReference(options, "to", project.get("nodes"), options.to);
+ return options;
+ },
+ toJSON: function() {
+ return {
+ id: this.get("id"),
+ title: this.get("title"),
+ uri: this.get("uri"),
+ description: this.get("description"),
+ from: this.get("from").get("id"),
+ to: this.get("to").get("id"),
+ created_by: this.get("created_by").get("id"),
+ }
+ },
+});
+
+// PROJECT
+Rkns.Models.Project = Rkns.Models.RenkanModel.extend({
+ type: "project",
+ relations: [
+ {
+ type: Backbone.HasMany,
+ key: "users",
+ relatedModel: Rkns.Models.User,
+ reverseRelation: {
+ key: 'project',
+ includeInJSON: '_id'
+ },
+ },
+ {
+ type: Backbone.HasMany,
+ key: "nodes",
+ relatedModel: Rkns.Models.Node,
+ reverseRelation: {
+ key: 'project',
+ includeInJSON: '_id'
+ },
+ },
+ {
+ type: Backbone.HasMany,
+ key: "edges",
+ relatedModel: Rkns.Models.Edge,
+ reverseRelation: {
+ key: 'project',
+ includeInJSON: '_id'
+ },
+ }
+ ],
+ addUser: function(_props) {
+ _props.project = this;
+ var _user = new Rkns.Models.User(_props);
+ this.get("users").push(_user);
+ return _user;
+ },
+ addNode: function(_props) {
+ _props.project = this;
+ var _node = new Rkns.Models.Node(_props);
+ this.get("nodes").push(_node);
+ return _node;
+ },
+ addEdge: function(_props) {
+ _props.project = this;
+ var _edge = new Rkns.Models.Edge(_props);
+ this.get("edges").push(_edge);
+ return _edge;
+ },
+ removeNode: function(_model) {
+ this.get("nodes").remove(_model);
+ },
+ removeEdge: function(_model) {
+ this.get("edges").remove(_model);
+ },
+ validate: function(options) {
+ var _project = this;
+ Rkns._(options.users).each(function(_item) {
+ _item.project = _project;
+ });
+ Rkns._(options.nodes).each(function(_item) {
+ _item.project = _project;
+ });
+ Rkns._(options.edges).each(function(_item) {
+ _item.project = _project;
+ });
+ },
+ // Add event handler to remove edges when a node is removed
+ initialize: function() {
+ var _this = this;
+ this.on("remove:nodes", function(_node) {
+ _this.get("edges").remove(
+ _this.get("edges").filter(function(_edge) {
+ return _edge.get("from") == _node || _edge.get("to") == _node;
+ })
+ );
+ });
+ }
+});
+
+/* Point of entry */
+
+Rkns.Renkan = function(_opts) {
+ if (typeof _opts.language !== "string" || typeof Rkns.i18n[_opts.language] == "undefined") {
+ _opts.language = "en";
+ }
+ if (typeof _opts.container !== "string") {
+ _opts.container = "renkan";
+ }
+ if (typeof _opts.search !== "object" || !_opts.search) {
+ _opts.search = [];
+ }
+ this.project = new Rkns.Models.Project();
+ this.l10n = Rkns.i18n[_opts.language];
+ this.$ = Rkns.$("#" + _opts.container);
+ this.$.html(this.template());
+ this.renderer = new Rkns.Renderer.Scene(this);
+}
+Rkns.Renkan.prototype.template = Rkns._.template(
+ '<div class="Rk-Render Rk-Render-Full"></div>'
+);
+
+Rkns.jsonImport = function(_renkan, _opts) {
+ var _proj = _renkan.project;
+ if (typeof _opts.http_method == "undefined") {
+ _opts.http_method = 'PUT';
+ }
+ var _load = function() {
+ Rkns.$.getJSON(_opts.url, function(_data) {
+ _proj.set(_data);
+ _renkan.renderer.autoScale();
+ });
+ }
+ _load();
+}
+
+Rkns.Renderer = {
+ _MARGIN_X: 80,
+ _MARGIN_Y: 50,
+ _MIN_DRAG_DISTANCE: 2,
+ _NODE_RADIUS: 15,
+ _NODE_FONT_SIZE: 10,
+ _EDGE_FONT_SIZE: 9,
+ _NODE_MAX_CHAR: 30,
+ _EDGE_MAX_CHAR: 20,
+ _ARROW_LENGTH: 16,
+ _ARROW_WIDTH: 8,
+ _TOOLTIP_ARROW_LENGTH : 15,
+ _TOOLTIP_ARROW_WIDTH : 26,
+ _TOOLTIP_MARGIN : 10,
+ _TOOLTIP_PADDING : 8,
+ _TOOLTIP_GRADIENT : new paper.Gradient(['#f0f0f0', '#d0d0d0'])
+}
+
+Rkns.Renderer.Utils = {
+ shortenText : function(_text,_length) {
+ var _rgxp = new RegExp('^(.{' + _length + '}).+$');
+ return _text.replace(/(\n|\r|\r\n)/mg,' ').replace(_rgxp,'$1…');
+ },
+ drawTooltip : function(_coords, _path, _width, _xmargin, _selector) {
+ _selector.css({
+ width: (_width - 2* Rkns.Renderer._TOOLTIP_PADDING),
+ });
+ var _height = _selector.outerHeight() + 2* Rkns.Renderer._TOOLTIP_PADDING,
+ _isLeft = (_coords.x < paper.view.center.x ? 1 : -1),
+ _left = _coords.x + _isLeft * ( _xmargin + Rkns.Renderer._TOOLTIP_ARROW_LENGTH ),
+ _right = _coords.x + _isLeft * ( _xmargin + Rkns.Renderer._TOOLTIP_ARROW_LENGTH + _width ),
+ _top = _coords.y - _height / 2;
+ if (_top < Rkns.Renderer._TOOLTIP_MARGIN) {
+ _top = Math.min( Rkns.Renderer._TOOLTIP_MARGIN, _coords.y - Rkns.Renderer._TOOLTIP_ARROW_WIDTH / 2 );
+ }
+ var _bottom = _top + _height;
+ if (_bottom > (paper.view.size.height - Rkns.Renderer._TOOLTIP_MARGIN)) {
+ _bottom = Math.max( paper.view.size.height - Rkns.Renderer._TOOLTIP_MARGIN, _coords.y + Rkns.Renderer._TOOLTIP_ARROW_WIDTH / 2 );
+ _top = _bottom - _height;
+ }
+ _path.segments[0].point
+ = _path.segments[7].point
+ = _coords.add([_isLeft * _xmargin, 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 - Rkns.Renderer._TOOLTIP_ARROW_WIDTH / 2;
+ _path.segments[6].point.y = _coords.y + Rkns.Renderer._TOOLTIP_ARROW_WIDTH / 2;
+ _path.closed = true;
+ _path.fillColor = new paper.GradientColor(Rkns.Renderer._TOOLTIP_GRADIENT, [0,_top], [0, _bottom]);
+ _selector.css({
+ left: (Rkns.Renderer._TOOLTIP_PADDING + Math.min(_left, _right)),
+ top: (Rkns.Renderer._TOOLTIP_PADDING + _top)
+ });
+ }
+}
+
+Rkns.Renderer._BaseRepresentation = function(_renderer, _model) {
+ if (typeof _renderer !== "undefined") {
+ this.renderer = _renderer;
+ this.project = _renderer.renkan.project;
+ this.model = _model;
+ if (_model) {
+ var _this = this;
+ _model.on("select", function() {
+ _this.select();
+ });
+ _model.on("unselect", function() {
+ _this.unselect();
+ });
+ }
+ }
+}
+
+Rkns.Renderer._BaseRepresentation.prototype.select = function() {}
+
+Rkns.Renderer._BaseRepresentation.prototype.unselect = function() {}
+
+Rkns.Renderer._BaseRepresentation.prototype.highlight = function() {}
+
+Rkns.Renderer._BaseRepresentation.prototype.unhighlight = function() {}
+
+Rkns.Renderer._BaseRepresentation.prototype.mouseup = function() {}
+
+Rkns.Renderer._BaseRepresentation.prototype.destroy = function() {}
+
+Rkns.Renderer.Node = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
+
+Rkns.Renderer.Node.prototype._init = function() {
+ this.renderer.node_layer.activate();
+ this.type = "Node";
+ this.circle = new paper.Path.Circle([0, 0], Rkns.Renderer._NODE_RADIUS);
+ this.circle.fillColor = '#ffffff';
+ this.circle.__representation = this;
+ this.title = new paper.PointText([0,0]);
+ this.title.characterStyle = {
+ fontSize: Rkns.Renderer._NODE_FONT_SIZE,
+ fillColor: 'black'
+ };
+ this.title.paragraphStyle.justification = 'center';
+ this.title.__representation = this;
+ this.model_coords = new paper.Point(this.model.get("position"));
+}
+
+Rkns.Renderer.Node.prototype.redraw = function() {
+ this.paper_coords = this.renderer.toPaperCoords(this.model_coords);
+ this.circle.position = this.paper_coords;
+ this.title.content = Rkns.Renderer.Utils.shortenText(this.model.get("title"), Rkns.Renderer._NODE_MAX_CHAR);
+ this.title.position = this.paper_coords.add([0, 2 * Rkns.Renderer._NODE_RADIUS]);
+ this.circle.strokeColor = this.model.get("created_by").get("color");
+}
+
+Rkns.Renderer.Node.prototype.paperShift = function(_delta) {
+ this.paper_coords = this.paper_coords.add(_delta);
+ this.model_coords = this.renderer.toModelCoords(this.paper_coords);
+ this.renderer.redraw();
+}
+
+Rkns.Renderer.Node.prototype.openTooltip = function() {
+ this.renderer.removeRepresentationsOfType("tooltip");
+ var _tooltip = this.renderer.addRepresentation("NodeTooltip",null);
+ _tooltip.node_representation = this;
+ _tooltip.redraw();
+}
+
+Rkns.Renderer.Node.prototype.select = function() {
+ this.circle.strokeWidth = 3;
+ this.circle.fillColor = "#ffffc0";
+ paper.view.draw();
+}
+
+Rkns.Renderer.Node.prototype.unselect = function() {
+ this.circle.strokeWidth = 1;
+ this.circle.fillColor = "#ffffff";
+ paper.view.draw();
+}
+
+Rkns.Renderer.Node.prototype.mouseup = function(_event) {
+}
+
+Rkns.Renderer.Node.prototype.destroy = function(_event) {
+ this.circle.remove();
+ this.title.remove();
+}
+
+/* */
+
+Rkns.Renderer.Edge = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
+
+Rkns.Renderer.Edge.prototype._init = function() {
+ this.renderer.edge_layer.activate();
+ this.type = "Edge";
+ this.from_representation = this.renderer.getRepresentationByModel(this.model.get("from"));
+ this.to_representation = this.renderer.getRepresentationByModel(this.model.get("to"));
+ this.line = new paper.Path();
+ this.line.add([0,0],[0,0]);
+ this.line.__representation = this;
+ this.arrow = new paper.Path();
+ this.arrow.add([0,0],[Rkns.Renderer._ARROW_LENGTH,Rkns.Renderer._ARROW_WIDTH / 2],[0,Rkns.Renderer._ARROW_WIDTH]);
+ this.arrow.__representation = this;
+ this.text = new paper.PointText();
+ this.text.characterStyle = {
+ fontSize: Rkns.Renderer._EDGE_FONT_SIZE,
+ fillColor: 'black'
+ };
+ this.text.paragraphStyle.justification = 'center';
+ this.text.__representation = this;
+ this.text_angle = 0;
+ this.arrow_angle = 0;
+}
+
+Rkns.Renderer.Edge.prototype.redraw = function() {
+ var _p0o = this.from_representation.paper_coords,
+ _p1o = this.to_representation.paper_coords,
+ _v = _p1o.subtract(_p0o),
+ _r = _v.length,
+ _u = _v.divide(_r),
+ _delta = new paper.Point([- _u.y, _u.x]).multiply( 4 ),
+ _p0 = _p0o.add(_delta), /* Adding a 4 px difference */
+ _p1 = _p1o.add(_delta), /* to differentiate inbound and outbound links */
+ _a = _v.angle,
+ _color = this.model.get("created_by").get("color");
+ this.paper_coords = _p0.add(_p1).divide(2);
+ this.line.strokeColor = _color;
+ this.line.segments[0].point = _p0;
+ this.line.segments[1].point = _p1;
+ this.arrow.rotate(_a - this.arrow_angle);
+ this.arrow.fillColor = _color;
+ this.arrow.position = this.paper_coords.subtract(_u.multiply(4));
+ this.arrow_angle = _a;
+ if (_a > 90) {
+ _a -= 180;
+ }
+ if (_a < -90) {
+ _a += 180;
+ }
+ this.text.rotate(_a - this.text_angle);
+ this.text.content = Rkns.Renderer.Utils.shortenText(this.model.get("title"), Rkns.Renderer._EDGE_MAX_CHAR);
+ this.text.position = this.paper_coords;
+ this.text_angle = _a;
+}
+
+Rkns.Renderer.Edge.prototype.openTooltip = function() {
+ this.renderer.removeRepresentationsOfType("tooltip");
+ var _tooltip = this.renderer.addRepresentation("EdgeTooltip",null);
+ _tooltip.edge_representation = this;
+ _tooltip.redraw();
+}
+
+Rkns.Renderer.Edge.prototype.select = function() {
+ this.line.strokeWidth = 3;
+ this.openTooltip();
+ paper.view.draw();
+}
+
+Rkns.Renderer.Edge.prototype.unselect = function() {
+ this.line.strokeWidth = 1;
+ paper.view.draw();
+}
+
+Rkns.Renderer.Edge.prototype.mouseup = function(_event) {
+}
+
+Rkns.Renderer.Edge.prototype.paperShift = function(_delta) {
+ this.from_representation.paperShift(_delta);
+ this.to_representation.paperShift(_delta);
+ this.renderer.redraw();
+}
+
+Rkns.Renderer.Edge.prototype.destroy = function() {
+ this.line.remove();
+ this.arrow.remove();
+ this.text.remove();
+}
+
+/* */
+
+Rkns.Renderer.NodeTooltip = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
+
+Rkns.Renderer.NodeTooltip.prototype._init = function() {
+ this.renderer.overlay_layer.activate();
+ this.type = "tooltip";
+ this.tooltip_block = new paper.Path();
+ var _pts = Rkns._(Rkns._.range(8)).map(function() {return [0,0]});
+ this.tooltip_block.add.apply(this.tooltip_block, _pts);
+ this.tooltip_block.strokeWidth = 2;
+ this.tooltip_block.strokeColor = "#999999";
+ this.tooltip_block.fillColor = "#e0e0e0";
+ this.tooltip_block.opacity = .8;
+ this.tooltip_$ = Rkns.$('<div>')
+ .appendTo(this.renderer.tooltip_$)
+ .css({
+ position: "absolute",
+ opacity: .8
+ })
+ .hide();
+}
+
+Rkns.Renderer.NodeTooltip.prototype.template = Rkns._.template(
+ '<h2><span class="Rk-CloseX">×</span><%=a%></h2>'
+ + '<p><%=description%></p>'
+);
+
+Rkns.Renderer.NodeTooltip.prototype.redraw = function() {
+ var _coords = this.node_representation.paper_coords,
+ _model = this.node_representation.model,
+ _title = _model.get("title"),
+ _uri = _model.get("uri");
+ this.tooltip_$
+ .html(this.template({
+ a: (_uri ? '<a href="' + _uri + '" target="_blank">' : '' ) + _title + (_uri ? '</a>' : '' ),
+ description: _model.get("description").replace(/(\n|\r|\r\n)/mg,' ').substr(0,180).replace(/(^.{150,179})[\s].+$/m,'$1…')
+ }))
+ .show();
+ Rkns.Renderer.Utils.drawTooltip(_coords, this.tooltip_block, 250, 15, this.tooltip_$);
+ var _this = this;
+ this.tooltip_$.find(".Rk-CloseX").click(function() {
+ _this.renderer.removeRepresentation(_this);
+ paper.view.draw();
+ });
+ this.tooltip_$.find("input, textarea").bind("keyup change", function() {
+ _this.tooltip_$.find(".Rk-Edit-Goto").attr("href",_this.tooltip_$.find(".Rk-Edit-URI").val());
+ });
+ paper.view.draw();
+}
+
+Rkns.Renderer.NodeTooltip.prototype.destroy = function() {
+ this.tooltip_block.remove();
+ this.tooltip_$.detach();
+}
+
+/* */
+
+Rkns.Renderer.EdgeTooltip = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
+
+Rkns.Renderer.EdgeTooltip.prototype._init = function() {
+ this.renderer.overlay_layer.activate();
+ this.type = "tooltip";
+ this.tooltip_block = new paper.Path();
+ var _pts = Rkns._(Rkns._.range(8)).map(function() {return [0,0]});
+ this.tooltip_block.add.apply(this.tooltip_block, _pts);
+ this.tooltip_block.strokeWidth = 2;
+ this.tooltip_block.strokeColor = "#999999";
+ this.tooltip_block.fillColor = "#e0e0e0";
+ this.tooltip_block.opacity = .8;
+ this.tooltip_$ = Rkns.$('<div>')
+ .appendTo(this.renderer.tooltip_$)
+ .css({
+ position: "absolute",
+ opacity: .8
+ })
+ .hide();
+}
+
+Rkns.Renderer.EdgeTooltip.prototype.template = Rkns._.template(
+ '<h2><span class="Rk-CloseX">×</span><%=a%></h2>'
+ + '<p><%=description%></p>'
+);
+
+Rkns.Renderer.EdgeTooltip.prototype.redraw = function() {
+ var _coords = this.edge_representation.paper_coords,
+ _model = this.edge_representation.model,
+ _title = _model.get("title"),
+ _uri = _model.get("uri");
+ this.tooltip_$
+ .html(this.template({
+ a: (_uri ? '<a href="' + _uri + '" target="_blank">' : '' ) + _title + (_uri ? '</a>' : '' ),
+ description: _model.get("description").replace(/(\n|\r|\r\n)/mg,' ').substr(0,180).replace(/(^.{150,179})[\s].+$/m,'$1…')
+ }))
+ .show();
+ Rkns.Renderer.Utils.drawTooltip(_coords, this.tooltip_block, 250, 5, this.tooltip_$);
+ var _this = this;
+ this.tooltip_$.find(".Rk-CloseX").click(function() {
+ _this.renderer.removeRepresentation(_this);
+ paper.view.draw();
+ });
+ paper.view.draw();
+}
+
+Rkns.Renderer.EdgeTooltip.prototype.destroy = function() {
+ this.tooltip_block.remove();
+ this.tooltip_$.detach();
+}
+
+/* */
+
+Rkns.Renderer.Scene = function(_renkan) {
+ this.renkan = _renkan;
+ this.$ = Rkns.$(".Rk-Render");
+ this.representations = [];
+ this.$.html(this.template({
+ width: this.$.width(),
+ height: this.$.height(),
+ l10n: _renkan.l10n
+ }))
+ this.canvas_$ = this.$.find(".Rk-Canvas");
+ this.tooltip_$ = this.$.find(".Rk-Editor");
+ paper.setup(this.canvas_$[0]);
+ this.scale = 1;
+ this.offset = paper.view.center;
+ this.totalScroll = 0;
+ 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.Renderer._MIN_DRAG_DISTANCE;
+ _tool.onMouseMove = function(_event) {
+ _this.onMouseMove(_event);
+ }
+ _tool.onMouseDown = function(_event) {
+ _this.onMouseDown(_event);
+ }
+ _tool.onMouseDrag = function(_event) {
+ _this.onMouseDrag(_event);
+ }
+ this.canvas_$.mouseup(function(_event) {
+ _this.onMouseUp(_event);
+ });
+ this.canvas_$.mousewheel(function(_event, _delta) {
+ _this.onScroll(_event, _delta);
+ });
+ this.tooltip_$.find(".Rk-ZoomOut").click(function() {
+ _this.offset = new paper.Point([
+ _this.canvas_$.width(),
+ _this.canvas_$.height()
+ ]).multiply( .5 * ( 1 - Math.SQRT1_2 ) ).add(_this.offset.multiply( Math.SQRT1_2 ));
+ _this.scale *= Math.SQRT1_2;
+ _this.redraw();
+ });
+ this.tooltip_$.find(".Rk-ZoomIn").click(function() {
+ _this.offset = new paper.Point([
+ _this.canvas_$.width(),
+ _this.canvas_$.height()
+ ]).multiply( .5 * ( 1 - Math.SQRT2 ) ).add(_this.offset.multiply( Math.SQRT2 ));
+ _this.scale *= Math.SQRT2;
+ _this.redraw();
+ });
+ paper.view.onResize = function(_event) {
+ _this.offset = _this.offset.add(_event.delta.divide(2));
+ _this.redraw();
+ }
+
+ var _thRedraw = Rkns._.throttle(function() {
+ _this.redraw();
+ },50);
+
+ this.addRepresentations("Node", this.renkan.project.get("nodes"));
+ this.addRepresentations("Edge", this.renkan.project.get("edges"));
+
+ this.renkan.project.on("add:nodes", function(_node) {
+ _this.addRepresentation("Node", _node);
+ _thRedraw();
+ });
+ this.renkan.project.on("add:edges", function(_edge) {
+ _this.addRepresentation("Edge", _edge);
+ _thRedraw();
+ });
+
+ this.redraw();
+}
+
+Rkns.Renderer.Scene.prototype.template = Rkns._.template(
+ '<canvas class="Rk-Canvas" width="<%=width%>" height="<%=height%>"></canvas><div class="Rk-Editor">'
+ + '<div class="Rk-ZoomButtons"><div class="Rk-ZoomIn" title="<%=l10n.zoom_in%>"></div><div class="Rk-ZoomOut" title="<%=l10n.zoom_out%>"></div></div>'
+ + '</div>'
+);
+
+Rkns.Renderer.Scene.prototype.autoScale = function() {
+ if (this.renkan.project.get("nodes").length) {
+ var _xx = this.renkan.project.get("nodes").map(function(_node) { return _node.get("position").x }),
+ _yy = this.renkan.project.get("nodes").map(function(_node) { return _node.get("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 - 2 * Rkns.Renderer._MARGIN_X) / (_maxx - _minx), (paper.view.size.height - 2 * Rkns.Renderer._MARGIN_Y) / (_maxy - _miny));
+ this.offset = paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(this.scale));
+ this.redraw();
+ }
+}
+
+Rkns.Renderer.Scene.prototype.toPaperCoords = function(_point) {
+ return _point.multiply(this.scale).add(this.offset);
+}
+
+
+Rkns.Renderer.Scene.prototype.toModelCoords = function(_point) {
+ return _point.subtract(this.offset).divide(this.scale);
+}
+
+Rkns.Renderer.Scene.prototype.addRepresentation = function(_type, _model) {
+ var _repr = new Rkns.Renderer[_type](this, _model);
+ this.representations.push(_repr);
+ if (_model) {
+ var _this = this;
+ _model.on("change", function() {
+ _repr.redraw();
+ });
+ _model.on("remove", function() {
+ _this.removeRepresentation(_repr);
+ _this.redraw();
+ });
+ }
+ return _repr;
+}
+
+Rkns.Renderer.Scene.prototype.addRepresentations = function(_type, _collection) {
+ var _this = this;
+ _collection.forEach(function(_model) {
+ _this.addRepresentation(_type, _model);
+ });
+}
+
+Rkns.Renderer.Scene.prototype.removeRepresentation = function(_representation) {
+ _representation.destroy();
+ this.representations = Rkns._(this.representations).reject(
+ function(_repr) {
+ return _repr == _representation
+ }
+ );
+}
+
+Rkns.Renderer.Scene.prototype.getRepresentationByModel = function(_model) {
+ return Rkns._(this.representations).find(function(_repr) {
+ return _repr.model === _model;
+ });
+}
+
+Rkns.Renderer.Scene.prototype.removeRepresentationsOfType = function(_type) {
+ var _representations = Rkns._(this.representations).filter(function(_repr) {
+ return _repr.type == _type;
+ }),
+ _this = this;
+ Rkns._(_representations).each(function(_repr) {
+ _this.removeRepresentation(_repr);
+ });
+}
+
+Rkns.Renderer.Scene.prototype.unselectAll = function() {
+ Rkns._(this.representations).each(function(_repr) {
+ _repr.model.trigger("unselect");
+ });
+}
+
+Rkns.Renderer.Scene.prototype.redraw = function() {
+ Rkns._(this.representations).each(function(_representation) {
+ _representation.redraw();
+ });
+ paper.view.draw();
+}
+
+Rkns.Renderer.Scene.prototype.addTempEdge = function(_from, _point) {
+ var _tmpEdge = this.addRepresentation("TempEdge",null);
+ _tmpEdge.end_pos = _point;
+ _tmpEdge.from_representation = _from;
+ _tmpEdge.redraw();
+ this.click_target = _tmpEdge;
+}
+
+Rkns.Renderer.Scene.prototype.findTarget = function(_hitResult) {
+ if (_hitResult && typeof _hitResult.item.__representation !== "undefined") {
+ var _newTarget = _hitResult.item.__representation;
+ if (this.selected_target !== _newTarget && _newTarget.model) {
+ if (this.selected_target) {
+ this.selected_target.model.trigger("unselect");
+ }
+ _newTarget.model.trigger("select");
+ if (typeof _newTarget.openTooltip === "function") {
+ _newTarget.openTooltip();
+ }
+ this.selected_target = _newTarget;
+ }
+ } else {
+ if (!_hitResult) {
+ this.removeRepresentationsOfType("tooltip");
+ }
+ if (this.selected_target) {
+ this.selected_target.model.trigger("unselect");
+ }
+ this.selected_target = null;
+ }
+}
+
+Rkns.Renderer.Scene.prototype.onMouseMove = function(_event) {
+ var _hitResult = paper.project.hitTest(_event.point);
+ if (this.is_dragging) {
+ 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();
+ }
+ } else {
+ this.findTarget(_hitResult);
+ }
+}
+
+Rkns.Renderer.Scene.prototype.onMouseDown = function(_event) {
+ this.is_dragging = false;
+ var _hitResult = paper.project.hitTest(_event.point);
+ if (_hitResult && typeof _hitResult.item.__representation !== "undefined") {
+ this.click_target = _hitResult.item.__representation;
+ } else {
+ this.click_target = null;
+ }
+}
+
+Rkns.Renderer.Scene.prototype.onMouseDrag = function(_event) {
+ this.is_dragging = true;
+ this.onMouseMove(_event);
+}
+
+Rkns.Renderer.Scene.prototype.onMouseUp = function(_event) {
+ if (this.click_target) {
+ var _off = this.canvas_$.offset();
+ if (this.click_target.model) {
+ this.click_target.model.trigger("click");
+ }
+ }
+ this.is_dragging = false;
+ this.click_target = null;
+}
+
+Rkns.Renderer.Scene.prototype.onScroll = function(_event, _scrolldelta) {
+ this.totalScroll += _scrolldelta;
+ if (Math.abs(this.totalScroll) >= 1) {
+ var _off = this.canvas_$.offset(),
+ _delta = new paper.Point([
+ _event.pageX - _off.left,
+ _event.pageY - _off.top
+ ]).subtract(this.offset).multiply( Math.SQRT2 - 1 );
+ if (this.totalScroll > 0) {
+ this.offset = this.offset.subtract(_delta);
+ this.scale *= Math.SQRT2;
+ } else {
+ this.offset = this.offset.add(_delta.divide( Math.SQRT2 ));
+ this.scale *= Math.SQRT1_2;
+ }
+ this.totalScroll = 0;
+ this.redraw();
+ }
+}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/publish-test.html Tue Aug 28 18:26:13 2012 +0200
@@ -0,0 +1,34 @@
+<!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/jquery.mousewheel.min.js"></script>
+ <script src="lib/underscore-min.js"></script>
+ <script src="lib/backbone.js"></script>
+ <script src="lib/backbone-relational.js"></script>
+ <script src="lib/paper.js"></script>
+ <script src="js/renkan-publish.js"></script>
+ <script src="js/models.js"></script>
+ <script type="text/javascript">
+ var _proj;
+ $(function() {
+ _renkan = new Rkns.Renkan({});
+ Rkns.jsonImport(_renkan, {
+ url: "data/simple-persist.php"
+ });
+ });
+ </script>
+ <link rel="stylesheet" href="css/renkan.css" />
+ <style type="text/css">
+ </style>
+ </head>
+
+ <body>
+ <div id="renkan"></div>
+ </body>
+</html>
--- a/client/render-test.html Wed Aug 22 16:50:42 2012 +0200
+++ b/client/render-test.html Tue Aug 28 18:26:13 2012 +0200
@@ -47,7 +47,8 @@
{
title: "LDT Project",
bin: Rkns.Bins.LdtJson,
- project_id: "67280b1c-ff30-11e0-a82d-00145ea49a02"
+ project_id: "67280b1c-ff30-11e0-a82d-00145ea49a02",
+ ldt_platform: "http://ubuntu/pf/"
}
],
search: [
@@ -72,6 +73,11 @@
],
user_id: "u-anonymous"
});
+/* _renkan.project.addUser({
+ id: "u-anonymous",
+ title: "user",
+ color: "#000080"
+ }) */
Rkns.jsonIO(_renkan, {
url: "data/simple-persist.php"
});