--- a/client/js/paper-renderer.js Tue Feb 26 17:04:24 2013 +0100
+++ b/client/js/paper-renderer.js Tue Feb 26 19:04:37 2013 +0100
@@ -2,10 +2,9 @@
_MARGIN_X: 80,
_MARGIN_Y: 50,
_MIN_DRAG_DISTANCE: 2,
- _NODE_RADIUS: 25,
- _NODE_BUTTON_INNER: 26,
- _NODE_BUTTON_OUTER: 60,
- _EDGE_BUTTON_INNER: 1,
+ _NODE_SIZE_BASE: 25,
+ _NODE_BUTTON_WIDTH: 40,
+ _EDGE_BUTTON_INNER: 2,
_EDGE_BUTTON_OUTER: 40,
_NODE_FONT_SIZE: 10,
_EDGE_FONT_SIZE: 9,
@@ -22,6 +21,7 @@
_CLICKMODE_STARTEDGE : 2,
_CLICKMODE_ENDEDGE : 3,
_IMAGE_MAX_KB : 500,
+ _NODE_SIZE_STEP: Math.LN2/4,
_USER_PLACEHOLDER : {
color: "#000000",
title: "(unknown user)",
@@ -99,31 +99,18 @@
_centerRads = (_startRads + _endRads) / 2,
_centerX = Math.cos(_centerRads) * _centerR,
_centerY = Math.sin(_centerRads) * _centerR,
+ _centerXIn = Math.cos(_centerRads) * _inR,
+ _centerXOut = Math.cos(_centerRads) * _outR,
+ _centerYIn = Math.sin(_centerRads) * _inR,
+ _centerYOut = Math.sin(_centerRads) * _outR,
_textX = Math.cos(_centerRads) * (_outR + 3),
_textY = Math.sin(_centerRads) * (_outR + 3),
_segments = [];
- _segments.push([[_startXIn, _startYIn], [0, 0], [ _kin * _startdx, _kin * _startdy ]]);
- for (var i = 1; i < 4; i++) {
- var _rads = i * _span / 4 + _startRads,
- _dx = - Math.sin(_rads),
- _dy = Math.cos(_rads),
- _x = Math.cos(_rads) * _inR,
- _y = Math.sin(_rads) * _inR;
- _segments.push([[_x, _y], [ - _kin * _dx, - _kin * _dy], [ _kin * _dx, _kin * _dy ]]);
- }
- _segments.push([[_endXIn, _endYIn], [ - _kin * _enddx, - _kin * _enddy ], [0,0]]);
- _segments.push([[_endXOut, _endYOut], [ 0,0 ], [ - _kout * _enddx, - _kout * _enddy ]]);
- for (var i = 3; i > 0; i--) {
- var _rads = i * _span / 4 + _startRads,
- _dx = - Math.sin(_rads),
- _dy = Math.cos(_rads),
- _x = Math.cos(_rads) * _outR,
- _y = Math.sin(_rads) * _outR;
- _segments.push([[_x, _y], [ _kout * _dx, _kout * _dy], [ - _kout * _dx, - _kout * _dy ]]);
- }
- _segments.push([[_startXOut, _startYOut], [ _kout * _startdx, _kout * _startdy ], [0, 0]]);
var _path = new paper.Path();
- _path.add.apply(_path, _segments);
+ _path.add([_startXIn, _startYIn]);
+ _path.arcTo([_centerXIn, _centerYIn], [_endXIn, _endYIn]);
+ _path.lineTo([_endXOut, _endYOut]);
+ _path.arcTo([_centerXOut, _centerYOut], [_startXOut, _startYOut]);
_path.fillColor = "#333333";
_path.opacity = .5;
_path.closed = true;
@@ -251,7 +238,7 @@
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 = new paper.Path.Circle([0, 0], 1);
this.circle.fillColor = '#ffffff';
this.circle.__representation = this;
this.circle.strokeWidth = 2;
@@ -272,7 +259,7 @@
this.link_button = new Rkns.Renderer.NodeLinkButton(this.renderer, null);
this.link_button.node_representation = this;
}
-
+ this.last_circle_radius = 1;
this.title.paragraphStyle.justification = 'center';
}
@@ -281,9 +268,29 @@
var _model_coords = new paper.Point(this.model.get("position"));
this.paper_coords = this.renderer.toPaperCoords(_model_coords);
}
- this.circle.position = this.paper_coords;
+ this.circle_radius = Rkns.Renderer._NODE_SIZE_BASE * Math.exp((this.model.get("size") || 0) * Rkns.Renderer._NODE_SIZE_STEP) * this.renderer.scale;
+ if (this.last_circle_radius !== this.circle_radius) {
+ if (!this.renderer.renkan.read_only) {
+ this.edit_button.setSectorSize();
+ this.remove_button.setSectorSize();
+ this.link_button.setSectorSize();
+ }
+ var square = new paper.Size(this.circle_radius, this.circle_radius),
+ topleft = this.paper_coords.subtract(square),
+ bounds = new paper.Rectangle(topleft, square.multiply(2));
+ this.circle.fitBounds(bounds);
+ if (this.node_image) {
+ this.node_image.fitBounds(bounds);
+ }
+ } else {
+ this.circle.position = this.paper_coords;
+ if (this.node_image) {
+ this.node_image.position = this.paper_coords;
+ }
+ }
+
this.title.content = this.model.get("title");
- this.title.position = this.paper_coords.add([0, Rkns.Renderer._NODE_RADIUS + 1.5 *Rkns.Renderer._NODE_FONT_SIZE]);
+ 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");
this.edit_button.moveTo(this.paper_coords);
this.remove_button.moveTo(this.paper_coords);
@@ -297,9 +304,9 @@
_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 _ratio = Math.min(1, 2 * _this.circle_radius / _image.width, 2 * _this.circle_radius / _image.height );
var _raster = new paper.Raster(_image);
- var _clip = new paper.Path.Circle([0, 0], Rkns.Renderer._NODE_RADIUS);
+ var _clip = new paper.Path.Circle([0, 0], _this.circle_radius);
_raster.scale(_ratio);
_this.node_image = new paper.Group(_clip, _raster);
_this.node_image.opacity = .9;
@@ -315,13 +322,9 @@
_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;
- }
+ if (this.node_image && !this.img) {
+ this.node_image.remove();
+ delete this.node_image;
}
Rkns._.each(this.project.get("edges").filter(function (ed) { return ((ed.to === this.model) || (ed.from === this.model));}), function(edge, index, list){
@@ -627,7 +630,7 @@
Rkns.Renderer.NodeEditor = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
Rkns.Renderer.NodeEditor.prototype._init = function() {
- this.renderer.overlay_layer.activate();
+ this.renderer.buttons_layer.activate();
this.type = "editor";
this.editor_block = new paper.Path();
var _pts = Rkns._(Rkns._.range(8)).map(function() {return [0,0]});
@@ -650,6 +653,7 @@
+ '<p><label><%-translate("Title:")%></label><input class="Rk-Edit-Title" type="text" value="<%=node.title%>"/></p>'
+ '<p><label><%-translate("URI:")%></label><input class="Rk-Edit-URI" type="text" value="<%=node.uri%>"/><a class="Rk-Edit-Goto" href="<%=node.uri%>" target="_blank"></a></p>'
+ '<p><label><%-translate("Description:")%></label><textarea class="Rk-Edit-Description"><%=node.description%></textarea></p>'
+ + '<p><span class="Rk-Editor-Label"><%-translate("Size:")%></span><a href="#" class="Rk-Edit-Size-Down">-</a><span class="Rk-Edit-Size-Value"><%=node.size%></span><a href="#" class="Rk-Edit-Size-Up">+</a></p>'
+ '<div class="Rk-Editor-p"><span class="Rk-Editor-Label"><%-translate("Node color:")%></span><div class="Rk-Edit-ColorPicker-Wrapper"><span class="Rk-Edit-Color" style="background:<%=node.color%>;"><span class="Rk-Edit-ColorTip"></span></span><ul class="Rk-Edit-ColorPicker">'
+ '<% print(Rkns.pickerColors.reduce(function(m,c) { return m + "<li data-color=\'" + c + "\' style=\'background: " + c + "\'></li>"},"")); %></ul><span class="Rk-Edit-ColorPicker-Text">Choose color</span></div></div>'
+ '<img class="Rk-Edit-ImgPreview" src="<%=node.image || node.image_placeholder%>" />'
@@ -662,13 +666,15 @@
'<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><span class="Rk-Editor-Label"><%-translate("Created by:")%> </span><span class="Rk-UserColor" style="background:<%=node.created_by_color%>;"></span><%=node.created_by_title%></p>'
+ + '<p><span class="Rk-Editor-Label"><%-translate("Created by:")%></span><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,
- _template = (this.renderer.renkan.read_only ? this.readOnlyTemplate : this.template);
+ _template = (this.renderer.renkan.read_only ? this.readOnlyTemplate : this.template),
+ _image_placeholder = this.renderer.renkan.static_url + "img/image-placeholder.png",
+ _size = (_model.get("size") || 0);
this.editor_$
.html(_template({
node: {
@@ -676,10 +682,11 @@
uri: _model.get("uri"),
description: _model.get("description"),
image: _model.get("image") || "",
- image_placeholder: this.renderer.renkan.static_url + "img/image-placeholder.png",
+ image_placeholder: _image_placeholder,
color: _model.get("color") || _created_by.get("color"),
created_by_color: _created_by.get("color"),
- created_by_title: _created_by.get("title")
+ created_by_title: _created_by.get("title"),
+ size: (_size > 0 ? "+" : "") + _size
},
translate: this.renderer.renkan.translate
}));
@@ -695,7 +702,7 @@
Rkns._(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-ImgPreview").attr("src", _image || _image_placeholder);
_this.editor_$.find(".Rk-Edit-Goto").attr("href",_uri);
var _data = {
title: _this.editor_$.find(".Rk-Edit-Title").val(),
@@ -739,7 +746,21 @@
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();
+ });
+
+ function shiftSize(n) {
+ var _newsize = n+(_model.get("size") || 0);
+ _this.editor_$.find(".Rk-Edit-Size-Value").text((_newsize > 0 ? "+" : "") + _newsize);
+ _model.set("size", _newsize);
+ }
+
+ this.editor_$.find(".Rk-Edit-Size-Down").click(function() {
+ shiftSize(-1);
+ return false;
+ });
+ this.editor_$.find(".Rk-Edit-Size-Up").click(function() {
+ shiftSize(1);
+ return false;
});
}
this.editor_$.find("img").load(function() {
@@ -764,7 +785,7 @@
Rkns.Renderer.EdgeEditor = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
Rkns.Renderer.EdgeEditor.prototype._init = function() {
- this.renderer.overlay_layer.activate();
+ this.renderer.buttons_layer.activate();
this.type = "editor";
this.editor_block = new paper.Path();
var _pts = Rkns._(Rkns._.range(8)).map(function() {return [0,0]});
@@ -876,9 +897,20 @@
Rkns.Renderer.NodeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
Rkns.Renderer.NodeEditButton.prototype._init = function() {
- this.renderer.overlay_layer.activate();
+ this.renderer.buttons_layer.activate();
this.type = "Node-edit-button";
- this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._NODE_BUTTON_INNER, Rkns.Renderer._NODE_BUTTON_OUTER, - 90, 30, 1, this.renderer.renkan.static_url+'img/edit.png', this.renderer.renkan.translate("Edit"));
+ this.lastSectorInner = 0;
+}
+
+Rkns.Renderer.NodeEditButton.prototype.setSectorSize = function() {
+ var sectorInner = this.node_representation.circle_radius;
+ if (sectorInner !== this.lastSectorInner) {
+ if (this.sector) {
+ this.sector.destroy();
+ }
+ this.sector = Rkns.Renderer.Utils.sector(this, 1 + sectorInner, Rkns.Renderer._NODE_BUTTON_WIDTH + sectorInner, - 90, 30, 1, this.renderer.renkan.static_url+'img/edit.png', this.renderer.renkan.translate("Edit"));
+ this.lastSectorInner = sectorInner;
+ }
}
Rkns.Renderer.NodeEditButton.prototype.moveTo = function(_pos) {
@@ -919,9 +951,20 @@
Rkns.Renderer.NodeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
Rkns.Renderer.NodeRemoveButton.prototype._init = function() {
- this.renderer.overlay_layer.activate();
+ this.renderer.buttons_layer.activate();
this.type = "Node-remove-button";
- this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._NODE_BUTTON_INNER, Rkns.Renderer._NODE_BUTTON_OUTER, -210, -90, 1, this.renderer.renkan.static_url+'img/remove.png', this.renderer.renkan.translate("Remove"));
+ this.lastSectorInner = 0;
+}
+
+Rkns.Renderer.NodeRemoveButton.prototype.setSectorSize = function() {
+ var sectorInner = this.node_representation.circle_radius;
+ if (sectorInner !== this.lastSectorInner) {
+ if (this.sector) {
+ this.sector.destroy();
+ }
+ this.sector = Rkns.Renderer.Utils.sector(this, 1 + sectorInner, Rkns.Renderer._NODE_BUTTON_WIDTH + sectorInner, - 210, - 90, 1, this.renderer.renkan.static_url+'img/remove.png', this.renderer.renkan.translate("Remove"));
+ this.lastSectorInner = sectorInner;
+ }
}
Rkns.Renderer.NodeRemoveButton.prototype.moveTo = function(_pos) {
@@ -963,9 +1006,20 @@
Rkns.Renderer.NodeLinkButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
Rkns.Renderer.NodeLinkButton.prototype._init = function() {
- this.renderer.overlay_layer.activate();
+ this.renderer.buttons_layer.activate();
this.type = "Node-link-button";
- this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._NODE_BUTTON_INNER, Rkns.Renderer._NODE_BUTTON_OUTER, 30, 150, 1, this.renderer.renkan.static_url+'img/link.png', this.renderer.renkan.translate("Link to another node"));
+ this.lastSectorInner = 0;
+}
+
+Rkns.Renderer.NodeLinkButton.prototype.setSectorSize = function() {
+ var sectorInner = this.node_representation.circle_radius;
+ if (sectorInner !== this.lastSectorInner) {
+ if (this.sector) {
+ this.sector.destroy();
+ }
+ this.sector = Rkns.Renderer.Utils.sector(this, 1 + sectorInner, Rkns.Renderer._NODE_BUTTON_WIDTH + sectorInner, 30, 150, 1, this.renderer.renkan.static_url+'img/link.png', this.renderer.renkan.translate("Link to another node"));
+ this.lastSectorInner = sectorInner;
+ }
}
Rkns.Renderer.NodeLinkButton.prototype.moveTo = function(_pos) {
@@ -1000,7 +1054,7 @@
Rkns.Renderer.EdgeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
Rkns.Renderer.EdgeEditButton.prototype._init = function() {
- this.renderer.overlay_layer.activate();
+ 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"));
}
@@ -1043,7 +1097,7 @@
Rkns.Renderer.EdgeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
Rkns.Renderer.EdgeRemoveButton.prototype._init = function() {
- this.renderer.overlay_layer.activate();
+ 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"));
}
@@ -1099,7 +1153,7 @@
this.selected_target = null;
this.edge_layer = new paper.Layer();
this.node_layer = new paper.Layer();
- this.overlay_layer = new paper.Layer();
+ this.buttons_layer = new paper.Layer();
this.bundles = [];
this.click_mode = false;
var _tool = new paper.Tool(),
@@ -1340,7 +1394,7 @@
this.resetCoords();
this.redraw();
}
-
+/*
Rkns.Renderer.Scene.prototype.autoScale = function() {
var nodes = this.renkan.project.get("nodes")
if (nodes.length > 1) {
@@ -1359,7 +1413,7 @@
this.setScale(1);
}
}
-
+*/
Rkns.Renderer.Scene.prototype.resetCoords = function(_point) {
_(this.representations).each(function(r) {
r.resetCoords();