highcharts 8.1.0 → 8.2.2

package/es-modules/{parts → Core/Renderer/SVG}/SVGElement.js

@@ -7,12 +7,162 @@
  *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  *
  * */
-'use strict';
-import Color from './Color.js';
-import H from './Globals.js';
+import A from '../../Animation/AnimationUtilities.js';
+var animate = A.animate, animObject = A.animObject, stop = A.stop;
+import Color from '../../Color/Color.js';
+import H from '../../Globals.js';
 var deg2rad = H.deg2rad, doc = H.doc, hasTouch = H.hasTouch, isFirefox = H.isFirefox, noop = H.noop, svg = H.svg, SVG_NS = H.SVG_NS, win = H.win;
-import U from './Utilities.js';
-var animate = U.animate, animObject = U.animObject, attr = U.attr, createElement = U.createElement, css = U.css, defined = U.defined, erase = U.erase, extend = U.extend, fireEvent = U.fireEvent, inArray = U.inArray, isArray = U.isArray, isFunction = U.isFunction, isNumber = U.isNumber, isString = U.isString, merge = U.merge, objectEach = U.objectEach, pick = U.pick, pInt = U.pInt, stop = U.stop, uniqueKey = U.uniqueKey;
+import U from '../../Utilities.js';
+var attr = U.attr, createElement = U.createElement, css = U.css, defined = U.defined, erase = U.erase, extend = U.extend, fireEvent = U.fireEvent, isArray = U.isArray, isFunction = U.isFunction, isNumber = U.isNumber, isString = U.isString, merge = U.merge, objectEach = U.objectEach, pick = U.pick, pInt = U.pInt, syncTimeout = U.syncTimeout, uniqueKey = U.uniqueKey;
+/**
+ * The horizontal alignment of an element.
+ *
+ * @typedef {"center"|"left"|"right"} Highcharts.AlignValue
+ */
+/**
+ * Options to align the element relative to the chart or another box.
+ *
+ * @interface Highcharts.AlignObject
+ */ /**
+* Horizontal alignment. Can be one of `left`, `center` and `right`.
+*
+* @name Highcharts.AlignObject#align
+* @type {Highcharts.AlignValue|undefined}
+*
+* @default left
+*/ /**
+* Vertical alignment. Can be one of `top`, `middle` and `bottom`.
+*
+* @name Highcharts.AlignObject#verticalAlign
+* @type {Highcharts.VerticalAlignValue|undefined}
+*
+* @default top
+*/ /**
+* Horizontal pixel offset from alignment.
+*
+* @name Highcharts.AlignObject#x
+* @type {number|undefined}
+*
+* @default 0
+*/ /**
+* Vertical pixel offset from alignment.
+*
+* @name Highcharts.AlignObject#y
+* @type {number|undefined}
+*
+* @default 0
+*/ /**
+* Use the `transform` attribute with translateX and translateY custom
+* attributes to align this elements rather than `x` and `y` attributes.
+*
+* @name Highcharts.AlignObject#alignByTranslate
+* @type {boolean|undefined}
+*
+* @default false
+*/
+/**
+ * Bounding box of an element.
+ *
+ * @interface Highcharts.BBoxObject
+ * @extends Highcharts.PositionObject
+ */ /**
+* Height of the bounding box.
+*
+* @name Highcharts.BBoxObject#height
+* @type {number}
+*/ /**
+* Width of the bounding box.
+*
+* @name Highcharts.BBoxObject#width
+* @type {number}
+*/ /**
+* Horizontal position of the bounding box.
+*
+* @name Highcharts.BBoxObject#x
+* @type {number}
+*/ /**
+* Vertical position of the bounding box.
+*
+* @name Highcharts.BBoxObject#y
+* @type {number}
+*/
+/**
+ * An object of key-value pairs for SVG attributes. Attributes in Highcharts
+ * elements for the most parts correspond to SVG, but some are specific to
+ * Highcharts, like `zIndex`, `rotation`, `rotationOriginX`,
+ * `rotationOriginY`, `translateX`, `translateY`, `scaleX` and `scaleY`. SVG
+ * attributes containing a hyphen are _not_ camel-cased, they should be
+ * quoted to preserve the hyphen.
+ *
+ * @example
+ * {
+ *     'stroke': '#ff0000', // basic
+ *     'stroke-width': 2, // hyphenated
+ *     'rotation': 45 // custom
+ *     'd': ['M', 10, 10, 'L', 30, 30, 'z'] // path definition, note format
+ * }
+ *
+ * @interface Highcharts.SVGAttributes
+ */ /**
+* @name Highcharts.SVGAttributes#[key:string]
+* @type {*}
+*/ /**
+* @name Highcharts.SVGAttributes#d
+* @type {string|Highcharts.SVGPathArray|undefined}
+*/ /**
+* @name Highcharts.SVGAttributes#fill
+* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject|undefined}
+*/ /**
+* @name Highcharts.SVGAttributes#inverted
+* @type {boolean|undefined}
+*/ /**
+* @name Highcharts.SVGAttributes#matrix
+* @type {Array<number>|undefined}
+*/ /**
+* @name Highcharts.SVGAttributes#rotation
+* @type {number|undefined}
+*/ /**
+* @name Highcharts.SVGAttributes#rotationOriginX
+* @type {number|undefined}
+*/ /**
+* @name Highcharts.SVGAttributes#rotationOriginY
+* @type {number|undefined}
+*/ /**
+* @name Highcharts.SVGAttributes#scaleX
+* @type {number|undefined}
+*/ /**
+* @name Highcharts.SVGAttributes#scaleY
+* @type {number|undefined}
+*/ /**
+* @name Highcharts.SVGAttributes#stroke
+* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject|undefined}
+*/ /**
+* @name Highcharts.SVGAttributes#style
+* @type {string|Highcharts.CSSObject|undefined}
+*/ /**
+* @name Highcharts.SVGAttributes#translateX
+* @type {number|undefined}
+*/ /**
+* @name Highcharts.SVGAttributes#translateY
+* @type {number|undefined}
+*/ /**
+* @name Highcharts.SVGAttributes#zIndex
+* @type {number|undefined}
+*/
+/**
+ * An SVG DOM element. The type is a reference to the regular SVGElement in the
+ * global scope.
+ *
+ * @typedef {globals.GlobalSVGElement} Highcharts.SVGDOMElement
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/SVGElement
+ */
+/**
+ * The vertical alignment of an element.
+ *
+ * @typedef {"bottom"|"middle"|"top"} Highcharts.VerticalAlignValue
+ */
+''; // detach doclets above
 /* eslint-disable no-invalid-this, valid-jsdoc */
 /**
  * The SVGElement prototype is a JavaScript wrapper for SVG elements used in the
@@ -63,18 +213,6 @@ var SVGElement = /** @class */ (function () {
             'anchorY',
             'rounded'
         ];
-        /**
-         * For labels, these CSS properties are applied to the `text` node directly.
-         *
-         * @private
-         * @name Highcharts.SVGElement#textProps
-         * @type {Array<string>}
-         */
-        this.textProps = [
-            'color', 'cursor', 'direction', 'fontFamily', 'fontSize', 'fontStyle',
-            'fontWeight', 'lineHeight', 'textAlign', 'textDecoration',
-            'textOutline', 'textOverflow', 'width'
-        ];
         this.width = void 0;
     }
     /* *
@@ -139,10 +277,12 @@ var SVGElement = /** @class */ (function () {
         if (parent) {
             this.parentGroup = parent;
         }
-        // mark as inverted
+        // Mark as inverted
         this.parentInverted = parent && parent.inverted;
-        // build formatted text
-        if (typeof this.textStr !== 'undefined') {
+        // Build formatted text
+        if (typeof this.textStr !== 'undefined' &&
+            this.element.nodeName === 'text' // Not for SVGLabel instances
+        ) {
             renderer.buildText(this);
         }
         // Mark as added
@@ -321,7 +461,7 @@ var SVGElement = /** @class */ (function () {
      * @param {Highcharts.SVGAttributes} params
      *        SVG attributes or CSS to animate.
      *
-     * @param {boolean|Highcharts.AnimationOptionsObject} [options]
+     * @param {boolean|Partial<Highcharts.AnimationOptionsObject>} [options]
      *        Animation options.
      *
      * @param {Function} [complete]
@@ -331,7 +471,8 @@ var SVGElement = /** @class */ (function () {
      *         Returns the SVGElement for chaining.
      */
     SVGElement.prototype.animate = function (params, options, complete) {
-        var animOptions = animObject(pick(options, this.renderer.globalAnimation, true));
+        var _this = this;
+        var animOptions = animObject(pick(options, this.renderer.globalAnimation, true)), deferTime = animOptions.defer;
         // When the page is hidden save resources in the background by not
         // running animation at all (#9749).
         if (pick(doc.hidden, doc.msHidden, doc.webkitHidden, false)) {
@@ -343,7 +484,12 @@ var SVGElement = /** @class */ (function () {
             if (complete) {
                 animOptions.complete = complete;
             }
-            animate(this, params, animOptions);
+            // If defer option is defined delay the animation #12901
+            syncTimeout(function () {
+                if (_this.element) {
+                    animate(_this, params, animOptions);
+                }
+            }, deferTime);
         }
         else {
             this.attr(params, void 0, complete);
@@ -529,7 +675,7 @@ var SVGElement = /** @class */ (function () {
                 }
                 // Special handling of symbol attributes
                 if (this.symbolName &&
-                    inArray(key, symbolCustomAttribs) !== -1) {
+                    symbolCustomAttribs.indexOf(key) !== -1) {
                     if (!hasSetSymbolSize) {
                         this.symbolAttr(hash);
                         hasSetSymbolSize = true;
@@ -1015,7 +1161,7 @@ var SVGElement = /** @class */ (function () {
     /**
      * @private
      * @function Highcharts.SVGElement#fillSetter
-     * @param {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject} value
+     * @param {Highcharts.ColorType} value
      * @param {string} key
      * @param {Highcharts.SVGDOMElement} element
      */
@@ -1328,8 +1474,10 @@ var SVGElement = /** @class */ (function () {
                     handler.call(element, e);
                 }
                 touchEventFired = true;
-                // prevent other events from being fired. #9682
-                e.preventDefault();
+                if (e.cancelable !== false) {
+                    // prevent other events from being fired. #9682
+                    e.preventDefault();
+                }
             };
             element.onclick = function (e) {
                 // Do not call onclick handler if touch event was fired already.
@@ -1352,8 +1500,11 @@ var SVGElement = /** @class */ (function () {
      * @param {Highcharts.SVGDOMElement} element
      */
     SVGElement.prototype.opacitySetter = function (value, key, element) {
-        this[key] = value;
-        element.setAttribute(key, value);
+        // Round off to avoid float errors, like tests where opacity lands on
+        // 9.86957e-06 instead of 0
+        var opacity = Number(Number(value).toFixed(3));
+        this.opacity = opacity;
+        element.setAttribute(key, opacity);
     };
     /**
      * Remove a class name from the element.
@@ -1366,9 +1517,12 @@ var SVGElement = /** @class */ (function () {
      * @return {Highcharts.SVGElement} Returns the SVG element for chainability.
      */
     SVGElement.prototype.removeClass = function (className) {
-        return this.attr('class', ('' + this.attr('class')).replace(isString(className) ?
-            new RegExp(" ?" + className + " ?") : // #12064
-            className, ''));
+        return this.attr('class', ('' + this.attr('class'))
+            .replace(isString(className) ?
+            new RegExp("(^| )" + className + "( |$)") : // #12064, #13590
+            className, ' ')
+            .replace(/ +/g, ' ')
+            .trim());
     };
     /**
      * @private

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

@@ -0,0 +1,410 @@
+/* *
+ *
+ *  (c) 2010-2020 Torstein Honsi
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import SVGElement from './SVGElement.js';
+import U from '../../Utilities.js';
+var defined = U.defined, extend = U.extend, isNumber = U.isNumber, merge = U.merge, removeEvent = U.removeEvent;
+/**
+ * SVG label to render text.
+ * @private
+ * @class
+ * @name Highcharts.SVGLabel
+ * @augments Highcharts.SVGElement
+ */
+var SVGLabel = /** @class */ (function (_super) {
+    __extends(SVGLabel, _super);
+    /* *
+     *
+     *  Constructors
+     *
+     * */
+    function SVGLabel(renderer, str, x, y, shape, anchorX, anchorY, useHTML, baseline, className) {
+        var _this = _super.call(this) || this;
+        _this.init(renderer, 'g');
+        _this.textStr = str;
+        _this.x = x;
+        _this.y = y;
+        _this.anchorX = anchorX;
+        _this.anchorY = anchorY;
+        _this.baseline = baseline;
+        _this.className = className;
+        if (className !== 'button') {
+            _this.addClass('highcharts-label');
+        }
+        if (className) {
+            _this.addClass('highcharts-' + className);
+        }
+        _this.text = renderer.text('', 0, 0, useHTML)
+            .attr({
+            zIndex: 1
+        });
+        // Validate the shape argument
+        var hasBGImage;
+        if (typeof shape === 'string') {
+            hasBGImage = /^url\((.*?)\)$/.test(shape);
+            if (_this.renderer.symbols[shape] || hasBGImage) {
+                _this.symbolKey = shape;
+            }
+        }
+        _this.bBox = SVGLabel.emptyBBox;
+        _this.padding = 3;
+        _this.paddingLeft = 0;
+        _this.baselineOffset = 0;
+        _this.needsBox = renderer.styledMode || hasBGImage;
+        _this.deferredAttr = {};
+        _this.alignFactor = 0;
+        return _this;
+    }
+    /* *
+     *
+     *  Functions
+     *
+     * */
+    SVGLabel.prototype.alignSetter = function (value) {
+        var alignFactor = {
+            left: 0,
+            center: 0.5,
+            right: 1
+        }[value];
+        if (alignFactor !== this.alignFactor) {
+            this.alignFactor = alignFactor;
+            // Bounding box exists, means we're dynamically changing
+            if (this.bBox && isNumber(this.xSetting)) {
+                this.attr({ x: this.xSetting }); // #5134
+            }
+        }
+    };
+    SVGLabel.prototype.anchorXSetter = function (value, key) {
+        this.anchorX = value;
+        this.boxAttr(key, Math.round(value) - this.getCrispAdjust() - this.xSetting);
+    };
+    SVGLabel.prototype.anchorYSetter = function (value, key) {
+        this.anchorY = value;
+        this.boxAttr(key, value - this.ySetting);
+    };
+    /*
+     * Set a box attribute, or defer it if the box is not yet created
+     */
+    SVGLabel.prototype.boxAttr = function (key, value) {
+        if (this.box) {
+            this.box.attr(key, value);
+        }
+        else {
+            this.deferredAttr[key] = value;
+        }
+    };
+    /*
+     * Pick up some properties and apply them to the text instead of the
+     * wrapper.
+     */
+    SVGLabel.prototype.css = function (styles) {
+        if (styles) {
+            var textStyles = {}, isWidth, isFontStyle;
+            // Create a copy to avoid altering the original object
+            // (#537)
+            styles = merge(styles);
+            SVGLabel.textProps.forEach(function (prop) {
+                if (typeof styles[prop] !== 'undefined') {
+                    textStyles[prop] = styles[prop];
+                    delete styles[prop];
+                }
+            });
+            this.text.css(textStyles);
+            isWidth = 'width' in textStyles;
+            isFontStyle = 'fontSize' in textStyles ||
+                'fontWeight' in textStyles;
+            // Update existing text, box (#9400, #12163)
+            if (isWidth || isFontStyle) {
+                this.updateBoxSize();
+                // Keep updated (#9400, #12163)
+                if (isFontStyle) {
+                    this.updateTextPadding();
+                }
+            }
+        }
+        return SVGElement.prototype.css.call(this, styles);
+    };
+    /*
+     * Destroy and release memory.
+     */
+    SVGLabel.prototype.destroy = function () {
+        // Added by button implementation
+        removeEvent(this.element, 'mouseenter');
+        removeEvent(this.element, 'mouseleave');
+        if (this.text) {
+            this.text.destroy();
+        }
+        if (this.box) {
+            this.box = this.box.destroy();
+        }
+        // Call base implementation to destroy the rest
+        SVGElement.prototype.destroy.call(this);
+        return void 0;
+    };
+    SVGLabel.prototype.fillSetter = function (value, key) {
+        if (value) {
+            this.needsBox = true;
+        }
+        // for animation getter (#6776)
+        this.fill = value;
+        this.boxAttr(key, value);
+    };
+    /*
+     * Return the bounding box of the box, not the group.
+     */
+    SVGLabel.prototype.getBBox = function () {
+        var bBox = this.bBox;
+        var padding = this.padding;
+        return {
+            width: bBox.width + 2 * padding,
+            height: bBox.height + 2 * padding,
+            x: bBox.x - padding,
+            y: bBox.y - padding
+        };
+    };
+    SVGLabel.prototype.getCrispAdjust = function () {
+        return this.renderer.styledMode && this.box ?
+            this.box.strokeWidth() % 2 / 2 :
+            (this['stroke-width'] ? parseInt(this['stroke-width'], 10) : 0) % 2 / 2;
+    };
+    SVGLabel.prototype.heightSetter = function (value) {
+        this.heightSetting = value;
+    };
+    // Event handling. In case of useHTML, we need to make sure that events
+    // are captured on the span as well, and that mouseenter/mouseleave
+    // between the SVG group and the HTML span are not treated as real
+    // enter/leave events. #13310.
+    SVGLabel.prototype.on = function (eventType, handler) {
+        var label = this;
+        var text = label.text;
+        var span = text && text.element.tagName === 'SPAN' ? text : void 0;
+        var selectiveHandler;
+        if (span) {
+            selectiveHandler = function (e) {
+                if ((eventType === 'mouseenter' ||
+                    eventType === 'mouseleave') &&
+                    e.relatedTarget instanceof Element &&
+                    (label.element.contains(e.relatedTarget) ||
+                        span.element.contains(e.relatedTarget))) {
+                    return;
+                }
+                handler.call(label.element, e);
+            };
+            span.on(eventType, selectiveHandler);
+        }
+        SVGElement.prototype.on.call(label, eventType, selectiveHandler || handler);
+        return label;
+    };
+    /*
+     * After the text element is added, get the desired size of the border
+     * box and add it before the text in the DOM.
+     */
+    SVGLabel.prototype.onAdd = function () {
+        var str = this.textStr;
+        this.text.add(this);
+        this.attr({
+            // Alignment is available now  (#3295, 0 not rendered if given
+            // as a value)
+            text: (defined(str) ? str : ''),
+            x: this.x,
+            y: this.y
+        });
+        if (this.box && defined(this.anchorX)) {
+            this.attr({
+                anchorX: this.anchorX,
+                anchorY: this.anchorY
+            });
+        }
+    };
+    SVGLabel.prototype.paddingSetter = function (value) {
+        if (defined(value) && value !== this.padding) {
+            this.padding = value;
+            this.updateTextPadding();
+        }
+    };
+    SVGLabel.prototype.paddingLeftSetter = function (value) {
+        if (defined(value) && value !== this.paddingLeft) {
+            this.paddingLeft = value;
+            this.updateTextPadding();
+        }
+    };
+    SVGLabel.prototype.rSetter = function (value, key) {
+        this.boxAttr(key, value);
+    };
+    SVGLabel.prototype.shadow = function (b) {
+        if (b && !this.renderer.styledMode) {
+            this.updateBoxSize();
+            if (this.box) {
+                this.box.shadow(b);
+            }
+        }
+        return this;
+    };
+    SVGLabel.prototype.strokeSetter = function (value, key) {
+        // for animation getter (#6776)
+        this.stroke = value;
+        this.boxAttr(key, value);
+    };
+    SVGLabel.prototype['stroke-widthSetter'] = function (value, key) {
+        if (value) {
+            this.needsBox = true;
+        }
+        this['stroke-width'] = value;
+        this.boxAttr(key, value);
+    };
+    SVGLabel.prototype['text-alignSetter'] = function (value) {
+        this.textAlign = value;
+    };
+    SVGLabel.prototype.textSetter = function (text) {
+        if (typeof text !== 'undefined') {
+            // Must use .attr to ensure transforms are done (#10009)
+            this.text.attr({ text: text });
+        }
+        this.updateBoxSize();
+        this.updateTextPadding();
+    };
+    /*
+     * This function runs after the label is added to the DOM (when the bounding
+     * box is available), and after the text of the label is updated to detect
+     * the new bounding box and reflect it in the border box.
+     */
+    SVGLabel.prototype.updateBoxSize = function () {
+        var style = this.text.element.style, crispAdjust, attribs = {};
+        var padding = this.padding;
+        var paddingLeft = this.paddingLeft;
+        // #12165 error when width is null (auto)
+        // #12163 when fontweight: bold, recalculate bBox withot cache
+        // #3295 && 3514 box failure when string equals 0
+        var bBox = ((!isNumber(this.widthSetting) || !isNumber(this.heightSetting) || this.textAlign) &&
+            defined(this.text.textStr)) ?
+            this.text.getBBox() : SVGLabel.emptyBBox;
+        this.width = ((this.widthSetting || bBox.width || 0) +
+            2 * padding +
+            paddingLeft);
+        this.height = (this.heightSetting || bBox.height || 0) + 2 * padding;
+        // Update the label-scoped y offset. Math.min because of inline
+        // style (#9400)
+        this.baselineOffset = padding + Math.min(this.renderer.fontMetrics(style && style.fontSize, this.text).b, 
+        // When the height is 0, there is no bBox, so go with the font
+        // metrics. Highmaps CSS demos.
+        bBox.height || Infinity);
+        if (this.needsBox) {
+            // Create the border box if it is not already present
+            if (!this.box) {
+                // Symbol definition exists (#5324)
+                var box = this.box = this.symbolKey ?
+                    this.renderer.symbol(this.symbolKey) :
+                    this.renderer.rect();
+                box.addClass(// Don't use label className for buttons
+                (this.className === 'button' ? '' : 'highcharts-label-box') +
+                    (this.className ? ' highcharts-' + this.className + '-box' : ''));
+                box.add(this);
+                crispAdjust = this.getCrispAdjust();
+                attribs.x = crispAdjust;
+                attribs.y = (this.baseline ? -this.baselineOffset : 0) + crispAdjust;
+            }
+            // Apply the box attributes
+            attribs.width = Math.round(this.width);
+            attribs.height = Math.round(this.height);
+            this.box.attr(extend(attribs, this.deferredAttr));
+            this.deferredAttr = {};
+        }
+        this.bBox = bBox;
+    };
+    /*
+     * This function runs after setting text or padding, but only if padding
+     * is changed.
+     */
+    SVGLabel.prototype.updateTextPadding = function () {
+        var text = this.text;
+        // Determine y based on the baseline
+        var textY = this.baseline ? 0 : this.baselineOffset;
+        var textX = this.paddingLeft + this.padding;
+        // compensate for alignment
+        if (defined(this.widthSetting) &&
+            this.bBox &&
+            (this.textAlign === 'center' || this.textAlign === 'right')) {
+            textX += { center: 0.5, right: 1 }[this.textAlign] *
+                (this.widthSetting - this.bBox.width);
+        }
+        // update if anything changed
+        if (textX !== text.x || textY !== text.y) {
+            text.attr('x', textX);
+            // #8159 - prevent misplaced data labels in treemap
+            // (useHTML: true)
+            if (text.hasBoxWidthChanged) {
+                this.bBox = text.getBBox(true);
+                this.updateBoxSize();
+            }
+            if (typeof textY !== 'undefined') {
+                text.attr('y', textY);
+            }
+        }
+        // record current values
+        text.x = textX;
+        text.y = textY;
+    };
+    SVGLabel.prototype.widthSetter = function (value) {
+        // width:auto => null
+        this.widthSetting = isNumber(value) ? value : void 0;
+    };
+    SVGLabel.prototype.xSetter = function (value) {
+        this.x = value; // for animation getter
+        if (this.alignFactor) {
+            value -= this.alignFactor * ((this.widthSetting || this.bBox.width) +
+                2 * this.padding);
+            // Force animation even when setting to the same value (#7898)
+            this['forceAnimate:x'] = true;
+        }
+        this.xSetting = Math.round(value);
+        this.attr('translateX', this.xSetting);
+    };
+    SVGLabel.prototype.ySetter = function (value) {
+        this.ySetting = this.y = Math.round(value);
+        this.attr('translateY', this.ySetting);
+    };
+    /* *
+     *
+     *  Static Properties
+     *
+     * */
+    SVGLabel.emptyBBox = { width: 0, height: 0, x: 0, y: 0 };
+    /* *
+     *
+     *  Properties
+     *
+     * */
+    /**
+     * For labels, these CSS properties are applied to the `text` node directly.
+     *
+     * @private
+     * @name Highcharts.SVGLabel#textProps
+     * @type {Array<string>}
+     */
+    SVGLabel.textProps = [
+        'color', 'cursor', 'direction', 'fontFamily', 'fontSize', 'fontStyle',
+        'fontWeight', 'lineHeight', 'textAlign', 'textDecoration',
+        'textOutline', 'textOverflow', 'width'
+    ];
+    return SVGLabel;
+}(SVGElement));
+export default SVGLabel;