--- a/client/js/paper-renderer.js Wed Sep 05 14:49:33 2012 +0200
+++ b/client/js/paper-renderer.js Thu Sep 06 17:21:11 2012 +0200
@@ -2,9 +2,9 @@
_MARGIN_X: 80,
_MARGIN_Y: 50,
_MIN_DRAG_DISTANCE: 2,
- _NODE_RADIUS: 15,
- _NODE_BUTTON_INNER: 16,
- _NODE_BUTTON_OUTER: 50,
+ _NODE_RADIUS: 25,
+ _NODE_BUTTON_INNER: 26,
+ _NODE_BUTTON_OUTER: 60,
_EDGE_BUTTON_INNER: 1,
_EDGE_BUTTON_OUTER: 40,
_NODE_FONT_SIZE: 10,
@@ -205,7 +205,6 @@
this.link_button = new Rkns.Renderer.NodeLinkButton(this.renderer, {});
this.link_button.node_representation = this;
this.title.paragraphStyle.justification = 'center';
- this.title.__representation = this;
}
Rkns.Renderer.Node.prototype.redraw = function() {
@@ -213,11 +212,43 @@
this.paper_coords = this.renderer.toPaperCoords(_model_coords);
this.circle.position = this.paper_coords;
this.title.content = this.model.get("title");
- this.title.position = this.paper_coords.add([0, 2 * Rkns.Renderer._NODE_RADIUS]);
+ this.title.position = this.paper_coords.add([0, Rkns.Renderer._NODE_RADIUS + 1.5 *Rkns.Renderer._NODE_FONT_SIZE]);
this.circle.strokeColor = this.model.get("created_by").get("color");
this.edit_button.moveTo(this.paper_coords);
this.remove_button.moveTo(this.paper_coords);
this.link_button.moveTo(this.paper_coords);
+ 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 = .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) {
@@ -236,7 +267,7 @@
this.renderer.removeRepresentationsOfType("editor");
var _editor = this.renderer.addRepresentation("NodeEditor",null);
_editor.node_representation = this;
- _editor.redraw();
+ _editor.draw();
}
Rkns.Renderer.Node.prototype.select = function() {
@@ -264,11 +295,17 @@
}
Rkns.Renderer.Node.prototype.highlight = function() {
- this.circle.fillColor = "#ffffc0";
+ this.circle.fillColor = "#ffff80";
+ if (this.node_image) {
+ this.node_image.opacity = .5;
+ }
}
Rkns.Renderer.Node.prototype.unhighlight = function(_newTarget) {
this.circle.fillColor = "#ffffff";
+ if (this.node_image) {
+ this.node_image.opacity = .9;
+ }
}
Rkns.Renderer.Node.prototype.mouseup = function(_event) {
@@ -285,6 +322,9 @@
this.link_button.destroy();
this.circle.remove();
this.title.remove();
+ if (this.node_image) {
+ this.node_image.remove();
+ }
}
/* */
@@ -309,7 +349,6 @@
fillColor: 'black'
};
this.text.paragraphStyle.justification = 'center';
- this.text.__representation = this;
this.text_angle = 0;
this.arrow_angle = 0;
this.edit_button = new Rkns.Renderer.EdgeEditButton(this.renderer, {});
@@ -360,7 +399,7 @@
this.renderer.removeRepresentationsOfType("editor");
var _editor = this.renderer.addRepresentation("EdgeEditor",null);
_editor.edge_representation = this;
- _editor.redraw();
+ _editor.draw();
}
Rkns.Renderer.Edge.prototype.select = function() {
@@ -503,41 +542,51 @@
+ '<p><label><%=l10n.edit_title%></label><input class="Rk-Edit-Title" type="text" value="<%=node.title%>"/></p>'
+ '<p><label><%=l10n.edit_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><%=l10n.edit_description%></label><textarea class="Rk-Edit-Description"><%=node.description%></textarea></p>'
+ + '<p><label><%=l10n.edit_image%></label><input class="Rk-Edit-Image" type="text" value="<%=node.image%>"/><img class="Rk-Edit-ImgPreview" src="<%=node.image%>" /></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.redraw = function() {
- var _coords = this.node_representation.paper_coords,
- _model = this.node_representation.model;
+Rkns.Renderer.NodeEditor.prototype.draw = function() {
+ var _model = this.node_representation.model;
this.editor_$
.html(this.template({
node: {
title: _model.get("title"),
uri: _model.get("uri"),
description: _model.get("description"),
+ image: _model.get("image") || "",
created_by_color: _model.get("created_by").get("color"),
created_by_title: _model.get("created_by").get("title")
},
l10n: this.renderer.renkan.l10n
- }))
- .show();
- Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 20, this.editor_$);
+ }));
+ this.redraw();
var _this = this;
this.editor_$.find(".Rk-CloseX").click(function() {
_this.renderer.removeRepresentation(_this);
paper.view.draw();
});
this.editor_$.find("input, textarea").bind("keyup change", function() {
- _this.editor_$.find(".Rk-Edit-Goto").attr("href",_this.editor_$.find(".Rk-Edit-URI").val());
+ var _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: _this.editor_$.find(".Rk-Edit-URI").val()
+ uri: _uri,
+ image: _image
}
_model.set(_data);
- paper.view.draw();
+ _this.redraw();
});
this.editor_$.find(".Rk-Edit-Title")[0].focus();
+}
+
+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_$);
+ this.editor_$.show();
paper.view.draw();
}
@@ -578,9 +627,8 @@
+ '<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.redraw = function() {
- var _coords = this.edge_representation.paper_coords,
- _model = this.edge_representation.model;
+Rkns.Renderer.EdgeEditor.prototype.draw = function() {
+ var _model = this.edge_representation.model;
this.editor_$
.html(this.template({
edge: {
@@ -595,9 +643,8 @@
created_by_title: _model.get("created_by").get("title")
},
l10n: this.renderer.renkan.l10n
- }))
- .show();
- Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 5, this.editor_$);
+ }));
+ this.redraw();
var _this = this;
this.editor_$.find(".Rk-CloseX").click(function() {
_this.renderer.removeRepresentation(_this);
@@ -610,8 +657,13 @@
uri: _this.editor_$.find(".Rk-Edit-URI").val()
}
_model.set(_data);
- paper.view.draw();
+ _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_$);
+ this.editor_$.show();
paper.view.draw();
}
@@ -1288,6 +1340,7 @@
uri: _newEl.uri,
title: _newEl.title,
description: _newEl.description,
+ image: _newEl.image,
position: {
x: _coords.x,
y: _coords.y