plotly.js 2.13.1 → 2.14.0

package/lib/locales/nl.js

@@ -3,7 +3,41 @@
 module.exports = {
     moduleType: 'locale',
     name: 'nl',
-    dictionary: {},
+    dictionary: {
+        'Autoscale': 'Automatische schaal',
+        'Click to enter Colorscale title': 'Klik om kleurenschaal titel in te vullen',
+        'Click to enter Component A title': 'Klik om Component A titel in te vullen',
+        'Click to enter Component B title': 'Klik om Component B titel in te vullen',
+        'Click to enter Component C title': 'Klik om Component C titel in te vullen',
+        'Click to enter Plot title': 'Klik om Plot titel in te vullen',
+        'Click to enter X axis title': 'Klik om x-as titel in te vullen',
+        'Click to enter Y axis title': 'Klik om y-as titel in te vullen',
+        'Click to enter radial axis title': 'Klik om radiaal-as titel in te vullen',
+        'Double-click to zoom back out': 'Zoom uit door te dubbel klikken',
+        'Download plot as a png': 'Dowload de plot als een png-bestand',
+        'Download plot': 'Download de plot',
+        'Draw circle': 'Teken cirkel',
+        'Draw closed freeform': 'Teken gesloten vorm',
+        'Draw line': 'Teken lijn',
+        'Draw open freeform': 'Teken open vorm',
+        'Draw rectangle': 'Teken rechthoek',
+        'Edit in Chart Studio': 'In Chart Studio wijzigen',
+        'Erase active shape': 'Wis huidige vorm',
+        'IE only supports svg. Changing format to svg.': 'IE ondersteunt alleen svg bestanden. Formaat gewijzigd naar svg.',
+        'Lasso Select': 'Lasso selectie',
+        'Produced with Plotly.js': 'Gemaakt met Plotly.js',
+        'Zoom': 'Inzoomen',
+        'max:': 'maximum:',
+        'mean ± σ:': 'gemiddelde ± σ:',
+        'mean:': 'gemiddelde:',
+        'min:': 'minimum:',
+        'new text': 'nieuwe tekst',
+        'open:': 'openen:',
+        'high:': 'hoog:',
+        'low:': 'laag:',
+        'source:': 'bron:',
+        'target:': 'doel:',
+    },
     format: {
         days: [
             'zondag', 'maandag', 'dinsdag', 'woensdag',
@@ -18,6 +52,12 @@ module.exports = {
             'jan', 'feb', 'maa', 'apr', 'mei', 'jun',
             'jul', 'aug', 'sep', 'okt', 'nov', 'dec'
         ],
-        date: '%d-%m-%Y'
+        date: '%d-%m-%Y',
+        decimal: ',',
+        thousands: '.',
+        year: '%Y',
+        month: '%b %Y',
+        dayMonth: '%-d %b',
+        dayMonthYear: '%-d %b %Y'
     }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plotly.js",
-  "version": "2.13.1",
+  "version": "2.14.0",
   "description": "The open source javascript graphing library that powers plotly",
   "license": "MIT",
   "main": "./lib/index.js",

package/src/components/selections/draw.js

@@ -46,6 +46,10 @@ function draw(gd) {
     }
 }
 
+function couldHaveActiveSelection(gd) {
+    return gd._context.editSelection;
+}
+
 function drawOne(gd, index) {
     // remove the existing selection if there is one.
     // because indices can change, we need to look in all selection layers
@@ -82,7 +86,7 @@ function drawOne(gd, index) {
             lineDash = 'solid';
         }
 
-        var isActiveSelection =
+        var isActiveSelection = couldHaveActiveSelection(gd) &&
             gd._fullLayout._activeSelectionIndex === index;
 
         if(isActiveSelection) {
@@ -149,6 +153,8 @@ function setClipPath(selectionPath, gd, selectionOptions) {
 
 
 function activateSelection(gd, path) {
+    if(!couldHaveActiveSelection(gd)) return;
+
     var element = path.node();
     var id = +element.getAttribute('data-index');
     if(id >= 0) {
@@ -165,6 +171,8 @@ function activateSelection(gd, path) {
 }
 
 function activateLastSelection(gd) {
+    if(!couldHaveActiveSelection(gd)) return;
+
     var id = gd._fullLayout.selections.length - 1;
     gd._fullLayout._activeSelectionIndex = id;
     gd._fullLayout._deactivateSelection = deactivateSelection;
@@ -172,6 +180,8 @@ function activateLastSelection(gd) {
 }
 
 function deactivateSelection(gd) {
+    if(!couldHaveActiveSelection(gd)) return;
+
     var id = gd._fullLayout._activeSelectionIndex;
     if(id >= 0) {
         clearOutlineControllers(gd);

package/src/components/selections/select.js

@@ -50,7 +50,14 @@ var p2r = helpers.p2r;
 var axValue = helpers.axValue;
 var getTransform = helpers.getTransform;
 
+function hasSubplot(dragOptions) {
+    // N.B. subplot may be falsy e.g zero sankey index!
+    return dragOptions.subplot !== undefined;
+}
+
 function prepSelect(evt, startX, startY, dragOptions, mode) {
+    var isCartesian = !hasSubplot(dragOptions);
+
     var isFreeMode = freeMode(mode);
     var isRectMode = rectMode(mode);
     var isOpenMode = openMode(mode);
@@ -64,7 +71,7 @@ function prepSelect(evt, startX, startY, dragOptions, mode) {
     var gd = dragOptions.gd;
     var fullLayout = gd._fullLayout;
     var immediateSelect = isSelectMode && fullLayout.newselection.mode === 'immediate' &&
-        !dragOptions.subplot; // N.B. only cartesian subplots have persistent selection
+        isCartesian; // N.B. only cartesian subplots have persistent selection
 
     var zoomLayer = fullLayout._zoomlayer;
     var dragBBox = dragOptions.element.getBoundingClientRect();
@@ -112,9 +119,9 @@ function prepSelect(evt, startX, startY, dragOptions, mode) {
             opacity: isDrawMode ? newStyle.opacity / 2 : 1,
             fill: (isDrawMode && !isOpenMode) ? newStyle.fillcolor : 'none',
             stroke: newStyle.line.color || (
-                dragOptions.subplot !== undefined ?
-                    '#7f7f7f' : // non-cartesian subplot
-                    Color.contrast(gd._fullLayout.plot_bgcolor) // cartesian subplot
+                isCartesian ?
+                    Color.contrast(gd._fullLayout.plot_bgcolor) :
+                    '#7f7f7f' // non-cartesian subplot
             ),
             'stroke-dasharray': dashStyle(newStyle.line.dash, newStyle.line.width),
             'stroke-width': newStyle.line.width + 'px',
@@ -145,6 +152,8 @@ function prepSelect(evt, startX, startY, dragOptions, mode) {
 
     if(immediateSelect && !evt.shiftKey) {
         dragOptions._clearSubplotSelections = function() {
+            if(!isCartesian) return;
+
             var xRef = xAxis._id;
             var yRef = yAxis._id;
             deselectSubplot(gd, xRef, yRef, searchTraces);
@@ -165,6 +174,8 @@ function prepSelect(evt, startX, startY, dragOptions, mode) {
             }
 
             if(selectionErased) {
+                gd._fullLayout._noEmitSelectedAtStart = true;
+
                 Registry.call('_guiRelayout', gd, {
                     selections: list
                 });
@@ -306,10 +317,10 @@ function prepSelect(evt, startX, startY, dragOptions, mode) {
         displayOutlines(convertPoly(mergedPolygons, isOpenMode), outlines, dragOptions);
 
         if(isSelectMode) {
-            var _res = reselect(gd);
+            var _res = reselect(gd, false);
             var extraPoints = _res.eventData ? _res.eventData.points.slice() : [];
 
-            _res = reselect(gd, selectionTesters, searchTraces, dragOptions);
+            _res = reselect(gd, false, selectionTesters, searchTraces, dragOptions);
             selectionTesters = _res.selectionTesters;
             eventData = _res.eventData;
 
@@ -403,9 +414,13 @@ function prepSelect(evt, startX, startY, dragOptions, mode) {
                             }
                         }
 
-                        Registry.call('_guiRelayout', gd, {
-                            selections: subSelections
-                        });
+                        if(subSelections.length < allSelections.length) {
+                            gd._fullLayout._noEmitSelectedAtStart = true;
+
+                            Registry.call('_guiRelayout', gd, {
+                                selections: subSelections
+                            });
+                        }
                     }
                 }
             } else {
@@ -451,7 +466,9 @@ function prepSelect(evt, startX, startY, dragOptions, mode) {
                 dragOptions.doneFnCompleted(selection);
             }
 
-            emitSelected(gd, eventData);
+            if(isSelectMode) {
+                emitSelected(gd, eventData);
+            }
         }).catch(Lib.error);
     };
 }
@@ -673,15 +690,23 @@ function coerceSelectionsCache(evt, gd, dragOptions) {
     }
 }
 
+function hasActiveShape(gd) {
+    return gd._fullLayout._activeShapeIndex >= 0;
+}
+
+function hasActiveSelection(gd) {
+    return gd._fullLayout._activeSelectionIndex >= 0;
+}
+
 function clearSelectionsCache(dragOptions, immediateSelect) {
     var dragmode = dragOptions.dragmode;
     var plotinfo = dragOptions.plotinfo;
 
     var gd = dragOptions.gd;
-    if(gd._fullLayout._activeShapeIndex >= 0) {
+    if(hasActiveShape(gd)) {
         gd._fullLayout._deactivateShape(gd);
     }
-    if(gd._fullLayout._activeSelectionIndex >= 0) {
+    if(hasActiveSelection(gd)) {
         gd._fullLayout._deactivateSelection(gd);
     }
 
@@ -709,11 +734,13 @@ function clearSelectionsCache(dragOptions, immediateSelect) {
             var selections;
             if(
                 isSelectMode &&
-                !dragOptions.subplot // only allow cartesian - no mapbox for now
+                !hasSubplot(dragOptions) // only allow cartesian - no mapbox for now
             ) {
                 selections = newSelections(outlines, dragOptions);
             }
             if(selections) {
+                gd._fullLayout._noEmitSelectedAtStart = true;
+
                 Registry.call('_guiRelayout', gd, {
                     selections: selections
                 }).then(function() {
@@ -748,7 +775,10 @@ function determineSearchTraces(gd, xAxes, yAxes, subplot) {
 
         if(trace.visible !== true || !trace._module || !trace._module.selectPoints) continue;
 
-        if(subplot && (trace.subplot === subplot || trace.geo === subplot)) {
+        if(
+            hasSubplot({subplot: subplot}) &&
+            (trace.subplot === subplot || trace.geo === subplot)
+        ) {
             searchTraces.push(createSearchInfo(trace._module, cd, xAxes[0], yAxes[0]));
         } else if(trace.type === 'splom') {
             // FIXME: make sure we don't have more than single axis for splom
@@ -1048,7 +1078,7 @@ function _doSelect(selectionTesters, searchTraces) {
     return allSelections;
 }
 
-function reselect(gd, selectionTesters, searchTraces, dragOptions) {
+function reselect(gd, mayEmitSelected, selectionTesters, searchTraces, dragOptions) {
     var hadSearchTraces = !!searchTraces;
     var plotinfo, xRef, yRef;
     if(dragOptions) {
@@ -1171,15 +1201,15 @@ function reselect(gd, selectionTesters, searchTraces, dragOptions) {
     updateSelectedState(gd, allSearchTraces, eventData);
 
     var clickmode = fullLayout.clickmode;
-    var sendEvents = clickmode.indexOf('event') > -1;
+    var sendEvents = clickmode.indexOf('event') > -1 && mayEmitSelected;
 
     if(
         !plotinfo && // get called from plot_api & plots
-        fullLayout._reselect
+        mayEmitSelected
     ) {
-        if(sendEvents) {
-            var activePolygons = getLayoutPolygons(gd, true);
+        var activePolygons = getLayoutPolygons(gd, true);
 
+        if(activePolygons.length) {
             var xref = activePolygons[0].xref;
             var yref = activePolygons[0].yref;
             if(xref && yref) {
@@ -1192,8 +1222,12 @@ function reselect(gd, selectionTesters, searchTraces, dragOptions) {
 
                 fillRangeItems(eventData, poly);
             }
+        }
 
-            emitSelected(gd, eventData);
+        if(gd._fullLayout._noEmitSelectedAtStart) {
+            gd._fullLayout._noEmitSelectedAtStart = false;
+        } else {
+            if(sendEvents) emitSelected(gd, eventData);
         }
 
         fullLayout._reselect = false;
@@ -1215,7 +1249,7 @@ function reselect(gd, selectionTesters, searchTraces, dragOptions) {
             if(eventData.points.length) {
                 emitSelected(gd, eventData);
             } else {
-                gd.emit('plotly_deselect', null);
+                emitDeselect(gd);
             }
         }
 
@@ -1503,13 +1537,10 @@ function getFillRangeItems(dragOptions) {
 }
 
 function emitSelecting(gd, eventData) {
-    if(drawMode(gd._fullLayout.dragmode)) return;
     gd.emit('plotly_selecting', eventData);
 }
 
 function emitSelected(gd, eventData) {
-    if(drawMode(gd._fullLayout.dragmode)) return;
-
     if(eventData) {
         eventData.selections = (gd.layout || {}).selections || [];
     }
@@ -1518,7 +1549,6 @@ function emitSelected(gd, eventData) {
 }
 
 function emitDeselect(gd) {
-    if(drawMode(gd._fullLayout.dragmode)) return;
     gd.emit('plotly_deselect', null);
 }
 

package/src/plot_api/plot_config.js

@@ -114,6 +114,12 @@ var configAttributes = {
         }
     },
 
+    editSelection: {
+        valType: 'boolean',
+        dflt: true,
+        description: 'Enables moving selections.'
+    },
+
     autosizable: {
         valType: 'boolean',
         dflt: false,

package/src/plots/plots.js

@@ -3364,7 +3364,16 @@ plots.redrag = function(gd) {
 };
 
 plots.reselect = function(gd) {
-    Registry.getComponentMethod('selections', 'reselect')(gd);
+    var fullLayout = gd._fullLayout;
+
+    var A = (gd.layout || {}).selections;
+    var B = fullLayout._previousSelections;
+    fullLayout._previousSelections = A;
+
+    var mayEmitSelected = fullLayout._reselect ||
+        JSON.stringify(A) !== JSON.stringify(B);
+
+    Registry.getComponentMethod('selections', 'reselect')(gd, mayEmitSelected);
 };
 
 plots.generalUpdatePerTraceModule = function(gd, subplot, subplotCalcData, subplotLayout) {

package/src/traces/sankey/attributes.js

@@ -168,6 +168,14 @@ var attrs = module.exports = overrideAll({
     },
 
     link: {
+        arrowlen: {
+            valType: 'number',
+            min: 0,
+            dflt: 0,
+            description: [
+                'Sets the length (in px) of the links arrow, if 0 no arrow will be drawn.'
+            ].join(' ')
+        },
         label: {
             valType: 'data_array',
             dflt: [],

package/src/traces/sankey/base_plot.js

@@ -48,6 +48,7 @@ function subplotUpdateFx(gd, index) {
     var dragMode = fullLayout.dragmode;
     var cursor = fullLayout.dragmode === 'pan' ? 'move' : 'crosshair';
     var bgRect = trace._bgRect;
+    if(!bgRect) return;
 
     if(dragMode === 'pan' || dragMode === 'zoom') return;
 

package/src/traces/sankey/defaults.js

@@ -52,6 +52,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
         return Lib.coerce(linkIn, linkOut, attributes.link, attr, dflt);
     }
     coerceLink('label');
+    coerceLink('arrowlen');
     coerceLink('source');
     coerceLink('target');
     coerceLink('value');

package/src/traces/sankey/render.js

@@ -271,6 +271,7 @@ function sankeyModel(layout, d, traceIndex) {
         nodeLineWidth: trace.node.line.width,
         linkLineColor: trace.link.line.color,
         linkLineWidth: trace.link.line.width,
+        linkArrowLength: trace.link.arrowlen,
         valueFormat: trace.valueformat,
         valueSuffix: trace.valuesuffix,
         textFont: trace.textfont,
@@ -309,6 +310,7 @@ function linkModel(d, l, i) {
         linkPath: linkPath,
         linkLineColor: d.linkLineColor,
         linkLineWidth: d.linkLineWidth,
+        linkArrowLength: d.linkArrowLength,
         valueFormat: d.valueFormat,
         valueSuffix: d.valueSuffix,
         sankey: d.sankey,
@@ -318,7 +320,7 @@ function linkModel(d, l, i) {
     };
 }
 
-function createCircularClosedPathString(link) {
+function createCircularClosedPathString(link, arrowLen) {
     // Using coordinates computed by d3-sankey-circular
     var pathString = '';
     var offset = link.width / 2;
@@ -328,17 +330,17 @@ function createCircularClosedPathString(link) {
         pathString =
           // start at the left of the target node
           'M ' +
-          coords.targetX + ' ' + (coords.targetY + offset) + ' ' +
+          (coords.targetX - arrowLen) + ' ' + (coords.targetY + offset) + ' ' +
           'L' +
-          coords.rightInnerExtent + ' ' + (coords.targetY + offset) +
+          (coords.rightInnerExtent - arrowLen) + ' ' + (coords.targetY + offset) +
           'A' +
           (coords.rightLargeArcRadius + offset) + ' ' + (coords.rightSmallArcRadius + offset) + ' 0 0 1 ' +
-          (coords.rightFullExtent - offset) + ' ' + (coords.targetY - coords.rightSmallArcRadius) +
+          (coords.rightFullExtent - offset - arrowLen) + ' ' + (coords.targetY - coords.rightSmallArcRadius) +
           'L' +
-          (coords.rightFullExtent - offset) + ' ' + coords.verticalRightInnerExtent +
+          (coords.rightFullExtent - offset - arrowLen) + ' ' + coords.verticalRightInnerExtent +
           'A' +
           (coords.rightLargeArcRadius + offset) + ' ' + (coords.rightLargeArcRadius + offset) + ' 0 0 1 ' +
-          coords.rightInnerExtent + ' ' + (coords.verticalFullExtent - offset) +
+          (coords.rightInnerExtent - arrowLen) + ' ' + (coords.verticalFullExtent - offset) +
           'L' +
           coords.leftInnerExtent + ' ' + (coords.verticalFullExtent - offset) +
           'A' +
@@ -366,34 +368,35 @@ function createCircularClosedPathString(link) {
           (coords.leftLargeArcRadius - offset) + ' ' + (coords.leftLargeArcRadius - offset) + ' 0 0 0 ' +
           coords.leftInnerExtent + ' ' + (coords.verticalFullExtent + offset) +
           'L' +
-          coords.rightInnerExtent + ' ' + (coords.verticalFullExtent + offset) +
+          (coords.rightInnerExtent - arrowLen) + ' ' + (coords.verticalFullExtent + offset) +
           'A' +
           (coords.rightLargeArcRadius - offset) + ' ' + (coords.rightLargeArcRadius - offset) + ' 0 0 0 ' +
-          (coords.rightFullExtent + offset) + ' ' + coords.verticalRightInnerExtent +
+          (coords.rightFullExtent + offset - arrowLen) + ' ' + coords.verticalRightInnerExtent +
           'L' +
-          (coords.rightFullExtent + offset) + ' ' + (coords.targetY - coords.rightSmallArcRadius) +
+          (coords.rightFullExtent + offset - arrowLen) + ' ' + (coords.targetY - coords.rightSmallArcRadius) +
           'A' +
           (coords.rightLargeArcRadius - offset) + ' ' + (coords.rightSmallArcRadius - offset) + ' 0 0 0 ' +
-          coords.rightInnerExtent + ' ' + (coords.targetY - offset) +
+          (coords.rightInnerExtent - arrowLen) + ' ' + (coords.targetY - offset) +
           'L' +
-          coords.targetX + ' ' + (coords.targetY - offset) +
+          (coords.targetX - arrowLen) + ' ' + (coords.targetY - offset) +
+          (arrowLen > 0 ? 'L' + coords.targetX + ' ' + (coords.targetY) : '') +
           'Z';
     } else {
         // Bottom path
         pathString =
           // start at the left of the target node
           'M ' +
-          coords.targetX + ' ' + (coords.targetY - offset) + ' ' +
+          (coords.targetX - arrowLen) + ' ' + (coords.targetY - offset) + ' ' +
           'L' +
-          coords.rightInnerExtent + ' ' + (coords.targetY - offset) +
+          (coords.rightInnerExtent - arrowLen) + ' ' + (coords.targetY - offset) +
           'A' +
           (coords.rightLargeArcRadius + offset) + ' ' + (coords.rightSmallArcRadius + offset) + ' 0 0 0 ' +
-          (coords.rightFullExtent - offset) + ' ' + (coords.targetY + coords.rightSmallArcRadius) +
+          (coords.rightFullExtent - offset - arrowLen) + ' ' + (coords.targetY + coords.rightSmallArcRadius) +
           'L' +
-          (coords.rightFullExtent - offset) + ' ' + coords.verticalRightInnerExtent +
+          (coords.rightFullExtent - offset - arrowLen) + ' ' + coords.verticalRightInnerExtent +
           'A' +
           (coords.rightLargeArcRadius + offset) + ' ' + (coords.rightLargeArcRadius + offset) + ' 0 0 0 ' +
-          coords.rightInnerExtent + ' ' + (coords.verticalFullExtent + offset) +
+          (coords.rightInnerExtent - arrowLen) + ' ' + (coords.verticalFullExtent + offset) +
           'L' +
           coords.leftInnerExtent + ' ' + (coords.verticalFullExtent + offset) +
           'A' +
@@ -421,17 +424,18 @@ function createCircularClosedPathString(link) {
           (coords.leftLargeArcRadius - offset) + ' ' + (coords.leftLargeArcRadius - offset) + ' 0 0 1 ' +
           coords.leftInnerExtent + ' ' + (coords.verticalFullExtent - offset) +
           'L' +
-          coords.rightInnerExtent + ' ' + (coords.verticalFullExtent - offset) +
+          (coords.rightInnerExtent - arrowLen) + ' ' + (coords.verticalFullExtent - offset) +
           'A' +
           (coords.rightLargeArcRadius - offset) + ' ' + (coords.rightLargeArcRadius - offset) + ' 0 0 1 ' +
-          (coords.rightFullExtent + offset) + ' ' + coords.verticalRightInnerExtent +
+          (coords.rightFullExtent + offset - arrowLen) + ' ' + coords.verticalRightInnerExtent +
           'L' +
-          (coords.rightFullExtent + offset) + ' ' + (coords.targetY + coords.rightSmallArcRadius) +
+          (coords.rightFullExtent + offset - arrowLen) + ' ' + (coords.targetY + coords.rightSmallArcRadius) +
           'A' +
           (coords.rightLargeArcRadius - offset) + ' ' + (coords.rightSmallArcRadius - offset) + ' 0 0 1 ' +
-          coords.rightInnerExtent + ' ' + (coords.targetY + offset) +
+          (coords.rightInnerExtent - arrowLen) + ' ' + (coords.targetY + offset) +
           'L' +
-          coords.targetX + ' ' + (coords.targetY + offset) +
+          (coords.targetX - arrowLen) + ' ' + (coords.targetY + offset) +
+          (arrowLen > 0 ? 'L' + coords.targetX + ' ' + (coords.targetY) : '') +
           'Z';
     }
     return pathString;
@@ -440,11 +444,16 @@ function createCircularClosedPathString(link) {
 function linkPath() {
     var curvature = 0.5;
     function path(d) {
+        var arrowLen = d.linkArrowLength;
         if(d.link.circular) {
-            return createCircularClosedPathString(d.link);
+            return createCircularClosedPathString(d.link, arrowLen);
         } else {
+            var maxArrowLength = Math.abs((d.link.target.x0 - d.link.source.x1) / 2);
+            if(arrowLen > maxArrowLength) {
+                arrowLen = maxArrowLength;
+            }
             var x0 = d.link.source.x1;
-            var x1 = d.link.target.x0;
+            var x1 = d.link.target.x0 - arrowLen;
             var xi = interpolateNumber(x0, x1);
             var x2 = xi(curvature);
             var x3 = xi(1 - curvature);
@@ -452,15 +461,17 @@ function linkPath() {
             var y0b = d.link.y0 + d.link.width / 2;
             var y1a = d.link.y1 - d.link.width / 2;
             var y1b = d.link.y1 + d.link.width / 2;
-            return 'M' + x0 + ',' + y0a +
-                 'C' + x2 + ',' + y0a +
-                 ' ' + x3 + ',' + y1a +
-                 ' ' + x1 + ',' + y1a +
-                 'L' + x1 + ',' + y1b +
-                 'C' + x3 + ',' + y1b +
-                 ' ' + x2 + ',' + y0b +
-                 ' ' + x0 + ',' + y0b +
-                 'Z';
+            var start = 'M' + x0 + ',' + y0a;
+            var upperCurve = 'C' + x2 + ',' + y0a +
+                ' ' + x3 + ',' + y1a +
+                ' ' + x1 + ',' + y1a;
+            var lowerCurve = 'C' + x3 + ',' + y1b +
+                ' ' + x2 + ',' + y0b +
+                ' ' + x0 + ',' + y0b;
+
+            var rightEnd = arrowLen > 0 ? 'L' + (x1 + arrowLen) + ',' + (y1a + d.link.width / 2) : '';
+            rightEnd += 'L' + x1 + ',' + y1b;
+            return start + upperCurve + rightEnd + lowerCurve + 'Z';
         }
     }
     return path;

package/src/version.js

@@ -1,4 +1,4 @@
 'use strict';
 
 // package version injected by `npm run preprocess`
-exports.version = '2.13.1';
+exports.version = '2.14.0';