--- a/client/css/renkan-publish.css Thu Feb 14 12:25:58 2013 +0100
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,134 +0,0 @@
-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;
- background: #ffffff; color: #000000;
-}
-
-a {
- color: #303080;
-}
-
-.Rk-ProjectList {
- position: absolute; left: 0; top: 0; list-style: none; padding: 0; margin: 0;
-}
-
-.Rk-Project {
- list-style: none; margin-right: 5px; padding: 5px; height: 15px; font-size: 13px; font-weight: bold;
- float: left; border-top-left-radius: 8px; border-top-right-radius: 8px;
- background: #505050; color: #E0E0E0; cursor: pointer;
- background: -moz-linear-gradient(top, #333333 20%, #666666 80%);
-}
-
-.Rk-Project:hover {
- background: -moz-linear-gradient(bottom, #333333 20%, #666666 80%);
-}
-
-.Rk-Project.active {
- background: #505080;
- color: #ffffc0;
- background: -moz-linear-gradient(bottom, #333366 20%, #666699 80%);
-}
-
-.Rk-Render {
- position: absolute; left: 0; top: 25px; right: 0; bottom: 0;
- background: -moz-linear-gradient(top, rgba(180,180,180,.2) 0, rgba(255,255,255,.2) 30%, rgba(255,255,255,.2) 70%, rgba(180,180,180,.2) 100%);
-}
-
-.Rk-Canvas {
- background: -moz-linear-gradient(left, rgba(180,180,180,.2) 0, rgba(255,255,255,.2) 30%, rgba(255,255,255,.2) 70%, rgba(180,180,180,.2) 100%);
- position: absolute; left: 0; top: 0; right: 0; bottom: 0;
-}
-
-.Rk-Editor {
- position: absolute; left: 0; top: 0;
-}
-
-.Rk-CloseX {
- float: right; cursor: pointer;
-}
-
-.Rk-Editor h2 {
- font-size: 14px; font-weight: bold;
-}
-
-.Rk-Editor p {
- margin: 5px 0; font-size: 11px;
-}
-
-.Rk-RelatedList {
- list-style: none;
-}
-
-.Rk-Related {
- color: #a000c0; cursor: pointer; margin: 5px 0;
-}
-
-.Rk-Related b {
- font-weight: bolder;
-}
-
-.Rk-Related:hover {
- text-decoration: underline;
-}
-
-.Rk-ZoomButtons {
- position: absolute; left: 0; top: 0; cursor: pointer;
-}
-
-.Rk-ZoomIn, .Rk-ZoomOut {
- width: 21px; height: 20px; background: url(../img/zoombuttons.png); margin: 5px;
-}
-
-.Rk-ZoomIn:hover {
- background-position: 0 -20px;
-}
-
-.Rk-ZoomOut {
- background-position: -21px 0;
-}
-
-.Rk-ZoomOut:hover {
- background-position: -21px -20px;
-}
--- a/client/css/renkan.css Thu Feb 14 12:25:58 2013 +0100
+++ b/client/css/renkan.css Thu Feb 14 17:39:52 2013 +0100
@@ -55,12 +55,20 @@
}
.Rk-Render {
- position: absolute; left: 300px; top: 0; right: 0; bottom: 0;
+ position: absolute; top: 0; right: 0; bottom: 0;
background: #ffffff;
background: -moz-linear-gradient(left, #f3f3f3 0, #ffffff 30%, #ffffff 70%, #f3f3f3 100%);
background: -webkit-linear-gradient(left, #f3f3f3 0, #ffffff 30%, #ffffff 70%, #f3f3f3 100%);
}
+.Rk-Render-Full {
+ left: 0;
+}
+
+.Rk-Render-Panel {
+ left: 300px;
+}
+
/* Top Bar */
.Rk-TopBar {
--- a/client/js/full-json.js Thu Feb 14 12:25:58 2013 +0100
+++ b/client/js/full-json.js Thu Feb 14 17:39:52 2013 +0100
@@ -11,27 +11,32 @@
_renkan.renderer.autoScale();
});
}
- var _save = function() {
- var _data = _proj.toJSON();
- Rkns.$.ajax({
- type: _opts.http_method,
- url: _opts.url,
- contentType: "application/json",
- data: JSON.stringify(_data),
- success: function(data, textStatus, jqXHR) {
- }
- });
-
- }
- var _thrSave = Rkns._.throttle(
- function() {
- setTimeout(_save, 100)
- }, 1000);
- _load();
- _proj.on("add:nodes add:edges add:users", function(_model) {
- _model.on("change remove", function(_model) {
+ if (!_renkan.read_only) {
+ var _save = function() {
+ var _data = _proj.toJSON();
+ Rkns.$.ajax({
+ type: _opts.http_method,
+ url: _opts.url,
+ contentType: "application/json",
+ data: JSON.stringify(_data),
+ success: function(data, textStatus, jqXHR) {
+ }
+ });
+
+ }
+ var _thrSave = Rkns._.throttle(
+ function() {
+ setTimeout(_save, 100)
+ }, 1000);
+ _proj.on("add:nodes add:edges add:users", function(_model) {
+ _model.on("change remove", function(_model) {
+ _thrSave();
+ });
_thrSave();
});
- _thrSave();
- });
+ _proj.on("change", function() {
+ _thrSave();
+ });
+ }
+ _load();
}
--- a/client/js/main.js Thu Feb 14 12:25:58 2013 +0100
+++ b/client/js/main.js Thu Feb 14 17:39:52 2013 +0100
@@ -95,12 +95,22 @@
if (typeof _opts.search !== "object" || !_opts.search) {
_opts.search = [];
}
+ if (typeof _opts.bins !== "object" || !_opts.bins) {
+ _opts.bins = [];
+ }
if (typeof _opts.static_url !== "string") {
_opts.static_url = "";
}
+ if (typeof _opts.show_bins !== "boolean") {
+ _opts.show_bins = !!_opts.search.length || !!_opts.bins.length;
+ }
+ if (typeof _opts.read_only !== "boolean") {
+ _opts.read_only = false;
+ }
this.project = new Rkns.Models.Project();
this.language = _opts.language;
this.static_url = _opts.static_url;
+ this.read_only = _opts.read_only;
this.l10n = Rkns.i18n[_opts.language];
if (typeof _opts.user_id !== "undefined") {
this.current_user = _opts.user_id;
@@ -108,7 +118,7 @@
this.$ = Rkns.$("#" + _opts.container);
this.$
.addClass("Rk-Main")
- .html(this.template());
+ .html(this.template(_opts));
this.renderer = new Rkns.Renderer.Scene(this);
this.tabs = [];
this.search_engines = [];
@@ -173,6 +183,9 @@
_mainDiv.slideDown();
}
}).on("mousedown", ".Rk-Bin-Item", function() {
+ if (_this.read_only) {
+ return false;
+ }
var _t = Rkns.$(this);
_t.addClass("dragging");
_this.selected_bin_item = {
@@ -211,13 +224,13 @@
}
Rkns.Renkan.prototype.template = Rkns._.template(
- '<div class="Rk-Title"><h1>Hyper Plateau</h1></div><div class="Rk-Bins">'
+ '<% if (show_bins) { %><div class="Rk-Title"><h1>Hyper Plateau</h1></div><div class="Rk-Bins">'
+ '<form class="Rk-Web-Search-Form Rk-Search-Form"><input class="Rk-Web-Search-Input Rk-Search-Input" type="search" placeholder="Search the Web" />'
+ '<div class="Rk-Search-Select"><div class="Rk-Search-Current"></div><ul class="Rk-Search-List"></ul></div>'
+ '<input type="submit" value="" class="Rk-Web-Search-Submit Rk-Search-Submit" /></form>'
+ '<form class="Rk-Bins-Search-Form Rk-Search-Form"><input class="Rk-Bins-Search-Input Rk-Search-Input" type="search" placeholder="Search in Bins" />'
+ '<input type="submit" value="" class="Rk-Bins-Search-Submit Rk-Search-Submit" /></form>'
- + '<ul class="Rk-Bin-List"></ul></div><div class="Rk-Render Rk-Render-Panel"></div>'
+ + '<ul class="Rk-Bin-List"></ul></div><% } %><div class="Rk-Render Rk-Render-<% if (show_bins) { %>Panel<% } else { %>Full<% } %>"></div>'
);
--- a/client/js/paper-renderer.js Thu Feb 14 12:25:58 2013 +0100
+++ b/client/js/paper-renderer.js Thu Feb 14 17:39:52 2013 +0100
@@ -218,6 +218,12 @@
Rkns.Renderer._BaseRepresentation.prototype[_func].apply(this, Array.prototype.slice.call(arguments, 1));
}
+Rkns.Renderer._BaseRepresentation.prototype.moveTo = function() {}
+
+Rkns.Renderer._BaseRepresentation.prototype.show = function() {}
+
+Rkns.Renderer._BaseRepresentation.prototype.hide = function() {}
+
Rkns.Renderer._BaseRepresentation.prototype.select = function() {}
Rkns.Renderer._BaseRepresentation.prototype.unselect = function() {}
@@ -253,12 +259,19 @@
fontSize: Rkns.Renderer._NODE_FONT_SIZE,
fillColor: 'black'
};
- this.edit_button = new Rkns.Renderer.NodeEditButton(this.renderer, null);
- this.edit_button.node_representation = this;
- this.remove_button = new Rkns.Renderer.NodeRemoveButton(this.renderer, null);
- this.remove_button.node_representation = this;
- this.link_button = new Rkns.Renderer.NodeLinkButton(this.renderer, null);
- this.link_button.node_representation = this;
+ if (this.renderer.renkan.read_only) {
+ this.edit_button = new Rkns.Renderer._BaseRepresentation(this.renderer, null);
+ this.remove_button = new Rkns.Renderer._BaseRepresentation(this.renderer, null);
+ this.link_button = new Rkns.Renderer._BaseRepresentation(this.renderer, null);
+ } else {
+ this.edit_button = new Rkns.Renderer.NodeEditButton(this.renderer, null);
+ this.edit_button.node_representation = this;
+ this.remove_button = new Rkns.Renderer.NodeRemoveButton(this.renderer, null);
+ this.remove_button.node_representation = this;
+ this.link_button = new Rkns.Renderer.NodeLinkButton(this.renderer, null);
+ this.link_button.node_representation = this;
+ }
+
this.title.paragraphStyle.justification = 'center';
}
@@ -342,6 +355,9 @@
_el.addClass("selected");
}
});
+ if (this.renderer.renkan.read_only) {
+ this.openEditor();
+ }
}
Rkns.Renderer.Node.prototype.unselect = function(_newTarget) {
@@ -380,11 +396,13 @@
}
Rkns.Renderer.Node.prototype.mouseup = function(_event) {
- if (this.renderer.is_dragging) {
- this.saveCoords();
- }
- else {
- this.openEditor();
+ if (!this.renderer.renkan.read_only) {
+ if (this.renderer.is_dragging) {
+ this.saveCoords();
+ }
+ else {
+ this.openEditor();
+ }
}
this.renderer.click_target = null;
this.renderer.is_dragging = false;
@@ -427,10 +445,15 @@
this.text.paragraphStyle.justification = 'center';
this.text_angle = 0;
this.arrow_angle = 0;
- this.edit_button = new Rkns.Renderer.EdgeEditButton(this.renderer, null);
- this.edit_button.edge_representation = this;
- this.remove_button = new Rkns.Renderer.EdgeRemoveButton(this.renderer, null);
- this.remove_button.edge_representation = this;
+ if (this.renderer.renkan.read_only) {
+ this.edit_button = new Rkns.Renderer._BaseRepresentation(this.renderer, null);
+ this.remove_button = new Rkns.Renderer._BaseRepresentation(this.renderer, null);
+ } else {
+ this.edit_button = new Rkns.Renderer.EdgeEditButton(this.renderer, null);
+ this.edit_button.edge_representation = this;
+ this.remove_button = new Rkns.Renderer.EdgeRemoveButton(this.renderer, null);
+ this.remove_button.edge_representation = this;
+ }
}
Rkns.Renderer.Edge.prototype.redraw = function() {
@@ -482,6 +505,9 @@
this.line.strokeWidth = 4;
this.edit_button.show();
this.remove_button.show();
+ if (this.renderer.renkan.read_only) {
+ this.openEditor();
+ }
}
Rkns.Renderer.Edge.prototype.unselect = function(_newTarget) {
@@ -493,11 +519,13 @@
}
Rkns.Renderer.Edge.prototype.mouseup = function(_event) {
- if (this.renderer.is_dragging) {
- this.from_representation.saveCoords();
- this.to_representation.saveCoords();
- } else {
- this.openEditor();
+ if (!this.renderer.renkan.read_only) {
+ if (this.renderer.is_dragging) {
+ this.from_representation.saveCoords();
+ this.to_representation.saveCoords();
+ } else {
+ this.openEditor();
+ }
}
this.renderer.click_target = null;
this.renderer.is_dragging = false;
@@ -627,11 +655,19 @@
+ '<p><label><%=l10n.created_by%></label> <span class="Rk-UserColor" style="background:<%=node.created_by_color%>;"></span><%=node.created_by_title%></p>'
);
+Rkns.Renderer.NodeEditor.prototype.readOnlyTemplate = Rkns._.template(
+ '<h2><span class="Rk-CloseX">×</span><span class="Rk-UserColor" style="background:<%=node.color%>;"></span><%-node.title%></span></h2>'
+ + '<p><a href="<%-node.uri%>" target="_blank"><%-node.uri%></a></p>'
+ + '<p><%-node.description%></p>'
+ + '<p><label><%=l10n.created_by%> </label><span class="Rk-UserColor" style="background:<%=node.created_by_color%>;"></span><%=node.created_by_title%></p>'
+);
+
Rkns.Renderer.NodeEditor.prototype.draw = function() {
var _model = this.node_representation.model,
- _created_by = _model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER;
+ _created_by = _model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER,
+ _template = (this.renderer.renkan.read_only ? this.readOnlyTemplate : this.template);
this.editor_$
- .html(this.template({
+ .html(_template({
node: {
title: _model.get("title"),
uri: _model.get("uri"),
@@ -649,34 +685,36 @@
_this.renderer.removeRepresentation(_this);
paper.view.draw();
});
- this.editor_$.find("input, textarea").bind("keyup change", function() {
- var _uri = _this.editor_$.find(".Rk-Edit-URI").val(),
- _image = _this.editor_$.find(".Rk-Edit-Image").val();
- _this.editor_$.find(".Rk-Edit-ImgPreview").attr("src", _image);
- _this.editor_$.find(".Rk-Edit-Goto").attr("href",_uri);
- var _data = {
- title: _this.editor_$.find(".Rk-Edit-Title").val(),
- description: _this.editor_$.find(".Rk-Edit-Description").val(),
- uri: _uri,
- image: _image
- }
- _model.set(_data);
- _this.redraw();
- });
+ if (!this.renderer.renkan.read_only) {
+ this.editor_$.find("input, textarea").bind("keyup change", function() {
+ var _uri = _this.editor_$.find(".Rk-Edit-URI").val(),
+ _image = _this.editor_$.find(".Rk-Edit-Image").val();
+ _this.editor_$.find(".Rk-Edit-ImgPreview").attr("src", _image);
+ _this.editor_$.find(".Rk-Edit-Goto").attr("href",_uri);
+ var _data = {
+ title: _this.editor_$.find(".Rk-Edit-Title").val(),
+ description: _this.editor_$.find(".Rk-Edit-Description").val(),
+ uri: _uri,
+ image: _image
+ }
+ _model.set(_data);
+ _this.redraw();
+ });
+ this.editor_$.find(".Rk-Edit-Title")[0].focus();
+ this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover(
+ function() { _this.editor_$.find(".Rk-Edit-ColorPicker").show(); },
+ function() { _this.editor_$.find(".Rk-Edit-ColorPicker").hide(); }
+ );
+ this.editor_$.find(".Rk-Edit-ColorPicker li").hover(
+ function() { _this.editor_$.find(".Rk-Edit-Color").css("background", $(this).attr("data-color")); },
+ function() { _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color")) }
+ ).click(function() {
+ _model.set("color", $(this).attr("data-color"));
+ _this.redraw();
+ });
+ }
this.editor_$.find("img").load(function() {
_this.redraw();
- })
- this.editor_$.find(".Rk-Edit-Title")[0].focus();
- this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover(
- function() { _this.editor_$.find(".Rk-Edit-ColorPicker").show(); },
- function() { _this.editor_$.find(".Rk-Edit-ColorPicker").hide(); }
- );
- this.editor_$.find(".Rk-Edit-ColorPicker li").hover(
- function() { _this.editor_$.find(".Rk-Edit-Color").css("background", $(this).attr("data-color")); },
- function() { _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color")) }
- ).click(function() {
- _model.set("color", $(this).attr("data-color"));
- _this.redraw();
});
}
@@ -726,13 +764,23 @@
+ '<p><label><%=l10n.created_by%> </label><span class="Rk-UserColor" style="background:<%=edge.created_by_color%>;"></span><%=edge.created_by_title%></p>'
);
+Rkns.Renderer.EdgeEditor.prototype.readOnlyTemplate = Rkns._.template(
+ '<h2><span class="Rk-CloseX">×</span><span class="Rk-UserColor" style="background:<%=edge.color%>;"></span><%- edge.title %></span></h2>'
+ + '<p><a href="<%-edge.uri%>" target="_blank"><%-edge.uri%></a></p>'
+ + '<p><%-edge.description%></p>'
+ + '<p><label><%=l10n.edit_from%></label><span class="Rk-UserColor" style="background:<%=edge.from_color%>;"></span><%=edge.from_title%></p>'
+ + '<p><label><%=l10n.edit_to%></label><span class="Rk-UserColor" style="background:<%=edge.to_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.Renderer.EdgeEditor.prototype.draw = function() {
var _model = this.edge_representation.model,
_from_model = _model.get("from"),
_to_model = _model.get("to"),
- _created_by = _model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER;
+ _created_by = _model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER,
+ _template = (this.renderer.renkan.read_only ? this.readOnlyTemplate : this.template);
this.editor_$
- .html(this.template({
+ .html(_template({
edge: {
title: _model.get("title"),
uri: _model.get("uri"),
@@ -753,27 +801,30 @@
_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()
- }
- _model.set(_data);
- _this.redraw();
- });
- this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover(
- function() { _this.editor_$.find(".Rk-Edit-ColorPicker").show(); },
- function() { _this.editor_$.find(".Rk-Edit-ColorPicker").hide(); }
- );
- this.editor_$.find(".Rk-Edit-ColorPicker li").hover(
- function() { _this.editor_$.find(".Rk-Edit-Color").css("background", $(this).attr("data-color")); },
- function() { _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color")); }
- ).click(function() {
- _model.set("color", $(this).attr("data-color"));
- _this.redraw();
- });
+ if (!this.renderer.renkan.read_only) {
+ 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()
+ }
+ _model.set(_data);
+ _this.redraw();
+ });
+ this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover(
+ function() { _this.editor_$.find(".Rk-Edit-ColorPicker").show(); },
+ function() { _this.editor_$.find(".Rk-Edit-ColorPicker").hide(); }
+ );
+ this.editor_$.find(".Rk-Edit-ColorPicker li").hover(
+ function() { _this.editor_$.find(".Rk-Edit-Color").css("background", $(this).attr("data-color")); },
+ function() { _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color")); }
+ ).click(function() {
+ _model.set("color", $(this).attr("data-color"));
+ _this.redraw();
+ });
+ }
}
+
Rkns.Renderer.EdgeEditor.prototype.redraw = function() {
var _coords = this.edge_representation.paper_coords;
Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 5, this.editor_$);
@@ -1143,18 +1194,31 @@
_this.addRepresentation("Edge", _edge);
_thRedraw();
});
+ this.renkan.project.on("change:title", function(_model, _title) {
+ var el = $(".Rk-PadTitle");
+ if (el.is("input")) {
+ if (el.val() !== _title) {
+ el.val(_title);
+ }
+ } else {
+ el.text(_title);
+ }
+ });
this.redraw();
}
Rkns.Renderer.Scene.prototype.template = Rkns._.template(
- '<div class="Rk-TopBar"><input type="text" class="Rk-PadTitle" value="<%- project.get("title") || "" %>" placeholder="<%=l10n.untitled_project%>" />'
+ '<div class="Rk-TopBar"><% if (read_only) { %><h2 class="Rk-PadTitle"><%- project.get("title") || l10n.untitled_project%></h2>'
+ + '<% } else { %><input type="text" class="Rk-PadTitle" value="<%- project.get("title") || "" %>" placeholder="<%=l10n.untitled_project%>" /><% } %>'
+ '<div class="Rk-Users"><div class="Rk-CurrentUser"><span class="Rk-CurrentUser-Color"></span><span class="Rk-CurrentUser-Name"><unknown user></span></div><ul class="Rk-UserList"></ul></div>'
+ '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-FullScreen-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"><%=l10n.full_screen%></div></div></div>'
+ + '<% if (!read_only) { %>'
+ '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-AddNode-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"><%=l10n.add_node%></div></div></div>'
+ '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-AddEdge-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"><%=l10n.add_edge%></div></div></div>'
+ '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-Save-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"><%=l10n.save_project%></div></div></div>'
+ '<div class="Rk-TopBar-Separator"></div></div>'
+ + '<% } %>'
+ '<canvas class="Rk-Canvas" resize></canvas><div class="Rk-Editor"><div class="Rk-Notifications"></div>'
+ '<div class="Rk-ZoomButtons"><div class="Rk-ZoomIn" title="<%=l10n.zoom_in%>"></div><div class="Rk-ZoomOut" title="<%=l10n.zoom_out%>"></div></div>'
+ '</div>'
@@ -1331,7 +1395,7 @@
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") {
+ if (this.click_target && typeof this.click_target.paperShift === "function" && !this.renkan.read_only) {
this.click_target.paperShift(_event.delta);
} else {
this.offset = this.offset.add(_event.delta);
@@ -1345,6 +1409,7 @@
Rkns.Renderer.Scene.prototype.onMouseDown = function(_event) {
if (!this.click_target || this.click_target.type !== "temp-edge") {
+ this.removeRepresentationsOfType("editor");
this.is_dragging = false;
var _hitResult = paper.project.hitTest(_event.point);
if (_hitResult && typeof _hitResult.item.__representation !== "undefined") {
@@ -1428,6 +1493,9 @@
}
Rkns.Renderer.Scene.prototype.onDoubleClick = function(_event) {
+ if (this.renkan.read_only) {
+ return;
+ }
var _off = this.canvas_$.offset(),
_point = new paper.Point([
_event.pageX - _off.left,
@@ -1452,7 +1520,7 @@
Rkns.Renderer.Scene.prototype.onMouseEnter = function(_event) {
var _newEl = this.renkan.selected_bin_item;
- if (_newEl) {
+ if (_newEl && !this.renkan.read_only) {
var _off = this.canvas_$.offset(),
_point = new paper.Point([
_event.pageX - _off.left,
--- a/client/js/renkan-publish.js Thu Feb 14 12:25:58 2013 +0100
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,1085 +0,0 @@
-/*
- * 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",
- see_in_project: 'See also <b>"{node}"</b> in <b>"{project}"</b>'
- }
-}
-
-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 || 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"),
- image: this.get("image"),
- 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.projects = [];
- this.l10n = Rkns.i18n[_opts.language];
- this.$ = Rkns.$("#" + _opts.container);
- this.$.html(this.template());
- this.uris = {};
- this.active_project = null;
- this.renderer = null;
-}
-
-Rkns.Renkan.prototype.template = Rkns._.template(
- '<div class="Rk-Render"></div><ul class="Rk-Project-List"></ul>'
-);
-
-Rkns.Renkan.prototype.addProject = function(_opts) {
- var _proj = new Rkns.Models.Project(),
- _li = Rkns.$("<li>").addClass("Rk-Project").text("Untitled #" + (1+this.projects.length));
- this.$.find(".Rk-Project-List").append(_li);
- Rkns.loadJson(_proj, _opts);
- var _this = this;
- _li.click(function() {
- _this.renderProject(_proj);
- });
- _proj.on("change:title", function() {
- _li.html(_proj.get("title"));
- });
- _proj.on("select", function() {
- _this.$.find(".Rk-Project").removeClass("active");
- _li.addClass("active");
- });
- _proj.on("add:nodes", function(_node) {
- var _uri = _node.get("uri");
- if (_uri) {
- if (typeof _this.uris[_uri] === "undefined") {
- _this.uris[_uri] = [];
- }
- _this.uris[_uri].push(_node);
- }
- });
- this.projects.push(_proj);
- return _proj;
-}
-
-Rkns.Renkan.prototype.renderProject = function(_project) {
- if (_project) {
- if (this.renderer) {
- this.renderer.destroy();
- }
- this.active_project = _project;
- this.renderer = new Rkns.Renderer.Scene(this, _project);
- this.renderer.autoScale();
- _project.trigger("select");
- }
-}
-
-Rkns.Renkan.prototype.renderProjectAt = function(_index) {
- this.renderProject(this.projects[_index]);
-}
-
-Rkns.loadJson = function(_proj, _opts) {
- if (typeof _opts.http_method == "undefined") {
- _opts.http_method = 'PUT';
- }
- var _load = function() {
- Rkns.$.getJSON(_opts.url, function(_data) {
- _proj.set(_data);
- if (typeof _opts.callback === "function") {
- _opts.callback(_proj);
- }
- });
- }
- _load();
-}
-
-Rkns.Renderer = {
- _MARGIN_X: 80,
- _MARGIN_Y: 50,
- _MIN_DRAG_DISTANCE: 2,
- _NODE_RADIUS: 20,
- _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.project;
- this.model = _model;
- if (this.model) {
- var _this = this;
- this._selectBinding = function() {
- _this.select();
- };
- this._unselectBinding = function() {
- _this.unselect();
- }
- this._changeBinding = function() {
- _this.redraw();
- }
- this._removeBinding = function() {
- _renderer.removeRepresentation(_this);
- _renderer.redraw();
- }
- this.model.on("change", this._changeBinding );
- this.model.on("remove", this._removeBinding );
- this.model.on("select", this._selectBinding );
- this.model.on("unselect", this._unselectBinding );
- }
- }
-}
-
-Rkns.Renderer._BaseRepresentation.prototype.super = function(_func) {
- Rkns.Renderer._BaseRepresentation.prototype[_func].apply(this, Array.prototype.slice.call(arguments, 1));
-}
-
-Rkns.Renderer._BaseRepresentation.prototype.select = function() {}
-
-Rkns.Renderer._BaseRepresentation.prototype.unselect = function() {}
-
-Rkns.Renderer._BaseRepresentation.prototype.mouseup = function() {}
-
-Rkns.Renderer._BaseRepresentation.prototype.destroy = function() {
- if (this.model) {
- this.model.off("change", this._changeBinding );
- this.model.off("remove", this._removeBinding );
- this.model.off("select", this._selectBinding);
- this.model.off("unselect", this._unselectBinding);
- }
-}
-
-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");
- var _img = this.model.get("image");
- if (_img && _img !== this.img) {
- var _image = new Image(),
- _this = this;
- _image.onload = function() {
- if (_this.node_image) {
- _this.node_image.remove();
- }
- _this.renderer.node_layer.activate();
- var _ratio = Math.min(1, 2 * Rkns.Renderer._NODE_RADIUS / _image.width, 2 * Rkns.Renderer._NODE_RADIUS / _image.height );
- var _raster = new paper.Raster(_image);
- var _clip = new paper.Path.Circle([0, 0], Rkns.Renderer._NODE_RADIUS);
- _raster.scale(_ratio);
- _this.node_image = new paper.Group(_clip, _raster);
- _this.node_image.opacity = _this.selected ? .5 : .9;
- /* This is a workaround to allow clipping at group level */
- _this.node_image.clipped = true;
- _this.node_image.position = _this.paper_coords;
- _this.node_image.__representation = _this;
- paper.view.draw();
- }
- _image.src = _img;
- }
- this.img = _img;
- if (this.node_image) {
- if (!this.img) {
- this.node_image.remove();
- delete this.node_image;
- } else {
- this.node_image.position = this.paper_coords;
- }
- }
-}
-
-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.draw();
-}
-
-Rkns.Renderer.Node.prototype.select = function() {
- this.selected = true;
- this.circle.strokeWidth = 3;
- this.openTooltip();
- this.circle.fillColor = "#ffff80";
- if (this.node_image) {
- this.node_image.opacity = .5;
- }
- paper.view.draw();
-}
-
-Rkns.Renderer.Node.prototype.unselect = function() {
- this.selected = false;
- this.circle.strokeWidth = 1;
- this.circle.fillColor = "#ffffff";
- if (this.node_image) {
- this.node_image.opacity = .9;
- }
- paper.view.draw();
-}
-
-Rkns.Renderer.Node.prototype.mouseup = function(_event) {
-}
-
-Rkns.Renderer.Node.prototype.destroy = function(_event) {
- this.super("destroy");
- this.circle.remove();
- this.title.remove();
- if (this.node_image) {
- this.node_image.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.bundle = this.renderer.addToBundles(this);
- this.line = new paper.Path();
- this.line.add([0,0],[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 _p0a = this.from_representation.paper_coords,
- _p1a = this.to_representation.paper_coords,
- _v = _p1a.subtract(_p0a),
- _r = _v.length,
- _u = _v.divide(_r),
- _group_pos = this.bundle.getPosition(this),
- _delta = new paper.Point([- _u.y, _u.x]).multiply( 12 * _group_pos ),
- _p0b = _p0a.add(_delta), /* Adding a 4 px difference */
- _p1b = _p1a.add(_delta), /* to differentiate inbound and outbound links */
- _a = _v.angle,
- _handle = _v.divide(3),
- _color = this.model.get("created_by").get("color");
- this.paper_coords = _p0b.add(_p1b).divide(2);
- this.line.strokeColor = _color;
- this.line.segments[0].point = _p0a;
- this.line.segments[1].point = this.paper_coords;
- this.line.segments[1].handleIn = _handle.multiply(-1);
- this.line.segments[1].handleOut = _handle;
- this.line.segments[2].point = _p1a;
- 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.draw();
-}
-
-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.super("destroy");
- this.line.remove();
- this.arrow.remove();
- this.text.remove();
- var _this = this;
- this.bundle.edges = Rkns._(this.bundle.edges).reject(function(_edge) {
- return _edge === _this;
- });
-}
-
-/* */
-
-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>'
- + '<ul class="Rk-Related-List"></ul>'
-);
-
-Rkns.Renderer.NodeTooltip.prototype.draw = function() {
- var _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…')
- }))
- var _this = this,
- _renkan = this.renderer.renkan,
- _uris = _renkan.uris[_uri];
- Rkns._(_uris).each(function(_othernode) {
- if (_othernode !== _model && _othernode.get("project") !== _this.project) {
- var _otherproj = _othernode.get("project"),
- _nodetitle = _othernode.get("title") || "Untitled node"
- _projtitle = _otherproj.get("title") || "Untitled node",
- _html = _renkan.l10n.see_in_project.replace('{node}',Rkns._.escape(_nodetitle)).replace('{project}',Rkns._.escape(_projtitle)),
- _li = Rkns.$("<li>").addClass("Rk-Related").html(_html);
- _li.click(function() {
- _renkan.renderProject(_otherproj);
- Rkns._.defer(function() {
- _othernode.trigger("select");
- });
- });
- _this.tooltip_$.append(_li);
- }
- });
- this.tooltip_$.find(".Rk-CloseX").click(function() {
- _this.renderer.removeRepresentation(_this);
- paper.view.draw();
- });
- this.redraw();
-}
-
-Rkns.Renderer.NodeTooltip.prototype.redraw = function() {
- var _coords = this.node_representation.paper_coords;
- Rkns.Renderer.Utils.drawTooltip(_coords, this.tooltip_block, 250, 15, this.tooltip_$);
- this.tooltip_$.show();
-}
-
-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.draw = function() {
- var _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…')
- }));
- this.redraw();
- var _this = this;
- this.tooltip_$.find(".Rk-CloseX").click(function() {
- _this.renderer.removeRepresentation(_this);
- paper.view.draw();
- });
-}
-
-Rkns.Renderer.EdgeTooltip.prototype.redraw = function() {
- var _coords = this.edge_representation.paper_coords;
- Rkns.Renderer.Utils.drawTooltip(_coords, this.tooltip_block, 250, 5, this.tooltip_$);
- this.tooltip_$.show();
- paper.view.draw();
-}
-
-Rkns.Renderer.EdgeTooltip.prototype.destroy = function() {
- this.tooltip_block.remove();
- this.tooltip_$.detach();
-}
-
-/* */
-
-Rkns.Renderer.Scene = function(_renkan, _project) {
- this.renkan = _renkan;
- this.project = _project;
- 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();
- this.bundles = [];
- 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.project.get("nodes"));
- this.addRepresentations("Edge", this.project.get("edges"));
-
- this._addNodesBinding = function(_node) {
- _this.addRepresentation("Node", _node);
- _thRedraw();
- }
- this._addEdgesBinding = function(_edge) {
- _this.addRepresentation("Edge", _edge);
- _thRedraw();
- }
-
- this.project.on("add:nodes", this._addNodesBinding );
- this.project.on("add:edges", this._addEdgesBinding );
- 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.addToBundles = function(_edgeRepr) {
- var _bundle = Rkns._(this.bundles).find(function(_bundle) {
- return (
- ( _bundle.from === _edgeRepr.from_representation && _bundle.to === _edgeRepr.to_representation )
- || ( _bundle.from === _edgeRepr.to_representation && _bundle.to === _edgeRepr.from_representation )
- );
- });
- if (typeof _bundle !== "undefined") {
- _bundle.edges.push(_edgeRepr)
- } else {
- _bundle = {
- from: _edgeRepr.from_representation,
- to: _edgeRepr.to_representation,
- edges: [ _edgeRepr ],
- getPosition: function(_er) {
- var _dir = (_er.from_representation === this.from) ? 1 : -1;
- return _dir * ( Rkns._(this.edges).indexOf(_er) - (this.edges.length - 1) / 2 );
- }
- }
- this.bundles.push(_bundle);
- }
- return _bundle;
-}
-
-Rkns.Renderer.Scene.prototype.autoScale = function() {
- var nodes = this.project.get("nodes")
- if (nodes.length > 1) {
- var _xx = nodes.map(function(_node) { return _node.get("position").x }),
- _yy = 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();
- }
- if (nodes.length === 1) {
- this.scale = 1;
- this.offset = paper.view.center.subtract(new paper.Point([nodes.at(0).get("position").x, nodes.at(0).get("position").y]));
- 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);
- 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");
- 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();
- }
-}
-
-Rkns.Renderer.Scene.prototype.destroy = function() {
- this.project.off("add:nodes", this._addNodesBinding );
- this.project.off("add:edges", this._addEdgesBinding );
- Rkns._(this.representations).each(function(_repr) {
- _repr.destroy();
- });
- this.$.html("");
- paper.remove();
-}
-
--- a/client/publish-test.html Thu Feb 14 12:25:58 2013 +0100
+++ b/client/publish-test.html Thu Feb 14 17:39:52 2013 +0100
@@ -12,31 +12,30 @@
<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/main.js"></script>
+ <script src="js/i18n.js"></script>
+ <script src="js/models.js"></script>
+ <script src="js/full-json.js"></script>
+ <script src="js/paper-renderer.js"></script>
<script type="text/javascript">
var _renkan;
$(function() {
- _renkan = new Rkns.Renkan({});
- _renkan.addProject({
- url: "../metadataplayer/json/renkan-2.json",
- callback: function(_proj) {
- if (_renkan.renderer) {
- _renkan.renderer.autoScale();
- }
- }
+ _renkan = new Rkns.Renkan({
+ url: "data/simple-persist.php",
+ read_only: true
});
- _renkan.addProject({
- url: "../metadataplayer/json/renkan.json"
+ Rkns.jsonIO(_renkan, {
+ url: "data/simple-persist.php"
});
- _renderer = _renkan.renderProjectAt(0);
});
</script>
- <link rel="stylesheet" href="css/renkan-publish.css" />
+ <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 Thu Feb 14 12:25:58 2013 +0100
+++ b/client/render-test.html Thu Feb 14 17:39:52 2013 +0100
@@ -16,7 +16,6 @@
<script src="js/i18n.js"></script>
<script src="js/models.js"></script>
<script src="js/full-json.js"></script>
- <script src="js/random-data.js"></script>
<script src="js/twitter-bin.js"></script>
<script src="js/wikipedia-bin.js"></script>
<script src="js/ldtjson-bin.js"></script>
@@ -47,16 +46,9 @@
],
user_id: "u-iri"
});
-/* _renkan.project.addUser({
- id: "u-anonymous",
- title: "user",
- color: "#000080"
- }) */
Rkns.jsonIO(_renkan, {
url: "data/simple-persist.php"
});
-// Rkns.randomData(_renkan);
-
});
</script>
<link rel="stylesheet" href="css/renkan.css" />