add backoff to line

Author: archmoj

src/traces/scatter/attributes.js

@@ -292,14 +292,26 @@ module.exports = {
             ].join(' ')
         },
         dash: extendFlat({}, dash, {editType: 'style'}),
+        backoff: { // TODO: do we want to have a similar option for the start of the line? If so what the name should be?
+            valType: 'number',
+            min: 0,
+            dflt: 0,
+            arrayOk: true,
+            editType: 'plot',
+            description: [
+                'Sets the line back off from the end point of the nth line segment (in px).',
+                'This option is useful e.g. to avoid overlap with arrowhead markers.',
+            ].join(' ')
+        },
         simplify: {
             valType: 'boolean',
-            dflt: true,
             editType: 'plot',
             description: [
                 'Simplifies lines by removing nearly-collinear points. When transitioning',
                 'lines, it may be desirable to disable this so that the number of points',
-                'along the resulting SVG path is unaffected.'
+                'along the resulting SVG path is unaffected.',
+                'Defaults to *false* when `backoff` is set,',
+                'otherwise defaults to *true*.'
             ].join(' ')
         },
         editType: 'plot'

src/traces/scatter/defaults.js

@@ -39,10 +39,10 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     coerce('mode', defaultMode);
 
     if(subTypes.hasLines(traceOut)) {
-        handleLineDefaults(traceIn, traceOut, defaultColor, layout, coerce);
+        handleLineDefaults(traceIn, traceOut, defaultColor, layout, coerce, {backoff: true});
         handleLineShapeDefaults(traceIn, traceOut, coerce);
         coerce('connectgaps');
-        coerce('line.simplify');
+        coerce('line.simplify', traceOut.backoff ? false : true);
     }
 
     if(subTypes.hasMarkers(traceOut)) {

src/traces/scatter/line_defaults.js

@@ -5,6 +5,8 @@ var hasColorscale = require('../../components/colorscale/helpers').hasColorscale
 var colorscaleDefaults = require('../../components/colorscale/defaults');
 
 module.exports = function lineDefaults(traceIn, traceOut, defaultColor, layout, coerce, opts) {
+    if(!opts) opts = {};
+
     var markerColor = (traceIn.marker || {}).color;
 
     coerce('line.color', defaultColor);
@@ -17,5 +19,7 @@ module.exports = function lineDefaults(traceIn, traceOut, defaultColor, layout,
     }
 
     coerce('line.width');
-    if(!(opts || {}).noDash) coerce('line.dash');
+
+    if(!opts.noDash) coerce('line.dash');
+    if(opts.backoff) coerce('line.backoff');
 };

src/traces/scatter/line_points.js

@@ -18,6 +18,7 @@ module.exports = function linePoints(d, opts) {
     var yLog = ya.type === 'log';
     var xLen = xa._length;
     var yLen = ya._length;
+    var backoff = opts.backoff;
     var connectGaps = opts.connectGaps;
     var baseTolerance = opts.baseTolerance;
     var shape = opts.shape;
@@ -446,5 +447,52 @@ module.exports = function linePoints(d, opts) {
         segments.push(pts.slice(0, pti));
     }
 
+    if(backoff) {
+        var newSegments = [];
+        var arrayBackoff = Lib.isArrayOrTypedArray(backoff);
+        var lastShapeChar = shape.slice(shape.length - 1);
+        i = -1;
+        for(var j = 0; j < segments.length; j++) {
+            i++;
+            for(var k = 0; k < segments[j].length - 1; k++) {
+                var start = segments[j][k];
+                var end = segments[j][k + 1];
+
+                var x1 = start[0];
+                var y1 = start[1];
+
+                var x2 = end[0];
+                var y2 = end[1];
+
+                var dx = x2 - x1;
+                var dy = y2 - y1;
+
+                var t = Math.atan2(dy, dx);
+                if(lastShapeChar === 'h') {
+                    t = dx < 0 ? Math.PI : 0;
+                } else if(lastShapeChar === 'v') {
+                    t = dy > 0 ? Math.PI / 2 : -Math.PI / 2;
+                }
+
+                var b = arrayBackoff ? backoff[i] : backoff;
+
+                var x = x2 - b * Math.cos(t);
+                var y = y2 - b * Math.sin(t);
+
+                if(
+                    ((x <= x2 && x >= x1) || (x >= x2 && x <= x1)) &&
+                    ((y <= y2 && y >= y1) || (y >= y2 && y <= y1))
+                ) {
+                    if(!newSegments[j]) newSegments[j] = [];
+
+                    newSegments[j].push(start);
+                    newSegments[j].push([x, y]);
+                }
+            }
+        }
+
+        return newSegments;
+    }
+
     return segments;
 };

src/traces/scatter/plot.js

@@ -212,6 +212,7 @@ function plotOne(gd, idx, plotinfo, cdscatter, cdscatterAll, element, transition
             connectGaps: trace.connectgaps,
             baseTolerance: Math.max(line.width || 1, 3) / 4,
             shape: line.shape,
+            backoff: line.backoff,
             simplify: line.simplify,
             fill: trace.fill
         });

src/traces/scattercarpet/attributes.js

@@ -61,6 +61,7 @@ module.exports = {
         color: scatterLineAttrs.color,
         width: scatterLineAttrs.width,
         dash: scatterLineAttrs.dash,
+        backoff: scatterLineAttrs.backoff,
         shape: extendFlat({}, scatterLineAttrs.shape,
             {values: ['linear', 'spline']}),
         smoothing: scatterLineAttrs.smoothing,

src/traces/scattercarpet/defaults.js

@@ -42,7 +42,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     coerce('mode', defaultMode);
 
     if(subTypes.hasLines(traceOut)) {
-        handleLineDefaults(traceIn, traceOut, defaultColor, layout, coerce);
+        handleLineDefaults(traceIn, traceOut, defaultColor, layout, coerce, {backoff: true});
         handleLineShapeDefaults(traceIn, traceOut, coerce);
         coerce('connectgaps');
     }

src/traces/scatterpolar/attributes.js

@@ -82,6 +82,7 @@ module.exports = {
         color: lineAttrs.color,
         width: lineAttrs.width,
         dash: lineAttrs.dash,
+        backoff: lineAttrs.backoff,
         shape: extendFlat({}, lineAttrs.shape, {
             values: ['linear', 'spline']
         }),

src/traces/scatterpolar/defaults.js

@@ -30,7 +30,7 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
     if(traceOut.hoveron !== 'fills') coerce('hovertemplate');
 
     if(subTypes.hasLines(traceOut)) {
-        handleLineDefaults(traceIn, traceOut, defaultColor, layout, coerce);
+        handleLineDefaults(traceIn, traceOut, defaultColor, layout, coerce, {backoff: true});
         handleLineShapeDefaults(traceIn, traceOut, coerce);
         coerce('connectgaps');
     }

src/traces/scattersmith/attributes.js

@@ -38,6 +38,7 @@ module.exports = {
         color: lineAttrs.color,
         width: lineAttrs.width,
         dash: lineAttrs.dash,
+        backoff: lineAttrs.backoff,
         shape: extendFlat({}, lineAttrs.shape, {
             values: ['linear', 'spline']
         }),