diff -r aae670254c49 -r 88e8673aaeeb client/js/renderer/noderepr.js --- a/client/js/renderer/noderepr.js Wed May 20 10:36:37 2015 +0200 +++ b/client/js/renderer/noderepr.js Wed May 20 10:39:35 2015 +0200 @@ -17,6 +17,8 @@ this.renderer.node_layer.activate(); this.type = "Node"; this.buildShape(); + this.hidden = false; + this.ghost= false; if (this.options.show_node_circles) { this.circle.strokeWidth = this.options.node_stroke_width; this.h_ratio = 1; @@ -30,6 +32,7 @@ this.normal_buttons = [ new Renderer.NodeEditButton(this.renderer, null), new Renderer.NodeRemoveButton(this.renderer, null), + new Renderer.NodeHideButton(this.renderer, null), new Renderer.NodeLinkButton(this.renderer, null), new Renderer.NodeEnlargeButton(this.renderer, null), new Renderer.NodeShrinkButton(this.renderer, null) @@ -97,7 +100,7 @@ this.last_circle_radius = this.circle_radius; var old_act_btn = this.active_buttons; - + var opacity = 1; if (this.model.get("delete_scheduled")) { opacity = 0.5; @@ -108,8 +111,7 @@ this.active_buttons = this.normal_buttons; this.circle.dashArray = null; } - - if (this.selected && this.renderer.isEditable()) { + if (this.selected && this.renderer.isEditable() && !this.ghost) { if (old_act_btn !== this.active_buttons) { old_act_btn.forEach(function(b) { b.hide(); @@ -136,7 +138,6 @@ } else { this.title.text(_text); } - this.title.css({ left: this.paper_coords.x, top: this.paper_coords.y + this.circle_radius * this.h_ratio + this.options.node_label_distance, @@ -160,7 +161,8 @@ this.node_image.remove(); delete this.node_image; } - + + if (this.renderer.minimap) { this.minimap_circle.fillColor = _color; var minipos = this.renderer.toMinimapCoords(_model_coords), @@ -185,7 +187,11 @@ } ); } - + if (this.ghost){ + this.show(true); + } else { + if (this.hidden) { this.hide(); } + } }, showImage: function() { var _image = null; @@ -336,7 +342,7 @@ select: function() { this.selected = true; this.circle.strokeWidth = this.options.selected_node_stroke_width; - if (this.renderer.isEditable()) { + if (this.renderer.isEditable() && !this.hidden) { this.active_buttons.forEach(function(b) { b.show(); }); @@ -358,6 +364,10 @@ this.minimap_circle.strokeWidth = this.options.minimap_highlight_weight; this.minimap_circle.strokeColor = this.options.minimap_highlight_color; } + //if the node is hidden and the mouse hover it, it appears as a ghost + if (this.hidden){ + this.show(true); + } this._super("select"); }, hideButtons: function() { @@ -376,9 +386,69 @@ if (this.renderer.minimap) { this.minimap_circle.strokeColor = undefined; } + //when the mouse don't hover the node anymore, we hide it + if (this.hidden){ + this.hide(); + } this._super("unselect"); } }, + hide: function(){ + var _this = this; + this.ghost = false; + this.hidden = true; + if (typeof this.node_image !== 'undefined'){ + this.node_image.opacity = 0; + } + this.hideButtons(); + this.circle.opacity = 0; + this.title.css('opacity', 0); + this.minimap_circle.opacity = 0; + + + _.each( + this.project.get("edges").filter( + function (ed) { + return ((ed.get("to") === _this.model) || (ed.get("from") === _this.model)); + } + ), + function(edge, index, list) { + var repr = _this.renderer.getRepresentationByModel(edge); + if (repr && typeof repr.from_representation !== "undefined" && typeof repr.from_representation.paper_coords !== "undefined" && typeof repr.to_representation !== "undefined" && typeof repr.to_representation.paper_coords !== "undefined") { + repr.hide(); + } + } + ); + }, + show: function(ghost){ + var _this = this; + this.ghost = ghost; + if (this.ghost){ + if (typeof this.node_image !== 'undefined'){ + this.node_image.opacity = 0.3; + } + this.circle.opacity = 0.3; + this.title.css('opacity', 0.3); + this.minimap_circle.opacity = 0.3; + } else { + this.hidden = false; + this.redraw(); + } + + _.each( + this.project.get("edges").filter( + function (ed) { + return ((ed.get("to") === _this.model) || (ed.get("from") === _this.model)); + } + ), + function(edge, index, list) { + var repr = _this.renderer.getRepresentationByModel(edge); + if (repr && typeof repr.from_representation !== "undefined" && typeof repr.from_representation.paper_coords !== "undefined" && typeof repr.to_representation !== "undefined" && typeof repr.to_representation.paper_coords !== "undefined") { + repr.show(_this.ghost); + } + } + ); + }, highlight: function(textToReplace) { var hlvalue = textToReplace || true; if (this.highlighted === hlvalue) { @@ -418,10 +488,19 @@ if (this.renderer.is_dragging && this.renderer.isEditable()) { this.saveCoords(); } else { - if (!_isTouch && !this.model.get("delete_scheduled")) { - this.openEditor(); + if (this.hidden){ + var index = this.renderer.hiddenNodes.indexOf(this.model.id); + if (index !== -1){ + this.renderer.hiddenNodes.splice(index, 1); + } + this.show(false); + this.select(); + }else{ + if (!_isTouch && !this.model.get("delete_scheduled")) { + this.openEditor(); + } + this.model.trigger("clicked"); } - this.model.trigger("clicked"); } this.renderer.click_target = null; this.renderer.is_dragging = false;