highcharts 9.2.0 → 9.3.1

package/es-modules/Extensions/Annotations/Controllables/ControllableEllipse.js

@@ -0,0 +1,199 @@
+/* *
+ *
+ * Author: Pawel Lysy
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+'use strict';
+import ControllableMixin from '../Mixins/ControllableMixin.js';
+import ControllablePath from './ControllablePath.js';
+import U from '../../../Core/Utilities.js';
+var merge = U.merge, defined = U.defined;
+/**
+ * A controllable ellipse class.
+ *
+ * @requires modules/annotations
+ *
+ * @private
+ * @class
+ * @name Highcharts.AnnotationControllableEllipse
+ *
+ * @param {Highcharts.Annotation} annotation an annotation instance
+ * @param {Highcharts.AnnotationsShapeOptions} options a shape's options
+ * @param {number} index of the Ellipse
+ */
+var ControllableEllipse = /** @class */ (function () {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    function ControllableEllipse(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.linkPoints = ControllableMixin.linkPoints;
+        this.point = ControllableMixin.point;
+        this.scale = ControllableMixin.scale;
+        this.setControlPointsVisibility = ControllableMixin.setControlPointsVisibility;
+        this.shouldBeDrawn = ControllableMixin.shouldBeDrawn;
+        this.transform = ControllableMixin.transform;
+        this.translatePoint = ControllableMixin.translatePoint;
+        this.transformPoint = ControllableMixin.transformPoint;
+        /**
+         * @type 'ellipse'
+         */
+        this.type = 'ellipse';
+        this.init(annotation, options, index);
+        this.collection = 'shapes';
+    }
+    /* *
+     *
+     *  Functions
+     *
+     * */
+    ControllableEllipse.prototype.init = function (annotation, options, index) {
+        if (defined(options.yAxis)) {
+            options.points.forEach(function (point) {
+                point.yAxis = options.yAxis;
+            });
+        }
+        if (defined(options.xAxis)) {
+            options.points.forEach(function (point) {
+                point.xAxis = options.xAxis;
+            });
+        }
+        ControllableMixin.init.call(this, annotation, options, index);
+    };
+    /**
+     *
+     * Render the element
+     * @param parent parent SVG element.
+     */
+    ControllableEllipse.prototype.render = function (parent) {
+        this.graphic = this.annotation.chart.renderer.createElement('ellipse')
+            .attr(this.attrsFromOptions(this.options))
+            .add(parent);
+        ControllableMixin.render.call(this);
+    };
+    /**
+     * Translate the points.
+     * Mostly used to handle dragging of the ellipse.
+     */
+    ControllableEllipse.prototype.translate = function (dx, dy) {
+        ControllableMixin.translateShape.call(this, dx, dy, true);
+    };
+    /**
+     * Get the distance from the line to the point.
+     * @param point1 first point which is on the line
+     * @param point2 second point
+     * @param x0 point's x value from which you want to calculate the distance from
+     * @param y0 point's y value from which you want to calculate the distance from
+     */
+    ControllableEllipse.prototype.getDistanceFromLine = function (point1, point2, x0, y0) {
+        return Math.abs((point2.y - point1.y) * x0 - (point2.x - point1.x) * y0 +
+            point2.x * point1.y - point2.y * point1.x) / Math.sqrt((point2.y - point1.y) * (point2.y - point1.y) +
+            (point2.x - point1.x) * (point2.x - point1.x));
+    };
+    /**
+     * The fuction calculates the svg attributes of the ellipse, and returns all
+     * parameters neccessary to draw the ellipse.
+     * @param position absolute position of the first point in points array
+     * @param position2 absolute position of the second point in points array
+     */
+    ControllableEllipse.prototype.getAttrs = function (position, position2) {
+        var x1 = position.x, y1 = position.y, x2 = position2.x, y2 = position2.y, cx = (x1 + x2) / 2, cy = (y1 + y2) / 2, rx = Math.sqrt((x1 - x2) * (x1 - x2) / 4 + (y1 - y2) * (y1 - y2) / 4), tan = (y2 - y1) / (x2 - x1);
+        var angle = Math.atan(tan) * 180 / Math.PI;
+        if (cx < x1) {
+            angle += 180;
+        }
+        var ry = this.getRY();
+        return { cx: cx, cy: cy, rx: rx, ry: ry, angle: angle };
+    };
+    /**
+     * Get the value of minor radius of the ellipse.
+     */
+    ControllableEllipse.prototype.getRY = function () {
+        var yAxis = this.getYAxis();
+        return defined(yAxis) ?
+            Math.abs(yAxis.toPixels(this.options.ry) - yAxis.toPixels(0)) :
+            this.options.ry;
+    };
+    /**
+     * get the yAxis object to which the ellipse is pinned.
+     */
+    ControllableEllipse.prototype.getYAxis = function () {
+        var yAxisIndex = this.options.yAxis;
+        return this.chart.yAxis[yAxisIndex];
+    };
+    /**
+     * Get the absolute coordinates of the MockPoint
+     * @param point MockPoint that is added through options
+     */
+    ControllableEllipse.prototype.getAbsolutePosition = function (point) {
+        return this.anchor(point).absolutePosition;
+    };
+    /**
+     *
+     * Redraw the element
+     * @param animation display an annimation
+     */
+    ControllableEllipse.prototype.redraw = function (animation) {
+        var position = this.getAbsolutePosition(this.points[0]), position2 = this.getAbsolutePosition(this.points[1]), attrs = this.getAttrs(position, position2);
+        if (position) {
+            this.graphic[animation ? 'animate' : 'attr']({
+                cx: attrs.cx,
+                cy: attrs.cy,
+                rx: attrs.rx,
+                ry: attrs.ry,
+                rotation: attrs.angle,
+                rotationOriginX: attrs.cx,
+                rotationOriginY: attrs.cy
+            });
+        }
+        else {
+            this.graphic.attr({
+                x: 0,
+                y: -9e9
+            });
+        }
+        this.graphic.placed = Boolean(position);
+        ControllableMixin.redraw.call(this, animation);
+    };
+    /**
+     * Set the radius Y.
+     *
+     * @param {number} ry a radius in y direction to be set
+     */
+    ControllableEllipse.prototype.setYRadius = function (ry) {
+        this.options.ry = ry;
+        this.annotation.userOptions.shapes[0].ry = ry;
+        this.annotation.options.shapes[0].ry = ry;
+    };
+    /* *
+     *
+     *  Static Properties
+     *
+     * */
+    /**
+     * A map object which allows to map options attributes to element
+     * attributes.
+     *
+     * @name Highcharts.AnnotationControllableEllipse.attrsMap
+     * @type {Highcharts.Dictionary<string>}
+     */
+    ControllableEllipse.attrsMap = merge(ControllablePath.attrsMap, {
+        ry: 'ry'
+    });
+    return ControllableEllipse;
+}());
+export default ControllableEllipse;

package/es-modules/Extensions/Annotations/Mixins/ControllableMixin.js

@@ -287,14 +287,20 @@ var controllableMixin = {
      *
      * @param {number} dx translation for x coordinate
      * @param {number} dy translation for y coordinate
+     * @param {boolean|undefined} translateSecondPoint If the shape has two
+     * points attached to it, this option allows you to translate also
+     * the second point
      */
-    translateShape: function (dx, dy) {
+    translateShape: function (dx, dy, translateSecondPoint) {
         var chart = this.annotation.chart, 
         // Annotation.options
         shapeOptions = this.annotation.userOptions, 
         // Chart.options.annotations
         annotationIndex = chart.annotations.indexOf(this.annotation), chartOptions = chart.options.annotations[annotationIndex];
         this.translatePoint(dx, dy, 0);
+        if (translateSecondPoint) {
+            this.translatePoint(dx, dy, 1);
+        }
         // Options stored in:
         // - chart (for exporting)
         // - current config (for redraws)

package/es-modules/Extensions/Annotations/NavigationBindings.js

@@ -10,7 +10,7 @@
 'use strict';
 import Annotation from './Annotations.js';
 import Chart from '../../Core/Chart/Chart.js';
-import chartNavigationMixin from '../../Mixins/Navigation.js';
+import ChartNavigationComposition from '../../Core/Chart/ChartNavigationComposition.js';
 import F from '../../Core/FormatUtilities.js';
 var format = F.format;
 import H from '../../Core/Globals.js';
@@ -133,7 +133,7 @@ var bindingsUtils = {
      */
     getAssignedAxis: function (coords) {
         return coords.filter(function (coord) {
-            var axisMin = coord.axis.min, axisMax = coord.axis.max, 
+            var extremes = coord.axis.getExtremes(), axisMin = extremes.min, axisMax = extremes.max, 
             // Correct axis edges when axis has series
             // with pointRange (like column)
             minPointOffset = pick(coord.axis.minPointOffset, 0);
@@ -230,9 +230,11 @@ var NavigationBindings = /** @class */ (function () {
      */
     NavigationBindings.prototype.initUpdate = function () {
         var navigation = this;
-        chartNavigationMixin.addUpdate(function (options) {
+        ChartNavigationComposition
+            .compose(this.chart).navigation
+            .addUpdate(function (options) {
             navigation.update(options);
-        }, this.chart);
+        });
     };
     /**
      * Hook for click on a button, method selcts/unselects buttons,
@@ -251,8 +253,12 @@ var NavigationBindings = /** @class */ (function () {
      *        Browser's click event
      */
     NavigationBindings.prototype.bindingsButtonClick = function (button, events, clickEvent) {
-        var navigation = this, chart = navigation.chart;
+        var navigation = this, chart = navigation.chart, svgContainer = chart.renderer.boxWrapper;
+        var shouldEventBeFired = true;
         if (navigation.selectedButtonElement) {
+            if (navigation.selectedButtonElement.classList === button.classList) {
+                shouldEventBeFired = false;
+            }
             fireEvent(navigation, 'deselectButton', { button: navigation.selectedButtonElement });
             if (navigation.nextEvent) {
                 // Remove in-progress annotations adders:
@@ -263,15 +269,24 @@ var NavigationBindings = /** @class */ (function () {
                 navigation.mouseMoveEvent = navigation.nextEvent = false;
             }
         }
-        navigation.selectedButton = events;
-        navigation.selectedButtonElement = button;
-        fireEvent(navigation, 'selectButton', { button: button });
-        // Call "init" event, for example to open modal window
-        if (events.init) {
-            events.init.call(navigation, button, clickEvent);
+        if (shouldEventBeFired) {
+            navigation.selectedButton = events;
+            navigation.selectedButtonElement = button;
+            fireEvent(navigation, 'selectButton', { button: button });
+            // Call "init" event, for example to open modal window
+            if (events.init) {
+                events.init.call(navigation, button, clickEvent);
+            }
+            if (events.start || events.steps) {
+                chart.renderer.boxWrapper.addClass(PREFIX + 'draw-mode');
+            }
         }
-        if (events.start || events.steps) {
-            chart.renderer.boxWrapper.addClass(PREFIX + 'draw-mode');
+        else {
+            chart.stockTools && chart.stockTools.toggleButtonAciveClass(button);
+            svgContainer.removeClass(PREFIX + 'draw-mode');
+            navigation.nextEvent = false;
+            navigation.mouseMoveEvent = false;
+            navigation.selectedButton = null;
         }
     };
     /**
@@ -657,6 +672,7 @@ var NavigationBindings = /** @class */ (function () {
         },
         // Simple shapes:
         circle: ['shapes'],
+        ellipse: ['shapes'],
         verticalLine: [],
         label: ['labelOptions'],
         // Measure
@@ -673,7 +689,9 @@ var NavigationBindings = /** @class */ (function () {
     // Define non editable fields per annotation, for example Rectangle inherits
     // options from Measure, but crosshairs are not available
     NavigationBindings.annotationsNonEditable = {
-        rectangle: ['crosshairX', 'crosshairY', 'label']
+        rectangle: ['crosshairX', 'crosshairY', 'labelOptions'],
+        ellipse: ['labelOptions'],
+        circle: ['labelOptions']
     };
     return NavigationBindings;
 }());
@@ -786,7 +804,6 @@ setOptions({
          * Configure the Popup strings in the chart. Requires the
          * `annotations.js` or `annotations-advanced.src.js` module to be
          * loaded.
-         *
          * @since   7.0.0
          * @product highcharts highstock
          */
@@ -800,6 +817,7 @@ setOptions({
                 simpleShapes: 'Simple shapes',
                 lines: 'Lines',
                 circle: 'Circle',
+                ellipse: 'Ellipse',
                 rectangle: 'Rectangle',
                 label: 'Label',
                 shapeOptions: 'Shape options',
@@ -860,9 +878,16 @@ setOptions({
          * - `end`: last event to be called after last step event
          *
          * @type         {Highcharts.Dictionary<Highcharts.NavigationBindingsOptionsObject>|*}
-         * @sample       stock/stocktools/stocktools-thresholds
-         *               Custom bindings in Highcharts Stock
+         *
+         * @sample {highstock} stock/stocktools/stocktools-thresholds
+         *               Custom bindings
+         * @sample {highcharts} highcharts/annotations/bindings/
+         *               Simple binding
+         * @sample {highcharts} highcharts/annotations/bindings-custom-annotation/
+         *               Custom annotation binding
+         *
          * @since        7.0.0
+         * @requires     modules/annotations
          * @product      highcharts highstock
          */
         bindings: {
@@ -896,22 +921,17 @@ setOptions({
                                 },
                                 r: 5
                             }]
-                    }, navigation
-                        .annotationsOptions, navigation
-                        .bindings
-                        .circleAnnotation
-                        .annotationsOptions));
+                    }, navigation.annotationsOptions, navigation.bindings.circleAnnotation.annotationsOptions));
                 },
                 /** @ignore-option */
                 steps: [
                     function (e, annotation) {
                         var mockPointOpts = annotation.options.shapes[0]
-                            .point, inverted = this.chart.inverted, x, y, distance;
+                            .point, distance;
                         if (isNumber(mockPointOpts.xAxis) &&
                             isNumber(mockPointOpts.yAxis)) {
-                            x = this.chart.xAxis[mockPointOpts.xAxis]
-                                .toPixels(mockPointOpts.x);
-                            y = this.chart.yAxis[mockPointOpts.yAxis]
+                            var inverted = this.chart.inverted, x = this.chart.xAxis[mockPointOpts.xAxis]
+                                .toPixels(mockPointOpts.x), y = this.chart.yAxis[mockPointOpts.yAxis]
                                 .toPixels(mockPointOpts.y);
                             distance = Math.max(Math.sqrt(Math.pow(inverted ? y - e.chartX : x - e.chartX, 2) +
                                 Math.pow(inverted ? x - e.chartY : y - e.chartY, 2)), 5);
@@ -924,6 +944,46 @@ setOptions({
                     }
                 ]
             },
+            ellipseAnnotation: {
+                className: 'highcharts-ellipse-annotation',
+                start: function (e) {
+                    var coords = this.chart.pointer.getCoordinates(e), coordsX = this.utils.getAssignedAxis(coords.xAxis), coordsY = this.utils.getAssignedAxis(coords.yAxis), navigation = this.chart.options.navigation;
+                    if (!coordsX || !coordsY) {
+                        return;
+                    }
+                    return this.chart.addAnnotation(merge({
+                        langKey: 'ellipse',
+                        type: 'basicAnnotation',
+                        shapes: [
+                            {
+                                type: 'ellipse',
+                                xAxis: coordsX.axis.options.index,
+                                yAxis: coordsY.axis.options.index,
+                                points: [{
+                                        x: coordsX.value,
+                                        y: coordsY.value
+                                    }, {
+                                        x: coordsX.value,
+                                        y: coordsY.value
+                                    }],
+                                ry: 1
+                            }
+                        ]
+                    }, navigation.annotationsOptions, navigation.bindings.ellipseAnnotation.annotationOptions));
+                },
+                steps: [
+                    function (e, annotation) {
+                        var target = annotation.shapes[0], position = target.getAbsolutePosition(target.points[1]);
+                        target.translatePoint(e.chartX - position.x, e.chartY - position.y, 1);
+                        target.redraw(false);
+                    },
+                    function (e, annotation) {
+                        var target = annotation.shapes[0], position = target.getAbsolutePosition(target.points[0]), position2 = target.getAbsolutePosition(target.points[1]), newR = target.getDistanceFromLine(position, position2, e.chartX, e.chartY), yAxis = target.getYAxis(), newRY = Math.abs(yAxis.toValue(0) - yAxis.toValue(newR));
+                        target.setYRadius(newRY);
+                        target.redraw(false);
+                    }
+                ]
+            },
             /**
              * A rectangle annotation bindings. Includes `start` and one event
              * in `steps` array.
@@ -951,7 +1011,8 @@ setOptions({
                                     { xAxis: xAxis, yAxis: yAxis, x: x, y: y },
                                     { xAxis: xAxis, yAxis: yAxis, x: x, y: y },
                                     { xAxis: xAxis, yAxis: yAxis, x: x, y: y },
-                                    { xAxis: xAxis, yAxis: yAxis, x: x, y: y }
+                                    { xAxis: xAxis, yAxis: yAxis, x: x, y: y },
+                                    { command: 'Z' }
                                 ]
                             }]
                     }, navigation
@@ -1028,7 +1089,7 @@ setOptions({
          * from a different server.
          *
          * @type      {string}
-         * @default   https://code.highcharts.com/9.2.0/gfx/stock-icons/
+         * @default   https://code.highcharts.com/9.3.1/gfx/stock-icons/
          * @since     7.1.3
          * @apioption navigation.iconsURL
          */
@@ -1084,6 +1145,7 @@ setOptions({
          * @extends   annotations
          * @exclude   crookedLine, elliottWave, fibonacci, infinityLine,
          *            measure, pitchfork, tunnel, verticalLine, basicAnnotation
+         * @requires     modules/annotations
          * @apioption navigation.annotationsOptions
          */
         annotationsOptions: {