mapbox: break into multiple lines and scale down attributions on export

plotly · Jul 18, 2019 · a54b8a3 · a54b8a3
1 parent dad62fc
commit a54b8a3
Show file tree

Hide file tree

Showing 18 changed files with 26 additions and 5 deletions.
diff --git a/src/plots/mapbox/index.js b/src/plots/mapbox/index.js
@@ -15,6 +15,7 @@ var getSubplotCalcData = require('../../plots/get_data').getSubplotCalcData;
 var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
 var d3 = require('d3');
 var Drawing = require('../../components/drawing');
+var svgTextUtils = require('../../lib/svg_text_utils');
 
 var Mapbox = require('./mapbox');
 
@@ -170,21 +171,41 @@ exports.toSVG = function(gd) {
               'font-family': 'Arial',
               'color': 'rgba(0, 0, 0, 0.75)',
               'text-anchor': 'end',
-              'data-unformatted': attributions,
-              x: size.l + size.w * domain.x[1] - 3,
-              y: size.t + size.h * (1 - domain.y[0]) - 4
+              'data-unformatted': attributions
           });
 
         var bBox = Drawing.bBox(attributionText.node());
+
+        // Break into multiple lines twice larger than domain
+        var maxWidth = size.w * (domain.x[1] - domain.x[0]);
+        if((bBox.width > maxWidth / 2)) {
+            var multilineAttributions = attributions.split('|').join('<br>');
+            attributionText
+              .text(multilineAttributions)
+              .attr('data-unformatted', multilineAttributions)
+              .call(svgTextUtils.convertToTspans, gd);
+
+            bBox = Drawing.bBox(attributionText.node());
+        }
+        attributionText.attr('transform', 'translate(-3, ' + (-bBox.height + 8) + ')');
+
+        // Draw white rectangle behind text
         attributionGroup
           .insert('rect', '.static-attribution')
           .attr({
-              x: size.l + size.w * domain.x[1] - bBox.width - 6,
-              y: size.t + size.h * (1 - domain.y[0]) - (bBox.height + 3),
+              x: -bBox.width - 6,
+              y: -bBox.height - 3,
               width: bBox.width + 6,
               height: bBox.height + 3,
               fill: 'rgba(255, 255, 255, 0.75)'
           });
+
+        // Scale down if larger than domain
+        var scaleRatio = 1;
+        if((bBox.width + 6) > maxWidth) scaleRatio = maxWidth / (bBox.width + 6);
+
+        var offset = [(size.l + size.w * domain.x[1]), (size.t + size.h * (1 - domain.y[0]))];
+        attributionGroup.attr('transform', 'translate(' + offset[0] + ',' + offset[1] + ') scale(' + scaleRatio + ')');
     }
 };
 

diff --git a/test/image/baselines/mapbox_0.png b/test/image/baselines/mapbox_0.png
diff --git a/test/image/baselines/mapbox_angles.png b/test/image/baselines/mapbox_angles.png
diff --git a/test/image/baselines/mapbox_bubbles-text.png b/test/image/baselines/mapbox_bubbles-text.png
diff --git a/test/image/baselines/mapbox_bubbles.png b/test/image/baselines/mapbox_bubbles.png
diff --git a/test/image/baselines/mapbox_choropleth-multiple.png b/test/image/baselines/mapbox_choropleth-multiple.png
diff --git a/test/image/baselines/mapbox_choropleth-raw-geojson.png b/test/image/baselines/mapbox_choropleth-raw-geojson.png
diff --git a/test/image/baselines/mapbox_choropleth0.png b/test/image/baselines/mapbox_choropleth0.png
diff --git a/test/image/baselines/mapbox_connectgaps.png b/test/image/baselines/mapbox_connectgaps.png
diff --git a/test/image/baselines/mapbox_custom-style.png b/test/image/baselines/mapbox_custom-style.png
diff --git a/test/image/baselines/mapbox_density-mulitple.png b/test/image/baselines/mapbox_density-mulitple.png
diff --git a/test/image/baselines/mapbox_density0.png b/test/image/baselines/mapbox_density0.png
diff --git a/test/image/baselines/mapbox_earthquake-density.png b/test/image/baselines/mapbox_earthquake-density.png
diff --git a/test/image/baselines/mapbox_fill.png b/test/image/baselines/mapbox_fill.png
diff --git a/test/image/baselines/mapbox_geojson-attributes.png b/test/image/baselines/mapbox_geojson-attributes.png
diff --git a/test/image/baselines/mapbox_layers.png b/test/image/baselines/mapbox_layers.png
diff --git a/test/image/baselines/mapbox_osm-style.png b/test/image/baselines/mapbox_osm-style.png
diff --git a/test/image/baselines/mapbox_symbol-text.png b/test/image/baselines/mapbox_symbol-text.png