highcharts 8.1.0 → 8.2.2

package/modules/annotations-advanced.src.js

@@ -1,5 +1,5 @@
 /**
- * @license Highcharts JS v8.1.0 (2020-05-05)
+ * @license Highcharts JS v8.2.2 (2020-10-22)
  *
  * Annotations module
  *
@@ -28,7 +28,7 @@
             obj[path] = fn.apply(null, args);
         }
     }
-    _registerModule(_modules, 'annotations/eventEmitterMixin.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js']], function (H, U) {
+    _registerModule(_modules, 'Extensions/Annotations/Mixins/EventEmitterMixin.js', [_modules['Core/Globals.js'], _modules['Core/Utilities.js']], function (H, U) {
         /* *
          *
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
@@ -36,7 +36,6 @@
          * */
         var addEvent = U.addEvent,
             fireEvent = U.fireEvent,
-            inArray = U.inArray,
             objectEach = U.objectEach,
             pick = U.pick,
             removeEvent = U.removeEvent;
@@ -59,7 +58,8 @@
                 addEvents: function () {
                     var emitter = this,
             addMouseDownEvent = function (element) {
-                        addEvent(element, 'mousedown',
+                        addEvent(element,
+            H.isTouchDevice ? 'touchstart' : 'mousedown',
             function (e) {
                             emitter.onMouseDown(e);
                     });
@@ -79,7 +79,7 @@
                         emitter.target);
                         }
                     };
-                    if (inArray(type, emitter.nonDOMEvents || []) === -1) {
+                    if ((emitter.nonDOMEvents || []).indexOf(type) === -1) {
                         emitter.graphic.on(type, eventHandler);
                     }
                     else {
@@ -139,7 +139,7 @@
                 prevChartY = e.chartY;
                 emitter.cancelClick = false;
                 emitter.chart.hasDraggedAnnotation = true;
-                emitter.removeDrag = addEvent(H.doc, 'mousemove', function (e) {
+                emitter.removeDrag = addEvent(H.doc, H.isTouchDevice ? 'touchmove' : 'mousemove', function (e) {
                     emitter.hasDragged = true;
                     e = pointer.normalize(e);
                     e.prevChartX = prevChartX;
@@ -148,7 +148,7 @@
                     prevChartX = e.chartX;
                     prevChartY = e.chartY;
                 });
-                emitter.removeMouseUp = addEvent(H.doc, 'mouseup', function (e) {
+                emitter.removeMouseUp = addEvent(H.doc, H.isTouchDevice ? 'touchend' : 'mouseup', function (e) {
                     emitter.cancelClick = emitter.hasDragged;
                     emitter.hasDragged = false;
                     emitter.chart.hasDraggedAnnotation = false;
@@ -268,7 +268,7 @@
 
         return eventEmitterMixin;
     });
-    _registerModule(_modules, 'annotations/ControlPoint.js', [_modules['parts/Utilities.js'], _modules['annotations/eventEmitterMixin.js']], function (U, eventEmitterMixin) {
+    _registerModule(_modules, 'Extensions/Annotations/ControlPoint.js', [_modules['Core/Utilities.js'], _modules['Extensions/Annotations/Mixins/EventEmitterMixin.js']], function (U, eventEmitterMixin) {
         /* *
          *
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
@@ -420,7 +420,7 @@
 
         return ControlPoint;
     });
-    _registerModule(_modules, 'annotations/MockPoint.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js']], function (H, U) {
+    _registerModule(_modules, 'Extensions/Annotations/MockPoint.js', [_modules['Core/Globals.js'], _modules['Core/Utilities.js'], _modules['Core/Axis/Axis.js']], function (H, U, Axis) {
         /* *
          *
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
@@ -686,7 +686,7 @@
                     axisOptions = options[axisName],
                     chart = this.series.chart;
                 this.series[axisName] =
-                    axisOptions instanceof H.Axis ?
+                    axisOptions instanceof Axis ?
                         axisOptions :
                         defined(axisOptions) ?
                             (chart[axisName][axisOptions] ||
@@ -712,7 +712,7 @@
              * Returns a label config object - the same as
              * Highcharts.Point.prototype.getLabelConfig
              * @private
-             * @return {Annotation.MockPoint.LabelConfig} the point's label config
+             * @return {Highcharts.AnnotationMockLabelOptionsObject} the point's label config
              */
             MockPoint.prototype.getLabelConfig = function () {
                 return {
@@ -871,12 +871,16 @@
 
         return MockPoint;
     });
-    _registerModule(_modules, 'annotations/controllable/controllableMixin.js', [_modules['parts/Utilities.js'], _modules['annotations/ControlPoint.js'], _modules['annotations/MockPoint.js'], _modules['parts/Tooltip.js']], function (U, ControlPoint, MockPoint, Tooltip) {
+    _registerModule(_modules, 'Extensions/Annotations/Mixins/ControllableMixin.js', [_modules['Extensions/Annotations/ControlPoint.js'], _modules['Extensions/Annotations/MockPoint.js'], _modules['Core/Tooltip.js'], _modules['Core/Utilities.js']], function (ControlPoint, MockPoint, Tooltip, U) {
         /* *
          *
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
+        var isObject = U.isObject,
+            isString = U.isString,
+            merge = U.merge,
+            splat = U.splat;
         /**
          * An object which denots a controllable's anchor positions - relative and
          * absolute.
@@ -911,10 +915,6 @@
         * @name Highcharts.AnnotationControllable#points
         * @type {Array<Highcharts.Point>}
         */
-        var isObject = U.isObject,
-            isString = U.isString,
-            merge = U.merge,
-            splat = U.splat;
         /* eslint-disable no-invalid-this, valid-jsdoc */
         /**
          * It provides methods for handling points, control points
@@ -992,6 +992,7 @@
              */
             anchor: function (point) {
                 var plotBox = point.series.getPlotBox(),
+                    chart = point.series.chart,
                     box = point.mock ?
                         point.toAnchor() :
                         Tooltip.prototype.getAnchor.call({
@@ -1007,8 +1008,8 @@
                 return {
                     relativePosition: anchor,
                     absolutePosition: merge(anchor, {
-                        x: anchor.x + plotBox.translateX,
-                        y: anchor.y + plotBox.translateY
+                        x: anchor.x + (point.mock ? plotBox.translateX : chart.plotLeft),
+                        y: anchor.y + (point.mock ? plotBox.translateY : chart.plotTop)
                     })
                 };
             },
@@ -1261,7 +1262,7 @@
 
         return controllableMixin;
     });
-    _registerModule(_modules, 'annotations/controllable/markerMixin.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js']], function (H, U) {
+    _registerModule(_modules, 'Extensions/Annotations/Mixins/MarkerMixin.js', [_modules['Core/Chart/Chart.js'], _modules['Core/Renderer/SVG/SVGRenderer.js'], _modules['Core/Utilities.js']], function (Chart, SVGRenderer, U) {
         /* *
          *
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
@@ -1346,7 +1347,7 @@
                         }]
                 }
             };
-        H.SVGRenderer.prototype.addMarker = function (id, markerOptions) {
+        SVGRenderer.prototype.addMarker = function (id, markerOptions) {
             var options = { id: id };
             var attrs = {
                     stroke: markerOptions.color || 'none',
@@ -1368,11 +1369,14 @@
             return marker;
         };
         /* eslint-disable no-invalid-this, valid-jsdoc */
-        var createMarkerSetter = function (markerType) {
-                return function (value) {
-                    this.attr(markerType, 'url(#' + value + ')');
+        /**
+         * @private
+         */
+        function createMarkerSetter(markerType) {
+            return function (value) {
+                this.attr(markerType, 'url(#' + value + ')');
             };
-        };
+        }
         /**
          * @private
          * @mixin
@@ -1420,7 +1424,7 @@
                 ['markerStart', 'markerEnd'].forEach(setMarker);
             }
         };
-        addEvent(H.Chart, 'afterGetContainer', function () {
+        addEvent(Chart, 'afterGetContainer', function () {
             this.options.defs = merge(defaultMarkers, this.options.defs || {});
             objectEach(this.options.defs, function (def) {
                 if (def.tagName === 'marker' && def.render !== false) {
@@ -1431,14 +1435,13 @@
 
         return markerMixin;
     });
-    _registerModule(_modules, 'annotations/controllable/ControllablePath.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js'], _modules['annotations/controllable/controllableMixin.js'], _modules['annotations/controllable/markerMixin.js']], function (H, U, controllableMixin, markerMixin) {
+    _registerModule(_modules, 'Extensions/Annotations/Controllables/ControllablePath.js', [_modules['Extensions/Annotations/Mixins/ControllableMixin.js'], _modules['Core/Globals.js'], _modules['Extensions/Annotations/Mixins/MarkerMixin.js'], _modules['Core/Utilities.js']], function (ControllableMixin, H, MarkerMixin, U) {
         /* *
          *
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
-        var extend = U.extend,
-            merge = U.merge;
+        var extend = U.extend;
         // See TRACKER_FILL in highcharts.src.js
         var TRACKER_FILL = 'rgba(192,192,192,' + (H.svg ? 0.0001 : 0.002) + ')';
         /* eslint-disable no-invalid-this, valid-jsdoc */
@@ -1459,41 +1462,57 @@
          *
          * @param {number} index
          * Index of the path.
-         **/
-        var ControllablePath = function (annotation,
-            options,
-            index) {
-                this.init(annotation,
-            options,
-            index);
-            this.collection = 'shapes';
-        };
-        /**
-         * A map object which allows to map options attributes to element attributes
-         *
-         * @name Highcharts.AnnotationControllablePath.attrsMap
-         * @type {Highcharts.Dictionary<string>}
          */
-        ControllablePath.attrsMap = {
-            dashStyle: 'dashstyle',
-            strokeWidth: 'stroke-width',
-            stroke: 'stroke',
-            fill: 'fill',
-            zIndex: 'zIndex'
-        };
-        merge(true, ControllablePath.prototype, controllableMixin, /** @lends Highcharts.AnnotationControllablePath# */ {
-            /**
-             * @type 'path'
-             */
-            type: 'path',
-            setMarkers: markerMixin.setItemMarkers,
+        var ControllablePath = /** @class */ (function () {
+                /* *
+                 *
+                 *  Constructors
+                 *
+                 * */
+                function ControllablePath(annotation, options, index) {
+                    /* *
+                     *
+                     *  Properties
+                     *
+                     * */
+                    this.addControlPoints = ControllableMixin.addControlPoints;
+                this.anchor = ControllableMixin.anchor;
+                this.attr = ControllableMixin.attr;
+                this.attrsFromOptions = ControllableMixin.attrsFromOptions;
+                this.destroy = ControllableMixin.destroy;
+                this.getPointsOptions = ControllableMixin.getPointsOptions;
+                this.init = ControllableMixin.init;
+                this.linkPoints = ControllableMixin.linkPoints;
+                this.point = ControllableMixin.point;
+                this.rotate = ControllableMixin.rotate;
+                this.scale = ControllableMixin.scale;
+                this.setControlPointsVisibility = ControllableMixin.setControlPointsVisibility;
+                this.setMarkers = MarkerMixin.setItemMarkers;
+                this.transform = ControllableMixin.transform;
+                this.transformPoint = ControllableMixin.transformPoint;
+                this.translate = ControllableMixin.translate;
+                this.translatePoint = ControllableMixin.translatePoint;
+                this.translateShape = ControllableMixin.translateShape;
+                this.update = ControllableMixin.update;
+                /**
+                 * @type 'path'
+                 */
+                this.type = 'path';
+                this.init(annotation, options, index);
+                this.collection = 'shapes';
+            }
+            /* *
+             *
+             *  Functions
+             *
+             * */
             /**
              * Map the controllable path to 'd' path attribute.
              *
              * @return {Highcharts.SVGPathArray|null}
              * A path's d attribute.
              */
-            toD: function () {
+            ControllablePath.prototype.toD = function () {
                 var dOption = this.options.d;
                 if (dOption) {
                     return typeof dOption === 'function' ?
@@ -1529,11 +1548,11 @@
                 return showPath ?
                     this.chart.renderer.crispLine(d, this.graphic.strokeWidth()) :
                     null;
-            },
-            shouldBeDrawn: function () {
-                return (controllableMixin.shouldBeDrawn.call(this) || Boolean(this.options.d));
-            },
-            render: function (parent) {
+            };
+            ControllablePath.prototype.shouldBeDrawn = function () {
+                return (ControllableMixin.shouldBeDrawn.call(this) || Boolean(this.options.d));
+            };
+            ControllablePath.prototype.render = function (parent) {
                 var options = this.options,
                     attrs = this.attrsFromOptions(options);
                 this.graphic = this.annotation.chart.renderer
@@ -1559,14 +1578,14 @@
                             options.snap * 2
                     });
                 }
-                controllableMixin.render.call(this);
+                ControllableMixin.render.call(this);
                 extend(this.graphic, {
-                    markerStartSetter: markerMixin.markerStartSetter,
-                    markerEndSetter: markerMixin.markerEndSetter
+                    markerStartSetter: MarkerMixin.markerStartSetter,
+                    markerEndSetter: MarkerMixin.markerEndSetter
                 });
                 this.setMarkers(this);
-            },
-            redraw: function (animation) {
+            };
+            ControllablePath.prototype.redraw = function (animation) {
                 var d = this.toD(),
                     action = animation ? 'animate' : 'attr';
                 if (d) {
@@ -1578,19 +1597,44 @@
                     this.tracker.attr({ d: 'M 0 ' + -9e9 });
                 }
                 this.graphic.placed = this.tracker.placed = Boolean(d);
-                controllableMixin.redraw.call(this, animation);
-            }
-        });
+                ControllableMixin.redraw.call(this, animation);
+            };
+            /* *
+             *
+             *  Static Properties
+             *
+             * */
+            /**
+             * A map object which allows to map options attributes to element attributes
+             *
+             * @name Highcharts.AnnotationControllablePath.attrsMap
+             * @type {Highcharts.Dictionary<string>}
+             */
+            ControllablePath.attrsMap = {
+                dashStyle: 'dashstyle',
+                strokeWidth: 'stroke-width',
+                stroke: 'stroke',
+                fill: 'fill',
+                zIndex: 'zIndex'
+            };
+            return ControllablePath;
+        }());
 
         return ControllablePath;
     });
-    _registerModule(_modules, 'annotations/controllable/ControllableRect.js', [_modules['parts/Utilities.js'], _modules['annotations/controllable/controllableMixin.js'], _modules['annotations/controllable/ControllablePath.js']], function (U, controllableMixin, ControllablePath) {
+    _registerModule(_modules, 'Extensions/Annotations/Controllables/ControllableRect.js', [_modules['Extensions/Annotations/Mixins/ControllableMixin.js'], _modules['Extensions/Annotations/Controllables/ControllablePath.js'], _modules['Core/Utilities.js']], function (ControllableMixin, ControllablePath, U) {
         /* *
          *
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
         var merge = U.merge;
+        /**
+         * @typedef {Annotation.ControllablePath.AttrsMap}
+         *          Annotation.ControllableRect.AttrsMap
+         * @property {string} width=width
+         * @property {string} height=height
+         */
         /* eslint-disable no-invalid-this, valid-jsdoc */
         /**
          * A controllable rect class.
@@ -1610,44 +1654,58 @@
          * @param {number} index
          * Index of the rectangle
          */
-        var ControllableRect = function (annotation,
-            options,
-            index) {
-                this.init(annotation,
-            options,
-            index);
-            this.collection = 'shapes';
-        };
-        /**
-         * @typedef {Annotation.ControllablePath.AttrsMap}
-         *          Annotation.ControllableRect.AttrsMap
-         * @property {string} width=width
-         * @property {string} height=height
-         */
-        /**
-         * A map object which allows to map options attributes to element attributes
-         *
-         * @type {Annotation.ControllableRect.AttrsMap}
-         */
-        ControllableRect.attrsMap = merge(ControllablePath.attrsMap, {
-            width: 'width',
-            height: 'height'
-        });
-        merge(true, ControllableRect.prototype, controllableMixin, /** @lends Annotation.ControllableRect# */ {
-            /**
-             * @type 'rect'
-             */
-            type: 'rect',
-            translate: controllableMixin.translateShape,
-            render: function (parent) {
+        var ControllableRect = /** @class */ (function () {
+                /* *
+                 *
+                 *  Constructors
+                 *
+                 * */
+                function ControllableRect(annotation, options, index) {
+                    /* *
+                     *
+                     *  Properties
+                     *
+                     * */
+                    this.addControlPoints = ControllableMixin.addControlPoints;
+                this.anchor = ControllableMixin.anchor;
+                this.attr = ControllableMixin.attr;
+                this.attrsFromOptions = ControllableMixin.attrsFromOptions;
+                this.destroy = ControllableMixin.destroy;
+                this.getPointsOptions = ControllableMixin.getPointsOptions;
+                this.init = ControllableMixin.init;
+                this.linkPoints = ControllableMixin.linkPoints;
+                this.point = ControllableMixin.point;
+                this.rotate = ControllableMixin.rotate;
+                this.scale = ControllableMixin.scale;
+                this.setControlPointsVisibility = ControllableMixin.setControlPointsVisibility;
+                this.shouldBeDrawn = ControllableMixin.shouldBeDrawn;
+                this.transform = ControllableMixin.transform;
+                this.transformPoint = ControllableMixin.transformPoint;
+                this.translatePoint = ControllableMixin.translatePoint;
+                this.translateShape = ControllableMixin.translateShape;
+                this.update = ControllableMixin.update;
+                /**
+                 * @type 'rect'
+                 */
+                this.type = 'rect';
+                this.translate = ControllableMixin.translateShape;
+                this.init(annotation, options, index);
+                this.collection = 'shapes';
+            }
+            /* *
+             *
+             *  Functions
+             *
+             * */
+            ControllableRect.prototype.render = function (parent) {
                 var attrs = this.attrsFromOptions(this.options);
                 this.graphic = this.annotation.chart.renderer
                     .rect(0, -9e9, 0, 0)
                     .attr(attrs)
                     .add(parent);
-                controllableMixin.render.call(this);
-            },
-            redraw: function (animation) {
+                ControllableMixin.render.call(this);
+            };
+            ControllableRect.prototype.redraw = function (animation) {
                 var position = this.anchor(this.points[0]).absolutePosition;
                 if (position) {
                     this.graphic[animation ? 'animate' : 'attr']({
@@ -1664,13 +1722,28 @@
                     });
                 }
                 this.graphic.placed = Boolean(position);
-                controllableMixin.redraw.call(this, animation);
-            }
-        });
+                ControllableMixin.redraw.call(this, animation);
+            };
+            /* *
+             *
+             *  Static Properties
+             *
+             * */
+            /**
+             * A map object which allows to map options attributes to element attributes
+             *
+             * @type {Annotation.ControllableRect.AttrsMap}
+             */
+            ControllableRect.attrsMap = merge(ControllablePath.attrsMap, {
+                width: 'width',
+                height: 'height'
+            });
+            return ControllableRect;
+        }());
 
         return ControllableRect;
     });
-    _registerModule(_modules, 'annotations/controllable/ControllableCircle.js', [_modules['parts/Utilities.js'], _modules['annotations/controllable/controllableMixin.js'], _modules['annotations/controllable/ControllablePath.js']], function (U, controllableMixin, ControllablePath) {
+    _registerModule(_modules, 'Extensions/Annotations/Controllables/ControllableCircle.js', [_modules['Extensions/Annotations/Mixins/ControllableMixin.js'], _modules['Extensions/Annotations/Controllables/ControllablePath.js'], _modules['Core/Utilities.js']], function (ControllableMixin, ControllablePath, U) {
         /* *
          *
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
@@ -1684,45 +1757,65 @@
          * @requires modules/annotations
          *
          * @private
-         * @constructor
+         * @class
          * @name Highcharts.AnnotationControllableCircle
          *
          * @param {Highcharts.Annotation} annotation an annotation instance
          * @param {Highcharts.AnnotationsShapeOptions} options a shape's options
          * @param {number} index of the circle
-         **/
-        var ControllableCircle = function (annotation,
-            options,
-            index) {
-                this.init(annotation,
-            options,
-            index);
-            this.collection = 'shapes';
-        };
-        /**
-         * A map object which allows to map options attributes to element attributes.
-         *
-         * @name Highcharts.AnnotationControllableCircle.attrsMap
-         * @type {Highcharts.Dictionary<string>}
          */
-        ControllableCircle.attrsMap = merge(ControllablePath.attrsMap, {
-            r: 'r'
-        });
-        merge(true, ControllableCircle.prototype, controllableMixin, /** @lends Highcharts.AnnotationControllableCircle# */ {
-            /**
-             * @type 'circle'
-             */
-            type: 'circle',
-            translate: controllableMixin.translateShape,
-            render: function (parent) {
+        var ControllableCircle = /** @class */ (function () {
+                /* *
+                 *
+                 *  Constructors
+                 *
+                 * */
+                function ControllableCircle(annotation, options, index) {
+                    /* *
+                     *
+                     *  Properties
+                     *
+                     * */
+                    this.addControlPoints = ControllableMixin.addControlPoints;
+                this.anchor = ControllableMixin.anchor;
+                this.attr = ControllableMixin.attr;
+                this.attrsFromOptions = ControllableMixin.attrsFromOptions;
+                this.destroy = ControllableMixin.destroy;
+                this.getPointsOptions = ControllableMixin.getPointsOptions;
+                this.init = ControllableMixin.init;
+                this.linkPoints = ControllableMixin.linkPoints;
+                this.point = ControllableMixin.point;
+                this.rotate = ControllableMixin.rotate;
+                this.scale = ControllableMixin.scale;
+                this.setControlPointsVisibility = ControllableMixin.setControlPointsVisibility;
+                this.shouldBeDrawn = ControllableMixin.shouldBeDrawn;
+                this.transform = ControllableMixin.transform;
+                this.transformPoint = ControllableMixin.transformPoint;
+                this.translatePoint = ControllableMixin.translatePoint;
+                this.translateShape = ControllableMixin.translateShape;
+                this.update = ControllableMixin.update;
+                /**
+                 * @type 'circle'
+                 */
+                this.type = 'circle';
+                this.translate = ControllableMixin.translateShape;
+                this.init(annotation, options, index);
+                this.collection = 'shapes';
+            }
+            /* *
+             *
+             *  Functions
+             *
+             * */
+            ControllableCircle.prototype.render = function (parent) {
                 var attrs = this.attrsFromOptions(this.options);
                 this.graphic = this.annotation.chart.renderer
                     .circle(0, -9e9, 0)
                     .attr(attrs)
                     .add(parent);
-                controllableMixin.render.call(this);
-            },
-            redraw: function (animation) {
+                ControllableMixin.render.call(this);
+            };
+            ControllableCircle.prototype.redraw = function (animation) {
                 var position = this.anchor(this.points[0]).absolutePosition;
                 if (position) {
                     this.graphic[animation ? 'animate' : 'attr']({
@@ -1738,21 +1831,35 @@
                     });
                 }
                 this.graphic.placed = Boolean(position);
-                controllableMixin.redraw.call(this, animation);
-            },
+                ControllableMixin.redraw.call(this, animation);
+            };
             /**
              * Set the radius.
              *
              * @param {number} r a radius to be set
              */
-            setRadius: function (r) {
+            ControllableCircle.prototype.setRadius = function (r) {
                 this.options.r = r;
-            }
-        });
+            };
+            /* *
+             *
+             *  Static Properties
+             *
+             * */
+            /**
+             * A map object which allows to map options attributes to element
+             * attributes.
+             *
+             * @name Highcharts.AnnotationControllableCircle.attrsMap
+             * @type {Highcharts.Dictionary<string>}
+             */
+            ControllableCircle.attrsMap = merge(ControllablePath.attrsMap, { r: 'r' });
+            return ControllableCircle;
+        }());
 
         return ControllableCircle;
     });
-    _registerModule(_modules, 'annotations/controllable/ControllableLabel.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js'], _modules['annotations/controllable/controllableMixin.js'], _modules['annotations/MockPoint.js'], _modules['parts/Tooltip.js']], function (H, U, controllableMixin, MockPoint, Tooltip) {
+    _registerModule(_modules, 'Extensions/Annotations/Controllables/ControllableLabel.js', [_modules['Extensions/Annotations/Mixins/ControllableMixin.js'], _modules['Extensions/Annotations/MockPoint.js'], _modules['Core/Renderer/SVG/SVGRenderer.js'], _modules['Core/Tooltip.js'], _modules['Core/Utilities.js']], function (ControllableMixin, MockPoint, SVGRenderer, Tooltip, U) {
         /* *
          *
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
@@ -1761,7 +1868,6 @@
         var extend = U.extend,
             format = U.format,
             isNumber = U.isNumber,
-            merge = U.merge,
             pick = U.pick;
         /* eslint-disable no-invalid-this, valid-jsdoc */
         /**
@@ -1780,161 +1886,172 @@
          * @param {number} index
          * Index of the label.
          */
-        var ControllableLabel = function (annotation,
-            options,
-            index) {
-                this.init(annotation,
-            options,
-            index);
-            this.collection = 'labels';
-        };
-        /**
-         * Shapes which do not have background - the object is used for proper
-         * setting of the contrast color.
-         *
-         * @type {Array<string>}
-         */
-        ControllableLabel.shapesWithoutBackground = ['connector'];
-        /**
-         * Returns new aligned position based alignment options and box to align to.
-         * It is almost a one-to-one copy from SVGElement.prototype.align
-         * except it does not use and mutate an element
-         *
-         * @param {Highcharts.AnnotationAlignObject} alignOptions
-         *
-         * @param {Highcharts.BBoxObject} box
-         *
-         * @return {Highcharts.PositionObject}
-         * Aligned position.
-         */
-        ControllableLabel.alignedPosition = function (alignOptions, box) {
-            var align = alignOptions.align,
-                vAlign = alignOptions.verticalAlign,
-                x = (box.x || 0) + (alignOptions.x || 0),
-                y = (box.y || 0) + (alignOptions.y || 0),
-                alignFactor,
-                vAlignFactor;
-            if (align === 'right') {
-                alignFactor = 1;
-            }
-            else if (align === 'center') {
-                alignFactor = 2;
-            }
-            if (alignFactor) {
-                x += (box.width - (alignOptions.width || 0)) / alignFactor;
-            }
-            if (vAlign === 'bottom') {
-                vAlignFactor = 1;
-            }
-            else if (vAlign === 'middle') {
-                vAlignFactor = 2;
-            }
-            if (vAlignFactor) {
-                y += (box.height - (alignOptions.height || 0)) / vAlignFactor;
+        var ControllableLabel = /** @class */ (function () {
+                /* *
+                 *
+                 *  Constructors
+                 *
+                 * */
+                function ControllableLabel(annotation, options, index) {
+                    /* *
+                     *
+                     *  Properties
+                     *
+                     * */
+                    this.addControlPoints = ControllableMixin.addControlPoints;
+                this.attr = ControllableMixin.attr;
+                this.attrsFromOptions = ControllableMixin.attrsFromOptions;
+                this.destroy = ControllableMixin.destroy;
+                this.getPointsOptions = ControllableMixin.getPointsOptions;
+                this.init = ControllableMixin.init;
+                this.linkPoints = ControllableMixin.linkPoints;
+                this.point = ControllableMixin.point;
+                this.rotate = ControllableMixin.rotate;
+                this.scale = ControllableMixin.scale;
+                this.setControlPointsVisibility = ControllableMixin.setControlPointsVisibility;
+                this.shouldBeDrawn = ControllableMixin.shouldBeDrawn;
+                this.transform = ControllableMixin.transform;
+                this.transformPoint = ControllableMixin.transformPoint;
+                this.translateShape = ControllableMixin.translateShape;
+                this.update = ControllableMixin.update;
+                this.init(annotation, options, index);
+                this.collection = 'labels';
             }
-            return {
-                x: Math.round(x),
-                y: Math.round(y)
-            };
-        };
-        /**
-         * Returns new alignment options for a label if the label is outside the
-         * plot area. It is almost a one-to-one copy from
-         * Series.prototype.justifyDataLabel except it does not mutate the label and
-         * it works with absolute instead of relative position.
-         */
-        ControllableLabel.justifiedOptions = function (chart, label, alignOptions, alignAttr) {
-            var align = alignOptions.align,
-                verticalAlign = alignOptions.verticalAlign,
-                padding = label.box ? 0 : (label.padding || 0),
-                bBox = label.getBBox(),
-                off, 
-                //
-                options = {
-                    align: align,
-                    verticalAlign: verticalAlign,
-                    x: alignOptions.x,
-                    y: alignOptions.y,
-                    width: label.width,
-                    height: label.height
-                }, 
-                //
-                x = alignAttr.x - chart.plotLeft,
-                y = alignAttr.y - chart.plotTop;
-            // Off left
-            off = x + padding;
-            if (off < 0) {
+            /* *
+             *
+             *  Static Functions
+             *
+             * */
+            /**
+             * Returns new aligned position based alignment options and box to align to.
+             * It is almost a one-to-one copy from SVGElement.prototype.align
+             * except it does not use and mutate an element
+             *
+             * @param {Highcharts.AnnotationAlignObject} alignOptions
+             *
+             * @param {Highcharts.BBoxObject} box
+             *
+             * @return {Highcharts.PositionObject}
+             * Aligned position.
+             */
+            ControllableLabel.alignedPosition = function (alignOptions, box) {
+                var align = alignOptions.align,
+                    vAlign = alignOptions.verticalAlign,
+                    x = (box.x || 0) + (alignOptions.x || 0),
+                    y = (box.y || 0) + (alignOptions.y || 0),
+                    alignFactor,
+                    vAlignFactor;
                 if (align === 'right') {
-                    options.align = 'left';
+                    alignFactor = 1;
                 }
-                else {
-                    options.x = -off;
+                else if (align === 'center') {
+                    alignFactor = 2;
                 }
-            }
-            // Off right
-            off = x + bBox.width - padding;
-            if (off > chart.plotWidth) {
-                if (align === 'left') {
-                    options.align = 'right';
+                if (alignFactor) {
+                    x += (box.width - (alignOptions.width || 0)) / alignFactor;
                 }
-                else {
-                    options.x = chart.plotWidth - off;
+                if (vAlign === 'bottom') {
+                    vAlignFactor = 1;
                 }
-            }
-            // Off top
-            off = y + padding;
-            if (off < 0) {
-                if (verticalAlign === 'bottom') {
-                    options.verticalAlign = 'top';
+                else if (vAlign === 'middle') {
+                    vAlignFactor = 2;
                 }
-                else {
-                    options.y = -off;
+                if (vAlignFactor) {
+                    y += (box.height - (alignOptions.height || 0)) / vAlignFactor;
                 }
-            }
-            // Off bottom
-            off = y + bBox.height - padding;
-            if (off > chart.plotHeight) {
-                if (verticalAlign === 'top') {
-                    options.verticalAlign = 'bottom';
+                return {
+                    x: Math.round(x),
+                    y: Math.round(y)
+                };
+            };
+            /**
+             * Returns new alignment options for a label if the label is outside the
+             * plot area. It is almost a one-to-one copy from
+             * Series.prototype.justifyDataLabel except it does not mutate the label and
+             * it works with absolute instead of relative position.
+             */
+            ControllableLabel.justifiedOptions = function (chart, label, alignOptions, alignAttr) {
+                var align = alignOptions.align,
+                    verticalAlign = alignOptions.verticalAlign,
+                    padding = label.box ? 0 : (label.padding || 0),
+                    bBox = label.getBBox(),
+                    off, 
+                    //
+                    options = {
+                        align: align,
+                        verticalAlign: verticalAlign,
+                        x: alignOptions.x,
+                        y: alignOptions.y,
+                        width: label.width,
+                        height: label.height
+                    }, 
+                    //
+                    x = alignAttr.x - chart.plotLeft,
+                    y = alignAttr.y - chart.plotTop;
+                // Off left
+                off = x + padding;
+                if (off < 0) {
+                    if (align === 'right') {
+                        options.align = 'left';
+                    }
+                    else {
+                        options.x = -off;
+                    }
                 }
-                else {
-                    options.y = chart.plotHeight - off;
+                // Off right
+                off = x + bBox.width - padding;
+                if (off > chart.plotWidth) {
+                    if (align === 'left') {
+                        options.align = 'right';
+                    }
+                    else {
+                        options.x = chart.plotWidth - off;
+                    }
                 }
-            }
-            return options;
-        };
-        /**
-         * A map object which allows to map options attributes to element attributes
-         *
-         * @type {Highcharts.Dictionary<string>}
-         */
-        ControllableLabel.attrsMap = {
-            backgroundColor: 'fill',
-            borderColor: 'stroke',
-            borderWidth: 'stroke-width',
-            zIndex: 'zIndex',
-            borderRadius: 'r',
-            padding: 'padding'
-        };
-        merge(true, ControllableLabel.prototype, controllableMixin, 
-        /** @lends Annotation.ControllableLabel# */ {
+                // Off top
+                off = y + padding;
+                if (off < 0) {
+                    if (verticalAlign === 'bottom') {
+                        options.verticalAlign = 'top';
+                    }
+                    else {
+                        options.y = -off;
+                    }
+                }
+                // Off bottom
+                off = y + bBox.height - padding;
+                if (off > chart.plotHeight) {
+                    if (verticalAlign === 'top') {
+                        options.verticalAlign = 'bottom';
+                    }
+                    else {
+                        options.y = chart.plotHeight - off;
+                    }
+                }
+                return options;
+            };
+            /* *
+             *
+             *  Functions
+             *
+             * */
             /**
              * Translate the point of the label by deltaX and deltaY translations.
              * The point is the label's anchor.
              *
              * @param {number} dx translation for x coordinate
              * @param {number} dy translation for y coordinate
-             **/
-            translatePoint: function (dx, dy) {
-                controllableMixin.translatePoint.call(this, dx, dy, 0);
-            },
+             */
+            ControllableLabel.prototype.translatePoint = function (dx, dy) {
+                ControllableMixin.translatePoint.call(this, dx, dy, 0);
+            };
             /**
              * Translate x and y position relative to the label's anchor.
              *
              * @param {number} dx translation for x coordinate
              * @param {number} dy translation for y coordinate
-             **/
-            translate: function (dx, dy) {
+             */
+            ControllableLabel.prototype.translate = function (dx, dy) {
                 var chart = this.annotation.chart, 
                     // Annotation.options
                     labelOptions = this.annotation.userOptions, 
@@ -1956,8 +2073,8 @@
                 chartOptions[this.collection][this.index].y = this.options.y;
                 labelOptions[this.collection][this.index].x = this.options.x;
                 labelOptions[this.collection][this.index].y = this.options.y;
-            },
-            render: function (parent) {
+            };
+            ControllableLabel.prototype.render = function (parent) {
                 var options = this.options,
                     attrs = this.attrsFromOptions(options),
                     style = options.style;
@@ -1978,14 +2095,13 @@
                     this.graphic.addClass(options.className);
                 }
                 this.graphic.labelrank = options.labelrank;
-                controllableMixin.render.call(this);
-            },
-            redraw: function (animation) {
+                ControllableMixin.render.call(this);
+            };
+            ControllableLabel.prototype.redraw = function (animation) {
                 var options = this.options,
                     text = this.text || options.format || options.text,
                     label = this.graphic,
                     point = this.points[0],
-                    show = false,
                     anchor,
                     attrs;
                 label.attr({
@@ -1995,8 +2111,7 @@
                 });
                 anchor = this.anchor(point);
                 attrs = this.position(anchor);
-                show = attrs;
-                if (show) {
+                if (attrs) {
                     label.alignAttr = attrs;
                     attrs.anchorX = anchor.absolutePosition.x;
                     attrs.anchorY = anchor.absolutePosition.y;
@@ -2008,16 +2123,16 @@
                         y: -9999 // #10055
                     });
                 }
-                label.placed = Boolean(show);
-                controllableMixin.redraw.call(this, animation);
-            },
+                label.placed = !!attrs;
+                ControllableMixin.redraw.call(this, animation);
+            };
             /**
              * All basic shapes don't support alignTo() method except label.
              * For a controllable label, we need to subtract translation from
              * options.
              */
-            anchor: function () {
-                var anchor = controllableMixin.anchor.apply(this,
+            ControllableLabel.prototype.anchor = function (_point) {
+                var anchor = ControllableMixin.anchor.apply(this,
                     arguments),
                     x = this.options.x || 0,
                     y = this.options.y || 0;
@@ -2026,7 +2141,7 @@
                 anchor.relativePosition.x -= x;
                 anchor.relativePosition.y -= y;
                 return anchor;
-            },
+            };
             /**
              * Returns the label position relative to its anchor.
              *
@@ -2034,7 +2149,7 @@
              *
              * @return {Highcharts.PositionObject|null}
              */
-            position: function (anchor) {
+            ControllableLabel.prototype.position = function (anchor) {
                 var item = this.graphic,
                     chart = this.annotation.chart,
                     point = this.points[0],
@@ -2087,14 +2202,40 @@
                     }
                 }
                 return showItem ? itemPosition : null;
-            }
-        });
-        /* ********************************************************************** */
-        /**
-         * General symbol definition for labels with connector
-         * @private
+            };
+            /* *
+             *
+             *  Static Properties
+             *
+             * */
+            /**
+             * A map object which allows to map options attributes to element attributes
+             *
+             * @type {Highcharts.Dictionary<string>}
+             */
+            ControllableLabel.attrsMap = {
+                backgroundColor: 'fill',
+                borderColor: 'stroke',
+                borderWidth: 'stroke-width',
+                zIndex: 'zIndex',
+                borderRadius: 'r',
+                padding: 'padding'
+            };
+            /**
+             * Shapes which do not have background - the object is used for proper
+             * setting of the contrast color.
+             *
+             * @type {Array<string>}
+             */
+            ControllableLabel.shapesWithoutBackground = ['connector'];
+            return ControllableLabel;
+        }());
+        /* ********************************************************************** */
+        /**
+         * General symbol definition for labels with connector
+         * @private
          */
-        H.SVGRenderer.prototype.symbols.connector = function (x, y, w, h, options) {
+        SVGRenderer.prototype.symbols.connector = function (x, y, w, h, options) {
             var anchorX = options && options.anchorX,
                 anchorY = options && options.anchorY,
                 path,
@@ -2132,13 +2273,12 @@
 
         return ControllableLabel;
     });
-    _registerModule(_modules, 'annotations/controllable/ControllableImage.js', [_modules['parts/Utilities.js'], _modules['annotations/controllable/controllableMixin.js'], _modules['annotations/controllable/ControllableLabel.js']], function (U, controllableMixin, ControllableLabel) {
+    _registerModule(_modules, 'Extensions/Annotations/Controllables/ControllableImage.js', [_modules['Extensions/Annotations/Controllables/ControllableLabel.js'], _modules['Extensions/Annotations/Mixins/ControllableMixin.js']], function (ControllableLabel, ControllableMixin) {
         /* *
          *
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
-        var merge = U.merge;
         /* eslint-disable no-invalid-this, valid-jsdoc */
         /**
          * A controllable image class.
@@ -2157,33 +2297,46 @@
          *
          * @param {number} index
          * Index of the image.
-         **/
-        var ControllableImage = function (annotation,
-            options,
-            index) {
-                this.init(annotation,
-            options,
-            index);
-            this.collection = 'shapes';
-        };
-        /**
-         * A map object which allows to map options attributes to element attributes
-         *
-         * @name Highcharts.AnnotationControllableImage.attrsMap
-         * @type {Highcharts.Dictionary<string>}
          */
-        ControllableImage.attrsMap = {
-            width: 'width',
-            height: 'height',
-            zIndex: 'zIndex'
-        };
-        merge(true, ControllableImage.prototype, controllableMixin, /** @lends Annotation.ControllableImage# */ {
-            /**
-             * @type 'image'
-             */
-            type: 'image',
-            translate: controllableMixin.translateShape,
-            render: function (parent) {
+        var ControllableImage = /** @class */ (function () {
+                /* *
+                 *
+                 *  Constructors
+                 *
+                 * */
+                function ControllableImage(annotation, options, index) {
+                    /* *
+                     *
+                     *  Properties
+                     *
+                     * */
+                    this.addControlPoints = ControllableMixin.addControlPoints;
+                this.anchor = ControllableMixin.anchor;
+                this.attr = ControllableMixin.attr;
+                this.attrsFromOptions = ControllableMixin.attrsFromOptions;
+                this.destroy = ControllableMixin.destroy;
+                this.getPointsOptions = ControllableMixin.getPointsOptions;
+                this.init = ControllableMixin.init;
+                this.linkPoints = ControllableMixin.linkPoints;
+                this.point = ControllableMixin.point;
+                this.rotate = ControllableMixin.rotate;
+                this.scale = ControllableMixin.scale;
+                this.setControlPointsVisibility = ControllableMixin.setControlPointsVisibility;
+                this.shouldBeDrawn = ControllableMixin.shouldBeDrawn;
+                this.transform = ControllableMixin.transform;
+                this.transformPoint = ControllableMixin.transformPoint;
+                this.translatePoint = ControllableMixin.translatePoint;
+                this.translateShape = ControllableMixin.translateShape;
+                this.update = ControllableMixin.update;
+                /**
+                 * @type 'image'
+                 */
+                this.type = 'image';
+                this.translate = ControllableMixin.translateShape;
+                this.init(annotation, options, index);
+                this.collection = 'shapes';
+            }
+            ControllableImage.prototype.render = function (parent) {
                 var attrs = this.attrsFromOptions(this.options),
                     options = this.options;
                 this.graphic = this.annotation.chart.renderer
@@ -2192,9 +2345,9 @@
                     .add(parent);
                 this.graphic.width = options.width;
                 this.graphic.height = options.height;
-                controllableMixin.render.call(this);
-            },
-            redraw: function (animation) {
+                ControllableMixin.render.call(this);
+            };
+            ControllableImage.prototype.redraw = function (animation) {
                 var anchor = this.anchor(this.points[0]),
                     position = ControllableLabel.prototype.position.call(this,
                     anchor);
@@ -2211,13 +2364,30 @@
                     });
                 }
                 this.graphic.placed = Boolean(position);
-                controllableMixin.redraw.call(this, animation);
-            }
-        });
+                ControllableMixin.redraw.call(this, animation);
+            };
+            /* *
+             *
+             *  Static Properties
+             *
+             * */
+            /**
+             * A map object which allows to map options attributes to element attributes
+             *
+             * @name Highcharts.AnnotationControllableImage.attrsMap
+             * @type {Highcharts.Dictionary<string>}
+             */
+            ControllableImage.attrsMap = {
+                width: 'width',
+                height: 'height',
+                zIndex: 'zIndex'
+            };
+            return ControllableImage;
+        }());
 
         return ControllableImage;
     });
-    _registerModule(_modules, 'annotations/annotations.src.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js'], _modules['annotations/controllable/controllableMixin.js'], _modules['annotations/controllable/ControllableRect.js'], _modules['annotations/controllable/ControllableCircle.js'], _modules['annotations/controllable/ControllablePath.js'], _modules['annotations/controllable/ControllableImage.js'], _modules['annotations/controllable/ControllableLabel.js'], _modules['annotations/eventEmitterMixin.js'], _modules['annotations/MockPoint.js'], _modules['annotations/ControlPoint.js']], function (H, U, controllableMixin, ControllableRect, ControllableCircle, ControllablePath, ControllableImage, ControllableLabel, eventEmitterMixin, MockPoint, ControlPoint) {
+    _registerModule(_modules, 'Extensions/Annotations/Annotations.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/Chart/Chart.js'], _modules['Extensions/Annotations/Mixins/ControllableMixin.js'], _modules['Extensions/Annotations/Controllables/ControllableRect.js'], _modules['Extensions/Annotations/Controllables/ControllableCircle.js'], _modules['Extensions/Annotations/Controllables/ControllablePath.js'], _modules['Extensions/Annotations/Controllables/ControllableImage.js'], _modules['Extensions/Annotations/Controllables/ControllableLabel.js'], _modules['Extensions/Annotations/ControlPoint.js'], _modules['Extensions/Annotations/Mixins/EventEmitterMixin.js'], _modules['Core/Globals.js'], _modules['Extensions/Annotations/MockPoint.js'], _modules['Core/Pointer.js'], _modules['Core/Utilities.js']], function (A, Chart, ControllableMixin, ControllableRect, ControllableCircle, ControllablePath, ControllableImage, ControllableLabel, ControlPoint, EventEmitterMixin, H, MockPoint, Pointer, U) {
         /* *
          *
          *  (c) 2009-2017 Highsoft, Black Label
@@ -2227,6 +2397,8 @@
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
+        var getDeferredAnimation = A.getDeferredAnimation;
+        var chartProto = Chart.prototype;
         var addEvent = U.addEvent,
             defined = U.defined,
             destroyObjectProperties = U.destroyObjectProperties,
@@ -2238,7 +2410,6 @@
             pick = U.pick,
             splat = U.splat,
             wrap = U.wrap;
-        var chartProto = H.Chart.prototype;
         /* *********************************************************************
          *
          * ANNOTATION
@@ -2287,93 +2458,484 @@
          * @param {Highcharts.Chart} chart a chart instance
          * @param {Highcharts.AnnotationsOptions} userOptions the options object
          */
-        var Annotation = H.Annotation = function (chart,
-            userOptions) {
+        var Annotation = /** @class */ (function () {
+                /* *
+                 *
+                 *  Constructors
+                 *
+                 * */
+                function Annotation(chart, userOptions) {
+                    /* *
+                     *
+                     *  Properties
+                     *
+                     * */
+                    this.annotation = void 0;
+                this.coll = 'annotations';
+                this.collection = void 0;
+                this.animationConfig = void 0;
+                this.graphic = void 0;
+                this.group = void 0;
+                this.labelCollector = void 0;
+                this.labelsGroup = void 0;
+                this.shapesGroup = void 0;
                 var labelsAndShapes;
+                /**
+                 * The chart that the annotation belongs to.
+                 *
+                 * @type {Highcharts.Chart}
+                 */
+                this.chart = chart;
+                /**
+                 * The array of points which defines the annotation.
+                 *
+                 * @type {Array<Highcharts.Point>}
+                 */
+                this.points = [];
+                /**
+                 * The array of control points.
+                 *
+                 * @private
+                 * @name Highcharts.Annotation#controlPoints
+                 * @type {Array<Annotation.ControlPoint>}
+                 */
+                this.controlPoints = [];
+                this.coll = 'annotations';
+                /**
+                 * The array of labels which belong to the annotation.
+                 *
+                 * @private
+                 * @name Highcharts.Annotation#labels
+                 * @type {Array<Highcharts.AnnotationLabelType>}
+                 */
+                this.labels = [];
+                /**
+                 * The array of shapes which belong to the annotation.
+                 *
+                 * @private
+                 * @name Highcharts.Annotation#shapes
+                 * @type {Array<Highcharts.AnnotationShapeType>}
+                 */
+                this.shapes = [];
+                /**
+                 * The options for the annotations.
+                 *
+                 * @name Highcharts.Annotation#options
+                 * @type {Highcharts.AnnotationsOptions}
+                 */
+                this.options = merge(this.defaultOptions, userOptions);
+                /**
+                 * The user options for the annotations.
+                 *
+                 * @name Highcharts.Annotation#userOptions
+                 * @type {Highcharts.AnnotationsOptions}
+                 */
+                this.userOptions = userOptions;
+                // Handle labels and shapes - those are arrays
+                // Merging does not work with arrays (stores reference)
+                labelsAndShapes = this.getLabelsAndShapesOptions(this.options, userOptions);
+                this.options.labels = labelsAndShapes.labels;
+                this.options.shapes = labelsAndShapes.shapes;
+                /**
+                 * The callback that reports to the overlapping-labels module which
+                 * labels it should account for.
+                 * @private
+                 * @name Highcharts.Annotation#labelCollector
+                 * @type {Function}
+                 */
+                /**
+                 * The group svg element.
+                 *
+                 * @name Highcharts.Annotation#group
+                 * @type {Highcharts.SVGElement}
+                 */
+                /**
+                 * The group svg element of the annotation's shapes.
+                 *
+                 * @name Highcharts.Annotation#shapesGroup
+                 * @type {Highcharts.SVGElement}
+                 */
+                /**
+                 * The group svg element of the annotation's labels.
+                 *
+                 * @name Highcharts.Annotation#labelsGroup
+                 * @type {Highcharts.SVGElement}
+                 */
+                this.init(chart, this.options);
+            }
             /**
-             * The chart that the annotation belongs to.
-             *
-             * @type {Highcharts.Chart}
-             */
-            this.chart = chart;
-            /**
-             * The array of points which defines the annotation.
-             *
-             * @type {Array<Highcharts.Point>}
-             */
-            this.points = [];
-            /**
-             * The array of control points.
-             *
+             * Initialize the annotation.
              * @private
-             * @name Highcharts.Annotation#controlPoints
-             * @type {Array<Annotation.ControlPoint>}
              */
-            this.controlPoints = [];
-            this.coll = 'annotations';
+            Annotation.prototype.init = function () {
+                var chart = this.chart,
+                    animOptions = this.options.animation;
+                this.linkPoints();
+                this.addControlPoints();
+                this.addShapes();
+                this.addLabels();
+                this.setLabelCollector();
+                this.animationConfig = getDeferredAnimation(chart, animOptions);
+            };
+            Annotation.prototype.getLabelsAndShapesOptions = function (baseOptions, newOptions) {
+                var mergedOptions = {};
+                ['labels', 'shapes'].forEach(function (name) {
+                    if (baseOptions[name]) {
+                        mergedOptions[name] = splat(newOptions[name]).map(function (basicOptions, i) {
+                            return merge(baseOptions[name][i], basicOptions);
+                        });
+                    }
+                });
+                return mergedOptions;
+            };
+            Annotation.prototype.addShapes = function () {
+                (this.options.shapes || []).forEach(function (shapeOptions, i) {
+                    var shape = this.initShape(shapeOptions,
+                        i);
+                    merge(true, this.options.shapes[i], shape.options);
+                }, this);
+            };
+            Annotation.prototype.addLabels = function () {
+                (this.options.labels || []).forEach(function (labelsOptions, i) {
+                    var labels = this.initLabel(labelsOptions,
+                        i);
+                    merge(true, this.options.labels[i], labels.options);
+                }, this);
+            };
+            Annotation.prototype.addClipPaths = function () {
+                this.setClipAxes();
+                if (this.clipXAxis && this.clipYAxis) {
+                    this.clipRect = this.chart.renderer.clipRect(this.getClipBox());
+                }
+            };
+            Annotation.prototype.setClipAxes = function () {
+                var xAxes = this.chart.xAxis,
+                    yAxes = this.chart.yAxis,
+                    linkedAxes = (this.options.labels || [])
+                        .concat(this.options.shapes || [])
+                        .reduce(function (axes,
+                    labelOrShape) {
+                        return [
+                            xAxes[labelOrShape &&
+                                labelOrShape.point &&
+                                labelOrShape.point.xAxis] || axes[0],
+                            yAxes[labelOrShape &&
+                                labelOrShape.point &&
+                                labelOrShape.point.yAxis] || axes[1]
+                        ];
+                }, []);
+                this.clipXAxis = linkedAxes[0];
+                this.clipYAxis = linkedAxes[1];
+            };
+            Annotation.prototype.getClipBox = function () {
+                if (this.clipXAxis && this.clipYAxis) {
+                    return {
+                        x: this.clipXAxis.left,
+                        y: this.clipYAxis.top,
+                        width: this.clipXAxis.width,
+                        height: this.clipYAxis.height
+                    };
+                }
+            };
+            Annotation.prototype.setLabelCollector = function () {
+                var annotation = this;
+                annotation.labelCollector = function () {
+                    return annotation.labels.reduce(function (labels, label) {
+                        if (!label.options.allowOverlap) {
+                            labels.push(label.graphic);
+                        }
+                        return labels;
+                    }, []);
+                };
+                annotation.chart.labelCollectors.push(annotation.labelCollector);
+            };
             /**
-             * The array of labels which belong to the annotation.
-             *
+             * Set an annotation options.
              * @private
-             * @name Highcharts.Annotation#labels
-             * @type {Array<Highcharts.AnnotationLabelType>}
+             * @param {Highcharts.AnnotationsOptions} - user options for an annotation
              */
-            this.labels = [];
+            Annotation.prototype.setOptions = function (userOptions) {
+                this.options = merge(this.defaultOptions, userOptions);
+            };
+            Annotation.prototype.redraw = function (animation) {
+                this.linkPoints();
+                if (!this.graphic) {
+                    this.render();
+                }
+                if (this.clipRect) {
+                    this.clipRect.animate(this.getClipBox());
+                }
+                this.redrawItems(this.shapes, animation);
+                this.redrawItems(this.labels, animation);
+                ControllableMixin.redraw.call(this, animation);
+            };
             /**
-             * The array of shapes which belong to the annotation.
-             *
              * @private
-             * @name Highcharts.Annotation#shapes
-             * @type {Array<Highcharts.AnnotationShapeType>}
+             * @param {Array<Highcharts.AnnotationControllable>} items
+             * @param {boolean} [animation]
              */
-            this.shapes = [];
+            Annotation.prototype.redrawItems = function (items, animation) {
+                var i = items.length;
+                // needs a backward loop
+                // labels/shapes array might be modified
+                // due to destruction of the item
+                while (i--) {
+                    this.redrawItem(items[i], animation);
+                }
+            };
             /**
-             * The options for the annotations.
-             *
-             * @name Highcharts.Annotation#options
-             * @type {Highcharts.AnnotationsOptions}
+             * @private
+             * @param {Array<Highcharts.AnnotationControllable>} items
              */
-            this.options = merge(this.defaultOptions, userOptions);
+            Annotation.prototype.renderItems = function (items) {
+                var i = items.length;
+                while (i--) {
+                    this.renderItem(items[i]);
+                }
+            };
+            Annotation.prototype.render = function () {
+                var renderer = this.chart.renderer;
+                this.graphic = renderer
+                    .g('annotation')
+                    .attr({
+                    opacity: 0,
+                    zIndex: this.options.zIndex,
+                    visibility: this.options.visible ?
+                        'visible' :
+                        'hidden'
+                })
+                    .add();
+                this.shapesGroup = renderer
+                    .g('annotation-shapes')
+                    .add(this.graphic)
+                    .clip(this.chart.plotBoxClip);
+                this.labelsGroup = renderer
+                    .g('annotation-labels')
+                    .attr({
+                    // hideOverlappingLabels requires translation
+                    translateX: 0,
+                    translateY: 0
+                })
+                    .add(this.graphic);
+                this.addClipPaths();
+                if (this.clipRect) {
+                    this.graphic.clip(this.clipRect);
+                }
+                // Render shapes and labels before adding events (#13070).
+                this.renderItems(this.shapes);
+                this.renderItems(this.labels);
+                this.addEvents();
+                ControllableMixin.render.call(this);
+            };
             /**
-             * The user options for the annotations.
-             *
-             * @name Highcharts.Annotation#userOptions
-             * @type {Highcharts.AnnotationsOptions}
-             */
-            this.userOptions = userOptions;
-            // Handle labels and shapes - those are arrays
-            // Merging does not work with arrays (stores reference)
-            labelsAndShapes = this.getLabelsAndShapesOptions(this.options, userOptions);
-            this.options.labels = labelsAndShapes.labels;
-            this.options.shapes = labelsAndShapes.shapes;
-            /**
-             * The callback that reports to the overlapping-labels module which
-             * labels it should account for.
+             * Set the annotation's visibility.
              * @private
-             * @name Highcharts.Annotation#labelCollector
-             * @type {Function}
+             * @param {boolean} [visible]
+             * Whether to show or hide an annotation. If the param is omitted, the
+             * annotation's visibility is toggled.
              */
-            /**
-             * The group svg element.
-             *
-             * @name Highcharts.Annotation#group
-             * @type {Highcharts.SVGElement}
+            Annotation.prototype.setVisibility = function (visible) {
+                var options = this.options,
+                    visibility = pick(visible, !options.visible);
+                this.graphic.attr('visibility', visibility ? 'visible' : 'hidden');
+                if (!visibility) {
+                    this.setControlPointsVisibility(false);
+                }
+                options.visible = visibility;
+            };
+            Annotation.prototype.setControlPointsVisibility = function (visible) {
+                var setItemControlPointsVisibility = function (item) {
+                        item.setControlPointsVisibility(visible);
+                };
+                ControllableMixin.setControlPointsVisibility.call(this, visible);
+                this.shapes.forEach(setItemControlPointsVisibility);
+                this.labels.forEach(setItemControlPointsVisibility);
+            };
+            /**
+             * Destroy the annotation. This function does not touch the chart
+             * that the annotation belongs to (all annotations are kept in
+             * the chart.annotations array) - it is recommended to use
+             * {@link Highcharts.Chart#removeAnnotation} instead.
+             * @private
              */
+            Annotation.prototype.destroy = function () {
+                var chart = this.chart,
+                    destroyItem = function (item) {
+                        item.destroy();
+                };
+                this.labels.forEach(destroyItem);
+                this.shapes.forEach(destroyItem);
+                this.clipXAxis = null;
+                this.clipYAxis = null;
+                erase(chart.labelCollectors, this.labelCollector);
+                EventEmitterMixin.destroy.call(this);
+                ControllableMixin.destroy.call(this);
+                destroyObjectProperties(this, chart);
+            };
             /**
-             * The group svg element of the annotation's shapes.
-             *
-             * @name Highcharts.Annotation#shapesGroup
-             * @type {Highcharts.SVGElement}
+             * See {@link Highcharts.Chart#removeAnnotation}.
+             * @private
              */
+            Annotation.prototype.remove = function () {
+                // Let chart.update() remove annoations on demand
+                return this.chart.removeAnnotation(this);
+            };
             /**
-             * The group svg element of the annotation's labels.
+             * Updates an annotation.
+             *
+             * @function Highcharts.Annotation#update
+             *
+             * @param {Partial<Highcharts.AnnotationsOptions>} userOptions
+             * New user options for the annotation.
              *
-             * @name Highcharts.Annotation#labelsGroup
-             * @type {Highcharts.SVGElement}
+             * @return {void}
              */
-            this.init(chart, this.options);
-        };
-        merge(true, Annotation.prototype, controllableMixin, eventEmitterMixin, 
+            Annotation.prototype.update = function (userOptions, redraw) {
+                var chart = this.chart,
+                    labelsAndShapes = this.getLabelsAndShapesOptions(this.userOptions,
+                    userOptions),
+                    userOptionsIndex = chart.annotations.indexOf(this),
+                    options = merge(true,
+                    this.userOptions,
+                    userOptions);
+                options.labels = labelsAndShapes.labels;
+                options.shapes = labelsAndShapes.shapes;
+                this.destroy();
+                this.constructor(chart, options);
+                // Update options in chart options, used in exporting (#9767):
+                chart.options.annotations[userOptionsIndex] = options;
+                this.isUpdating = true;
+                if (pick(redraw, true)) {
+                    chart.redraw();
+                }
+                fireEvent(this, 'afterUpdate');
+                this.isUpdating = false;
+            };
+            /* *************************************************************
+                * ITEM SECTION
+                * Contains methods for handling a single item in an annotation
+                **************************************************************** */
+            /**
+             * Initialisation of a single shape
+             * @private
+             * @param {Object} shapeOptions - a confg object for a single shape
+             */
+            Annotation.prototype.initShape = function (shapeOptions, index) {
+                var options = merge(this.options.shapeOptions, {
+                        controlPointOptions: this.options.controlPointOptions
+                    },
+                    shapeOptions),
+                    shape = new Annotation.shapesMap[options.type](this,
+                    options,
+                    index);
+                shape.itemType = 'shape';
+                this.shapes.push(shape);
+                return shape;
+            };
+            /**
+             * Initialisation of a single label
+             * @private
+             */
+            Annotation.prototype.initLabel = function (labelOptions, index) {
+                var options = merge(this.options.labelOptions, {
+                        controlPointOptions: this.options.controlPointOptions
+                    },
+                    labelOptions),
+                    label = new ControllableLabel(this,
+                    options,
+                    index);
+                label.itemType = 'label';
+                this.labels.push(label);
+                return label;
+            };
+            /**
+             * Redraw a single item.
+             * @private
+             * @param {Annotation.Label|Annotation.Shape} item
+             * @param {boolean} [animation]
+             */
+            Annotation.prototype.redrawItem = function (item, animation) {
+                item.linkPoints();
+                if (!item.shouldBeDrawn()) {
+                    this.destroyItem(item);
+                }
+                else {
+                    if (!item.graphic) {
+                        this.renderItem(item);
+                    }
+                    item.redraw(pick(animation, true) && item.graphic.placed);
+                    if (item.points.length) {
+                        this.adjustVisibility(item);
+                    }
+                }
+            };
+            /**
+             * Hide or show annotaiton attached to points.
+             * @private
+             * @param {Annotation.Label|Annotation.Shape} item
+             */
+            Annotation.prototype.adjustVisibility = function (item) {
+                var hasVisiblePoints = false,
+                    label = item.graphic;
+                item.points.forEach(function (point) {
+                    if (point.series.visible !== false &&
+                        point.visible !== false) {
+                        hasVisiblePoints = true;
+                    }
+                });
+                if (!hasVisiblePoints) {
+                    label.hide();
+                }
+                else if (label.visibility === 'hidden') {
+                    label.show();
+                }
+            };
+            /**
+             * Destroy a single item.
+             * @private
+             * @param {Annotation.Label|Annotation.Shape} item
+             */
+            Annotation.prototype.destroyItem = function (item) {
+                // erase from shapes or labels array
+                erase(this[item.itemType + 's'], item);
+                item.destroy();
+            };
+            /**
+             * @private
+             */
+            Annotation.prototype.renderItem = function (item) {
+                item.render(item.itemType === 'label' ?
+                    this.labelsGroup :
+                    this.shapesGroup);
+            };
+            /**
+             * @private
+             */
+            Annotation.ControlPoint = ControlPoint;
+            /**
+             * @private
+             */
+            Annotation.MockPoint = MockPoint;
+            /**
+             * An object uses for mapping between a shape type and a constructor.
+             * To add a new shape type extend this object with type name as a key
+             * and a constructor as its value.
+             */
+            Annotation.shapesMap = {
+                'rect': ControllableRect,
+                'circle': ControllableCircle,
+                'path': ControllablePath,
+                'image': ControllableImage
+            };
+            /**
+             * @private
+             */
+            Annotation.types = {};
+            return Annotation;
+        }());
+        merge(true, Annotation.prototype, ControllableMixin, EventEmitterMixin, 
+        // restore original Annotation implementation after mixin overwrite
+        merge(Annotation.prototype, 
         /** @lends Highcharts.Annotation# */
         {
             /**
@@ -2409,8 +2971,8 @@
              */
             defaultOptions: {
                 /**
-                 * Sets an ID for an annotation. Can be user later when removing an
-                 * annotation in [Chart#removeAnnotation(id)](
+                 * Sets an ID for an annotation. Can be user later when
+                 * removing an annotation in [Chart#removeAnnotation(id)](
                  * /class-reference/Highcharts.Chart#removeAnnotation) method.
                  *
                  * @type      {number|string}
@@ -2423,6 +2985,33 @@
                  *         Set annotation visibility
                  */
                 visible: true,
+                /**
+                 * Enable or disable the initial animation when a series is
+                 * displayed for the `annotation`. The animation can also be set
+                 * as a configuration object. Please note that this option only
+                 * applies to the initial animation.
+                 * For other animations, see [chart.animation](#chart.animation)
+                 * and the animation parameter under the API methods.
+                 * The following properties are supported:
+                 *
+                 * - `defer`: The animation delay time in milliseconds.
+                 *
+                 * @sample {highcharts} highcharts/annotations/defer/
+                 *          Animation defer settings
+                 * @type {boolean|Partial<Highcharts.AnimationOptionsObject>}
+                 * @since 8.2.0
+                 * @apioption annotations.animation
+                 */
+                animation: {},
+                /**
+                 * The animation delay time in milliseconds.
+                 * Set to `0` renders annotation immediately.
+                 * As `undefined` inherits defer time from the [series.animation.defer](#plotOptions.series.animation.defer).
+                 *
+                 * @type      {number}
+                 * @since 8.2.0
+                 * @apioption annotations.animation.defer
+                 */
                 /**
                  * Allow an annotation to be draggable by a user. Possible
                  * values are `'x'`, `'xy'`, `'y'` and `''` (disabled).
@@ -2461,7 +3050,8 @@
                      */
                     allowOverlap: false,
                     /**
-                     * The background color or gradient for the annotation's label.
+                     * The background color or gradient for the annotation's
+                     * label.
                      *
                      * @sample highcharts/annotations/label-presentation/
                      *         Set labels graphic options
@@ -2544,9 +3134,9 @@
                      */
                     /**
                      * Callback JavaScript function to format the annotation's
-                     * label. Note that if a `format` or `text` are defined, the
-                     * format or text take precedence and the formatter is ignored.
-                     * `This` refers to a point object.
+                     * label. Note that if a `format` or `text` are defined,
+                     * the format or text take precedence and the formatter is
+                     * ignored. `This` refers to a point object.
                      *
                      * @sample highcharts/annotations/label-text/
                      *         Set labels text
@@ -2558,9 +3148,20 @@
                         return defined(this.y) ? this.y : 'Annotation label';
                     },
                     /**
-                     * How to handle the annotation's label that flow outside the
-                     * plot area. The justify option aligns the label inside the
-                     * plot area.
+                     * Whether the annotation is visible in the exported data
+                     * table.
+                     *
+                     * @sample highcharts/annotations/include-in-data-export/
+                     *         Do not include in the data export
+                     *
+                     * @since 8.2.0
+                     * @requires modules/export-data
+                     */
+                    includeInDataExport: true,
+                    /**
+                     * How to handle the annotation's label that flow outside
+                     * the plot area. The justify option aligns the label inside
+                     * the plot area.
                      *
                      * @sample highcharts/annotations/label-crop-overflow/
                      *         Crop or justify labels
@@ -2569,8 +3170,8 @@
                      */
                     overflow: 'justify',
                     /**
-                     * When either the borderWidth or the backgroundColor is set,
-                     * this    is the padding within the box.
+                     * When either the borderWidth or the backgroundColor is
+                     * set, this is the padding within the box.
                      *
                      * @sample highcharts/annotations/label-presentation/
                      *         Set labels graphic options
@@ -2588,8 +3189,9 @@
                      */
                     shadow: false,
                     /**
-                     * The name of a symbol to use for the border around the label.
-                     * Symbols are predefined functions on the Renderer object.
+                     * The name of a symbol to use for the border around the
+                     * label. Symbols are predefined functions on the Renderer
+                     * object.
                      *
                      * @sample highcharts/annotations/shapes/
                      *         Available shapes for labels
@@ -2647,8 +3249,8 @@
                     y: -16
                 },
                 /**
-                 * An array of labels for the annotation. For options that apply to
-                 * multiple labels, they can be added to the
+                 * An array of labels for the annotation. For options that apply
+                 * to multiple labels, they can be added to the
                  * [labelOptions](annotations.labelOptions.html).
                  *
                  * @type      {Array<*>}
@@ -2658,8 +3260,8 @@
                 /**
                  * This option defines the point to which the label will be
                  * connected. It can be either the point which exists in the
-                 * series - it is referenced by the point's id - or a new point with
-                 * defined x, y properties and optionally axes.
+                 * series - it is referenced by the point's id - or a new point
+                 * with defined x, y properties and optionally axes.
                  *
                  * @sample highcharts/annotations/mock-point/
                  *         Attach annotation to a mock point
@@ -2684,26 +3286,28 @@
                  * @apioption annotations.labels.point.y
                  */
                 /**
-                 * This number defines which xAxis the point is connected to. It
-                 * refers to either the axis id or the index of the axis in the
-                 * xAxis array. If the option is not configured or the axis is not
-                 * found the point's x coordinate refers to the chart pixels.
+                 * This number defines which xAxis the point is connected to.
+                 * It refers to either the axis id or the index of the axis in
+                 * the xAxis array. If the option is not configured or the axis
+                 * is not found the point's x coordinate refers to the chart
+                 * pixels.
                  *
                  * @type      {number|string|null}
                  * @apioption annotations.labels.point.xAxis
                  */
                 /**
-                 * This number defines which yAxis the point is connected to. It
-                 * refers to either the axis id or the index of the axis in the
-                 * yAxis array. If the option is not configured or the axis is not
-                 * found the point's y coordinate refers to the chart pixels.
+                 * This number defines which yAxis the point is connected to.
+                 * It refers to either the axis id or the index of the axis in
+                 * the yAxis array. If the option is not configured or the axis
+                 * is not found the point's y coordinate refers to the chart
+                 * pixels.
                  *
                  * @type      {number|string|null}
                  * @apioption annotations.labels.point.yAxis
                  */
                 /**
-                 * An array of shapes for the annotation. For options that apply to
-                 * multiple shapes, then can be added to the
+                 * An array of shapes for the annotation. For options that apply
+                 * to multiple shapes, then can be added to the
                  * [shapeOptions](annotations.shapeOptions.html).
                  *
                  * @type      {Array<*>}
@@ -2713,8 +3317,8 @@
                 /**
                  * This option defines the point to which the shape will be
                  * connected. It can be either the point which exists in the
-                 * series - it is referenced by the point's id - or a new point with
-                 * defined x, y properties and optionally axes.
+                 * series - it is referenced by the point's id - or a new point
+                 * with defined x, y properties and optionally axes.
                  *
                  * @declare   Highcharts.AnnotationMockPointOptionsObject
                  * @type      {string|Highcharts.AnnotationMockPointOptionsObject}
@@ -2722,9 +3326,9 @@
                  * @apioption annotations.shapes.point
                  */
                 /**
-                 * An array of points for the shape. This option is available for
-                 * shapes which can use multiple points such as path. A point can be
-                 * either a point object or a point's id.
+                 * An array of points for the shape. This option is available
+                 * for shapes which can use multiple points such as path. A
+                 * point can be either a point object or a point's id.
                  *
                  * @see [annotations.shapes.point](annotations.shapes.point.html)
                  *
@@ -2745,8 +3349,8 @@
                  * @apioption annotations.shapes.src
                  */
                 /**
-                 * Id of the marker which will be drawn at the final vertex of the
-                 * path. Custom markers can be defined in defs property.
+                 * Id of the marker which will be drawn at the final vertex of
+                 * the path. Custom markers can be defined in defs property.
                  *
                  * @see [defs.markers](defs.markers.html)
                  *
@@ -2757,8 +3361,8 @@
                  * @apioption annotations.shapes.markerEnd
                  */
                 /**
-                 * Id of the marker which will be drawn at the first vertex of the
-                 * path. Custom markers can be defined in defs property.
+                 * Id of the marker which will be drawn at the first vertex of
+                 * the path. Custom markers can be defined in defs property.
                  *
                  * @see [defs.markers](defs.markers.html)
                  *
@@ -2769,9 +3373,9 @@
                  * @apioption annotations.shapes.markerStart
                  */
                 /**
-                 * Options for annotation's shapes. Each shape inherits options from
-                 * the shapeOptions object. An option from the shapeOptions can be
-                 * overwritten by config for a specific shape.
+                 * Options for annotation's shapes. Each shape inherits options
+                 * from the shapeOptions object. An option from the shapeOptions
+                 * can be overwritten by config for a specific shape.
                  *
                  * @requires  modules/annotations
                  */
@@ -2801,12 +3405,12 @@
                      *         Basic shape annotation
                      *
                      * @type      {string}
-                     * @default   'rect'
+                     * @default   rect
                      * @apioption annotations.shapeOptions.type
                      */
                     /**
-                     * The URL for an image to use as the annotation shape. Note,
-                     * type has to be set to `'image'`.
+                     * The URL for an image to use as the annotation shape.
+                     * Note, type has to be set to `'image'`.
                      *
                      * @see [annotations.shapeOptions.type](annotations.shapeOptions.type)
                      * @sample highcharts/annotations/shape-src/
@@ -2831,452 +3435,97 @@
                      *         Basic shape annotation
                      *
                      * @type {Highcharts.ColorString}
-                     */
-                    stroke: 'rgba(0, 0, 0, 0.75)',
-                    /**
-                     * The pixel stroke width of the shape.
-                     *
-                     * @sample highcharts/annotations/shape/
-                     *         Basic shape annotation
-                     */
-                    strokeWidth: 1,
-                    /**
-                     * The color of the shape's fill.
-                     *
-                     * @sample highcharts/annotations/shape/
-                     *         Basic shape annotation
-                     *
-                     * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
-                     */
-                    fill: 'rgba(0, 0, 0, 0.75)',
-                    /**
-                     * The radius of the shape.
-                     *
-                     * @sample highcharts/annotations/shape/
-                     *         Basic shape annotation
-                     */
-                    r: 0,
-                    /**
-                     * Defines additional snapping area around an annotation
-                     * making this annotation to focus. Defined in pixels.
-                     */
-                    snap: 2
-                },
-                /**
-                 * Options for annotation's control points. Each control point
-                 * inherits options from controlPointOptions object.
-                 * Options from the controlPointOptions can be overwritten
-                 * by options in a specific control point.
-                 *
-                 * @declare   Highcharts.AnnotationControlPointOptionsObject
-                 * @requires  modules/annotations
-                 * @apioption annotations.controlPointOptions
-                 */
-                controlPointOptions: {
-                    /**
-                     * @type      {Highcharts.AnnotationControlPointPositionerFunction}
-                     * @apioption annotations.controlPointOptions.positioner
-                     */
-                    symbol: 'circle',
-                    width: 10,
-                    height: 10,
-                    style: {
-                        stroke: 'black',
-                        'stroke-width': 2,
-                        fill: 'white'
-                    },
-                    visible: false,
-                    events: {}
-                },
-                /**
-                 * Event callback when annotation is added to the chart.
-                 *
-                 * @type      {Highcharts.EventCallbackFunction<Highcharts.Annotation>}
-                 * @since     7.1.0
-                 * @apioption annotations.events.add
-                 */
-                /**
-                 * Event callback when annotation is updated (e.g. drag and
-                 * droppped or resized by control points).
-                 *
-                 * @type      {Highcharts.EventCallbackFunction<Highcharts.Annotation>}
-                 * @since     7.1.0
-                 * @apioption annotations.events.afterUpdate
-                 */
-                /**
-                 * Event callback when annotation is removed from the chart.
-                 *
-                 * @type      {Highcharts.EventCallbackFunction<Highcharts.Annotation>}
-                 * @since     7.1.0
-                 * @apioption annotations.events.remove
-                 */
-                /**
-                 * Events available in annotations.
-                 *
-                 * @requires modules/annotations
-                 */
-                events: {},
-                /**
-                 * The Z index of the annotation.
-                 */
-                zIndex: 6
-            },
-            /**
-             * Initialize the annotation.
-             * @private
-             */
-            init: function () {
-                this.linkPoints();
-                this.addControlPoints();
-                this.addShapes();
-                this.addLabels();
-                this.setLabelCollector();
-            },
-            getLabelsAndShapesOptions: function (baseOptions, newOptions) {
-                var mergedOptions = {};
-                ['labels', 'shapes'].forEach(function (name) {
-                    if (baseOptions[name]) {
-                        mergedOptions[name] = splat(newOptions[name]).map(function (basicOptions, i) {
-                            return merge(baseOptions[name][i], basicOptions);
-                        });
-                    }
-                });
-                return mergedOptions;
-            },
-            addShapes: function () {
-                (this.options.shapes || []).forEach(function (shapeOptions, i) {
-                    var shape = this.initShape(shapeOptions,
-                        i);
-                    merge(true, this.options.shapes[i], shape.options);
-                }, this);
-            },
-            addLabels: function () {
-                (this.options.labels || []).forEach(function (labelsOptions, i) {
-                    var labels = this.initLabel(labelsOptions,
-                        i);
-                    merge(true, this.options.labels[i], labels.options);
-                }, this);
-            },
-            addClipPaths: function () {
-                this.setClipAxes();
-                if (this.clipXAxis && this.clipYAxis) {
-                    this.clipRect = this.chart.renderer.clipRect(this.getClipBox());
-                }
-            },
-            setClipAxes: function () {
-                var xAxes = this.chart.xAxis,
-                    yAxes = this.chart.yAxis,
-                    linkedAxes = (this.options.labels || [])
-                        .concat(this.options.shapes || [])
-                        .reduce(function (axes,
-                    labelOrShape) {
-                        return [
-                            xAxes[labelOrShape &&
-                                labelOrShape.point &&
-                                labelOrShape.point.xAxis] || axes[0],
-                            yAxes[labelOrShape &&
-                                labelOrShape.point &&
-                                labelOrShape.point.yAxis] || axes[1]
-                        ];
-                }, []);
-                this.clipXAxis = linkedAxes[0];
-                this.clipYAxis = linkedAxes[1];
-            },
-            getClipBox: function () {
-                if (this.clipXAxis && this.clipYAxis) {
-                    return {
-                        x: this.clipXAxis.left,
-                        y: this.clipYAxis.top,
-                        width: this.clipXAxis.width,
-                        height: this.clipYAxis.height
-                    };
-                }
-            },
-            setLabelCollector: function () {
-                var annotation = this;
-                annotation.labelCollector = function () {
-                    return annotation.labels.reduce(function (labels, label) {
-                        if (!label.options.allowOverlap) {
-                            labels.push(label.graphic);
-                        }
-                        return labels;
-                    }, []);
-                };
-                annotation.chart.labelCollectors.push(annotation.labelCollector);
-            },
-            /**
-             * Set an annotation options.
-             * @private
-             * @param {Highcharts.AnnotationsOptions} - user options for an annotation
-             */
-            setOptions: function (userOptions) {
-                this.options = merge(this.defaultOptions, userOptions);
-            },
-            redraw: function (animation) {
-                this.linkPoints();
-                if (!this.graphic) {
-                    this.render();
-                }
-                if (this.clipRect) {
-                    this.clipRect.animate(this.getClipBox());
-                }
-                this.redrawItems(this.shapes, animation);
-                this.redrawItems(this.labels, animation);
-                controllableMixin.redraw.call(this, animation);
-            },
-            /**
-             * @private
-             * @param {Array<Highcharts.AnnotationControllable>} items
-             * @param {boolean} [animation]
-             */
-            redrawItems: function (items, animation) {
-                var i = items.length;
-                // needs a backward loop
-                // labels/shapes array might be modified
-                // due to destruction of the item
-                while (i--) {
-                    this.redrawItem(items[i], animation);
-                }
-            },
-            /**
-             * @private
-             * @param {Array<Highcharts.AnnotationControllable>} items
-             */
-            renderItems: function (items) {
-                var i = items.length;
-                while (i--) {
-                    this.renderItem(items[i]);
-                }
-            },
-            render: function () {
-                var renderer = this.chart.renderer;
-                this.graphic = renderer
-                    .g('annotation')
-                    .attr({
-                    zIndex: this.options.zIndex,
-                    visibility: this.options.visible ?
-                        'visible' :
-                        'hidden'
-                })
-                    .add();
-                this.shapesGroup = renderer
-                    .g('annotation-shapes')
-                    .add(this.graphic)
-                    .clip(this.chart.plotBoxClip);
-                this.labelsGroup = renderer
-                    .g('annotation-labels')
-                    .attr({
-                    // hideOverlappingLabels requires translation
-                    translateX: 0,
-                    translateY: 0
-                })
-                    .add(this.graphic);
-                this.addClipPaths();
-                if (this.clipRect) {
-                    this.graphic.clip(this.clipRect);
-                }
-                // Render shapes and labels before adding events (#13070).
-                this.renderItems(this.shapes);
-                this.renderItems(this.labels);
-                this.addEvents();
-                controllableMixin.render.call(this);
-            },
-            /**
-             * Set the annotation's visibility.
-             * @private
-             * @param {boolean} [visible]
-             * Whether to show or hide an annotation. If the param is omitted, the
-             * annotation's visibility is toggled.
-             */
-            setVisibility: function (visible) {
-                var options = this.options,
-                    visibility = pick(visible, !options.visible);
-                this.graphic.attr('visibility', visibility ? 'visible' : 'hidden');
-                if (!visibility) {
-                    this.setControlPointsVisibility(false);
-                }
-                options.visible = visibility;
-            },
-            setControlPointsVisibility: function (visible) {
-                var setItemControlPointsVisibility = function (item) {
-                        item.setControlPointsVisibility(visible);
-                };
-                controllableMixin.setControlPointsVisibility.call(this, visible);
-                this.shapes.forEach(setItemControlPointsVisibility);
-                this.labels.forEach(setItemControlPointsVisibility);
-            },
-            /**
-             * Destroy the annotation. This function does not touch the chart
-             * that the annotation belongs to (all annotations are kept in
-             * the chart.annotations array) - it is recommended to use
-             * {@link Highcharts.Chart#removeAnnotation} instead.
-             * @private
-             */
-            destroy: function () {
-                var chart = this.chart,
-                    destroyItem = function (item) {
-                        item.destroy();
-                };
-                this.labels.forEach(destroyItem);
-                this.shapes.forEach(destroyItem);
-                this.clipXAxis = null;
-                this.clipYAxis = null;
-                erase(chart.labelCollectors, this.labelCollector);
-                eventEmitterMixin.destroy.call(this);
-                controllableMixin.destroy.call(this);
-                destroyObjectProperties(this, chart);
-            },
-            /**
-             * See {@link Highcharts.Chart#removeAnnotation}.
-             * @private
-             */
-            remove: function () {
-                // Let chart.update() remove annoations on demand
-                return this.chart.removeAnnotation(this);
-            },
-            /**
-             * Updates an annotation.
-             *
-             * @function Highcharts.Annotation#update
-             *
-             * @param {Partial<Highcharts.AnnotationsOptions>} userOptions
-             * New user options for the annotation.
-             *
-             * @return {void}
-             */
-            update: function (userOptions, redraw) {
-                var chart = this.chart,
-                    labelsAndShapes = this.getLabelsAndShapesOptions(this.userOptions,
-                    userOptions),
-                    userOptionsIndex = chart.annotations.indexOf(this),
-                    options = merge(true,
-                    this.userOptions,
-                    userOptions);
-                options.labels = labelsAndShapes.labels;
-                options.shapes = labelsAndShapes.shapes;
-                this.destroy();
-                this.constructor(chart, options);
-                // Update options in chart options, used in exporting (#9767):
-                chart.options.annotations[userOptionsIndex] = options;
-                this.isUpdating = true;
-                if (pick(redraw, true)) {
-                    chart.redraw();
-                }
-                fireEvent(this, 'afterUpdate');
-                this.isUpdating = false;
-            },
-            /* *************************************************************
-             * ITEM SECTION
-             * Contains methods for handling a single item in an annotation
-             **************************************************************** */
-            /**
-             * Initialisation of a single shape
-             * @private
-             * @param {Object} shapeOptions - a confg object for a single shape
-             */
-            initShape: function (shapeOptions, index) {
-                var options = merge(this.options.shapeOptions, {
-                        controlPointOptions: this.options.controlPointOptions
-                    },
-                    shapeOptions),
-                    shape = new Annotation.shapesMap[options.type](this,
-                    options,
-                    index);
-                shape.itemType = 'shape';
-                this.shapes.push(shape);
-                return shape;
-            },
-            /**
-             * Initialisation of a single label
-             * @private
-             */
-            initLabel: function (labelOptions, index) {
-                var options = merge(this.options.labelOptions, {
-                        controlPointOptions: this.options.controlPointOptions
+                     */
+                    stroke: 'rgba(0, 0, 0, 0.75)',
+                    /**
+                     * The pixel stroke width of the shape.
+                     *
+                     * @sample highcharts/annotations/shape/
+                     *         Basic shape annotation
+                     */
+                    strokeWidth: 1,
+                    /**
+                     * The color of the shape's fill.
+                     *
+                     * @sample highcharts/annotations/shape/
+                     *         Basic shape annotation
+                     *
+                     * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
+                     */
+                    fill: 'rgba(0, 0, 0, 0.75)',
+                    /**
+                     * The radius of the shape.
+                     *
+                     * @sample highcharts/annotations/shape/
+                     *         Basic shape annotation
+                     */
+                    r: 0,
+                    /**
+                     * Defines additional snapping area around an annotation
+                     * making this annotation to focus. Defined in pixels.
+                     */
+                    snap: 2
+                },
+                /**
+                 * Options for annotation's control points. Each control point
+                 * inherits options from controlPointOptions object.
+                 * Options from the controlPointOptions can be overwritten
+                 * by options in a specific control point.
+                 *
+                 * @declare   Highcharts.AnnotationControlPointOptionsObject
+                 * @requires  modules/annotations
+                 * @apioption annotations.controlPointOptions
+                 */
+                controlPointOptions: {
+                    /**
+                     * @type      {Highcharts.AnnotationControlPointPositionerFunction}
+                     * @apioption annotations.controlPointOptions.positioner
+                     */
+                    symbol: 'circle',
+                    width: 10,
+                    height: 10,
+                    style: {
+                        stroke: 'black',
+                        'stroke-width': 2,
+                        fill: 'white'
                     },
-                    labelOptions),
-                    label = new ControllableLabel(this,
-                    options,
-                    index);
-                label.itemType = 'label';
-                this.labels.push(label);
-                return label;
-            },
-            /**
-             * Redraw a single item.
-             * @private
-             * @param {Annotation.Label|Annotation.Shape} item
-             * @param {boolean} [animation]
-             */
-            redrawItem: function (item, animation) {
-                item.linkPoints();
-                if (!item.shouldBeDrawn()) {
-                    this.destroyItem(item);
-                }
-                else {
-                    if (!item.graphic) {
-                        this.renderItem(item);
-                    }
-                    item.redraw(pick(animation, true) && item.graphic.placed);
-                    if (item.points.length) {
-                        this.adjustVisibility(item);
-                    }
-                }
-            },
-            /**
-             * Hide or show annotaiton attached to points.
-             * @private
-             * @param {Annotation.Label|Annotation.Shape} item
-             */
-            adjustVisibility: function (item) {
-                var hasVisiblePoints = false,
-                    label = item.graphic;
-                item.points.forEach(function (point) {
-                    if (point.series.visible !== false &&
-                        point.visible !== false) {
-                        hasVisiblePoints = true;
-                    }
-                });
-                if (!hasVisiblePoints) {
-                    label.hide();
-                }
-                else if (label.visibility === 'hidden') {
-                    label.show();
-                }
-            },
-            /**
-             * Destroy a single item.
-             * @private
-             * @param {Annotation.Label|Annotation.Shape} item
-             */
-            destroyItem: function (item) {
-                // erase from shapes or labels array
-                erase(this[item.itemType + 's'], item);
-                item.destroy();
-            },
-            /**
-             * @private
-             */
-            renderItem: function (item) {
-                item.render(item.itemType === 'label' ?
-                    this.labelsGroup :
-                    this.shapesGroup);
+                    visible: false,
+                    events: {}
+                },
+                /**
+                 * Event callback when annotation is added to the chart.
+                 *
+                 * @type      {Highcharts.EventCallbackFunction<Highcharts.Annotation>}
+                 * @since     7.1.0
+                 * @apioption annotations.events.add
+                 */
+                /**
+                 * Event callback when annotation is updated (e.g. drag and
+                 * droppped or resized by control points).
+                 *
+                 * @type      {Highcharts.EventCallbackFunction<Highcharts.Annotation>}
+                 * @since     7.1.0
+                 * @apioption annotations.events.afterUpdate
+                 */
+                /**
+                 * Event callback when annotation is removed from the chart.
+                 *
+                 * @type      {Highcharts.EventCallbackFunction<Highcharts.Annotation>}
+                 * @since     7.1.0
+                 * @apioption annotations.events.remove
+                 */
+                /**
+                 * Events available in annotations.
+                 *
+                 * @requires modules/annotations
+                 */
+                events: {},
+                /**
+                 * The Z index of the annotation.
+                 */
+                zIndex: 6
             }
-        });
-        /**
-         * An object uses for mapping between a shape type and a constructor.
-         * To add a new shape type extend this object with type name as a key
-         * and a constructor as its value.
-         */
-        Annotation.shapesMap = {
-            'rect': ControllableRect,
-            'circle': ControllableCircle,
-            'path': ControllablePath,
-            'image': ControllableImage
-        };
-        Annotation.types = {};
-        Annotation.MockPoint = MockPoint;
-        Annotation.ControlPoint = ControlPoint;
+        }));
         H.extendAnnotation = function (Constructor, BaseConstructor, prototype, defaultOptions) {
             BaseConstructor = BaseConstructor || Annotation;
             merge(true, Constructor.prototype, BaseConstructor.prototype, prototype);
@@ -3309,6 +3558,9 @@
                 this.options.annotations.push(annotation.options);
                 if (pick(redraw, true)) {
                     annotation.redraw();
+                    annotation.graphic.attr({
+                        opacity: 1
+                    });
                 }
                 return annotation;
             },
@@ -3337,6 +3589,9 @@
                 this.plotBoxClip.attr(this.plotBox);
                 this.annotations.forEach(function (annotation) {
                     annotation.redraw();
+                    annotation.graphic.animate({
+                        opacity: 1
+                    }, annotation.animationConfig);
                 });
             }
         });
@@ -3365,28 +3620,203 @@
                 chart.plotBoxClip.destroy();
                 chart.controlPointsGroup.destroy();
             });
+            addEvent(chart, 'exportData', function (event) {
+                var _a,
+                    _b,
+                    _c,
+                    _d,
+                    _e,
+                    _f,
+                    _g,
+                    _h;
+                var annotations = chart.annotations,
+                    csvColumnHeaderFormatter = ((this.options.exporting &&
+                        this.options.exporting.csv) ||
+                        {}).columnHeaderFormatter, 
+                    // If second row doesn't have xValues
+                    // then it is a title row thus multiple level header is in use.
+                    multiLevelHeaders = !event.dataRows[1].xValues,
+                    annotationHeader = (_b = (_a = chart.options.lang) === null || _a === void 0 ? void 0 : _a.exportData) === null || _b === void 0 ? void 0 : _b.annotationHeader,
+                    columnHeaderFormatter = function (index) {
+                        var s;
+                    if (csvColumnHeaderFormatter) {
+                        s = csvColumnHeaderFormatter(index);
+                        if (s !== false) {
+                            return s;
+                        }
+                    }
+                    s = annotationHeader + ' ' + index;
+                    if (multiLevelHeaders) {
+                        return {
+                            columnTitle: s,
+                            topLevelColumnTitle: s
+                        };
+                    }
+                    return s;
+                }, startRowLength = event.dataRows[0].length, annotationSeparator = (_e = (_d = (_c = chart.options.exporting) === null || _c === void 0 ? void 0 : _c.csv) === null || _d === void 0 ? void 0 : _d.annotations) === null || _e === void 0 ? void 0 : _e.itemDelimiter, joinAnnotations = (_h = (_g = (_f = chart.options.exporting) === null || _f === void 0 ? void 0 : _f.csv) === null || _g === void 0 ? void 0 : _g.annotations) === null || _h === void 0 ? void 0 : _h.join;
+                annotations.forEach(function (annotation) {
+                    if (annotation.options.labelOptions.includeInDataExport) {
+                        annotation.labels.forEach(function (label) {
+                            if (label.options.text) {
+                                var annotationText_1 = label.options.text;
+                                label.points.forEach(function (points) {
+                                    var annotationX = points.x,
+                                        xAxisIndex = points.series.xAxis ?
+                                            points.series.xAxis.options.index :
+                                            -1;
+                                    var wasAdded = false;
+                                    // Annotation not connected to any xAxis -
+                                    // add new row.
+                                    if (xAxisIndex === -1) {
+                                        var n = event.dataRows[0].length,
+                                            newRow = new Array(n);
+                                        for (var i = 0; i < n; ++i) {
+                                            newRow[i] = '';
+                                        }
+                                        newRow.push(annotationText_1);
+                                        newRow.xValues = [];
+                                        newRow.xValues[xAxisIndex] = annotationX;
+                                        event.dataRows.push(newRow);
+                                        wasAdded = true;
+                                    }
+                                    // Annotation placed on a exported data point
+                                    // - add new column
+                                    if (!wasAdded) {
+                                        event.dataRows.forEach(function (row, rowIndex) {
+                                            if (!wasAdded &&
+                                                row.xValues &&
+                                                xAxisIndex !== void 0 &&
+                                                annotationX === row.xValues[xAxisIndex]) {
+                                                if (joinAnnotations &&
+                                                    row.length > startRowLength) {
+                                                    row[row.length - 1] +=
+                                                        annotationSeparator + annotationText_1;
+                                                }
+                                                else {
+                                                    row.push(annotationText_1);
+                                                }
+                                                wasAdded = true;
+                                            }
+                                        });
+                                    }
+                                    // Annotation not placed on any exported data point,
+                                    // but connected to the xAxis - add new row
+                                    if (!wasAdded) {
+                                        var n = event.dataRows[0].length,
+                                            newRow = new Array(n);
+                                        for (var i = 0; i < n; ++i) {
+                                            newRow[i] = '';
+                                        }
+                                        newRow[0] = annotationX;
+                                        newRow.push(annotationText_1);
+                                        newRow.xValues = [];
+                                        if (xAxisIndex !== void 0) {
+                                            newRow.xValues[xAxisIndex] = annotationX;
+                                        }
+                                        event.dataRows.push(newRow);
+                                    }
+                                });
+                            }
+                        });
+                    }
+                });
+                var maxRowLen = 0;
+                event.dataRows.forEach(function (row) {
+                    maxRowLen = Math.max(maxRowLen, row.length);
+                });
+                var newRows = maxRowLen - event.dataRows[0].length;
+                for (var i = 0; i < newRows; i++) {
+                    var header = columnHeaderFormatter(i + 1);
+                    if (multiLevelHeaders) {
+                        event.dataRows[0].push(header.topLevelColumnTitle);
+                        event.dataRows[1].push(header.columnTitle);
+                    }
+                    else {
+                        event.dataRows[0].push(header);
+                    }
+                }
+            });
         });
-        wrap(H.Pointer.prototype, 'onContainerMouseDown', function (proceed) {
+        wrap(Pointer.prototype, 'onContainerMouseDown', function (proceed) {
             if (!this.chart.hasDraggedAnnotation) {
                 proceed.apply(this, Array.prototype.slice.call(arguments, 1));
             }
         });
+        H.Annotation = Annotation;
 
+        return Annotation;
     });
-    _registerModule(_modules, 'annotations/types/BasicAnnotation.js', [_modules['parts/Globals.js']], function (H) {
+    _registerModule(_modules, 'Extensions/Annotations/Types/BasicAnnotation.js', [_modules['Extensions/Annotations/Annotations.js'], _modules['Extensions/Annotations/MockPoint.js'], _modules['Core/Utilities.js']], function (Annotation, MockPoint, U) {
         /* *
          *
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
-        var Annotation = H.Annotation;
+        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 __());
+            };
+        })();
+        var merge = U.merge;
         /* eslint-disable no-invalid-this */
-        var BasicAnnotation = function () {
-                Annotation.apply(this,
-            arguments);
-        };
-        H.extendAnnotation(BasicAnnotation, null, {
-            basicControlPoints: {
+        var BasicAnnotation = /** @class */ (function (_super) {
+                __extends(BasicAnnotation, _super);
+            /* *
+             *
+             *  Constructors
+             *
+             * */
+            function BasicAnnotation(chart, options) {
+                return _super.call(this, chart, options) || this;
+            }
+            /* *
+             *
+             *  Functions
+             *
+             * */
+            BasicAnnotation.prototype.addControlPoints = function () {
+                var options = this.options,
+                    controlPoints = BasicAnnotation.basicControlPoints,
+                    annotationType = this.basicType,
+                    optionsGroup = options.labels || options.shapes;
+                optionsGroup.forEach(function (group) {
+                    group.controlPoints = controlPoints[annotationType];
+                });
+            };
+            BasicAnnotation.prototype.init = function () {
+                var options = this.options;
+                if (options.shapes) {
+                    delete options.labelOptions;
+                    if (options.shapes[0].type === 'circle') {
+                        this.basicType = 'circle';
+                    }
+                    else {
+                        this.basicType = 'rectangle';
+                    }
+                }
+                else {
+                    delete options.shapes;
+                    this.basicType = 'label';
+                }
+                Annotation.prototype.init.apply(this, arguments);
+            };
+            /* *
+             *
+             *  Static Properties
+             *
+             * */
+            BasicAnnotation.basicControlPoints = {
                 label: [{
                         symbol: 'triangle-down',
                         positioner: function (target) {
@@ -3396,7 +3826,7 @@
                                     y: -9e7
                                 };
                             }
-                            var xy = H.Annotation.MockPoint
+                            var xy = MockPoint
                                     .pointToPixels(target.points[0]);
                             return {
                                 x: xy.x - this.graphic.width / 2,
@@ -3443,7 +3873,7 @@
                     }],
                 rectangle: [{
                         positioner: function (annotation) {
-                            var xy = H.Annotation.MockPoint
+                            var xy = MockPoint
                                     .pointToPixels(annotation.points[2]);
                             return {
                                 x: xy.x - 4,
@@ -3472,7 +3902,7 @@
                     }],
                 circle: [{
                         positioner: function (target) {
-                            var xy = H.Annotation.MockPoint.pointToPixels(target.points[0]),
+                            var xy = MockPoint.pointToPixels(target.points[0]),
                                 r = target.options.r;
                             return {
                                 x: xy.x + r * Math.cos(Math.PI / 4) -
@@ -3497,59 +3927,73 @@
                             }
                         }
                     }]
-            },
-            addControlPoints: function () {
-                var options = this.options,
-                    controlPoints = this.basicControlPoints,
-                    langKey = options.langKey,
-                    optionsGroup = options.labels || options.shapes;
-                optionsGroup.forEach(function (group) {
-                    if (langKey) {
-                        group.controlPoints = controlPoints[langKey];
-                    }
-                });
-            }
-        });
+            };
+            return BasicAnnotation;
+        }(Annotation));
+        BasicAnnotation.prototype.defaultOptions = merge(Annotation.prototype.defaultOptions, {});
         Annotation.types.basicAnnotation = BasicAnnotation;
 
         return BasicAnnotation;
     });
-    _registerModule(_modules, 'annotations/types/CrookedLine.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js']], function (H, U) {
+    _registerModule(_modules, 'Extensions/Annotations/Types/CrookedLine.js', [_modules['Extensions/Annotations/Annotations.js'], _modules['Extensions/Annotations/ControlPoint.js'], _modules['Extensions/Annotations/MockPoint.js'], _modules['Core/Utilities.js']], function (Annotation, ControlPoint, MockPoint, U) {
         /* *
          *
          *  !!!!!!! 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 __());
+            };
+        })();
         var merge = U.merge;
-        var Annotation = H.Annotation,
-            MockPoint = Annotation.MockPoint,
-            ControlPoint = Annotation.ControlPoint;
         /* eslint-disable no-invalid-this, valid-jsdoc */
-        var CrookedLine = function () {
-                Annotation.apply(this,
-            arguments);
-        };
-        H.extendAnnotation(CrookedLine, null, {
+        var CrookedLine = /** @class */ (function (_super) {
+                __extends(CrookedLine, _super);
+            /* *
+             *
+             * Constructors
+             *
+             * */
+            function CrookedLine(chart, options) {
+                return _super.call(this, chart, options) || this;
+            }
+            /* *
+             *
+             * Functions
+             *
+             * */
             /**
              * Overrides default setter to get axes from typeOptions.
              * @private
              */
-            setClipAxes: function () {
+            CrookedLine.prototype.setClipAxes = function () {
                 this.clipXAxis = this.chart.xAxis[this.options.typeOptions.xAxis];
                 this.clipYAxis = this.chart.yAxis[this.options.typeOptions.yAxis];
-            },
-            getPointsOptions: function () {
+            };
+            CrookedLine.prototype.getPointsOptions = function () {
                 var typeOptions = this.options.typeOptions;
-                return typeOptions.points.map(function (pointOptions) {
+                return (typeOptions.points || []).map(function (pointOptions) {
                     pointOptions.xAxis = typeOptions.xAxis;
                     pointOptions.yAxis = typeOptions.yAxis;
                     return pointOptions;
                 });
-            },
-            getControlPointsOptions: function () {
+            };
+            CrookedLine.prototype.getControlPointsOptions = function () {
                 return this.getPointsOptions();
-            },
-            addControlPoints: function () {
+            };
+            CrookedLine.prototype.addControlPoints = function () {
                 this.getControlPointsOptions().forEach(function (pointOptions, i) {
                     var controlPoint = new ControlPoint(this.chart,
                         this,
@@ -3559,8 +4003,8 @@
                     this.controlPoints.push(controlPoint);
                     pointOptions.controlPoint = controlPoint.options;
                 }, this);
-            },
-            addShapes: function () {
+            };
+            CrookedLine.prototype.addShapes = function () {
                 var typeOptions = this.options.typeOptions,
                     shape = this.initShape(merge(typeOptions.line, {
                         type: 'path',
@@ -3572,8 +4016,10 @@
                     })
                 }), false);
                 typeOptions.line = shape.options;
-            }
-        }, 
+            };
+            return CrookedLine;
+        }(Annotation));
+        CrookedLine.prototype.defaultOptions = merge(Annotation.prototype.defaultOptions, 
         /**
          * A crooked line annotation.
          *
@@ -3668,33 +4114,55 @@
 
         return CrookedLine;
     });
-    _registerModule(_modules, 'annotations/types/ElliottWave.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js']], function (H, U) {
+    _registerModule(_modules, 'Extensions/Annotations/Types/ElliottWave.js', [_modules['Extensions/Annotations/Annotations.js'], _modules['Extensions/Annotations/Types/CrookedLine.js'], _modules['Core/Utilities.js']], function (Annotation, CrookedLine, U) {
         /* *
          *
          *  !!!!!!! 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 __());
+            };
+        })();
         var merge = U.merge;
-        var Annotation = H.Annotation,
-            CrookedLine = Annotation.types.crookedLine;
         /* eslint-disable no-invalid-this, valid-jsdoc */
-        var ElliottWave = function () {
-                CrookedLine.apply(this,
-            arguments);
-        };
-        H.extendAnnotation(ElliottWave, CrookedLine, {
-            addLabels: function () {
+        var ElliottWave = /** @class */ (function (_super) {
+                __extends(ElliottWave, _super);
+            function ElliottWave(chart, options) {
+                return _super.call(this, chart, options) || this;
+            }
+            /* *
+             *
+             * Functions
+             *
+             * */
+            ElliottWave.prototype.addLabels = function () {
                 this.getPointsOptions().forEach(function (point, i) {
-                    var label = this.initLabel(merge(point.label, {
-                            text: this.options.typeOptions.labels[i],
+                    var typeOptions = this.options.typeOptions,
+                        label = this.initLabel(merge(point.label, {
+                            text: typeOptions.labels[i],
                             point: function (target) {
                                 return target.annotation.points[i];
                         }
                     }), false);
                     point.label = label.options;
                 }, this);
-            }
-        }, 
+            };
+            return ElliottWave;
+        }(CrookedLine));
+        ElliottWave.prototype.defaultOptions = merge(CrookedLine.prototype.defaultOptions, 
         /**
          * An elliott wave annotation.
          *
@@ -3734,17 +4202,29 @@
 
         return ElliottWave;
     });
-    _registerModule(_modules, 'annotations/types/Tunnel.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js']], function (H, U) {
+    _registerModule(_modules, 'Extensions/Annotations/Types/Tunnel.js', [_modules['Extensions/Annotations/Annotations.js'], _modules['Extensions/Annotations/ControlPoint.js'], _modules['Extensions/Annotations/Types/CrookedLine.js'], _modules['Extensions/Annotations/MockPoint.js'], _modules['Core/Utilities.js']], function (Annotation, ControlPoint, CrookedLine, MockPoint, U) {
         /* *
          *
          *  !!!!!!! 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 __());
+            };
+        })();
         var merge = U.merge;
-        var Annotation = H.Annotation,
-            CrookedLine = Annotation.types.crookedLine,
-            ControlPoint = Annotation.ControlPoint,
-            MockPoint = Annotation.MockPoint;
         /* eslint-disable no-invalid-this, valid-jsdoc */
         /**
          * @private
@@ -3752,40 +4232,52 @@
         function getSecondCoordinate(p1, p2, x) {
             return (p2.y - p1.y) / (p2.x - p1.x) * (x - p1.x) + p1.y;
         }
-        var Tunnel = function () {
-                CrookedLine.apply(this,
-            arguments);
-        };
-        H.extendAnnotation(Tunnel, CrookedLine, {
-            getPointsOptions: function () {
+        var Tunnel = /** @class */ (function (_super) {
+                __extends(Tunnel, _super);
+            /* *
+             *
+             * Constructors
+             *
+             * */
+            function Tunnel(chart, options) {
+                return _super.call(this, chart, options) || this;
+            }
+            /* *
+             *
+             * Functions
+             *
+             * */
+            Tunnel.prototype.getPointsOptions = function () {
                 var pointsOptions = CrookedLine.prototype.getPointsOptions.call(this);
                 pointsOptions[2] = this.heightPointOptions(pointsOptions[1]);
                 pointsOptions[3] = this.heightPointOptions(pointsOptions[0]);
                 return pointsOptions;
-            },
-            getControlPointsOptions: function () {
+            };
+            Tunnel.prototype.getControlPointsOptions = function () {
                 return this.getPointsOptions().slice(0, 2);
-            },
-            heightPointOptions: function (pointOptions) {
-                var heightPointOptions = merge(pointOptions);
-                heightPointOptions.y += this.options.typeOptions.height;
+            };
+            Tunnel.prototype.heightPointOptions = function (pointOptions) {
+                var heightPointOptions = merge(pointOptions),
+                    typeOptions = this.options.typeOptions;
+                heightPointOptions.y += typeOptions.height;
                 return heightPointOptions;
-            },
-            addControlPoints: function () {
+            };
+            Tunnel.prototype.addControlPoints = function () {
                 CrookedLine.prototype.addControlPoints.call(this);
                 var options = this.options,
+                    typeOptions = options.typeOptions,
                     controlPoint = new ControlPoint(this.chart,
                     this,
                     merge(options.controlPointOptions,
-                    options.typeOptions.heightControlPoint), 2);
+                    typeOptions.heightControlPoint), 2);
                 this.controlPoints.push(controlPoint);
-                options.typeOptions.heightControlPoint = controlPoint.options;
-            },
-            addShapes: function () {
+                typeOptions.heightControlPoint = controlPoint.options;
+            };
+            Tunnel.prototype.addShapes = function () {
                 this.addLine();
                 this.addBackground();
-            },
-            addLine: function () {
+            };
+            Tunnel.prototype.addLine = function () {
                 var line = this.initShape(merge(this.options.typeOptions.line, {
                         type: 'path',
                         points: [
@@ -3800,14 +4292,14 @@
                     ]
                 }), false);
                 this.options.typeOptions.line = line.options;
-            },
-            addBackground: function () {
+            };
+            Tunnel.prototype.addBackground = function () {
                 var background = this.initShape(merge(this.options.typeOptions.background, {
                         type: 'path',
                         points: this.points.slice()
                     }));
                 this.options.typeOptions.background = background.options;
-            },
+            };
             /**
              * Translate start or end ("left" or "right") side of the tunnel.
              * @private
@@ -3815,23 +4307,25 @@
              * @param {number} dy - the amount of y translation
              * @param {boolean} [end] - whether to translate start or end side
              */
-            translateSide: function (dx, dy, end) {
+            Tunnel.prototype.translateSide = function (dx, dy, end) {
                 var topIndex = Number(end),
                     bottomIndex = topIndex === 0 ? 3 : 2;
                 this.translatePoint(dx, dy, topIndex);
                 this.translatePoint(dx, dy, bottomIndex);
-            },
+            };
             /**
              * Translate height of the tunnel.
              * @private
              * @param {number} dh - the amount of height translation
              */
-            translateHeight: function (dh) {
+            Tunnel.prototype.translateHeight = function (dh) {
                 this.translatePoint(0, dh, 2);
                 this.translatePoint(0, dh, 3);
                 this.options.typeOptions.height = this.points[3].y - this.points[0].y;
-            }
-        }, 
+            };
+            return Tunnel;
+        }(CrookedLine));
+        Tunnel.prototype.defaultOptions = merge(CrookedLine.prototype.defaultOptions, 
         /**
          * A tunnel annotation.
          *
@@ -3911,109 +4405,134 @@
 
         return Tunnel;
     });
-    _registerModule(_modules, 'annotations/types/InfinityLine.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js']], function (H, U) {
+    _registerModule(_modules, 'Extensions/Annotations/Types/InfinityLine.js', [_modules['Extensions/Annotations/Annotations.js'], _modules['Extensions/Annotations/Types/CrookedLine.js'], _modules['Extensions/Annotations/MockPoint.js'], _modules['Core/Utilities.js']], function (Annotation, CrookedLine, MockPoint, U) {
         /* *
          *
          *  !!!!!!! 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 __());
+            };
+        })();
         var merge = U.merge;
-        var Annotation = H.Annotation,
-            MockPoint = Annotation.MockPoint,
-            CrookedLine = Annotation.types.crookedLine;
         /* eslint-disable no-invalid-this, valid-jsdoc */
-        var InfinityLine = function () {
-                CrookedLine.apply(this,
-            arguments);
-        };
-        InfinityLine.findEdgeCoordinate = function (firstPoint, secondPoint, xOrY, edgePointFirstCoordinate) {
-            var xOrYOpposite = xOrY === 'x' ? 'y' : 'x';
-            // solves equation for x or y
-            // y - y1 = (y2 - y1) / (x2 - x1) * (x - x1)
-            return ((secondPoint[xOrY] - firstPoint[xOrY]) *
-                (edgePointFirstCoordinate - firstPoint[xOrYOpposite]) /
-                (secondPoint[xOrYOpposite] - firstPoint[xOrYOpposite]) +
-                firstPoint[xOrY]);
-        };
-        InfinityLine.findEdgePoint = function (firstPoint, secondPoint) {
-            var xAxis = firstPoint.series.xAxis,
-                yAxis = secondPoint.series.yAxis,
-                firstPointPixels = MockPoint.pointToPixels(firstPoint),
-                secondPointPixels = MockPoint.pointToPixels(secondPoint),
-                deltaX = secondPointPixels.x - firstPointPixels.x,
-                deltaY = secondPointPixels.y - firstPointPixels.y,
-                xAxisMin = xAxis.left,
-                xAxisMax = xAxisMin + xAxis.width,
-                yAxisMin = yAxis.top,
-                yAxisMax = yAxisMin + yAxis.height,
-                xLimit = deltaX < 0 ? xAxisMin : xAxisMax,
-                yLimit = deltaY < 0 ? yAxisMin : yAxisMax,
-                edgePoint = {
-                    x: deltaX === 0 ? firstPointPixels.x : xLimit,
-                    y: deltaY === 0 ? firstPointPixels.y : yLimit
-                },
-                edgePointX,
-                edgePointY,
-                swap;
-            if (deltaX !== 0 && deltaY !== 0) {
-                edgePointY = InfinityLine.findEdgeCoordinate(firstPointPixels, secondPointPixels, 'y', xLimit);
-                edgePointX = InfinityLine.findEdgeCoordinate(firstPointPixels, secondPointPixels, 'x', yLimit);
-                if (edgePointY >= yAxisMin && edgePointY <= yAxisMax) {
-                    edgePoint.x = xLimit;
-                    edgePoint.y = edgePointY;
-                }
-                else {
-                    edgePoint.x = edgePointX;
-                    edgePoint.y = yLimit;
-                }
-            }
-            edgePoint.x -= xAxisMin;
-            edgePoint.y -= yAxisMin;
-            if (firstPoint.series.chart.inverted) {
-                swap = edgePoint.x;
-                edgePoint.x = edgePoint.y;
-                edgePoint.y = swap;
+        var InfinityLine = /** @class */ (function (_super) {
+                __extends(InfinityLine, _super);
+            /* *
+             *
+             *  Constructors
+             *
+             * */
+            function InfinityLine(chart, options) {
+                return _super.call(this, chart, options) || this;
             }
-            return edgePoint;
-        };
-        var edgePoint = function (startIndex,
-            endIndex) {
+            /* *
+             *
+             * Static Functions
+             *
+             * */
+            InfinityLine.edgePoint = function (startIndex, endIndex) {
                 return function (target) {
                     var annotation = target.annotation,
-            points = annotation.points,
-            type = annotation.options.typeOptions.type;
-                if (type === 'horizontalLine') {
-                    // Horizontal line has only one point,
-                    // make a copy of it:
-                    points = [
-                        points[0],
-                        new MockPoint(annotation.chart, points[0].target, {
-                            x: points[0].x + 1,
-                            y: points[0].y,
-                            xAxis: points[0].options.xAxis,
-                            yAxis: points[0].options.yAxis
-                        })
-                    ];
+                        points = annotation.points,
+                        type = annotation.options.typeOptions.type;
+                    if (type === 'horizontalLine') {
+                        // Horizontal line has only one point,
+                        // make a copy of it:
+                        points = [
+                            points[0],
+                            new MockPoint(annotation.chart, points[0].target, {
+                                x: points[0].x + 1,
+                                y: points[0].y,
+                                xAxis: points[0].options.xAxis,
+                                yAxis: points[0].options.yAxis
+                            })
+                        ];
+                    }
+                    else if (type === 'verticalLine') {
+                        // The same for verticalLine type:
+                        points = [
+                            points[0],
+                            new MockPoint(annotation.chart, points[0].target, {
+                                x: points[0].x,
+                                y: points[0].y + 1,
+                                xAxis: points[0].options.xAxis,
+                                yAxis: points[0].options.yAxis
+                            })
+                        ];
+                    }
+                    return InfinityLine.findEdgePoint(points[startIndex], points[endIndex]);
+                };
+            };
+            InfinityLine.findEdgeCoordinate = function (firstPoint, secondPoint, xOrY, edgePointFirstCoordinate) {
+                var xOrYOpposite = xOrY === 'x' ? 'y' : 'x';
+                // solves equation for x or y
+                // y - y1 = (y2 - y1) / (x2 - x1) * (x - x1)
+                return ((secondPoint[xOrY] - firstPoint[xOrY]) *
+                    (edgePointFirstCoordinate - firstPoint[xOrYOpposite]) /
+                    (secondPoint[xOrYOpposite] - firstPoint[xOrYOpposite]) +
+                    firstPoint[xOrY]);
+            };
+            InfinityLine.findEdgePoint = function (firstPoint, secondPoint) {
+                var xAxis = firstPoint.series.xAxis,
+                    yAxis = secondPoint.series.yAxis,
+                    firstPointPixels = MockPoint.pointToPixels(firstPoint),
+                    secondPointPixels = MockPoint.pointToPixels(secondPoint),
+                    deltaX = secondPointPixels.x - firstPointPixels.x,
+                    deltaY = secondPointPixels.y - firstPointPixels.y,
+                    xAxisMin = xAxis.left,
+                    xAxisMax = xAxisMin + xAxis.width,
+                    yAxisMin = yAxis.top,
+                    yAxisMax = yAxisMin + yAxis.height,
+                    xLimit = deltaX < 0 ? xAxisMin : xAxisMax,
+                    yLimit = deltaY < 0 ? yAxisMin : yAxisMax,
+                    edgePoint = {
+                        x: deltaX === 0 ? firstPointPixels.x : xLimit,
+                        y: deltaY === 0 ? firstPointPixels.y : yLimit
+                    },
+                    edgePointX,
+                    edgePointY,
+                    swap;
+                if (deltaX !== 0 && deltaY !== 0) {
+                    edgePointY = InfinityLine.findEdgeCoordinate(firstPointPixels, secondPointPixels, 'y', xLimit);
+                    edgePointX = InfinityLine.findEdgeCoordinate(firstPointPixels, secondPointPixels, 'x', yLimit);
+                    if (edgePointY >= yAxisMin && edgePointY <= yAxisMax) {
+                        edgePoint.x = xLimit;
+                        edgePoint.y = edgePointY;
+                    }
+                    else {
+                        edgePoint.x = edgePointX;
+                        edgePoint.y = yLimit;
+                    }
                 }
-                else if (type === 'verticalLine') {
-                    // The same for verticalLine type:
-                    points = [
-                        points[0],
-                        new MockPoint(annotation.chart, points[0].target, {
-                            x: points[0].x,
-                            y: points[0].y + 1,
-                            xAxis: points[0].options.xAxis,
-                            yAxis: points[0].options.yAxis
-                        })
-                    ];
+                edgePoint.x -= xAxisMin;
+                edgePoint.y -= yAxisMin;
+                if (firstPoint.series.chart.inverted) {
+                    swap = edgePoint.x;
+                    edgePoint.x = edgePoint.y;
+                    edgePoint.y = swap;
                 }
-                return InfinityLine.findEdgePoint(points[startIndex], points[endIndex]);
+                return edgePoint;
             };
-        };
-        InfinityLine.endEdgePoint = edgePoint(0, 1);
-        InfinityLine.startEdgePoint = edgePoint(1, 0);
-        H.extendAnnotation(InfinityLine, CrookedLine, {
-            addShapes: function () {
+            /* *
+             *
+             *  Functions
+             *
+             * */
+            InfinityLine.prototype.addShapes = function () {
                 var typeOptions = this.options.typeOptions,
                     points = [
                         this.points[0],
@@ -4028,8 +4547,17 @@
                     }),
                     false);
                 typeOptions.line = line.options;
-            }
-        });
+            };
+            /**
+             *
+             * Static Properties
+             *
+             */
+            InfinityLine.endEdgePoint = InfinityLine.edgePoint(0, 1);
+            InfinityLine.startEdgePoint = InfinityLine.edgePoint(1, 0);
+            return InfinityLine;
+        }(CrookedLine));
+        InfinityLine.prototype.defaultOptions = merge(CrookedLine.prototype.defaultOptions, {});
         /**
          * An infinity line annotation.
          *
@@ -4044,16 +4572,29 @@
 
         return InfinityLine;
     });
-    _registerModule(_modules, 'annotations/types/Fibonacci.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js']], function (H, U) {
+    _registerModule(_modules, 'Extensions/Annotations/Types/Fibonacci.js', [_modules['Extensions/Annotations/Annotations.js'], _modules['Extensions/Annotations/MockPoint.js'], _modules['Extensions/Annotations/Types/Tunnel.js'], _modules['Core/Utilities.js']], function (Annotation, MockPoint, Tunnel, U) {
         /* *
          *
          *  !!!!!!! 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 __());
+            };
+        })();
         var merge = U.merge;
-        var Annotation = H.Annotation,
-            MockPoint = Annotation.MockPoint,
-            Tunnel = Annotation.types.tunnel;
         /* eslint-disable no-invalid-this, valid-jsdoc */
         var createPathDGenerator = function (retracementIndex,
             isBackground) {
@@ -4079,19 +4620,27 @@
                 return d;
             };
         };
-        var Fibonacci = function () {
-                this.startRetracements = [];
-            this.endRetracements = [];
-            Tunnel.apply(this, arguments);
-        };
-        Fibonacci.levels = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1];
-        H.extendAnnotation(Fibonacci, Tunnel, {
-            linkPoints: function () {
-                Tunnel.prototype.linkPoints.call(this);
+        var Fibonacci = /** @class */ (function (_super) {
+                __extends(Fibonacci, _super);
+            /* *
+             *
+             * Constructors
+             *
+             * */
+            function Fibonacci(chart, options) {
+                return _super.call(this, chart, options) || this;
+            }
+            /* *
+             *
+             * Functions
+             *
+             * */
+            Fibonacci.prototype.linkPoints = function () {
+                _super.prototype.linkPoints.call(this);
                 this.linkRetracementsPoints();
                 return;
-            },
-            linkRetracementsPoints: function () {
+            };
+            Fibonacci.prototype.linkRetracementsPoints = function () {
                 var points = this.points,
                     startDiff = points[0].y - points[3].y,
                     endDiff = points[1].y - points[2].y,
@@ -4100,11 +4649,13 @@
                 Fibonacci.levels.forEach(function (level, i) {
                     var startRetracement = points[0].y - startDiff * level,
                         endRetracement = points[1].y - endDiff * level;
+                    this.startRetracements = this.startRetracements || [];
+                    this.endRetracements = this.endRetracements || [];
                     this.linkRetracementPoint(i, startX, startRetracement, this.startRetracements);
                     this.linkRetracementPoint(i, endX, endRetracement, this.endRetracements);
                 }, this);
-            },
-            linkRetracementPoint: function (pointIndex, x, y, retracements) {
+            };
+            Fibonacci.prototype.linkRetracementPoint = function (pointIndex, x, y, retracements) {
                 var point = retracements[pointIndex],
                     typeOptions = this.options.typeOptions;
                 if (!point) {
@@ -4120,8 +4671,8 @@
                     point.options.y = y;
                     point.refresh();
                 }
-            },
-            addShapes: function () {
+            };
+            Fibonacci.prototype.addShapes = function () {
                 Fibonacci.levels.forEach(function (_level, i) {
                     this.initShape({
                         type: 'path',
@@ -4136,8 +4687,8 @@
                         });
                     }
                 }, this);
-            },
-            addLabels: function () {
+            };
+            Fibonacci.prototype.addLabels = function () {
                 Fibonacci.levels.forEach(function (level, i) {
                     var options = this.options.typeOptions,
                         label = this.initLabel(merge(options.labels[i], {
@@ -4149,8 +4700,16 @@
                     }));
                     options.labels[i] = label.options;
                 }, this);
-            }
-        }, 
+            };
+            /* *
+             *
+             * Static properties
+             *
+             * */
+            Fibonacci.levels = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1];
+            return Fibonacci;
+        }(Tunnel));
+        Fibonacci.prototype.defaultOptions = merge(Tunnel.prototype.defaultOptions, 
         /**
          * A fibonacci annotation.
          *
@@ -4225,46 +4784,72 @@
 
         return Fibonacci;
     });
-    _registerModule(_modules, 'annotations/types/Pitchfork.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js']], function (H, U) {
+    _registerModule(_modules, 'Extensions/Annotations/Types/Pitchfork.js', [_modules['Extensions/Annotations/Annotations.js'], _modules['Extensions/Annotations/Types/InfinityLine.js'], _modules['Extensions/Annotations/MockPoint.js'], _modules['Core/Utilities.js']], function (Annotation, InfinityLine, MockPoint, U) {
         /* *
          *
          *  !!!!!!! 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 __());
+            };
+        })();
         var merge = U.merge;
-        var Annotation = H.Annotation,
-            MockPoint = Annotation.MockPoint,
-            InfinityLine = Annotation.types.infinityLine;
         /* eslint-disable no-invalid-this, valid-jsdoc */
-        var Pitchfork = function () {
-                InfinityLine.apply(this,
-            arguments);
-        };
-        Pitchfork.findEdgePoint = function (point, firstAnglePoint, secondAnglePoint) {
-            var angle = Math.atan2(secondAnglePoint.plotY - firstAnglePoint.plotY,
-                secondAnglePoint.plotX - firstAnglePoint.plotX),
-                distance = 1e7;
-            return {
-                x: point.plotX + distance * Math.cos(angle),
-                y: point.plotY + distance * Math.sin(angle)
-            };
-        };
-        Pitchfork.middleLineEdgePoint = function (target) {
-            var annotation = target.annotation,
-                points = annotation.points;
-            return InfinityLine.findEdgePoint(points[0], new MockPoint(annotation.chart, target, annotation.midPointOptions()));
-        };
-        var outerLineEdgePoint = function (firstPointIndex) {
+        var Pitchfork = /** @class */ (function (_super) {
+                __extends(Pitchfork, _super);
+            /* *
+             *
+             * Constructors
+             *
+             * */
+            function Pitchfork(chart, options) {
+                return _super.call(this, chart, options) || this;
+            }
+            /* *
+             *
+             * Static Functions
+             *
+             * */
+            Pitchfork.outerLineEdgePoint = function (firstPointIndex) {
                 return function (target) {
                     var annotation = target.annotation,
-            points = annotation.points;
-                return Pitchfork.findEdgePoint(points[firstPointIndex], points[0], new MockPoint(annotation.chart, target, annotation.midPointOptions()));
+                        points = annotation.points;
+                    return Pitchfork.findEdgePoint(points[firstPointIndex], points[0], new MockPoint(annotation.chart, target, annotation.midPointOptions()));
+                };
             };
-        };
-        Pitchfork.topLineEdgePoint = outerLineEdgePoint(1);
-        Pitchfork.bottomLineEdgePoint = outerLineEdgePoint(0);
-        H.extendAnnotation(Pitchfork, InfinityLine, {
-            midPointOptions: function () {
+            Pitchfork.findEdgePoint = function (point, firstAnglePoint, secondAnglePoint) {
+                var angle = Math.atan2(secondAnglePoint.plotY - firstAnglePoint.plotY,
+                    secondAnglePoint.plotX - firstAnglePoint.plotX),
+                    distance = 1e7;
+                return {
+                    x: point.plotX + distance * Math.cos(angle),
+                    y: point.plotY + distance * Math.sin(angle)
+                };
+            };
+            Pitchfork.middleLineEdgePoint = function (target) {
+                var annotation = target.annotation,
+                    points = annotation.points;
+                return InfinityLine.findEdgePoint(points[0], new MockPoint(annotation.chart, target, annotation.midPointOptions()));
+            };
+            /* *
+             *
+             *  Functions
+             *
+             * */
+            Pitchfork.prototype.midPointOptions = function () {
                 var points = this.points;
                 return {
                     x: (points[1].x + points[2].x) / 2,
@@ -4272,12 +4857,12 @@
                     xAxis: points[0].series.xAxis,
                     yAxis: points[0].series.yAxis
                 };
-            },
-            addShapes: function () {
+            };
+            Pitchfork.prototype.addShapes = function () {
                 this.addLines();
                 this.addBackgrounds();
-            },
-            addLines: function () {
+            };
+            Pitchfork.prototype.addLines = function () {
                 this.initShape({
                     type: 'path',
                     points: [
@@ -4299,8 +4884,8 @@
                         Pitchfork.bottomLineEdgePoint
                     ]
                 }, false);
-            },
-            addBackgrounds: function () {
+            };
+            Pitchfork.prototype.addBackgrounds = function () {
                 var shapes = this.shapes,
                     typeOptions = this.options.typeOptions;
                 var innerBackground = this.initShape(merge(typeOptions.innerBackground, {
@@ -4343,8 +4928,17 @@
                     }));
                 typeOptions.innerBackground = innerBackground.options;
                 typeOptions.outerBackground = outerBackground.options;
-            }
-        }, 
+            };
+            /**
+             *
+             * Static Properties
+             *
+             */
+            Pitchfork.topLineEdgePoint = Pitchfork.outerLineEdgePoint(1);
+            Pitchfork.bottomLineEdgePoint = Pitchfork.outerLineEdgePoint(0);
+            return Pitchfork;
+        }(InfinityLine));
+        Pitchfork.prototype.defaultOptions = merge(InfinityLine.prototype.defaultOptions, 
         /**
          * A pitchfork annotation.
          *
@@ -4383,58 +4977,87 @@
 
         return Pitchfork;
     });
-    _registerModule(_modules, 'annotations/types/VerticalLine.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js']], function (H, U) {
+    _registerModule(_modules, 'Extensions/Annotations/Types/VerticalLine.js', [_modules['Extensions/Annotations/Annotations.js'], _modules['Extensions/Annotations/MockPoint.js'], _modules['Core/Utilities.js']], function (Annotation, MockPoint, U) {
         /* *
          *
          *  !!!!!!! 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 __());
+            };
+        })();
         var merge = U.merge;
-        var Annotation = H.Annotation,
-            MockPoint = Annotation.MockPoint;
         /* eslint-disable no-invalid-this, valid-jsdoc */
-        var VerticalLine = function () {
-                H.Annotation.apply(this,
-            arguments);
-        };
-        VerticalLine.connectorFirstPoint = function (target) {
-            var annotation = target.annotation,
-                point = annotation.points[0],
-                xy = MockPoint.pointToPixels(point,
-                true),
-                y = xy.y,
-                offset = annotation.options.typeOptions.label.offset;
-            if (annotation.chart.inverted) {
-                y = xy.x;
+        var VerticalLine = /** @class */ (function (_super) {
+                __extends(VerticalLine, _super);
+            /* *
+             *
+             *  Constructors
+             *
+             * */
+            function VerticalLine(chart, userOptions) {
+                return _super.call(this, chart, userOptions) || this;
             }
-            return {
-                x: point.x,
-                xAxis: point.series.xAxis,
-                y: y + offset
+            /* *
+             *
+             *  Static Functions
+             *
+             * */
+            VerticalLine.connectorFirstPoint = function (target) {
+                var annotation = target.annotation,
+                    point = annotation.points[0],
+                    xy = MockPoint.pointToPixels(point,
+                    true),
+                    y = xy.y,
+                    offset = annotation.options.typeOptions.label.offset;
+                if (annotation.chart.inverted) {
+                    y = xy.x;
+                }
+                return {
+                    x: point.x,
+                    xAxis: point.series.xAxis,
+                    y: y + offset
+                };
             };
-        };
-        VerticalLine.connectorSecondPoint = function (target) {
-            var annotation = target.annotation,
-                typeOptions = annotation.options.typeOptions,
-                point = annotation.points[0],
-                yOffset = typeOptions.yOffset,
-                xy = MockPoint.pointToPixels(point,
-                true),
-                y = xy[annotation.chart.inverted ? 'x' : 'y'];
-            if (typeOptions.label.offset < 0) {
-                yOffset *= -1;
-            }
-            return {
-                x: point.x,
-                xAxis: point.series.xAxis,
-                y: y + yOffset
+            VerticalLine.connectorSecondPoint = function (target) {
+                var annotation = target.annotation,
+                    typeOptions = annotation.options.typeOptions,
+                    point = annotation.points[0],
+                    yOffset = typeOptions.yOffset,
+                    xy = MockPoint.pointToPixels(point,
+                    true),
+                    y = xy[annotation.chart.inverted ? 'x' : 'y'];
+                if (typeOptions.label.offset < 0) {
+                    yOffset *= -1;
+                }
+                return {
+                    x: point.x,
+                    xAxis: point.series.xAxis,
+                    y: y + yOffset
+                };
             };
-        };
-        H.extendAnnotation(VerticalLine, null, {
-            getPointsOptions: function () {
+            /* *
+             *
+             *  Functions
+             *
+             * */
+            VerticalLine.prototype.getPointsOptions = function () {
                 return [this.options.typeOptions.point];
-            },
-            addShapes: function () {
+            };
+            VerticalLine.prototype.addShapes = function () {
                 var typeOptions = this.options.typeOptions,
                     connector = this.initShape(merge(typeOptions.connector, {
                         type: 'path',
@@ -4445,8 +5068,8 @@
                     }),
                     false);
                 typeOptions.connector = connector.options;
-            },
-            addLabels: function () {
+            };
+            VerticalLine.prototype.addLabels = function () {
                 var typeOptions = this.options.typeOptions, labelOptions = typeOptions.label, x = 0, y = labelOptions.offset, verticalAlign = labelOptions.offset < 0 ? 'bottom' : 'top', align = 'center';
                 if (this.chart.inverted) {
                     x = labelOptions.offset;
@@ -4461,8 +5084,10 @@
                         y: y
                     }));
                 typeOptions.label = label.options;
-            }
-        }, 
+            };
+            return VerticalLine;
+        }(Annotation));
+        VerticalLine.prototype.defaultOptions = merge(Annotation.prototype.defaultOptions, 
         /**
          * A vertical line annotation.
          *
@@ -4514,60 +5139,83 @@
 
         return VerticalLine;
     });
-    _registerModule(_modules, 'annotations/types/Measure.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js']], function (H, U) {
+    _registerModule(_modules, 'Extensions/Annotations/Types/Measure.js', [_modules['Extensions/Annotations/Annotations.js'], _modules['Extensions/Annotations/ControlPoint.js'], _modules['Core/Utilities.js']], function (Annotation, ControlPoint, U) {
         /* *
          *
          *  !!!!!!! 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 __());
+            };
+        })();
         var extend = U.extend,
             isNumber = U.isNumber,
             merge = U.merge;
-        var Annotation = H.Annotation,
-            ControlPoint = Annotation.ControlPoint;
         /* eslint-disable no-invalid-this, valid-jsdoc */
-        var Measure = function () {
-                Annotation.apply(this,
-            arguments);
-        };
-        Annotation.types.measure = Measure;
-        H.extendAnnotation(Measure, null, {
+        var Measure = /** @class */ (function (_super) {
+                __extends(Measure, _super);
+            /* *
+             *
+             *  Constructors
+             *
+             * */
+            function Measure(chart, userOptions) {
+                return _super.call(this, chart, userOptions) || this;
+            }
+            /* *
+             *
+             *  Functions
+             *
+             * */
             /**
              * Init annotation object.
              * @private
              */
-            init: function () {
-                Annotation.prototype.init.apply(this, arguments);
+            Measure.prototype.init = function (annotationOrChart, userOptions, index) {
+                Annotation.prototype.init.call(this, annotationOrChart, userOptions, index);
                 this.offsetX = 0;
                 this.offsetY = 0;
                 this.resizeX = 0;
                 this.resizeY = 0;
-                this.calculations.init.call(this);
+                Measure.calculations.init.call(this);
                 this.addValues();
                 this.addShapes();
-            },
+            };
             /**
              * Overrides default setter to get axes from typeOptions.
              * @private
              */
-            setClipAxes: function () {
+            Measure.prototype.setClipAxes = function () {
                 this.clipXAxis = this.chart.xAxis[this.options.typeOptions.xAxis];
                 this.clipYAxis = this.chart.yAxis[this.options.typeOptions.yAxis];
-            },
+            };
             /**
              * Get measure points configuration objects.
              * @private
              * @return {Array<Highcharts.AnnotationMockPointOptionsObject>}
              */
-            pointsOptions: function () {
+            Measure.prototype.pointsOptions = function () {
                 return this.options.points;
-            },
+            };
             /**
              * Get points configuration objects for shapes.
              * @private
              * @return {Array<Highcharts.AnnotationMockPointOptionsObject>}
              */
-            shapePointsOptions: function () {
+            Measure.prototype.shapePointsOptions = function () {
                 var options = this.options.typeOptions,
                     xAxis = options.xAxis,
                     yAxis = options.yAxis;
@@ -4597,8 +5245,8 @@
                         yAxis: yAxis
                     }
                 ];
-            },
-            addControlPoints: function () {
+            };
+            Measure.prototype.addControlPoints = function () {
                 var selectType = this.options.typeOptions.selectType,
                     controlPoint;
                 controlPoint = new ControlPoint(this.chart, this, this.options.controlPointOptions, 0);
@@ -4608,24 +5256,24 @@
                     controlPoint = new ControlPoint(this.chart, this, this.options.controlPointOptions, 1);
                     this.controlPoints.push(controlPoint);
                 }
-            },
+            };
             /**
              * Add label with calculated values (min, max, average, bins).
              * @private
              * @param {boolean} [resize]
              * The flag for resize shape
              */
-            addValues: function (resize) {
+            Measure.prototype.addValues = function (resize) {
                 var typeOptions = this.options.typeOptions,
                     formatter = typeOptions.label.formatter;
                 // set xAxisMin, xAxisMax, yAxisMin, yAxisMax
-                this.calculations.recalculate.call(this, resize);
+                Measure.calculations.recalculate.call(this, resize);
                 if (!typeOptions.label.enabled) {
                     return;
                 }
                 if (this.labels.length > 0) {
                     this.labels[0].text = (formatter && formatter.call(this)) ||
-                        this.calculations.defaultFormatter.call(this);
+                        Measure.calculations.defaultFormatter.call(this);
                 }
                 else {
                     this.initLabel(extend({
@@ -4654,23 +5302,23 @@
                             };
                         },
                         text: (formatter && formatter.call(this)) ||
-                            this.calculations.defaultFormatter.call(this)
+                            Measure.calculations.defaultFormatter.call(this)
                     }, typeOptions.label));
                 }
-            },
+            };
             /**
              * Crosshair, background (rect).
              * @private
              */
-            addShapes: function () {
+            Measure.prototype.addShapes = function () {
                 this.addCrosshairs();
                 this.addBackground();
-            },
+            };
             /**
              * Add background shape.
              * @private
              */
-            addBackground: function () {
+            Measure.prototype.addBackground = function () {
                 var shapePoints = this.shapePointsOptions();
                 if (typeof shapePoints[0].x === 'undefined') {
                     return;
@@ -4679,12 +5327,12 @@
                     type: 'path',
                     points: this.shapePointsOptions()
                 }, this.options.typeOptions.background), false);
-            },
+            };
             /**
              * Add internal crosshair shapes (on top and bottom).
              * @private
              */
-            addCrosshairs: function () {
+            Measure.prototype.addCrosshairs = function () {
                 var chart = this.chart,
                     options = this.options.typeOptions,
                     point = this.options.typeOptions.point,
@@ -4752,15 +5400,15 @@
                         d: pathV
                     }, crosshairOptionsY), false);
                 }
-            },
-            onDrag: function (e) {
+            };
+            Measure.prototype.onDrag = function (e) {
                 var translation = this.mouseMoveToTranslation(e), selectType = this.options.typeOptions.selectType, x = selectType === 'y' ? 0 : translation.x, y = selectType === 'x' ? 0 : translation.y;
                 this.translate(x, y);
                 this.offsetX += x;
                 this.offsetY += y;
                 // animation, resize, setStartPoints
                 this.redraw(false, false, true);
-            },
+            };
             /**
              * Translate start or end ("left" or "right") side of the measure.
              * Update start points (startXMin, startXMax, startYMin, startYMax)
@@ -4770,7 +5418,7 @@
              * @param {number} cpIndex - index of control point
              * @param {Highcharts.AnnotationDraggableValue} selectType - x / y / xy
              */
-            resize: function (dx, dy, cpIndex, selectType) {
+            Measure.prototype.resize = function (dx, dy, cpIndex, selectType) {
                 // background shape
                 var bckShape = this.shapes[2];
                 if (selectType === 'x') {
@@ -4798,11 +5446,11 @@
                     bckShape.translatePoint(dx, dy, 2);
                     bckShape.translatePoint(0, dy, 3);
                 }
-                this.calculations.updateStartPoints
+                Measure.calculations.updateStartPoints
                     .call(this, false, true, cpIndex, dx, dy);
                 this.options.typeOptions.background.height = Math.abs(this.startYMax - this.startYMin);
                 this.options.typeOptions.background.width = Math.abs(this.startXMax - this.startXMin);
-            },
+            };
             /**
              * Redraw event which render elements and update start points if needed.
              * @private
@@ -4810,13 +5458,13 @@
              * @param {boolean} [resize] - flag if resized
              * @param {boolean} [setStartPoints] - update position of start points
              */
-            redraw: function (animation, resize, setStartPoints) {
+            Measure.prototype.redraw = function (animation, resize, setStartPoints) {
                 this.linkPoints();
                 if (!this.graphic) {
                     this.render();
                 }
                 if (setStartPoints) {
-                    this.calculations.updateStartPoints.call(this, true, false);
+                    Measure.calculations.updateStartPoints.call(this, true, false);
                 }
                 // #11174 - clipBox was not recalculate during resize / redraw
                 if (this.clipRect) {
@@ -4830,15 +5478,20 @@
                 this.controlPoints.forEach(function (controlPoint) {
                     controlPoint.redraw();
                 });
-            },
-            translate: function (dx, dy) {
+            };
+            Measure.prototype.translate = function (dx, dy) {
                 this.shapes.forEach(function (item) {
                     item.translate(dx, dy);
                 });
                 this.options.typeOptions.point.x = this.startXMin;
                 this.options.typeOptions.point.y = this.startYMin;
-            },
-            calculations: {
+            };
+            /* *
+             *
+             *  Static Functions
+             *
+             * */
+            Measure.calculations = {
                 /**
                  * Set starting points
                  * @private
@@ -4846,7 +5499,7 @@
                 init: function () {
                     var options = this.options.typeOptions,
                         chart = this.chart,
-                        getPointPos = this.calculations.getPointPos,
+                        getPointPos = Measure.calculations.getPointPos,
                         inverted = chart.inverted,
                         xAxis = chart.xAxis[options.xAxis],
                         yAxis = chart.yAxis[options.yAxis],
@@ -4854,9 +5507,9 @@
                         width = inverted ? bck.height : bck.width,
                         height = inverted ? bck.width : bck.height,
                         selectType = options.selectType,
-                        top = inverted ? chart.plotLeft : chart.plotTop,
-                        left = inverted ? chart.plotTop : chart.plotLeft;
-                    this.startXMin = options.point.x;
+                        top = inverted ? xAxis.left : yAxis.top, // #13664
+                        left = inverted ? yAxis.top : xAxis.left; // #13664
+                        this.startXMin = options.point.x;
                     this.startYMin = options.point.y;
                     if (isNumber(width)) {
                         this.startXMax = this.startXMin + width;
@@ -4888,11 +5541,11 @@
                  * Flag if shape is resized.
                  */
                 recalculate: function (resize) {
-                    var calc = this.calculations,
+                    var calc = Measure.calculations,
                         options = this.options.typeOptions,
                         xAxis = this.chart.xAxis[options.xAxis],
                         yAxis = this.chart.yAxis[options.yAxis],
-                        getPointPos = this.calculations.getPointPos,
+                        getPointPos = Measure.calculations.getPointPos,
                         offsetX = this.offsetX,
                         offsetY = this.offsetY;
                     this.xAxisMin = getPointPos(xAxis, this.startXMin, offsetX);
@@ -4937,7 +5590,7 @@
                         selectType = options.selectType,
                         xAxis = this.chart.xAxis[options.xAxis],
                         yAxis = this.chart.yAxis[options.yAxis],
-                        getPointPos = this.calculations.getPointPos,
+                        getPointPos = Measure.calculations.getPointPos,
                         startXMin = this.startXMin,
                         startXMax = this.startXMax,
                         startYMin = this.startYMin,
@@ -5005,7 +5658,7 @@
                 min: function () {
                     var min = Infinity,
                         series = this.chart.series,
-                        ext = this.calculations.getExtremes(this.xAxisMin,
+                        ext = Measure.calculations.getExtremes(this.xAxisMin,
                         this.xAxisMax,
                         this.yAxisMin,
                         this.yAxisMax),
@@ -5034,7 +5687,7 @@
                 max: function () {
                     var max = -Infinity,
                         series = this.chart.series,
-                        ext = this.calculations.getExtremes(this.xAxisMin,
+                        ext = Measure.calculations.getExtremes(this.xAxisMin,
                         this.xAxisMax,
                         this.yAxisMin,
                         this.yAxisMax),
@@ -5070,7 +5723,7 @@
                 bins: function () {
                     var bins = 0,
                         series = this.chart.series,
-                        ext = this.calculations.getExtremes(this.xAxisMin,
+                        ext = Measure.calculations.getExtremes(this.xAxisMin,
                         this.xAxisMax,
                         this.yAxisMin,
                         this.yAxisMax),
@@ -5095,8 +5748,10 @@
                     }
                     return bins;
                 }
-            }
-        }, 
+            };
+            return Measure;
+        }(Annotation));
+        Measure.prototype.defaultOptions = merge(Annotation.prototype.defaultOptions, 
         /**
          * A measure annotation.
          *
@@ -5291,7 +5946,7 @@
                         yAxis = chart.yAxis[typeOptions.yAxis],
                         targetX = target.xAxisMax,
                         targetY = target.yAxisMax,
-                        ext = target.calculations.getExtremes(target.xAxisMin,
+                        ext = Measure.calculations.getExtremes(target.xAxisMin,
                         target.xAxisMax,
                         target.yAxisMin,
                         target.yAxisMax),
@@ -5340,7 +5995,7 @@
 
         return Measure;
     });
-    _registerModule(_modules, 'mixins/navigation.js', [], function () {
+    _registerModule(_modules, 'Mixins/Navigation.js', [], function () {
         /**
          *
          *  (c) 2010-2018 Paweł Fus
@@ -5399,7 +6054,7 @@
 
         return chartNavigation;
     });
-    _registerModule(_modules, 'annotations/navigationBindings.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js'], _modules['mixins/navigation.js']], function (H, U, chartNavigationMixin) {
+    _registerModule(_modules, 'Extensions/Annotations/NavigationBindings.js', [_modules['Extensions/Annotations/Annotations.js'], _modules['Core/Chart/Chart.js'], _modules['Mixins/Navigation.js'], _modules['Core/Globals.js'], _modules['Core/Utilities.js']], function (Annotation, Chart, chartNavigationMixin, H, U) {
         /* *
          *
          *  (c) 2009-2017 Highsoft, Black Label
@@ -5409,6 +6064,19 @@
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
+        var addEvent = U.addEvent,
+            attr = U.attr,
+            extend = U.extend,
+            format = U.format,
+            fireEvent = U.fireEvent,
+            isArray = U.isArray,
+            isFunction = U.isFunction,
+            isNumber = U.isNumber,
+            isObject = U.isObject,
+            merge = U.merge,
+            objectEach = U.objectEach,
+            pick = U.pick,
+            setOptions = U.setOptions;
         /**
          * A config object for navigation bindings in annotations.
          *
@@ -5435,18 +6103,6 @@
         * @name Highcharts.NavigationBindingsOptionsObject#steps
         * @type {Array<Function>|undefined}
         */
-        var addEvent = U.addEvent,
-            attr = U.attr,
-            extend = U.extend,
-            format = U.format,
-            fireEvent = U.fireEvent,
-            isArray = U.isArray,
-            isFunction = U.isFunction,
-            isNumber = U.isNumber,
-            isObject = U.isObject,
-            merge = U.merge,
-            objectEach = U.objectEach,
-            pick = U.pick;
         var doc = H.doc,
             win = H.win,
             PREFIX = 'highcharts-';
@@ -5604,7 +6260,7 @@
                         navigation.bindingsChartClick(this, e);
                     }
                 }));
-                navigation.eventsToUnbind.push(addEvent(chart.container, 'mousemove', function (e) {
+                navigation.eventsToUnbind.push(addEvent(chart.container, H.isTouchDevice ? 'touchmove' : 'mousemove', function (e) {
                     navigation.bindingsContainerMouseMove(this, e);
                 }));
             };
@@ -5864,6 +6520,7 @@
                 function traverse(option, key, parentEditables, parent) {
                     var nextParent;
                     if (parentEditables &&
+                        option &&
                         nonEditables.indexOf(key) === -1 &&
                         ((parentEditables.indexOf &&
                             parentEditables.indexOf(key)) >= 0 ||
@@ -6064,7 +6721,7 @@
                 rect: ['shapes'],
                 // Crooked lines, elliots, arrows etc:
                 crookedLine: [],
-                basicAnnotation: []
+                basicAnnotation: ['shapes', 'labelOptions']
             };
             // Define non editable fields per annotation, for example Rectangle inherits
             // options from Measure, but crosshairs are not available
@@ -6081,7 +6738,7 @@
          * @type {bindingsUtils}
          */
         NavigationBindings.prototype.utils = bindingsUtils;
-        H.Chart.prototype.initNavigationBindings = function () {
+        Chart.prototype.initNavigationBindings = function () {
             var chart = this,
                 options = chart.options;
             if (options && options.navigation && options.navigation.bindings) {
@@ -6090,10 +6747,10 @@
                 chart.navigationBindings.initUpdate();
             }
         };
-        addEvent(H.Chart, 'load', function () {
+        addEvent(Chart, 'load', function () {
             this.initNavigationBindings();
         });
-        addEvent(H.Chart, 'destroy', function () {
+        addEvent(Chart, 'destroy', function () {
             if (this.navigationBindings) {
                 this.navigationBindings.destroy();
             }
@@ -6101,7 +6758,7 @@
         addEvent(NavigationBindings, 'deselectButton', function () {
             this.selectedButtonElement = null;
         });
-        addEvent(H.Annotation, 'remove', function () {
+        addEvent(Annotation, 'remove', function () {
             if (this.chart.navigationBindings) {
                 this.chart.navigationBindings.deselectAnnotation();
             }
@@ -6121,7 +6778,7 @@
                     navigation = annotation.chart.navigationBindings,
                     prevAnnotation = navigation.activeAnnotation;
                 if (originalClick) {
-                    originalClick.click.call(annotation, event);
+                    originalClick.call(annotation, event);
                 }
                 if (prevAnnotation !== annotation) {
                     // Select current:
@@ -6170,15 +6827,17 @@
         }
         if (H.Annotation) {
             // Basic shapes:
-            selectableAnnotation(H.Annotation);
+            selectableAnnotation(Annotation);
             // Advanced annotations:
-            objectEach(H.Annotation.types, function (annotationType) {
+            objectEach(Annotation.types, function (annotationType) {
                 selectableAnnotation(annotationType);
             });
         }
-        H.setOptions({
+        setOptions({
             /**
              * @optionparent lang
+             *
+             * @private
              */
             lang: {
                 /**
@@ -6228,6 +6887,8 @@
             /**
              * @optionparent navigation
              * @product      highcharts highstock
+             *
+             * @private
              */
             navigation: {
                 /**
@@ -6426,7 +7087,7 @@
                  * from a different server.
                  *
                  * @type      {string}
-                 * @default   https://code.highcharts.com/8.1.0/gfx/stock-icons/
+                 * @default   https://code.highcharts.com/8.2.2/gfx/stock-icons/
                  * @since     7.1.3
                  * @apioption navigation.iconsURL
                  */
@@ -6484,13 +7145,17 @@
                  *            measure, pitchfork, tunnel, verticalLine, basicAnnotation
                  * @apioption navigation.annotationsOptions
                  */
-                annotationsOptions: {}
+                annotationsOptions: {
+                    animation: {
+                        defer: 0
+                    }
+                }
             }
         });
 
         return NavigationBindings;
     });
-    _registerModule(_modules, 'annotations/popup.js', [_modules['parts/Globals.js'], _modules['annotations/navigationBindings.js'], _modules['parts/Utilities.js']], function (H, NavigationBindings, U) {
+    _registerModule(_modules, 'Extensions/Annotations/Popup.js', [_modules['Core/Globals.js'], _modules['Extensions/Annotations/NavigationBindings.js'], _modules['Core/Pointer.js'], _modules['Core/Utilities.js']], function (H, NavigationBindings, Pointer, U) {
         /* *
          *
          *  Popup generator for Stock tools
@@ -6505,6 +7170,7 @@
         var addEvent = U.addEvent,
             createElement = U.createElement,
             defined = U.defined,
+            getOptions = U.getOptions,
             isArray = U.isArray,
             isObject = U.isObject,
             isString = U.isString,
@@ -6515,7 +7181,7 @@
         /* eslint-disable no-invalid-this, valid-jsdoc */
         // onContainerMouseDown blocks internal popup events, due to e.preventDefault.
         // Related issue #4606
-        wrap(H.Pointer.prototype, 'onContainerMouseDown', function (proceed, e) {
+        wrap(Pointer.prototype, 'onContainerMouseDown', function (proceed, e) {
             var popupClass = e.target && e.target.className;
             // elements is not in popup
             if (!(isString(popupClass) &&
@@ -6751,7 +7417,7 @@
              * @return {Highcharts.Dictionary<string>} - elements translations.
              */
             getLangpack: function () {
-                return H.getOptions().lang.navigation.popup;
+                return getOptions().lang.navigation.popup;
             },
             annotations: {
                 /**
@@ -7135,7 +7801,7 @@
                 getAmount: function () {
                     var series = this.series,
                         counter = 0;
-                    objectEach(series, function (serie) {
+                    series.forEach(function (serie) {
                         var seriesOptions = serie.options;
                         if (serie.params ||
                             seriesOptions && seriesOptions.params) {
@@ -7264,7 +7930,7 @@
                 this.popup = new H.Popup(this.chart.container, (this.chart.options.navigation.iconsURL ||
                     (this.chart.options.stockTools &&
                         this.chart.options.stockTools.gui.iconsURL) ||
-                    'https://code.highcharts.com/8.1.0/gfx/stock-icons/'));
+                    'https://code.highcharts.com/8.2.2/gfx/stock-icons/'));
             }
             this.popup.showForm(config.formType, this.chart, config.options, config.onSubmit);
         });