--- a/client/js/paper-renderer.js Tue Feb 26 19:04:37 2013 +0100
+++ b/client/js/paper-renderer.js Wed Feb 27 19:04:36 2013 +0100
@@ -288,8 +288,9 @@
this.node_image.position = this.paper_coords;
}
}
+ this.last_circle_radius = this.circle_radius;
- this.title.content = this.model.get("title");
+ 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");
this.edit_button.moveTo(this.paper_coords);
@@ -304,9 +305,9 @@
_this.node_image.remove();
}
_this.renderer.node_layer.activate();
- var _ratio = Math.min(1, 2 * _this.circle_radius / _image.width, 2 * _this.circle_radius / _image.height );
+ var _ratio = Math.min(2 / _image.width, 2 / _image.height );
var _raster = new paper.Raster(_image);
- var _clip = new paper.Path.Circle([0, 0], _this.circle_radius);
+ var _clip = new paper.Path.Circle([0, 0], 1);
_raster.scale(_ratio);
_this.node_image = new paper.Group(_clip, _raster);
_this.node_image.opacity = .9;
@@ -314,8 +315,11 @@
* If opacity was set to 1, paper.js would merge all clipping groups in one (known bug).
*/
_this.node_image.clipped = true;
- _this.node_image.position = _this.paper_coords;
_this.node_image.__representation = _this;
+ 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.node_image.fitBounds(bounds);
_clip.__representation = _this;
paper.view.draw();
}
@@ -655,10 +659,10 @@
+ '<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>'
+ + '<% _(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>'
+ '<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"/></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>'
);
@@ -752,6 +756,7 @@
var _newsize = n+(_model.get("size") || 0);
_this.editor_$.find(".Rk-Edit-Size-Value").text((_newsize > 0 ? "+" : "") + _newsize);
_model.set("size", _newsize);
+ paper.view.draw();
}
this.editor_$.find(".Rk-Edit-Size-Down").click(function() {
@@ -807,8 +812,13 @@
'<h2><span class="Rk-CloseX">×</span><%-translate("Edit Edge")%></span></h2>'
+ '<p><label><%-translate("Title:")%></label><input class="Rk-Edit-Title" type="text" value="<%=edge.title%>"/></p>'
+ '<p><label><%-translate("URI:")%></label><input class="Rk-Edit-URI" type="text" value="<%=edge.uri%>"/><a class="Rk-Edit-Goto" href="<%=edge.uri%>" target="_blank"></a></p>'
+ + '<% if (properties.length) { %><p><label><%-translate("Choose from vocabulary:")%></label><select class="Rk-Edit-Vocabulary">'
+ + '<% _(properties).each(function(ontology) { %><option class="Rk-Edit-Vocabulary-Class" value=""><%- translate(ontology.label) %></option>'
+ + '<% _(ontology.properties).each(function(property) { var uri = ontology["base-uri"] + property.uri; %><option class="Rk-Edit-Vocabulary-Property" value="<%- uri %>'
+ + '"<% 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">'
- + '<% 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>'
+ + '<% _(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>'
@@ -843,7 +853,8 @@
created_by_color: _created_by.get("color"),
created_by_title: _created_by.get("title")
},
- translate: this.renderer.renkan.translate
+ translate: this.renderer.renkan.translate,
+ properties: this.renderer.renkan.properties
}));
this.redraw();
var _this = this;
@@ -861,11 +872,21 @@
uri: _this.editor_$.find(".Rk-Edit-URI").val()
}
_model.set(_data);
- _this.redraw();
+ _this.edge_representation.redraw();
+ paper.view.draw();
}).defer();
}).throttle(500);
- this.editor_$.find("input, textarea").bind("keyup change paste", onFieldChange);
+ this.editor_$.find("input").bind("keyup change paste", onFieldChange);
+ this.editor_$.find(".Rk-Edit-Vocabulary").change(function() {
+ var e = $(this),
+ v = e.val();
+ if (v) {
+ _this.editor_$.find(".Rk-Edit-Title").val(e.find(":selected").text());
+ _this.editor_$.find(".Rk-Edit-URI").val(v);
+ onFieldChange();
+ }
+ });
this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover(
function() { _this.editor_$.find(".Rk-Edit-ColorPicker").show(); },
function() { _this.editor_$.find(".Rk-Edit-ColorPicker").hide(); }
@@ -1177,9 +1198,6 @@
this.canvas_$.dblclick(function(_event) {
_this.onDoubleClick(_event);
});
- this.canvas_$.mouseenter(function(_event) {
- _this.onMouseEnter(_event);
- });
this.canvas_$.on("dragover", function(_event) {
_event.stopPropagation();
_event.preventDefault();
@@ -1199,6 +1217,7 @@
var snippet = Rkns.$('<div>').html(res["text/html"]);
newNode.image = snippet.find("img").attr("src") || '';
newNode.uri = snippet.find("a").attr("href");
+ newNode.title = snippet.find("[title]").attr("title");
}
if (res["text/uri-list"]) {
newNode.uri = res["text/uri-list"];
@@ -1209,8 +1228,14 @@
newNode.title = "";
}
}
+ var fields = ["title", "description", "uri", "image"];
+ for (var i = 0; i < fields.length; i++) {
+ var f = fields[i];
+ if (res["text/x-iri-" + f]) {
+ newNode[f] = res["text/x-iri-" + f];
+ }
+ }
if (newNode.title || newNode.description || newNode.uri) {
- console.log(newNode);
var _off = _this.canvas_$.offset(),
_point = new paper.Point([
_event.originalEvent.pageX - _off.left,
@@ -1658,31 +1683,3 @@
}
paper.view.draw();
}
-
-Rkns.Renderer.Scene.prototype.onMouseEnter = function(_event) {
- var _newEl = this.renkan.selected_bin_item;
- if (_newEl && !this.renkan.read_only) {
- var _off = this.canvas_$.offset(),
- _point = new paper.Point([
- _event.pageX - _off.left,
- _event.pageY - _off.top
- ]),
- _coords = this.toModelCoords(_point),
- _data = {
- id: Rkns.Utils.getUID('node'),
- created_by: this.renkan.current_user,
- uri: _newEl.uri,
- title: _newEl.title,
- description: _newEl.description,
- image: _newEl.image,
- position: {
- x: _coords.x,
- y: _coords.y
- }
- };
- var _node = this.renkan.project.addNode(_data);
- this.renkan.selected_bin_item = null;
- this.is_dragging = true;
- this.click_target = this.getRepresentationByModel(_node);
- }
-}
\ No newline at end of file