[jsroot] dev version 24/05/2022

Better support of web-based TCanvas/RCanvas for RBrowser
Let use cookies for style and settings store (not in webgui)

js/changes.md

@@ -1,6 +1,24 @@
 # JSROOT changelog
 
 ## Changes in dev
+1. Let change `settings` and `gStyle` parameters via "Settings" menu of the top hierarchy item
+2. Settings and gStyle can be stored as cookies, automatically read with every next load of website
+3. `settings.OnlyLastCycle` defines if only last object version show in TFile (also as `&lastcycle` URL parameter)
+4. `settings.DarkMode` configures dark mode for GUI and drawings (also as `&dark` URL parameter)
+5. Support new `TGraph2DAsymmErrors` class
+6. Support `gStyle.fOptDate` and `gStyle.fOptFile` (also as `&optdate` and `&optfile` URL parameter)
+7. Support `gStyle.fDateX` and `gStyle.fDateY` used for positioning date and file on canvas
+8. Support `gStyle.fHistTopMargin` (also as `&histmargin=value` URL parameter)
+9. Let save frame, title and stats properties to `gStyle` via correspondent context menus
+
+
+## Changes in 7.0.1
+
+1. Fix problem with irregular axis labels
+2. Correctly scale and tilt large number of axes labels
+
+
+## Changes in 7.0.0
 1. Use ES6 modules for code organization
 2. Rewrite code with ES6 classes; one have to use class syntax to derive from it
 3. Upgrade d3.js to 7.3.0, three.js to r138

js/index.htm

@@ -26,26 +26,30 @@
    items     - object names in the file to display
    opt       - draw option for the item
    opts      - draw options for the items
-   layout    - can be 'simple', 'flex', 'collapsible', 'tabs' or gridNxM where N and M are integer values
+   layout    - can be 'simple', 'flex' or gridNxM where N and M are integer values
    nobrowser - only file item(s) will be displayed, browser will be disabled
    load      - name of JavaScript(s), automatically loaded at the beginning
    mathjax   - use MathJax for Latex output (automatically loaded for TMathText objects)
    palette   - id of default color palette, 51..123 - new ROOT6 palette  (default 57)
    style     - TStyle object itemname or JSON file name
    toolbar   - configure position and orientation of pad toolbar, combine 'right','vert','off'
+   dark      - enables dark mode
 
 Example:
-   https://root.cern/js/latest/?file=../files/hsimple.root&layout=grid2x2&item=[hpx;1,hpxpy;1]&opts=[,colz]
+
+    https://root.cern/js/latest/?file=../files/hsimple.root&layout=grid2x2&item=[hpx;1,hpxpy;1]&opts=[,colz]
 
 Page can be used to open files from other web servers like:
-   https://root.cern/js/latest/?file=https://jsroot.gsi.de/files/hsimple.root
+
+    https://root.cern/js/latest/?file=https://jsroot.gsi.de/files/hsimple.root
 
 But one should be aware about Cross-Origin Request blocking.
 Read https://developer.mozilla.org/en/http_access_control for more details.
 
 To avoid problem at all, one can copy only index.htm on the web server where data files are located.
-And specify full path to the JSRoot.core.js script like
-   <script type="text/javascript" src="https://root.cern/js/latest/scripts/JSRoot.core.js"></script>
+And specify full path to the use module like:
+
+    import { buildGUI } from 'https://root.cern/js/latest/modules/gui.mjs';
 
 If necessary, complete JSROOT can be installed on the web server.
 Project repository: https://github.com/root-project/jsroot.

js/modules/base/FontHandler.mjs

@@ -21,6 +21,7 @@ const root_fonts_aver_width = [0.5778,0.5314,
  */
 
 class FontHandler {
+
    /** @summary constructor */
    constructor(fontIndex, size, scale, name, style, weight) {
       this.name = "Arial";
@@ -77,10 +78,8 @@ class FontHandler {
       if (arg != 'without-size')
          selection.attr("font-size", this.size)
                   .attr("xml:space", "preserve");
-      if (this.weight)
-         selection.attr("font-weight", this.weight);
-      if (this.style)
-         selection.attr("font-style", this.style);
+      selection.attr("font-weight", this.weight || null);
+      selection.attr("font-style", this.style || null);
    }
 
    /** @summary Set font size (optional) */
@@ -131,6 +130,11 @@ class FontHandler {
       return res;
    }
 
+   /** @summary Returns font name */
+   getFontName() {
+      return this.isSymbol || this.name || "none";
+   }
+
 } // class FontHandler
 
 export { FontHandler };

js/modules/base/ObjectPainter.mjs

@@ -126,10 +126,13 @@ class ObjectPainter extends BasePainter {
      * @private */
    setItemName(name, opt, hpainter) {
       super.setItemName(name, opt, hpainter);
-      if (this.no_default_title || (name == "")) return;
+      if (this.no_default_title || !name) return;
       let can = this.getCanvSvg();
       if (!can.empty()) can.select("title").text(name);
                    else this.selectDom().attr("title", name);
+      let cp = this.getCanvPainter();
+      if (cp && (cp === this) || (this.isMainPainter() && (cp === this.getPadPainter())))
+         cp.drawItemNameOnCanvas(name);
    }
 
    /** @summary Store actual this.options together with original string
@@ -517,8 +520,8 @@ class ObjectPainter extends BasePainter {
 
    /** @summary Returns svg element for the frame in current pad
      * @protected */
-   getFrameSvg() {
-      let layer = this.getLayerSvg("primitives_layer");
+   getFrameSvg(pad_name) {
+      let layer = this.getLayerSvg("primitives_layer", pad_name);
       if (layer.empty()) return layer;
       let node = layer.node().firstChild;
       while (node) {
@@ -720,13 +723,16 @@ class ObjectPainter extends BasePainter {
    interactiveRedraw(arg, info, subelem) {
 
       let reason, res;
-      if ((typeof info == "string") && (info.indexOf("exec:") != 0)) reason = info;
+      if ((typeof info == "string") && (info.indexOf("exec:") != 0))
+         reason = info;
+
       if (arg == "pad")
          res = this.redrawPad(reason);
       else if (arg !== false)
          res = this.redraw(reason);
 
-      if (!isPromise(res)) res = Promise.resolve(false);
+      if (!isPromise(res))
+         res = Promise.resolve(false);
 
       return res.then(() => {
          // inform GED that something changes
@@ -1261,7 +1267,7 @@ class ObjectPainter extends BasePainter {
 
       let canvp = this.getCanvPainter();
 
-      if (!this.snapid || !canvp || canvp._readonly || !canvp._websocket)
+      if (!this.snapid || !canvp || canvp?._readonly || !canvp?._websocket)
          return Promise.resolve(menu);
 
       function DoExecMenu(arg) {
@@ -1286,16 +1292,24 @@ class ObjectPainter extends BasePainter {
          if (!execp.args_menu_id) return;
 
           if (!item.fArgs)
-             return execp.submitCanvExec(item.fExec, execp.args_menu_id);
+             if (cp?.v7canvas)
+                return cp.submitExec(execp, item.fExec, kind);
+             else
+                return execp.submitCanvExec(item.fExec, execp.args_menu_id);
 
          item.fClassName = execp.getClassName();
-         if ((execp.args_menu_id.indexOf("#x") > 0) || (execp.args_menu_id.indexOf("#y") > 0) || (execp.args_menu_id.indexOf("#z") > 0)) item.fClassName = "TAxis";
+         if ((execp.args_menu_id.indexOf("#x") > 0) || (execp.args_menu_id.indexOf("#y") > 0) || (execp.args_menu_id.indexOf("#z") > 0))
+            item.fClassName = "TAxis";
 
           menu.showMethodArgsDialog(item).then(args => {
              if (!args) return;
              if (execp.executeMenuCommand(item, args)) return;
+
              let exec = item.fExec.slice(0, item.fExec.length-1) + args + ')';
-             if (cp) cp.sendWebsocket('OBJEXEC:' + execp.args_menu_id + ":" + exec);
+             if (cp?.v7canvas)
+                cp.submitExec(execp, exec, kind);
+             else if (cp)
+                cp.sendWebsocket('OBJEXEC:' + execp.args_menu_id + ":" + exec);
          });
       }
 
@@ -1512,7 +1526,7 @@ function drawRawText(dom, txt /*, opt*/) {
       }
 
       let frame = this.selectDom(),
-         main = frame.select("div");
+          main = frame.select("div");
       if (main.empty())
          main = frame.append("div").attr('style', 'max-width:100%;max-height:100%;overflow:auto');
       main.html(txt);

js/modules/base/RObjectPainter.mjs

@@ -2,7 +2,7 @@ import { FontHandler } from './FontHandler.mjs';
 
 import { ObjectPainter } from './ObjectPainter.mjs';
 
-const kNormal = 1, kLessTraffic = 2, kOffline = 3;
+const kNormal = 1, /* kLessTraffic = 2, */ kOffline = 3;
 
 class RObjectPainter extends ObjectPainter {
 

js/modules/base/TAttFillHandler.mjs

@@ -1,6 +1,8 @@
+import { gStyle } from '../core.mjs';
+
 import { color as d3_color, rgb as d3_rgb, select as d3_select } from '../d3.mjs';
 
-import { getColor } from './colors.mjs';
+import { getColor, findColor } from './colors.mjs';
 
 /**
   * @summary Handle for fill attributes
@@ -95,7 +97,8 @@ class TAttFillHandler {
    verifyDirectChange(painter) {
       if (typeof this.pattern == 'string')
          this.pattern = parseInt(this.pattern);
-      if (!Number.isInteger(this.pattern)) this.pattern = 0;
+      if (!Number.isInteger(this.pattern))
+         this.pattern = 0;
 
       this.change(this.color, this.pattern, painter ? painter.getCanvSvg() : null, true, painter);
    }
@@ -213,20 +216,22 @@ class TAttFillHandler {
             }
 
             let code = this.pattern % 1000,
-               k = code % 10,
-               j = ((code - k) % 100) / 10,
-               i = (code - j * 10 - k) / 100;
+                k = code % 10,
+                j = ((code - k) % 100) / 10,
+                i = (code - j * 10 - k) / 100;
             if (!i) break;
 
-            let sz = i * 12, pos, step, x1, x2, y1, y2, max;  // axis distance between lines
+            let hatches_spacing = Math.round(Math.max(0.5, gStyle.fHatchesSpacing)*2) * 6,
+                sz = i * hatches_spacing, pos, step, x1, x2, y1, y2, max;  // axis distance between lines
 
             w = h = 6 * sz; // we use at least 6 steps
 
             const produce = (dy, swap) => {
                pos = []; step = sz; y1 = 0; max = h;
 
                // reduce step for smaller angles to keep normal distance approx same
-               if (Math.abs(dy) < 3) step = Math.round(sz / 12 * 9);
+               if (Math.abs(dy) < 3)
+                  step = Math.round(sz / 12 * 9);
                if (dy == 0) {
                   step = Math.round(sz / 12 * 8);
                   y1 = step / 2;
@@ -303,7 +308,7 @@ class TAttFillHandler {
          patt.append("svg:path").attr("d", fills2).style("fill", col);
       }
       if (fills) patt.append("svg:path").attr("d", fills).style("fill", this.color);
-      if (lines) patt.append("svg:path").attr("d", lines).style('stroke', this.color).style("stroke-width", 1).style("fill", lfill);
+      if (lines) patt.append("svg:path").attr("d", lines).style('stroke', this.color).style("stroke-width", gStyle.fHatchesLineWidth).style("fill", lfill);
 
       return true;
    }
@@ -321,6 +326,19 @@ class TAttFillHandler {
         .call(sample.func);
    }
 
+   /** @summary Save fill attributes to style
+     * @private */
+   saveToStyle(name_color, name_pattern) {
+      if (name_color) {
+         let indx = this.colorindx ?? findColor(this.color);
+         if (indx >= 0) gStyle[name_color] = indx;
+      }
+      if (name_pattern)
+         gStyle[name_pattern] = this.pattern;
+   }
+
+
+
 } // class TAttFillHandler
 
 export { TAttFillHandler };

js/modules/base/TAttLineHandler.mjs

@@ -1,6 +1,8 @@
 import { select as d3_select } from '../d3.mjs';
 
-import { getColor } from './colors.mjs';
+import { gStyle } from '../core.mjs';
+
+import { getColor, findColor } from './colors.mjs';
 
 const root_line_styles = [
       "", "", "3,3", "1,2",
@@ -31,12 +33,14 @@ class TAttLineHandler {
      * @param {number} args.width - line width */
    setArgs(args) {
       if (args.attr) {
-         args.color = args.color0 || (args.painter ? args.painter.getColor(args.attr.fLineColor) : getColor(args.attr.fLineColor));
+         this.color_index = args.attr.fLineColor;
+         args.color = args.color0 || (args.painter ? args.painter.getColor(this.color_index) : getColor(this.color_index));
          if (args.width === undefined) args.width = args.attr.fLineWidth;
          if (args.style === undefined) args.style = args.attr.fLineStyle;
       } else if (typeof args.color == 'string') {
          if ((args.color !== 'none') && !args.width) args.width = 1;
       } else if (typeof args.color == 'number') {
+         this.color_index = args.color;
          args.color = args.painter ? args.painter.getColor(args.color) : getColor(args.color);
       }
 
@@ -116,8 +120,13 @@ class TAttLineHandler {
 
    /** @summary Change line attributes */
    change(color, width, style) {
-      if (color !== undefined) this.color = color;
-      if (width !== undefined) this.width = width;
+      if (color !== undefined) {
+         if (this.color !== color)
+            delete this.color_index;
+         this.color = color;
+      }
+      if (width !== undefined)
+         this.width = width;
       if (style !== undefined) {
          this.style = style;
          this.pattern = root_line_styles[this.style] || null;
@@ -133,6 +142,18 @@ class TAttLineHandler {
          .call(this.func);
    }
 
+   saveToStyle(name_color, name_width, name_style) {
+      if (name_color) {
+         let indx = (this.color_index !== undefined) ? this.color_index : findColor(this.color);
+         if (indx >= 0)
+            gStyle[name_color] = indx;
+      }
+      if (name_width)
+        gStyle[name_width] = this.width;
+      if (name_style)
+        gStyle[name_style] = this.style;
+   }
+
 } // class TAttLineHandler
 
 /** @summary Get svg string for specified line style

js/modules/base/colors.mjs

@@ -113,6 +113,17 @@ function getColor(indx) {
    return gbl_colors_list[indx];
 }
 
+/** @summary Search for specified color in the list of colors
+  * @returns Color index or -1 if fails
+  * @private */
+function findColor(name) {
+   if (!name) return -1;
+   for (let indx = 0; indx < gbl_colors_list.length; ++indx)
+      if (gbl_colors_list[indx] == name)
+         return indx;
+   return -1;
+}
+
 /** @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
@@ -158,6 +169,6 @@ class ColorPalette {
 
 createRootColors();
 
-export { ColorPalette, getColor, addColor, adoptRootColors, getRootColors, extendRootColors, getRGBfromTColor, createRootColors, toHex };
+export { ColorPalette, getColor, findColor, addColor, adoptRootColors, getRootColors, extendRootColors, getRGBfromTColor, createRootColors, toHex };
 
 

js/modules/base/latex.mjs

@@ -191,7 +191,7 @@ const extra_symbols_width = {945:1002,946:996,967:917,948:953,949:834,966:1149,9
 
 /** @ummary Calculate approximate labels width
   * @private */
-const approximateLabelWidth = (label, font, fsize) => {
+function approximateLabelWidth(label, font, fsize) {
    let len = label.length,
        symbol_width = (fsize || font.size) * font.aver_width;
    if (font.isMonospace())
@@ -207,7 +207,7 @@ const approximateLabelWidth = (label, font, fsize) => {
    }
 
    return sum/1000*symbol_width;
-};
+}
 
 /** @summary array defines features supported by latex parser, used by both old and new parsers
   * @private */