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 110	55454c900296
parent 105	810a1c1015df
child 111	fbe12f54453a

equal deleted inserted replaced

-:b6b20e8c4a1a
+:55454c900296
 _NODE_FONT_SIZE: 10,
 _EDGE_FONT_SIZE: 9,
 _EDGE_DISTANCE: 3,
 _NODE_MAX_CHAR: 50,
 _EDGE_MAX_CHAR: 40,
-_ARROW_LENGTH: 16,
+_ARROW_LENGTH: 18,
-_ARROW_WIDTH: 8,
+_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']),
 _CLICKMODE_ADDNODE : 1,
 _CLICKMODE_STARTEDGE : 2,
 	    + "</p>'.replace(/_/g,String.fromCharCode(32));b.appendChild(d);e=[{r:/https?:\\/\\/[^\\/]*twitter\\.com\\//,s:'.tweet',n:'twitter'},{r:/https?:\\/\\/[^\\/]*google\\.[^\\/]+\\//,s:'.g',n:'google'},{r:/https?:\\/\\/[^\\/]*lemonde\\.fr\\//,s:'[data-vr-contentbox]',n:'lemonde'}];f=false;e.forEach(function(g){if(g.r.test(c)){f=g;}});if(f){h=function(){Array.prototype.forEach.call(a.querySelectorAll(f.s),function(i){i[j]=true;k=i.style;k.borderWidth='2px';k.borderColor='#909';k.borderStyle='solid';k.backgroundColor='rgba(200,0,180,.1)';})};window.setInterval(h,500);h();};a.addEventListener('dragstart',function(k){l=k.dataTransfer;l.setData(m+'source-uri',c);l.setData(m+'source-title',a.title);n=k.target;if(f){o=n;while(!o.attributes[j]){o=o.parentNode;if(o==b){break;}}}if(f&&o.attributes[j]){p=o.cloneNode(true);l.setData(m+'specific-site',f.n)}else{q=a.getSelection();if(q.type==='Range'||!q.type){p=q.getRangeAt(0).cloneContents();}else{p=n.cloneNode();}}r=a.createElement('div');r.appendChild(p);l.setData('text/x-iri-selected-text',r.textContent.trim());l.setData('text/x-iri-selected-html',r.innerHTML);},false);})();"
 }
 }
 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),
 })
 var _height = _selector.outerHeight() + 2* Rkns.Renderer._EDITOR_PADDING,
 }
 }
 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");
 this.circle.strokeColor = _color;
 this.edit_button.moveTo(this.paper_coords);
 this.remove_button.edge_representation = this;
 }
 }
 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),
 _r = _v.length,
 _u = _v.divide(_r),
 _a += 180;
 _textdelta = _textdelta.multiply(-1);
 }
 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);
 this.remove_button.moveTo(this.paper_coords);
 }
 + '<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">'
-+ '<% _(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">&times;</span><span class="Rk-UserColor" style="background:<%-node.color%>;"></span><%-node.title%></span></h2>'
+'<h2><span class="Rk-CloseX">&times;</span><span class="Rk-UserColor" style="background:<%-node.color%>;"></span>'
-+ '<p><a href="<%-node.uri%>" target="_blank"><%-node.uri%></a></p>'
++ '<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() {
 var _model = this.node_representation.model,
 _created_by = _model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER,
 this.editor_$
 .html(_template({
 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,
 color: _model.get("color") || _created_by.get("color"),
 created_by_color: _created_by.get("color"),
 this.editor_$.find(".Rk-Edit-ColorPicker li").hover(
 function() { _this.editor_$.find(".Rk-Edit-Color").css("background", $(this).attr("data-color")); },
 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) {
 	var _newsize = n+(_model.get("size") || 0);
 	_this.editor_$.find(".Rk-Edit-Size-Value").text((_newsize > 0 ? "+" : "") + _newsize);
 });
 }
 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();
 }
 Rkns.Renderer.NodeEditor.prototype.destroy = function() {
 + '<% _(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">'
-+ '<% _(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>'
-+ '<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-Edit-Direction"><%- translate("Change edge direction") %></span></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("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("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("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">&times;</span><span class="Rk-UserColor" style="background:<%-edge.color%>;"></span><%- edge.title %></span></h2>'
+'<h2><span class="Rk-CloseX">&times;</span><span class="Rk-UserColor" style="background:<%-edge.color%>;"></span>'
-+ '<p><a href="<%-edge.uri%>" target="_blank"><%-edge.uri%></a></p>'
++ '<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("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><%-edge.to_title%></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><%-edge.created_by_title%></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() {
 var _model = this.edge_representation.model,
 _from_model = _model.get("from"),
 this.editor_$
 .html(_template({
 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"),
 to_title: _to_model.get("title"),
 from_color: _from_model.get("color") || (_from_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color"),
 	            var _data = {
 	                title: _this.editor_$.find(".Rk-Edit-Title").val(),
 	                uri: _this.editor_$.find(".Rk-Edit-URI").val()
 	            }
 	            _model.set(_data);
-	            _this.edge_representation.redraw();
 	            paper.view.draw();
 		}).defer();
 	}).throttle(500);
 this.editor_$.find("input").bind("keyup change paste", onFieldChange);
 		_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-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(); }
 );
 this.editor_$.find(".Rk-Edit-ColorPicker li").hover(
 function() { _this.editor_$.find(".Rk-Edit-Color").css("background", $(this).attr("data-color")); },
 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();
 }
 Rkns.Renderer.EdgeEditor.prototype.destroy = function() {

renkan