new node's button to show the hidden neighbors
authorrougeronj
Fri, 22 May 2015 17:48:18 +0200
changeset 453 04b7d46e9d67
parent 452 96f84344a70e
child 454 03e8815a012d
new node's button to show the hidden neighbors hover the node reveal the hidden neighbors node in ‘ghost' mode
client/js/main-renderer.js
client/js/renderer/edge.js
client/js/renderer/nodeeditbutton.js
client/js/renderer/nodeenlargebutton.js
client/js/renderer/nodehidebutton.js
client/js/renderer/nodelinkbutton.js
client/js/renderer/noderemovebutton.js
client/js/renderer/noderepr.js
client/js/renderer/nodeshowbutton.js
client/js/renderer/nodeshrinkbutton.js
client/js/renderer/scene.js
--- a/client/js/main-renderer.js	Fri May 22 17:45:50 2015 +0200
+++ b/client/js/main-renderer.js	Fri May 22 17:48:18 2015 +0200
@@ -25,6 +25,7 @@
          'renderer/nodeeditbutton',
          'renderer/noderemovebutton',
          'renderer/nodehidebutton',
+         'renderer/nodeshowbutton',
          'renderer/noderevertbutton',
          'renderer/nodelinkbutton',
          'renderer/nodeenlargebutton',
@@ -34,7 +35,7 @@
          'renderer/edgerevertbutton',
          'renderer/miniframe',
          'renderer/scene'
-         ], function(BaseRepresentation, BaseButton, NodeRepr, Edge, TempEdge, BaseEditor, NodeEditor, EdgeEditor, NodeButton, NodeEditButton, NodeRemoveButton, NodeHideButton, NodeRevertButton, NodeLinkButton, NodeEnlargeButton, NodeShrinkButton, EdgeEditButton, EdgeRemoveButton, EdgeRevertButton, MiniFrame, Scene){
+         ], function(BaseRepresentation, BaseButton, NodeRepr, Edge, TempEdge, BaseEditor, NodeEditor, EdgeEditor, NodeButton, NodeEditButton, NodeRemoveButton, NodeHideButton, NodeShowButton, NodeRevertButton, NodeLinkButton, NodeEnlargeButton, NodeShrinkButton, EdgeEditButton, EdgeRemoveButton, EdgeRevertButton, MiniFrame, Scene){
 
     'use strict';
 
@@ -57,6 +58,7 @@
     Renderer.NodeEditButton = NodeEditButton;
     Renderer.NodeRemoveButton = NodeRemoveButton;
     Renderer.NodeHideButton = NodeHideButton;
+    Renderer.NodeShowButton = NodeShowButton;
     Renderer.NodeRevertButton = NodeRevertButton;
     Renderer.NodeLinkButton = NodeLinkButton;
     Renderer.NodeEnlargeButton = NodeEnlargeButton;
--- a/client/js/renderer/edge.js	Fri May 22 17:45:50 2015 +0200
+++ b/client/js/renderer/edge.js	Fri May 22 17:48:18 2015 +0200
@@ -66,8 +66,9 @@
             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" ||
-                    (this.from_representation.hidden && !this.from_representation.ghost)||
+                    (this.from_representation.hidden && !this.from_representation.ghost) ||
                     (this.to_representation.hidden && !this.to_representation.ghost)){
+                this.hide();
                 return;
             }
             var _p0a = this.from_representation.paper_coords,
--- a/client/js/renderer/nodeeditbutton.js	Fri May 22 17:45:50 2015 +0200
+++ b/client/js/renderer/nodeeditbutton.js	Fri May 22 17:48:18 2015 +0200
@@ -13,8 +13,8 @@
         _init: function() {
             this.type = "Node-edit-button";
             this.lastSectorInner = 0;
-            this.startAngle = -135;
-            this.endAngle = -45;
+            this.startAngle = -125;
+            this.endAngle = -55;
             this.imageName = "edit";
             this.text = "Edit";
         },
--- a/client/js/renderer/nodeenlargebutton.js	Fri May 22 17:45:50 2015 +0200
+++ b/client/js/renderer/nodeenlargebutton.js	Fri May 22 17:48:18 2015 +0200
@@ -14,8 +14,8 @@
         _init: function() {
             this.type = "Node-enlarge-button";
             this.lastSectorInner = 0;
-            this.startAngle = -45;
-            this.endAngle = 0;
+            this.startAngle = -55;
+            this.endAngle = -10;
             this.imageName = "enlarge";
             this.text = "Enlarge";
         },
--- a/client/js/renderer/nodehidebutton.js	Fri May 22 17:45:50 2015 +0200
+++ b/client/js/renderer/nodehidebutton.js	Fri May 22 17:48:18 2015 +0200
@@ -13,8 +13,8 @@
         _init: function() {
             this.type = "Node-hide-button";
             this.lastSectorInner = 0;
-            this.startAngle = 60;
-            this.endAngle = 120;
+            this.startAngle = 45;
+            this.endAngle = 90;
             this.imageName = "hide";
             this.text = "Hide";
         },
--- a/client/js/renderer/nodelinkbutton.js	Fri May 22 17:45:50 2015 +0200
+++ b/client/js/renderer/nodelinkbutton.js	Fri May 22 17:48:18 2015 +0200
@@ -13,8 +13,8 @@
         _init: function() {
             this.type = "Node-link-button";
             this.lastSectorInner = 0;
-            this.startAngle = 120;
-            this.endAngle = 180;
+            this.startAngle = 135;
+            this.endAngle = 190;
             this.imageName = "link";
             this.text = "Link to another node";
         },
--- a/client/js/renderer/noderemovebutton.js	Fri May 22 17:45:50 2015 +0200
+++ b/client/js/renderer/noderemovebutton.js	Fri May 22 17:48:18 2015 +0200
@@ -13,8 +13,8 @@
         _init: function() {
             this.type = "Node-remove-button";
             this.lastSectorInner = 0;
-            this.startAngle = 0;
-            this.endAngle = 60;
+            this.startAngle = -10;
+            this.endAngle = 45;
             this.imageName = "remove";
             this.text = "Remove";
         },
--- a/client/js/renderer/noderepr.js	Fri May 22 17:45:50 2015 +0200
+++ b/client/js/renderer/noderepr.js	Fri May 22 17:48:18 2015 +0200
@@ -33,6 +33,7 @@
                                        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)
@@ -367,6 +368,8 @@
             //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");
         },
@@ -389,6 +392,8 @@
                 //when the mouse don't hover the node anymore, we hide it
                 if (this.hidden){
                     this.hide();
+                }else{
+                    this.hideNeighbors();
                 }
                 this._super("unselect");
             }
@@ -419,6 +424,7 @@
                         }
                     }
             );
+            this.hideNeighbors();
         },
         show: function(ghost){
             var _this = this;
@@ -449,6 +455,44 @@
                     }
             );            
         },
+        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) {
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/js/renderer/nodeshowbutton.js	Fri May 22 17:48:18 2015 +0200
@@ -0,0 +1,35 @@
+
+define(['jquery', 'underscore', 'requtils', 'renderer/nodebutton'], function ($, _, requtils, NodeButton) {
+    'use strict';
+
+    var Utils = requtils.getUtils();
+
+    /* NodeRemoveButton Begin */
+
+    //var NodeRemoveButton = Renderer.NodeRemoveButton = Utils.inherit(Renderer._NodeButton);
+    var NodeShowButton = Utils.inherit(NodeButton);
+
+    _(NodeShowButton.prototype).extend({
+        _init: function() {
+            this.type = "Node-show-button";
+            this.lastSectorInner = 0;
+            this.startAngle = 90;
+            this.endAngle = 135;
+            this.imageName = "show";
+            this.text = "Show";
+        },
+        mouseup: function() {
+            this.renderer.click_target = null;
+            this.renderer.is_dragging = false;
+            this.renderer.removeRepresentationsOfType("editor");
+            if (this.renderer.isEditable()) {
+                this.source_representation.showNeighbors(false);
+            }
+        }
+    }).value();
+
+    /* NodeShowButton End */
+
+    return NodeShowButton;
+
+});
--- a/client/js/renderer/nodeshrinkbutton.js	Fri May 22 17:45:50 2015 +0200
+++ b/client/js/renderer/nodeshrinkbutton.js	Fri May 22 17:48:18 2015 +0200
@@ -13,8 +13,8 @@
         _init: function() {
             this.type = "Node-shrink-button";
             this.lastSectorInner = 0;
-            this.startAngle = -180;
-            this.endAngle = -135;
+            this.startAngle = -170;
+            this.endAngle = -125;
             this.imageName = "shrink";
             this.text = "Shrink";
         },
--- a/client/js/renderer/scene.js	Fri May 22 17:45:50 2015 +0200
+++ b/client/js/renderer/scene.js	Fri May 22 17:48:18 2015 +0200
@@ -83,7 +83,7 @@
         this.image_cache = {};
         this.icon_cache = {};
 
-        ['edit', 'remove', 'hide', 'link', 'enlarge', 'shrink', 'revert' ].forEach(function(imgname) {
+        ['edit', 'remove', 'hide', 'show', '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;