--- a/client/js/paper-renderer.js Mon Mar 25 05:55:28 2013 +0100
+++ b/client/js/paper-renderer.js Mon Mar 25 17:52:14 2013 +0100
@@ -11,10 +11,11 @@
_EDGE_DISTANCE: 3,
_NODE_MAX_CHAR: 50,
_EDGE_MAX_CHAR: 40,
- _ARROW_LENGTH: 16,
- _ARROW_WIDTH: 8,
+ _ARROW_LENGTH: 18,
+ _ARROW_WIDTH: 12,
_EDITOR_ARROW_LENGTH : 20,
_EDITOR_ARROW_WIDTH : 40,
+ _EDITOR_WIDTH : 275,
_EDITOR_MARGIN : 15,
_EDITOR_PADDING : 10,
_EDITOR_GRADIENT : new paper.Gradient(['#f0f0f0', '#d0d0d0']),
@@ -40,6 +41,9 @@
}
Rkns.Renderer.Utils = {
+ shortenText : function(_text, _maxlength) {
+ return (_text.length > _maxlength ? (_text.substr(0,_maxlength) + '…') : _text);
+ },
drawEditBox : function(_coords, _path, _width, _xmargin, _selector) {
_selector.css({
width: (_width - 2* Rkns.Renderer._EDITOR_PADDING),
@@ -301,7 +305,7 @@
this.last_circle_radius = this.circle_radius;
var _text = this.model.get("title") || this.renderer.renkan.translate("(untitled)");
- this.title.content = _text.length > Rkns.Renderer._NODE_MAX_CHAR ? (_text.substr(0,Rkns.Renderer._NODE_MAX_CHAR) + '…') : _text;
+ this.title.content = Rkns.Renderer.Utils.shortenText(_text, Rkns.Renderer._NODE_MAX_CHAR);
this.title.position = this.paper_coords.add([0, this.circle_radius + 1.5 *Rkns.Renderer._NODE_FONT_SIZE]);
var _color = this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color");
@@ -499,6 +503,8 @@
}
Rkns.Renderer.Edge.prototype.redraw = function() {
+ this.from_representation = this.renderer.getRepresentationByModel(this.model.get("from"));
+ this.to_representation = this.renderer.getRepresentationByModel(this.model.get("to"));
var _p0a = this.from_representation.paper_coords,
_p1a = this.to_representation.paper_coords,
_v = _p1a.subtract(_p0a),
@@ -534,7 +540,7 @@
}
this.text.rotate(_a - this.text_angle);
var _text = this.model.get("title");
- this.text.content = _text.length > Rkns.Renderer._EDGE_MAX_CHAR ? (_text.substr(0,Rkns.Renderer._EDGE_MAX_CHAR) + '…') : _text;
+ this.text.content = Rkns.Renderer.Utils.shortenText(_text, Rkns.Renderer._EDGE_MAX_CHAR);
this.text.position = this.paper_coords.add(_textdelta);
this.text_angle = _a;
this.edit_button.moveTo(this.paper_coords);
@@ -702,18 +708,19 @@
+ '<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">'
- + '<% _(Rkns.pickerColors).each(function(c) { %><li data-color="<%=c%>" style="background: <%=c%>"></li><% }); %></ul><span class="Rk-Edit-ColorPicker-Text">Choose color</span></div></div>'
+ + '<% _(Rkns.pickerColors).each(function(c) { %><li data-color="<%=c%>" style="background: <%=c%>"></li><% }); %></ul><span class="Rk-Edit-ColorPicker-Text"><%- translate("Choose color") %></span></div></div>'
+ '<img class="Rk-Edit-ImgPreview" src="<%-node.image || node.image_placeholder%>" />'
+ '<p><label><%-translate("Image URL:")%></label><input class="Rk-Edit-Image" type="text" value="<%-node.image%>"/></p>'
+ '<p><label><%-translate("Choose Image File:")%></label><input class="Rk-Edit-Image-File" type="file" accept="image/*"/></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><%- Rkns.Renderer.Utils.shortenText(node.created_by_title, 25) %></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>'
+ '<h2><span class="Rk-CloseX">×</span><span class="Rk-UserColor" style="background:<%-node.color%>;"></span>'
+ + '<span class="Rk-Display-Title"><% if (node.uri) { %><a href="<%-node.uri%>" target="_blank"><% } %><%-node.title%><% if (node.uri) { %></a><% } %></span></h2>'
+ + '<% if (node.uri) { %><p class="Rk-Display-URI"><a href="<%-node.uri%>" target="_blank"><%-node.short_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><%- Rkns.Renderer.Utils.shortenText(node.created_by_title, 25) %></p>'
);
Rkns.Renderer.NodeEditor.prototype.draw = function() {
@@ -727,6 +734,7 @@
node: {
title: _model.get("title"),
uri: _model.get("uri"),
+ short_uri: Rkns.Renderer.Utils.shortenText((_model.get("uri") || "").replace(/^(https?:\/\/)?(www\.)?/,'').replace(/\/$/,''),40),
description: _model.get("description"),
image: _model.get("image") || "",
image_placeholder: _image_placeholder,
@@ -793,6 +801,7 @@
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"));
+ paper.view.draw();
});
function shiftSize(n) {
@@ -818,7 +827,7 @@
Rkns.Renderer.NodeEditor.prototype.redraw = function() {
var _coords = this.node_representation.paper_coords;
- Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 20, this.editor_$);
+ Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, Rkns.Renderer._EDITOR_WIDTH, 20, this.editor_$);
this.editor_$.show();
paper.view.draw();
}
@@ -861,19 +870,21 @@
+ '"<% if (uri === edge.uri) { %> selected<% } %>><%- translate(property.label) %></option>'
+ '<% }) %><% }) %></select></p><% } %>'
+ '<div class="Rk-Editor-p"><span class="Rk-Editor-Label"><%-translate("Edge color:")%></span><div class="Rk-Edit-ColorPicker-Wrapper"><span class="Rk-Edit-Color" style="background:<%-edge.color%>;"><span class="Rk-Edit-ColorTip"></span></span><ul class="Rk-Edit-ColorPicker">'
- + '<% _(Rkns.pickerColors).each(function(c) { %><li data-color="<%=c%>" style="background: <%=c%>"></li><% }); %></ul><span class="Rk-Edit-ColorPicker-Text">Choose color</span></div></div>'
- + '<p><span class="Rk-Editor-Label"><%-translate("From:")%></span><span class="Rk-UserColor" style="background:<%-edge.from_color%>;"></span><%-edge.from_title%></p>'
- + '<p><span class="Rk-Editor-Label"><%-translate("To:")%></span><span class="Rk-UserColor" style="background:<%-edge.to_color%>;"></span><%-edge.to_title%></p>'
- + '<p><span class="Rk-Editor-Label"><%-translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-edge.created_by_color%>;"></span><%-edge.created_by_title%></p>'
+ + '<% _(Rkns.pickerColors).each(function(c) { %><li data-color="<%=c%>" style="background: <%=c%>"></li><% }); %></ul><span class="Rk-Edit-ColorPicker-Text"><%- translate("Choose color") %></span></div></div>'
+ + '<p><span class="Rk-Edit-Direction"><%- translate("Change edge direction") %></span></p>'
+ + '<p><span class="Rk-Editor-Label"><%-translate("From:")%></span><span class="Rk-UserColor" style="background:<%-edge.from_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(edge.from_title, 25) %></p>'
+ + '<p><span class="Rk-Editor-Label"><%-translate("To:")%></span><span class="Rk-UserColor" style="background:<%-edge.to_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(edge.to_title, 25) %></p>'
+ + '<p><span class="Rk-Editor-Label"><%-translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-edge.created_by_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(edge.created_by_title, 25) %></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>'
+ '<h2><span class="Rk-CloseX">×</span><span class="Rk-UserColor" style="background:<%-edge.color%>;"></span>'
+ + '<span class="Rk-Display-Title"><% if (edge.uri) { %><a href="<%-edge.uri%>" target="_blank"><% } %><%-edge.title%><% if (edge.uri) { %></a><% } %></span></h2>'
+ + '<% if (edge.uri) { %><p class="Rk-Display-URI"><a href="<%-edge.uri%>" target="_blank"><%-edge.short_uri%></a></p><% } %>'
+ '<p><%-edge.description%></p>'
- + '<p><span class="Rk-Editor-Label"><%-translate("From:")%></span><span class="Rk-UserColor" style="background:<%-edge.from_color%>;"></span><%-edge.from_title%></p>'
- + '<p><span class="Rk-Editor-Label"><%-translate("To:")%></span><span class="Rk-UserColor" style="background:<%-edge.to_color%>;"></span><%-edge.to_title%></p>'
- + '<p><span class="Rk-Editor-Label"><%-translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-edge.created_by_color%>;"></span><%-edge.created_by_title%></p>'
+ + '<p><span class="Rk-Editor-Label"><%-translate("From:")%></span><span class="Rk-UserColor" style="background:<%-edge.from_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(edge.from_title, 25) %></p>'
+ + '<p><span class="Rk-Editor-Label"><%-translate("To:")%></span><span class="Rk-UserColor" style="background:<%-edge.to_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(edge.to_title, 25) %></p>'
+ + '<p><span class="Rk-Editor-Label"><%-translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-edge.created_by_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(edge.created_by_title, 25) %></p>'
);
Rkns.Renderer.EdgeEditor.prototype.draw = function() {
@@ -887,6 +898,7 @@
edge: {
title: _model.get("title"),
uri: _model.get("uri"),
+ short_uri: Rkns.Renderer.Utils.shortenText((_model.get("uri") || "").replace(/^(https?:\/\/)?(www\.)?/,'').replace(/\/$/,''),40),
description: _model.get("description"),
color: _model.get("color") || _created_by.get("color"),
from_title: _from_model.get("title"),
@@ -915,7 +927,6 @@
uri: _this.editor_$.find(".Rk-Edit-URI").val()
}
_model.set(_data);
- _this.edge_representation.redraw();
paper.view.draw();
}).defer();
}).throttle(500);
@@ -930,6 +941,13 @@
onFieldChange();
}
});
+ this.editor_$.find(".Rk-Edit-Direction").click(function() {
+ _model.set({
+ from: _model.get("to"),
+ to: _model.get("from")
+ });
+ _this.draw();
+ });
this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover(
function() { _this.editor_$.find(".Rk-Edit-ColorPicker").show(); },
function() { _this.editor_$.find(".Rk-Edit-ColorPicker").hide(); }
@@ -939,14 +957,14 @@
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();
+ paper.view.draw();
});
}
}
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_$);
+ Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, Rkns.Renderer._EDITOR_WIDTH, 5, this.editor_$);
this.editor_$.show();
paper.view.draw();
}