Feature/hide offscreen arrows (electricitymaps#495)

* JS is indented using 4 spaces

* Hide offscreen (by X-axis) arrows

* Include layer scale when toggling arrows

.editorconfig

@@ -6,6 +6,12 @@ indent_size = 2
 end_of_line = lf
 insert_final_newline = true
 
+[*.js]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+insert_final_newline = true
+
 [*.json]
 indent_size = 4
 

web/app/countrymap.js

@@ -45,6 +45,8 @@ function CountryMap(selector, wind, windCanvasSelector, solar, solarCanvasSelect
 
     var dragStartTransform;
 
+    var that = this;
+
     this.zoom = d3.zoom().on('zoom', function() {
         if (!dragStartTransform) {
             // Zoom start
@@ -86,6 +88,7 @@ function CountryMap(selector, wind, windCanvasSelector, solar, solarCanvasSelect
         that.windCanvas.style('transform', undefined);
         that.solarCanvas.style('transform', undefined);
 
+        that.exchangeLayer().render();
         wind.pause(false);
         d3.select(this).style('cursor', undefined);
 

web/app/exchangelayer.js

@@ -106,6 +106,22 @@ ExchangeLayer.prototype.render = function() {
     // This allows us to avoid re-rendering when the same element subsides between renders
     updateArrows(newArrows);
 
+    // However, set the visibility
+    var mapWidth = d3.select('#map-container').node().getBoundingClientRect().width;
+    var layerTransform = d3.select('.arrows-layer').style('transform').replace(/matrix\(|\)/g, '').split(/\s*,\s*/);
+
+    newArrows.merge(exchangeArrows)
+        .style('display', function(d) {
+            var arrowCenter = that.projection()(d.lonlat);
+            var layerTranslateX = layerTransform[4];
+            var mapScale = layerTransform[3];
+            var centerX = (arrowCenter[0] * mapScale) - Math.abs(layerTranslateX);
+
+            var isOffscreen = centerX < 0 || centerX > mapWidth;
+            var hasLowFlow = (d.netFlow || 0) == 0;
+            return (hasLowFlow || isOffscreen) ? 'none' : '';
+        })
+
     return this;
 }