[jsroot] newer three.js, many fixes

js/changes.md

@@ -12,6 +12,19 @@
 9. Fully integrate svg2pdf.js into jsroot repo
 10. Synchronize X/Y range selection with native ROOT
 11. Proper handle attributes from TH2Poly bins, support "p" for markers drawing
+12. Correctly scale size of axis ticks - take into account NDC axis length
+13. Remove source_dir output in node.js #296
+14. Set name and userData in geometry `build()` function #303
+15. Draw histogram title afterwards - place in front of stats box
+16. Upgrade three.js r158 -> r162, last with WebGL1 support
+17. Split extras into three_addons.mjs, provide jsroot geometry build without three.js
+18. Fix - correctly draw only grids with AXIG draw option
+19. Fix - let read object from TFile with empty name
+20. Fix - graph drawing fix custom labels on X axis #297
+21. Fix - draw at least line for TGraphErrors ROOT-8131
+22. Fix - log scales on TH3 drawings #306
+23. Fix - preserve attributes and draw options when call drawingJSON() #307
+24. Fix - draw geometry top node volume if all childs not visible #308
 
 
 ## Changes in 7.6.0

js/modules/base/TAttTextHandler.mjs

@@ -44,6 +44,7 @@ class TAttTextHandler {
       this.align = args.align;
       this.angle = args.angle;
 
+      this.can_rotate = args.can_rotate ?? true;
       this.angle_used = false;
       this.align_used = false;
    }
@@ -81,7 +82,7 @@ class TAttTextHandler {
       this.align_used = !arg.noalign && !arg.align;
       if (this.align_used)
          arg.align = this.align;
-      this.angle_used = !arg.norotate;
+      this.angle_used = !arg.norotate && this.can_rotate;
       if (this.angle_used && this.angle)
          arg.rotate = -this.angle; // SVG rotation angle has different sign
       arg.color = this.color || 'black';

js/modules/core.mjs

@@ -4,7 +4,7 @@ const version_id = 'dev',
 
 /** @summary version date
   * @desc Release date in format day/month/year like '14/04/2022' */
-version_date = '18/03/2024',
+version_date = '17/05/2024',
 
 /** @summary version id and date
   * @desc Produced by concatenation of {@link version_id} and {@link version_date}
@@ -34,9 +34,11 @@ if (_src && isStr(_src)) {
    const pos = _src.indexOf('modules/core.mjs');
    if (pos >= 0) {
       source_dir = _src.slice(0, pos);
-      console.log(`Set jsroot source_dir to ${source_dir}, ${version}`);
+      if (!nodejs)
+         console.log(`Set jsroot source_dir to ${source_dir}, ${version}`);
    } else {
-      console.log(`jsroot bundle, ${version}`);
+      if (!nodejs)
+         console.log(`jsroot bundle, ${version}`);
       internals.ignore_v6 = true;
    }
 }
@@ -1041,13 +1043,13 @@ const prROOT = 'ROOT.', clTObject = 'TObject', clTNamed = 'TNamed', clTString =
       clTText = 'TText', clTLatex = 'TLatex', clTMathText = 'TMathText', clTAnnotation = 'TAnnotation',
       clTColor = 'TColor', clTLine = 'TLine', clTBox = 'TBox', clTPolyLine = 'TPolyLine',
       clTPolyLine3D = 'TPolyLine3D', clTPolyMarker3D = 'TPolyMarker3D',
-      clTAttPad = 'TAttPad', clTPad = 'TPad', clTCanvas = 'TCanvas', clTAttCanvas = 'TAttCanvas',
+      clTAttPad = 'TAttPad', clTPad = 'TPad', clTCanvas = 'TCanvas', clTFrame = 'TFrame', clTAttCanvas = 'TAttCanvas',
       clTGaxis = 'TGaxis', clTAttAxis = 'TAttAxis', clTAxis = 'TAxis', clTStyle = 'TStyle',
       clTH1 = 'TH1', clTH1I = 'TH1I', clTH1D = 'TH1D', clTH2 = 'TH2', clTH2I = 'TH2I', clTH2F = 'TH2F', clTH3 = 'TH3',
       clTF1 = 'TF1', clTF2 = 'TF2', clTF3 = 'TF3', clTProfile = 'TProfile', clTProfile2D = 'TProfile2D', clTProfile3D = 'TProfile3D',
       clTGeoVolume = 'TGeoVolume', clTGeoNode = 'TGeoNode', clTGeoNodeMatrix = 'TGeoNodeMatrix',
       nsREX = 'ROOT::Experimental::',
-      kNoZoom = -1111, kNoStats = BIT(9), kInspect = 'inspect';
+      kNoZoom = -1111, kNoStats = BIT(9), kInspect = 'inspect', kTitle = 'title';
 
 
 /** @summary Create some ROOT classes
@@ -1515,7 +1517,10 @@ function getMethods(typename, obj) {
       m.AddText = function(txt) {
          const line = create(clTLatex);
          line.fTitle = txt;
-         line.fTextAlign = this.fTextAlign;
+         line.fTextAlign = 0;
+         line.fTextColor = 0;
+         line.fTextFont = 0;
+         line.fTextSize = 0;
          this.fLines.Add(line);
       };
       m.Clear = function() {
@@ -1871,12 +1876,12 @@ export { version_id, version_date, version, source_dir, isNodeJs, isBatchMode, s
          clTAttLine, clTAttFill, clTAttMarker, clTAttText,
          clTPave, clTPaveText, clTPavesText, clTPaveStats, clTPaveLabel, clTPaveClass, clTDiamond,
          clTLegend, clTLegendEntry, clTPaletteAxis, clTImagePalette, clTText, clTLatex, clTMathText, clTAnnotation, clTMultiGraph,
-         clTColor, clTLine, clTBox, clTPolyLine, clTPad, clTCanvas, clTAttCanvas, clTGaxis,
+         clTColor, clTLine, clTBox, clTPolyLine, clTPad, clTCanvas, clTFrame, clTAttCanvas, clTGaxis,
          clTAxis, clTStyle, clTH1, clTH1I, clTH1D, clTH2, clTH2I, clTH2F, clTH3, clTF1, clTF2, clTF3,
          clTProfile, clTProfile2D, clTProfile3D, clTHStack,
          clTGraph, clTGraph2DErrors, clTGraph2DAsymmErrors,
          clTGraphPolar, clTGraphPolargram, clTGraphTime, clTCutG,
-         clTPolyLine3D, clTPolyMarker3D, clTGeoVolume, clTGeoNode, clTGeoNodeMatrix, nsREX, kNoZoom, kNoStats, kInspect,
+         clTPolyLine3D, clTPolyMarker3D, clTGeoVolume, clTGeoNode, clTGeoNodeMatrix, nsREX, kNoZoom, kNoStats, kInspect, kTitle,
          isArrayProto, getDocument, BIT, clone, addMethods, parse, parseMulti, toJSON,
          decodeUrl, findFunction, createHttpRequest, httpRequest, loadScript, injectCode,
          create, createHistogram, setHistogramTitle, createTPolyLine, createTGraph, createTHStack, createTMultiGraph,

js/modules/d3.mjs

@@ -1,5 +1,5 @@
-// https://d3js.org v7.8.4 Copyright 2010-2021 Mike Bostock
-var version = "7.8.4";
+// https://d3js.org v7.9.0 Copyright 2010-2021 Mike Bostock
+var version = "7.9.0";
 
 function define(constructor, factory, prototype) {
   constructor.prototype = factory.prototype = prototype;

js/modules/draw.mjs

@@ -5,7 +5,7 @@ import { loadScript, findFunction, internals, getPromise, isNodeJs, isObject, is
          clTObjString, clTFile, clTList, clTHashList, clTMap, clTObjArray, clTClonesArray,
          clTPave, clTPaveText, clTPavesText, clTPaveStats, clTPaveLabel, clTPaveClass, clTDiamond, clTLegend, clTPaletteAxis,
          clTText, clTLine, clTBox, clTLatex, clTMathText, clTAnnotation, clTMultiGraph, clTH2, clTF1, clTF2, clTF3, clTH3,
-         clTProfile, clTProfile2D, clTProfile3D,
+         clTProfile, clTProfile2D, clTProfile3D, clTFrame,
          clTColor, clTHStack, clTGraph, clTGraph2DErrors, clTGraph2DAsymmErrors,
          clTGraphPolar, clTGraphPolargram, clTGraphTime, clTCutG, clTPolyLine, clTPolyLine3D, clTPolyMarker3D,
          clTPad, clTStyle, clTCanvas, clTGaxis, clTGeoVolume, kInspect, nsREX, atob_func } from './core.mjs';
@@ -43,7 +43,7 @@ drawFuncs = { lst: [
    { name: clTPad, icon: 'img_canvas', func: TPadPainter.draw, opt: ';grid;gridx;gridy;tick;tickx;ticky;log;logx;logy;logz', expand_item: fPrimitives, noappend: true },
    { name: 'TSlider', icon: 'img_canvas', func: TPadPainter.draw },
    { name: clTButton, icon: 'img_canvas', func: TPadPainter.draw },
-   { name: 'TFrame', icon: 'img_frame', draw: () => import_canvas().then(h => h.drawTFrame) },
+   { name: clTFrame, icon: 'img_frame', draw: () => import_canvas().then(h => h.drawTFrame) },
    { name: clTPave, icon: 'img_pavetext', class: () => import('./hist/TPavePainter.mjs').then(h => h.TPavePainter) },
    { name: clTPaveText, sameas: clTPave },
    { name: clTPavesText, sameas: clTPave },

js/modules/geom/TGeoPainter.mjs

@@ -6,10 +6,10 @@ import { REVISION, DoubleSide, FrontSide,
          Color, Vector2, Vector3, Matrix4, Object3D, Box3, Group, Plane, PlaneHelper,
          Euler, Quaternion, Mesh, InstancedMesh, MeshLambertMaterial, MeshBasicMaterial,
          LineSegments, LineBasicMaterial, LineDashedMaterial, BufferAttribute,
-         TextGeometry, BufferGeometry, BoxGeometry, CircleGeometry, SphereGeometry,
+         BufferGeometry, BoxGeometry, CircleGeometry, SphereGeometry,
          Scene, Fog, OrthographicCamera, PerspectiveCamera,
-         DirectionalLight, AmbientLight, HemisphereLight,
-         EffectComposer, RenderPass, UnrealBloomPass } from '../three.mjs';
+         DirectionalLight, AmbientLight, HemisphereLight } from '../three.mjs';
+import { EffectComposer, RenderPass, UnrealBloomPass, TextGeometry } from '../three_addons.mjs';
 import { showProgress, injectStyle, ToolbarIcons } from '../gui/utils.mjs';
 import { GUI } from '../gui/lil-gui.mjs';
 import { assign3DHandler, disposeThreejsObject, createOrbitControl,
@@ -2112,7 +2112,7 @@ class TGeoPainter extends ObjectPainter {
 
    /** @summary Add orbit control */
    addOrbitControls() {
-      if (this._controls || !this._webgl || this.isBatchMode() || this.superimpose) return;
+      if (this._controls || !this._webgl || this.isBatchMode() || this.superimpose || isNodeJs()) return;
 
       if (!this.getCanvPainter())
          this.setTooltipAllowed(settings.Tooltip);
@@ -5370,11 +5370,11 @@ class TGeoPainter extends ObjectPainter {
          shape = obj; obj = null;
       } else if ((obj._typename === clTGeoVolumeAssembly) || (obj._typename === clTGeoVolume))
          shape = obj.fShape;
-       else if ((obj._typename === clTEveGeoShapeExtract) || (obj._typename === clREveGeoShapeExtract)) {
+      else if ((obj._typename === clTEveGeoShapeExtract) || (obj._typename === clREveGeoShapeExtract)) {
          shape = obj.fShape; is_eve = true;
       } else if (obj._typename === clTGeoManager)
          shape = obj.fMasterVolume.fShape;
-       else if (obj._typename === clTGeoOverlap) {
+      else if (obj._typename === clTGeoOverlap) {
          extras = obj.fMarker; extras_path = '<prnt>/Marker';
          obj = buildOverlapVolume(obj);
          if (!opt) opt = 'wire';
@@ -5504,7 +5504,7 @@ function provideMenu(menu, item, hpainter) {
 
    menu.add('separator');
 
-   const ScanEveVisible = (obj, arg, skip_this) => {
+   const scanEveVisible = (obj, arg, skip_this) => {
       if (!arg) arg = { visible: 0, hidden: 0 };
 
       if (!skip_this) {
@@ -5518,17 +5518,17 @@ function provideMenu(menu, item, hpainter) {
 
       if (obj.fElements) {
          for (let n = 0; n < obj.fElements.arr.length; ++n)
-            ScanEveVisible(obj.fElements.arr[n], arg, false);
+            scanEveVisible(obj.fElements.arr[n], arg, false);
       }
 
       return arg;
-   }, ToggleEveVisibility = arg => {
+   }, toggleEveVisibility = arg => {
       if (arg === 'self') {
          obj.fRnrSelf = !obj.fRnrSelf;
          item._icon = item._icon.split(' ')[0] + provideVisStyle(obj);
          hpainter.updateTreeNode(item);
       } else {
-         ScanEveVisible(obj, { assign: (arg === 'true') }, true);
+         scanEveVisible(obj, { assign: (arg === 'true') }, true);
          hpainter.forEachItem(m => {
             // update all child items
             if (m._geoobj && m._icon) {
@@ -5539,7 +5539,7 @@ function provideMenu(menu, item, hpainter) {
       }
 
       findItemWithPainter(item, 'testGeomChanges');
-   }, ToggleMenuBit = arg => {
+   }, toggleMenuBit = arg => {
       toggleGeoBit(vol, arg);
       const newname = item._icon.split(' ')[0] + provideVisStyle(vol);
       hpainter.forEachItem(m => {
@@ -5552,10 +5552,8 @@ function provideMenu(menu, item, hpainter) {
 
       hpainter.updateTreeNode(item);
       findItemWithPainter(item, 'testGeomChanges');
-   },
-
-    drawitem = findItemWithPainter(item),
-       fullname = drawitem ? hpainter.itemFullName(item, drawitem) : '';
+   }, drawitem = findItemWithPainter(item),
+      fullname = drawitem ? hpainter.itemFullName(item, drawitem) : '';
 
    if ((item._geoobj._typename.indexOf(clTGeoNode) === 0) && drawitem) {
       menu.add('Focus', () => {
@@ -5565,17 +5563,16 @@ function provideMenu(menu, item, hpainter) {
    }
 
    if (iseve) {
-      menu.addchk(obj.fRnrSelf, 'Visible', 'self', ToggleEveVisibility);
-      const res = ScanEveVisible(obj, undefined, true);
+      menu.addchk(obj.fRnrSelf, 'Visible', 'self', toggleEveVisibility);
+      const res = scanEveVisible(obj, undefined, true);
       if (res.hidden + res.visible > 0)
-         menu.addchk((res.hidden === 0), 'Daughters', res.hidden !== 0 ? 'true' : 'false', ToggleEveVisibility);
+         menu.addchk((res.hidden === 0), 'Daughters', res.hidden !== 0 ? 'true' : 'false', toggleEveVisibility);
    } else {
       const stack = drawitem?._painter?._clones?.findStackByName(fullname),
           phys_vis = stack ? drawitem._painter._clones.getPhysNodeVisibility(stack) : null,
           is_visible = testGeoBit(vol, geoBITS.kVisThis);
 
-      menu.addchk(testGeoBit(vol, geoBITS.kVisNone), 'Invisible',
-            geoBITS.kVisNone, ToggleMenuBit);
+      menu.addchk(testGeoBit(vol, geoBITS.kVisNone), 'Invisible', geoBITS.kVisNone, toggleMenuBit);
       if (stack) {
          const changePhysVis = arg => {
             drawitem._painter._clones.setPhysNodeVisibility(stack, (arg === 'off') ? false : arg);
@@ -5591,9 +5588,9 @@ function provideMenu(menu, item, hpainter) {
       }
 
       menu.addchk(is_visible, 'Logical vis',
-            geoBITS.kVisThis, ToggleMenuBit, 'Logical node visibility - all instances');
+            geoBITS.kVisThis, toggleMenuBit, 'Logical node visibility - all instances');
       menu.addchk(testGeoBit(vol, geoBITS.kVisDaughters), 'Daughters',
-            geoBITS.kVisDaughters, ToggleMenuBit, 'Logical node daugthers visibility');
+            geoBITS.kVisDaughters, toggleMenuBit, 'Logical node daugthers visibility');
    }
 
    return true;
@@ -5788,6 +5785,8 @@ function drawAxis3D() {
   * @param {boolean} [opt.wireframe=false] - show wireframe for created shapes
   * @param {boolean} [opt.transparency=0] - make nodes transparent
   * @param {boolean} [opt.dflt_colors=false] - use default ROOT colors
+  * @param {boolean} [opt.set_names=true] - set names to all Object3D instances
+  * @param {boolean} [opt.set_origin=false] - set TGeoNode/TGeoVolume as Object3D.userData
   * @return {object} Object3D with created model
   * @example
   * import { build } from 'https://root.cern/js/latest/modules/geom/TGeoPainter.mjs';
@@ -5893,6 +5892,8 @@ function build(obj, opt) {
 
    if (!opt.material_kind)
       opt.material_kind = 'lambert';
+   if (opt.set_names === undefined)
+      opt.set_names = true;
 
    clones.setConfig(opt);
 
@@ -5915,14 +5916,11 @@ function build(obj, opt) {
 
       const shape = entry.server_shape || shapes[entry.shapeid];
       if (!shape.ready) {
-         console.warn('shape marked as not ready when should');
+         console.warn('shape marked as not ready when it should');
          break;
       }
 
-      const mesh = clones.createEntryMesh(opt, toplevel, entry, shape, colors);
-
-      if (mesh)
-         mesh.name = clones.getNodeName(entry.nodeid);
+      clones.createEntryMesh(opt, toplevel, entry, shape, colors);
    }
 
    return toplevel;