Source: plot/buttons/PlotlyCustomModeBar.js

  1. export { PlotlyCustomModeBar }
  3. /**
  4.  * Class extending plotly's mode bar functionality.
  5.  */
  6. class PlotlyCustomModeBar {
  8.     /**
  9.      * Create a custom plotly mode bar.
  10.      * @param {HTMLElement} graphDiv - Plotly graphDiv configuration.
  11.      * @param {Array} [data=[]] - Plotly data configuration.
  12.      * @param {Object} [layout={}] - Plotly layout configuration.
  13.      * @param {Object} [config={}] - Plotly config configuration.
  14.      */
  15.     constructor(graphDiv, data = [], layout = {}, config = {}) {
  17.         this.graphDiv = graphDiv;
  18.         this.data = data;
  19.         this.layout = layout;
  20.         this.config = config;
  22.         this.customButtons = [];
  23.     }
  25.     /**
  26.      * Register custom buttons by providing their plotly button configuration.
  27.      * @param {Array} buttonList - Containing plotly's button objects.
  28.      */
  29.     registerCustomButtons(buttonList = []) {
  30.         this.customButtons = this.customButtons.concat(buttonList);
  31.         this.insertCustomButton();
  32.     }
  34.     _getActiveButtons() {
  35.         const buttonsToRemove = [].concat(this.layout?.modebar?.remove, this.config?.modeBarButtonsToRemove);
  36.         const buttonsToAdd = [].concat(this.layout?.modebar?.add, this.config?.modeBarButtonsToAdd);
  38.         const buttonsToRemoveFlat = buttonsToRemove.flat();
  39.         const buttonsToAddFlat = buttonsToAdd.flat();
  40.         return [buttonsToAddFlat, buttonsToRemoveFlat];
  41.     }
  43.     /**
  44.      * Check if a button is configured to be visible in plotly's mode bar.
  45.      * @param {String} buttonName - Name of the button.
  46.      * @returns {Boolean} Status.
  47.      */
  48.     isButtonRequested(buttonName) {
  49.         const [buttonsToAddFlat, buttonsToRemoveFlat] = this._getActiveButtons();
  50.         if (buttonsToAddFlat.includes(buttonName) && !buttonsToRemoveFlat.includes(buttonName))
  51.             return true;
  52.         return false;
  53.     }
  55.     /** 
  56.      * Set the order in which the buttons appear in Plotly's mode bar.
  57.      * 
  58.      * @implNote: This method applies the predefined button order with respect to plotly's add (A) and remove button variables (B).
  59.      * It uses plotly's "modeBarButton" configuration, that in contrast to this method, does not take A and B into account.
  60.      * Consequently, when buttons should be ordered, the current plotly version is not sufficient enough for vef's plotly inheritance.
  61.      * @param {Array} defaultButtonOrder - List containing the sorted button names.
  62.      */
  63.     applyButtonOrder(defaultButtonOrder) {
  65.         const modeBarButtons = this.config?.modeBarButtons;
  66.         if (modeBarButtons?.length > 1) {
  67.             console.warn('Plotly variable "modeBarButton" is already defined, no ordering of buttons based on preset');
  68.             return;
  69.         }
  71.         const [buttonsToAddFlat, buttonsToRemoveFlat] = this._getActiveButtons();
  72.         buttonsToAddFlat.sort((a, b) => {
  73.             return defaultButtonOrder.indexOf(a.name || a) - defaultButtonOrder.indexOf(b.name || b);
  74.         });
  76.         const setModeBarButtons = buttonsToAddFlat.reduce((acc, curr, idx) => {
  77.             if (!buttonsToRemoveFlat.includes(curr))
  78.                 acc.push([curr]);
  79.             return acc;
  80.         }, []);
  81.         this.config.modeBarButtons = setModeBarButtons;
  82.     }
  84.     /**
  85.      * Replace the names of the custom buttons with the button object. Thus, the names of custom button can be used in the plotly configuration instead of the button object.
  86.      */
  87.     insertCustomButton() {
  88.         if (this.layout?.modebar?.add)
  89.             this.layout.modebar.add = this._insertCustomButton(this.layout?.modebar?.add);
  90.         if (this.config?.modeBarButtonsToAdd)
  91.             this.config.modeBarButtonsToAdd = this._insertCustomButton(this.config?.modeBarButtonsToAdd);
  92.         if (this.config?.modeBarButtons)
  93.             this.config.modeBarButtons = this._insertCustomButton(this.config?.modeBarButtons);
  94.     }
  96.     _insertCustomButton(buttonList) {
  97.         if (buttonList && buttonList.length > 0) {
  98.             const buttonListCollect = [];
  99.             buttonList.forEach((buttonGroup) => {
  100.                 if (!Array.isArray(buttonGroup)) buttonGroup = [buttonGroup];
  101.                 const buttonGroupCollect = [];
  102.                 buttonGroup.forEach((button) => {
  103.                     const matchedCustomButton = this.customButtons.find(item => item.name == button);
  104.                     if (matchedCustomButton) button = matchedCustomButton;
  105.                     buttonGroupCollect.push(button);
  106.                 });
  107.                 if (buttonGroupCollect.length > 0)
  108.                     buttonListCollect.push(buttonGroupCollect);
  109.             });
  110.             buttonList = buttonListCollect;
  111.         }
  112.         return buttonList;
  113.     }
  114. }