--- a/client/js/renderer/noderepr.js Wed Jun 03 19:16:58 2015 +0200
+++ b/client/js/renderer/noderepr.js Thu Jun 04 10:04:01 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,8 @@
this.normal_buttons = [
new Renderer.NodeEditButton(this.renderer, null),
new Renderer.NodeRemoveButton(this.renderer, null),
+ new Renderer.NodeHideButton(this.renderer, null),
+ new Renderer.NodeShowButton(this.renderer, null),
new Renderer.NodeLinkButton(this.renderer, null),
new Renderer.NodeEnlargeButton(this.renderer, null),
new Renderer.NodeShrinkButton(this.renderer, null)
@@ -116,8 +120,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();
@@ -197,7 +200,11 @@
}
);
}
-
+ if (this.ghost){
+ this.show(true);
+ } else {
+ if (this.hidden) { this.hide(); }
+ }
},
showImage: function() {
var _image = null;
@@ -348,7 +355,7 @@
select: function() {
this.selected = true;
this.circle.strokeWidth = this._getSelectedStrokeWidth();
- if (this.renderer.isEditable()) {
+ if (this.renderer.isEditable() && !this.hidden) {
this.active_buttons.forEach(function(b) {
b.show();
});
@@ -370,6 +377,13 @@
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);
+ }
+ else {
+ this.showNeighbors(true);
+ }
this._super("select");
},
hideButtons: function() {
@@ -388,9 +402,111 @@
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();
+ }
+ else {
+ this.hideNeighbors();
+ }
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();
+ }
+ }
+ );
+ this.hideNeighbors();
+ },
+ 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);
+ }
+ }
+ );
+ },
+ hideNeighbors: function(){
+ var _this = this;
+ _.each(
+ this.project.get("edges").filter(
+ function (ed) {
+ return (ed.get("from") === _this.model);
+ }
+ ),
+ function(edge, index, list) {
+ var repr = _this.renderer.getRepresentationByModel(edge.get("to"));
+ if (repr && repr.ghost) {
+ repr.hide();
+ }
+ }
+ );
+ },
+ showNeighbors: function(ghost){
+ var _this = this;
+ _.each(
+ this.project.get("edges").filter(
+ function (ed) {
+ return (ed.get("from") === _this.model);
+ }
+ ),
+ function(edge, index, list) {
+ var repr = _this.renderer.getRepresentationByModel(edge.get("to"));
+ if (repr && repr.hidden) {
+ repr.show(ghost);
+ if (!ghost){
+ var indexNode = _this.renderer.hiddenNodes.indexOf(repr.model.id);
+ if (indexNode !== -1){
+ _this.renderer.hiddenNodes.splice(indexNode, 1);
+ }
+ }
+ }
+ }
+ );
+ },
highlight: function(textToReplace) {
var hlvalue = textToReplace || true;
if (this.highlighted === hlvalue) {
@@ -430,10 +546,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;