client/js/renderer/edge.js
changeset 461 48235ed6b07d
parent 459 98cae534083d
parent 453 04b7d46e9d67
child 462 255b66d1ce78
--- a/client/js/renderer/edge.js	Wed Jun 03 19:16:58 2015 +0200
+++ b/client/js/renderer/edge.js	Thu Jun 04 10:04:01 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);
@@ -72,12 +74,15 @@
         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)) {
+                this.hide();
                 return;
             }
             var _strokeWidth = this._getStrokeWidth(),
@@ -129,7 +134,7 @@
             this.line.strokeWidth = _strokeWidth;
             this.line.strokeColor = _color;
             this.line.dashArray = _dash;
-            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);
@@ -138,7 +143,7 @@
             this.arrow.scale(_arrow_scale / this.arrow_scale);
             this.arrow_scale = _arrow_scale;
             this.arrow.fillColor = _color;
-            this.arrow.opacity = array_opacity;
+            this.arrow.opacity = this.ghost ? 0.3 : array_opacity; //TODO: magic constant + var name
             this.arrow.rotate(_a - this.arrow_angle, this.arrow.bounds.center);
             this.arrow.position = this.paper_coords;
 
@@ -161,7 +166,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;
 
@@ -176,6 +181,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);