highcharts 11.4.3 → 11.4.4

package/modules/stock-tools.src.js

@@ -1,5 +1,5 @@
 /**
- * @license Highstock JS v11.4.3 (2024-05-22)
+ * @license Highstock JS v11.4.4 (2024-07-02)
  *
  * Advanced Highcharts Stock tools
  *
@@ -13,7 +13,7 @@
         factory['default'] = factory;
         module.exports = factory;
     } else if (typeof define === 'function' && define.amd) {
-        define('highcharts/modules/stock-tools', ['highcharts', 'highcharts/modules/stock'], function (Highcharts) {
+        define('highcharts/modules/stock-tools', ['highcharts', 'modules/stock'], function (Highcharts) {
             factory(Highcharts);
             factory.Highcharts = Highcharts;
             return factory;
@@ -29,7 +29,7 @@
             obj[path] = fn.apply(null, args);
 
             if (typeof CustomEvent === 'function') {
-                window.dispatchEvent(new CustomEvent(
+                Highcharts.win.dispatchEvent(new CustomEvent(
                     'HighchartsModuleLoaded',
                     { detail: { path: path, module: obj[path] } }
                 ));
@@ -447,7 +447,7 @@
              * from a different server.
              *
              * @type      {string}
-             * @default   https://code.highcharts.com/11.4.3/gfx/stock-icons/
+             * @default   https://code.highcharts.com/11.4.4/gfx/stock-icons/
              * @since     7.1.3
              * @apioption navigation.iconsURL
              */
@@ -894,8 +894,7 @@
                     }
                 }
                 else {
-                    chart.stockTools &&
-                        chart.stockTools.toggleButtonActiveClass(button);
+                    chart.stockTools && button.classList.remove('highcharts-active');
                     svgContainer.removeClass('highcharts-draw-mode');
                     navigation.nextEvent = false;
                     navigation.mouseMoveEvent = false;
@@ -1752,6 +1751,31 @@
                 });
             }
         }
+        /**
+         * Compares two arrays of strings, checking their length and if corresponding
+         * elements are equal.
+         *
+         * @param {string[]} a
+         *        The first array to compare.
+         * @param {string[]} b
+         *        The second array to compare.
+         * @return {boolean}
+         *          Return `true` if the arrays are equal, otherwise `false`.
+         */
+        function shallowArraysEqual(a, b) {
+            if (!defined(a) || !defined(b)) {
+                return false;
+            }
+            if (a.length !== b.length) {
+                return false;
+            }
+            for (let i = 0; i < a.length; i++) {
+                if (a[i] !== b[i]) {
+                    return false;
+                }
+            }
+            return true;
+        }
         /* *
          *
          *  Default Export
@@ -1766,6 +1790,7 @@
             isNotNavigatorYAxis,
             isPriceIndicatorEnabled,
             manageIndicators,
+            shallowArraysEqual,
             updateHeight,
             updateNthPoint,
             updateRectSize
@@ -4452,7 +4477,13 @@
                          */
                         symbol: 'save-chart.svg'
                     }
-                }
+                },
+                /**
+                 * Whether the stock tools toolbar is visible.
+                 *
+                 * @since 11.4.4
+                 */
+                visible: true
             }
         };
         /* *
@@ -4708,7 +4739,7 @@
 
         return StockTools;
     });
-    _registerModule(_modules, 'Stock/StockTools/StockToolbar.js', [_modules['Core/Utilities.js']], function (U) {
+    _registerModule(_modules, 'Stock/StockTools/StockToolbar.js', [_modules['Core/Utilities.js'], _modules['Core/Renderer/HTML/AST.js'], _modules['Stock/StockTools/StockToolsUtilities.js']], function (U, AST, StockToolsUtilities) {
         /* *
          *
          *  GUI generator for Stock tools
@@ -4720,7 +4751,8 @@
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
-        const { addEvent, createElement, css, fireEvent, getStyle, isArray, merge, pick } = U;
+        const { addEvent, createElement, css, defined, fireEvent, getStyle, isArray, merge, pick } = U;
+        const { shallowArraysEqual } = StockToolsUtilities;
         /* *
          *
          *  Classes
@@ -4748,6 +4780,8 @@
              *
              * */
             constructor(options, langOptions, chart) {
+                this.width = 0;
+                this.isDirty = false;
                 this.chart = chart;
                 this.options = options;
                 this.lang = langOptions;
@@ -4755,14 +4789,15 @@
                 this.iconsURL = this.getIconsURL();
                 this.guiEnabled = options.enabled;
                 this.visible = pick(options.visible, true);
-                this.placed = pick(options.placed, false);
+                this.guiClassName = options.className;
+                this.toolbarClassName = options.toolbarClassName;
                 // General events collection which should be removed upon
                 // destroy/update:
                 this.eventsToUnbind = [];
                 if (this.guiEnabled) {
-                    this.createHTML();
-                    this.init();
-                    this.showHideNavigatorion();
+                    this.createContainer();
+                    this.createButtons();
+                    this.showHideNavigation();
                 }
                 fireEvent(this, 'afterInit');
             }
@@ -4772,12 +4807,12 @@
              *
              * */
             /**
-             * Initialize the toolbar. Create buttons and submenu for each option
-             * defined in `stockTools.gui`.
+             * Create and set up stockTools buttons with their events and submenus.
              * @private
              */
-            init() {
+            createButtons() {
                 const lang = this.lang, guiOptions = this.options, toolbar = this.toolbar, buttons = guiOptions.buttons, defs = guiOptions.definitions, allButtons = toolbar.childNodes;
+                this.buttonList = buttons;
                 // Create buttons
                 buttons.forEach((btnName) => {
                     const button = this.addButton(toolbar, defs, btnName, lang);
@@ -5001,11 +5036,11 @@
                 }));
             }
             /*
-             * Create stockTools HTML main elements.
+             * Create the stockTools container and sets up event bindings.
              *
              */
-            createHTML() {
-                const chart = this.chart, guiOptions = this.options, container = chart.container, navigation = chart.options.navigation, bindingsClassName = navigation && navigation.bindingsClassName;
+            createContainer() {
+                const chart = this.chart, guiOptions = this.options, container = chart.container, navigation = chart.options.navigation, bindingsClassName = navigation?.bindingsClassName, self = this;
                 let listWrapper, toolbar;
                 // Create main container
                 const wrapper = this.wrapper = createElement('div', {
@@ -5013,6 +5048,17 @@
                         guiOptions.className + ' ' + bindingsClassName
                 });
                 container.appendChild(wrapper);
+                this.showHideBtn = createElement('div', {
+                    className: 'highcharts-toggle-toolbar highcharts-arrow-left'
+                }, void 0, wrapper);
+                // Toggle menu
+                this.eventsToUnbind.push(addEvent(this.showHideBtn, 'click', () => {
+                    this.update({
+                        gui: {
+                            visible: !self.visible
+                        }
+                    });
+                }));
                 // Mimic event behaviour of being outside chart.container
                 [
                     'mousedown',
@@ -5042,7 +5088,7 @@
              * Function called in redraw verifies if the navigation should be visible.
              * @private
              */
-            showHideNavigatorion() {
+            showHideNavigation() {
                 // Arrows
                 // 50px space for arrows
                 if (this.visible &&
@@ -5061,42 +5107,31 @@
              * @private
              */
             showHideToolbar() {
-                const chart = this.chart, wrapper = this.wrapper, toolbar = this.listWrapper, submenu = this.submenu, 
+                const wrapper = this.wrapper, toolbar = this.listWrapper, submenu = this.submenu, 
                 // Show hide toolbar
-                showhideBtn = this.showhideBtn = createElement('div', {
-                    className: 'highcharts-toggle-toolbar highcharts-arrow-left'
-                }, void 0, wrapper);
+                showHideBtn = this.showHideBtn;
                 let visible = this.visible;
-                showhideBtn.style.backgroundImage =
+                showHideBtn.style.backgroundImage =
                     'url(' + this.iconsURL + 'arrow-right.svg)';
                 if (!visible) {
                     // Hide
                     if (submenu) {
                         submenu.style.display = 'none';
                     }
-                    showhideBtn.style.left = '0px';
+                    showHideBtn.style.left = '0px';
                     visible = this.visible = false;
                     toolbar.classList.add('highcharts-hide');
-                    showhideBtn.classList.toggle('highcharts-arrow-right');
-                    wrapper.style.height = showhideBtn.offsetHeight + 'px';
+                    showHideBtn.classList.add('highcharts-arrow-right');
+                    wrapper.style.height = showHideBtn.offsetHeight + 'px';
                 }
                 else {
                     wrapper.style.height = '100%';
-                    showhideBtn.style.top = getStyle(toolbar, 'padding-top') + 'px';
-                    showhideBtn.style.left = (wrapper.offsetWidth +
+                    toolbar.classList.remove('highcharts-hide');
+                    showHideBtn.classList.remove('highcharts-arrow-right');
+                    showHideBtn.style.top = getStyle(toolbar, 'padding-top') + 'px';
+                    showHideBtn.style.left = (wrapper.offsetWidth +
                         getStyle(toolbar, 'padding-left')) + 'px';
                 }
-                // Toggle menu
-                this.eventsToUnbind.push(addEvent(showhideBtn, 'click', () => {
-                    chart.update({
-                        stockTools: {
-                            gui: {
-                                visible: !visible,
-                                placed: true
-                            }
-                        }
-                    });
-                }));
             }
             /*
              * In main GUI button, replace icon and class with submenu button's
@@ -5160,9 +5195,10 @@
              * @private
              */
             update(options, redraw) {
+                this.isDirty = !!options.gui.definitions;
                 merge(true, this.chart.options.stockTools, options);
-                this.destroy();
-                this.chart.setStockTools(options);
+                merge(true, this.options, options.gui);
+                this.visible = pick(this.options.visible && this.options.enabled, true);
                 // If Stock Tools are updated, then bindings should be updated too:
                 if (this.chart.navigationBindings) {
                     this.chart.navigationBindings.update();
@@ -5185,11 +5221,82 @@
                 }
             }
             /**
-             * Redraw, GUI requires to verify if the navigation should be visible.
+             * Redraws the toolbar based on the current state of the options.
              * @private
              */
             redraw() {
-                this.showHideNavigatorion();
+                if (this.options.enabled !== this.guiEnabled) {
+                    this.handleGuiEnabledChange();
+                }
+                else {
+                    if (!this.guiEnabled) {
+                        return;
+                    }
+                    this.updateClassNames();
+                    this.updateButtons();
+                    this.updateVisibility();
+                    this.showHideNavigation();
+                    this.showHideToolbar();
+                }
+            }
+            /**
+             * Hadles the change of the `enabled` option.
+             * @private
+             */
+            handleGuiEnabledChange() {
+                if (this.options.enabled === false) {
+                    this.destroy();
+                    this.visible = false;
+                }
+                if (this.options.enabled === true) {
+                    this.createContainer();
+                    this.createButtons();
+                }
+                this.guiEnabled = this.options.enabled;
+            }
+            /**
+             * Updates the class names of the GUI and toolbar elements.
+             * @private
+             */
+            updateClassNames() {
+                if (this.options.className !== this.guiClassName) {
+                    if (this.guiClassName) {
+                        this.wrapper.classList.remove(this.guiClassName);
+                    }
+                    if (this.options.className) {
+                        this.wrapper.classList.add(this.options.className);
+                    }
+                    this.guiClassName = this.options.className;
+                }
+                if (this.options.toolbarClassName !== this.toolbarClassName) {
+                    if (this.toolbarClassName) {
+                        this.toolbar.classList.remove(this.toolbarClassName);
+                    }
+                    if (this.options.toolbarClassName) {
+                        this.toolbar.classList.add(this.options.toolbarClassName);
+                    }
+                    this.toolbarClassName = this.options.toolbarClassName;
+                }
+            }
+            /**
+             * Updates the buttons in the toolbar if the button options have changed.
+             * @private
+             */
+            updateButtons() {
+                if (!shallowArraysEqual(this.options.buttons, this.buttonList) ||
+                    this.isDirty) {
+                    this.toolbar.innerHTML = AST.emptyHTML;
+                    this.createButtons();
+                }
+            }
+            /**
+             * Updates visibility based on current options.
+             * @private
+             */
+            updateVisibility() {
+                if (defined(this.options.visible)) {
+                    this.visible = this.options.visible;
+                }
             }
             /**
              * @private
@@ -5197,7 +5304,7 @@
             getIconsURL() {
                 return this.chart.options.navigation.iconsURL ||
                     this.options.iconsURL ||
-                    'https://code.highcharts.com/11.4.3/gfx/stock-icons/';
+                    'https://code.highcharts.com/11.4.4/gfx/stock-icons/';
             }
         }
         Toolbar.prototype.classMapping = {
@@ -5297,7 +5404,6 @@
                 addEvent(ChartClass, 'beforeRender', onChartBeforeRedraw);
                 addEvent(ChartClass, 'destroy', onChartDestroy);
                 addEvent(ChartClass, 'getMargins', onChartGetMargins, { order: 0 });
-                addEvent(ChartClass, 'redraw', onChartRedraw);
                 addEvent(ChartClass, 'render', onChartRender);
                 chartProto.setStockTools = chartSetStockTools;
                 addEvent(NavigationBindingsClass, 'deselectButton', onNavigationBindingsDeselectButton);
@@ -5318,25 +5424,37 @@
          */
         function onChartBeforeRedraw() {
             if (this.stockTools) {
-                const optionsChart = this.options.chart;
-                const listWrapper = this.stockTools.listWrapper, offsetWidth = listWrapper && ((listWrapper.startWidth +
+                this.stockTools.redraw();
+                setOffset(this);
+            }
+        }
+        /**
+         * Function to calculate and set the offset width for stock tools.
+         * @private
+         */
+        function setOffset(chart) {
+            if (chart.stockTools?.guiEnabled) {
+                const optionsChart = chart.options.chart;
+                const listWrapper = chart.stockTools.listWrapper;
+                const offsetWidth = listWrapper && ((listWrapper.startWidth +
                     getStyle(listWrapper, 'padding-left') +
                     getStyle(listWrapper, 'padding-right')) || listWrapper.offsetWidth);
+                chart.stockTools.width = offsetWidth;
                 let dirty = false;
-                if (offsetWidth && offsetWidth < this.plotWidth) {
+                if (offsetWidth < chart.plotWidth) {
                     const nextX = pick(optionsChart.spacingLeft, optionsChart.spacing && optionsChart.spacing[3], 0) + offsetWidth;
-                    const diff = nextX - this.spacingBox.x;
-                    this.spacingBox.x = nextX;
-                    this.spacingBox.width -= diff;
+                    const diff = nextX - chart.spacingBox.x;
+                    chart.spacingBox.x = nextX;
+                    chart.spacingBox.width -= diff;
                     dirty = true;
                 }
                 else if (offsetWidth === 0) {
                     dirty = true;
                 }
-                if (offsetWidth !== this.stockTools.prevOffsetWidth) {
-                    this.stockTools.prevOffsetWidth = offsetWidth;
+                if (offsetWidth !== chart.stockTools.prevOffsetWidth) {
+                    chart.stockTools.prevOffsetWidth = offsetWidth;
                     if (dirty) {
-                        this.isDirtyLegend = true;
+                        chart.isDirtyLegend = true;
                     }
                 }
             }
@@ -5353,22 +5471,13 @@
          * @private
          */
         function onChartGetMargins() {
-            const listWrapper = this.stockTools && this.stockTools.listWrapper, offsetWidth = listWrapper && ((listWrapper.startWidth +
-                getStyle(listWrapper, 'padding-left') +
-                getStyle(listWrapper, 'padding-right')) || listWrapper.offsetWidth);
+            const offsetWidth = this.stockTools?.visible && this.stockTools.guiEnabled ?
+                this.stockTools.width : 0;
             if (offsetWidth && offsetWidth < this.plotWidth) {
                 this.plotLeft += offsetWidth;
                 this.spacing[3] += offsetWidth;
             }
         }
-        /**
-         * @private
-         */
-        function onChartRedraw() {
-            if (this.stockTools && this.stockTools.guiEnabled) {
-                this.stockTools.redraw();
-            }
-        }
         /**
          * Check if the correct price indicator button is displayed, #15029.
          * @private
@@ -5404,8 +5513,7 @@
                 if (button.parentNode.className.indexOf(className) >= 0) {
                     button = button.parentNode.parentNode;
                 }
-                // Set active class on the current button
-                gui.toggleButtonActiveClass(button);
+                button.classList.remove('highcharts-active');
             }
         }
         /**
@@ -5447,4 +5555,4 @@
 
         return Highcharts;
     });
-}));
+}));