[jsroot] dev 15/05/2025 without RHist classes

1. Remove all RHist classes
2. Let configure exact axis ticks position via draw option like "xticks:[-3,-1,1,3]"
3. Support dark mode when store images
4. With 'Shift' key pressed whole graph is moved by dragging action
5. Upgrade lil-gui.mjs 0.19.2 -> 0.20.0
6. Many changes with private class members

Author: linev

js/build/jsroot.js

@@ -2,9 +2,13 @@
 
 ## Changes in dev
 1. Use ES6 modules to implement geoworker, enable node.js usage
-1. Upgrade three.js r174 -> r176
 1. Add missing colors 100 - 127
 1. Let use hex colors in histogram draw options like "fill_00ff00" or "line_77aa1166"
+1. Let configure exact axis ticks position via draw option like "xticks:[-3,-1,1,3]"
+1. Support dark mode when store images
+1. With 'Shift' key pressed whole graph is moved by dragging action
+1. Upgrade three.js r174 -> r176
+1. Upgrade lil-gui.mjs 0.19.2 -> 0.20.0
 1. Fix - colz handling on `THStack`, avoid multiple palette drawings
 1. Fix - bug in pad.Divide context menu command
 1. Fix - palette not adjusted when 'same' draw option used for histogram

js/changes.md

@@ -204,12 +204,32 @@ class DrawOptions {
          return true;
 
       let pos2 = pos;
-      while ((pos2 < this.opt.length) && (this.opt[pos2] !== ' ') && (this.opt[pos2] !== ',') && (this.opt[pos2] !== ';')) pos2++;
+      const is_array = postpart === 'array';
+      if (is_array) {
+         if (this.opt[pos2] !== '[')
+            return false;
+         while ((pos2 < this.opt.length) && (this.opt[pos2] !== ']'))
+            pos2++;
+         if (++pos2 > this.opt.length)
+            return false;
+      } else {
+         while ((pos2 < this.opt.length) && (this.opt[pos2] !== ' ') && (this.opt[pos2] !== ',') && (this.opt[pos2] !== ';'))
+            pos2++;
+      }
       if (pos2 > pos) {
          this.part = this.opt.slice(pos, pos2);
          this.opt = this.opt.slice(0, pos) + this.opt.slice(pos2);
       }
 
+      if (is_array) {
+         try {
+            this.array = JSON.parse(this.part);
+         } catch {
+            this.array = undefined;
+         }
+         return this.array?.length !== undefined;
+      }
+
       if (postpart !== 'color')
          return true;
 
@@ -233,7 +253,7 @@ class DrawOptions {
    /** @summary Returns remaining part of found option as integer. */
    partAsInt(offset, dflt) {
       let mult = 1;
-      const last = this.part ? this.part[this.part.length - 1] : '';
+      const last = this.part ? this.part.at(-1) : '';
       if (last === 'K')
          mult = 1e3;
       else if (last === 'M')

js/modules/base/BasePainter.mjs

@@ -18,56 +18,57 @@ import { getRootColors } from './colors.mjs';
 
 class ObjectPainter extends BasePainter {
 
+   #pad_name;        // pad name where object is drawn
    #draw_object;     // drawn object
    #main_painter;    // WeakRef to main painter in the pad
    #primary_ref;     // reference of primary painter - if any
    #secondary_id;    // id of this painter in relation to primary painter
    #options_store;   // stored draw options used to check changes
    #user_tooltip_handler; // configured user tooltip handler
    #user_tooltip_timeout; // timeout configured with tooltip handler
+   #user_toottip_handle; // timeout handle processing user tooltip
+   #user_context_menu; // function for user context menu
    #special_draw_area; // current special draw area like projection
+   #root_colors;     // custom colors list
 
    /** @summary constructor
      * @param {object|string} dom - dom element or identifier or pad painter
      * @param {object} obj - object to draw
      * @param {string} [opt] - object draw options */
    constructor(dom, obj, opt) {
-      let pp = null;
-      if (isFunc(dom?.forEachPainterInPad) && (dom?.this_pad_name !== undefined)) {
-         pp = dom;
-         dom = pp.getDom();
+      let pad_name = '';
+      if (isFunc(dom?.forEachPainterInPad)) {
+         pad_name = dom.this_pad_name;
+         dom = dom.getDom();
       }
 
       super(dom);
 
       // this.draw_g = undefined; // container for all drawn objects
-      this.pad_name = pp?.this_pad_name ?? ''; // name of pad where object is drawn
+      this.setPadName(pad_name); // name of pad where object is drawn
       this.assignObject(obj);
       if (isStr(opt))
          this.options = { original: opt };
    }
 
    /** @summary Assign object to the painter
      * @protected */
-   assignObject(obj) {
-      this.#draw_object = isObject(obj) ? obj : null;
-   }
+   assignObject(obj) { this.#draw_object = isObject(obj) ? obj : null; }
 
    /** @summary Returns drawn object */
    getObject() { return this.#draw_object; }
 
    /** @summary Assigns pad name where element will be drawn
      * @desc Should happened before first draw of element is performed, only for special use case
      * @param {string} [pad_name] - on which sub-pad element should be draw, if not specified - use current
-     * @protected
-     * @deprecated to be removed in v8 */
+     * @protected */
    setPadName(pad_name) {
       // console.warn('setPadName is deprecated, to be removed in v8');
-      this.pad_name = isStr(pad_name) ? pad_name : '';
+      this.#pad_name = isStr(pad_name) ? pad_name : '';
    }
 
    /** @summary Returns pad name where object is drawn */
-   getPadName() { return this.pad_name || ''; }
+   getPadName() { return this.#pad_name || ''; }
 
    /** @summary Indicates that drawing runs in batch mode
      * @private */
@@ -88,12 +89,12 @@ class ObjectPainter extends BasePainter {
 
       if (this.isMainPainter()) {
          const pp = this.getPadPainter();
-         if (!pp || pp._auto_canvas)
+         if (!pp || pp.isCanvas('auto'))
             keep_origin = false;
       }
 
       // cleanup all existing references
-      delete this.pad_name;
+      this.#pad_name = undefined;
       this.#main_painter = null;
       this.#draw_object = null;
       delete this.snapid;
@@ -105,7 +106,7 @@ class ObjectPainter extends BasePainter {
       delete this.fillatt;
       delete this.lineatt;
       delete this.markeratt;
-      delete this._root_colors;
+      this.#root_colors = undefined;
       delete this.options;
       this.#options_store = undefined;
 
@@ -249,30 +250,36 @@ class ObjectPainter extends BasePainter {
       return this.getObjectName() || this.getClassName() || '';
    }
 
+   /** @summary Set colors list
+    * @protected */
+   setColors(lst) { this.#root_colors = lst; }
+
+   /** @summary Return colors list
+    * @protected */
+   getColors(force) {
+      if (!this.#root_colors && force)
+         this.setColors(this.getCanvPainter()?.getColors() || getRootColors());
+      return this.#root_colors;
+   }
+
    /** @summary returns color from current list of colors
      * @desc First checks canvas painter and then just access global list of colors
      * @param {number} indx - color index
      * @return {string} with SVG color name or rgb()
      * @protected */
-   getColor(indx) {
-      if (!this._root_colors)
-         this._root_colors = this.getCanvPainter()?._root_colors || getRootColors();
-
-      return this._root_colors[indx];
-   }
+   getColor(indx) { return this.getColors(true)[indx]; }
 
    /** @summary Add color to list of colors
      * @desc Returned color index can be used as color number in all other draw functions
      * @return {number} new color index
      * @protected */
    addColor(color) {
-      if (!this._root_colors)
-         this._root_colors = this.getCanvPainter()?._root_colors || getRootColors();
-      const indx = this._root_colors.indexOf(color);
+      const lst = this.getColors(true),
+            indx = lst.indexOf(color);
       if (indx >= 0)
          return indx;
-      this._root_colors.push(color);
-      return this._root_colors.length - 1;
+      lst.push(color);
+      return lst.length - 1;
    }
 
    /** @summary returns tooltip allowed flag
@@ -386,23 +393,13 @@ class ObjectPainter extends BasePainter {
      * @protected */
    getPadSvg(pad_name) {
       if (pad_name === undefined)
-         pad_name = this.pad_name;
+         pad_name = this.getPadName();
 
-      let c = this.getCanvSvg();
+      const c = this.getCanvSvg();
       if (!pad_name || c.empty())
          return c;
 
-      const cp = c.property('pad_painter');
-      if (cp?.pads_cache && cp.pads_cache[pad_name])
-         return d3_select(cp.pads_cache[pad_name]);
-
-      c = c.select('.primitives_layer .__root_pad_' + pad_name);
-      if (cp) {
-         if (!cp.pads_cache)
-            cp.pads_cache = {};
-         cp.pads_cache[pad_name] = c.node();
-      }
-      return c;
+      return c.select('.primitives_layer .__root_pad_' + pad_name);
    }
 
    /** @summary Assign secondary id
@@ -490,20 +487,20 @@ class ObjectPainter extends BasePainter {
       const func = { isndc, nornd },
             use_frame = this.draw_g?.property('in_frame');
       if (use_frame || (use_frame_coordinates && !isndc))
-         func.main = this.getFramePainter();
-      if (func.main?.grx && func.main?.gry) {
-         func.x0 = (use_frame_coordinates && !isndc) ? func.main.getFrameX() : 0;
-         func.y0 = (use_frame_coordinates && !isndc) ? func.main.getFrameY() : 0;
+         func.fp = this.getFramePainter();
+      if (func.fp?.grx && func.fp?.gry) {
+         func.x0 = (use_frame_coordinates && !isndc) ? func.fp.getFrameX() : 0;
+         func.y0 = (use_frame_coordinates && !isndc) ? func.fp.getFrameY() : 0;
          if (nornd) {
-            func.x = function(x) { return this.x0 + this.main.grx(x); };
-            func.y = function(y) { return this.y0 + this.main.gry(y); };
+            func.x = function(x) { return this.x0 + this.fp.grx(x); };
+            func.y = function(y) { return this.y0 + this.fp.gry(y); };
          } else {
-            func.x = function(x) { return this.x0 + Math.round(this.main.grx(x)); };
-            func.y = function(y) { return this.y0 + Math.round(this.main.gry(y)); };
+            func.x = function(x) { return this.x0 + Math.round(this.fp.grx(x)); };
+            func.y = function(y) { return this.y0 + Math.round(this.fp.gry(y)); };
          }
       } else if (!use_frame) {
          const pp = this.getPadPainter();
-         if (!isndc) func.pad = pp?.getRootPad(true); // need for NDC conversion
+         func.pad = isndc ? null : pp?.getRootPad(true); // need for NDC conversion
          func.padw = pp?.getPadWidth() ?? 10;
          func.x = function(value) {
             if (this.pad) {
@@ -969,7 +966,7 @@ class ObjectPainter extends BasePainter {
             .property('text_factor', 0)
             .property('max_text_width', 0) // keep maximal text width, use it later
             .property('max_font_size', max_font_size)
-            .property('_fast_drawing', this.getPadPainter()?._fast_drawing ?? false);
+            .property('_fast_drawing', this.getPadPainter()?.isFastDrawing() ?? false);
 
       if (draw_g.property('_fast_drawing'))
          draw_g.property('_font_too_small', (max_font_size && (max_font_size < 5)) || (font.size < 4));
@@ -1371,17 +1368,14 @@ class ObjectPainter extends BasePainter {
      * Function should return promise with menu when items are filled
      * @param {function} fillmenu_func - function to fill custom context menu for object */
    configureUserContextMenu(fillmenu_func) {
-      if (!fillmenu_func || !isFunc(fillmenu_func))
-         delete this._userContextMenuFunc;
-      else
-         this._userContextMenuFunc = fillmenu_func;
+      this.#user_context_menu = isFunc(fillmenu_func) ? fillmenu_func : undefined;
    }
 
    /** @summary Fill object menu in web canvas
      * @private */
    async fillObjectExecMenu(menu, kind) {
-      if (isFunc(this._userContextMenuFunc))
-         return this._userContextMenuFunc(menu, kind);
+      if (isFunc(this.#user_context_menu))
+         return this.#user_context_menu(menu, kind);
 
       const canvp = this.getCanvPainter();
 
@@ -1421,8 +1415,8 @@ class ObjectPainter extends BasePainter {
          }
 
          menu.showMethodArgsDialog(item).then(args => {
-            if (!args) return;
-            if (execp.executeMenuCommand(item, args)) return;
+            if (!args || execp.executeMenuCommand(item, args))
+               return;
 
             const exec = item.fExec.slice(0, item.fExec.length - 1) + args + ')';
             if (cp?.v7canvas)
@@ -1557,17 +1551,17 @@ class ObjectPainter extends BasePainter {
       if (this.#user_tooltip_timeout <= 0)
          return this.#user_tooltip_handler(data);
 
-      if (this._user_tooltip_handle) {
-         clearTimeout(this._user_tooltip_handle);
-         delete this._user_tooltip_handle;
+      if (this.#user_toottip_handle) {
+         clearTimeout(this.#user_toottip_handle);
+         this.#user_toottip_handle = undefined;
       }
 
       if (!data)
          return this.#user_tooltip_handler(data);
 
       // only after timeout user function will be called
-      this._user_tooltip_handle = setTimeout(() => {
-         delete this._user_tooltip_handle;
+      this.#user_toottip_handle = setTimeout(() => {
+         this.#user_toottip_handle = undefined;
          if (this.#user_tooltip_handler)
             this.#user_tooltip_handler(data);
       }, this.#user_tooltip_timeout);
@@ -1673,7 +1667,14 @@ function drawRawText(dom, txt /* , opt */) {
    return painter.drawText();
 }
 
-/** @summary Returns canvas painter (if any) for specified HTML element
+/** @summary Returns pad painter (if any) for specified DOM element
+  * @param {string|object} dom - id or DOM element
+  * @private */
+function getElementPadPainter(dom) {
+   return new ObjectPainter(dom).getPadPainter();
+}
+
+/** @summary Returns canvas painter (if any) for specified DOM element
   * @param {string|object} dom - id or DOM element
   * @private */
 function getElementCanvPainter(dom) {
@@ -1780,6 +1781,6 @@ const EAxisBits = {
 
 Object.assign(internals.jsroot, { ObjectPainter, cleanup, resize });
 
-export { getElementCanvPainter, getElementMainPainter, drawingJSON,
+export { getElementPadPainter, getElementCanvPainter, getElementMainPainter, drawingJSON,
          selectActivePad, getActivePad, cleanup, resize, drawRawText,
          ObjectPainter, EAxisBits, kAxisLabels, kAxisNormal, kAxisFunc, kAxisTime };

js/modules/base/ObjectPainter.mjs

@@ -9,6 +9,7 @@ const kNormal = 1, /* kLessTraffic = 2, */ kOffline = 3;
 class RObjectPainter extends ObjectPainter {
 
    #pending_request;
+   #auto_colors; // handle for auto colors
 
    constructor(dom, obj, opt, csstype) {
       super(dom, obj, opt);
@@ -149,16 +150,13 @@ class RObjectPainter extends ObjectPainter {
 
       if (val === 'auto') {
          const pp = this.getPadPainter();
-         if (pp?._auto_color_cnt !== undefined) {
-            const pal = pp.getHistPalette(),
-                  cnt = pp._auto_color_cnt++;
-            let num = pp._num_primitives - 1;
-            if (num < 2) num = 2;
-            val = pal ? pal.getColorOrdinal((cnt % num) / num) : 'blue';
-            if (!this._auto_colors) this._auto_colors = {};
-            this._auto_colors[name] = val;
-         } else if (this._auto_colors && this._auto_colors[name])
-            val = this._auto_colors[name];
+         if (pp) {
+            val = pp.getAutoColor();
+            if (!this.#auto_colors)
+               this.#auto_colors = {};
+            this.#auto_colors[name] = val;
+         } else if (this.#auto_colors && this.#auto_colors[name])
+            val = this.#auto_colors[name];
          else {
             console.error(`Autocolor ${name} not defined yet - please check code`);
             val = '';