Better Aesthetics

Question

Better Aesthetics

eyecreate opened this issue 14 years ago · 1 comments

Added animated hiding/showing, which Raphaeljs already supported. Show/Hide also shows/hides related edges so left over edges are less confusing.

Using Version (0.0.3alpha4)

--- dracula_graph.js 2011-07-13 12:50:27.712185500 -0400
+++ js/dracula_graph.js 2011-07-13 12:41:25.198939600 -0400
@@ -29,8 +29,26 @@
}
AbstractEdge.prototype = {
hide: function() {

```
   this.connection.fg.hide();
```

   this.connection.bg && this.bg.connection.hide();

  this.connection.fg.animate({opacity:0},1000,"backOut",function () {

```
      this.hide();
```
```
  });
```

  this.connection.bg && this.connection.bg.animate({opacity:0},1000,"backOut",function () {

```
      this.hide();
```
```
  });
```

  this.connection.label && this.connection.label.animate({opacity:0},1000,"backOut",function () {

```
      this.hide();
```
```
  });
```
},
show: function() {

  this.connection.fg.animate({opacity:1},1000,"backIn",function () {

```
      this.show();
```
```
  });
```

  this.connection.bg && this.connection.bg.animate({opacity:1},1000,"backIn",function () {

```
      this.show();
```
```
  });
```

  this.connection.label && this.connection.label.animate({opacity:1},1000,"backIn",function () {

```
      this.show();
```
```
  });
```
}
};
var EdgeFactory = function() {
@@ -97,7 +115,7 @@
*/
},
removeNode: function(id) {
```
   delete this.nodes[id];
```

  delete this.nodes[id];
 for(var i = 0; i < this.edges.length; i++) {
     if (this.edges[i].source.id == id || this.edges[i].target.id == id) {
         this.edges.splice(i, 1);

@@ -115,16 +133,31 @@
node.id = id;
node.edges = [];
node.hide = function() {

```
   this.hidden = true;
```

   this.shape.animate({opacity: 0},1000,"backOut",function () {

  this.hidden = true;
 this.shape && this.shape.hide(); /\* FIXME this is representation specific code and should be elsewhere */
 for(i in this.edges)
     (this.edges[i].source.id == id || this.edges[i].target == id) && this.edges[i].hide && this.edges[i].hide();

```
  });
```

  for(var i = 0; i < this.edges.length; i++) {

       if (this.edges[i].source.id == id || this.edges[i].target.id == id) {

```
           this.edges[i].hide();
```
```
       }
```
```
   }
```
};
node.show = function() {
```
   this.hidden = false;
```

   this.shape.animate({opacity: 1},1000,"backIn",function () {

  this.hidden = false;
 this.shape && this.shape.show();
 for(i in this.edges)
     (this.edges[i].source.id == id || this.edges[i].target == id) && this.edges[i].show && this.edges[i].show();

```
  });
```

  for(var i = 0; i < this.edges.length; i++) {

       if (this.edges[i].source.id == id || this.edges[i].target.id == id) {

```
           this.edges[i].show();
```
```
       }
```
```
   }
```
};
return node;
};

Answer 1 · 2015-04-27T16:02:54.000Z

I think this issue can be closed. It looks like the changes mentioned have already been applied.