highcharts 11.4.3 → 11.4.4

package/es-modules/Core/MSPointer.js

@@ -12,7 +12,7 @@ import H from './Globals.js';
 const { charts, composed, doc, noop, win } = H;
 import Pointer from './Pointer.js';
 import U from './Utilities.js';
-const { addEvent, css, objectEach, pick, pushUnique, removeEvent } = U;
+const { addEvent, attr, css, defined, objectEach, pick, pushUnique, removeEvent } = U;
 /* *
  *
  *  Constants
@@ -102,6 +102,47 @@ class MSPointer extends Pointer {
             });
         }
     }
+    /**
+     * Utility to detect whether an element has, or has a parent with, a
+     * specific class name. Used on detection of tracker objects and on deciding
+     * whether hovering the tooltip should cause the active series to mouse out.
+     *
+     * @function Highcharts.Pointer#inClass
+     *
+     * @param {Highcharts.SVGDOMElement|Highcharts.HTMLDOMElement} element
+     * The element to investigate.
+     *
+     * @param {string} className
+     * The class name to look for.
+     *
+     * @return {boolean|undefined}
+     * True if either the element or one of its parents has the given class
+     * name.
+     */
+    inClass(element, className) {
+        let elem = element, elemClassName;
+        while (elem) {
+            elemClassName = attr(elem, 'class');
+            if (elemClassName) {
+                if (elemClassName.indexOf(className) !== -1) {
+                    return true;
+                }
+                if (elemClassName.indexOf('highcharts-container') !== -1) {
+                    return false;
+                }
+            }
+            // #21098 IE11 compatibility
+            elem = elem.parentNode;
+            if (elem && (
+            // HTMLElement
+            elem === document.documentElement ||
+                // Document
+                defined(elem.nodeType) &&
+                    elem.nodeType === document.nodeType)) {
+                elem = null;
+            }
+        }
+    }
     /**
      * @private
      * @function Highcharts.Pointer#onContainerPointerDown

package/es-modules/Core/Pointer.js

@@ -276,7 +276,7 @@ class Pointer {
                         ((a.coll === 'xAxis' && this.zoomX) ||
                             (a.coll === 'yAxis' && this.zoomY))),
                     selection: {
-                        originalEvent: e,
+                        originalEvent: e, // #4890
                         xAxis: [],
                         yAxis: [],
                         ...from
@@ -741,7 +741,6 @@ class Pointer {
         this.onContainerMouseMove(e);
         // #4886, MS Touch end fires mouseleave but with no related target
         if (pointer &&
-            e.relatedTarget &&
             !this.inClass(e.relatedTarget, 'highcharts-tooltip')) {
             pointer.reset();
             // Also reset the chart position, used in #149 fix
@@ -836,8 +835,8 @@ class Pointer {
                 visiblePlotOnly: true
             }) &&
             !(tooltip &&
-                tooltip.shouldStickOnContact(pEvt)) &&
-            !this.inClass(pEvt.target, 'highcharts-tracker')) {
+                tooltip.shouldStickOnContact(pEvt)) && (pEvt.target === chart.container.ownerDocument ||
+            !this.inClass(pEvt.target, 'highcharts-tracker'))) {
             this.reset();
         }
     }
@@ -885,6 +884,7 @@ class Pointer {
         if (e.type === 'touchstart') {
             pointer.pinchDown = touches;
             pointer.res = true; // Reset on next move
+            chart.mouseDownX = e.chartX;
             // Optionally move the tooltip on touchmove
         }
         else if (followTouchMove) {
@@ -1359,7 +1359,11 @@ class Pointer {
         const hoverChart = H.charts[pick(Pointer.hoverChartIndex, -1)];
         if (hoverChart &&
             hoverChart !== chart) {
-            hoverChart.pointer?.onContainerMouseLeave(e || { relatedTarget: chart.container });
+            const relatedTargetObj = { relatedTarget: chart.container };
+            if (e && !e?.relatedTarget) {
+                e = { ...relatedTargetObj, ...e };
+            }
+            hoverChart.pointer?.onContainerMouseLeave(e || relatedTargetObj);
         }
         if (!hoverChart ||
             !hoverChart.mouseIsDown) {
@@ -1375,8 +1379,8 @@ class Pointer {
         const { chart, pinchDown = [] } = this;
         let hasMoved, isInside;
         this.setHoverChartIndex();
+        e = this.normalize(e);
         if (e.touches.length === 1) {
-            e = this.normalize(e);
             isInside = chart.isInsidePlot(e.chartX - chart.plotLeft, e.chartY - chart.plotTop, {
                 visiblePlotOnly: true
             });

package/es-modules/Core/Renderer/HTML/AST.js

@@ -347,16 +347,19 @@ AST.allowedAttributes = [
     'href',
     'id',
     'in',
+    'in2',
     'markerHeight',
     'markerWidth',
     'offset',
     'opacity',
+    'operator',
     'orient',
     'padding',
     'paddingLeft',
     'paddingRight',
     'patternUnits',
     'r',
+    'radius',
     'refX',
     'refY',
     'role',
@@ -447,12 +450,15 @@ AST.allowedTags = [
     'dt',
     'em',
     'feComponentTransfer',
+    'feComposite',
     'feDropShadow',
+    'feFlood',
     'feFuncA',
     'feFuncB',
     'feFuncG',
     'feFuncR',
     'feGaussianBlur',
+    'feMorphology',
     'feOffset',
     'feMerge',
     'feMergeNode',

package/es-modules/Core/Renderer/HTML/HTMLElement.js

@@ -49,7 +49,7 @@ const decorateSVGGroup = (g, container) => {
             ...g.styles,
             // Add g attributes that correspond to CSS
             display: g.display,
-            opacity: g.opacity,
+            opacity: g.opacity, // #5075
             visibility: g.visibility
         }, 
         // The top group is appended to container
@@ -260,7 +260,7 @@ class HTMLElement extends SVGElement {
                     css(element, {
                         width: (textPxLength > textWidthNum) || rotation ?
                             textWidth + 'px' :
-                            'auto',
+                            'auto', // #16261
                         display: 'block',
                         whiteSpace: whiteSpace || 'normal' // #3331
                     });

package/es-modules/Core/Renderer/SVG/SVGElement.js

@@ -71,7 +71,7 @@ class SVGElement {
     _defaultGetter(key) {
         let ret = pick(this[key + 'Value'], // Align getter
         this[key], this.element ? this.element.getAttribute(key) : null, 0);
-        if (/^[\-0-9\.]+$/.test(ret)) { // Is numerical
+        if (/^-?[\d\.]+$/.test(ret)) { // Is numerical
             ret = parseFloat(ret);
         }
         return ret;
@@ -970,7 +970,7 @@ class SVGElement {
             // bounding box as others of the same length. Unless there is inner
             // HTML in the label. In that case, leave the numbers as is (#5899).
             if (cacheKey.indexOf('<') === -1) {
-                cacheKey = cacheKey.replace(/[0-9]/g, '0');
+                cacheKey = cacheKey.replace(/\d/g, '0');
             }
             // Properties that affect bounding box
             cacheKey += [
@@ -978,9 +978,9 @@ class SVGElement {
                 renderer.rootFontSize,
                 fontSize,
                 rotation,
-                wrapper.textWidth,
+                wrapper.textWidth, // #7874, also useHTML
                 alignValue,
-                styles.textOverflow,
+                styles.textOverflow, // #5968
                 styles.fontWeight // #12163
             ].join(',');
         }
@@ -988,7 +988,7 @@ class SVGElement {
             bBox = cache[cacheKey];
         }
         // No cache found
-        if (!bBox) {
+        if (!bBox || bBox.polygon) {
             // SVG elements
             if (isSVG || renderer.forExport) {
                 try { // Fails in Firefox if the container has display: none.
@@ -1057,6 +1057,11 @@ class SVGElement {
             if (rotation) {
                 bBox = this.getRotatedBox(bBox, rotation);
             }
+            // Create a reference to catch changes to bBox
+            const e = { bBox };
+            fireEvent(this, 'afterGetBBox', e);
+            // Pick up any changes after the fired event
+            bBox = e.bBox;
         }
         // Cache it. When loading a chart in a hidden iframe in Firefox and
         // IE/Edge, the bounding box height is 0, so don't cache it (#5620).
@@ -1097,11 +1102,31 @@ class SVGElement {
         aX = pX + baseline * cosRad90, bX = aX + wCosRad, cX = bX - height * cosRad90, dX = cX - wCosRad, aY = pY + baseline * sinRad90, bY = aY + wSinRad, cY = bY - height * sinRad90, dY = cY - wSinRad;
         // Deduct the bounding box from the corners
         const x = Math.min(aX, bX, cX, dX), y = Math.min(aY, bY, cY, dY), boxWidth = Math.max(aX, bX, cX, dX) - x, boxHeight = Math.max(aY, bY, cY, dY) - y;
+        /* Uncomment to debug boxes
+        this.renderer.path([
+            ['M', aX, aY],
+            ['L', bX, bY],
+            ['L', cX, cY],
+            ['L', dX, dY],
+            ['Z']
+        ])
+            .attr({
+                stroke: 'red',
+                'stroke-width': 1
+            })
+            .add();
+        // */
         return {
             x,
             y,
             width: boxWidth,
-            height: boxHeight
+            height: boxHeight,
+            polygon: [
+                [aX, aY],
+                [bX, bY],
+                [cX, cY],
+                [dX, dY]
+            ]
         };
     }
     /**
@@ -1318,98 +1343,6 @@ class SVGElement {
         }
         return this;
     }
-    /**
-     * Set a text path for a `text` or `label` element, allowing the text to
-     * flow along a path.
-     *
-     * In order to unset the path for an existing element, call `setTextPath`
-     * with `{ enabled: false }` as the second argument.
-     *
-     * @sample highcharts/members/renderer-textpath/ Text path demonstrated
-     *
-     * @function Highcharts.SVGElement#setTextPath
-     *
-     * @param {Highcharts.SVGElement|undefined} path
-     *        Path to follow. If undefined, it allows changing options for the
-     *        existing path.
-     *
-     * @param {Highcharts.DataLabelsTextPathOptionsObject} textPathOptions
-     *        Options.
-     *
-     * @return {Highcharts.SVGElement} Returns the SVGElement for chaining.
-     */
-    setTextPath(path, textPathOptions) {
-        // Defaults
-        textPathOptions = merge(true, {
-            enabled: true,
-            attributes: {
-                dy: -5,
-                startOffset: '50%',
-                textAnchor: 'middle'
-            }
-        }, textPathOptions);
-        const url = this.renderer.url, textWrapper = this.text || this, textPath = textWrapper.textPath, { attributes, enabled } = textPathOptions;
-        path = path || (textPath && textPath.path);
-        // Remove previously added event
-        if (textPath) {
-            textPath.undo();
-        }
-        if (path && enabled) {
-            const undo = addEvent(textWrapper, 'afterModifyTree', (e) => {
-                if (path && enabled) {
-                    // Set ID for the path
-                    let textPathId = path.attr('id');
-                    if (!textPathId) {
-                        path.attr('id', textPathId = uniqueKey());
-                    }
-                    // Set attributes for the <text>
-                    const textAttribs = {
-                        // `dx`/`dy` options must by set on <text> (parent), the
-                        // rest should be set on <textPath>
-                        x: 0,
-                        y: 0
-                    };
-                    if (defined(attributes.dx)) {
-                        textAttribs.dx = attributes.dx;
-                        delete attributes.dx;
-                    }
-                    if (defined(attributes.dy)) {
-                        textAttribs.dy = attributes.dy;
-                        delete attributes.dy;
-                    }
-                    textWrapper.attr(textAttribs);
-                    // Handle label properties
-                    this.attr({ transform: '' });
-                    if (this.box) {
-                        this.box = this.box.destroy();
-                    }
-                    // Wrap the nodes in a textPath
-                    const children = e.nodes.slice(0);
-                    e.nodes.length = 0;
-                    e.nodes[0] = {
-                        tagName: 'textPath',
-                        attributes: extend(attributes, {
-                            'text-anchor': attributes.textAnchor,
-                            href: `${url}#${textPathId}`
-                        }),
-                        children
-                    };
-                }
-            });
-            // Set the reference
-            textWrapper.textPath = { path, undo };
-        }
-        else {
-            textWrapper.attr({ dx: 0, dy: 0 });
-            delete textWrapper.textPath;
-        }
-        if (this.added) {
-            // Rebuild text after added
-            textWrapper.textCache = '';
-            this.renderer.buildText(textWrapper);
-        }
-        return this;
-    }
     /**
      * Add a shadow to the element. In styled mode, this method is not used,
      * instead use `defs` and filters.

package/es-modules/Core/Renderer/SVG/SVGLabel.js

@@ -32,6 +32,7 @@ class SVGLabel extends SVGElement {
         super(renderer, 'g');
         this.paddingLeftSetter = this.paddingSetter;
         this.paddingRightSetter = this.paddingSetter;
+        this.doUpdate = false;
         this.textStr = str;
         this.x = x;
         this.y = y;
@@ -184,6 +185,24 @@ class SVGLabel extends SVGElement {
     }
     heightSetter(value) {
         this.heightSetting = value;
+        this.doUpdate = true;
+    }
+    /**
+     * This method is executed in the end of `attr()`, after setting all
+     * attributes in the hash. In can be used to efficiently consolidate
+     * multiple attributes in one SVG property -- e.g., translate, rotate and
+     * scale are merged in one "transform" attribute in the SVG node.
+     * Also updating height or width should trigger update of the box size.
+     *
+     * @private
+     * @function Highcharts.SVGLabel#afterSetters
+     */
+    afterSetters() {
+        super.afterSetters();
+        if (this.doUpdate) {
+            this.updateBoxSize();
+            this.doUpdate = false;
+        }
     }
     /*
      * After the text element is added, get the desired size of the border
@@ -332,6 +351,7 @@ class SVGLabel extends SVGElement {
     widthSetter(value) {
         // `width:auto` => null
         this.widthSetting = isNumber(value) ? value : void 0;
+        this.doUpdate = true;
     }
     getPaddedWidth() {
         const padding = this.padding;

package/es-modules/Core/Renderer/SVG/SVGRenderer.js

@@ -429,7 +429,7 @@ class SVGRenderer {
             `highcharts-drop-shadow-${this.chartIndex}`,
             ...Object.keys(shadowOptions)
                 .map((key) => `${key}-${shadowOptions[key]}`)
-        ].join('-').toLowerCase().replace(/[^a-z0-9\-]/g, ''), options = merge({
+        ].join('-').toLowerCase().replace(/[^a-z\d\-]/g, ''), options = merge({
             color: '#000000',
             offsetX: 1,
             offsetY: 1,
@@ -443,22 +443,37 @@ class SVGRenderer {
                     id,
                     filterUnits: options.filterUnits
                 },
-                children: [{
-                        tagName: 'feDropShadow',
-                        attributes: {
-                            dx: options.offsetX,
-                            dy: options.offsetY,
-                            'flood-color': options.color,
-                            // Tuned and modified to keep a preserve compatibility
-                            // with the old settings
-                            'flood-opacity': Math.min(options.opacity * 5, 1),
-                            stdDeviation: options.width / 2
-                        }
-                    }]
+                children: this.getShadowFilterContent(options)
             });
         }
         return id;
     }
+    /**
+     * Get shadow filter content.
+     * NOTE! Overridden in es5 module for IE11 compatibility.
+     *
+     * @private
+     * @function Highcharts.SVGRenderer#getShadowFilterContent
+     *
+     * @param {ShadowOptionsObject} options
+     * The shadow options.
+     * @return {Array<AST.Node>}
+     * The shadow filter content.
+     */
+    getShadowFilterContent(options) {
+        return [{
+                tagName: 'feDropShadow',
+                attributes: {
+                    dx: options.offsetX,
+                    dy: options.offsetY,
+                    'flood-color': options.color,
+                    // Tuned and modified to keep a preserve compatibility
+                    // with the old settings
+                    'flood-opacity': Math.min(options.opacity * 5, 1),
+                    stdDeviation: options.width / 2
+                }
+            }];
+    }
     /**
      * Parse a simple HTML string into SVG tspans. Called internally when text
      * is set on an SVGElement. The function supports a subset of HTML tags, CSS
@@ -1629,7 +1644,7 @@ extend(SVGRenderer.prototype, {
         '&': '&amp;',
         '<': '&lt;',
         '>': '&gt;',
-        "'": '&#39;',
+        "'": '&#39;', // eslint-disable-line quotes
         '"': '&quot;'
     },
     /**

package/es-modules/Core/Renderer/SVG/Symbols.js

@@ -34,12 +34,12 @@ function arc(cx, cy, w, h, options) {
         // Proximity takes care of rounding errors around PI (#6971)
         longArc = pick(options.longArc, end - start - Math.PI < proximity ? 0 : 1);
         let arcSegment = [
-            'A',
-            rx,
-            ry,
-            0,
-            longArc,
-            pick(options.clockwise, 1),
+            'A', // ArcTo
+            rx, // X radius
+            ry, // Y radius
+            0, // Slanting
+            longArc, // Long or short arc
+            pick(options.clockwise, 1), // Clockwise
             cx + rx * cosEnd,
             cy + ry * sinEnd
         ];
@@ -51,11 +51,11 @@ function arc(cx, cy, w, h, options) {
         ], arcSegment);
         if (defined(innerRadius)) {
             arcSegment = [
-                'A',
-                innerRadius,
-                innerRadius,
-                0,
-                longArc,
+                'A', // ArcTo
+                innerRadius, // X radius
+                innerRadius, // Y radius
+                0, // Slanting
+                longArc, // Long or short arc
                 // Clockwise - opposite to the outer arc clockwise
                 defined(options.clockwise) ? 1 - options.clockwise : 0,
                 cx + innerRadius * cosStart,
@@ -192,13 +192,13 @@ function roundedRect(x, y, w, h, options) {
     const r = options?.r || 0;
     return [
         ['M', x + r, y],
-        ['L', x + w - r, y],
-        ['A', r, r, 0, 0, 1, x + w, y + r],
-        ['L', x + w, y + h - r],
-        ['A', r, r, 0, 0, 1, x + w - r, y + h],
-        ['L', x + r, y + h],
-        ['A', r, r, 0, 0, 1, x, y + h - r],
-        ['L', x, y + r],
+        ['L', x + w - r, y], // Top side
+        ['A', r, r, 0, 0, 1, x + w, y + r], // Top-right corner
+        ['L', x + w, y + h - r], // Right side
+        ['A', r, r, 0, 0, 1, x + w - r, y + h], // Bottom-right corner
+        ['L', x + r, y + h], // Bottom side
+        ['A', r, r, 0, 0, 1, x, y + h - r], // Bottom-left corner
+        ['L', x, y + r], // Left side
         ['A', r, r, 0, 0, 1, x + r, y],
         ['Z'] // Top-left corner
     ];

package/es-modules/Core/Responsive.js

@@ -95,7 +95,10 @@ var Responsive;
             // Undo previous rules. Before we apply a new set of rules, we
             // need to roll back completely to base options (#6291).
             if (currentResponsive) {
+                this.currentResponsive = void 0;
+                this.updatingResponsive = true;
                 this.update(currentResponsive.undoOptions, redraw, true);
+                this.updatingResponsive = false;
             }
             if (ruleIds) {
                 // Get undo-options for matching rules. The `undoOptions``
@@ -108,7 +111,9 @@ var Responsive;
                     mergedOptions: mergedOptions,
                     undoOptions: undoOptions
                 };
-                this.update(mergedOptions, redraw, true);
+                if (!this.updatingResponsive) {
+                    this.update(mergedOptions, redraw, true);
+                }
             }
             else {
                 this.currentResponsive = void 0;

package/es-modules/Core/Series/DataLabel.js

@@ -387,16 +387,7 @@ var DataLabel;
                                 // read text bounding box
                                 dataLabel.css(style).shadow(labelOptions.shadow);
                             }
-                            const textPathOptions = labelOptions[point.formatPrefix + 'TextPath'] || labelOptions.textPath;
-                            if (textPathOptions && !labelOptions.useHTML) {
-                                dataLabel.setTextPath(point.getDataLabelPath?.(dataLabel) ||
-                                    point.graphic, textPathOptions);
-                                if (point.dataLabelPath &&
-                                    !textPathOptions.enabled) {
-                                    // Clean the DOM
-                                    point.dataLabelPath = (point.dataLabelPath.destroy());
-                                }
-                            }
+                            fireEvent(dataLabel, 'beforeAddingDataLabel', { labelOptions, point });
                             if (!dataLabel.added) {
                                 dataLabel.add(dataLabelsGroup);
                             }

package/es-modules/Core/Series/DataSeriesComposition.js

@@ -279,8 +279,6 @@ export default DataSeriesAdditions;
 /* *
  * Indicates data is structured as columns instead of rows.
  *
- * @requires  es-modules/Data/DataSeriesComposition.js
- *
  * @type      {boolean}
  * @since     Future
  * @apioption plotOptions.series.dataAsColumns

package/es-modules/Core/Series/Point.js

@@ -207,12 +207,7 @@ class Point {
             point.x = series.xAxis.nameToX(point);
         }
         if (typeof point.x === 'undefined' && series) {
-            if (typeof x === 'undefined') {
-                point.x = series.autoIncrement();
-            }
-            else {
-                point.x = x;
-            }
+            point.x = x ?? series.autoIncrement();
         }
         else if (isNumber(options.x) && series.options.relativeXValue) {
             point.x = series.autoIncrement(options.x);
@@ -955,16 +950,18 @@ class Point {
                 // callback function is different
                 point.hcEvents?.[eventType]?.map((el) => el.fn)
                     .indexOf(userEvent) === -1)) {
-            addEvent(point, eventType, userEvent);
-            point.hasImportedEvents = true;
+            // While updating the existing callback event the old one should be
+            // removed
+            point.importedUserEvent?.();
+            point.importedUserEvent = addEvent(point, eventType, userEvent);
         }
-        else if (point.hasImportedEvents &&
+        else if (point.importedUserEvent &&
             !userEvent &&
             point.hcEvents?.[eventType]) {
             removeEvent(point, eventType);
             delete point.hcEvents[eventType];
             if (!Object.keys(point.hcEvents)) {
-                point.hasImportedEvents = false;
+                delete point.importedUserEvent;
             }
         }
     }