renkan: comparison server/src/main/webapp/static/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

server/src/main/webapp/static/js/paper-renderer.js

changeset 56	a9b9e6c7be63
parent 50	7b517a54b708

equal deleted inserted replaced

-:17ff0be41a5b
+:a9b9e6c7be63
 _EDITOR_MARGIN : 15,
 _EDITOR_PADDING : 10,
 _EDITOR_GRADIENT : new paper.Gradient(['#f0f0f0', '#d0d0d0']),
 _CLICKMODE_ADDNODE : 1,
 _CLICKMODE_STARTEDGE : 2,
-_CLICKMODE_ENDEDGE : 3
+_CLICKMODE_ENDEDGE : 3,
+_USER_PLACEHOLDER : {
+color: "#000000",
+title: "(unknown user)",
+get: function(attr) {
+return this[attr] || false;
+}
+}
 }
 Rkns.Renderer.Utils = {
 drawEditBox : function(_coords, _path, _width, _xmargin, _selector) {
 _selector.css({
 this.renderer.node_layer.activate();
 this.type = "Node";
 this.circle = new paper.Path.Circle([0, 0], Rkns.Renderer._NODE_RADIUS);
 this.circle.fillColor = '#ffffff';
 this.circle.__representation = this;
+this.circle.strokeWidth = 2;
 this.title = new paper.PointText([0,0]);
 this.title.characterStyle = {
 fontSize: Rkns.Renderer._NODE_FONT_SIZE,
 fillColor: 'black'
 };
 var _model_coords = new paper.Point(this.model.get("position"));
 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, Rkns.Renderer._NODE_RADIUS + 1.5 *Rkns.Renderer._NODE_FONT_SIZE]);
-this.circle.strokeColor = this.model.get("created_by").get("color");
+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);
 var _img = this.model.get("image");
 if (_img && _img !== this.img) {
 _editor.node_representation = this;
 _editor.draw();
 }
 Rkns.Renderer.Node.prototype.select = function() {
-this.circle.strokeWidth = 3;
+this.circle.strokeWidth = 4;
 this.edit_button.show();
 this.remove_button.show();
 this.link_button.show();
 var _uri = this.model.get("uri");
 Rkns.$('.Rk-Bin-Item').each(function() {
 Rkns.Renderer.Node.prototype.unselect = function(_newTarget) {
 if (!_newTarget || _newTarget.node_representation !== this) {
 this.edit_button.hide();
 this.remove_button.hide();
 this.link_button.hide();
-this.circle.strokeWidth = 1;
+this.circle.strokeWidth = 2;
 Rkns.$('.Rk-Bin-Item').removeClass("selected");
 }
 }
 Rkns.Renderer.Node.prototype.highlight = function() {
 this.to_representation = this.renderer.getRepresentationByModel(this.model.get("to"));
 this.bundle = this.renderer.addToBundles(this);
 this.line = new paper.Path();
 this.line.add([0,0],[0,0],[0,0]);
 this.line.__representation = this;
+this.line.strokeWidth = 2;
 this.arrow = new paper.Path();
 this.arrow.add([0,0],[Rkns.Renderer._ARROW_LENGTH,Rkns.Renderer._ARROW_WIDTH / 2],[0,Rkns.Renderer._ARROW_WIDTH]);
 this.arrow.__representation = this;
 this.text = new paper.PointText();
 this.text.characterStyle = {
 _delta = new paper.Point([- _u.y, _u.x]).multiply( 12 * _group_pos ),
 _p0b = _p0a.add(_delta), /* Adding a 4 px difference */
 _p1b = _p1a.add(_delta), /* to differentiate inbound and outbound links */
 _a = _v.angle,
 _handle = _v.divide(3),
-_color = this.model.get("created_by").get("color");
+_color = this.model.get("color") || this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color");
 this.paper_coords = _p0b.add(_p1b).divide(2);
 this.line.strokeColor = _color;
 this.line.segments[0].point = _p0a;
 this.line.segments[1].point = this.paper_coords;
 this.line.segments[1].handleIn = _handle.multiply(-1);
 _editor.edge_representation = this;
 _editor.draw();
 }
 Rkns.Renderer.Edge.prototype.select = function() {
-this.line.strokeWidth = 3;
+this.line.strokeWidth = 4;
 this.edit_button.show();
 this.remove_button.show();
 }
 Rkns.Renderer.Edge.prototype.unselect = function(_newTarget) {
 if (!_newTarget || _newTarget.edge_representation !== this) {
 this.edit_button.hide();
 this.remove_button.hide();
-this.line.strokeWidth = 1;
+this.line.strokeWidth = 2;
 }
 }
 Rkns.Renderer.Edge.prototype.mouseup = function(_event) {
 if (!this.renderer.is_dragging) {
 Rkns.Renderer.TempEdge.prototype._init = function() {
 this.renderer.edge_layer.activate();
 this.type = "temp-edge";
-var _color = this.project.get("users").get(this.renderer.renkan.current_user).get("color");
+var _color = this.project.get("users").get(this.renderer.renkan.current_user).get("color") || "#000000";
 this.line = new paper.Path();
 this.line.strokeColor = _color;
 this.line.add([0,0],[0,0]);
 this.line.__representation = this;
 this.arrow = new paper.Path();
 Rkns.Renderer.NodeEditor.prototype.template = Rkns._.template(
 '<h2><span class="Rk-CloseX">&times;</span><%=l10n.edit_node%></span></h2>'
 + '<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>'
++ '<div class="Rk-Editor-p"><label>Node color</label><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>'
 + '<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.draw = function() {
-var _model = this.node_representation.model;
+var _model = this.node_representation.model,
+_created_by = _model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER;
 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"),
+color: _model.get("color") || _created_by.get("color"),
-created_by_title: _model.get("created_by").get("title")
+created_by_color: _created_by.get("color"),
+created_by_title: _created_by.get("title")
 },
 l10n: this.renderer.renkan.l10n
 }));
 this.redraw();
 var _this = this;
 });
 this.editor_$.find("img").load(function() {
 _this.redraw();
 })
 this.editor_$.find(".Rk-Edit-Title")[0].focus();
+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();
+});
 }
 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.EdgeEditor.prototype.template = Rkns._.template(
 '<h2><span class="Rk-CloseX">&times;</span><%=l10n.edit_edge%></span></h2>'
 + '<p><label><%=l10n.edit_title%></label><input class="Rk-Edit-Title" type="text" value="<%=edge.title%>"/></p>'
 + '<p><label><%=l10n.edit_uri%></label><input class="Rk-Edit-URI" type="text" value="<%=edge.uri%>"/><a class="Rk-Edit-Goto" href="<%=edge.uri%>" target="_blank"></a></p>'
-+ '<p><label><%=l10n.edit_from%></label><span class="Rk-UserColor" style="background:<%=edge.from_created_by_color%>;"></span><%=edge.from_title%></p>'
++ '<div class="Rk-Editor-p"><label>Edge color:</label><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">'
-+ '<p><label><%=l10n.edit_to%></label><span class="Rk-UserColor" style="background:<%=edge.to_created_by_color%>;"></span><%=edge.to_title%></p>'
++ '<% 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>'
++ '<p><label><%=l10n.edit_from%></label><span class="Rk-UserColor" style="background:<%=edge.from_color%>;"></span><%=edge.from_title%></p>'
++ '<p><label><%=l10n.edit_to%></label><span class="Rk-UserColor" style="background:<%=edge.to_color%>;"></span><%=edge.to_title%></p>'
 + '<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.draw = function() {
-var _model = this.edge_representation.model;
+var _model = this.edge_representation.model,
+_from_model = _model.get("from"),
+_to_model = _model.get("to"),
+_created_by = _model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER;
 this.editor_$
 .html(this.template({
 edge: {
 title: _model.get("title"),
 uri: _model.get("uri"),
 description: _model.get("description"),
-from_title: _model.get("from").get("title"),
+color: _model.get("color") || _created_by.get("color"),
-to_title: _model.get("to").get("title"),
+from_title: _from_model.get("title"),
-from_created_by_color: _model.get("from").get("created_by").get("color"),
+to_title: _to_model.get("title"),
-to_created_by_color: _model.get("to").get("created_by").get("color"),
+from_color: _from_model.get("color") || (_from_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color"),
-created_by_color: _model.get("created_by").get("color"),
+to_color: _to_model.get("color") || (_to_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color"),
-created_by_title: _model.get("created_by").get("title")
+created_by_color: _created_by.get("color"),
+created_by_title: _created_by.get("title")
 },
 l10n: this.renderer.renkan.l10n
 }));
 this.redraw();
 var _this = 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.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();
 });
 }
 Rkns.Renderer.EdgeEditor.prototype.redraw = function() {
 var _coords = this.edge_representation.paper_coords;

renkan