[jsroot] dev 5/11/2025

1. Implement for `TPie` 3d, text, title drawing including interactivity
2. Fix - proper paint axis labels on both sides when pad.fTickx/y = 2
3. Fix - paint frame border mode/size from TCanvas

Author: linev

js/build/jsroot.js

@@ -1,5 +1,12 @@
 # JSROOT changelog
 
+
+## Changes in dev
+1. Implement for `TPie` 3d, text, title drawing including interactivity
+1. Fix - proper paint axis labels on both sides when pad.fTickx/y = 2
+1. Fix - paint frame border mode/size from TCanvas
+
+
 ## Changes in 7.10.0
 1. `RNtuple` support, thanks to Kriti Mahajan https://github.com/Krmjn09
 2. Implement `RTreeMapPainter` to display `RNTuple` structure, thanks to Patryk Pilichowski https://github.com/magnustymoteus

js/changes.md

@@ -191,16 +191,23 @@ function findColor(name) {
 /** @summary Add new color
   * @param {string} rgb - color name or just string with rgb value
   * @param {array} [lst] - optional colors list, to which add colors
+  * @param {array} [lst] - optional colors list, to which add colors
   * @return {number} index of new color
   * @private */
-function addColor(rgb, lst) {
+function addColor(rgb, lst, indx) {
    if (!lst)
       lst = gbl_colors_list;
 
    if ((rgb[0] === '#') && (isNodeJs() || (isBatchMode() && settings.ApproxTextSize)))
       rgb = d3_color(rgb).formatRgb();
 
-   const indx = lst.indexOf(rgb);
+   if (indx !== undefined) {
+      if (Number.isInteger(indx) && (indx > 0))
+         lst[indx] = rgb;
+      return indx;
+   }
+
+   indx = lst.indexOf(rgb);
    if (indx >= 0)
       return indx;
    lst.push(rgb);

js/modules/base/colors.mjs

@@ -6,7 +6,7 @@ const version_id = 'dev',
 
 /** @summary version date
   * @desc Release date in format day/month/year like '14/04/2022' */
-version_date = '27/10/2025',
+version_date = '5/11/2025',
 
 /** @summary version id and date
   * @desc Produced by concatenation of {@link version_id} and {@link version_date}

js/modules/core.mjs

@@ -101,7 +101,7 @@ const drawFuncs = { lst: [
    { name: clTEllipse, icon: 'img_graph', draw: () => import_more().then(h => h.drawEllipse), direct: true },
    { name: 'TArc', sameas: clTEllipse },
    { name: 'TCrown', sameas: clTEllipse },
-   { name: 'TPie', icon: 'img_graph', draw: () => import_more().then(h => h.drawPie), direct: true },
+   { name: 'TPie', icon: 'img_graph', class: () => import('./draw/TPiePainter.mjs').then(h => h.TPiePainter), opt: ';3D' },
    { name: 'TPieSlice', icon: 'img_graph', dummy: true },
    { name: 'TExec', icon: 'img_graph', dummy: true },
    { name: clTLine, icon: 'img_graph', class: () => import('./draw/TLinePainter.mjs').then(h => h.TLinePainter) },

js/modules/draw.mjs

@@ -152,7 +152,7 @@ class TBoxPainter extends ObjectPainter {
       return this;
    }
 
-   /** @summary Draw TLine object */
+   /** @summary Draw TBox object */
    static async draw(dom, obj, opt) {
       const painter = new TBoxPainter(dom, obj, opt);
       return ensureTCanvas(painter, false).then(() => painter.redraw());

js/modules/draw/TBoxPainter.mjs

@@ -1,8 +1,8 @@
-import { settings, gStyle, create, BIT, clTPaveText, kTitle } from '../core.mjs';
+import { settings, create, BIT } from '../core.mjs';
 import { scaleLinear, pointer as d3_pointer } from '../d3.mjs';
 import { DrawOptions, buildSvgCurve, makeTranslate } from '../base/BasePainter.mjs';
 import { ObjectPainter, getElementMainPainter } from '../base/ObjectPainter.mjs';
-import { TPavePainter, kPosTitle } from '../hist/TPavePainter.mjs';
+import { drawObjectTitle } from '../hist/TPavePainter.mjs';
 import { ensureTCanvas } from '../gpad/TCanvasPainter.mjs';
 import { TooltipHandler } from '../gpad/TFramePainter.mjs';
 import { assignContextMenu, kNoReorder } from '../gui/menu.mjs';
@@ -496,9 +496,15 @@ class TGraphPolarPainter extends ObjectPainter {
       return true;
    }
 
+   /** @summary Draw TGraphPolar title */
+   async drawTitle(first_time) {
+      return drawObjectTitle(this, first_time, this._draw_axis, !this.getObject()?.TestBit(kNoTitle));
+   }
+
    /** @summary Redraw TGraphPolar */
-   redraw() {
-      return this.drawGraphPolar().then(() => this.updateTitle());
+   async redraw() {
+      return this.drawGraphPolar()
+                  .then(() => this.drawTitle());
    }
 
    /** @summary Drawing TGraphPolar */
@@ -681,64 +687,6 @@ class TGraphPolarPainter extends ObjectPainter {
       return res;
    }
 
-   /** @summary Only redraw histogram title
-     * @return {Promise} with painter */
-   async updateTitle() {
-      // case when histogram drawn over other histogram (same option)
-      if (!this._draw_axis)
-         return this;
-
-      const tpainter = this.getPadPainter()?.findPainterFor(null, kTitle, clTPaveText),
-            pt = tpainter?.getObject();
-
-      if (!tpainter || !pt)
-         return this;
-
-      const gr = this.getObject(),
-            draw_title = !gr.TestBit(kNoTitle) && (gStyle.fOptTitle > 0);
-
-      pt.Clear();
-      if (draw_title)
-         pt.AddText(gr.fTitle);
-      return tpainter.redraw().then(() => this);
-   }
-
-
-   /** @summary Draw histogram title
-     * @return {Promise} with painter */
-   async drawTitle() {
-      // case when histogram drawn over other histogram (same option)
-      if (!this._draw_axis)
-         return this;
-
-      const gr = this.getObject(),
-            st = gStyle,
-            draw_title = !gr.TestBit(kNoTitle) && (st.fOptTitle > 0),
-            pp = this.getPadPainter();
-
-      let pt = pp.findInPrimitives(kTitle, clTPaveText);
-
-      if (pt) {
-         pt.Clear();
-         if (draw_title)
-            pt.AddText(gr.fTitle);
-         return this;
-      }
-
-      pt = create(clTPaveText);
-      Object.assign(pt, {
-         fName: kTitle, fFillColor: st.fTitleColor, fFillStyle: st.fTitleStyle, fBorderSize: st.fTitleBorderSize,
-         fTextFont: st.fTitleFont, fTextSize: st.fTitleFontSize, fTextColor: st.fTitleTextColor, fTextAlign: 22
-      });
-
-      if (draw_title)
-         pt.AddText(gr.fTitle);
-      return TPavePainter.draw(pp, pt, kPosTitle).then(p => {
-         p?.setSecondaryId(this, kTitle);
-         return this;
-      });
-   }
-
    /** @summary Show tooltip */
    showTooltip(hint) {
       let ttcircle = this.getG()?.selectChild('.tooltip_bin');
@@ -797,7 +745,7 @@ class TGraphPolarPainter extends ObjectPainter {
          gram_painter?.setSecondaryId(painter, 'polargram');
          painter.addToPadPrimitives();
          return painter.drawGraphPolar();
-      }).then(() => painter.drawTitle());
+      }).then(() => painter.drawTitle(true));
    }
 
 } // class TGraphPolarPainter