[jsroot] latest code with three.js

js/changes.md

@@ -9,14 +9,27 @@
 6. Let configure custom storage prefix with `&storage_prefix=name` URL #290
 7. Let customize URL for "Show in new tab" menu command
 8. Support both new and old TRatioPlot drawings
-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. Fix - correctly draw only grids with AXIG draw option
-15. Fix - let read object from TFile with empty name
-16. Fix - graph drawing fix custom labels on X axis #297
+13. Set name and userData in geometry `build()` function #303
+14. Draw histogram title afterwards - place in front of stats box
+15. Upgrade three.js r158 -> r162, last with WebGL1 support
+16. Split extras into three_addons.mjs, provide jsroot geometry build without three.js
+17. Fix - correctly draw only grids with AXIG draw option
+18. Fix - log scales on TH3 drawings #306
+19. Fix - draw geometry top node volume if all childs not visible #308
+
+
+## Changes in 7.6.1
+1. Remove source_dir output in node.js #296
+2. Fully integrate svg2pdf.js into jsroot repo
+3. Fix - support plain TRI option for TGraph2D
+4. Fix - let read object from ROOT file with empty name
+5. Fix - graph drawing fix custom labels on X axis #297
+6. Fix - draw at least line for TGraphErrors ROOT-8131
+7. Fix - preserve attributes and draw options when call drawingJSON() #307
+8. Fix - menu for text align selection typo
 
 
 ## Changes in 7.6.0

js/index.htm

@@ -33,6 +33,11 @@
  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'
+ optdate - plot specified date on the canvas, 1 - current time, 2 - file creation date, 3 - file modification date
+ optfile - plot file name on the canvas, 1 - file name, 2 - full file URL, 3 - object item name
+ datex - X position of date
+ datey - Y position of date
+ opttitle - plot item name on the canvas
  dark - enables dark mode
 
 Example:

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

@@ -1,10 +1,10 @@
 /** @summary version id
  * @desc For the JSROOT release the string in format 'major.minor.patch' like '7.0.0' */
-const version_id = 'ROOT 6.32',
+const version_id = 'dev',
 
 /** @summary version date
  * @desc Release date in format day/month/year like '14/04/2022' */
-version_date = '26/04/2024',
+version_date = '17/05/2024',
 
 /** @summary version id and date
  * @desc Produced by concatenation of {@link version_id} and {@link version_date}
@@ -1043,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
@@ -1517,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() {
@@ -1873,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/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;