# HG changeset patch # User rougeronj # Date 1432111175 -7200 # Node ID 88e8673aaeebbef30698fbac25ce759a5c42e206 # Parent aae670254c496c601749d34d29d5683e249c8fe0 add the hidden/ghost behaviour: - The view hide or show the nodes calling their functions hide() or show(ghost). - The node and the edges have the attributes 'hidden' and 'ghost' to properly redraw them selves. diff -r aae670254c49 -r 88e8673aaeeb client/js/renderer/edge.js --- 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); diff -r aae670254c49 -r 88e8673aaeeb client/js/renderer/nodeeditor.js --- 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() { 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; diff -r aae670254c49 -r 88e8673aaeeb client/js/renderer/scene.js --- 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;