renkan: comparison client/js/paper-renderer.js

Mercurial Mercurial > renkan / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

client/js/paper-renderer.js

changeset 68	803dbeb7c919
parent 67	d341117f9370
child 69	f0873867143a

equal deleted inserted replaced

-:d341117f9370
+:803dbeb7c919
 	this.circle.position = this.paper_coords;
 	if (this.node_image) {
 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);
 this.remove_button.moveTo(this.paper_coords);
 this.link_button.moveTo(this.paper_coords);
 _image.onload = function() {
 if (_this.node_image) {
 _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;
 /* This is a workaround to allow clipping at group level
 * 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();
 }
 _image.src = _img;
 }
 + '<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>'
++ '<% _(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>'
 );
 Rkns.Renderer.NodeEditor.prototype.readOnlyTemplate = Rkns._.template(
 '<h2><span class="Rk-CloseX">&times;</span><span class="Rk-UserColor" style="background:<%=node.color%>;"></span><%-node.title%></span></h2>'
 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);
+			paper.view.draw();
 }
 this.editor_$.find(".Rk-Edit-Size-Down").click(function() {
 	shiftSize(-1);
 	return false;
 Rkns.Renderer.EdgeEditor.prototype.template = Rkns._.template(
 '<h2><span class="Rk-CloseX">&times;</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>'
 );
 from_color: _from_model.get("color") || (_from_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color"),
 to_color: _to_model.get("color") || (_to_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color"),
 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;
 this.editor_$.find(".Rk-CloseX").click(function() {
 _this.renderer.removeRepresentation(_this);
 	            var _data = {
 	                title: _this.editor_$.find(".Rk-Edit-Title").val(),
 	                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(); }
 );
 this.editor_$.find(".Rk-Edit-ColorPicker li").hover(
 _this.onScroll(_event, _delta);
 });
 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();
 })
 this.canvas_$.on("drop", function(_event) {
 	}
 	if (res["text/html"]) {
 		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"];
 	}
 	if (res["text/x-moz-url"]) {
 		newNode.title = (res["text/x-moz-url"].split("\n")[1] || "").trim();
 		if (newNode.title === newNode.uri) {
 			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,
 _event.originalEvent.pageY - _off.top
 ]),
 _node = this.renkan.project.addNode(_data);
 this.getRepresentationByModel(_node).openEditor();
 }
 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);
-}
-}

renkan