<%- translate("Select contents:")%>
'
+ '
'
diff -r 803dbeb7c919 -r f0873867143a client/js/paper-renderer.js
--- a/client/js/paper-renderer.js Wed Feb 27 19:04:36 2013 +0100
+++ b/client/js/paper-renderer.js Thu Feb 28 19:13:08 2013 +0100
@@ -1,6 +1,6 @@
Rkns.Renderer = {
- _MARGIN_X: 80,
- _MARGIN_Y: 50,
+ _MINIMAP_MARGIN_X: 20,
+ _MINIMAP_MARGIN_Y: 20,
_MIN_DRAG_DISTANCE: 2,
_NODE_SIZE_BASE: 25,
_NODE_BUTTON_WIDTH: 40,
@@ -22,6 +22,8 @@
_CLICKMODE_ENDEDGE : 3,
_IMAGE_MAX_KB : 500,
_NODE_SIZE_STEP: Math.LN2/4,
+ _MINIMAP_WIDTH: 160,
+ _MINIMAP_HEIGHT: 120,
_USER_PLACEHOLDER : {
color: "#000000",
title: "(unknown user)",
@@ -106,6 +108,7 @@
_textX = Math.cos(_centerRads) * (_outR + 3),
_textY = Math.sin(_centerRads) * (_outR + 3),
_segments = [];
+ _repr.renderer.buttons_layer.activate();
var _path = new paper.Path();
_path.add([_startXIn, _startYIn]);
_path.arcTo([_centerXIn, _centerYIn], [_endXIn, _endYIn]);
@@ -261,14 +264,19 @@
}
this.last_circle_radius = 1;
this.title.paragraphStyle.justification = 'center';
+
+ this.renderer.minimap.node_layer.activate();
+ this.minimap_circle = new paper.Path.Circle([0, 0], 1);
+ this.renderer.minimap.node_group.addChild(this.minimap_circle);
}
Rkns.Renderer.Node.prototype.redraw = function() {
+ var _model_coords = new paper.Point(this.model.get("position")),
+ _baseRadius = Rkns.Renderer._NODE_SIZE_BASE * Math.exp((this.model.get("size") || 0) * Rkns.Renderer._NODE_SIZE_STEP);
if (!this.paper_coords) {
- var _model_coords = new paper.Point(this.model.get("position"));
this.paper_coords = this.renderer.toPaperCoords(_model_coords);
}
- this.circle_radius = Rkns.Renderer._NODE_SIZE_BASE * Math.exp((this.model.get("size") || 0) * Rkns.Renderer._NODE_SIZE_STEP) * this.renderer.scale;
+ this.circle_radius = _baseRadius * this.renderer.scale;
if (this.last_circle_radius !== this.circle_radius) {
if (!this.renderer.renkan.read_only) {
this.edit_button.setSectorSize();
@@ -292,7 +300,8 @@
this.title.content = this.model.get("title") || this.renderer.renkan.translate("(untitled)");
this.title.position = this.paper_coords.add([0, this.circle_radius + 1.5 *Rkns.Renderer._NODE_FONT_SIZE]);
- this.circle.strokeColor = this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color");
+ var _color = this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color");
+ this.circle.strokeColor = _color;
this.edit_button.moveTo(this.paper_coords);
this.remove_button.moveTo(this.paper_coords);
this.link_button.moveTo(this.paper_coords);
@@ -330,6 +339,12 @@
this.node_image.remove();
delete this.node_image;
}
+
+ this.minimap_circle.fillColor = _color;
+ var minipos = this.renderer.toMinimapCoords(_model_coords),
+ miniradius = this.renderer.minimap.scale * _baseRadius,
+ minisize = new paper.Size([miniradius, miniradius]);
+ this.minimap_circle.fitBounds(minipos.subtract(minisize), minisize.multiply(2));
Rkns._.each(this.project.get("edges").filter(function (ed) { return ((ed.to === this.model) || (ed.from === this.model));}), function(edge, index, list){
var repr = this.renderer.getRepresentationByModel(edge);
@@ -366,6 +381,7 @@
if (this.renderer.renkan.read_only) {
this.openEditor();
}
+ this.minimap_circle.fillColor = "#ff00fc";
}
Rkns.Renderer.Node.prototype.unselect = function(_newTarget) {
@@ -375,6 +391,7 @@
this.link_button.hide();
this.circle.strokeWidth = 2;
Rkns.$('.Rk-Bin-Item').removeClass("selected");
+ this.minimap_circle.fillColor = this.circle.strokeColor;
}
}
@@ -423,6 +440,7 @@
this.link_button.destroy();
this.circle.remove();
this.title.remove();
+ this.minimap_circle.remove();
if (this.node_image) {
this.node_image.remove();
}
@@ -918,7 +936,6 @@
Rkns.Renderer.NodeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
Rkns.Renderer.NodeEditButton.prototype._init = function() {
- this.renderer.buttons_layer.activate();
this.type = "Node-edit-button";
this.lastSectorInner = 0;
}
@@ -972,7 +989,6 @@
Rkns.Renderer.NodeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
Rkns.Renderer.NodeRemoveButton.prototype._init = function() {
- this.renderer.buttons_layer.activate();
this.type = "Node-remove-button";
this.lastSectorInner = 0;
}
@@ -1027,7 +1043,6 @@
Rkns.Renderer.NodeLinkButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
Rkns.Renderer.NodeLinkButton.prototype._init = function() {
- this.renderer.buttons_layer.activate();
this.type = "Node-link-button";
this.lastSectorInner = 0;
}
@@ -1075,7 +1090,6 @@
Rkns.Renderer.EdgeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
Rkns.Renderer.EdgeEditButton.prototype._init = function() {
- this.renderer.buttons_layer.activate();
this.type = "Edge-edit-button";
this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._EDGE_BUTTON_INNER, Rkns.Renderer._EDGE_BUTTON_OUTER, - 90, 90, 1, this.renderer.renkan.static_url+'img/edit.png', this.renderer.renkan.translate("Edit"));
}
@@ -1118,7 +1132,6 @@
Rkns.Renderer.EdgeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
Rkns.Renderer.EdgeRemoveButton.prototype._init = function() {
- this.renderer.buttons_layer.activate();
this.type = "Edge-remove-button";
this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._EDGE_BUTTON_INNER, Rkns.Renderer._EDGE_BUTTON_OUTER, - 270, -90, 1, this.renderer.renkan.static_url+'img/remove.png', this.renderer.renkan.translate("Remove"));
}
@@ -1175,6 +1188,33 @@
this.edge_layer = new paper.Layer();
this.node_layer = new paper.Layer();
this.buttons_layer = new paper.Layer();
+
+ this.minimap = {
+ background_layer: new paper.Layer(),
+ node_layer: new paper.Layer(),
+ node_group: new paper.Group(),
+ size: new paper.Size( Rkns.Renderer._MINIMAP_WIDTH, Rkns.Renderer._MINIMAP_HEIGHT )
+ }
+
+ this.minimap.background_layer.activate();
+ this.minimap.topleft = paper.view.bounds.bottomRight.subtract(this.minimap.size);
+ this.minimap.rectangle = new paper.Path.Rectangle(this.minimap.topleft.subtract([2,2]), this.minimap.size.add([4,4]));
+ this.minimap.rectangle.fillColor = '#ffffff';
+ this.minimap.rectangle.strokeColor = '#cccccc';
+ this.minimap.rectangle.strokeWidth = 4;
+ this.minimap.offset = new paper.Point(this.minimap.size.divide(2));
+ this.minimap.scale = .25;
+
+ this.node_layer.activate();
+ this.minimap.cliprectangle = new paper.Path.Rectangle(this.minimap.topleft, this.minimap.size);
+ this.minimap.node_group.addChild(this.minimap.cliprectangle);
+ this.minimap.node_group.clipped = true;
+ this.minimap.miniframe = new paper.Path.Rectangle(this.minimap.topleft, this.minimap.size);
+ this.minimap.node_group.addChild(this.minimap.miniframe);
+ this.minimap.miniframe.fillColor = '#f0f0ff';
+ this.minimap.miniframe.strokeColor = '#8080ff';
+ this.minimap.miniframe.strokeWidth = 2;
+
this.bundles = [];
this.click_mode = false;
var _tool = new paper.Tool(),
@@ -1205,29 +1245,38 @@
this.canvas_$.on("drop", function(_event) {
_event.stopPropagation();
_event.preventDefault();
+ if (_this.renkan.read_only) {
+ return;
+ }
var res = {}
Rkns._(_event.originalEvent.dataTransfer.types).each(function(t) {
return res[t] = _event.originalEvent.dataTransfer.getData(t);
});
var newNode = {};
+ if (res["text/x-iri-source-uri"]) {
+ newNode.uri = res["text/x-iri-source-uri"];
+ }
if (res["text/plain"]) {
newNode.description = res["text/plain"].replace(/[\s\n]+/gm,' ').trim();
}
if (res["text/html"]) {
var snippet = Rkns.$('
').html(res["text/html"]);
newNode.image = snippet.find("img").attr("src") || '';
- newNode.uri = snippet.find("a").attr("href");
+ newNode.uri = snippet.find("a").attr("href") || newNode.uri;
newNode.title = snippet.find("[title]").attr("title");
}
if (res["text/uri-list"]) {
newNode.uri = res["text/uri-list"];
}
- if (res["text/x-moz-url"]) {
+ if (res["text/x-moz-url"] && !newNode.title) {
newNode.title = (res["text/x-moz-url"].split("\n")[1] || "").trim();
if (newNode.title === newNode.uri) {
- newNode.title = "";
+ newNode.title = false;
}
}
+ if (res["text/x-iri-source-title"] && !newNode.title) {
+ newNode.title = res["text/x-iri-source-title"];
+ }
var fields = ["title", "description", "uri", "image"];
for (var i = 0; i < fields.length; i++) {
var f = fields[i];
@@ -1307,7 +1356,7 @@
_this.notif_$.hide();
} else {
_this.click_mode = Rkns.Renderer._CLICKMODE_ADDNODE;
- _this.notif_$.html(_renkan.translate("Click on the background canvas to add a node")).fadeIn();
+ _this.notif_$.text(_renkan.translate("Click on the background canvas to add a node")).fadeIn();
}
});
this.$.find(".Rk-AddEdge-Button").click(function() {
@@ -1316,9 +1365,17 @@
_this.notif_$.hide();
} else {
_this.click_mode = Rkns.Renderer._CLICKMODE_STARTEDGE;
- _this.notif_$.html(_renkan.translate("Click on a first node to start the edge")).fadeIn();
+ _this.notif_$.text(_renkan.translate("Click on a first node to start the edge")).fadeIn();
}
});
+ this.$.find(".Rk-Bookmarklet-Button").click(function(){
+ _this.notif_$
+ .text(_renkan.translate("Drag this bookmarklet to your bookmark bar. When on a third-party website, click it to enable drag-and-drop from the website to Renkan."))
+ .fadeIn()
+ .delay(5000)
+ .fadeOut();
+ return false;
+ });
this.$.find(".Rk-TopBar-Button").mouseover(function() {
Rkns.$(this).find(".Rk-TopBar-Tooltip").show();
}).mouseout(function() {
@@ -1328,6 +1385,9 @@
paper.view.onResize = function(_event) {
_this.offset = _this.offset.add(_event.delta.divide(2));
_this.resetCoords();
+ _this.minimap.topleft = paper.view.bounds.bottomRight.subtract(_this.minimap.size)
+ _this.minimap.rectangle.fitBounds(_this.minimap.topleft.subtract([2,2]), _this.minimap.size.add([4,4]));
+ _this.minimap.cliprectangle.fitBounds(_this.minimap.topleft, _this.minimap.size);
_this.redraw();
}
@@ -1372,6 +1432,9 @@
});
this.redraw();
+ window.setInterval(function() {
+ _this.rescaleMinimap()
+ }, 2000);
}
Rkns.Renderer.Scene.prototype.template = Rkns._.template(
@@ -1383,6 +1446,10 @@
+ '
'
+ '
'
+ '
'
+ + '
'
+ '
'
+ '<% } %>'
+ '
'
@@ -1419,8 +1486,14 @@
this.resetCoords();
this.redraw();
}
-/*
-Rkns.Renderer.Scene.prototype.autoScale = function() {
+
+Rkns.Renderer.Scene.prototype.redrawMiniframe = function() {
+ var topleft = this.toMinimapCoords(this.toModelCoords(new paper.Point([0,0]))),
+ bottomright = this.toMinimapCoords(this.toModelCoords(paper.view.bounds.bottomRight));
+ this.minimap.miniframe.fitBounds(topleft, bottomright);
+}
+
+Rkns.Renderer.Scene.prototype.rescaleMinimap = function() {
var nodes = this.renkan.project.get("nodes")
if (nodes.length > 1) {
var _xx = nodes.map(function(_node) { return _node.get("position").x }),
@@ -1429,16 +1502,17 @@
_miny = Math.min.apply(Math, _yy),
_maxx = Math.max.apply(Math, _xx),
_maxy = Math.max.apply(Math, _yy);
- 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);
+ var _scale = Math.min(this.scale * .8 * Rkns.Renderer._MINIMAP_WIDTH / paper.view.bounds.width, this.scale * .8 * Rkns.Renderer._MINIMAP_HEIGHT / paper.view.bounds.height, (Rkns.Renderer._MINIMAP_WIDTH - 2 * Rkns.Renderer._MINIMAP_MARGIN_X) / (_maxx - _minx), (Rkns.Renderer._MINIMAP_HEIGHT - 2 * Rkns.Renderer._MINIMAP_MARGIN_Y) / (_maxy - _miny));
+ this.minimap.offset = this.minimap.size.divide(2).subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(_scale));
+ this.minimap.scale = _scale;
}
if (nodes.length === 1) {
- this.offset = paper.view.center.subtract(new paper.Point([nodes.at(0).get("position").x, nodes.at(0).get("position").y]));
- this.setScale(1);
+ this.minimap.offset = this.minimap.size.divide(2).subtract(new paper.Point([nodes.at(0).get("position").x, nodes.at(0).get("position").y]));
+ this.minimap.scale = .25;
}
+ this.redraw();
}
-*/
+
Rkns.Renderer.Scene.prototype.resetCoords = function(_point) {
_(this.representations).each(function(r) {
r.resetCoords();
@@ -1449,6 +1523,9 @@
return _point.multiply(this.scale).add(this.offset);
}
+Rkns.Renderer.Scene.prototype.toMinimapCoords = function(_point) {
+ return _point.multiply(this.minimap.scale).add(this.minimap.offset).add(this.minimap.topleft);
+}
Rkns.Renderer.Scene.prototype.toModelCoords = function(_point) {
return _point.subtract(this.offset).divide(this.scale);
@@ -1529,6 +1606,7 @@
Rkns._(this.representations).each(function(_representation) {
_representation.redraw();
});
+ this.redrawMiniframe();
paper.view.draw();
}