--- a/client/js/renderer/edge.js	Wed May 20 10:36:37 2015 +0200
+++ b/client/js/renderer/edge.js	Wed May 20 10:39:35 2015 +0200
@@ -13,6 +13,8 @@
         _init: function() {
             this.renderer.edge_layer.activate();
             this.type = "Edge";
+            this.hidden = false;
+            this.ghost = false;
             this.from_representation = this.renderer.getRepresentationByModel(this.model.get("from"));
             this.to_representation = this.renderer.getRepresentationByModel(this.model.get("to"));
             this.bundle = this.renderer.addToBundles(this);
@@ -58,12 +60,14 @@
         redraw: function() {
             var from = this.model.get("from"),
             to = this.model.get("to");
-            if (!from || !to) {
+            if (!from || !to || (this.hidden && !this.ghost)) {
                 return;
             }
             this.from_representation = this.renderer.getRepresentationByModel(from);
             this.to_representation = this.renderer.getRepresentationByModel(to);
-            if (typeof this.from_representation === "undefined" || typeof this.to_representation === "undefined") {
+            if (typeof this.from_representation === "undefined" || typeof this.to_representation === "undefined" ||
+                    (this.from_representation.hidden && !this.from_representation.ghost)||
+                    (this.to_representation.hidden && !this.to_representation.ghost)){
                 return;
             }
             var _p0a = this.from_representation.paper_coords,
@@ -105,7 +109,7 @@
 
             this.paper_coords = _p0b.add(_p1b).divide(2);
             this.line.strokeColor = _color;
-            this.line.opacity = opacity;
+            this.line.opacity = this.ghost ? 0.3 : opacity;
             this.line.segments[0].point = _p0a;
             this.line.segments[1].point = this.paper_coords;
             this.line.segments[1].handleIn = _handle.multiply(-1);
@@ -113,7 +117,7 @@
             this.line.segments[2].point = _p1a;
             this.arrow.rotate(_a - this.arrow_angle);
             this.arrow.fillColor = _color;
-            this.arrow.opacity = opacity;
+            this.arrow.opacity = this.ghost ? 0.3 : opacity;
             this.arrow.position = this.paper_coords;
             this.arrow_angle = _a;
             if (_a > 90) {
@@ -134,7 +138,7 @@
                 transform: "rotate(" + _a + "deg)",
                 "-moz-transform": "rotate(" + _a + "deg)",
                 "-webkit-transform": "rotate(" + _a + "deg)",
-                opacity: opacity
+                opacity: this.ghost ? 0.3 : opacity
             });
             this.text_angle = _a;
 
@@ -149,6 +153,36 @@
                 this.minimap_line.segments[1].point = this.renderer.toMinimapCoords(new paper.Point(this.to_representation.model.get("position")));
             }
         },
+        hide: function(){
+            this.hidden = true;
+            this.ghost = false;
+            
+            this.text.hide();
+            this.line.visible = false;
+            this.arrow.visible = false;
+            this.minimap_line.visible = false;
+        },
+        show: function(ghost){
+            this.ghost = ghost;
+            if (this.ghost){
+                this.text.css('opacity', 0.3);
+                this.line.opacity = 0.3;
+                this.arrow.opacity = 0.3;
+                this.minimap_line.opacity = 0.3;
+            }else{
+                this.hidden = false;
+                
+                this.text.css('opacity', 1);
+                this.line.opacity = 1;
+                this.arrow.opacity = 1;
+                this.minimap_line.opacity = 1;
+            }
+            this.text.show();
+            this.line.visible = true;
+            this.arrow.visible = true;
+            this.minimap_line.visible = true;
+            this.redraw();
+        },
         openEditor: function() {
             this.renderer.removeRepresentationsOfType("editor");
             var _editor = this.renderer.addRepresentation("EdgeEditor",null);

--- a/client/js/renderer/nodeeditor.js	Wed May 20 10:36:37 2015 +0200
+++ b/client/js/renderer/nodeeditor.js	Wed May 20 10:39:35 2015 +0200
@@ -12,6 +12,8 @@
         _init: function() {
             BaseEditor.prototype._init.apply(this);
             this.template = this.options.templates['templates/nodeeditor.html'];
+            //this.templates['default']= this.options.templates['templates/nodeeditor.html'];
+            //fusionner avec this.options.node_editor_templates
             this.readOnlyTemplate = this.options.templates['templates/nodeeditor_readonly.html'];
         },
         draw: function() {

--- 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;

--- a/client/js/renderer/scene.js	Wed May 20 10:36:37 2015 +0200
+++ b/client/js/renderer/scene.js	Wed May 20 10:39:35 2015 +0200
@@ -25,6 +25,7 @@
         this.initialScale = 1;
         this.offset = paper.view.center;
         this.totalScroll = 0;
+        this.hiddenNodes = [];
         this.mouse_down = false;
         this.click_target = null;
         this.selected_target = null;
@@ -82,7 +83,7 @@
         this.image_cache = {};
         this.icon_cache = {};
 
-        ['edit', 'remove', 'link', 'enlarge', 'shrink', 'revert' ].forEach(function(imgname) {
+        ['edit', 'remove', 'hide', 'link', 'enlarge', 'shrink', 'revert' ].forEach(function(imgname) {
             var img = new Image();
             img.src = _renkan.options.static_url + 'img/' + imgname + '.png';
             _this.icon_cache[imgname] = img;
@@ -238,14 +239,26 @@
         bindClick(".Rk-ZoomFit", "autoScale");
         this.$.find(".Rk-ZoomSave").click( function() {
             // Save scale and offset point
-            _this.renkan.project.addView( { zoom_level:_this.scale, offset:_this.offset } );
+            _this.renkan.project.addView( { zoom_level:_this.scale, offset:_this.offset, hidden_nodes: _this.hiddenNodes } );
         });
         this.$.find(".Rk-ZoomSetSaved").click( function() {
             var view = _this.renkan.project.get("views").last();
             if(view){
                 _this.setScale(view.get("zoom_level"), new paper.Point(view.get("offset")));
+                _this.hiddenNodes = view.get("hidden_nodes");
+                _this.hideNodes();
             }
         });
+        this.$.find(".Rk-ShowHiddenNodes").mouseenter( function() {
+            _this.showNodes(true);
+            _this.$.find(".Rk-ShowHiddenNodes").mouseleave( function() {
+                _this.hideNodes(false);
+            });
+        });
+        this.$.find(".Rk-ShowHiddenNodes").click( function() {
+            _this.showNodes(false);
+            _this.$.find(".Rk-ShowHiddenNodes").off( "mouseleave" ); 
+        });
         if(this.renkan.project.get("views").length > 0 && this.renkan.options.save_view){
             this.$.find(".Rk-ZoomSetSaved").show();
         }
@@ -729,7 +742,7 @@
         addRepresentations: function(_type, _collection) {
             var _this = this;
             _collection.forEach(function(_model) {
-                _this.addRepresentation(_type, _model);
+                //_this.addRepresentation(_type, _model);
             });
         },
         userTemplate: _.template(
@@ -833,6 +846,7 @@
             });
         },
         redraw: function() {
+            var _this = this;
             if(! this.redrawActive ) {
                 return;
             }
@@ -851,6 +865,38 @@
             _tmpEdge.redraw();
             this.click_target = _tmpEdge;
         },
+        addHiddenNode: function(_model){
+            this.hideNode(_model);
+            this.hiddenNodes.push(_model.id);
+        },
+        hideNode: function(_model){
+            var _this = this;
+            if (typeof _this.getRepresentationByModel(_model) !== 'undefined'){
+                _this.getRepresentationByModel(_model).hide();
+            }
+        },
+        hideNodes: function(){
+            var _this = this;
+            this.hiddenNodes.forEach(function(_id, index){
+                var node = _this.renkan.project.get("nodes").get(_id);
+                if (typeof node !== 'undefined'){
+                    return _this.hideNode(_this.renkan.project.get("nodes").get(_id));
+                }else{
+                    _this.hiddenNodes.splice(index, 1);
+                }
+            });
+            paper.view.draw();
+        },
+        showNodes: function(ghost){
+            var _this = this;
+            this.hiddenNodes.forEach(function(_id){
+                _this.getRepresentationByModel(_this.renkan.project.get("nodes").get(_id)).show(ghost);
+            });
+            if (!ghost){
+                this.hiddenNodes = [];
+            }
+            paper.view.draw();
+        },
         findTarget: function(_hitResult) {
             if (_hitResult && typeof _hitResult.item.__representation !== "undefined") {
                 var _newTarget = _hitResult.item.__representation;