geom/TGeoPainter.mjs

  1. import { httpRequest, browser, source_dir, settings, internals, constants, create, clone,
  2.          findFunction, isBatchMode, isNodeJs, getDocument, isObject, isFunc, isStr, postponePromise, getPromise,
  3.          prROOT, clTNamed, clTList, clTAxis, clTObjArray, clTPolyMarker3D, clTPolyLine3D,
  4.          clTGeoVolume, clTGeoNode, clTGeoNodeMatrix, nsREX, nsSVG, kInspect } from '../core.mjs';
  5. import { showProgress, injectStyle, ToolbarIcons } from '../gui/utils.mjs';
  6. import { GUI } from '../gui/lil-gui.mjs';
  7. import { THREE, assign3DHandler, disposeThreejsObject, createOrbitControl,
  8.          createLineSegments, InteractiveControl, PointsCreator, importThreeJs,
  9.          createRender3D, beforeRender3D, afterRender3D, getRender3DKind, cleanupRender3D,
  10.          createTextGeometry } from '../base/base3d.mjs';
  11. import { getColor, getRootColors } from '../base/colors.mjs';
  12. import { DrawOptions } from '../base/BasePainter.mjs';
  13. import { ObjectPainter } from '../base/ObjectPainter.mjs';
  14. import { createMenu, closeMenu } from '../gui/menu.mjs';
  15. import { TAxisPainter } from '../gpad/TAxisPainter.mjs';
  16. import { ensureTCanvas } from '../gpad/TCanvasPainter.mjs';
  17. import { kindGeo, kindEve,
  18.          clTGeoBBox, clTGeoCompositeShape,
  19.          geoCfg, geoBITS, ClonedNodes, testGeoBit, setGeoBit, toggleGeoBit, setInvisibleAll,
  20.          countNumShapes, getNodeKind, produceRenderOrder, createServerGeometry,
  21.          projectGeometry, countGeometryFaces, createMaterial, createFrustum, createProjectionMatrix,
  22.          getBoundingBox, provideObjectInfo, isSameStack, checkDuplicates, getObjectName, cleanupShape, getShapeIcon } from './geobase.mjs';
  25. const _ENTIRE_SCENE = 0, _BLOOM_SCENE = 1,
  26.       clTGeoManager = 'TGeoManager', clTEveGeoShapeExtract = 'TEveGeoShapeExtract',
  27.       clTGeoOverlap = 'TGeoOverlap', clTGeoVolumeAssembly = 'TGeoVolumeAssembly',
  28.       clTEveTrack = 'TEveTrack', clTEvePointSet = 'TEvePointSet',
  29.       clREveGeoShapeExtract = `${nsREX}REveGeoShapeExtract`;
  31. /** @summary Function used to build hierarchy of elements of overlap object
  32.   * @private */
  33. function buildOverlapVolume(overlap) {
  34.    const vol = create(clTGeoVolume);
  36.    setGeoBit(vol, geoBITS.kVisDaughters, true);
  37.    vol.$geoh = true; // workaround, let know browser that we are in volumes hierarchy
  38.    vol.fName = '';
  40.    const node1 = create(clTGeoNodeMatrix);
  41.    node1.fName = overlap.fVolume1.fName || 'Overlap1';
  42.    node1.fMatrix = overlap.fMatrix1;
  43.    node1.fVolume = overlap.fVolume1;
  44.    // node1.fVolume.fLineColor = 2; // color assigned with ctrl.split_colors
  46.    const node2 = create(clTGeoNodeMatrix);
  47.    node2.fName = overlap.fVolume2.fName || 'Overlap2';
  48.    node2.fMatrix = overlap.fMatrix2;
  49.    node2.fVolume = overlap.fVolume2;
  50.    // node2.fVolume.fLineColor = 3;  // color assigned with ctrl.split_colors
  52.    vol.fNodes = create(clTList);
  53.    vol.fNodes.Add(node1);
  54.    vol.fNodes.Add(node2);
  56.    return vol;
  57. }
  59. let $comp_col_cnt = 0;
  61. /** @summary Function used to build hierarchy of elements of composite shapes
  62.   * @private */
  63. function buildCompositeVolume(comp, maxlvl, side) {
  64.    if (maxlvl === undefined) maxlvl = 1;
  65.    if (!side) {
  66.       $comp_col_cnt = 0;
  67.       side = '';
  68.    }
  70.    const vol = create(clTGeoVolume);
  71.    setGeoBit(vol, geoBITS.kVisThis, true);
  72.    setGeoBit(vol, geoBITS.kVisDaughters, true);
  74.    if ((side && (comp._typename !== clTGeoCompositeShape)) || (maxlvl <= 0)) {
  75.       vol.fName = side;
  76.       vol.fLineColor = ($comp_col_cnt++ % 8) + 2;
  77.       vol.fShape = comp;
  78.       return vol;
  79.    }
  81.    if (side) side += '/';
  82.    vol.$geoh = true; // workaround, let know browser that we are in volumes hierarchy
  83.    vol.fName = '';
  85.    const node1 = create(clTGeoNodeMatrix);
  86.    setGeoBit(node1, geoBITS.kVisThis, true);
  87.    setGeoBit(node1, geoBITS.kVisDaughters, true);
  88.    node1.fName = 'Left';
  89.    node1.fMatrix = comp.fNode.fLeftMat;
  90.    node1.fVolume = buildCompositeVolume(comp.fNode.fLeft, maxlvl-1, side + 'Left');
  92.    const node2 = create(clTGeoNodeMatrix);
  93.    setGeoBit(node2, geoBITS.kVisThis, true);
  94.    setGeoBit(node2, geoBITS.kVisDaughters, true);
  95.    node2.fName = 'Right';
  96.    node2.fMatrix = comp.fNode.fRightMat;
  97.    node2.fVolume = buildCompositeVolume(comp.fNode.fRight, maxlvl-1, side + 'Right');
  99.    vol.fNodes = create(clTList);
  100.    vol.fNodes.Add(node1);
  101.    vol.fNodes.Add(node2);
  103.    if (!side) $comp_col_cnt = 0;
  105.    return vol;
  106. }
  109. /** @summary Provides 3D rendering configuration from histogram painter
  110.   * @return {Object} with scene, renderer and other attributes
  111.   * @private */
  112. function getHistPainter3DCfg(painter) {
  113.    const main = painter?.getFramePainter();
  114.    if (painter?.mode3d && isFunc(main?.create3DScene) && main?.renderer) {
  115.       let scale_x = 1, scale_y = 1, scale_z = 1,
  116.           offset_x = 0, offset_y = 0, offset_z = 0;
  118.       if (main.scale_xmax > main.scale_xmin) {
  119.          scale_x = 2 * main.size_x3d/(main.scale_xmax - main.scale_xmin);
  120.          offset_x = (main.scale_xmax + main.scale_xmin) / 2 * scale_x;
  121.       }
  123.       if (main.scale_ymax > main.scale_ymin) {
  124.          scale_y = 2 * main.size_y3d/(main.scale_ymax - main.scale_ymin);
  125.          offset_y = (main.scale_ymax + main.scale_ymin) / 2 * scale_y;
  126.       }
  128.       if (main.scale_zmax > main.scale_zmin) {
  129.          scale_z = 2 * main.size_z3d/(main.scale_zmax - main.scale_zmin);
  130.          offset_z = (main.scale_zmax + main.scale_zmin) / 2 * scale_z - main.size_z3d;
  131.       }
  133.       return {
  134.          webgl: main.webgl,
  135.          scene: main.scene,
  136.          scene_width: main.scene_width,
  137.          scene_height: main.scene_height,
  138.          toplevel: main.toplevel,
  139.          renderer: main.renderer,
  140.          camera: main.camera,
  141.          scale_x, scale_y, scale_z,
  142.          offset_x, offset_y, offset_z
  143.       };
  144.   }
  145. }
  148. /** @summary find item with geometry painter
  149.   * @private */
  150. function findItemWithGeoPainter(hitem, test_changes) {
  151.    while (hitem) {
  152.       if (isFunc(hitem._painter?.testGeomChanges)) {
  153.          if (test_changes)
  154.             hitem._painter.testGeomChanges();
  155.          return hitem;
  156.       }
  157.       hitem = hitem._parent;
  158.    }
  159.    return null;
  160. }
  162. /** @summary provide css style for geo object
  163.   * @private */
  164. function provideVisStyle(obj) {
  165.    if ((obj._typename === clTEveGeoShapeExtract) || (obj._typename === clREveGeoShapeExtract))
  166.       return obj.fRnrSelf ? ' geovis_this' : '';
  168.    const vis = !testGeoBit(obj, geoBITS.kVisNone) && testGeoBit(obj, geoBITS.kVisThis);
  169.    let chld = testGeoBit(obj, geoBITS.kVisDaughters);
  171.    if (chld && !obj.fNodes?.arr?.length)
  172.       chld = false;
  174.    if (vis && chld)
  175.       return ' geovis_all';
  176.    if (vis)
  177.       return ' geovis_this';
  178.    if (chld)
  179.       return ' geovis_daughters';
  180.    return '';
  181. }
  184. /** @summary update icons
  185.   * @private */
  186. function updateBrowserIcons(obj, hpainter) {
  187.    if (!obj || !hpainter) return;
  189.    hpainter.forEachItem(m => {
  190.       // update all items with that volume
  191.       if ((obj === m._volume) || (obj === m._geoobj)) {
  192.          m._icon = m._icon.split(' ')[0] + provideVisStyle(obj);
  193.          hpainter.updateTreeNode(m);
  194.       }
  195.    });
  196. }
  199. /** @summary Return stack for the item from list of intersection
  200.   * @private */
  201. function getIntersectStack(item) {
  202.    const obj = item?.object;
  203.    if (!obj) return null;
  204.    if (obj.stack)
  205.       return obj.stack;
  206.    if (obj.stacks && item.instanceId !== undefined && item.instanceId < obj.stacks.length)
  207.       return obj.stacks[item.instanceId];
  208. }
  210. /**
  211.   * @summary Toolbar for geometry painter
  212.   *
  213.   * @private
  214.   */
  216. class Toolbar {
  218.    /** @summary constructor */
  219.    constructor(container, bright, buttons) {
  220.       this.bright = bright;
  221.       this.buttons = buttons;
  222.       this.element = container.append('div').attr('style', 'float: left; box-sizing: border-box; position: relative; bottom: 23px; vertical-align: middle; padding-left: 5px');
  223.    }
  225.    /** @summary add buttons */
  226.    createButtons() {
  227.       const buttonsNames = [];
  229.       this.buttons.forEach(buttonConfig => {
  230.          const buttonName = buttonConfig.name;
  231.          if (!buttonName)
  232.             throw new Error('must provide button name in button config');
  233.          if (buttonsNames.indexOf(buttonName) !== -1)
  234.             throw new Error(`button name ${buttonName} is taken`);
  236.          buttonsNames.push(buttonName);
  238.          const title = buttonConfig.title || buttonConfig.name;
  240.          if (!isFunc(buttonConfig.click))
  241.             throw new Error('must provide button click() function in button config');
  243.          ToolbarIcons.createSVG(this.element, ToolbarIcons[buttonConfig.icon], 16, title, this.bright)
  244.               .on('click', buttonConfig.click)
  245.               .style('position', 'relative')
  246.               .style('padding', '3px 1px');
  247.       });
  248.    }
  250.    /** @summary change brightness */
  251.    changeBrightness(bright) {
  252.       if (this.bright === bright) return;
  253.       this.element.selectAll('*').remove();
  254.       this.bright = bright;
  255.       this.createButtons();
  256.    }
  258.    /** @summary cleanup toolbar */
  259.    cleanup() {
  260.       this.element?.remove();
  261.       delete this.element;
  262.    }
  264. } // class ToolBar
  267. /**
  268.   * @summary geometry drawing control
  269.   *
  270.   * @private
  271.   */
  273. class GeoDrawingControl extends InteractiveControl {
  275.    constructor(mesh, bloom) {
  276.       super();
  277.       this.mesh = mesh?.material ? mesh : null;
  278.       this.bloom = bloom;
  279.    }
  281.    /** @summary set highlight */
  282.    setHighlight(col, indx) {
  283.       return this.drawSpecial(col, indx);
  284.    }
  286.    /** @summary draw special */
  287.    drawSpecial(col, indx) {
  288.       const c = this.mesh;
  289.       if (!c?.material) return;
  291.       if (c.isInstancedMesh) {
  292.          if (c._highlight_mesh) {
  293.             c.remove(c._highlight_mesh);
  294.             delete c._highlight_mesh;
  295.          }
  297.          if (col && indx !== undefined) {
  298.             const h = new THREE.Mesh(c.geometry, c.material.clone());
  300.             if (this.bloom) {
  301.                h.layers.enable(_BLOOM_SCENE);
  302.                h.material.emissive = new THREE.Color(0x00ff00);
  303.             } else {
  304.                h.material.color = new THREE.Color(col);
  305.                h.material.opacity = 1.0;
  306.             }
  307.             const m = new THREE.Matrix4();
  308.             c.getMatrixAt(indx, m);
  309.             h.applyMatrix4(m);
  310.             c.add(h);
  312.             h.jsroot_special = true; // exclude from intersections
  314.             c._highlight_mesh = h;
  315.          }
  316.          return true;
  317.       }
  319.       if (col) {
  320.          if (!c.origin) {
  321.             c.origin = {
  322.               color: c.material.color,
  323.               emissive: c.material.emissive,
  324.               opacity: c.material.opacity,
  325.               width: c.material.linewidth,
  326.               size: c.material.size
  327.            };
  328.          }
  329.          if (this.bloom) {
  330.             c.layers.enable(_BLOOM_SCENE);
  331.             c.material.emissive = new THREE.Color(0x00ff00);
  332.          } else {
  333.             c.material.color = new THREE.Color(col);
  334.             c.material.opacity = 1.0;
  335.          }
  337.          if (c.hightlightWidthScale && !browser.isWin)
  338.             c.material.linewidth = c.origin.width * c.hightlightWidthScale;
  339.          if (c.highlightScale)
  340.             c.material.size = c.origin.size * c.highlightScale;
  341.          return true;
  342.       } else if (c.origin) {
  343.          if (this.bloom) {
  344.             c.material.emissive = c.origin.emissive;
  345.             c.layers.enable(_ENTIRE_SCENE);
  346.          } else {
  347.             c.material.color = c.origin.color;
  348.             c.material.opacity = c.origin.opacity;
  349.          }
  350.          if (c.hightlightWidthScale)
  351.             c.material.linewidth = c.origin.width;
  352.          if (c.highlightScale)
  353.             c.material.size = c.origin.size;
  354.          return true;
  355.       }
  356.    }
  358. } // class GeoDrawingControl
  361. const stageInit = 0, stageCollect = 1, stageWorkerCollect = 2, stageAnalyze = 3, stageCollShapes = 4,
  362.       stageStartBuild = 5, stageWorkerBuild = 6, stageBuild = 7, stageBuildReady = 8, stageWaitMain = 9, stageBuildProj = 10;
  364. /**
  365.  * @summary Painter class for geometries drawing
  366.  *
  367.  * @private
  368.  */
  370. class TGeoPainter extends ObjectPainter {
  372.    #geo_manager;  // TGeoManager instance - if assigned in drawing
  373.    #superimpose;  // set when superimposed with other 3D drawings
  374.    #complete_handler; // callback, assigned by ROOT GeomViewer
  375.    #geom_viewer;  // true when processing drawing from ROOT GeomViewer
  376.    #extra_objects; // TList with extra objects configured for drawing
  377.    #webgl;         // true when normal WebGL drawing is enabled
  378.    #worker;       // extra Worker to run different calculations
  379.    #worker_ready; // is worker started and initialized
  380.    #worker_jobs;  // number of submitted to worker jobs
  381.    #clones;       // instance of ClonedNodes
  382.    #clones_owner; // is instance managed by the painter
  383.    #draw_nodes;   // drawn nodes from geometry
  384.    #build_shapes; // build shapes required for drawings
  385.    #current_face_limit; // current face limit
  386.    #draw_all_nodes; // flag using in drawing
  387.    #draw_nodes_again; // flag set if drawing should be started again when completed
  388.    #drawing_ready; // if drawing completed
  389.    #drawing_log;   // current drawing log information
  390.    #draw_resolveFuncs; // resolve call-backs for start drawing calls
  391.    #start_drawing_time; // time when drawing started
  392.    #start_render_tm; // time when rendering started
  393.    #first_render_tm; // first time when rendering was performed
  394.    #last_render_tm;  // last time when rendering was performed
  395.    #last_render_meshes; // last value of rendered meshes
  396.    #render_resolveFuncs; // resolve call-backs from render calls
  397.    #render_tmout;    // timeout used in Render3D()
  398.    #first_drawing;   // true when very first drawing is performed
  399.    #full_redrawing;  // if full redraw must be performed
  400.    #last_clip_cfg;   // last config of clip panels
  401.    #redraw_timer;    // timer used in redraw
  402.    #did_update;     // flag used in update
  403.    #custom_bounding_box; // custom bounding box for extra objects
  404.    #clip_planes;     // clip planes
  405.    #central_painter; // pointer on central painter
  406.    #subordinate_painters; // list of subordinate painters
  407.    #effectComposer;  // extra composer for special effects, used in EVE
  408.    #bloomComposer;   // extra composer for bloom highlight
  409.    #new_draw_nodes; // temporary list of new draw nodes
  410.    #new_append_nodes; // temporary list of new append nodes
  411.    #more_nodes;      // more nodes from ROOT geometry viewer
  412.    #provided_more_nodes; // staged more nodes from ROOT geometry viewer
  413.    #on_pad;         // true when drawing done on TPad
  414.    #last_manifest;  // last node which was "manifest" via menu
  415.    #last_hidden;    // last node which was "hidden" via menu
  416.    #gui;            // dat.GUI instance
  417.    #toolbar;        // tool buttons
  418.    #controls;       // orbit control
  419.    #highlight_handlers; // highlight handlers
  420.    #animating;      // set when animation started
  421.    #last_camera_position; // last camera position
  422.    #fullgeom_proj;  // full geometry to produce projection
  423.    #selected_mesh;  // used in highlight
  424.    #fog;            // fog for the scene
  425.    #lookat;         // position to which camera looks at
  426.    #scene_size;     // stored scene size to control changes
  427.    #scene_width;    // actual scene width
  428.    #scene_height;   // actual scene width
  429.    #fit_main_area;  // true if drawing must fit to DOM
  430.    #overall_size;   // overall size
  431.    #scene;          // three.js Scene object
  432.    #camera;         // three.js camera object
  433.    #renderer;       // three.js renderer object
  434.    #toplevel;       // three.js top level Object3D
  435.    #camera0pos;     // camera on opposite side
  436.    #vrControllers;  // used in VR display
  437.    #controllersMeshes; // used in VR display
  438.    #dolly;          // used in VR display
  439.    #vrDisplay;      // used in VR display
  440.    #vr_camera_position; // used in VR display
  441.    #vr_camera_rotation; // used in VR display
  442.    #vr_camera_near;  // used in VR display
  443.    #standingMatrix;  // used in VR display
  444.    #raycasterEnd;    // used in VR display
  445.    #raycasterOrigin;  // used in VR display
  446.    #adjust_camera_with_render; // flag to readjust camera when rendering
  447.    #did_cleanup;    // flag set after cleanup
  449.    /** @summary Constructor
  450.      * @param {object|string} dom - DOM element for drawing or element id
  451.      * @param {object} obj - supported TGeo object */
  452.    constructor(dom, obj) {
  453.       let gm;
  454.       if (obj?._typename === clTGeoManager) {
  455.          gm = obj;
  456.          obj = obj.fMasterVolume;
  457.       }
  459.       if (obj?._typename && (obj._typename.indexOf(clTGeoVolume) === 0))
  460.          obj = { _typename: clTGeoNode, fVolume: obj, fName: obj.fName, $geoh: obj.$geoh, _proxy: true };
  462.       super(dom, obj);
  464.       this.#superimpose = Boolean(getHistPainter3DCfg(this.getMainPainter()));
  465.       this.#geo_manager = gm;
  467.       this._no_default_title = true; // do not set title to main DIV
  468.       this.mode3d = true; // indication of 3D mode
  469.       this.drawing_stage = stageInit; //
  470.       this.#drawing_log = 'Init';
  471.       this.ctrl = {
  472.          clipIntersect: true,
  473.          clipVisualize: false,
  474.          clip: [{ name: 'x', enabled: false, value: 0, min: -100, max: 100, step: 1 },
  475.                 { name: 'y', enabled: false, value: 0, min: -100, max: 100, step: 1 },
  476.                 { name: 'z', enabled: false, value: 0, min: -100, max: 100, step: 1 }],
  477.          _highlight: 0,
  478.          highlight: 0,
  479.          highlight_bloom: 0,
  480.          highlight_scene: 0,
  481.          highlight_color: '#00ff00',
  482.          bloom_strength: 1.5,
  483.          more: 1,
  484.          maxfaces: 0,
  485.          vislevel: undefined,
  486.          maxnodes: undefined,
  487.          dflt_colors: false,
  489.          info: { num_meshes: 0, num_faces: 0, num_shapes: 0 },
  490.          depthTest: true,
  491.          depthMethod: 'dflt',
  492.          select_in_view: false,
  493.          update_browser: true,
  494.          use_fog: false,
  495.          light: { kind: 'points', top: false, bottom: false, left: false, right: false, front: false, specular: true, power: 1 },
  496.          lightKindItems: [
  497.             { name: 'AmbientLight', value: 'ambient' },
  498.             { name: 'DirectionalLight', value: 'points' },
  499.             { name: 'HemisphereLight', value: 'hemisphere' },
  500.             { name: 'Ambient + Point', value: 'mix' }
  501.          ],
  502.          trans_radial: 0,
  503.          trans_z: 0,
  504.          scale: new THREE.Vector3(1, 1, 1),
  505.          zoom: 1.0, rotatey: 0, rotatez: 0,
  506.          depthMethodItems: [
  507.             { name: 'Default', value: 'dflt' },
  508.             { name: 'Raytraicing', value: 'ray' },
  509.             { name: 'Boundary box', value: 'box' },
  510.             { name: 'Mesh size', value: 'size' },
  511.             { name: 'Central point', value: 'pnt' }
  512.           ],
  513.           cameraKindItems: [
  514.             { name: 'Perspective', value: 'perspective' },
  515.             { name: 'Perspective (Floor XOZ)', value: 'perspXOZ' },
  516.             { name: 'Perspective (Floor YOZ)', value: 'perspYOZ' },
  517.             { name: 'Perspective (Floor XOY)', value: 'perspXOY' },
  518.             { name: 'Orthographic (XOY)', value: 'orthoXOY' },
  519.             { name: 'Orthographic (XOZ)', value: 'orthoXOZ' },
  520.             { name: 'Orthographic (ZOY)', value: 'orthoZOY' },
  521.             { name: 'Orthographic (ZOX)', value: 'orthoZOX' },
  522.             { name: 'Orthographic (XnOY)', value: 'orthoXNOY' },
  523.             { name: 'Orthographic (XnOZ)', value: 'orthoXNOZ' },
  524.             { name: 'Orthographic (ZnOY)', value: 'orthoZNOY' },
  525.             { name: 'Orthographic (ZnOX)', value: 'orthoZNOX' }
  526.          ],
  527.          cameraOverlayItems: [
  528.             { name: 'None', value: 'none' },
  529.             { name: 'Bar', value: 'bar' },
  530.             { name: 'Axis', value: 'axis' },
  531.             { name: 'Grid', value: 'grid' },
  532.             { name: 'Grid background', value: 'gridb' },
  533.             { name: 'Grid foreground', value: 'gridf' }
  534.          ],
  535.          camera_kind: 'perspective',
  536.          camera_overlay: 'gridb',
  537.          rotate: false,
  538.          background: settings.DarkMode ? '#000000' : '#ffffff',
  539.          can_rotate: true,
  540.          _axis: 0,
  541.          instancing: 0,
  542.          _count: false,
  543.          // material properties
  544.          wireframe: false,
  545.          transparency: 0,
  546.          flatShading: false,
  547.          roughness: 0.5,
  548.          metalness: 0.5,
  549.          shininess: 0,
  550.          reflectivity: 0.5,
  551.          material_kind: 'lambert',
  552.          materialKinds: [
  553.             { name: 'MeshLambertMaterial', value: 'lambert', emissive: true, props: [{ name: 'flatShading' }] },
  554.             { name: 'MeshBasicMaterial', value: 'basic' },
  555.             { name: 'MeshStandardMaterial', value: 'standard', emissive: true,
  556.                 props: [{ name: 'flatShading' }, { name: 'roughness', min: 0, max: 1, step: 0.001 }, { name: 'metalness', min: 0, max: 1, step: 0.001 }] },
  557.             { name: 'MeshPhysicalMaterial', value: 'physical', emissive: true,
  558.                props: [{ name: 'flatShading' }, { name: 'roughness', min: 0, max: 1, step: 0.001 }, { name: 'metalness', min: 0, max: 1, step: 0.001 }, { name: 'reflectivity', min: 0, max: 1, step: 0.001 }] },
  559.             { name: 'MeshPhongMaterial', value: 'phong', emissive: true,
  560.                 props: [{ name: 'flatShading' }, { name: 'shininess', min: 0, max: 100, step: 0.1 }] },
  561.             { name: 'MeshNormalMaterial', value: 'normal', props: [{ name: 'flatShading' }] },
  562.             { name: 'MeshDepthMaterial', value: 'depth' },
  563.             { name: 'MeshMatcapMaterial', value: 'matcap' },
  564.             { name: 'MeshToonMaterial', value: 'toon' }
  565.          ],
  566.          getMaterialCfg() {
  567.              let cfg;
  568.              this.materialKinds.forEach(item => {
  569.                 if (item.value === this.material_kind)
  570.                    cfg = item;
  571.              });
  572.              return cfg;
  573.          }
  574.       };
  576.       this.#draw_resolveFuncs = [];
  577.       this.#render_resolveFuncs = [];
  579.       this.cleanup(true);
  580.    }
  582.    /** @summary Returns scene */
  583.    getScene() { return this.#scene; }
  585.    /** @summary Returns camera */
  586.    getCamera() { return this.#camera; }
  588.    /** @summary Returns renderer */
  589.    getRenderer() { return this.#renderer; }
  591.    /** @summary Returns top Object3D instance */
  592.    getTopObject3D() { return this.#toplevel; }
  594.    /** @summary Assign or remove subordinate painter */
  595.    assignSubordinate(painter, do_assign = true) {
  596.       if (this.#subordinate_painters === undefined)
  597.          this.#subordinate_painters = [];
  598.       const pos = this.#subordinate_painters.indexOf(painter);
  599.       if (do_assign && pos < 0)
  600.          this.#subordinate_painters.push(painter);
  601.       else if (!do_assign && pos >= 0)
  602.          this.#subordinate_painters.splice(pos, 1);
  603.    }
  605.    /** @summary Return list of subordinate painters */
  606.    getSubordinates() { return this.#subordinate_painters ?? []; }
  608.    /** @summary Assign or cleanup central painter */
  609.    assignCentral(painter, do_assign = true) {
  610.       if (do_assign)
  611.          this.#central_painter = painter;
  612.       else if (this.#central_painter === painter)
  613.          this.#central_painter = undefined;
  614.    }
  616.    /** @summary Returns central painter */
  617.    getCentral() { return this.#central_painter; }
  619.    /** @summary Returns extra objects configured for drawing */
  620.    getExtraObjects() { return this.#extra_objects; }
  622.    /** @summary Function called by framework when dark mode is changed
  623.      * @private */
  624.    changeDarkMode(mode) {
  625.       if ((this.ctrl.background === '#000000') || (this.ctrl.background === '#ffffff'))
  626.          this.changedBackground((mode ?? settings.DarkMode) ? '#000000' : '#ffffff');
  627.    }
  629.    /** @summary Change drawing stage
  630.      * @private */
  631.    changeStage(value, msg) {
  632.       this.drawing_stage = value;
  633.       if (!msg) {
  634.          switch (value) {
  635.             case stageInit: msg = 'Building done'; break;
  636.             case stageCollect: msg = 'collect visibles'; break;
  637.             case stageWorkerCollect: msg = 'worker collect visibles'; break;
  638.             case stageAnalyze: msg = 'Analyse visibles'; break;
  639.             case stageCollShapes: msg = 'collect shapes for building'; break;
  640.             case stageStartBuild: msg = 'Start build shapes'; break;
  641.             case stageWorkerBuild: msg = 'Worker build shapes'; break;
  642.             case stageBuild: msg = 'Build shapes'; break;
  643.             case stageBuildReady: msg = 'Build ready'; break;
  644.             case stageWaitMain: msg = 'Wait for main painter'; break;
  645.             case stageBuildProj: msg = 'Build projection'; break;
  646.             default: msg = `stage ${value}`;
  647.          }
  648.       }
  649.       this.#drawing_log = msg;
  650.    }
  652.    /** @summary Check drawing stage */
  653.    isStage(value) { return value === this.drawing_stage; }
  655.    isBatchMode() { return isBatchMode() || this.batch_mode; }
  657.    getControls() { return this.#controls; }
  659.    /** @summary Create toolbar */
  660.    createToolbar() {
  661.       if (this.#toolbar || !this.#webgl || this.ctrl.notoolbar || this.isBatchMode())
  662.          return;
  663.       const buttonList = [{
  664.          name: 'toImage',
  665.          title: 'Save as PNG',
  666.          icon: 'camera',
  667.          click: () => this.createSnapshot()
  668.       }, {
  669.          name: 'control',
  670.          title: 'Toggle control UI',
  671.          icon: 'rect',
  672.          click: () => this.showControlGui('toggle')
  673.       }, {
  674.          name: 'enlarge',
  675.          title: 'Enlarge geometry drawing',
  676.          icon: 'circle',
  677.          click: () => this.toggleEnlarge()
  678.       }];
  680.       // Only show VR icon if WebVR API available.
  681.       if (navigator.getVRDisplays) {
  682.          buttonList.push({
  683.             name: 'entervr',
  684.             title: 'Enter VR (It requires a VR Headset connected)',
  685.             icon: 'vrgoggles',
  686.             click: () => this.toggleVRMode()
  687.          });
  688.          this.initVRMode();
  689.       }
  691.       if (settings.ContextMenu) {
  692.          buttonList.push({
  693.             name: 'menu',
  694.             title: 'Show context menu',
  695.             icon: 'question',
  696.             click: evnt => {
  697.                evnt.preventDefault();
  698.                evnt.stopPropagation();
  700.                if (closeMenu()) return;
  702.                createMenu(evnt, this).then(menu => {
  703.                    menu.painter.fillContextMenu(menu);
  704.                    menu.show();
  705.                });
  706.             }
  707.          });
  708.       }
  710.       const bkgr = new THREE.Color(this.ctrl.background);
  712.       this.#toolbar = new Toolbar(this.selectDom(), (bkgr.r + bkgr.g + bkgr.b) < 1, buttonList);
  714.       this.#toolbar.createButtons();
  715.    }
  717.    /** @summary Initialize VR mode */
  718.    initVRMode() {
  719.       // Dolly contains camera and controllers in VR Mode
  720.       // Allows moving the user in the scene
  721.       this.#dolly = new THREE.Group();
  722.       this.#scene.add(this.#dolly);
  723.       this.#standingMatrix = new THREE.Matrix4();
  725.       // Raycaster temp variables to avoid one per frame allocation.
  726.       this.#raycasterEnd = new THREE.Vector3();
  727.       this.#raycasterOrigin = new THREE.Vector3();
  729.       navigator.getVRDisplays().then(displays => {
  730.          const vrDisplay = displays[0];
  731.          if (!vrDisplay) return;
  732.          this.#renderer.vr.setDevice(vrDisplay);
  733.          this.#vrDisplay = vrDisplay;
  734.          if (vrDisplay.stageParameters)
  735.             this.#standingMatrix.fromArray(vrDisplay.stageParameters.sittingToStandingTransform);
  737.          this.initVRControllersGeometry();
  738.       });
  739.    }
  741.    /** @summary Init VR controllers geometry
  742.      * @private */
  743.    initVRControllersGeometry() {
  744.       const geometry = new THREE.SphereGeometry(0.025, 18, 36),
  745.             material = new THREE.MeshBasicMaterial({ color: 'grey', vertexColors: false }),
  746.             rayMaterial = new THREE.MeshBasicMaterial({ color: 'fuchsia', vertexColors: false }),
  747.             rayGeometry = new THREE.BoxGeometry(0.001, 0.001, 2),
  748.             ray1Mesh = new THREE.Mesh(rayGeometry, rayMaterial),
  749.             ray2Mesh = new THREE.Mesh(rayGeometry, rayMaterial),
  750.             sphere1 = new THREE.Mesh(geometry, material),
  751.             sphere2 = new THREE.Mesh(geometry, material);
  753.       this.#controllersMeshes = [];
  754.       this.#controllersMeshes.push(sphere1);
  755.       this.#controllersMeshes.push(sphere2);
  756.       ray1Mesh.position.z -= 1;
  757.       ray2Mesh.position.z -= 1;
  758.       sphere1.add(ray1Mesh);
  759.       sphere2.add(ray2Mesh);
  760.       this.#dolly.add(sphere1);
  761.       this.#dolly.add(sphere2);
  762.       // Controller mesh hidden by default
  763.       sphere1.visible = false;
  764.       sphere2.visible = false;
  765.    }
  767.    /** @summary Update VR controllers list
  768.      * @private */
  769.    updateVRControllersList() {
  770.       const gamepads = navigator.getGamepads && navigator.getGamepads();
  771.       // Has controller list changed?
  772.       if (this.#vrControllers && (gamepads.length === this.#vrControllers.length)) return;
  773.       // Hide meshes.
  774.       this.#controllersMeshes.forEach(mesh => { mesh.visible = false; });
  775.       this.#vrControllers = [];
  776.       for (let i = 0; i < gamepads.length; ++i) {
  777.          if (!gamepads[i] || !gamepads[i].pose) continue;
  778.          this.#vrControllers.push({
  779.             gamepad: gamepads[i],
  780.             mesh: this.#controllersMeshes[i]
  781.          });
  782.          this.#controllersMeshes[i].visible = true;
  783.       }
  784.    }
  786.    /** @summary Process VR controller intersection
  787.      * @private */
  788.    processVRControllerIntersections() {
  789.       let intersects = [];
  790.       for (let i = 0; i < this.#vrControllers.length; ++i) {
  791.          const controller = this.#vrControllers[i].mesh,
  792.                end = controller.localToWorld(this.#raycasterEnd.set(0, 0, -1)),
  793.                origin = controller.localToWorld(this.#raycasterOrigin.set(0, 0, 0));
  794.          end.sub(origin).normalize();
  795.          intersects = intersects.concat(this.#controls.getOriginDirectionIntersects(origin, end));
  796.       }
  797.       // Remove duplicates.
  798.       intersects = intersects.filter((item, pos) => { return intersects.indexOf(item) === pos; });
  799.       this.#controls.processMouseMove(intersects);
  800.    }
  802.    /** @summary Update VR controllers
  803.      * @private */
  804.    updateVRControllers() {
  805.       this.updateVRControllersList();
  806.       // Update pose.
  807.       for (let i = 0; i < this.#vrControllers.length; ++i) {
  808.          const controller = this.#vrControllers[i],
  809.                orientation = controller.gamepad.pose.orientation,
  810.                position = controller.gamepad.pose.position,
  811.                controllerMesh = controller.mesh;
  812.          if (orientation) controllerMesh.quaternion.fromArray(orientation);
  813.          if (position) controllerMesh.position.fromArray(position);
  814.          controllerMesh.updateMatrix();
  815.          controllerMesh.applyMatrix4(this.#standingMatrix);
  816.          controllerMesh.matrixWorldNeedsUpdate = true;
  817.       }
  818.       this.processVRControllerIntersections();
  819.    }
  821.    /** @summary Toggle VR mode
  822.      * @private */
  823.    toggleVRMode() {
  824.       if (!this.#vrDisplay)
  825.          return;
  826.       // Toggle VR mode off
  827.       if (this.#vrDisplay.isPresenting) {
  828.          this.exitVRMode();
  829.          return;
  830.       }
  831.       this.#vr_camera_position = this.#camera.position.clone();
  832.       this.#vr_camera_rotation = this.#camera.rotation.clone();
  833.       this.#vrDisplay.requestPresent([{ source: this.#renderer.domElement }]).then(() => {
  834.          this.#vr_camera_near = this.#camera.near;
  835.          this.#dolly.position.set(this.#camera.position.x/4, -this.#camera.position.y/8, -this.#camera.position.z/4);
  836.          this.#camera.position.set(0, 0, 0);
  837.          this.#dolly.add(this.#camera);
  838.          this.#camera.near = 0.1;
  839.          this.#camera.updateProjectionMatrix();
  840.          this.#renderer.vr.enabled = true;
  841.          this.#renderer.setAnimationLoop(() => {
  842.             this.updateVRControllers();
  843.             this.render3D(0);
  844.          });
  845.       });
  846.       this.#renderer.vr.enabled = true;
  848.       window.addEventListener('keydown', evnt => {
  849.          // Esc Key turns VR mode off
  850.          if (evnt.code === 'Escape') this.exitVRMode();
  851.       });
  852.    }
  854.    /** @summary Exit VR mode
  855.      * @private */
  856.    exitVRMode() {
  857.       if (!this.#vrDisplay.isPresenting)
  858.          return;
  859.       this.#renderer.vr.enabled = false;
  860.       this.#dolly.remove(this.#camera);
  861.       this.#scene.add(this.#camera);
  862.       // Restore Camera pose
  863.       this.#camera.position.copy(this.#vr_camera_position);
  864.       this.#vr_camera_position = undefined;
  865.       this.#camera.rotation.copy(this.#vr_camera_rotation);
  866.       this.#vr_camera_rotation = undefined;
  867.       this.#camera.near = this.#vr_camera_near;
  868.       this.#camera.updateProjectionMatrix();
  869.       this.#vrDisplay.exitPresent();
  870.    }
  872.    /** @summary Returns main geometry object */
  873.    getGeometry() { return this.getObject(); }
  875.    /** @summary Modify visibility of provided node by name */
  876.    modifyVisisbility(name, sign) {
  877.       if (getNodeKind(this.getGeometry()) !== kindGeo)
  878.          return;
  880.       if (!name)
  881.          return setGeoBit(this.getGeometry().fVolume, geoBITS.kVisThis, (sign === '+'));
  883.       let regexp, exact = false;
  885.       // arg.node.fVolume
  886.       if (name.indexOf('*') < 0) {
  887.          regexp = new RegExp('^'+name+'$');
  888.          exact = true;
  889.       } else {
  890.          regexp = new RegExp('^' + name.split('*').join('.*') + '$');
  891.          exact = false;
  892.       }
  894.       this.findNodeWithVolume(regexp, arg => {
  895.          setInvisibleAll(arg.node.fVolume, (sign !== '+'));
  896.          return exact ? arg : null; // continue search if not exact expression provided
  897.       });
  898.    }
  900.    /** @summary Decode drawing options */
  901.    decodeOptions(opt) {
  902.       if (!isStr(opt))
  903.          opt = '';
  905.       if (this.#superimpose && (opt.indexOf('same') === 0))
  906.          opt = opt.slice(4);
  908.       const res = this.ctrl,
  910.        macro = opt.indexOf('macro:');
  911.       if (macro >= 0) {
  912.          let separ = opt.indexOf(';', macro+6);
  913.          if (separ < 0) separ = opt.length;
  914.          res.script_name = opt.slice(macro+6, separ);
  915.          opt = opt.slice(0, macro) + opt.slice(separ+1);
  916.          console.log(`script ${res.script_name} rest ${opt}`);
  917.       }
  919.       while (true) {
  920.          const pp = opt.indexOf('+'), pm = opt.indexOf('-');
  921.          if ((pp < 0) && (pm < 0)) break;
  922.          let p1 = pp, sign = '+';
  923.          if ((p1 < 0) || ((pm >= 0) && (pm < pp))) { p1 = pm; sign = '-'; }
  925.          let p2 = p1+1;
  926.          const regexp = /[,; .]/;
  927.          while ((p2 < opt.length) && !regexp.test(opt[p2]) && (opt[p2] !== '+') && (opt[p2] !== '-')) p2++;
  929.          const name = opt.substring(p1+1, p2);
  930.          opt = opt.slice(0, p1) + opt.slice(p2);
  932.          this.modifyVisisbility(name, sign);
  933.       }
  935.       const d = new DrawOptions(opt);
  937.       if (d.check('MAIN')) res.is_main = true;
  939.       if (d.check('DUMMY')) res.dummy = true;
  941.       if (d.check('TRACKS')) res.tracks = true; // only for TGeoManager
  942.       if (d.check('SHOWTOP')) res.showtop = true; // only for TGeoManager
  943.       if (d.check('NO_SCREEN')) res.no_screen = true; // ignore kVisOnScreen bits for visibility
  945.       if (d.check('NOINSTANCING')) res.instancing = -1; // disable usage of InstancedMesh
  946.       if (d.check('INSTANCING')) res.instancing = 1; // force usage of InstancedMesh
  948.       if (d.check('ORTHO_CAMERA')) { res.camera_kind = 'orthoXOY'; res.can_rotate = 0; }
  949.       if (d.check('ORTHO', true)) { res.camera_kind = 'ortho' + d.part; res.can_rotate = 0; }
  950.       if (d.check('OVERLAY', true)) res.camera_overlay = d.part.toLowerCase();
  951.       if (d.check('CAN_ROTATE')) res.can_rotate = true;
  952.       if (d.check('PERSPECTIVE')) { res.camera_kind = 'perspective'; res.can_rotate = true; }
  953.       if (d.check('PERSP', true)) { res.camera_kind = 'persp' + d.part; res.can_rotate = true; }
  954.       if (d.check('MOUSE_CLICK')) res.mouse_click = true;
  956.       if (d.check('DEPTHRAY') || d.check('DRAY')) res.depthMethod = 'ray';
  957.       if (d.check('DEPTHBOX') || d.check('DBOX')) res.depthMethod = 'box';
  958.       if (d.check('DEPTHPNT') || d.check('DPNT')) res.depthMethod = 'pnt';
  959.       if (d.check('DEPTHSIZE') || d.check('DSIZE')) res.depthMethod = 'size';
  960.       if (d.check('DEPTHDFLT') || d.check('DDFLT')) res.depthMethod = 'dflt';
  962.       if (d.check('ZOOM', true)) res.zoom = d.partAsFloat(0, 100) / 100;
  963.       if (d.check('ROTY', true)) res.rotatey = d.partAsFloat();
  964.       if (d.check('ROTZ', true)) res.rotatez = d.partAsFloat();
  966.       if (d.check('PHONG')) res.material_kind = 'phong';
  967.       if (d.check('LAMBERT')) res.material_kind = 'lambert';
  968.       if (d.check('MATCAP')) res.material_kind = 'matcap';
  969.       if (d.check('TOON')) res.material_kind = 'toon';
  971.       if (d.check('AMBIENT')) res.light.kind = 'ambient';
  973.       const getCamPart = () => {
  974.          let neg = 1;
  975.          if (d.part[0] === 'N') {
  976.             neg = -1;
  977.             d.part = d.part.slice(1);
  978.          }
  979.          return neg * d.partAsFloat();
  980.       };
  982.       if (d.check('CAMX', true)) res.camx = getCamPart();
  983.       if (d.check('CAMY', true)) res.camy = getCamPart();
  984.       if (d.check('CAMZ', true)) res.camz = getCamPart();
  985.       if (d.check('CAMLX', true)) res.camlx = getCamPart();
  986.       if (d.check('CAMLY', true)) res.camly = getCamPart();
  987.       if (d.check('CAMLZ', true)) res.camlz = getCamPart();
  989.       if (d.check('BLACK')) res.background = '#000000';
  990.       if (d.check('WHITE')) res.background = '#FFFFFF';
  992.       if (d.check('BKGR_', true)) {
  993.          let bckgr = null;
  994.          if (d.partAsInt(1) > 0)
  995.             bckgr = getColor(d.partAsInt());
  996.           else {
  997.             for (let col = 0; col < 8; ++col) {
  998.                if (getColor(col).toUpperCase() === d.part)
  999.                   bckgr = getColor(col);
  1000.             }
  1001.          }
  1002.          if (bckgr) res.background = '#' + new THREE.Color(bckgr).getHexString();
  1003.       }
  1005.       if (d.check('R3D_', true))
  1006.          res.Render3D = constants.Render3D.fromString(d.part.toLowerCase());
  1008.       if (d.check('MORE', true)) res.more = d.partAsInt(0, 2) ?? 2;
  1009.       if (d.check('ALL')) { res.more = 100; res.vislevel = 99; }
  1011.       if (d.check('VISLVL', true)) res.vislevel = d.partAsInt();
  1012.       if (d.check('MAXNODES', true)) res.maxnodes = d.partAsInt();
  1013.       if (d.check('MAXFACES', true)) res.maxfaces = d.partAsInt();
  1015.       if (d.check('CONTROLS') || d.check('CTRL')) res.show_controls = true;
  1017.       if (d.check('CLIPXYZ')) res.clip[0].enabled = res.clip[1].enabled = res.clip[2].enabled = true;
  1018.       if (d.check('CLIPX')) res.clip[0].enabled = true;
  1019.       if (d.check('CLIPY')) res.clip[1].enabled = true;
  1020.       if (d.check('CLIPZ')) res.clip[2].enabled = true;
  1021.       if (d.check('CLIP')) res.clip[0].enabled = res.clip[1].enabled = res.clip[2].enabled = true;
  1023.       if (d.check('PROJX', true)) { res.project = 'x'; if (d.partAsInt(1) > 0) res.projectPos = d.partAsInt(); res.can_rotate = 0; }
  1024.       if (d.check('PROJY', true)) { res.project = 'y'; if (d.partAsInt(1) > 0) res.projectPos = d.partAsInt(); res.can_rotate = 0; }
  1025.       if (d.check('PROJZ', true)) { res.project = 'z'; if (d.partAsInt(1) > 0) res.projectPos = d.partAsInt(); res.can_rotate = 0; }
  1027.       if (d.check('DFLT_COLORS') || d.check('DFLT')) res.dflt_colors = true;
  1028.       d.check('SSAO'); // deprecated
  1029.       if (d.check('NOBLOOM')) res.highlight_bloom = false;
  1030.       if (d.check('BLOOM')) res.highlight_bloom = true;
  1031.       if (d.check('OUTLINE')) res.outline = true;
  1033.       if (d.check('NOWORKER')) res.use_worker = -1;
  1034.       if (d.check('WORKER')) res.use_worker = 1;
  1036.       if (d.check('NOFOG')) res.use_fog = false;
  1037.       if (d.check('FOG')) res.use_fog = true;
  1039.       if (d.check('NOHIGHLIGHT') || d.check('NOHIGH')) res.highlight_scene = res.highlight = false;
  1040.       if (d.check('HIGHLIGHT')) res.highlight_scene = res.highlight = true;
  1041.       if (d.check('HSCENEONLY')) { res.highlight_scene = true; res.highlight = false; }
  1042.       if (d.check('NOHSCENE')) res.highlight_scene = false;
  1043.       if (d.check('HSCENE')) res.highlight_scene = true;
  1045.       if (d.check('WIREFRAME') || d.check('WIRE')) res.wireframe = true;
  1046.       if (d.check('ROTATE')) res.rotate = true;
  1048.       if (d.check('INVX') || d.check('INVERTX')) res.scale.x = -1;
  1049.       if (d.check('INVY') || d.check('INVERTY')) res.scale.y = -1;
  1050.       if (d.check('INVZ') || d.check('INVERTZ')) res.scale.z = -1;
  1052.       if (d.check('COUNT')) res._count = true;
  1054.       if (d.check('TRANSP', true))
  1055.          res.transparency = d.partAsInt(0, 100)/100;
  1057.       if (d.check('OPACITY', true))
  1058.          res.transparency = 1 - d.partAsInt(0, 100)/100;
  1060.       if (d.check('AXISCENTER') || d.check('AXISC') || d.check('AC')) res._axis = 2;
  1061.       if (d.check('AXIS') || d.check('A')) res._axis = 1;
  1063.       if (d.check('TRR', true)) res.trans_radial = d.partAsInt()/100;
  1064.       if (d.check('TRZ', true)) res.trans_z = d.partAsInt()/100;
  1067.       if (d.check('W')) res.wireframe = true;
  1068.       if (d.check('Y')) res._yup = true;
  1069.       if (d.check('Z')) res._yup = false;
  1071.       // when drawing geometry without TCanvas, yup = true by default
  1072.       if (res._yup === undefined)
  1073.          res._yup = this.getCanvSvg().empty();
  1075.       // let reuse for storing origin options
  1076.       this.setOptions(res, true);
  1077.    }
  1079.    /** @summary Activate specified items in the browser */
  1080.    activateInBrowser(names, force) {
  1081.       if (isStr(names))
  1082.          names = [names];
  1084.       const h = this.getHPainter();
  1086.       if (h) {
  1087.          // show browser if it not visible
  1089.          h.activateItems(names, force);
  1091.          // if highlight in the browser disabled, suppress in few seconds
  1092.          if (!this.ctrl.update_browser)
  1093.             setTimeout(() => h.activateItems([]), 2000);
  1094.       }
  1095.    }
  1097.    /** @summary  Return ClonedNodes instance from the painter */
  1098.    getClones() { return this.#clones; }
  1100.    /** @summary Assign clones, created outside.
  1101.     * @desc Used by ROOT geometry painter, where clones are handled by the server */
  1102.    assignClones(clones, owner = true) {
  1103.       if (this.#clones_owner)
  1104.          this.#clones?.cleanup(this.#draw_nodes, this.#build_shapes);
  1105.       this.#draw_nodes = undefined;
  1106.       this.#build_shapes = undefined;
  1107.       this.#drawing_ready = false;
  1109.       this.#clones = clones;
  1110.       this.#clones_owner = owner;
  1111.    }
  1113.    /** @summary  method used to check matrix calculations performance with current three.js model */
  1114.    testMatrixes() {
  1115.       let errcnt = 0, totalcnt = 0, totalmax = 0;
  1117.       const arg = {
  1118.          domatrix: true,
  1119.          func: (/* node */) => {
  1120.             let m2 = this.getmatrix();
  1121.             const entry = this.copyStack(),
  1122.                   mesh = this.#clones.createObject3D(entry.stack, this.#toplevel, 'mesh');
  1123.             if (!mesh) return true;
  1125.             totalcnt++;
  1127.             const m1 = mesh.matrixWorld;
  1128.             if (m1.equals(m2)) return true;
  1129.             if ((m1.determinant() > 0) && (m2.determinant() < -0.9)) {
  1130.                const flip = new THREE.Vector3(1, 1, -1);
  1131.                m2 = m2.clone().scale(flip);
  1132.                if (m1.equals(m2)) return true;
  1133.             }
  1135.             let max = 0;
  1136.             for (let k = 0; k < 16; ++k)
  1137.                max = Math.max(max, Math.abs(m1.elements[k] - m2.elements[k]));
  1139.             totalmax = Math.max(max, totalmax);
  1141.             if (max < 1e-4) return true;
  1143.             console.log(`${this.#clones.resolveStack(entry.stack).name} maxdiff ${max} determ ${m1.determinant()} ${m2.determinant()}`);
  1145.             errcnt++;
  1147.             return false;
  1148.          }
  1149.       }, tm1 = new Date().getTime();
  1151.       this.#clones.scanVisible(arg);
  1153.       const tm2 = new Date().getTime();
  1155.       console.log(`Compare matrixes total ${totalcnt} errors ${errcnt} takes ${tm2-tm1} maxdiff ${totalmax}`);
  1156.    }
  1158.    /** @summary Fill context menu */
  1159.    fillContextMenu(menu) {
  1160.       menu.header('Draw options');
  1162.       menu.addchk(this.ctrl.update_browser, 'Browser update', () => {
  1163.          this.ctrl.update_browser = !this.ctrl.update_browser;
  1164.          if (!this.ctrl.update_browser) this.activateInBrowser([]);
  1165.       });
  1166.       menu.addchk(this.ctrl.show_controls, 'Show Controls', () => this.showControlGui('toggle'));
  1168.       menu.sub('Show axes', () => this.setAxesDraw('toggle'));
  1169.       menu.addchk(this.ctrl._axis === 0, 'off', 0, arg => this.setAxesDraw(parseInt(arg)));
  1170.       menu.addchk(this.ctrl._axis === 1, 'side', 1, arg => this.setAxesDraw(parseInt(arg)));
  1171.       menu.addchk(this.ctrl._axis === 2, 'center', 2, arg => this.setAxesDraw(parseInt(arg)));
  1172.       menu.endsub();
  1174.       if (this.#geo_manager)
  1175.          menu.addchk(this.ctrl.showtop, 'Show top volume', () => this.setShowTop(!this.ctrl.showtop));
  1177.       menu.addchk(this.ctrl.wireframe, 'Wire frame', () => this.toggleWireFrame());
  1179.       if (!this.getCanvPainter())
  1180.          menu.addchk(this.isTooltipAllowed(), 'Show tooltips', () => this.setTooltipAllowed('toggle'));
  1182.       menu.sub('Highlight');
  1184.       menu.addchk(!this.ctrl.highlight, 'Off', () => {
  1185.          this.ctrl.highlight = false;
  1186.          this.changedHighlight();
  1187.       });
  1188.       menu.addchk(this.ctrl.highlight && !this.ctrl.highlight_bloom, 'Normal', () => {
  1189.          this.ctrl.highlight = true;
  1190.          this.ctrl.highlight_bloom = false;
  1191.          this.changedHighlight();
  1192.       });
  1193.       menu.addchk(this.ctrl.highlight && this.ctrl.highlight_bloom, 'Bloom', () => {
  1194.          this.ctrl.highlight = true;
  1195.          this.ctrl.highlight_bloom = true;
  1196.          this.changedHighlight();
  1197.       });
  1199.       menu.separator();
  1201.       menu.addchk(this.ctrl.highlight_scene, 'Scene', flag => {
  1202.          this.ctrl.highlight_scene = flag;
  1203.          this.changedHighlight();
  1204.       });
  1206.       menu.endsub();
  1208.       menu.sub('Camera');
  1209.       menu.add('Reset position', () => this.focusCamera());
  1210.       if (!this.ctrl.project)
  1211.           menu.addchk(this.ctrl.rotate, 'Autorotate', () => this.setAutoRotate(!this.ctrl.rotate));
  1213.       if (!this.#geom_viewer) {
  1214.          menu.addchk(this.canRotateCamera(), 'Can rotate', () => this.changeCanRotate(!this.ctrl.can_rotate));
  1216.          menu.add('Get position', () => menu.info('Position (as url)', '&opt=' + this.produceCameraUrl()));
  1217.          if (!this.isOrthoCamera()) {
  1218.             menu.add('Absolute position', () => {
  1219.                const url = this.produceCameraUrl(true), p = url.indexOf('camlx');
  1220.                menu.info('Position (as url)', '&opt=' + ((p < 0) ? url : url.slice(0, p) + '\n' + url.slice(p)));
  1221.             });
  1222.          }
  1224.          menu.sub('Kind');
  1225.          this.ctrl.cameraKindItems.forEach(item =>
  1226.             menu.addchk(this.ctrl.camera_kind === item.value, item.name, item.value, arg => {
  1227.                this.ctrl.camera_kind = arg;
  1228.                this.changeCamera();
  1229.             }));
  1230.          menu.endsub();
  1232.          if (this.isOrthoCamera()) {
  1233.             menu.sub('Overlay');
  1234.             this.ctrl.cameraOverlayItems.forEach(item =>
  1235.                menu.addchk(this.ctrl.camera_overlay === item.value, item.name, item.value, arg => {
  1236.                   this.ctrl.camera_overlay = arg;
  1237.                   this.changeCamera();
  1238.                }));
  1239.             menu.endsub();
  1240.          }
  1241.       }
  1242.       menu.endsub();
  1244.       menu.addchk(this.ctrl.select_in_view, 'Select in view', () => {
  1245.          this.ctrl.select_in_view = !this.ctrl.select_in_view;
  1246.          if (this.ctrl.select_in_view) this.startDrawGeometry();
  1247.       });
  1248.    }
  1250.    /** @summary Method used to set transparency for all geometrical shapes
  1251.      * @param {number|Function} transparency - one could provide function
  1252.      * @param {boolean} [skip_render] - if specified, do not perform rendering */
  1253.    changedGlobalTransparency(transparency) {
  1254.       const func = isFunc(transparency) ? transparency : null;
  1255.       if (func || (transparency === undefined))
  1256.          transparency = this.ctrl.transparency;
  1258.       this.#toplevel?.traverse(node => {
  1259.          // ignore all kind of extra elements
  1260.          if (node?.material?.inherentOpacity === undefined)
  1261.             return;
  1263.          const t = func ? func(node) : undefined;
  1264.          if (t !== undefined)
  1265.             node.material.opacity = 1 - t;
  1266.          else
  1267.             node.material.opacity = Math.min(1 - (transparency || 0), node.material.inherentOpacity);
  1269.          node.material.depthWrite = node.material.opacity === 1;
  1270.          node.material.transparent = node.material.opacity < 1;
  1271.       });
  1273.       this.render3D();
  1274.    }
  1276.    /** @summary Method used to interactively change material kinds */
  1277.    changedMaterial() {
  1278.       this.#toplevel?.traverse(node => {
  1279.          // ignore all kind of extra elements
  1280.          if (node.material?.inherentArgs !== undefined)
  1281.             node.material = createMaterial(this.ctrl, node.material.inherentArgs);
  1282.       });
  1284.       this.render3D(-1);
  1285.    }
  1287.    /** @summary Change for all materials that property */
  1288.    changeMaterialProperty(name) {
  1289.       const value = this.ctrl[name];
  1290.       if (value === undefined)
  1291.          return console.error('No property ', name);
  1293.       this.#toplevel?.traverse(node => {
  1294.          // ignore all kind of extra elements
  1295.          if (node.material?.inherentArgs === undefined) return;
  1297.          if (node.material[name] !== undefined) {
  1298.             node.material[name] = value;
  1299.             node.material.needsUpdate = true;
  1300.          }
  1301.       });
  1303.       this.render3D();
  1304.    }
  1306.    /** @summary Reset transformation */
  1307.    resetTransformation() {
  1308.       this.changedTransformation('reset');
  1309.    }
  1311.    /** @summary Method should be called when transformation parameters were changed */
  1312.    changedTransformation(arg) {
  1313.       if (!this.#toplevel) return;
  1315.       const ctrl = this.ctrl,
  1316.             translation = new THREE.Matrix4(),
  1317.             vect2 = new THREE.Vector3();
  1319.       if (arg === 'reset')
  1320.          ctrl.trans_z = ctrl.trans_radial = 0;
  1322.       this.#toplevel.traverse(mesh => {
  1323.          if (mesh.stack !== undefined) {
  1324.             const node = mesh.parent;
  1326.             if (arg === 'reset') {
  1327.                if (node.matrix0) {
  1328.                   node.matrix.copy(node.matrix0);
  1329.                   node.matrix.decompose(node.position, node.quaternion, node.scale);
  1330.                   node.matrixWorldNeedsUpdate = true;
  1331.                }
  1332.                delete node.matrix0;
  1333.                delete node.vect0;
  1334.                delete node.vect1;
  1335.                delete node.minvert;
  1336.                return;
  1337.             }
  1339.             if (node.vect0 === undefined) {
  1340.                node.matrix0 = node.matrix.clone();
  1341.                node.minvert = new THREE.Matrix4().copy(node.matrixWorld).invert();
  1343.                const box3 = getBoundingBox(mesh, null, true),
  1344.                    signz = mesh._flippedMesh ? -1 : 1;
  1346.                // real center of mesh in local coordinates
  1347.                node.vect0 = new THREE.Vector3((box3.max.x + box3.min.x) / 2, (box3.max.y + box3.min.y) / 2, signz * (box3.max.z + box3.min.z) / 2).applyMatrix4(node.matrixWorld);
  1348.                node.vect1 = new THREE.Vector3(0, 0, 0).applyMatrix4(node.minvert);
  1349.             }
  1351.             vect2.set(ctrl.trans_radial * node.vect0.x, ctrl.trans_radial * node.vect0.y, ctrl.trans_z * node.vect0.z).applyMatrix4(node.minvert).sub(node.vect1);
  1353.             node.matrix.multiplyMatrices(node.matrix0, translation.makeTranslation(vect2.x, vect2.y, vect2.z));
  1354.             node.matrix.decompose(node.position, node.quaternion, node.scale);
  1355.             node.matrixWorldNeedsUpdate = true;
  1356.          } else if (mesh.stacks !== undefined) {
  1357.             mesh.instanceMatrix.needsUpdate = true;
  1359.             if (arg === 'reset') {
  1360.                mesh.trans?.forEach((item, i) => {
  1361.                   mesh.setMatrixAt(i, item.matrix0);
  1362.                });
  1363.                delete mesh.trans;
  1364.                return;
  1365.             }
  1367.             if (mesh.trans === undefined) {
  1368.                mesh.trans = new Array(mesh.count);
  1370.                mesh.geometry.computeBoundingBox();
  1372.                for (let i = 0; i < mesh.count; i++) {
  1373.                   const item = {
  1374.                      matrix0: new THREE.Matrix4(),
  1375.                      minvert: new THREE.Matrix4()
  1376.                   };
  1378.                   mesh.trans[i] = item;
  1380.                   mesh.getMatrixAt(i, item.matrix0);
  1381.                   item.minvert.copy(item.matrix0).invert();
  1383.                   const box3 = new THREE.Box3().copy(mesh.geometry.boundingBox).applyMatrix4(item.matrix0);
  1385.                   item.vect0 = new THREE.Vector3((box3.max.x + box3.min.x) / 2, (box3.max.y + box3.min.y) / 2, (box3.max.z + box3.min.z) / 2);
  1386.                   item.vect1 = new THREE.Vector3(0, 0, 0).applyMatrix4(item.minvert);
  1387.                }
  1388.             }
  1390.             const mm = new THREE.Matrix4();
  1392.             mesh.trans?.forEach((item, i) => {
  1393.                vect2.set(ctrl.trans_radial * item.vect0.x, ctrl.trans_radial * item.vect0.y, ctrl.trans_z * item.vect0.z).applyMatrix4(item.minvert).sub(item.vect1);
  1395.                mm.multiplyMatrices(item.matrix0, translation.makeTranslation(vect2.x, vect2.y, vect2.z));
  1397.                mesh.setMatrixAt(i, mm);
  1398.             });
  1399.          }
  1400.       });
  1402.       this.#toplevel.updateMatrixWorld();
  1404.       // axes drawing always triggers rendering
  1405.       if (arg !== 'norender')
  1406.          this.drawAxesAndOverlay();
  1407.    }
  1409.    /** @summary Should be called when auto rotate property changed */
  1410.    changedAutoRotate() {
  1411.       this.autorotate(2.5);
  1412.    }
  1414.    /** @summary Method should be called when changing axes drawing */
  1415.    changedAxes() {
  1416.       if (isStr(this.ctrl._axis))
  1417.          this.ctrl._axis = parseInt(this.ctrl._axis);
  1419.       this.drawAxesAndOverlay();
  1420.    }
  1422.    /** @summary Method should be called to change background color */
  1423.    changedBackground(val) {
  1424.       if (val !== undefined)
  1425.          this.ctrl.background = val;
  1426.       this.#scene.background = new THREE.Color(this.ctrl.background);
  1427.       this.#renderer.setClearColor(this.#scene.background, 1);
  1428.       this.render3D(0);
  1430.       if (this.#toolbar) {
  1431.          const bkgr = new THREE.Color(this.ctrl.background);
  1432.          this.#toolbar.changeBrightness((bkgr.r + bkgr.g + bkgr.b) < 1);
  1433.       }
  1434.    }
  1436.    /** @summary Display control GUI */
  1437.    showControlGui(on) {
  1438.       // while complete geo drawing can be removed until dat is loaded - just check and ignore callback
  1439.       if (!this.ctrl) return;
  1441.       if (on === 'toggle')
  1442.          on = !this.#gui;
  1443.        else if (on === undefined)
  1444.          on = this.ctrl.show_controls;
  1446.       this.ctrl.show_controls = on;
  1448.       if (this.#gui) {
  1449.          if (!on) {
  1450.             this.#gui.destroy();
  1451.             this.#gui = undefined;
  1452.          }
  1453.          return;
  1454.       }
  1456.       if (!on || !this.#renderer)
  1457.          return;
  1459.       const main = this.selectDom();
  1460.       if (main.style('position') === 'static')
  1461.          main.style('position', 'relative');
  1463.       this.#gui = new GUI({ container: main.node(), closeFolders: true, width: Math.min(300, this.#scene_width / 2),
  1464.                             title: 'Settings' });
  1466.       const dom = this.#gui.domElement;
  1467.       dom.style.position = 'absolute';
  1468.       dom.style.top = 0;
  1469.       dom.style.right = 0;
  1471.       this.#gui.painter = this;
  1473.       const makeLil = items => {
  1474.          const lil = {};
  1475.          items.forEach(i => { lil[i.name] = i.value; });
  1476.          return lil;
  1477.       };
  1479.       if (!this.ctrl.project) {
  1480.          const selection = this.#gui.addFolder('Selection');
  1482.          if (!this.ctrl.maxnodes)
  1483.             this.ctrl.maxnodes = this.#clones?.getMaxVisNodes() ?? 10000;
  1484.          if (!this.ctrl.vislevel)
  1485.             this.ctrl.vislevel = this.#clones?.getVisLevel() ?? 3;
  1486.          if (!this.ctrl.maxfaces)
  1487.             this.ctrl.maxfaces = 200000 * this.ctrl.more;
  1488.          this.ctrl.more = 1;
  1490.          selection.add(this.ctrl, 'vislevel', 1, 99, 1)
  1491.                      .name('Visibility level')
  1492.                      .listen().onChange(() => this.startRedraw(500));
  1493.          selection.add(this.ctrl, 'maxnodes', 0, 500000, 1000)
  1494.                   .name('Visible nodes')
  1495.                   .listen().onChange(() => this.startRedraw(500));
  1496.          selection.add(this.ctrl, 'maxfaces', 0, 5000000, 100000)
  1497.                   .name('Max faces')
  1498.                   .listen().onChange(() => this.startRedraw(500));
  1499.       }
  1501.       if (this.ctrl.project) {
  1502.          const bound = this.getGeomBoundingBox(this.getProjectionSource(), 0.01),
  1503.              axis = this.ctrl.project;
  1505.          if (this.ctrl.projectPos === undefined)
  1506.             this.ctrl.projectPos = (bound.min[axis] + bound.max[axis])/2;
  1508.          this.#gui.add(this.ctrl, 'projectPos', bound.min[axis], bound.max[axis])
  1509.              .name(axis.toUpperCase() + ' projection')
  1510.              .onChange(() => this.startDrawGeometry());
  1511.       } else {
  1512.          // Clipping Options
  1514.          const clipFolder = this.#gui.addFolder('Clipping');
  1516.          for (let naxis = 0; naxis < 3; ++naxis) {
  1517.             const cc = this.ctrl.clip[naxis],
  1518.                 axisC = cc.name.toUpperCase();
  1520.             clipFolder.add(cc, 'enabled')
  1521.                 .name('Enable ' + axisC)
  1522.                 .listen().onChange(() => this.changedClipping(-1));
  1524.             clipFolder.add(cc, 'value', cc.min, cc.max, cc.step)
  1525.                 .name(axisC + ' position')
  1526.                 .listen().onChange(() => this.changedClipping(naxis));
  1527.          }
  1529.          clipFolder.add(this.ctrl, 'clipIntersect').name('Clip intersection')
  1530.                    .onChange(() => this.changedClipping(-1));
  1532.          clipFolder.add(this.ctrl, 'clipVisualize').name('Visualize')
  1533.                    .onChange(() => this.changedClipping(-1));
  1534.       }
  1536.       // Scene Options
  1538.       const scene = this.#gui.addFolder('Scene');
  1539.       // following items used in handlers and cannot be constants
  1540.       let light_pnts = null, strength = null, hcolor = null, overlay = null;
  1542.       scene.add(this.ctrl.light, 'kind', makeLil(this.ctrl.lightKindItems)).name('Light')
  1543.            .listen().onChange(() => {
  1544.               light_pnts.show(this.ctrl.light.kind === 'mix' || this.ctrl.light.kind === 'points');
  1545.               this.changedLight();
  1546.            });
  1548.       this.ctrl.light._pnts = this.ctrl.light.specular ? 0 : (this.ctrl.light.front ? 1 : 2);
  1549.       light_pnts = scene.add(this.ctrl.light, '_pnts', { specular: 0, front: 1, box: 2 })
  1550.                 .name('Positions')
  1551.                 .show(this.ctrl.light.kind === 'mix' || this.ctrl.light.kind === 'points')
  1552.                 .onChange(v => {
  1553.                    this.ctrl.light.specular = (v === 0);
  1554.                    this.ctrl.light.front = (v === 1);
  1555.                    this.ctrl.light.top = this.ctrl.light.bottom = this.ctrl.light.left = this.ctrl.light.right = (v === 2);
  1556.                    this.changedLight();
  1557.                 });
  1559.       scene.add(this.ctrl.light, 'power', 0, 10, 0.01).name('Power')
  1560.            .listen().onChange(() => this.changedLight());
  1562.       scene.add(this.ctrl, 'use_fog').name('Fog')
  1563.            .listen().onChange(() => this.changedUseFog());
  1565.       // Appearance Options
  1567.       const appearance = this.#gui.addFolder('Appearance');
  1569.       this.ctrl._highlight = !this.ctrl.highlight ? 0 : this.ctrl.highlight_bloom ? 2 : 1;
  1570.       appearance.add(this.ctrl, '_highlight', { none: 0, normal: 1, bloom: 2 }).name('Highlight Selection')
  1571.                 .listen().onChange(() => {
  1572.                    this.changedHighlight(this.ctrl._highlight);
  1573.                    strength.show(this.ctrl._highlight === 2);
  1574.                    hcolor.show(this.ctrl._highlight === 1);
  1575.                 });
  1577.       hcolor = appearance.addColor(this.ctrl, 'highlight_color').name('Hightlight color')
  1578.                          .show(this.ctrl._highlight === 1);
  1579.       strength = appearance.add(this.ctrl, 'bloom_strength', 0, 3).name('Bloom strength')
  1580.                            .listen().onChange(() => this.changedHighlight())
  1581.                            .show(this.ctrl._highlight === 2);
  1583.       appearance.addColor(this.ctrl, 'background').name('Background')
  1584.                 .onChange(col => this.changedBackground(col));
  1586.       appearance.add(this.ctrl, '_axis', { none: 0, side: 1, center: 2 }).name('Axes')
  1587.                     .onChange(() => this.changedAxes());
  1589.       if (!this.ctrl.project) {
  1590.          appearance.add(this.ctrl, 'rotate').name('Autorotate')
  1591.                       .listen().onChange(() => this.changedAutoRotate());
  1592.       }
  1594.       // Material options
  1596.       const material = this.#gui.addFolder('Material');
  1597.       let material_props = [];
  1599.       const addMaterialProp = () => {
  1600.          material_props.forEach(f => f.destroy());
  1601.          material_props = [];
  1603.          const props = this.ctrl.getMaterialCfg()?.props;
  1604.          if (!props) return;
  1606.          props.forEach(prop => {
  1607.             const f = material.add(this.ctrl, prop.name, prop.min, prop.max, prop.step).onChange(() => {
  1608.                this.changeMaterialProperty(prop.name);
  1609.             });
  1610.             material_props.push(f);
  1611.          });
  1612.       };
  1614.       material.add(this.ctrl, 'material_kind', makeLil(this.ctrl.materialKinds)).name('Kind')
  1615.               .listen().onChange(() => {
  1616.             addMaterialProp();
  1617.             this.ensureBloom(false);
  1618.             this.changedMaterial();
  1619.             this.changedHighlight(); // for some materials bloom will not work
  1620.       });
  1622.       material.add(this.ctrl, 'transparency', 0, 1, 0.001).name('Transparency')
  1623.               .listen().onChange(value => this.changedGlobalTransparency(value));
  1625.       material.add(this.ctrl, 'wireframe').name('Wireframe')
  1626.               .listen().onChange(() => this.changedWireFrame());
  1628.       material.add(this, 'showMaterialDocu').name('Docu from threejs.org');
  1630.       addMaterialProp();
  1633.       // Camera options
  1634.       const camera = this.#gui.addFolder('Camera');
  1636.       camera.add(this.ctrl, 'camera_kind', makeLil(this.ctrl.cameraKindItems))
  1637.             .name('Kind').listen().onChange(() => {
  1638.             overlay.show(this.ctrl.camera_kind.indexOf('ortho') === 0);
  1639.             this.changeCamera();
  1640.       });
  1642.       camera.add(this.ctrl, 'can_rotate').name('Can rotate')
  1643.                 .listen().onChange(() => this.changeCanRotate());
  1645.       camera.add(this, 'focusCamera').name('Reset position');
  1647.       overlay = camera.add(this.ctrl, 'camera_overlay', makeLil(this.ctrl.cameraOverlayItems))
  1648.                       .name('Overlay').listen().onChange(() => this.changeCamera())
  1649.                       .show(this.ctrl.camera_kind.indexOf('ortho') === 0);
  1651.       // Advanced Options
  1652.       if (this.#webgl) {
  1653.          const advanced = this.#gui.addFolder('Advanced');
  1655.          advanced.add(this.ctrl, 'depthTest').name('Depth test')
  1656.             .listen().onChange(() => this.changedDepthTest());
  1658.          advanced.add(this.ctrl, 'depthMethod', makeLil(this.ctrl.depthMethodItems))
  1659.              .name('Rendering order')
  1660.              .onChange(method => this.changedDepthMethod(method));
  1662.          advanced.add(this, 'resetAdvanced').name('Reset');
  1663.       }
  1665.       // Transformation Options
  1666.       if (!this.ctrl.project) {
  1667.          const transform = this.#gui.addFolder('Transform');
  1668.          transform.add(this.ctrl, 'trans_z', 0.0, 3.0, 0.01)
  1669.                      .name('Z axis')
  1670.                      .listen().onChange(() => this.changedTransformation());
  1671.          transform.add(this.ctrl, 'trans_radial', 0.0, 3.0, 0.01)
  1672.                   .name('Radial')
  1673.                   .listen().onChange(() => this.changedTransformation());
  1675.          transform.add(this, 'resetTransformation').name('Reset');
  1677.          if (this.ctrl.trans_z || this.ctrl.trans_radial) transform.open();
  1678.       }
  1679.    }
  1681.    /** @summary show material documentation from https://threejs.org  */
  1682.    showMaterialDocu() {
  1683.       const cfg = this.ctrl.getMaterialCfg();
  1684.       if (cfg?.name && typeof window !== 'undefined')
  1685.          window.open('https://threejs.org/docs/index.html#api/en/materials/' + cfg.name, '_blank');
  1686.    }
  1688.    /** @summary Should be called when configuration of highlight is changed */
  1689.    changedHighlight(arg) {
  1690.       if (arg !== undefined) {
  1691.          this.ctrl.highlight = Boolean(arg);
  1692.          if (this.ctrl.highlight)
  1693.             this.ctrl.highlight_bloom = (arg === 2);
  1694.       }
  1696.       this.ensureBloom();
  1698.       if (!this.ctrl.highlight)
  1699.          this.highlightMesh(null);
  1701.       this.getSubordinates()?.forEach(p => {
  1702.          p.ctrl.highlight = this.ctrl.highlight;
  1703.          p.ctrl.highlight_bloom = this.ctrl.highlight_bloom;
  1704.          p.ctrl.bloom_strength = this.ctrl.bloom_strength;
  1705.          p.changedHighlight();
  1706.       });
  1707.    }
  1709.    /** @summary Handle change of can rotate */
  1710.    changeCanRotate(on) {
  1711.       if (on !== undefined)
  1712.          this.ctrl.can_rotate = on;
  1713.       if (this.#controls)
  1714.          this.#controls.enableRotate = this.ctrl.can_rotate;
  1715.    }
  1717.    /** @summary Change use fog property */
  1718.    changedUseFog() {
  1719.       this.#scene.fog = this.ctrl.use_fog ? this.#fog : null;
  1721.       this.render3D();
  1722.    }
  1724.    /** @summary Handle change of camera kind */
  1725.    changeCamera() {
  1726.       // force control recreation
  1727.       if (this.#controls) {
  1728.           this.#controls.cleanup();
  1729.           this.#controls = undefined;
  1730.       }
  1732.       this.ensureBloom(false);
  1734.       // recreate camera
  1735.       this.createCamera();
  1737.       this.createSpecialEffects();
  1739.       // set proper position
  1740.       this.adjustCameraPosition(true);
  1742.       // this.drawOverlay();
  1744.       this.addOrbitControls();
  1746.       this.render3D();
  1748.       // this.#scene_size = undefined; // ensure reassign of camera position
  1750.       // this.#first_drawing = true;
  1751.       // this.startDrawGeometry(true);
  1752.    }
  1754.    /** @summary create bloom effect */
  1755.    ensureBloom(on) {
  1756.       if (on === undefined) {
  1757.          if (this.ctrl.highlight_bloom === 0)
  1758.              this.ctrl.highlight_bloom = this.#webgl && !browser.android;
  1760.          on = this.ctrl.highlight_bloom && this.ctrl.getMaterialCfg()?.emissive;
  1761.       }
  1763.       if (on && !this.#bloomComposer) {
  1764.          this.#camera.layers.enable(_BLOOM_SCENE);
  1765.          this.#bloomComposer = new THREE.EffectComposer(this.#renderer);
  1766.          this.#bloomComposer.addPass(new THREE.RenderPass(this.#scene, this.#camera));
  1767.          const pass = new THREE.UnrealBloomPass(new THREE.Vector2(this.#scene_width, this.#scene_height), 1.5, 0.4, 0.85);
  1768.          pass.threshold = 0;
  1769.          pass.radius = 0;
  1770.          pass.renderToScreen = true;
  1771.          this.#bloomComposer.addPass(pass);
  1772.          this.#renderer.autoClear = false;
  1773.       } else if (!on && this.#bloomComposer) {
  1774.          this.#bloomComposer.dispose();
  1775.          this.#bloomComposer = undefined;
  1776.          if (this.#renderer)
  1777.             this.#renderer.autoClear = true;
  1778.          this.#camera?.layers.disable(_BLOOM_SCENE);
  1779.          this.#camera?.layers.set(_ENTIRE_SCENE);
  1780.       }
  1782.       if (this.#bloomComposer?.passes)
  1783.          this.#bloomComposer.passes[1].strength = this.ctrl.bloom_strength;
  1784.    }
  1787.    /** @summary Show context menu for orbit control
  1788.      * @private */
  1789.    orbitContext(evnt, intersects) {
  1790.       createMenu(evnt, this).then(menu => {
  1791.          let numitems = 0, numnodes = 0, cnt = 0;
  1792.          if (intersects) {
  1793.             for (let n = 0; n < intersects.length; ++n) {
  1794.                if (getIntersectStack(intersects[n])) numnodes++;
  1795.                if (intersects[n].geo_name) numitems++;
  1796.             }
  1797.          }
  1799.          if (numnodes + numitems === 0)
  1800.             this.fillContextMenu(menu);
  1801.           else {
  1802.             const many = (numnodes + numitems) > 1;
  1804.             if (many) menu.header((numitems > 0) ? 'Items' : 'Nodes');
  1806.             for (let n = 0; n < intersects.length; ++n) {
  1807.                const obj = intersects[n].object,
  1808.                      stack = getIntersectStack(intersects[n]);
  1809.                let name, itemname, hdr;
  1811.                if (obj.geo_name) {
  1812.                   itemname = obj.geo_name;
  1813.                   if (itemname.indexOf('<prnt>') === 0)
  1814.                      itemname = (this.getItemName() || 'top') + itemname.slice(6);
  1815.                   name = itemname.slice(itemname.lastIndexOf('/')+1);
  1816.                   if (!name) name = itemname;
  1817.                   hdr = name;
  1818.                } else if (stack) {
  1819.                   name = this.#clones.getStackName(stack);
  1820.                   itemname = this.getStackFullName(stack);
  1821.                   hdr = this.getItemName();
  1822.                   if (name.indexOf('Nodes/') === 0)
  1823.                      hdr = name.slice(6);
  1824.                   else if (name)
  1825.                      hdr = name;
  1826.                   else if (!hdr)
  1827.                      hdr = 'header';
  1828.                } else
  1829.                   continue;
  1832.                cnt++;
  1834.                menu.add((many ? 'sub:' : 'header:') + hdr, itemname, arg => this.activateInBrowser([arg], true));
  1836.                menu.add('Browse', itemname, arg => this.activateInBrowser([arg], true));
  1838.                if (this.getHPainter())
  1839.                   menu.add('Inspect', itemname, arg => this.getHPainter().display(arg, kInspect));
  1841.                if (isFunc(this.hidePhysicalNode)) {
  1842.                   menu.add('Hide', itemname, arg => this.hidePhysicalNode([arg]));
  1843.                   if (cnt > 1) {
  1844.                      menu.add('Hide all before', n, indx => {
  1845.                         const items = [];
  1846.                         for (let i = 0; i < indx; ++i) {
  1847.                            const stack2 = getIntersectStack(intersects[i]);
  1848.                            if (stack2) items.push(this.getStackFullName(stack2));
  1849.                         }
  1850.                         this.hidePhysicalNode(items);
  1851.                      });
  1852.                   }
  1853.                } else if (obj.geo_name) {
  1854.                   menu.add('Hide', n, indx => {
  1855.                      const mesh = intersects[indx].object;
  1856.                      mesh.visible = false; // just disable mesh
  1857.                      if (mesh.geo_object) mesh.geo_object.$hidden_via_menu = true; // and hide object for further redraw
  1858.                      menu.painter.render3D();
  1859.                   }, 'Hide this physical node');
  1861.                   if (many) menu.endsub();
  1863.                   continue;
  1864.                }
  1866.                const wireframe = this.accessObjectWireFrame(obj);
  1867.                if (wireframe !== undefined) {
  1868.                   menu.addchk(wireframe, 'Wireframe', n, indx => {
  1869.                      const m = intersects[indx].object.material;
  1870.                      m.wireframe = !m.wireframe;
  1871.                      this.render3D();
  1872.                   }, 'Toggle wireframe mode for the node');
  1873.                }
  1875.                if (cnt > 1) {
  1876.                   menu.add('Manifest', n, indx => {
  1877.                      if (this.#last_manifest)
  1878.                         this.#last_manifest.wireframe = !this.#last_manifest.wireframe;
  1880.                      this.#last_hidden?.forEach(obj2 => { obj2.visible = true; });
  1882.                      this.#last_hidden = [];
  1884.                      for (let i = 0; i < indx; ++i)
  1885.                         this.#last_hidden.push(intersects[i].object);
  1887.                      this.#last_hidden.forEach(obj2 => { obj2.visible = false; });
  1889.                      this.#last_manifest = intersects[indx].object.material;
  1891.                      this.#last_manifest.wireframe = !this.#last_manifest.wireframe;
  1893.                      this.render3D();
  1894.                   }, 'Manifest selected node');
  1895.                }
  1897.                menu.add('Focus', n, indx => {
  1898.                   this.focusCamera(intersects[indx].object);
  1899.                });
  1901.                if (!this.#geom_viewer) {
  1902.                   menu.add('Hide', n, indx => {
  1903.                      const resolve = this.#clones.resolveStack(intersects[indx].object.stack);
  1904.                      if (resolve.obj && (resolve.node.kind === kindGeo) && resolve.obj.fVolume) {
  1905.                         setGeoBit(resolve.obj.fVolume, geoBITS.kVisThis, false);
  1906.                         updateBrowserIcons(resolve.obj.fVolume, this.getHPainter());
  1907.                      } else if (resolve.obj && (resolve.node.kind === kindEve)) {
  1908.                         resolve.obj.fRnrSelf = false;
  1909.                         updateBrowserIcons(resolve.obj, this.getHPainter());
  1910.                      }
  1912.                      this.testGeomChanges();// while many volumes may disappear, recheck all of them
  1913.                   }, 'Hide all logical nodes of that kind');
  1914.                   menu.add('Hide only this', n, indx => {
  1915.                      this.#clones.setPhysNodeVisibility(getIntersectStack(intersects[indx]), false);
  1916.                      this.testGeomChanges();
  1917.                   }, 'Hide only this physical node');
  1918.                   if (n > 1) {
  1919.                     menu.add('Hide all before', n, indx => {
  1920.                         for (let k = 0; k < indx; ++k)
  1921.                            this.#clones.setPhysNodeVisibility(getIntersectStack(intersects[k]), false);
  1922.                         this.testGeomChanges();
  1923.                      }, 'Hide all physical nodes before that');
  1924.                   }
  1925.                }
  1927.                if (many) menu.endsub();
  1928.             }
  1929.          }
  1930.          menu.show();
  1931.       });
  1932.    }
  1934.    /** @summary Filter some objects from three.js intersects array */
  1935.    filterIntersects(intersects) {
  1936.       if (!intersects?.length)
  1937.          return intersects;
  1939.       // check redirection
  1940.       for (let n = 0; n < intersects.length; ++n) {
  1941.          if (intersects[n].object.geo_highlight)
  1942.             intersects[n].object = intersects[n].object.geo_highlight;
  1943.       }
  1945.       // remove all elements without stack - indicator that this is geometry object
  1946.       // also remove all objects which are mostly transparent
  1947.       for (let n = intersects.length - 1; n >= 0; --n) {
  1948.          const obj = intersects[n].object;
  1949.          let unique = obj.visible && (getIntersectStack(intersects[n]) || (obj.geo_name !== undefined));
  1951.          if (unique && obj.material && (obj.material.opacity !== undefined))
  1952.             unique = (obj.material.opacity >= 0.1);
  1954.          if (obj.jsroot_special) unique = false;
  1956.          for (let k = 0; (k < n) && unique; ++k) {
  1957.             if (intersects[k].object === obj)
  1958.                unique = false;
  1959.          }
  1961.          if (!unique) intersects.splice(n, 1);
  1962.       }
  1964.       const clip = this.ctrl.clip;
  1966.       if (clip[0].enabled || clip[1].enabled || clip[2].enabled) {
  1967.          const clippedIntersects = [];
  1969.          for (let i = 0; i < intersects.length; ++i) {
  1970.             const point = intersects[i].point, special = (intersects[i].object.type === 'Points');
  1971.             let clipped = true;
  1973.             if (clip[0].enabled && ((this.#clip_planes[0].normal.dot(point) > this.#clip_planes[0].constant) ^ special)) clipped = false;
  1974.             if (clip[1].enabled && ((this.#clip_planes[1].normal.dot(point) > this.#clip_planes[1].constant) ^ special)) clipped = false;
  1975.             if (clip[2].enabled && (this.#clip_planes[2].normal.dot(point) > this.#clip_planes[2].constant)) clipped = false;
  1977.             if (!clipped) clippedIntersects.push(intersects[i]);
  1978.          }
  1980.          intersects = clippedIntersects;
  1981.       }
  1983.       return intersects;
  1984.    }
  1986.    /** @summary test camera position
  1987.      * @desc function analyzes camera position and start redraw of geometry
  1988.      *  if objects in view may be changed */
  1989.    testCameraPositionChange() {
  1990.       if (!this.ctrl.select_in_view || this.#draw_all_nodes)
  1991.          return;
  1993.       const matrix = createProjectionMatrix(this.#camera),
  1994.             frustum = createFrustum(matrix);
  1996.       // check if overall bounding box seen
  1997.       if (!frustum.CheckBox(this.getGeomBoundingBox()))
  1998.          this.startDrawGeometry();
  1999.    }
  2001.    /** @summary Resolve stack */
  2002.    resolveStack(stack) {
  2003.       return this.#clones && stack ? this.#clones.resolveStack(stack) : null;
  2004.    }
  2006.    /** @summary Returns stack full name
  2007.      * @desc Includes item name of top geo object */
  2008.    getStackFullName(stack) {
  2009.       const mainitemname = this.getItemName(),
  2010.           sub = this.resolveStack(stack);
  2011.       if (!sub || !sub.name)
  2012.          return mainitemname;
  2013.       return mainitemname ? mainitemname + '/' + sub.name : sub.name;
  2014.    }
  2016.    /** @summary Add handler which will be called when element is highlighted in geometry drawing
  2017.      * @desc Handler should have highlightMesh function with same arguments as TGeoPainter  */
  2018.    addHighlightHandler(handler) {
  2019.       if (!isFunc(handler?.highlightMesh))
  2020.          return;
  2021.       if (!this.#highlight_handlers)
  2022.          this.#highlight_handlers = [];
  2023.       this.#highlight_handlers.push(handler);
  2024.    }
  2026.    /** @summary perform mesh highlight */
  2027.    highlightMesh(active_mesh, color, geo_object, geo_index, geo_stack, no_recursive) {
  2028.       if (geo_object) {
  2029.          active_mesh = active_mesh ? [active_mesh] : [];
  2030.          const extras = this.getExtrasContainer();
  2031.          if (extras) {
  2032.             extras.traverse(obj3d => {
  2033.                if ((obj3d.geo_object === geo_object) && (active_mesh.indexOf(obj3d) < 0))
  2034.                   active_mesh.push(obj3d);
  2035.             });
  2036.          }
  2037.       } else if (geo_stack && this.#toplevel) {
  2038.          active_mesh = [];
  2039.          this.#toplevel.traverse(mesh => {
  2040.             if ((mesh instanceof THREE.Mesh) && isSameStack(mesh.stack, geo_stack))
  2041.                active_mesh.push(mesh);
  2042.          });
  2043.       } else
  2044.          active_mesh = active_mesh ? [active_mesh] : [];
  2046.       if (!active_mesh.length)
  2047.          active_mesh = null;
  2049.       if (active_mesh) {
  2050.          // check if highlight is disabled for correspondent objects kinds
  2051.          if (active_mesh[0].geo_object) {
  2052.             if (!this.ctrl.highlight_scene)
  2053.                active_mesh = null;
  2054.          } else
  2055.             if (!this.ctrl.highlight)
  2056.                active_mesh = null;
  2057.       }
  2059.       if (!no_recursive) {
  2060.          // check all other painters
  2062.          if (active_mesh) {
  2063.             if (!geo_object) geo_object = active_mesh[0].geo_object;
  2064.             if (!geo_stack) geo_stack = active_mesh[0].stack;
  2065.          }
  2067.          const lst = this.#highlight_handlers || this.getCentral()?.getSubordinates().concat([this.getCentral()]) || this.getSubordinates();
  2069.          for (let k = 0; k < lst?.length; ++k) {
  2070.             if (lst[k] !== this)
  2071.                lst[k].highlightMesh(null, color, geo_object, geo_index, geo_stack, true);
  2072.          }
  2073.       }
  2075.       const curr_mesh = this.#selected_mesh;
  2076.       if (!curr_mesh && !active_mesh)
  2077.          return false;
  2079.       const get_ctrl = mesh => mesh.get_ctrl ? mesh.get_ctrl() : new GeoDrawingControl(mesh, this.ctrl.highlight_bloom && this.#bloomComposer);
  2081.       let same = false;
  2083.       // check if selections are the same
  2084.       if (curr_mesh && active_mesh && (curr_mesh.length === active_mesh.length)) {
  2085.          same = true;
  2086.          for (let k = 0; (k < curr_mesh.length) && same; ++k) {
  2087.             if ((curr_mesh[k] !== active_mesh[k]) || get_ctrl(curr_mesh[k]).checkHighlightIndex(geo_index))
  2088.                same = false;
  2089.          }
  2090.       }
  2091.       if (same)
  2092.          return Boolean(curr_mesh);
  2094.       curr_mesh?.forEach(mesh => get_ctrl(mesh).setHighlight());
  2096.       this.#selected_mesh = active_mesh;
  2098.       active_mesh?.forEach(mesh => get_ctrl(mesh).setHighlight(color || new THREE.Color(this.ctrl.highlight_color), geo_index));
  2100.       this.render3D(0);
  2102.       return Boolean(active_mesh);
  2103.    }
  2105.    /** @summary handle mouse click event */
  2106.    processMouseClick(pnt, intersects, evnt) {
  2107.       if (!intersects.length)
  2108.          return;
  2110.       const mesh = intersects[0].object;
  2111.       if (!mesh.get_ctrl)
  2112.          return;
  2114.       const ctrl = mesh.get_ctrl(),
  2115.             click_indx = ctrl.extractIndex(intersects[0]);
  2117.       ctrl.evnt = evnt;
  2119.       if (ctrl.setSelected('blue', click_indx))
  2120.          this.render3D();
  2122.       ctrl.evnt = null;
  2123.    }
  2125.    /** @summary Configure mouse delay, required for complex geometries */
  2126.    setMouseTmout(val) {
  2127.       if (this.ctrl)
  2128.          this.ctrl.mouse_tmout = val;
  2130.       if (this.#controls)
  2131.          this.#controls.mouse_tmout = val;
  2132.    }
  2134.    /** @summary Configure depth method, used for render order production.
  2135.      * @param {string} method - Allowed values: 'ray', 'box','pnt', 'size', 'dflt' */
  2136.    setDepthMethod(method) {
  2137.       if (this.ctrl)
  2138.          this.ctrl.depthMethod = method;
  2139.    }
  2141.    /** @summary Returns if camera can rotated */
  2142.    canRotateCamera() {
  2143.       if (this.ctrl.can_rotate === false)
  2144.          return false;
  2145.       if (!this.ctrl.can_rotate && (this.isOrthoCamera() || this.ctrl.project))
  2146.          return false;
  2147.       return true;
  2148.    }
  2150.    /** @summary Add orbit control */
  2151.    addOrbitControls() {
  2152.       if (this.#controls || !this.#webgl || this.isBatchMode() || this.#superimpose || isNodeJs()) return;
  2154.       if (!this.getCanvPainter())
  2155.          this.setTooltipAllowed(settings.Tooltip);
  2157.       this.#controls = createOrbitControl(this, this.#camera, this.#scene, this.#renderer, this.#lookat);
  2159.       this.#controls.mouse_tmout = this.ctrl.mouse_tmout; // set larger timeout for geometry processing
  2161.       if (!this.canRotateCamera())
  2162.          this.#controls.enableRotate = false;
  2164.       this.#controls.contextMenu = this.orbitContext.bind(this);
  2166.       this.#controls.processMouseMove = intersects => {
  2167.          // painter already cleaned up, ignore any incoming events
  2168.          if (!this.ctrl || !this.#controls) return;
  2170.          let active_mesh = null, tooltip = null, resolve = null, names = [], geo_object, geo_index, geo_stack;
  2172.          // try to find mesh from intersections
  2173.          for (let k = 0; k < intersects.length; ++k) {
  2174.             const obj = intersects[k].object, stack = getIntersectStack(intersects[k]);
  2175.             if (!obj || !obj.visible) continue;
  2176.             let info = null;
  2177.             if (obj.geo_object)
  2178.                info = obj.geo_name;
  2179.             else if (stack)
  2180.                info = this.getStackFullName(stack);
  2181.             if (!info) continue;
  2183.             if (info.indexOf('<prnt>') === 0)
  2184.                info = this.getItemName() + info.slice(6);
  2186.             names.push(info);
  2188.             if (!active_mesh) {
  2189.                active_mesh = obj;
  2190.                tooltip = info;
  2191.                geo_object = obj.geo_object;
  2192.                if (obj.get_ctrl) {
  2193.                   geo_index = obj.get_ctrl().extractIndex(intersects[k]);
  2194.                   if ((geo_index !== undefined) && isStr(tooltip))
  2195.                      tooltip += ' indx:' + JSON.stringify(geo_index);
  2196.                }
  2197.                geo_stack = stack;
  2199.                if (geo_stack) {
  2200.                   resolve = this.resolveStack(geo_stack);
  2201.                   if (obj.stacks) geo_index = intersects[k].instanceId;
  2202.                }
  2203.             }
  2204.          }
  2206.          this.highlightMesh(active_mesh, undefined, geo_object, geo_index);
  2208.          if (this.ctrl.update_browser) {
  2209.             if (this.ctrl.highlight && tooltip) names = [tooltip];
  2210.             this.activateInBrowser(names);
  2211.          }
  2213.          if (!resolve?.obj)
  2214.             return tooltip;
  2216.          const lines = provideObjectInfo(resolve.obj);
  2217.          lines.unshift(tooltip);
  2219.          return { name: resolve.obj.fName, title: resolve.obj.fTitle || resolve.obj._typename, lines };
  2220.       };
  2222.       this.#controls.processMouseLeave = function() {
  2223.          this.processMouseMove([]); // to disable highlight and reset browser
  2224.       };
  2226.       this.#controls.processDblClick = () => {
  2227.          // painter already cleaned up, ignore any incoming events
  2228.          if (!this.ctrl || !this.#controls) return;
  2230.          if (this.#last_manifest) {
  2231.             this.#last_manifest.wireframe = !this.#last_manifest.wireframe;
  2232.             if (this.#last_hidden)
  2233.                this.#last_hidden.forEach(obj => { obj.visible = true; });
  2234.             this.#last_hidden = undefined;
  2235.             this.#last_manifest = undefined;
  2236.          } else
  2237.             this.adjustCameraPosition(true);
  2239.          this.render3D();
  2240.       };
  2241.    }
  2243.    /** @summary Main function in geometry creation loop
  2244.      * @desc Returns:
  2245.      * - false when nothing todo
  2246.      * - true if one could perform next action immediately
  2247.      * - 1 when call after short timeout required
  2248.      * - 2 when call must be done from processWorkerReply */
  2249.    nextDrawAction() {
  2250.       if (!this.#clones || this.isStage(stageInit))
  2251.          return false;
  2253.       if (this.isStage(stageCollect)) {
  2254.          if (this.#geom_viewer) {
  2255.             this.#draw_all_nodes = false;
  2256.             this.changeStage(stageAnalyze);
  2257.             return true;
  2258.          }
  2260.          // wait until worker is really started
  2261.          if (this.ctrl.use_worker > 0) {
  2262.             if (!this.#worker) {
  2263.                this.startWorker();
  2264.                return 1;
  2265.             }
  2266.             if (!this.#worker_ready)
  2267.                return 1;
  2268.          }
  2270.          // first copy visibility flags and check how many unique visible nodes exists
  2271.          let numvis = this.#first_drawing ? this.#clones.countVisibles() : 0,
  2272.              matrix = null, frustum = null;
  2274.          if (!numvis)
  2275.             numvis = this.#clones.markVisibles(false, false, Boolean(this.#geo_manager) && !this.ctrl.showtop);
  2277.          if (this.ctrl.select_in_view && !this.#first_drawing) {
  2278.             // extract camera projection matrix for selection
  2280.             matrix = createProjectionMatrix(this.#camera);
  2282.             frustum = createFrustum(matrix);
  2284.             // check if overall bounding box seen
  2285.             if (frustum.CheckBox(this.getGeomBoundingBox())) {
  2286.                matrix = null; // not use camera for the moment
  2287.                frustum = null;
  2288.             }
  2289.          }
  2291.          this.#current_face_limit = this.ctrl.maxfaces;
  2292.          if (matrix) this.#current_face_limit *= 1.25;
  2294.          // here we decide if we need worker for the drawings
  2295.          // main reason - too large geometry and large time to scan all camera positions
  2296.          let need_worker = !this.isBatchMode() && browser.isChrome && ((numvis > 10000) || (matrix && (this.#clones.scanVisible() > 1e5)));
  2298.          // worker does not work when starting from file system
  2299.          if (need_worker && source_dir.indexOf('file://') === 0) {
  2300.             console.log('disable worker for jsroot from file system');
  2301.             need_worker = false;
  2302.          }
  2304.          if (need_worker && !this.#worker && (this.ctrl.use_worker >= 0))
  2305.             this.startWorker(); // we starting worker, but it may not be ready so fast
  2307.          if (!need_worker || !this.#worker_ready) {
  2308.             const res = this.#clones.collectVisibles(this.#current_face_limit, frustum);
  2309.             this.#new_draw_nodes = res.lst;
  2310.             this.#draw_all_nodes = res.complete;
  2311.             this.changeStage(stageAnalyze);
  2312.             return true;
  2313.          }
  2315.          const job = {
  2316.             collect: this.#current_face_limit,   // indicator for the command
  2317.             flags: this.#clones.getVisibleFlags(),
  2318.             matrix: matrix ? matrix.elements : null,
  2319.             vislevel: this.#clones.getVisLevel(),
  2320.             maxvisnodes: this.#clones.getMaxVisNodes()
  2321.          };
  2323.          this.submitToWorker(job);
  2325.          this.changeStage(stageWorkerCollect);
  2327.          return 2; // we now waiting for the worker reply
  2328.       }
  2330.       if (this.isStage(stageWorkerCollect)) {
  2331.          // do nothing, we are waiting for worker reply
  2332.          return 2;
  2333.       }
  2335.       if (this.isStage(stageAnalyze)) {
  2336.          // here we merge new and old list of nodes for drawing,
  2337.          // normally operation is fast and can be implemented with one c
  2339.          if (this.#new_append_nodes) {
  2340.             this.#new_draw_nodes = this.#draw_nodes.concat(this.#new_append_nodes);
  2342.             this.#new_append_nodes = undefined;
  2343.          } else if (this.#draw_nodes) {
  2344.             let del;
  2345.             if (this.#geom_viewer)
  2346.                del = this.#draw_nodes;
  2347.             else
  2348.                del = this.#clones.mergeVisibles(this.#new_draw_nodes, this.#draw_nodes);
  2350.             // remove should be fast, do it here
  2351.             for (let n = 0; n < del.length; ++n)
  2352.                this.#clones.createObject3D(del[n].stack, this.#toplevel, 'delete_mesh');
  2354.             if (del.length)
  2355.                this.#drawing_log = `Delete ${del.length} nodes`;
  2356.          }
  2358.          this.#draw_nodes = this.#new_draw_nodes;
  2359.          this.#new_draw_nodes = undefined;
  2360.          this.changeStage(stageCollShapes);
  2361.          return true;
  2362.       }
  2364.       if (this.isStage(stageCollShapes)) {
  2365.          // collect shapes
  2366.          const shapes = this.#clones.collectShapes(this.#draw_nodes);
  2368.          // merge old and new list with produced shapes
  2369.          this.#build_shapes = this.#clones.mergeShapesLists(this.#build_shapes, shapes);
  2371.          this.changeStage(stageStartBuild);
  2372.          return true;
  2373.       }
  2375.       if (this.isStage(stageStartBuild)) {
  2376.          // this is building of geometries,
  2377.          // one can ask worker to build them or do it ourself
  2379.          if (this.canSubmitToWorker()) {
  2380.             const job = { limit: this.#current_face_limit, shapes: [] };
  2381.             let cnt = 0;
  2382.             for (let n = 0; n < this.#build_shapes.length; ++n) {
  2383.                const item = this.#build_shapes[n];
  2384.                // only submit not-done items
  2385.                if (item.ready || item.geom) {
  2386.                   // this is place holder for existing geometry
  2387.                   job.shapes.push({ id: item.id, ready: true, nfaces: countGeometryFaces(item.geom), refcnt: item.refcnt });
  2388.                } else {
  2389.                   job.shapes.push(clone(item, null, true));
  2390.                   cnt++;
  2391.                }
  2392.             }
  2394.             if (cnt > 0) {
  2395.                // only if some geom missing, submit job to the worker
  2396.                this.submitToWorker(job);
  2397.                this.changeStage(stageWorkerBuild);
  2398.                return 2;
  2399.             }
  2400.          }
  2402.          this.changeStage(stageBuild);
  2403.       }
  2405.       if (this.isStage(stageWorkerBuild)) {
  2406.          // waiting shapes from the worker, worker should activate our code
  2407.          return 2;
  2408.       }
  2410.       if (this.isStage(stageBuild) || this.isStage(stageBuildReady)) {
  2411.          if (this.isStage(stageBuild)) {
  2412.             // building shapes
  2414.             const res = this.#clones.buildShapes(this.#build_shapes, this.#current_face_limit, 500);
  2415.             if (res.done) {
  2416.                this.ctrl.info.num_shapes = this.#build_shapes.length;
  2417.                this.changeStage(stageBuildReady);
  2418.             } else {
  2419.                this.ctrl.info.num_shapes = res.shapes;
  2420.                this.#drawing_log = `Creating: ${res.shapes} / ${this.#build_shapes.length} shapes,  ${res.faces} faces`;
  2421.                return true;
  2422.                // if (res.notusedshapes < 30) return true;
  2423.             }
  2424.          }
  2426.          // final stage, create all meshes
  2428.          const tm0 = new Date().getTime(),
  2429.                toplevel = this.ctrl.project ? this.#fullgeom_proj : this.#toplevel;
  2430.          let build_instanced = false, ready = true;
  2432.          if (!this.ctrl.project)
  2433.             build_instanced = this.#clones.createInstancedMeshes(this.ctrl, toplevel, this.#draw_nodes, this.#build_shapes, getRootColors());
  2435.          if (!build_instanced) {
  2436.             for (let n = 0; n < this.#draw_nodes.length; ++n) {
  2437.                const entry = this.#draw_nodes[n];
  2438.                if (entry.done) continue;
  2440.                // shape can be provided with entry itself
  2441.                const shape = entry.server_shape || this.#build_shapes[entry.shapeid];
  2443.                this.createEntryMesh(entry, shape, toplevel);
  2445.                const tm1 = new Date().getTime();
  2446.                if (tm1 - tm0 > 500) { ready = false; break; }
  2447.             }
  2448.          }
  2450.          if (ready) {
  2451.             if (this.ctrl.project) {
  2452.                this.changeStage(stageBuildProj);
  2453.                return true;
  2454.             }
  2455.             this.changeStage(stageInit);
  2456.             return false;
  2457.          }
  2459.          if (!this.isStage(stageBuild))
  2460.             this.#drawing_log = `Building meshes ${this.ctrl.info.num_meshes} / ${this.ctrl.info.num_faces}`;
  2461.          return true;
  2462.       }
  2464.       if (this.isStage(stageWaitMain)) {
  2465.          // wait for main painter to be ready
  2466.          if (!this.getCentral()) {
  2467.             this.changeStage(stageInit, 'Lost main painter');
  2468.             return false;
  2469.          }
  2470.          if (!this.getCentral().isDrawingReady())
  2471.             return 1;
  2473.          this.changeStage(stageBuildProj); // just do projection
  2474.       }
  2476.       if (this.isStage(stageBuildProj)) {
  2477.          this.doProjection();
  2478.          this.changeStage(stageInit);
  2479.          return false;
  2480.       }
  2482.       console.error(`never come here, stage ${this.drawing_stage}`);
  2484.       return false;
  2485.    }
  2487.    /** @summary Insert appropriate mesh for given entry */
  2488.    createEntryMesh(entry, shape, toplevel) {
  2489.       // workaround for the TGeoOverlap, where two branches should get predefined color
  2490.       if (this.ctrl.split_colors && entry.stack) {
  2491.          if (entry.stack[0] === 0)
  2492.             entry.custom_color = 'green';
  2493.          else if (entry.stack[0] === 1)
  2494.             entry.custom_color = 'blue';
  2495.       }
  2497.       this.#clones.createEntryMesh(this.ctrl, toplevel, entry, shape, getRootColors());
  2499.       return true;
  2500.    }
  2502.    /** @summary used by geometry viewer to show more nodes
  2503.      * @desc These nodes excluded from selection logic and always inserted into the model
  2504.      * Shape already should be created and assigned to the node */
  2505.    appendMoreNodes(nodes, from_drawing) {
  2506.       if (!this.isStage(stageInit) && !from_drawing) {
  2507.          this.#provided_more_nodes = nodes;
  2508.          return;
  2509.       }
  2511.       // delete old nodes
  2512.       if (this.#more_nodes) {
  2513.          for (let n = 0; n < this.#more_nodes.length; ++n) {
  2514.             const entry = this.#more_nodes[n],
  2515.                 obj3d = this.#clones.createObject3D(entry.stack, this.#toplevel, 'delete_mesh');
  2516.             disposeThreejsObject(obj3d);
  2517.             cleanupShape(entry.server_shape);
  2518.             delete entry.server_shape;
  2519.          }
  2520.          this.#more_nodes = undefined;
  2521.       }
  2523.       if (!nodes) return;
  2525.       const real_nodes = [];
  2526.       for (let k = 0; k < nodes.length; ++k) {
  2527.          const entry = nodes[k],
  2528.              shape = entry.server_shape;
  2529.          if (!shape?.ready) continue;
  2531.          if (this.createEntryMesh(entry, shape, this.#toplevel))
  2532.             real_nodes.push(entry);
  2533.       }
  2535.       // remember additional nodes only if they include shape - otherwise one can ignore them
  2536.       if (real_nodes.length)
  2537.          this.#more_nodes = real_nodes;
  2539.       if (!from_drawing)
  2540.          this.render3D();
  2541.    }
  2543.    /** @summary Returns hierarchy of 3D objects used to produce projection.
  2544.      * @desc Typically external master painter is used, but also internal data can be used */
  2545.    getProjectionSource() {
  2546.       if (this.#clones_owner)
  2547.          return this.#fullgeom_proj;
  2548.       if (!this.getCentral()?.isDrawingReady()) {
  2549.          console.warn('MAIN PAINTER NOT READY WHEN DO PROJECTION');
  2550.          return null;
  2551.       }
  2552.       return this.getCentral().#toplevel;
  2553.    }
  2555.    /** @summary Extend custom geometry bounding box */
  2556.    extendCustomBoundingBox(box) {
  2557.       if (!box) return;
  2558.       if (!this.#custom_bounding_box)
  2559.          this.#custom_bounding_box = new THREE.Box3().makeEmpty();
  2561.       const origin = this.#custom_bounding_box.clone();
  2562.       this.#custom_bounding_box.union(box);
  2564.       if (!this.#custom_bounding_box.equals(origin))
  2565.          this.#adjust_camera_with_render = true;
  2566.    }
  2568.    /** @summary Calculate geometry bounding box */
  2569.    getGeomBoundingBox(topitem, scalar) {
  2570.       const box3 = new THREE.Box3(), check_any = !this.#clones;
  2571.       if (topitem === undefined)
  2572.          topitem = this.#toplevel;
  2574.       box3.makeEmpty();
  2576.       if (this.#custom_bounding_box && (topitem === this.#toplevel)) {
  2577.          box3.union(this.#custom_bounding_box);
  2578.          return box3;
  2579.       }
  2581.       if (!topitem) {
  2582.          box3.min.x = box3.min.y = box3.min.z = -1;
  2583.          box3.max.x = box3.max.y = box3.max.z = 1;
  2584.          return box3;
  2585.       }
  2587.       topitem.traverse(mesh => {
  2588.          if (check_any || (mesh.stack && (mesh instanceof THREE.Mesh)) ||
  2589.              (mesh.main_track && (mesh instanceof THREE.LineSegments)) || (mesh.stacks && (mesh instanceof THREE.InstancedMesh)))
  2590.             getBoundingBox(mesh, box3);
  2591.       });
  2593.       if (scalar === 'original') {
  2594.          box3.translate(new THREE.Vector3(-topitem.position.x, -topitem.position.y, -topitem.position.z));
  2595.          box3.min.multiply(new THREE.Vector3(1/topitem.scale.x, 1/topitem.scale.y, 1/topitem.scale.z));
  2596.          box3.max.multiply(new THREE.Vector3(1/topitem.scale.x, 1/topitem.scale.y, 1/topitem.scale.z));
  2597.       } else if (scalar !== undefined)
  2598.          box3.expandByVector(box3.getSize(new THREE.Vector3()).multiplyScalar(scalar));
  2600.       return box3;
  2601.    }
  2603.    /** @summary Create geometry projection */
  2604.    doProjection() {
  2605.       const toplevel = this.getProjectionSource();
  2607.       if (!toplevel) return false;
  2609.       disposeThreejsObject(this.#toplevel, true);
  2611.       // let axis = this.ctrl.project;
  2613.       if (this.ctrl.projectPos === undefined) {
  2614.          const bound = this.getGeomBoundingBox(toplevel),
  2615.                min = bound.min[this.ctrl.project], max = bound.max[this.ctrl.project];
  2616.          let mean = (min + max)/2;
  2618.          if ((min < 0) && (max > 0) && (Math.abs(mean) < 0.2*Math.max(-min, max))) mean = 0; // if middle is around 0, use 0
  2620.          this.ctrl.projectPos = mean;
  2621.       }
  2623.       toplevel.traverse(mesh => {
  2624.          if (!(mesh instanceof THREE.Mesh) || !mesh.stack) return;
  2626.          const geom2 = projectGeometry(mesh.geometry, mesh.parent.absMatrix || mesh.parent.matrixWorld, this.ctrl.project, this.ctrl.projectPos, mesh._flippedMesh);
  2628.          if (!geom2) return;
  2630.          const mesh2 = new THREE.Mesh(geom2, mesh.material.clone());
  2632.          this.#toplevel.add(mesh2);
  2634.          mesh2.stack = mesh.stack;
  2635.       });
  2637.       return true;
  2638.    }
  2640.    /** @summary Should be invoked when light configuration changed */
  2641.    changedLight(box) {
  2642.       if (!this.#camera)
  2643.          return;
  2645.       const need_render = !box;
  2647.       if (!box) box = this.getGeomBoundingBox();
  2649.       const sizex = box.max.x - box.min.x,
  2650.           sizey = box.max.y - box.min.y,
  2651.           sizez = box.max.z - box.min.z,
  2652.           plights = [], p = (this.ctrl.light.power ?? 1) * 0.5;
  2654.       if (this.#camera._lights !== this.ctrl.light.kind) {
  2655.          // remove all childs and recreate only necessary lights
  2656.          disposeThreejsObject(this.#camera, true);
  2658.          this.#camera._lights = this.ctrl.light.kind;
  2660.          switch (this.#camera._lights) {
  2661.             case 'ambient' : this.#camera.add(new THREE.AmbientLight(0xefefef, p)); break;
  2662.             case 'hemisphere' : this.#camera.add(new THREE.HemisphereLight(0xffffbb, 0x080820, p)); break;
  2663.             case 'mix': this.#camera.add(new THREE.AmbientLight(0xefefef, p));
  2664.             // eslint-disable-next-line  no-fallthrough
  2665.             default: // 6 point lights
  2666.                for (let n = 0; n < 6; ++n) {
  2667.                   const l = new THREE.DirectionalLight(0xefefef, p);
  2668.                   this.#camera.add(l);
  2669.                   l._id = n;
  2670.                }
  2671.          }
  2672.       }
  2674.       for (let k = 0; k < this.#camera.children.length; ++k) {
  2675.          const light = this.#camera.children[k];
  2676.          let enabled = false;
  2677.          if (light.isAmbientLight || light.isHemisphereLight) {
  2678.             light.intensity = p;
  2679.             continue;
  2680.          }
  2681.          if (!light.isDirectionalLight) continue;
  2682.          switch (light._id) {
  2683.             case 0: light.position.set(sizex/5, sizey/5, sizez/5); enabled = this.ctrl.light.specular; break;
  2684.             case 1: light.position.set(0, 0, sizez/2); enabled = this.ctrl.light.front; break;
  2685.             case 2: light.position.set(0, 2*sizey, 0); enabled = this.ctrl.light.top; break;
  2686.             case 3: light.position.set(0, -2*sizey, 0); enabled = this.ctrl.light.bottom; break;
  2687.             case 4: light.position.set(-2*sizex, 0, 0); enabled = this.ctrl.light.left; break;
  2688.             case 5: light.position.set(2*sizex, 0, 0); enabled = this.ctrl.light.right; break;
  2689.          }
  2690.          light.power = enabled ? p*Math.PI*4 : 0;
  2691.          if (enabled) plights.push(light);
  2692.       }
  2694.       // keep light power of all sources constant
  2695.       plights.forEach(ll => { ll.power = p*4*Math.PI/plights.length; });
  2697.       if (need_render) this.render3D();
  2698.    }
  2700.    /** @summary Returns true if orthographic camera is used */
  2701.    isOrthoCamera() {
  2702.       return this.ctrl.camera_kind.indexOf('ortho') === 0;
  2703.    }
  2705.    /** @summary Create configured camera */
  2706.    createCamera() {
  2707.       if (this.#camera) {
  2708.          this.#scene.remove(this.#camera);
  2709.          disposeThreejsObject(this.#camera);
  2710.          this.#camera = undefined;
  2711.       }
  2713.       if (this.isOrthoCamera())
  2714.          this.#camera = new THREE.OrthographicCamera(-this.#scene_width/2, this.#scene_width/2, this.#scene_height/2, -this.#scene_height/2, 1, 10000);
  2715.        else {
  2716.          this.#camera = new THREE.PerspectiveCamera(25, this.#scene_width / this.#scene_height, 1, 10000);
  2717.          this.#camera.up = this.ctrl._yup ? new THREE.Vector3(0, 1, 0) : new THREE.Vector3(0, 0, 1);
  2718.       }
  2720.       // Light - add default directional light, adjust later
  2721.       const light = new THREE.DirectionalLight(0xefefef, 0.1);
  2722.       light.position.set(10, 10, 10);
  2723.       this.#camera.add(light);
  2725.       this.#scene.add(this.#camera);
  2726.    }
  2728.    /** @summary Create special effects */
  2729.    createSpecialEffects() {
  2730.       if (this.#webgl && this.ctrl.outline && isFunc(this.createOutline)) {
  2731.          // code used with jsroot-based geometry drawing in EVE7, not important any longer
  2732.          this.#effectComposer = new THREE.EffectComposer(this.#renderer);
  2733.          this.#effectComposer.addPass(new THREE.RenderPass(this.#scene, this.#camera));
  2734.          this.createOutline(this.#scene, this.#camera, this.#scene_width, this.#scene_height);
  2735.       }
  2737.       this.ensureBloom();
  2738.    }
  2740.    /** @summary Return current effect composer */
  2741.    getEffectComposer() { return this.#effectComposer; }
  2743.    /** @summary Initial scene creation */
  2744.    async createScene(w, h, render3d) {
  2745.       if (this.#superimpose) {
  2746.          const cfg = getHistPainter3DCfg(this.getMainPainter());
  2748.          if (cfg?.renderer) {
  2749.             this.#scene = cfg.scene;
  2750.             this.#scene_width = cfg.scene_width;
  2751.             this.#scene_height = cfg.scene_height;
  2752.             this.#renderer = cfg.renderer;
  2753.             this.#webgl = (this.#renderer.jsroot_render3d === constants.Render3D.WebGL);
  2755.             this.#toplevel = new THREE.Object3D();
  2756.             this.#scene.add(this.#toplevel);
  2758.             if (cfg.scale_x || cfg.scale_y || cfg.scale_z)
  2759.                this.#toplevel.scale.set(cfg.scale_x, cfg.scale_y, cfg.scale_z);
  2760.             if (cfg.offset_x || cfg.offset_y || cfg.offset_z)
  2761.                this.#toplevel.position.set(cfg.offset_x, cfg.offset_y, cfg.offset_z);
  2762.             this.#toplevel.updateMatrix();
  2763.             this.#toplevel.updateMatrixWorld();
  2765.             this.#camera = cfg.camera;
  2766.          }
  2768.          return this.#renderer?.jsroot_dom;
  2769.       }
  2771.       return importThreeJs().then(() => {
  2772.          // three.js 3D drawing
  2773.          this.#scene = new THREE.Scene();
  2774.          this.#fog = new THREE.Fog(0xffffff, 1, 10000);
  2775.          this.#scene.fog = this.ctrl.use_fog ? this.#fog : null;
  2777.          this.#scene.overrideMaterial = new THREE.MeshLambertMaterial({ color: 0x7000ff, vertexColors: false, transparent: true, opacity: 0.2, depthTest: false });
  2779.          this.#scene_width = w;
  2780.          this.#scene_height = h;
  2782.          this.createCamera();
  2784.          this.#selected_mesh = null;
  2786.          this.#overall_size = 10;
  2788.          this.#toplevel = new THREE.Object3D();
  2790.          this.#scene.add(this.#toplevel);
  2792.          this.#scene.background = new THREE.Color(this.ctrl.background);
  2794.          return createRender3D(w, h, render3d, { antialias: true, logarithmicDepthBuffer: false, preserveDrawingBuffer: true });
  2795.       }).then(r => {
  2796.          this.#renderer = r;
  2798.          if (this.batch_format)
  2799.             r.jsroot_image_format = this.batch_format;
  2801.          this.#webgl = (r.jsroot_render3d === constants.Render3D.WebGL);
  2803.          if (isFunc(r.setPixelRatio) && !isNodeJs() && !browser.android)
  2804.             r.setPixelRatio(window.devicePixelRatio);
  2805.          r.setSize(w, h, !this.#fit_main_area);
  2806.          r.localClippingEnabled = true;
  2808.          r.setClearColor(this.#scene.background, 1);
  2810.          if (this.#fit_main_area && this.#webgl) {
  2811.             r.domElement.style.width = '100%';
  2812.             r.domElement.style.height = '100%';
  2813.             const main = this.selectDom();
  2814.             if (main.style('position') === 'static')
  2815.                main.style('position', 'relative');
  2816.          }
  2818.          this.#animating = false;
  2820.          this.ctrl.doubleside = false; // both sides need for clipping
  2821.          this.createSpecialEffects();
  2823.          if (this.#fit_main_area && !this.#webgl) {
  2824.             // create top-most SVG for geometry drawings
  2825.             const doc = getDocument(),
  2826.                   svg = doc.createElementNS(nsSVG, 'svg');
  2827.             svg.setAttribute('width', w);
  2828.             svg.setAttribute('height', h);
  2829.             svg.appendChild(this.#renderer.jsroot_dom);
  2830.             return svg;
  2831.          }
  2833.          return this.#renderer.jsroot_dom;
  2834.       });
  2835.    }
  2837.    /** @summary Start geometry drawing */
  2838.    startDrawGeometry(force) {
  2839.       if (!force && !this.isStage(stageInit)) {
  2840.          this.#draw_nodes_again = true;
  2841.          return;
  2842.       }
  2844.       if (this.#clones_owner)
  2845.          this.#clones?.setDefaultColors(this.ctrl.dflt_colors);
  2847.       this.#last_render_tm = this.#start_render_tm = new Date().getTime();
  2848.       this.#last_render_meshes = 0;
  2849.       this.changeStage(stageCollect);
  2850.       this.#drawing_ready = false;
  2851.       this.ctrl.info.num_meshes = 0;
  2852.       this.ctrl.info.num_faces = 0;
  2853.       this.ctrl.info.num_shapes = 0;
  2854.       this.#selected_mesh = null;
  2856.       if (this.ctrl.project) {
  2857.          if (this.#clones_owner) {
  2858.             if (this.#fullgeom_proj)
  2859.                this.changeStage(stageBuildProj);
  2860.             else
  2861.                this.#fullgeom_proj = new THREE.Object3D();
  2862.          } else
  2863.             this.changeStage(stageWaitMain);
  2864.       }
  2866.       this.#last_manifest = undefined;
  2867.       this.#last_hidden = undefined; // clear list of hidden objects
  2869.       this.#draw_nodes_again = undefined; // forget about such flag
  2871.       this.continueDraw();
  2872.    }
  2874.    /** @summary reset all kind of advanced features like depth test */
  2875.    resetAdvanced() {
  2876.       this.ctrl.depthTest = true;
  2877.       this.ctrl.clipIntersect = true;
  2878.       this.ctrl.depthMethod = 'ray';
  2880.       this.changedDepthMethod('norender');
  2881.       this.changedDepthTest();
  2882.    }
  2884.    /** @summary returns maximal dimension */
  2885.    getOverallSize(force) {
  2886.       if (!this.#overall_size || force || this.#custom_bounding_box) {
  2887.          const box = this.getGeomBoundingBox();
  2889.          // if detect of coordinates fails - ignore
  2890.          if (!Number.isFinite(box.min.x)) return 1000;
  2892.          this.#overall_size = 2 * Math.max(box.max.x - box.min.x, box.max.y - box.min.y, box.max.z - box.min.z);
  2893.       }
  2895.       return this.#overall_size;
  2896.    }
  2898.    /** @summary Create png image with drawing snapshot. */
  2899.    createSnapshot(filename) {
  2900.       if (!this.#renderer) return;
  2901.       this.render3D(0);
  2902.       const dataUrl = this.#renderer.domElement.toDataURL('image/png');
  2903.       if (filename === 'asis') return dataUrl;
  2904.       dataUrl.replace('image/png', 'image/octet-stream');
  2905.       const doc = getDocument(),
  2906.             link = doc.createElement('a');
  2907.       if (isStr(link.download)) {
  2908.          doc.body.appendChild(link); // Firefox requires the link to be in the body
  2909.          link.download = filename || 'geometry.png';
  2910.          link.href = dataUrl;
  2911.          link.click();
  2912.          doc.body.removeChild(link); // remove the link when done
  2913.       }
  2914.    }
  2916.    /** @summary Returns url parameters defining camera position.
  2917.      * @desc Either absolute position are provided (arg === true) or zoom, roty, rotz parameters */
  2918.    produceCameraUrl(arg) {
  2919.       if (!this.#camera)
  2920.          return '';
  2922.       if (this.#camera.isOrthographicCamera) {
  2923.          const zoom = Math.round(this.#camera.zoom * 100);
  2924.          return this.ctrl.camera_kind + (zoom === 100 ? '' : `,zoom=${zoom}`);
  2925.       }
  2927.       let kind = '';
  2928.       if (this.ctrl.camera_kind !== 'perspective')
  2929.         kind = this.ctrl.camera_kind + ',';
  2931.       if (arg === true) {
  2932.          const p = this.#camera.position, t = this.#controls?.target;
  2933.          if (!p || !t) return '';
  2935.          const conv = v => {
  2936.             let s = '';
  2937.             if (v < 0) { s = 'n'; v = -v; }
  2938.             return s + v.toFixed(0);
  2939.          };
  2941.          let res = `${kind}camx${conv(p.x)},camy${conv(p.y)},camz${conv(p.z)}`;
  2942.          if (t.x || t.y || t.z) res += `,camlx${conv(t.x)},camly${conv(t.y)},camlz${conv(t.z)}`;
  2943.          return res;
  2944.       }
  2946.       if (!this.#lookat || !this.#camera0pos)
  2947.          return '';
  2949.       const pos1 = new THREE.Vector3().add(this.#camera0pos).sub(this.#lookat),
  2950.             pos2 = new THREE.Vector3().add(this.#camera.position).sub(this.#lookat),
  2951.             zoom = Math.min(10000, Math.max(1, this.ctrl.zoom * pos2.length() / pos1.length() * 100));
  2953.       pos1.normalize();
  2954.       pos2.normalize();
  2956.       const quat = new THREE.Quaternion(), euler = new THREE.Euler();
  2958.       quat.setFromUnitVectors(pos1, pos2);
  2959.       euler.setFromQuaternion(quat, 'YZX');
  2961.       let roty = euler.y / Math.PI * 180,
  2962.           rotz = euler.z / Math.PI * 180;
  2964.       if (roty < 0) roty += 360;
  2965.       if (rotz < 0) rotz += 360;
  2966.       return `${kind}roty${roty.toFixed(0)},rotz${rotz.toFixed(0)},zoom${zoom.toFixed(0)}`;
  2967.    }
  2969.    /** @summary Calculates current zoom factor */
  2970.    calculateZoom() {
  2971.       if (this.#camera0pos && this.#camera && this.#lookat) {
  2972.          const pos1 = new THREE.Vector3().add(this.#camera0pos).sub(this.#lookat),
  2973.                pos2 = new THREE.Vector3().add(this.#camera.position).sub(this.#lookat);
  2974.          return pos2.length() / pos1.length();
  2975.       }
  2977.       return 0;
  2978.    }
  2980.    /** @summary Place camera to default position,
  2981.      * @param arg - true forces camera readjustment, 'first' is called when suppose to be first after complete drawing
  2982.      * @param keep_zoom - tries to keep zooming factor of the camera */
  2983.    adjustCameraPosition(arg, keep_zoom) {
  2984.       if (!this.#toplevel || this.#superimpose)
  2985.          return;
  2987.       const force = (arg === true),
  2988.             first_time = (arg === 'first') || force,
  2989.             only_set = (arg === 'only_set'),
  2990.             box = this.getGeomBoundingBox();
  2992.       // let box2 = new THREE.Box3().makeEmpty();
  2993.       // box2.expandByObject(this.#toplevel, true);
  2994.       // console.log('min,max', box.min.x, box.max.x, box.min.y, box.max.y, box.min.z, box.max.z );
  2996.       // if detect of coordinates fails - ignore
  2997.       if (!Number.isFinite(box.min.x)) {
  2998.          console.log('FAILS to get geometry bounding box');
  2999.          return;
  3000.       }
  3002.       const sizex = box.max.x - box.min.x,
  3003.             sizey = box.max.y - box.min.y,
  3004.             sizez = box.max.z - box.min.z,
  3005.             midx = (box.max.x + box.min.x)/2,
  3006.             midy = (box.max.y + box.min.y)/2,
  3007.             midz = (box.max.z + box.min.z)/2,
  3008.             more = this.ctrl._axis || (this.ctrl.camera_overlay === 'bar') ? 0.2 : 0.1;
  3010.       if (this.#scene_size && !force) {
  3011.          function test(v1, v2, scale) {
  3012.             if (!scale) scale = Math.abs((v1+v2)/2);
  3013.             return scale <= 1e-20 ? true : Math.abs(v2-v1)/scale > 0.01;
  3014.          };
  3015.          const d = this.#scene_size;
  3016.          if (!test(sizex, d.sizex) && !test(sizey, d.sizey) && !test(sizez, d.sizez) &&
  3017.              !test(midx, d.midx, d.sizex) && !test(midy, d.midy, d.sizey) && !test(midz, d.midz, d.sizez)) {
  3018.                if (this.ctrl.select_in_view)
  3019.                   this.startDrawGeometry();
  3020.                return;
  3021.          }
  3022.       }
  3024.       this.#scene_size = { sizex, sizey, sizez, midx, midy, midz };
  3026.       this.#overall_size = 2 * Math.max(sizex, sizey, sizez);
  3028.       this.#camera.near = this.#overall_size / 350;
  3029.       this.#camera.far = this.#overall_size * 100;
  3030.       this.#fog.near = this.#overall_size * 0.5;
  3031.       this.#fog.far = this.#overall_size * 5;
  3033.       if (first_time) {
  3034.          for (let naxis = 0; naxis < 3; ++naxis) {
  3035.             const cc = this.ctrl.clip[naxis];
  3036.             cc.min = box.min[cc.name];
  3037.             cc.max = box.max[cc.name];
  3038.             const sz = cc.max - cc.min;
  3039.             cc.max += sz*0.01;
  3040.             cc.min -= sz*0.01;
  3041.             if (sz > 100)
  3042.                cc.step = 0.1;
  3043.             else if (sz > 1)
  3044.                cc.step = 0.001;
  3045.             else
  3046.                cc.step = undefined;
  3048.             if (!cc.value)
  3049.                cc.value = (cc.min + cc.max) / 2;
  3050.             else if (cc.value < cc.min)
  3051.                cc.value = cc.min;
  3052.             else if (cc.value > cc.max)
  3053.                cc.value = cc.max;
  3054.          }
  3055.       }
  3057.       let k = 2*this.ctrl.zoom;
  3058.       const max_all = Math.max(sizex, sizey, sizez),
  3059.             sign = this.ctrl.camera_kind.indexOf('N') > 0 ? -1 : 1;
  3061.       this.#lookat = new THREE.Vector3(midx, midy, midz);
  3062.       this.#camera0pos = new THREE.Vector3(-2*max_all, 0, 0); // virtual 0 position, where rotation starts
  3064.       this.#camera.updateMatrixWorld();
  3065.       this.#camera.updateProjectionMatrix();
  3067.       if ((this.ctrl.rotatey || this.ctrl.rotatez) && this.ctrl.can_rotate) {
  3068.          const prev_zoom = this.calculateZoom();
  3069.          if (keep_zoom && prev_zoom) k = 2*prev_zoom;
  3071.          const euler = new THREE.Euler(0, this.ctrl.rotatey/180*Math.PI, this.ctrl.rotatez/180*Math.PI, 'YZX');
  3073.          this.#camera.position.set(-k*max_all, 0, 0);
  3074.          this.#camera.position.applyEuler(euler);
  3075.          this.#camera.position.add(new THREE.Vector3(midx, midy, midz));
  3077.          if (keep_zoom && prev_zoom) {
  3078.             const actual_zoom = this.calculateZoom();
  3079.             k *= prev_zoom/actual_zoom;
  3081.             this.#camera.position.set(-k*max_all, 0, 0);
  3082.             this.#camera.position.applyEuler(euler);
  3083.             this.#camera.position.add(new THREE.Vector3(midx, midy, midz));
  3084.          }
  3085.       } else if (this.ctrl.camx !== undefined && this.ctrl.camy !== undefined && this.ctrl.camz !== undefined) {
  3086.          this.#camera.position.set(this.ctrl.camx, this.ctrl.camy, this.ctrl.camz);
  3087.          this.#lookat.set(this.ctrl.camlx || 0, this.ctrl.camly || 0, this.ctrl.camlz || 0);
  3088.          this.ctrl.camx = this.ctrl.camy = this.ctrl.camz = this.ctrl.camlx = this.ctrl.camly = this.ctrl.camlz = undefined;
  3089.       } else if ((this.ctrl.camera_kind === 'orthoXOY') || (this.ctrl.camera_kind === 'orthoXNOY')) {
  3090.          this.#camera.up.set(0, 1, 0);
  3091.          this.#camera.position.set(sign < 0 ? midx*2 : 0, 0, midz + sign*sizez*2);
  3092.          this.#lookat.set(sign < 0 ? midx*2 : 0, 0, midz);
  3093.          this.#camera.left = box.min.x - more*sizex;
  3094.          this.#camera.right = box.max.x + more*sizex;
  3095.          this.#camera.top = box.max.y + more*sizey;
  3096.          this.#camera.bottom = box.min.y - more*sizey;
  3097.          if (!keep_zoom) this.#camera.zoom = this.ctrl.zoom || 1;
  3098.          this.#camera.orthoSign = sign;
  3099.          this.#camera.orthoZ = [midz, sizez/2];
  3100.       } else if ((this.ctrl.camera_kind === 'orthoXOZ') || (this.ctrl.camera_kind === 'orthoXNOZ')) {
  3101.          this.#camera.up.set(0, 0, 1);
  3102.          this.#camera.position.set(sign < 0 ? midx*2 : 0, midy - sign*sizey*2, 0);
  3103.          this.#lookat.set(sign < 0 ? midx*2 : 0, midy, 0);
  3104.          this.#camera.left = box.min.x - more*sizex;
  3105.          this.#camera.right = box.max.x + more*sizex;
  3106.          this.#camera.top = box.max.z + more*sizez;
  3107.          this.#camera.bottom = box.min.z - more*sizez;
  3108.          if (!keep_zoom) this.#camera.zoom = this.ctrl.zoom || 1;
  3109.          this.#camera.orthoIndicies = [0, 2, 1];
  3110.          this.#camera.orthoRotation = geom => geom.rotateX(Math.PI/2);
  3111.          this.#camera.orthoSign = sign;
  3112.          this.#camera.orthoZ = [midy, -sizey/2];
  3113.       } else if ((this.ctrl.camera_kind === 'orthoZOY') || (this.ctrl.camera_kind === 'orthoZNOY')) {
  3114.          this.#camera.up.set(0, 1, 0);
  3115.          this.#camera.position.set(midx - sign*sizex*2, 0, sign < 0 ? midz*2 : 0);
  3116.          this.#lookat.set(midx, 0, sign < 0 ? midz*2 : 0);
  3117.          this.#camera.left = box.min.z - more*sizez;
  3118.          this.#camera.right = box.max.z + more*sizez;
  3119.          this.#camera.top = box.max.y + more*sizey;
  3120.          this.#camera.bottom = box.min.y - more*sizey;
  3121.          if (!keep_zoom) this.#camera.zoom = this.ctrl.zoom || 1;
  3122.          this.#camera.orthoIndicies = [2, 1, 0];
  3123.          this.#camera.orthoRotation = geom => geom.rotateY(-Math.PI/2);
  3124.          this.#camera.orthoSign = sign;
  3125.          this.#camera.orthoZ = [midx, -sizex/2];
  3126.       } else if ((this.ctrl.camera_kind === 'orthoZOX') || (this.ctrl.camera_kind === 'orthoZNOX')) {
  3127.          this.#camera.up.set(1, 0, 0);
  3128.          this.#camera.position.set(0, midy - sign*sizey*2, sign > 0 ? midz*2 : 0);
  3129.          this.#lookat.set(0, midy, sign > 0 ? midz*2 : 0);
  3130.          this.#camera.left = box.min.z - more*sizez;
  3131.          this.#camera.right = box.max.z + more*sizez;
  3132.          this.#camera.top = box.max.x + more*sizex;
  3133.          this.#camera.bottom = box.min.x - more*sizex;
  3134.          if (!keep_zoom) this.#camera.zoom = this.ctrl.zoom || 1;
  3135.          this.#camera.orthoIndicies = [2, 0, 1];
  3136.          this.#camera.orthoRotation = geom => geom.rotateX(Math.PI/2).rotateY(Math.PI/2);
  3137.          this.#camera.orthoSign = sign;
  3138.          this.#camera.orthoZ = [midy, -sizey/2];
  3139.       } else if (this.ctrl.project) {
  3140.          switch (this.ctrl.project) {
  3141.             case 'x': this.#camera.position.set(k*1.5*Math.max(sizey, sizez), 0, 0); break;
  3142.             case 'y': this.#camera.position.set(0, k*1.5*Math.max(sizex, sizez), 0); break;
  3143.             case 'z': this.#camera.position.set(0, 0, k*1.5*Math.max(sizex, sizey)); break;
  3144.          }
  3145.       } else if (this.ctrl.camera_kind === 'perspXOZ') {
  3146.          this.#camera.up.set(0, 1, 0);
  3147.          this.#camera.position.set(midx - 3*max_all, midy, midz);
  3148.       } else if (this.ctrl.camera_kind === 'perspYOZ') {
  3149.          this.#camera.up.set(1, 0, 0);
  3150.          this.#camera.position.set(midx, midy - 3*max_all, midz);
  3151.       } else if (this.ctrl.camera_kind === 'perspXOY') {
  3152.          this.#camera.up.set(0, 0, 1);
  3153.          this.#camera.position.set(midx - 3*max_all, midy, midz);
  3154.       } else if (this.ctrl._yup) {
  3155.          this.#camera.up.set(0, 1, 0);
  3156.          this.#camera.position.set(midx-k*Math.max(sizex, sizez), midy+k*sizey, midz-k*Math.max(sizex, sizez));
  3157.       } else {
  3158.          this.#camera.up.set(0, 0, 1);
  3159.          this.#camera.position.set(midx-k*Math.max(sizex, sizey), midy-k*Math.max(sizex, sizey), midz+k*sizez);
  3160.       }
  3162.       if (this.#camera.isOrthographicCamera && this.isOrthoCamera() && this.#scene_width && this.#scene_height) {
  3163.          const screen_ratio = this.#scene_width / this.#scene_height,
  3164.                szx = this.#camera.right - this.#camera.left, szy = this.#camera.top - this.#camera.bottom;
  3166.          if (screen_ratio > szx / szy) {
  3167.             // screen wider than actual geometry
  3168.             const m = (this.#camera.right + this.#camera.left) / 2;
  3169.             this.#camera.left = m - szy * screen_ratio / 2;
  3170.             this.#camera.right = m + szy * screen_ratio / 2;
  3171.          } else {
  3172.             // screen higher than actual geometry
  3173.             const m = (this.#camera.top + this.#camera.bottom) / 2;
  3174.             this.#camera.top = m + szx / screen_ratio / 2;
  3175.             this.#camera.bottom = m - szx / screen_ratio / 2;
  3176.          }
  3177.       }
  3179.       this.#camera.lookAt(this.#lookat);
  3180.       this.#camera.updateProjectionMatrix();
  3182.       this.changedLight(box);
  3184.       if (this.#controls) {
  3185.          this.#controls.target.copy(this.#lookat);
  3186.          if (!only_set) this.#controls.update();
  3187.       }
  3189.       // recheck which elements to draw
  3190.       if (this.ctrl.select_in_view && !only_set)
  3191.          this.startDrawGeometry();
  3192.    }
  3194.    /** @summary Specifies camera position as rotation around geometry center */
  3195.    setCameraPosition(rotatey, rotatez, zoom) {
  3196.       if (!this.ctrl) return;
  3197.       this.ctrl.rotatey = rotatey || 0;
  3198.       this.ctrl.rotatez = rotatez || 0;
  3199.       let preserve_zoom = false;
  3200.       if (zoom && Number.isFinite(zoom))
  3201.          this.ctrl.zoom = zoom;
  3202.        else
  3203.          preserve_zoom = true;
  3205.       this.adjustCameraPosition(false, preserve_zoom);
  3206.    }
  3208.    /** @summary Specifies camera position and point to which it looks to
  3209.        @desc Both specified in absolute coordinates */
  3210.    setCameraPositionAndLook(camx, camy, camz, lookx, looky, lookz) {
  3211.       if (!this.ctrl)
  3212.          return;
  3213.       this.ctrl.camx = camx;
  3214.       this.ctrl.camy = camy;
  3215.       this.ctrl.camz = camz;
  3216.       this.ctrl.camlx = lookx;
  3217.       this.ctrl.camly = looky;
  3218.       this.ctrl.camlz = lookz;
  3219.       this.adjustCameraPosition(false);
  3220.    }
  3222.    /** @summary focus on item */
  3223.    focusOnItem(itemname) {
  3224.       if (!itemname || !this.#clones)
  3225.          return;
  3227.       const stack = this.#clones.findStackByName(itemname);
  3229.       if (stack)
  3230.          this.focusCamera(this.#clones.resolveStack(stack, true), false);
  3231.    }
  3233.    /** @summary focus camera on specified position */
  3234.    focusCamera(focus, autoClip) {
  3235.       if (this.ctrl.project || this.isOrthoCamera()) {
  3236.          this.adjustCameraPosition(true);
  3237.          return this.render3D();
  3238.       }
  3240.       let box = new THREE.Box3();
  3241.       if (focus === undefined)
  3242.          box = this.getGeomBoundingBox();
  3243.        else if (focus instanceof THREE.Mesh)
  3244.          box.setFromObject(focus);
  3245.        else {
  3246.          const center = new THREE.Vector3().setFromMatrixPosition(focus.matrix),
  3247.              node = focus.node,
  3248.              halfDelta = new THREE.Vector3(node.fDX, node.fDY, node.fDZ).multiplyScalar(0.5);
  3249.          box.min = center.clone().sub(halfDelta);
  3250.          box.max = center.clone().add(halfDelta);
  3251.       }
  3253.       const sizex = box.max.x - box.min.x,
  3254.           sizey = box.max.y - box.min.y,
  3255.           sizez = box.max.z - box.min.z,
  3256.           midx = (box.max.x + box.min.x)/2,
  3257.           midy = (box.max.y + box.min.y)/2,
  3258.           midz = (box.max.z + box.min.z)/2;
  3260.       let position, frames = 50, step = 0;
  3261.       if (this.ctrl._yup)
  3262.          position = new THREE.Vector3(midx-2*Math.max(sizex, sizez), midy+2*sizey, midz-2*Math.max(sizex, sizez));
  3263.       else
  3264.          position = new THREE.Vector3(midx-2*Math.max(sizex, sizey), midy-2*Math.max(sizex, sizey), midz+2*sizez);
  3266.       const target = new THREE.Vector3(midx, midy, midz),
  3267.             oldTarget = this.#controls.target,
  3268.             // Amount to change camera position at each step
  3269.             posIncrement = position.sub(this.#camera.position).divideScalar(frames),
  3270.             // Amount to change 'lookAt' so it will end pointed at target
  3271.             targetIncrement = target.sub(oldTarget).divideScalar(frames);
  3273.       autoClip = autoClip && this.#webgl;
  3275.       // Automatic Clipping
  3276.       if (autoClip) {
  3277.          for (let axis = 0; axis < 3; ++axis) {
  3278.             const cc = this.ctrl.clip[axis];
  3279.             if (!cc.enabled) { cc.value = cc.min; cc.enabled = true; }
  3280.             cc.inc = ((cc.min + cc.max) / 2 - cc.value) / frames;
  3281.          }
  3282.          this.updateClipping();
  3283.       }
  3285.       this.#animating = true;
  3287.       const animate = () => {
  3288.          if (this.#animating === undefined)
  3289.             return;
  3291.          if (this.#animating)
  3292.             requestAnimationFrame(animate);
  3293.           else if (!this.#geom_viewer)
  3294.             this.startDrawGeometry();
  3295.          const smoothFactor = -Math.cos((2.0*Math.PI*step)/frames) + 1.0;
  3296.          this.#camera.position.add(posIncrement.clone().multiplyScalar(smoothFactor));
  3297.          oldTarget.add(targetIncrement.clone().multiplyScalar(smoothFactor));
  3298.          this.#lookat = oldTarget;
  3299.          this.#camera.lookAt(this.#lookat);
  3300.          this.#camera.updateProjectionMatrix();
  3302.          const tm1 = new Date().getTime();
  3303.          if (autoClip) {
  3304.             for (let axis = 0; axis < 3; ++axis)
  3305.                this.ctrl.clip[axis].value += this.ctrl.clip[axis].inc * smoothFactor;
  3306.             this.updateClipping();
  3307.          } else
  3308.             this.render3D(0);
  3310.          const tm2 = new Date().getTime();
  3311.          if ((step === 0) && (tm2-tm1 > 200)) frames = 20;
  3312.          step++;
  3313.          this.#animating = step < frames;
  3314.       };
  3316.       animate();
  3318.    //   this.#controls.update();
  3319.    }
  3321.    /** @summary activate auto rotate */
  3322.    autorotate(speed) {
  3323.       const rotSpeed = (speed === undefined) ? 2.0 : speed;
  3324.       let last = new Date();
  3326.       const animate = () => {
  3327.          if (!this.#renderer || !this.ctrl) return;
  3329.          const current = new Date();
  3331.          if (this.ctrl.rotate)
  3332.             requestAnimationFrame(animate);
  3334.          if (this.#controls) {
  3335.             this.#controls.autoRotate = this.ctrl.rotate;
  3336.             this.#controls.autoRotateSpeed = rotSpeed * (current.getTime() - last.getTime()) / 16.6666;
  3337.             this.#controls.update();
  3338.          }
  3339.          last = new Date();
  3340.          this.render3D(0);
  3341.       };
  3343.       if (this.#webgl) animate();
  3344.    }
  3346.    /** @summary called at the end of scene drawing */
  3347.    completeScene() {
  3348.    }
  3350.    /** @summary Drawing with 'count' option
  3351.      * @desc Scans hierarchy and check for unique nodes
  3352.      * @return {Promise} with object drawing ready */
  3353.    async drawCount(unqievis, clonetm) {
  3354.       const makeTime = tm => (this.isBatchMode() ? 'anytime' : tm.toString()) + ' ms',
  3356.        res = ['Unique nodes: ' + this.#clones.nodes.length,
  3357.                   'Unique visible: ' + unqievis,
  3358.                   'Time to clone: ' + makeTime(clonetm)];
  3360.       // need to fill cached value line numvischld
  3361.       this.#clones.scanVisible();
  3363.       let nshapes = 0;
  3364.       const arg = {
  3365.          clones: this.#clones,
  3366.          cnt: [],
  3367.          func(node) {
  3368.             if (this.cnt[this.last] === undefined)
  3369.                this.cnt[this.last] = 1;
  3370.             else
  3371.                this.cnt[this.last]++;
  3373.             nshapes += countNumShapes(this.clones.getNodeShape(node.id));
  3374.             return true;
  3375.          }
  3376.       };
  3378.       let tm1 = new Date().getTime(),
  3379.           numvis = this.#clones.scanVisible(arg),
  3380.           tm2 = new Date().getTime();
  3382.       res.push(`Total visible nodes: ${numvis}`, `Total shapes: ${nshapes}`);
  3384.       for (let lvl = 0; lvl < arg.cnt.length; ++lvl) {
  3385.          if (arg.cnt[lvl] !== undefined)
  3386.             res.push(`  lvl${lvl}: ${arg.cnt[lvl]}`);
  3387.       }
  3389.       res.push(`Time to scan: ${makeTime(tm2-tm1)}`, '', 'Check timing for matrix calculations ...');
  3391.       const elem = this.selectDom().style('overflow', 'auto');
  3393.       if (this.isBatchMode())
  3394.          elem.property('_json_object_', res);
  3395.       else
  3396.          res.forEach(str => elem.append('p').text(str));
  3398.       return postponePromise(() => {
  3399.          arg.domatrix = true;
  3400.          tm1 = new Date().getTime();
  3401.          numvis = this.#clones.scanVisible(arg);
  3402.          tm2 = new Date().getTime();
  3404.          const last_str = `Time to scan with matrix: ${makeTime(tm2-tm1)}`;
  3405.          if (this.isBatchMode())
  3406.             res.push(last_str);
  3407.          else
  3408.             elem.append('p').text(last_str);
  3409.          return this;
  3410.       }, 100);
  3411.    }
  3413.    /** @summary Handle drop operation
  3414.      * @desc opt parameter can include function name like opt$func_name
  3415.      * Such function should be possible to find via {@link findFunction}
  3416.      * Function has to return Promise with objects to draw on geometry
  3417.      * By default function with name 'extract_geo_tracks' is checked
  3418.      * @return {Promise} handling of drop operation */
  3419.    async performDrop(obj, itemname, hitem, opt) {
  3420.       if (obj?.$kind === 'TTree') {
  3421.          // drop tree means function call which must extract tracks from provided tree
  3423.          let funcname = 'extract_geo_tracks';
  3425.          if (opt && opt.indexOf('$') > 0) {
  3426.             funcname = opt.slice(0, opt.indexOf('$'));
  3427.             opt = opt.slice(opt.indexOf('$')+1);
  3428.          }
  3430.          const func = findFunction(funcname);
  3432.          if (!func) return Promise.reject(Error(`Function ${funcname} not found`));
  3434.          return func(obj, opt).then(tracks => {
  3435.             if (!tracks) return this;
  3437.             // FIXME: probably tracks should be remembered?
  3438.             return this.drawExtras(tracks, '', false).then(() => {
  3439.                this.updateClipping(true);
  3440.                return this.render3D(100);
  3441.             });
  3442.          });
  3443.       }
  3445.       return this.drawExtras(obj, itemname).then(is_any => {
  3446.          if (!is_any) return this;
  3448.          if (hitem) hitem._painter = this; // set for the browser item back pointer
  3450.          return this.render3D(100);
  3451.       });
  3452.    }
  3454.    /** @summary function called when mouse is going over the item in the browser */
  3455.    mouseOverHierarchy(on, itemname, hitem) {
  3456.       if (!this.ctrl)
  3457.          return; // protection for cleaned-up painter
  3459.       const obj = hitem._obj;
  3461.       // let's highlight tracks and hits only for the time being
  3462.       if (!obj || (obj._typename !== clTEveTrack && obj._typename !== clTEvePointSet && obj._typename !== clTPolyMarker3D)) return;
  3464.       this.highlightMesh(null, 0x00ff00, on ? obj : null);
  3465.    }
  3467.    /** @summary clear extra drawn objects like tracks or hits */
  3468.    clearExtras() {
  3469.       this.getExtrasContainer('delete');
  3470.       this.#extra_objects = undefined; // workaround, later will be normal function
  3471.       this.render3D();
  3472.    }
  3474.    /** @summary Register extra objects like tracks or hits
  3475.     * @desc Rendered after main geometry volumes are created
  3476.     * Check if object already exists to prevent duplication */
  3477.    addExtra(obj, itemname) {
  3478.       if (!this.#extra_objects)
  3479.          this.#extra_objects = create(clTList);
  3481.       if (this.#extra_objects.arr.indexOf(obj) >= 0)
  3482.          return false;
  3484.       this.#extra_objects.Add(obj, itemname);
  3486.       delete obj.$hidden_via_menu; // remove previous hidden property
  3488.       return true;
  3489.    }
  3491.    /** @summary manipulate visibility of extra objects, used for HierarchyPainter
  3492.      * @private */
  3493.    extraObjectVisible(hpainter, hitem, toggle) {
  3494.       if (!this.#extra_objects)
  3495.          return;
  3497.       const itemname = hpainter.itemFullName(hitem);
  3498.       let indx = this.#extra_objects.opt.indexOf(itemname);
  3500.       if ((indx < 0) && hitem._obj) {
  3501.          indx = this.#extra_objects.arr.indexOf(hitem._obj);
  3502.          // workaround - if object found, replace its name
  3503.          if (indx >= 0) this.#extra_objects.opt[indx] = itemname;
  3504.       }
  3506.       if (indx < 0)
  3507.          return;
  3509.       const obj = this.#extra_objects.arr[indx];
  3510.       let res = Boolean(obj.$hidden_via_menu);
  3512.       if (toggle) {
  3513.          obj.$hidden_via_menu = res;
  3514.          res = !res;
  3516.          let mesh = null;
  3517.          // either found painted object or just draw once again
  3518.          this.#toplevel.traverse(node => { if (node.geo_object === obj) mesh = node; });
  3520.          if (mesh) {
  3521.             mesh.visible = res;
  3522.             this.render3D();
  3523.          } else if (res) {
  3524.             this.drawExtras(obj, '', false).then(() => {
  3525.                this.updateClipping(true);
  3526.                this.render3D();
  3527.             });
  3528.          }
  3529.       }
  3531.       return res;
  3532.    }
  3534.    /** @summary Draw extra object like tracks
  3535.      * @return {Promise} for ready */
  3536.    async drawExtras(obj, itemname, add_objects, not_wait_render) {
  3537.       // if object was hidden via menu, do not redraw it with next draw call
  3538.       if (!obj?._typename || (!add_objects && obj.$hidden_via_menu))
  3539.          return false;
  3541.       let do_render = false;
  3542.       if (add_objects === undefined) {
  3543.          add_objects = true;
  3544.          do_render = true;
  3545.       } else if (not_wait_render)
  3546.          do_render = true;
  3549.       let promise = false;
  3551.       if ((obj._typename === clTList) || (obj._typename === clTObjArray)) {
  3552.          if (!obj.arr) return false;
  3553.          const parr = [];
  3554.          for (let n = 0; n < obj.arr.length; ++n) {
  3555.             const sobj = obj.arr[n];
  3556.             let sname = obj.opt ? obj.opt[n] : '';
  3557.             if (!sname) sname = (itemname || '<prnt>') + `/[${n}]`;
  3558.             parr.push(this.drawExtras(sobj, sname, add_objects));
  3559.          }
  3560.          promise = Promise.all(parr).then(ress => ress.indexOf(true) >= 0);
  3561.       } else if (obj._typename === 'Mesh') {
  3562.          // adding mesh as is
  3563.          this.addToExtrasContainer(obj);
  3564.          promise = Promise.resolve(true);
  3565.       } else if (obj._typename === 'TGeoTrack') {
  3566.          if (!add_objects || this.addExtra(obj, itemname))
  3567.             promise = this.drawGeoTrack(obj, itemname);
  3568.       } else if (obj._typename === clTPolyLine3D) {
  3569.          if (!add_objects || this.addExtra(obj, itemname))
  3570.             promise = this.drawPolyLine(obj, itemname);
  3571.       } else if ((obj._typename === clTEveTrack) || (obj._typename === `${nsREX}REveTrack`)) {
  3572.          if (!add_objects || this.addExtra(obj, itemname))
  3573.             promise = this.drawEveTrack(obj, itemname);
  3574.       } else if ((obj._typename === clTEvePointSet) || (obj._typename === `${nsREX}REvePointSet`) || (obj._typename === clTPolyMarker3D)) {
  3575.          if (!add_objects || this.addExtra(obj, itemname))
  3576.             promise = this.drawHit(obj, itemname);
  3577.       } else if ((obj._typename === clTEveGeoShapeExtract) || (obj._typename === clREveGeoShapeExtract)) {
  3578.          if (!add_objects || this.addExtra(obj, itemname))
  3579.             promise = this.drawExtraShape(obj, itemname);
  3580.       }
  3582.       return getPromise(promise).then(is_any => {
  3583.          if (!is_any || !do_render)
  3584.             return is_any;
  3586.          this.updateClipping(true);
  3588.          const pr = this.render3D(100, not_wait_render ? 'nopromise' : false);
  3590.          return not_wait_render ? this : pr;
  3591.       });
  3592.    }
  3594.    /** @summary returns container for extra objects */
  3595.    getExtrasContainer(action, name) {
  3596.       if (!this.#toplevel) return null;
  3598.       if (!name) name = 'tracks';
  3600.       let extras = null;
  3601.       const lst = [];
  3602.       for (let n = 0; n < this.#toplevel.children.length; ++n) {
  3603.          const chld = this.#toplevel.children[n];
  3604.          if (!chld._extras) continue;
  3605.          if (action === 'collect') { lst.push(chld); continue; }
  3606.          if (chld._extras === name) { extras = chld; break; }
  3607.       }
  3609.       if (action === 'collect') {
  3610.          for (let k = 0; k < lst.length; ++k)
  3611.             this.#toplevel.remove(lst[k]);
  3612.          return lst;
  3613.       }
  3615.       if (action === 'delete') {
  3616.          if (extras) this.#toplevel.remove(extras);
  3617.          disposeThreejsObject(extras);
  3618.          return null;
  3619.       }
  3621.       if ((action !== 'get') && !extras) {
  3622.          extras = new THREE.Object3D();
  3623.          extras._extras = name;
  3624.          this.#toplevel.add(extras);
  3625.       }
  3627.       return extras;
  3628.    }
  3630.    /** @summary add object to extras container.
  3631.      * @desc If fail, dispose object */
  3632.    addToExtrasContainer(obj, name) {
  3633.       const container = this.getExtrasContainer('', name);
  3634.       if (container)
  3635.          container.add(obj);
  3636.        else {
  3637.          console.warn('Fail to add object to extras');
  3638.          disposeThreejsObject(obj);
  3639.       }
  3640.    }
  3642.    /** @summary drawing TGeoTrack */
  3643.    drawGeoTrack(track, itemname) {
  3644.       if (!track?.fNpoints) return false;
  3646.       const linewidth = browser.isWin ? 1 : (track.fLineWidth || 1), // line width not supported on windows
  3647.             color = getColor(track.fLineColor) || '#ff00ff',
  3648.             npoints = Math.round(track.fNpoints/4), // each track point has [x,y,z,t] coordinate
  3649.             buf = new Float32Array((npoints-1)*6),
  3650.             projv = this.ctrl.projectPos,
  3651.             projx = (this.ctrl.project === 'x'),
  3652.             projy = (this.ctrl.project === 'y'),
  3653.             projz = (this.ctrl.project === 'z');
  3655.       for (let k = 0, pos = 0; k < npoints-1; ++k, pos+=6) {
  3656.          buf[pos] = projx ? projv : track.fPoints[k*4];
  3657.          buf[pos+1] = projy ? projv : track.fPoints[k*4+1];
  3658.          buf[pos+2] = projz ? projv : track.fPoints[k*4+2];
  3659.          buf[pos+3] = projx ? projv : track.fPoints[k*4+4];
  3660.          buf[pos+4] = projy ? projv : track.fPoints[k*4+5];
  3661.          buf[pos+5] = projz ? projv : track.fPoints[k*4+6];
  3662.       }
  3664.       const lineMaterial = new THREE.LineBasicMaterial({ color, linewidth }),
  3665.             line = createLineSegments(buf, lineMaterial);
  3667.       line.defaultOrder = line.renderOrder = 1000000; // to bring line to the front
  3668.       line.geo_name = itemname;
  3669.       line.geo_object = track;
  3670.       line.hightlightWidthScale = 2;
  3672.       if (itemname?.indexOf('<prnt>/Tracks') === 0)
  3673.          line.main_track = true;
  3675.       this.addToExtrasContainer(line);
  3677.       return true;
  3678.    }
  3680.    /** @summary drawing TPolyLine3D */
  3681.    drawPolyLine(line, itemname) {
  3682.       if (!line) return false;
  3684.       const linewidth = browser.isWin ? 1 : (line.fLineWidth || 1),
  3685.             color = getColor(line.fLineColor) || '#ff00ff',
  3686.             npoints = line.fN,
  3687.             fP = line.fP,
  3688.             buf = new Float32Array((npoints-1)*6),
  3689.             projv = this.ctrl.projectPos,
  3690.             projx = (this.ctrl.project === 'x'),
  3691.             projy = (this.ctrl.project === 'y'),
  3692.             projz = (this.ctrl.project === 'z');
  3694.       for (let k = 0, pos = 0; k < npoints-1; ++k, pos += 6) {
  3695.          buf[pos] = projx ? projv : fP[k*3];
  3696.          buf[pos+1] = projy ? projv : fP[k*3+1];
  3697.          buf[pos+2] = projz ? projv : fP[k*3+2];
  3698.          buf[pos+3] = projx ? projv : fP[k*3+3];
  3699.          buf[pos+4] = projy ? projv : fP[k*3+4];
  3700.          buf[pos+5] = projz ? projv : fP[k*3+5];
  3701.       }
  3703.       const lineMaterial = new THREE.LineBasicMaterial({ color, linewidth }),
  3704.             line3d = createLineSegments(buf, lineMaterial);
  3706.       line3d.defaultOrder = line3d.renderOrder = 1000000; // to bring line to the front
  3707.       line3d.geo_name = itemname;
  3708.       line3d.geo_object = line;
  3709.       line3d.hightlightWidthScale = 2;
  3711.       this.addToExtrasContainer(line3d);
  3713.       return true;
  3714.    }
  3716.    /** @summary Drawing TEveTrack */
  3717.    drawEveTrack(track, itemname) {
  3718.       if (!track || (track.fN <= 0)) return false;
  3720.       const linewidth = browser.isWin ? 1 : (track.fLineWidth || 1),
  3721.             color = getColor(track.fLineColor) || '#ff00ff',
  3722.             buf = new Float32Array((track.fN-1)*6),
  3723.             projv = this.ctrl.projectPos,
  3724.             projx = (this.ctrl.project === 'x'),
  3725.             projy = (this.ctrl.project === 'y'),
  3726.             projz = (this.ctrl.project === 'z');
  3728.       for (let k = 0, pos = 0; k < track.fN-1; ++k, pos+=6) {
  3729.          buf[pos] = projx ? projv : track.fP[k*3];
  3730.          buf[pos+1] = projy ? projv : track.fP[k*3+1];
  3731.          buf[pos+2] = projz ? projv : track.fP[k*3+2];
  3732.          buf[pos+3] = projx ? projv : track.fP[k*3+3];
  3733.          buf[pos+4] = projy ? projv : track.fP[k*3+4];
  3734.          buf[pos+5] = projz ? projv : track.fP[k*3+5];
  3735.       }
  3737.       const lineMaterial = new THREE.LineBasicMaterial({ color, linewidth }),
  3738.             line = createLineSegments(buf, lineMaterial);
  3740.       line.defaultOrder = line.renderOrder = 1000000; // to bring line to the front
  3741.       line.geo_name = itemname;
  3742.       line.geo_object = track;
  3743.       line.hightlightWidthScale = 2;
  3745.       this.addToExtrasContainer(line);
  3747.       return true;
  3748.    }
  3750.    /** @summary Drawing different hits types like TPolyMarker3D */
  3751.    async drawHit(hit, itemname) {
  3752.       if (!hit || !hit.fN || (hit.fN < 0))
  3753.          return false;
  3755.       // make hit size scaling factor of overall geometry size
  3756.       // otherwise it is not possible to correctly see hits at all
  3757.       const nhits = hit.fN,
  3758.             projv = this.ctrl.projectPos,
  3759.             projx = (this.ctrl.project === 'x'),
  3760.             projy = (this.ctrl.project === 'y'),
  3761.             projz = (this.ctrl.project === 'z'),
  3762.             hit_scale = Math.max(hit.fMarkerSize * this.getOverallSize() * (this.getOptions().dummy ? 0.015 : 0.005), 0.2),
  3763.             pnts = new PointsCreator(nhits, this.#webgl, hit_scale);
  3765.       for (let i = 0; i < nhits; i++) {
  3766.          pnts.addPoint(projx ? projv : hit.fP[i*3],
  3767.                        projy ? projv : hit.fP[i*3+1],
  3768.                        projz ? projv : hit.fP[i*3+2]);
  3769.       }
  3771.       return pnts.createPoints({ color: getColor(hit.fMarkerColor) || '#0000ff', style: hit.fMarkerStyle }).then(mesh => {
  3772.          mesh.defaultOrder = mesh.renderOrder = 1000000; // to bring points to the front
  3773.          mesh.highlightScale = 2;
  3774.          mesh.geo_name = itemname;
  3775.          mesh.geo_object = hit;
  3776.          this.addToExtrasContainer(mesh);
  3777.          return true; // indicate that rendering should be done
  3778.       });
  3779.    }
  3781.    /** @summary Draw extra shape on the geometry */
  3782.    drawExtraShape(obj, itemname) {
  3783.       // eslint-disable-next-line no-use-before-define
  3784.       const mesh = build(obj);
  3785.       if (!mesh) return false;
  3787.       mesh.geo_name = itemname;
  3788.       mesh.geo_object = obj;
  3790.       this.addToExtrasContainer(mesh);
  3791.       return true;
  3792.    }
  3794.    /** @summary Search for specified node
  3795.      * @private */
  3796.    findNodeWithVolume(name, action, prnt, itemname, volumes) {
  3797.       let first_level = false, res = null;
  3799.       if (!prnt) {
  3800.          prnt = this.getGeometry();
  3801.          if (!prnt && (getNodeKind(prnt) !== kindGeo))
  3802.             return null;
  3803.          itemname = this.#geo_manager ? prnt.fName : '';
  3804.          first_level = true;
  3805.          volumes = [];
  3806.       } else {
  3807.          if (itemname) itemname += '/';
  3808.          itemname += prnt.fName;
  3809.       }
  3811.       if (!prnt.fVolume || prnt.fVolume._searched) return null;
  3813.       if (name.test(prnt.fVolume.fName)) {
  3814.          res = action({ node: prnt, item: itemname });
  3815.          if (res) return res;
  3816.       }
  3818.       prnt.fVolume._searched = true;
  3819.       volumes.push(prnt.fVolume);
  3821.       if (prnt.fVolume.fNodes) {
  3822.          for (let n = 0, len = prnt.fVolume.fNodes.arr.length; n < len; ++n) {
  3823.             res = this.findNodeWithVolume(name, action, prnt.fVolume.fNodes.arr[n], itemname, volumes);
  3824.             if (res) break;
  3825.          }
  3826.       }
  3828.       if (first_level) {
  3829.          for (let n = 0, len = volumes.length; n < len; ++n)
  3830.             delete volumes[n]._searched;
  3831.       }
  3833.       return res;
  3834.    }
  3836.    /** @summary Search for created shape for nodeid
  3837.     * @desc Used in ROOT geometry painter */
  3838.    findNodeShape(nodeid) {
  3839.       if ((nodeid !== undefined) && !this.#draw_nodes) {
  3840.          for (let k = 0; k < this.#draw_nodes.length; ++k) {
  3841.             const item = this.geo_painter._draw_nodes[k];
  3842.             if ((item.nodeid === nodeid) && item.server_shape)
  3843.                return item.server_shape;
  3844.          }
  3845.       }
  3846.    }
  3848.    /** @summary Process script option - load and execute some gGeoManager-related calls */
  3849.    async loadMacro(script_name) {
  3850.       const result = { obj: this.getGeometry(), prefix: '' };
  3852.       if (this.#geo_manager)
  3853.          result.prefix = result.obj.fName;
  3855.       if (!script_name || (script_name.length < 3) || (getNodeKind(result.obj) !== kindGeo))
  3856.          return result;
  3858.       const mgr = {
  3859.             GetVolume: name => {
  3860.                const regexp = new RegExp('^'+name+'$'),
  3861.                    currnode = this.findNodeWithVolume(regexp, arg => arg);
  3863.                if (!currnode) console.log(`Did not found ${name} volume`);
  3865.                // return proxy object with several methods, typically used in ROOT geom scripts
  3866.                return {
  3867.                    found: currnode,
  3868.                    fVolume: currnode?.node?.fVolume,
  3869.                    InvisibleAll(flag) {
  3870.                       setInvisibleAll(this.fVolume, flag);
  3871.                    },
  3872.                    Draw() {
  3873.                       if (!this.found || !this.fVolume) return;
  3874.                       result.obj = this.found.node;
  3875.                       result.prefix = this.found.item;
  3876.                       console.log(`Select volume for drawing ${this.fVolume.fName} ${result.prefix}`);
  3877.                    },
  3878.                    SetTransparency(lvl) {
  3879.                      if (this.fVolume?.fMedium?.fMaterial)
  3880.                         this.fVolume.fMedium.fMaterial.fFillStyle = 3000 + lvl;
  3881.                    },
  3882.                    SetLineColor(col) {
  3883.                       if (this.fVolume) this.fVolume.fLineColor = col;
  3884.                    }
  3885.                 };
  3886.             },
  3888.             DefaultColors: () => {
  3889.                this.ctrl.dflt_colors = true;
  3890.             },
  3892.             SetMaxVisNodes: limit => {
  3893.                if (!this.ctrl.maxnodes)
  3894.                   this.ctrl.maxnodes = parseInt(limit) || 0;
  3895.             },
  3897.             SetVisLevel: limit => {
  3898.                if (!this.ctrl.vislevel)
  3899.                   this.ctrl.vislevel = parseInt(limit) || 0;
  3900.             }
  3901.           };
  3903.       showProgress(`Loading macro ${script_name}`);
  3905.       return httpRequest(script_name, 'text').then(script => {
  3906.          const lines = script.split('\n');
  3907.          let indx = 0;
  3909.          while (indx < lines.length) {
  3910.             let line = lines[indx++].trim();
  3912.             if (line.indexOf('//') === 0)
  3913.                continue;
  3915.             if (line.indexOf('gGeoManager') < 0) continue;
  3916.             line = line.replace('->GetVolume', '.GetVolume');
  3917.             line = line.replace('->InvisibleAll', '.InvisibleAll');
  3918.             line = line.replace('->SetMaxVisNodes', '.SetMaxVisNodes');
  3919.             line = line.replace('->DefaultColors', '.DefaultColors');
  3920.             line = line.replace('->Draw', '.Draw');
  3921.             line = line.replace('->SetTransparency', '.SetTransparency');
  3922.             line = line.replace('->SetLineColor', '.SetLineColor');
  3923.             line = line.replace('->SetVisLevel', '.SetVisLevel');
  3924.             if (line.indexOf('->') >= 0)
  3925.                continue;
  3927.             try {
  3928.                const func = new Function('gGeoManager', line);
  3929.                func(mgr);
  3930.             } catch {
  3931.                console.error(`Problem by processing ${line}`);
  3932.             }
  3933.          }
  3935.          return result;
  3936.       }).catch(() => {
  3937.          console.error(`Fail to load ${script_name}`);
  3938.          return result;
  3939.       });
  3940.    }
  3942.    /** @summary Extract shapes from draw message of geometry painter
  3943.      * @desc For the moment used in batch production */
  3944.    extractRawShapes(draw_msg, recreate) {
  3945.       let nodes = null, old_gradpersegm = 0;
  3947.       // array for descriptors for each node
  3948.       // if array too large (>1M), use JS object while only ~1K nodes are expected to be used
  3949.       if (recreate) {
  3950.          // if (draw_msg.kind !== 'draw') return false;
  3951.          nodes = (draw_msg.numnodes > 1e6) ? { length: draw_msg.numnodes } : new Array(draw_msg.numnodes); // array for all nodes
  3952.       }
  3954.       draw_msg.nodes.forEach(node => {
  3955.          node = ClonedNodes.formatServerElement(node);
  3956.          if (nodes)
  3957.             nodes[node.id] = node;
  3958.          else
  3959.             this.#clones.updateNode(node);
  3960.       });
  3962.       if (recreate) {
  3963.          this.assignClones(new ClonedNodes(null, nodes), true);
  3964.          this.#clones.name_prefix = this.#clones.getNodeName(0);
  3965.          this.#clones.setConfig(this.ctrl);
  3967.          // normally only need when making selection, not used in geo viewer
  3968.          // this.geo#clones.setMaxVisNodes(draw_msg.maxvisnodes);
  3969.          // this.geo#clones.setVisLevel(draw_msg.vislevel);
  3970.          // TODO: provide from server
  3971.          this.#clones.maxdepth = 20;
  3972.       }
  3974.       let nsegm = 0;
  3975.       if (draw_msg.cfg)
  3976.          nsegm = draw_msg.cfg.nsegm;
  3978.       if (nsegm) {
  3979.          old_gradpersegm = geoCfg('GradPerSegm');
  3980.          geoCfg('GradPerSegm', 360 / Math.max(nsegm, 6));
  3981.       }
  3983.       for (let cnt = 0; cnt < draw_msg.visibles.length; ++cnt) {
  3984.          const item = draw_msg.visibles[cnt], rd = item.ri;
  3986.          // entry may be provided without shape - it is ok
  3987.          if (rd)
  3988.             item.server_shape = rd.server_shape = createServerGeometry(rd, nsegm);
  3989.       }
  3991.       if (old_gradpersegm)
  3992.          geoCfg('GradPerSegm', old_gradpersegm);
  3994.       return true;
  3995.    }
  3997.    /** @summary Prepare drawings
  3998.      * @desc Return value used as promise for painter */
  3999.    async prepareObjectDraw(draw_obj, name_prefix) {
  4000.       // if did cleanup - ignore all kind of activity
  4001.       if (this.#did_cleanup)
  4002.          return null;
  4004.       if (name_prefix === '__geom_viewer_append__') {
  4005.          this.#new_append_nodes = draw_obj;
  4006.          this.ctrl.use_worker = 0;
  4007.          this.#geom_viewer = true; // indicate that working with geom viewer
  4008.       } else if ((name_prefix === '__geom_viewer_selection__') && this.#clones) {
  4009.          // these are selection done from geom viewer
  4010.          this.#new_draw_nodes = draw_obj;
  4011.          this.ctrl.use_worker = 0;
  4012.          this.#geom_viewer = true; // indicate that working with geom viewer
  4013.       } else if (this.getCentral())
  4014.          this.assignClones(this.getCentral().getClones(), false);
  4015.       else if (!draw_obj)
  4016.          this.assignClones(undefined, undefined);
  4017.       else {
  4018.          this.#start_drawing_time = new Date().getTime();
  4019.          this.assignClones(new ClonedNodes(draw_obj), true);
  4020.          let lvl = this.ctrl.vislevel, maxnodes = this.ctrl.maxnodes;
  4021.          if (this.#geo_manager) {
  4022.             if (!lvl && this.#geo_manager.fVisLevel)
  4023.                lvl = this.#geo_manager.fVisLevel;
  4024.             if (!maxnodes)
  4025.                maxnodes = this.#geo_manager.fMaxVisNodes;
  4026.          }
  4028.          this.#clones.setVisLevel(lvl);
  4029.          this.#clones.setMaxVisNodes(maxnodes, this.ctrl.more);
  4030.          this.#clones.setConfig(this.ctrl);
  4032.          this.#clones.name_prefix = name_prefix;
  4034.          const hide_top_volume = Boolean(this.#geo_manager) && !this.ctrl.showtop;
  4035.          let uniquevis = this.ctrl.no_screen ? 0 : this.#clones.markVisibles(true, false, hide_top_volume);
  4037.          if (uniquevis <= 0)
  4038.             uniquevis = this.#clones.markVisibles(false, false, hide_top_volume);
  4039.          else
  4040.             uniquevis = this.#clones.markVisibles(true, true, hide_top_volume); // copy bits once and use normal visibility bits
  4042.          this.#clones.produceIdShifts();
  4044.          const spent = new Date().getTime() - this.#start_drawing_time;
  4046.          if (!this.#scene && (settings.Debug || spent > 1000))
  4047.             console.log(`Creating clones ${this.#clones.nodes.length} takes ${spent} ms uniquevis ${uniquevis}`);
  4049.          if (this.ctrl._count)
  4050.             return this.drawCount(uniquevis, spent);
  4051.       }
  4053.       let promise = Promise.resolve(true);
  4055.       if (!this.#scene) {
  4056.          this.#first_drawing = true;
  4058.          const pp = this.getPadPainter();
  4060.          this.#on_pad = Boolean(pp);
  4062.          if (this.#on_pad) {
  4063.             let size, render3d, fp;
  4064.             promise = ensureTCanvas(this, '3d').then(() => {
  4065.                if (pp.fillatt?.color)
  4066.                   this.ctrl.background = pp.fillatt.color;
  4067.                fp = this.getFramePainter();
  4069.                this.batch_mode = pp.isBatchMode();
  4071.                render3d = getRender3DKind(undefined, this.batch_mode);
  4072.                assign3DHandler(fp);
  4073.                fp.mode3d = true;
  4075.                size = fp.getSizeFor3d(undefined, render3d);
  4077.                this.#fit_main_area = (size.can3d === -1);
  4079.                return this.createScene(size.width, size.height, render3d)
  4080.                           .then(dom => fp.add3dCanvas(size, dom, render3d === constants.Render3D.WebGL));
  4081.             });
  4082.          } else {
  4083.             const dom = this.selectDom('origin');
  4085.             this.batch_mode = isBatchMode() || (!dom.empty() && dom.property('_batch_mode'));
  4086.             this.batch_format = dom.property('_batch_format');
  4088.             const render3d = getRender3DKind(this.getOptions().Render3D, this.batch_mode);
  4090.             // activate worker
  4091.             if ((this.ctrl.use_worker > 0) && !this.batch_mode)
  4092.                this.startWorker();
  4094.             assign3DHandler(this);
  4096.             const size = this.getSizeFor3d(undefined, render3d);
  4098.             this.#fit_main_area = (size.can3d === -1);
  4100.             promise = this.createScene(size.width, size.height, render3d)
  4101.                           .then(dom2 => this.add3dCanvas(size, dom2, this.#webgl));
  4102.          }
  4103.       }
  4105.       return promise.then(() => {
  4106.          // this is limit for the visible faces, number of volumes does not matter
  4107.          if (this.#first_drawing && !this.ctrl.maxfaces)
  4108.             this.ctrl.maxfaces = 200000 * this.ctrl.more;
  4110.          // set top painter only when first child exists
  4111.          this.setAsMainPainter();
  4113.          this.createToolbar();
  4115.          // just draw extras and complete drawing if there are no main model
  4116.          if (!this.#clones)
  4117.             return this.completeDraw();
  4119.          return new Promise(resolveFunc => {
  4120.             this.#draw_resolveFuncs.push(resolveFunc);
  4121.             this.showDrawInfo('Drawing geometry');
  4122.             this.startDrawGeometry(true);
  4123.          });
  4124.       });
  4125.    }
  4127.    /** @summary methods show info when first geometry drawing is performed */
  4128.    showDrawInfo(msg) {
  4129.       if (this.isBatchMode() || !this.#first_drawing || !this.#start_drawing_time)
  4130.          return;
  4132.       const main = this.#renderer.domElement.parentNode;
  4133.       if (!main) return;
  4135.       let info = main.querySelector('.geo_info');
  4137.       if (!msg)
  4138.          info?.remove();
  4139.        else {
  4140.          const spent = (new Date().getTime() - this.#start_drawing_time)*1e-3;
  4141.          if (!info) {
  4142.             info = getDocument().createElement('p');
  4143.             info.setAttribute('class', 'geo_info');
  4144.             info.setAttribute('style', 'position: absolute; text-align: center; vertical-align: middle; top: 45%; left: 40%; color: red; font-size: 150%;');
  4145.             main.append(info);
  4146.          }
  4147.          info.innerHTML = `${msg}, ${spent.toFixed(1)}s`;
  4148.       }
  4149.    }
  4151.    /** @summary Reentrant method to perform geometry drawing step by step */
  4152.    continueDraw() {
  4153.       // nothing to do - exit
  4154.       if (this.isStage(stageInit)) return;
  4156.       const tm0 = new Date().getTime(),
  4157.             interval = this.#first_drawing ? 1000 : 200;
  4158.       let now = tm0;
  4160.       while (true) {
  4161.          const res = this.nextDrawAction();
  4162.          if (!res) break;
  4164.          now = new Date().getTime();
  4166.          // stop creation after 100 sec, render as is
  4167.          if (now - this.#start_render_tm > 1e5) {
  4168.             this.changeStage(stageInit, 'Abort build after 100s');
  4169.             break;
  4170.          }
  4172.          // if we are that fast, do next action
  4173.          if ((res === true) && (now - tm0 < interval))
  4174.             continue;
  4176.          if ((now - tm0 > interval) || (res === 1) || (res === 2)) {
  4177.             showProgress(this.#drawing_log);
  4179.             this.showDrawInfo(this.#drawing_log);
  4181.             if (this.#first_drawing && this.#webgl && (this.ctrl.info.num_meshes - this.#last_render_meshes > 100) && (now - this.#last_render_tm > 2.5*interval)) {
  4182.                this.adjustCameraPosition();
  4183.                this.render3D(-1);
  4184.                this.#last_render_meshes = this.ctrl.info.num_meshes;
  4185.             }
  4186.             if (res !== 2)
  4187.                setTimeout(() => this.continueDraw(), (res === 1) ? 100 : 1);
  4189.             return;
  4190.          }
  4191.       }
  4193.       const take_time = now - this.#start_render_tm;
  4195.       if ((this.#first_drawing || this.#full_redrawing) && (settings.Debug || take_time > 1000))
  4196.          console.log(`Create tm = ${take_time} meshes ${this.ctrl.info.num_meshes} faces ${this.ctrl.info.num_faces}`);
  4198.       if (take_time > 300) {
  4199.          showProgress('Rendering geometry');
  4200.          this.showDrawInfo('Rendering');
  4201.          return setTimeout(() => this.completeDraw(true), 10);
  4202.       }
  4204.       this.completeDraw(true);
  4205.    }
  4207.    /** @summary Checks camera position and recalculate rendering order if needed
  4208.      * @param force - if specified, forces calculations of render order */
  4209.    testCameraPosition(force) {
  4210.       this.#camera.updateMatrixWorld();
  4212.       this.drawOverlay();
  4214.       const origin = this.#camera.position.clone();
  4215.       if (!force && this.#last_camera_position) {
  4216.          // if camera position does not changed a lot, ignore such change
  4217.          const dist = this.#last_camera_position.distanceTo(origin);
  4218.          if (dist < (this.#overall_size || 1000)*1e-4) return;
  4219.       }
  4221.       this.#last_camera_position = origin; // remember current camera position
  4223.       if (this.ctrl._axis) {
  4224.          const vect = (this.#controls?.target || this.#lookat).clone().sub(this.#camera.position).normalize();
  4225.          this.getExtrasContainer('get', 'axis')?.traverse(obj3d => {
  4226.             if (isFunc(obj3d._axis_flip))
  4227.                obj3d._axis_flip(vect);
  4228.          });
  4229.       }
  4231.       if (!this.ctrl.project)
  4232.          produceRenderOrder(this.#toplevel, origin, this.ctrl.depthMethod, this.#clones);
  4233.    }
  4235.    /** @summary Call 3D rendering of the geometry
  4236.      * @param tmout - specifies delay, after which actual rendering will be invoked
  4237.      * @param [measure] - when true, for the first time printout rendering time
  4238.      * @return {Promise} when tmout bigger than 0 is specified
  4239.      * @desc Timeout used to avoid multiple rendering of the picture when several 3D drawings
  4240.      * superimposed with each other. If tmout <= 0, rendering performed immediately
  4241.      * Several special values are used:
  4242.      *   -1    - force recheck of rendering order based on camera position */
  4243.    render3D(tmout, measure) {
  4244.       if (!this.#renderer) {
  4245.          if (this.#did_cleanup)
  4246.             console.warn('try to render after cleanup');
  4247.          else
  4248.             console.warn('renderer object not exists - check code');
  4249.          return this;
  4250.       }
  4252.       const ret_promise = (tmout !== undefined) && (tmout > 0) && (measure !== 'nopromise');
  4254.       if (tmout === undefined)
  4255.          tmout = 5; // by default, rendering happens with timeout
  4257.       if ((tmout > 0) && this.#webgl) {
  4258.          if (this.isBatchMode())
  4259.             tmout = 1; // use minimal timeout in batch mode
  4260.          if (ret_promise) {
  4261.             return new Promise(resolveFunc => {
  4262.                this.#render_resolveFuncs.push(resolveFunc);
  4263.                if (!this.#render_tmout)
  4264.                   this.#render_tmout = setTimeout(() => this.render3D(0), tmout);
  4265.             });
  4266.          }
  4268.          if (!this.#render_tmout)
  4269.             this.#render_tmout = setTimeout(() => this.render3D(0), tmout);
  4270.          return this;
  4271.       }
  4273.       if (this.#render_tmout) {
  4274.          clearTimeout(this.#render_tmout);
  4275.          this.#render_tmout = undefined;
  4276.       }
  4278.       beforeRender3D(this.#renderer);
  4280.       const tm1 = new Date();
  4282.       if (this.#adjust_camera_with_render) {
  4283.          this.adjustCameraPosition('only_set');
  4284.          this.#adjust_camera_with_render = undefined;
  4285.       }
  4287.       this.testCameraPosition(tmout === -1);
  4289.       // its needed for outlinePass - do rendering, most consuming time
  4290.       if (this.#webgl && this.#effectComposer?.passes)
  4291.          this.#effectComposer.render();
  4292.        else if (this.#webgl && this.#bloomComposer?.passes) {
  4293.          this.#renderer.clear();
  4294.          this.#camera.layers.set(_BLOOM_SCENE);
  4295.          this.#bloomComposer.render();
  4296.          this.#renderer.clearDepth();
  4297.          this.#camera.layers.set(_ENTIRE_SCENE);
  4298.          this.#renderer.render(this.#scene, this.#camera);
  4299.       } else
  4300.          this.#renderer.render(this.#scene, this.#camera);
  4302.       const tm2 = new Date();
  4304.       this.#last_render_tm = tm2.getTime();
  4306.       if ((this.#first_render_tm === 0) && (measure === true)) {
  4307.          this.#first_render_tm = tm2.getTime() - tm1.getTime();
  4308.          if (this.#first_render_tm > 500)
  4309.             console.log(`three.js r${THREE.REVISION}, first render tm = ${this.#first_render_tm}`);
  4310.       }
  4312.       afterRender3D(this.#renderer);
  4314.       const arr = this.#render_resolveFuncs;
  4315.       this.#render_resolveFuncs = [];
  4316.       arr?.forEach(func => func(this));
  4317.    }
  4319.    /** @summary Start geo worker */
  4320.    async startWorker() {
  4321.       if (this.#worker)
  4322.          return;
  4324.       this.#worker_ready = false;
  4325.       this.#worker_jobs = 0; // counter how many requests send to worker
  4327.       let pr;
  4329.       if (isNodeJs()) {
  4330.          pr = import('node:worker_threads').then(h => {
  4331.             const wrk = new h.Worker(source_dir.slice(7) + 'modules/geom/nodeworker.mjs', { type: 'module' });
  4332.             wrk.on('message', msg => this.processWorkerReply(msg));
  4333.             return wrk;
  4334.          });
  4335.       } else {
  4336.          // Finally use ES6 module, see https://www.codedread.com/blog/archives/2017/10/19/web-workers-can-be-es6-modules-too/
  4337.          const wrk = new Worker(source_dir + 'modules/geom/geoworker.mjs', { type: 'module' });
  4338.          wrk.onmessage = e => this.processWorkerReply(e?.data);
  4339.          pr = Promise.resolve(wrk);
  4340.       }
  4342.       return pr.then(wrk => {
  4343.          this.#worker = wrk;
  4344.          // send initialization message with clones
  4345.          wrk.postMessage({
  4346.             init: true,   // indicate init command for worker
  4347.             tm0: new Date().getTime(),
  4348.             vislevel: this.#clones.getVisLevel(),
  4349.             maxvisnodes: this.#clones.getMaxVisNodes(),
  4350.             clones: this.#clones.nodes,
  4351.             sortmap: this.#clones.sortmap
  4352.          });
  4353.       });
  4354.    }
  4356.    /** @summary check if one can submit request to worker
  4357.      * @private */
  4358.    canSubmitToWorker(force) {
  4359.       return this.#worker ? this.#worker_ready && ((this.#worker_jobs === 0) || force) : false;
  4360.    }
  4362.    /** @summary submit request to worker
  4363.      * @private */
  4364.    submitToWorker(job) {
  4365.       if (!this.#worker)
  4366.          return false;
  4368.       this.#worker_jobs++;
  4369.       job.tm0 = new Date().getTime();
  4370.       this.#worker.postMessage(job);
  4371.    }
  4373.    /** @summary process reply from worker
  4374.      * @private */
  4375.    processWorkerReply(job) {
  4376.       if (!job || !isObject(job))
  4377.          return;
  4379.       if (job.log)
  4380.          return console.log(`geo: ${job.log}`);
  4382.       if (job.progress)
  4383.          return showProgress(job.progress);
  4385.       job.tm3 = new Date().getTime();
  4387.       if (job.init) {
  4388.          this.#worker_ready = true;
  4389.          return;
  4390.       }
  4392.       this.#worker_jobs--;
  4394.       if ('collect' in job) {
  4395.          this.#new_draw_nodes = job.new_nodes;
  4396.          this.#draw_all_nodes = job.complete;
  4397.          this.changeStage(stageAnalyze);
  4398.          // invoke methods immediately
  4399.          return this.continueDraw();
  4400.       }
  4402.       if ('shapes' in job) {
  4403.          for (let n=0; n<job.shapes.length; ++n) {
  4404.             const item = job.shapes[n],
  4405.                   origin = this.#build_shapes[n];
  4407.             if (item.buf_pos && item.buf_norm) {
  4408.                if (!item.buf_pos.length)
  4409.                   origin.geom = null;
  4410.                 else if (item.buf_pos.length !== item.buf_norm.length) {
  4411.                   console.error(`item.buf_pos.length ${item.buf_pos.length} !== item.buf_norm.length ${item.buf_norm.length}`);
  4412.                   origin.geom = null;
  4413.                } else {
  4414.                   origin.geom = new THREE.BufferGeometry();
  4416.                   origin.geom.setAttribute('position', new THREE.BufferAttribute(item.buf_pos, 3));
  4417.                   origin.geom.setAttribute('normal', new THREE.BufferAttribute(item.buf_norm, 3));
  4418.                }
  4420.                origin.ready = true;
  4421.                origin.nfaces = item.nfaces;
  4422.             }
  4423.          }
  4425.          job.tm4 = new Date().getTime();
  4427.          this.changeStage(stageBuild); // first check which shapes are used, than build meshes
  4429.          // invoke methods immediately
  4430.          return this.continueDraw();
  4431.       }
  4432.    }
  4434.    /** @summary start draw geometries on central and all subordinate painters
  4435.      * @private */
  4436.    testGeomChanges() {
  4437.       if (this.getCentral()) {
  4438.          console.warn('Get testGeomChanges call for subordinate painter');
  4439.          return this.getCentral().testGeomChanges();
  4440.       }
  4441.       this.startDrawGeometry();
  4442.       this.getSubordinates()?.forEach(p => p.startDrawGeometry());
  4443.    }
  4445.    /** @summary Draw axes and camera overlay */
  4446.    drawAxesAndOverlay(norender) {
  4447.       const res1 = this.drawAxes(),
  4448.             res2 = this.drawOverlay();
  4450.       if (!res1 && !res2)
  4451.          return norender ? null : this.render3D();
  4453.       return this.changedDepthMethod(norender ? 'norender' : undefined);
  4454.    }
  4456.    /** @summary Draw overlay for the orthographic cameras */
  4457.    drawOverlay() {
  4458.       this.getExtrasContainer('delete', 'overlay');
  4459.       if (!this.isOrthoCamera() || (this.ctrl.camera_overlay === 'none'))
  4460.          return false;
  4462.       const zoom = 0.5 / this.#camera.zoom,
  4463.             midx = (this.#camera.left + this.#camera.right) / 2,
  4464.             midy = (this.#camera.bottom + this.#camera.top) / 2,
  4465.             xmin = midx - (this.#camera.right - this.#camera.left) * zoom,
  4466.             xmax = midx + (this.#camera.right - this.#camera.left) * zoom,
  4467.             ymin = midy - (this.#camera.top - this.#camera.bottom) * zoom,
  4468.             ymax = midy + (this.#camera.top - this.#camera.bottom) * zoom,
  4469.             tick_size = (ymax - ymin) * 0.02,
  4470.             text_size = (ymax - ymin) * 0.015,
  4471.             grid_gap = (ymax - ymin) * 0.001,
  4472.             x1 = xmin + text_size * 5, x2 = xmax - text_size * 5,
  4473.             y1 = ymin + text_size * 3, y2 = ymax - text_size * 3,
  4474.             x_handle = new TAxisPainter(null, create(clTAxis));
  4476.       x_handle.configureAxis('xaxis', x1, x2, x1, x2, false, [x1, x2],
  4477.                              { log: 0, reverse: false });
  4478.       const y_handle = new TAxisPainter(null, create(clTAxis));
  4479.       y_handle.configureAxis('yaxis', y1, y2, y1, y2, false, [y1, y2],
  4480.                               { log: 0, reverse: false });
  4482.       const ii = this.#camera.orthoIndicies ?? [0, 1, 2];
  4483.       let buf, pos, midZ = 0, gridZ = 0;
  4485.       if (this.#camera.orthoZ)
  4486.          gridZ = midZ = this.#camera.orthoZ[0];
  4488.       const addPoint = (x, y, z) => {
  4489.          buf[pos+ii[0]] = x;
  4490.          buf[pos+ii[1]] = y;
  4491.          buf[pos+ii[2]] = z ?? gridZ;
  4492.          pos += 3;
  4493.       }, createText = (lbl, size) => {
  4494.          const text3d = createTextGeometry(lbl, size);
  4495.          text3d.computeBoundingBox();
  4496.          text3d._width = text3d.boundingBox.max.x - text3d.boundingBox.min.x;
  4497.          text3d._height = text3d.boundingBox.max.y - text3d.boundingBox.min.y;
  4499.          text3d.translate(-text3d._width/2, -text3d._height/2, 0);
  4500.          if (this.#camera.orthoSign < 0)
  4501.             text3d.rotateY(Math.PI);
  4503.          if (isFunc(this.#camera.orthoRotation))
  4504.             this.#camera.orthoRotation(text3d);
  4506.          return text3d;
  4507.       }, createTextMesh = (geom, material, x, y, z) => {
  4508.          const tgt = [0, 0, 0];
  4509.          tgt[ii[0]] = x;
  4510.          tgt[ii[1]] = y;
  4511.          tgt[ii[2]] = z ?? gridZ;
  4512.          const mesh = new THREE.Mesh(geom, material);
  4513.          mesh.translateX(tgt[0]).translateY(tgt[1]).translateZ(tgt[2]);
  4514.          return mesh;
  4515.       };
  4517.       if (this.ctrl.camera_overlay === 'bar') {
  4518.          const container = this.getExtrasContainer('create', 'overlay');
  4520.          let ox1 = xmin * 0.15 + xmax * 0.85,
  4521.              ox2 = xmin * 0.05 + xmax * 0.95;
  4522.          const oy1 = ymax * 0.9 + ymin * 0.1,
  4523.                oy2 = ymax * 0.86 + ymin * 0.14,
  4524.                ticks = x_handle.createTicks();
  4526.          if (ticks.major?.length > 1) {
  4527.             ox1 = ticks.major.at(-2);
  4528.             ox2 = ticks.major.at(-1);
  4529.          }
  4531.          buf = new Float32Array(3*6);
  4532.          pos = 0;
  4534.          addPoint(ox1, oy1, midZ);
  4535.          addPoint(ox1, oy2, midZ);
  4537.          addPoint(ox1, (oy1 + oy2) / 2, midZ);
  4538.          addPoint(ox2, (oy1 + oy2) / 2, midZ);
  4540.          addPoint(ox2, oy1, midZ);
  4541.          addPoint(ox2, oy2, midZ);
  4543.          const lineMaterial = new THREE.LineBasicMaterial({ color: 'green' }),
  4544.                textMaterial = new THREE.MeshBasicMaterial({ color: 'green', vertexColors: false });
  4546.          container.add(createLineSegments(buf, lineMaterial));
  4548.          const text3d = createText(x_handle.format(ox2 - ox1, true), Math.abs(oy2 - oy1));
  4550.          container.add(createTextMesh(text3d, textMaterial, (ox2 + ox1) / 2, (oy1 + oy2) / 2 + text3d._height * 0.8, midZ));
  4551.          return true;
  4552.       }
  4554.       const show_grid = this.ctrl.camera_overlay.indexOf('grid') === 0;
  4556.       if (show_grid && this.#camera.orthoZ) {
  4557.          if (this.ctrl.camera_overlay === 'gridf')
  4558.             gridZ += this.#camera.orthoSign * this.#camera.orthoZ[1];
  4559.          else if (this.ctrl.camera_overlay === 'gridb')
  4560.             gridZ -= this.#camera.orthoSign * this.#camera.orthoZ[1];
  4561.       }
  4563.       if ((this.ctrl.camera_overlay === 'axis') || show_grid) {
  4564.          const container = this.getExtrasContainer('create', 'overlay'),
  4565.                lineMaterial = new THREE.LineBasicMaterial({ color: new THREE.Color('black') }),
  4566.                gridMaterial1 = show_grid ? new THREE.LineBasicMaterial({ color: new THREE.Color(0xbbbbbb) }) : null,
  4567.                gridMaterial2 = show_grid ? new THREE.LineDashedMaterial({ color: new THREE.Color(0xdddddd), dashSize: grid_gap, gapSize: grid_gap }) : null,
  4568.                textMaterial = new THREE.MeshBasicMaterial({ color: 'black', vertexColors: false }),
  4569.                xticks = x_handle.createTicks();
  4571.          while (xticks.next()) {
  4572.             const x = xticks.tick, k = (xticks.kind === 1) ? 1.0 : 0.6;
  4574.             if (show_grid) {
  4575.                buf = new Float32Array(2*3); pos = 0;
  4576.                addPoint(x, ymax - k*tick_size - grid_gap);
  4577.                addPoint(x, ymin + k*tick_size + grid_gap);
  4578.                container.add(createLineSegments(buf, xticks.kind === 1 ? gridMaterial1 : gridMaterial2));
  4579.             }
  4581.             buf = new Float32Array(4*3); pos = 0;
  4582.             addPoint(x, ymax);
  4583.             addPoint(x, ymax - k*tick_size);
  4584.             addPoint(x, ymin);
  4585.             addPoint(x, ymin + k*tick_size);
  4587.             container.add(createLineSegments(buf, lineMaterial));
  4589.             if (xticks.kind !== 1) continue;
  4591.             const text3d = createText(x_handle.format(x, true), text_size);
  4593.             container.add(createTextMesh(text3d, textMaterial, x, ymax - tick_size - text_size/2 - text3d._height/2));
  4595.             container.add(createTextMesh(text3d, textMaterial, x, ymin + tick_size + text_size/2 + text3d._height/2));
  4596.          }
  4598.          const yticks = y_handle.createTicks();
  4600.          while (yticks.next()) {
  4601.             const y = yticks.tick, k = (yticks.kind === 1) ? 1.0 : 0.6;
  4603.             if (show_grid) {
  4604.                buf = new Float32Array(2*3); pos = 0;
  4605.                addPoint(xmin + k*tick_size + grid_gap, y);
  4606.                addPoint(xmax - k*tick_size - grid_gap, y);
  4607.                container.add(createLineSegments(buf, yticks.kind === 1 ? gridMaterial1 : gridMaterial2));
  4608.             }
  4610.             buf = new Float32Array(4*3); pos = 0;
  4611.             addPoint(xmin, y);
  4612.             addPoint(xmin + k*tick_size, y);
  4613.             addPoint(xmax, y);
  4614.             addPoint(xmax - k*tick_size, y);
  4616.             container.add(createLineSegments(buf, lineMaterial));
  4618.             if (yticks.kind !== 1) continue;
  4620.             const text3d = createText(y_handle.format(y, true), text_size);
  4622.             container.add(createTextMesh(text3d, textMaterial, xmin + tick_size + text_size/2 + text3d._width/2, y));
  4624.             container.add(createTextMesh(text3d, textMaterial, xmax - tick_size - text_size/2 - text3d._width/2, y));
  4625.          }
  4627.          return true;
  4628.       }
  4630.       return false;
  4631.    }
  4633.    /** @summary Draw axes if configured, otherwise just remove completely */
  4634.    drawAxes() {
  4635.       this.getExtrasContainer('delete', 'axis');
  4637.       if (!this.ctrl._axis)
  4638.          return false;
  4640.       const box = this.getGeomBoundingBox(this.#toplevel, this.#superimpose ? 'original' : undefined),
  4641.           container = this.getExtrasContainer('create', 'axis'),
  4642.           text_size = 0.02 * Math.max(box.max.x - box.min.x, box.max.y - box.min.y, box.max.z - box.min.z),
  4643.           center = [0, 0, 0],
  4644.           names = ['x', 'y', 'z'],
  4645.           labels = ['X', 'Y', 'Z'],
  4646.           colors = ['red', 'green', 'blue'],
  4647.           ortho = this.isOrthoCamera(),
  4648.           ckind = this.ctrl.camera_kind ?? 'perspective';
  4650.       if (this.ctrl._axis === 2) {
  4651.          for (let naxis = 0; naxis < 3; ++naxis) {
  4652.             const name = names[naxis];
  4653.             if ((box.min[name] <= 0) && (box.max[name] >= 0)) continue;
  4654.             center[naxis] = (box.min[name] + box.max[name])/2;
  4655.          }
  4656.       }
  4658.       for (let naxis = 0; naxis < 3; ++naxis) {
  4659.          // exclude axis which is not seen
  4660.          if (ortho && ckind.indexOf(labels[naxis]) < 0) continue;
  4662.          const buf = new Float32Array(6),
  4663.                color = colors[naxis],
  4664.                name = names[naxis],
  4666.           valueToString = val => {
  4667.             if (!val) return '0';
  4668.             const lg = Math.log10(Math.abs(val));
  4669.             if (lg < 0) {
  4670.                if (lg > -1) return val.toFixed(2);
  4671.                if (lg > -2) return val.toFixed(3);
  4672.             } else {
  4673.                if (lg < 2) return val.toFixed(1);
  4674.                if (lg < 4) return val.toFixed(0);
  4675.             }
  4676.             return val.toExponential(2);
  4677.          },
  4679.           lbl = valueToString(box.max[name]) + ' ' + labels[naxis];
  4681.          buf[0] = box.min.x;
  4682.          buf[1] = box.min.y;
  4683.          buf[2] = box.min.z;
  4685.          buf[3] = box.min.x;
  4686.          buf[4] = box.min.y;
  4687.          buf[5] = box.min.z;
  4689.          switch (naxis) {
  4690.            case 0: buf[3] = box.max.x; break;
  4691.            case 1: buf[4] = box.max.y; break;
  4692.            case 2: buf[5] = box.max.z; break;
  4693.          }
  4695.          if (this.ctrl._axis === 2) {
  4696.             for (let k = 0; k < 6; ++k)
  4697.                if ((k % 3) !== naxis) buf[k] = center[k%3];
  4698.          }
  4700.          const lineMaterial = new THREE.LineBasicMaterial({ color });
  4701.          let mesh = createLineSegments(buf, lineMaterial);
  4703.          mesh._no_clip = true; // skip from clipping
  4705.          container.add(mesh);
  4707.          const textMaterial = new THREE.MeshBasicMaterial({ color, vertexColors: false });
  4709.          if ((center[naxis] === 0) && (center[naxis] >= box.min[name]) && (center[naxis] <= box.max[name])) {
  4710.             if ((this.ctrl._axis !== 2) || (naxis === 0)) {
  4711.                const geom = ortho ? new THREE.CircleGeometry(text_size*0.25) : new THREE.SphereGeometry(text_size*0.25);
  4712.                mesh = new THREE.Mesh(geom, textMaterial);
  4713.                mesh.translateX(naxis === 0 ? center[0] : buf[0]);
  4714.                mesh.translateY(naxis === 1 ? center[1] : buf[1]);
  4715.                mesh.translateZ(naxis === 2 ? center[2] : buf[2]);
  4716.                mesh._no_clip = true;
  4717.                container.add(mesh);
  4718.             }
  4719.          }
  4721.          let text3d = createTextGeometry(lbl, text_size);
  4722.          mesh = new THREE.Mesh(text3d, textMaterial);
  4723.          mesh._no_clip = true; // skip from clipping
  4725.          function setSideRotation(mesh2, normal) {
  4726.             mesh2._other_side = false;
  4727.             mesh2._axis_norm = normal ?? new THREE.Vector3(1, 0, 0);
  4728.             mesh2._axis_flip = function(vect) {
  4729.                const other_side = vect.dot(this._axis_norm) < 0;
  4730.                if (this._other_side !== other_side) {
  4731.                   this._other_side = other_side;
  4732.                   this.rotateY(Math.PI);
  4733.                }
  4734.             };
  4735.          }
  4737.          function setTopRotation(mesh2, first_angle = -1) {
  4738.             mesh2._last_angle = first_angle;
  4739.             mesh2._axis_flip = function(vect) {
  4740.                let angle;
  4741.                switch (this._axis_name) {
  4742.                   case 'x': angle = -Math.atan2(vect.y, vect.z); break;
  4743.                   case 'y': angle = -Math.atan2(vect.z, vect.x); break;
  4744.                   default: angle = Math.atan2(vect.y, vect.x);
  4745.                }
  4746.                angle = Math.round(angle / Math.PI * 2 + 2) % 4;
  4747.                if (this._last_angle !== angle) {
  4748.                   this.rotateX((angle - this._last_angle) * Math.PI/2);
  4749.                   this._last_angle = angle;
  4750.                }
  4751.             };
  4752.          }
  4754.          let textbox = new THREE.Box3().setFromObject(mesh);
  4756.          text3d.translate(-textbox.max.x*0.5, -textbox.max.y/2, 0);
  4758.          mesh.translateX(buf[3]);
  4759.          mesh.translateY(buf[4]);
  4760.          mesh.translateZ(buf[5]);
  4762.          mesh._axis_name = name;
  4764.          if (naxis === 0) {
  4765.             if (ortho && ckind.indexOf('OX') > 0)
  4766.                setTopRotation(mesh, 0);
  4767.              else if (ortho ? ckind.indexOf('OY') > 0 : this.ctrl._yup)
  4768.                setSideRotation(mesh, new THREE.Vector3(0, 0, -1));
  4769.              else {
  4770.                setSideRotation(mesh, new THREE.Vector3(0, 1, 0));
  4771.                mesh.rotateX(Math.PI/2);
  4772.             }
  4774.             mesh.translateX(text_size*0.5 + textbox.max.x*0.5);
  4775.          } else if (naxis === 1) {
  4776.             if (ortho ? ckind.indexOf('OY') > 0 : this.ctrl._yup) {
  4777.                setTopRotation(mesh, 2);
  4778.                mesh.rotateX(-Math.PI/2);
  4779.                mesh.rotateY(-Math.PI/2);
  4780.                mesh.translateX(text_size*0.5 + textbox.max.x*0.5);
  4781.             } else {
  4782.                setSideRotation(mesh);
  4783.                mesh.rotateX(Math.PI/2);
  4784.                mesh.rotateY(-Math.PI/2);
  4785.                mesh.translateX(-textbox.max.x*0.5 - text_size*0.5);
  4786.             }
  4787.          } else if (naxis === 2) {
  4788.             if (ortho ? ckind.indexOf('OZ') < 0 : this.ctrl._yup) {
  4789.                const zox = ortho && (ckind.indexOf('ZOX') > 0 || ckind.indexOf('ZNOX') > 0);
  4790.                setSideRotation(mesh, zox ? new THREE.Vector3(0, -1, 0) : undefined);
  4791.                mesh.rotateY(-Math.PI/2);
  4792.                if (zox) mesh.rotateX(-Math.PI/2);
  4793.             } else {
  4794.                setTopRotation(mesh);
  4795.                mesh.rotateX(Math.PI/2);
  4796.                mesh.rotateZ(Math.PI/2);
  4797.             }
  4798.             mesh.translateX(text_size*0.5 + textbox.max.x*0.5);
  4799.          }
  4801.          container.add(mesh);
  4803.          text3d = createTextGeometry(valueToString(box.min[name]), text_size);
  4805.          mesh = new THREE.Mesh(text3d, textMaterial);
  4806.          mesh._no_clip = true; // skip from clipping
  4807.          textbox = new THREE.Box3().setFromObject(mesh);
  4809.          text3d.translate(-textbox.max.x*0.5, -textbox.max.y/2, 0);
  4811.          mesh._axis_name = name;
  4813.          mesh.translateX(buf[0]);
  4814.          mesh.translateY(buf[1]);
  4815.          mesh.translateZ(buf[2]);
  4817.          if (naxis === 0) {
  4818.             if (ortho && ckind.indexOf('OX') > 0)
  4819.                setTopRotation(mesh, 0);
  4820.              else if (ortho ? ckind.indexOf('OY') > 0 : this.ctrl._yup)
  4821.                setSideRotation(mesh, new THREE.Vector3(0, 0, -1));
  4822.              else {
  4823.                setSideRotation(mesh, new THREE.Vector3(0, 1, 0));
  4824.                mesh.rotateX(Math.PI/2);
  4825.             }
  4826.             mesh.translateX(-text_size*0.5 - textbox.max.x*0.5);
  4827.          } else if (naxis === 1) {
  4828.             if (ortho ? ckind.indexOf('OY') > 0 : this.ctrl._yup) {
  4829.                setTopRotation(mesh, 2);
  4830.                mesh.rotateX(-Math.PI/2);
  4831.                mesh.rotateY(-Math.PI/2);
  4832.                mesh.translateX(-textbox.max.x*0.5 - text_size*0.5);
  4833.             } else {
  4834.                setSideRotation(mesh);
  4835.                mesh.rotateX(Math.PI/2);
  4836.                mesh.rotateY(-Math.PI/2);
  4837.                mesh.translateX(textbox.max.x*0.5 + text_size*0.5);
  4838.             }
  4839.          } else if (naxis === 2) {
  4840.             if (ortho ? ckind.indexOf('OZ') < 0 : this.ctrl._yup) {
  4841.                const zox = ortho && (ckind.indexOf('ZOX') > 0 || ckind.indexOf('ZNOX') > 0);
  4842.                setSideRotation(mesh, zox ? new THREE.Vector3(0, -1, 0) : undefined);
  4843.                mesh.rotateY(-Math.PI/2);
  4844.                if (zox) mesh.rotateX(-Math.PI/2);
  4845.             } else {
  4846.                setTopRotation(mesh);
  4847.                mesh.rotateX(Math.PI/2);
  4848.                mesh.rotateZ(Math.PI/2);
  4849.             }
  4850.             mesh.translateX(-textbox.max.x*0.5 - text_size*0.5);
  4851.          }
  4853.          container.add(mesh);
  4854.       }
  4856.       // after creating axes trigger rendering and recalculation of depth
  4857.       return true;
  4858.    }
  4860.    /** @summary Set axes visibility 0 - off, 1 - on, 2 - centered */
  4861.    setAxesDraw(on) {
  4862.       if (on === 'toggle')
  4863.          this.ctrl._axis = this.ctrl._axis ? 0 : 1;
  4864.       else
  4865.          this.ctrl._axis = (typeof on === 'number') ? on : (on ? 1 : 0);
  4866.       return this.drawAxesAndOverlay();
  4867.    }
  4869.    /** @summary Set auto rotate mode */
  4870.    setAutoRotate(on) {
  4871.       if (this.ctrl.project) return;
  4872.       if (on !== undefined) this.ctrl.rotate = on;
  4873.       this.autorotate(2.5);
  4874.    }
  4876.    /** @summary Toggle wireframe mode */
  4877.    toggleWireFrame() {
  4878.       this.ctrl.wireframe = !this.ctrl.wireframe;
  4879.       this.changedWireFrame();
  4880.    }
  4882.    /** @summary Specify wireframe mode */
  4883.    setWireFrame(on) {
  4884.       this.ctrl.wireframe = Boolean(on);
  4885.       this.changedWireFrame();
  4886.    }
  4888.    /** @summary Specify showtop draw options, relevant only for TGeoManager */
  4889.    setShowTop(on) {
  4890.       this.ctrl.showtop = Boolean(on);
  4891.       return this.startRedraw();
  4892.    }
  4894.    /** @summary Should be called when configuration of particular axis is changed */
  4895.    changedClipping(naxis = -1) {
  4896.       if ((naxis < 0) || this.ctrl.clip[naxis]?.enabled)
  4897.          this.updateClipping(false, true);
  4898.    }
  4900.    /** @summary Should be called when depth test flag is changed */
  4901.    changedDepthTest() {
  4902.       if (!this.#toplevel) return;
  4903.       const flag = this.ctrl.depthTest;
  4904.       this.#toplevel.traverse(node => {
  4905.          if (node instanceof THREE.Mesh)
  4906.             node.material.depthTest = flag;
  4907.       });
  4909.       this.render3D(0);
  4910.    }
  4912.    /** @summary Should be called when depth method is changed */
  4913.    changedDepthMethod(arg) {
  4914.       // force recalculation of render order
  4915.       this.#last_camera_position = undefined;
  4916.       if (arg !== 'norender')
  4917.          return this.render3D();
  4918.    }
  4920.    /** @summary Assign clipping attributes to the meshes - supported only for webgl */
  4921.    updateClipping(without_render, force_traverse) {
  4922.       // do not try clipping with SVG renderer
  4923.       if (this.#renderer?.jsroot_render3d === constants.Render3D.SVG) return;
  4925.       if (!this.#clip_planes) {
  4926.          this.#clip_planes = [new THREE.Plane(new THREE.Vector3(1, 0, 0), 0),
  4927.                              new THREE.Plane(new THREE.Vector3(0, this.ctrl._yup ? -1 : 1, 0), 0),
  4928.                              new THREE.Plane(new THREE.Vector3(0, 0, this.ctrl._yup ? 1 : -1), 0)];
  4929.       }
  4931.       const clip = this.ctrl.clip,
  4932.             clip_constants = [-1 * clip[0].value, clip[1].value, (this.ctrl._yup ? -1 : 1) * clip[2].value],
  4933.             container = this.getExtrasContainer(this.ctrl.clipVisualize ? '' : 'delete', 'clipping');
  4934.       let panels = [], changed = false,
  4935.           clip_cfg = this.ctrl.clipIntersect ? 16 : 0;
  4937.       for (let k = 0; k < 3; ++k) {
  4938.          if (clip[k].enabled)
  4939.             clip_cfg += 2 << k;
  4940.          if (this.#clip_planes[k].constant !== clip_constants[k]) {
  4941.             if (clip[k].enabled) changed = true;
  4942.             this.#clip_planes[k].constant = clip_constants[k];
  4943.          }
  4944.          if (clip[k].enabled)
  4945.             panels.push(this.#clip_planes[k]);
  4947.          if (container && clip[k].enabled) {
  4948.             const helper = new THREE.PlaneHelper(this.#clip_planes[k], (clip[k].max - clip[k].min));
  4949.             helper._no_clip = true;
  4950.             container.add(helper);
  4951.          }
  4952.       }
  4953.       if (!panels.length)
  4954.          panels = null;
  4956.       if (this.#last_clip_cfg !== clip_cfg)
  4957.          changed = true;
  4959.       this.#last_clip_cfg = clip_cfg;
  4961.       const any_clipping = Boolean(panels), ci = this.ctrl.clipIntersect,
  4962.             material_side = any_clipping ? THREE.DoubleSide : THREE.FrontSide;
  4964.       if (force_traverse || changed) {
  4965.          this.#scene.traverse(node => {
  4966.             if (!node._no_clip && (node.material?.clippingPlanes !== undefined)) {
  4967.                if (node.material.clippingPlanes !== panels) {
  4968.                   node.material.clipIntersection = ci;
  4969.                   node.material.clippingPlanes = panels;
  4970.                   node.material.needsUpdate = true;
  4971.                }
  4973.                if (node.material.emissive !== undefined) {
  4974.                   if (node.material.side !== material_side) {
  4975.                      node.material.side = material_side;
  4976.                      node.material.needsUpdate = true;
  4977.                   }
  4978.                }
  4979.             }
  4980.          });
  4981.       }
  4983.       this.ctrl.doubleside = any_clipping;
  4985.       if (!without_render) this.render3D(0);
  4987.       return changed;
  4988.    }
  4990.    /** @summary Assign callback, invoked every time when drawing is completed
  4991.      * @desc Used together with web-based geometry viewer
  4992.      * @private */
  4993.    setCompleteHandler(callback) {
  4994.       this.#complete_handler = callback;
  4995.    }
  4997.    /** @summary Completes drawing procedure
  4998.      * @return {Promise} for ready */
  4999.    async completeDraw(close_progress) {
  5000.       let first_time = false, full_redraw = false, check_extras = true;
  5002.       if (!this.ctrl) {
  5003.          console.warn('ctrl object does not exist in completeDraw - something went wrong');
  5004.          return this;
  5005.       }
  5007.       let promise;
  5009.       if (!this.#clones) {
  5010.          check_extras = false;
  5011.          // if extra object where append, redraw them at the end
  5012.          this.getExtrasContainer('delete'); // delete old container
  5013.          promise = this.drawExtras(this.getCentral()?.getExtraObjects() || this.getExtraObjects(), '', false);
  5014.       } else if ((this.#first_drawing || this.#full_redrawing) && this.ctrl.tracks && this.#geo_manager)
  5015.          promise = this.drawExtras(this.#geo_manager.fTracks, '<prnt>/Tracks');
  5016.       else
  5017.          promise = Promise.resolve(true);
  5019.       return promise.then(() => {
  5020.          if (this.#full_redrawing) {
  5021.             this.adjustCameraPosition('first');
  5022.             this.#full_redrawing = false;
  5023.             full_redraw = true;
  5024.             this.changedDepthMethod('norender');
  5025.          }
  5027.          if (this.#first_drawing) {
  5028.             this.adjustCameraPosition('first');
  5029.             this.showDrawInfo();
  5030.             this.#first_drawing = false;
  5031.             first_time = true;
  5032.             full_redraw = true;
  5033.          }
  5035.          if (first_time)
  5036.             this.completeScene();
  5038.          if (full_redraw && (this.ctrl.trans_radial || this.ctrl.trans_z))
  5039.             this.changedTransformation('norender');
  5041.          if (full_redraw)
  5042.             return this.drawAxesAndOverlay(true);
  5043.       }).then(() => {
  5044.          this.#scene.overrideMaterial = null;
  5046.          if (this.#provided_more_nodes !== undefined) {
  5047.             this.appendMoreNodes(this.#provided_more_nodes, true);
  5048.             this.#provided_more_nodes = undefined;
  5049.          }
  5051.          if (check_extras) {
  5052.             // if extra object where append, redraw them at the end
  5053.             this.getExtrasContainer('delete'); // delete old container
  5054.             return this.drawExtras(this.getCentral()?.getExtraObjects() || this.getExtraObjects(), '', false);
  5055.          }
  5056.       }).then(() => {
  5057.          this.updateClipping(true); // do not render
  5059.          this.render3D(0, true);
  5061.          if (close_progress)
  5062.             showProgress();
  5064.          this.addOrbitControls();
  5066.          if (first_time && !this.isBatchMode()) {
  5067.             // after first draw check if highlight can be enabled
  5068.             if (this.ctrl.highlight === 0)
  5069.                this.ctrl.highlight = (this.#first_render_tm < 1000);
  5071.             // also highlight of scene object can be assigned at the first draw
  5072.             if (this.ctrl.highlight_scene === 0)
  5073.                this.ctrl.highlight_scene = this.ctrl.highlight;
  5075.             // if rotation was enabled, do it
  5076.             if (this.#webgl && this.ctrl.rotate && !this.ctrl.project)
  5077.                this.autorotate(2.5);
  5078.             if (this.#webgl && this.ctrl.show_controls)
  5079.                this.showControlGui(true);
  5080.          }
  5082.          this.setAsMainPainter();
  5084.          const arr = this.#draw_resolveFuncs;
  5085.          this.#draw_resolveFuncs = [];
  5086.          arr?.forEach(func => func(this));
  5088.          if (isFunc(this.#complete_handler))
  5089.             this.#complete_handler(this);
  5091.          if (this.#draw_nodes_again)
  5092.             this.startDrawGeometry(); // relaunch drawing
  5093.          else
  5094.             this.#drawing_ready = true; // indicate that drawing is completed
  5096.          return this;
  5097.       });
  5098.    }
  5100.    /** @summary Returns true if geometry drawing is completed */
  5101.    isDrawingReady() { return this.#drawing_ready ?? false; }
  5103.    /** @summary Remove already drawn node. Used by geom viewer */
  5104.    removeDrawnNode(nodeid) {
  5105.       if (!this.#draw_nodes) return;
  5107.       const new_nodes = [];
  5109.       for (let n = 0; n < this.#draw_nodes.length; ++n) {
  5110.          const entry = this.#draw_nodes[n];
  5111.          if ((entry.nodeid === nodeid) || this.#clones.isIdInStack(nodeid, entry.stack))
  5112.             this.#clones.createObject3D(entry.stack, this.#toplevel, 'delete_mesh');
  5113.           else
  5114.             new_nodes.push(entry);
  5115.       }
  5117.       if (new_nodes.length < this.#draw_nodes.length) {
  5118.          this.#draw_nodes = new_nodes;
  5119.          this.render3D();
  5120.       }
  5121.    }
  5123.    /** @summary Cleanup geometry painter */
  5124.    cleanup(first_time) {
  5125.       if (!first_time) {
  5126.          let can3d = 0;
  5128.          if (!this.#superimpose) {
  5129.             this.clearTopPainter(); // remove as pointer
  5131.             if (this.#on_pad) {
  5132.                const fp = this.getFramePainter();
  5133.                if (fp?.mode3d) {
  5134.                   fp.clear3dCanvas();
  5135.                   fp.mode3d = false;
  5136.                }
  5137.             } else if (isFunc(this.clear3dCanvas))
  5138.                can3d = this.clear3dCanvas(); // remove 3d canvas from main HTML element
  5140.             disposeThreejsObject(this.#scene);
  5141.          }
  5143.          this.#toolbar?.cleanup(); // remove toolbar
  5145.          disposeThreejsObject(this.#fullgeom_proj);
  5147.          this.#controls?.cleanup();
  5149.          this.#gui?.destroy();
  5151.          this.#worker?.terminate();
  5153.          this.#animating = undefined;
  5155.          const obj = this.getGeometry();
  5156.          if (obj && this.ctrl.is_main) {
  5157.             if (obj.$geo_painter === this)
  5158.                delete obj.$geo_painter;
  5159.             else if (obj.fVolume?.$geo_painter === this)
  5160.                delete obj.fVolume.$geo_painter;
  5161.          }
  5163.          this.#central_painter?.assignSubordinate(this, false);
  5164.          this.#subordinate_painters?.forEach(p => {
  5165.             p.assignCentral(this, false);
  5166.             if (p.getClones() === this.getClones())
  5167.                p.assignClones(undefined, undefined);
  5168.          });
  5170.          this.#geo_manager = undefined;
  5171.          this.#highlight_handlers = undefined;
  5173.          super.cleanup();
  5175.          delete this.ctrl;
  5177.          this.#did_cleanup = true;
  5179.          if (can3d < 0)
  5180.             this.selectDom().html('');
  5181.       }
  5183.       this.#central_painter = undefined;
  5184.       this.#subordinate_painters = [];
  5186.       const arr = this.#render_resolveFuncs;
  5187.       this.#render_resolveFuncs = [];
  5188.       arr?.forEach(func => func(this));
  5190.       if (!this.#superimpose)
  5191.          cleanupRender3D(this.#renderer);
  5193.       this.ensureBloom(false);
  5194.       this.#effectComposer = undefined;
  5196.       this.#scene = undefined;
  5197.       this.#scene_size = undefined;
  5198.       this.#scene_width = 0;
  5199.       this.#scene_height = 0;
  5200.       this.#renderer = null;
  5201.       this.#toplevel = null;
  5202.       this.#fullgeom_proj = undefined;
  5203.       this.#fog = undefined;
  5204.       this.#camera= undefined;
  5205.       this.#camera0pos = undefined;
  5206.       this.#lookat = undefined;
  5207.       this.#selected_mesh = undefined;
  5208.       this.#custom_bounding_box = undefined;
  5210.       this.assignClones(undefined, undefined);
  5211.       this.#new_draw_nodes = undefined;
  5212.       this.#new_append_nodes = undefined;
  5213.       this.#last_camera_position = undefined;
  5215.       this.#on_pad = undefined;
  5217.       this.#start_render_tm = 0;
  5218.       this.#first_render_tm = 0; // time needed for first rendering
  5219.       this.#last_render_tm = 0;
  5221.       this.changeStage(stageInit, 'cleanup');
  5222.       this.#drawing_log = undefined;
  5224.       this.#gui = undefined;
  5225.       this.#controls = undefined;
  5226.       this.#toolbar = undefined;
  5228.       this.#worker = undefined;
  5229.    }
  5231.    /** @summary perform resize */
  5232.    performResize(width, height) {
  5233.       if ((this.#scene_width === width) && (this.#scene_height === height))
  5234.          return false;
  5235.       if ((width < 10) || (height < 10)) return false;
  5237.       this.#scene_width = width;
  5238.       this.#scene_height = height;
  5240.       if (this.#camera && this.#renderer) {
  5241.          if (this.#camera.isPerspectiveCamera)
  5242.             this.#camera.aspect = this.#scene_width / this.#scene_height;
  5243.          else if (this.#camera.isOrthographicCamera)
  5244.             this.adjustCameraPosition(true, true);
  5245.          this.#camera.updateProjectionMatrix();
  5246.          this.#renderer.setSize(this.#scene_width, this.#scene_height, !this.#fit_main_area);
  5247.          this.#effectComposer?.setSize(this.#scene_width, this.#scene_height);
  5248.          this.#bloomComposer?.setSize(this.#scene_width, this.#scene_height);
  5250.          if (this.isStage(stageInit))
  5251.             this.render3D();
  5252.       }
  5254.       return true;
  5255.    }
  5257.    /** @summary Check if HTML element was resized and drawing need to be adjusted */
  5258.    checkResize(arg) {
  5259.       const cp = this.getCanvPainter();
  5261.       // firefox is the only browser which correctly supports resize of embedded canvas,
  5262.       // for others we should force canvas redrawing at every step
  5263.       if (cp && !cp.checkCanvasResize(arg))
  5264.          return false;
  5266.       const sz = this.getSizeFor3d();
  5267.       return this.performResize(sz.width, sz.height);
  5268.    }
  5270.    /** @summary Toggle enlarge state */
  5271.    toggleEnlarge() {
  5272.       if (this.enlargeMain('toggle'))
  5273.         this.checkResize();
  5274.    }
  5276.    /** @summary either change mesh wireframe or return current value
  5277.      * @return undefined when wireframe cannot be accessed
  5278.      * @private */
  5279.    accessObjectWireFrame(obj, on) {
  5280.       if (!obj?.material)
  5281.          return;
  5283.       if ((on !== undefined) && obj.stack)
  5284.          obj.material.wireframe = on;
  5286.       return obj.material.wireframe;
  5287.    }
  5289.    /** @summary handle wireframe flag change in GUI
  5290.      * @private */
  5291.    changedWireFrame() {
  5292.       this.#scene?.traverse(obj => this.accessObjectWireFrame(obj, this.ctrl.wireframe));
  5294.       this.render3D();
  5295.    }
  5297.    /** @summary Update object in geo painter */
  5298.    updateObject(obj) {
  5299.       if ((obj === 'same') || !obj?._typename)
  5300.          return false;
  5301.       if (obj === this.getObject())
  5302.          return true;
  5304.       let gm;
  5305.       if (obj._typename === clTGeoManager) {
  5306.          gm = obj;
  5307.          obj = obj.fMasterVolume;
  5308.       }
  5310.       if (obj._typename.indexOf(clTGeoVolume) === 0)
  5311.          obj = { _typename: clTGeoNode, fVolume: obj, fName: obj.fName, $geoh: obj.$geoh, _proxy: true };
  5313.       if (this.#geo_manager && gm) {
  5314.          this.#geo_manager = gm;
  5315.          this.assignObject(obj);
  5316.          this.#did_update = true;
  5317.          return true;
  5318.       }
  5320.       if (!this.matchObjectType(obj._typename))
  5321.          return false;
  5323.       this.assignObject(obj);
  5324.       this.#did_update = true;
  5325.       return true;
  5326.    }
  5328.    /** @summary Cleanup TGeo drawings */
  5329.    clearDrawings() {
  5330.       this.assignClones(undefined, undefined);
  5332.       this.#extra_objects = undefined;
  5333.       this.#last_clip_cfg = undefined;
  5335.       // only remove all childs from top level object
  5336.       disposeThreejsObject(this.#toplevel, true);
  5338.       this.#full_redrawing = true;
  5339.    }
  5341.     /** @summary Redraw TGeo object inside TPad */
  5342.    redraw() {
  5343.       if (this.#superimpose) {
  5344.          const cfg = getHistPainter3DCfg(this.getMainPainter());
  5346.          if (cfg) {
  5347.             this.#toplevel.scale.set(cfg.scale_x ?? 1, cfg.scale_y ?? 1, cfg.scale_z ?? 1);
  5348.             this.#toplevel.position.set(cfg.offset_x ?? 0, cfg.offset_y ?? 0, cfg.offset_z ?? 0);
  5349.             this.#toplevel.updateMatrix();
  5350.             this.#toplevel.updateMatrixWorld();
  5351.          }
  5352.       }
  5354.       if (this.#did_update)
  5355.          return this.startRedraw();
  5357.       const fp = this.#on_pad ? this.getFramePainter() : null;
  5358.       if (!fp)
  5359.          return Promise.resolve(false);
  5360.       const sz = fp.getSizeFor3d(fp.access3dKind());
  5361.       fp.apply3dSize(sz);
  5362.       return this.performResize(sz.width, sz.height);
  5363.    }
  5365.    /** @summary Redraw TGeo object */
  5366.    redrawObject(obj, opt) {
  5367.       if (!this.updateObject(obj, opt))
  5368.          return false;
  5370.       return this.startRedraw();
  5371.    }
  5373.    /** @summary Start geometry redraw */
  5374.    startRedraw(tmout) {
  5375.       if (this.#redraw_timer) {
  5376.          clearTimeout(this.#redraw_timer);
  5377.          this.#redraw_timer = undefined;
  5378.       }
  5380.       if (tmout) {
  5381.          this.#redraw_timer = setTimeout(() => this.startRedraw(), tmout);
  5382.          return;
  5383.       }
  5385.       this.#did_update = undefined;
  5387.       this.clearDrawings();
  5388.       const draw_obj = this.getGeometry(),
  5389.             name_prefix = this.#geo_manager ? draw_obj.fName : '';
  5390.       return this.prepareObjectDraw(draw_obj, name_prefix);
  5391.    }
  5393.   /** @summary draw TGeo object */
  5394.    static async draw(dom, obj, opt) {
  5395.       if (!obj) return null;
  5397.       let shape = null, extras = null, extras_path = '', is_eve = false;
  5399.       if (('fShapeBits' in obj) && ('fShapeId' in obj)) {
  5400.          shape = obj; obj = null;
  5401.       } else if ((obj._typename === clTGeoVolumeAssembly) || (obj._typename === clTGeoVolume))
  5402.          shape = obj.fShape;
  5403.       else if ((obj._typename === clTEveGeoShapeExtract) || (obj._typename === clREveGeoShapeExtract)) {
  5404.          shape = obj.fShape; is_eve = true;
  5405.       } else if (obj._typename === clTGeoManager)
  5406.          shape = obj.fMasterVolume.fShape;
  5407.       else if (obj._typename === clTGeoOverlap) {
  5408.          extras = obj.fMarker;
  5409.          extras_path = '<prnt>/Marker';
  5410.          obj = buildOverlapVolume(obj);
  5411.          if (!opt) opt = 'wire';
  5412.       } else if ('fVolume' in obj) {
  5413.          if (obj.fVolume) shape = obj.fVolume.fShape;
  5414.       } else
  5415.          obj = null;
  5417.       if (isStr(opt) && opt.indexOf('comp') === 0 && shape && (shape._typename === clTGeoCompositeShape) && shape.fNode) {
  5418.          let maxlvl = 1;
  5419.          opt = opt.slice(4);
  5420.          if (opt[0] === 'x') { maxlvl = 999; opt = opt.slice(1) + '_vislvl999'; }
  5421.          obj = buildCompositeVolume(shape, maxlvl);
  5422.       }
  5424.       if (!obj && shape)
  5425.          obj = Object.assign(create(clTNamed), { _typename: clTEveGeoShapeExtract, fTrans: null, fShape: shape, fRGBA: [0, 1, 0, 1], fElements: null, fRnrSelf: true });
  5427.       if (!obj)
  5428.          return null;
  5430.       // eslint-disable-next-line no-use-before-define
  5431.       const painter = createGeoPainter(dom, obj, opt);
  5433.       if (painter.ctrl.is_main && !obj.$geo_painter)
  5434.          obj.$geo_painter = painter;
  5436.       if (!painter.ctrl.is_main && painter.ctrl.project && obj.$geo_painter) {
  5437.          painter.assignCentral(obj.$geo_painter);
  5438.          obj.$geo_painter.assignSubordinate(painter);
  5439.       }
  5441.       if (is_eve && (!painter.ctrl.vislevel || (painter.ctrl.vislevel < 9)))
  5442.          painter.ctrl.vislevel = 9;
  5444.       if (extras) {
  5445.          painter.ctrl.split_colors = true;
  5446.          painter.addExtra(extras, extras_path);
  5447.       }
  5449.       return painter.loadMacro(painter.ctrl.script_name).then(arg => painter.prepareObjectDraw(arg.obj, arg.prefix));
  5450.    }
  5452. } // class TGeoPainter
  5455. let add_settings = false;
  5457. /** @summary Get icon for the browser
  5458.   * @private */
  5459. function getBrowserIcon(hitem, hpainter) {
  5460.    let icon = '';
  5461.    switch (hitem._kind) {
  5462.       case prROOT + clTEveTrack: icon = 'img_evetrack'; break;
  5463.       case prROOT + clTEvePointSet: icon = 'img_evepoints'; break;
  5464.       case prROOT + clTPolyMarker3D: icon = 'img_evepoints'; break;
  5465.    }
  5466.    if (icon) {
  5467.       const drawitem = findItemWithGeoPainter(hitem);
  5468.       if (drawitem?._painter?.extraObjectVisible(hpainter, hitem))
  5469.          icon += ' geovis_this';
  5470.    }
  5471.    return icon;
  5472. }
  5474. /** @summary handle click on browser icon
  5475.   * @private */
  5476. function browserIconClick(hitem, hpainter) {
  5477.    if (hitem._volume) {
  5478.       if (hitem._more && hitem._volume.fNodes?.arr?.length)
  5479.          toggleGeoBit(hitem._volume, geoBITS.kVisDaughters);
  5480.       else
  5481.          toggleGeoBit(hitem._volume, geoBITS.kVisThis);
  5483.       updateBrowserIcons(hitem._volume, hpainter);
  5485.       findItemWithGeoPainter(hitem, true);
  5486.       return false; // no need to update icon - we did it ourself
  5487.    }
  5489.    if (hitem._geoobj && ((hitem._geoobj._typename === clTEveGeoShapeExtract) || (hitem._geoobj._typename === clREveGeoShapeExtract))) {
  5490.       hitem._geoobj.fRnrSelf = !hitem._geoobj.fRnrSelf;
  5492.       updateBrowserIcons(hitem._geoobj, hpainter);
  5493.       findItemWithGeoPainter(hitem, true);
  5494.       return false; // no need to update icon - we did it ourself
  5495.    }
  5497.    // first check that geo painter assigned with the item
  5498.    const drawitem = findItemWithGeoPainter(hitem),
  5499.          newstate = drawitem?._painter?.extraObjectVisible(hpainter, hitem, true);
  5501.    // return true means browser should update icon for the item
  5502.    return newstate !== undefined;
  5503. }
  5506. /** @summary Create geo-related css entries
  5507.   * @private */
  5508. function injectGeoStyle() {
  5509.    if (!add_settings && isFunc(internals.addDrawFunc)) {
  5510.       add_settings = true;
  5511.       // indication that draw and hierarchy is loaded, create css
  5512.       internals.addDrawFunc({ name: clTEvePointSet, icon_get: getBrowserIcon, icon_click: browserIconClick });
  5513.       internals.addDrawFunc({ name: clTEveTrack, icon_get: getBrowserIcon, icon_click: browserIconClick });
  5514.    }
  5516.    function img(name, code) {
  5517.       return `.jsroot .img_${name} { display: inline-block; height: 16px; width: 16px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQ${code}'); }`;
  5518.    }
  5520.    injectStyle(`
  5521. ${img('geoarb8', 'CAAAAAA6mKC9AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJ0Uk5TAAB2k804AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAAEgAAABIAEbJaz4AAAB1SURBVBjTdY6rEYAwEETTy6lzK8/Fo+Jj18dTAjUgaQGfGiggtRDE8RtY93Zu514If2nzk2ux9c5TZkwXbiWTUavzws69oBfpYBrMT4r0Jhsw+QfRgQSw+CaKRsKsnV+SaF8MN49RBSgPUxO85PMl5n4tfGUH2gghs2uPAeQAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTUtMTItMDJUMTQ6MjY6MjkrMDE6MDDARtd2AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE0LTExLTEyVDA4OjM5OjE5KzAxOjAwO3ydwwAAAABJRU5ErkJggg==')}
  5522. ${img('geocombi', 'CAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJiS0dEAP+Hj8y/AAAACXBIWXMAAABIAAAASABGyWs+AAAAlUlEQVQoz5VQMQ4CMQyzEUNnBqT7Bo+4nZUH8gj+welWJsQDkHoCEYakTXMHSFiq2jqu4xRAEl2A7w4myWzpzCSZRZ658ldKu1hPnFsequBIc/hcLli3l52MAIANtpWrDsv8waGTW6BPuFtsdZArXyFuj33TQpazGEQF38phipnLgItxRcAoOeNpzv4PTXnC42fb//AGI5YqfQAU8dkAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTUtMTItMDJUMTQ6MjY6MjkrMDE6MDDARtd2AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE0LTExLTEyVDA4OjM5OjE5KzAxOjAwO3ydwwAAAABJRU5ErkJggg==')}
  5523. ${img('geocone', 'CAAAAAA6mKC9AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJ0Uk5TAAB2k804AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAAEgAAABIAEbJaz4AAACRSURBVBjTdY+xDcNACEVvEm/ggo6Olva37IB0C3iEzJABvAHFTXBDeJRwthMnUvylk44vPjxK+afeokX0flQhJO7L4pafSOMxzaxIKc/Tc7SIjNLyieyZSjBzc4DqMZI0HTMonWPBNlogOLeuewbg9c0hOiIqH7DKmTCuFykjHe4XOzQ58XVMGxzt575tKzd6AX9yMkcWyPlsAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE1LTEyLTAyVDE0OjI2OjI5KzAxOjAwwEbXdgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNC0xMS0xMlQwODozOToxOSswMTowMDt8ncMAAAAASUVORK5CYII=')}
  5524. ${img('geogtra', 'CAAAAAA6mKC9AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJ0Uk5TAAB2k804AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAAEgAAABIAEbJaz4AAACCSURBVBjTVc+hDQMxDAVQD1FyqCQk0MwsCwQEG3+eCW6B0FvheDboFMGepTlVitPP/Cz5y0S/mNkw8pySU9INJDDH4vM4Usm5OrQXasXtkA+tQF+zxfcDY8EVwgNeiwmA37TEccK5oLOwQtuCj7BM2Fq7iGrxVqJbSsH+GzXs+798AThwKMh3/6jDAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE1LTEyLTAyVDE0OjI2OjI5KzAxOjAwwEbXdgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNC0xMS0xMlQwODozOToxOSswMTowMDt8ncMAAAAASUVORK5CYII=')}
  5525. ${img('geomedium', 'BAMAAADt3eJSAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABVQTFRFAAAAAAAAMDAww8PDWKj/////gICAG0/C4AAAAAF0Uk5TAEDm2GYAAAABYktHRAX4b+nHAAAACXBIWXMAAABIAAAASABGyWs+AAAAXElEQVQI102MwRGAMAgEuQ6IDwvQCjQdhAl/H7ED038JHhkd3dcOLAgESFARaAqnEB3yrj6QSEym1RbbOKinN+8q2Esui1GaX7VXSi4RUbxHRbER8X6O5Pg/fLgBBzMN8HfXD3AAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTUtMTItMDJUMTQ6MjY6MjkrMDE6MDDARtd2AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE0LTExLTEyVDA4OjM5OjE5KzAxOjAwO3ydwwAAAABJRU5ErkJggg==')}
  5526. ${img('geopara', 'CAAAAAA6mKC9AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJ0Uk5TAAB2k804AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAAEgAAABIAEbJaz4AAABtSURBVBjTY2DADq5MT7+CzD9kaKjp+QhJYIWqublhMbKAgpOnZxWSQJdsVJTndCSBKoWoAM/VSALpqlEBAYeQBKJAAsi2BGgCBZDdEWUYFZCOLFBlGOWJ7AyGFeaotjIccopageK3R12PGHABACTYHWd0tGw6AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE1LTEyLTAyVDE0OjI2OjI5KzAxOjAwwEbXdgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNC0xMS0xMlQwODozOToxOSswMTowMDt8ncMAAAAASUVORK5CYII=')}
  5527. ${img('georotation', 'CAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJiS0dEAP+Hj8y/AAAACXBIWXMAAABIAAAASABGyWs+AAAAiklEQVQoz2NgYGBgYGDg+A/BmIAFIvyDEbs0AwMTAwHACLPiB5QVBTdpGSOSCZjScDcgc4z+32BgYGBgEGIQw3QDLkdCTZD8/xJFeBfDVxQT/j9n/MeIrMCNIRBJwX8GRuzGM/yHKMAljeILNFOuMTyEisEUMKIqucrwB2oyIhyQpH8y/MZrLWkAAHFzIHIc0Q5yAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE1LTEyLTAyVDE0OjI2OjI5KzAxOjAwwEbXdgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNC0xMS0xMlQwODozOToxOSswMTowMDt8ncMAAAAASUVORK5CYII=')}
  5528. ${img('geotranslation', 'CAAAAAA6mKC9AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJ0Uk5TAAB2k804AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAAEgAAABIAEbJaz4AAABESURBVBjTY2DgYGAAYzjgAAIQgSLAgSwAAcrWUUCAJBAVhSpgBAQumALGCJPAAsriHIS0IAQ4UAU4cGphQBWwZSAOAADGJBKdZk/rHQAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNS0xMi0wMlQxNDoyNjoyOSswMTowMMBG13YAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTQtMTEtMTJUMDg6Mzk6MTkrMDE6MDA7fJ3DAAAAAElFTkSuQmCC')}
  5529. ${img('geotrd2', 'CAAAAAA6mKC9AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJ0Uk5TAAB2k804AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAAEgAAABIAEbJaz4AAABsSURBVBjTbY+xDcAwCARZx6UraiaAmpoRvIIb75PWI2QITxIiRQKk0CCO/xcA/NZ9LRs7RkJEYg3QxczUwoGsXiMAoe8lAelqRWFNKpiNXZLAalRDd0f3TMgeMckABKsCDmu+442RddeHz9cf9jUkW8smGn8AAAAldEVYdGRhdGU6Y3JlYXRlADIwMTUtMTItMDJUMTQ6MjY6MjkrMDE6MDDARtd2AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE0LTExLTEyVDA4OjM5OjE5KzAxOjAwO3ydwwAAAABJRU5ErkJggg==')}
  5530. ${img('geovolume', 'BAMAAADt3eJSAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAB5QTFRFAAAAMDAw///Ay8uc/7+Q/4BgmJh4gIDgAAD/////CZb2ugAAAAF0Uk5TAEDm2GYAAAABYktHRAnx2aXsAAAACXBIWXMAAABIAAAASABGyWs+AAAAR0lEQVQI12NggAEBIBAEQgYGQUYQAyIGIhgwAZMSGCgwMJuEKimFOhswsKWAGG4JDGxJIBk1EEO9o6NIDVkEpgauC24ODAAASQ8Pkj/retYAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTUtMTItMDJUMTQ6MjY6MjkrMDE6MDDARtd2AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE0LTExLTEyVDA4OjM5OjE5KzAxOjAwO3ydwwAAAABJRU5ErkJggg==')}
  5531. ${img('geoassembly', 'BAMAAADt3eJSAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAA9QTFRFAAAAMDAw/wAAAAD/////jEo0BQAAAAF0Uk5TAEDm2GYAAAABYktHRASPaNlRAAAACXBIWXMAAABIAAAASABGyWs+AAAAOklEQVQI12NggAFGRgEgEBRgEBSAMhgYGQQEgAR+oARGDIwCIAYjUL0A2DQQg9nY2ABVBKoGrgsDAADxzgNboMz8zQAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNS0xMi0wMlQxNDoyNjoyOSswMTowMMBG13YAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTQtMTEtMTJUMDg6Mzk6MTkrMDE6MDA7fJ3DAAAAAElFTkSuQmCC')}
  5532. ${img('geocomposite', 'CAAAAAA6mKC9AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJ0Uk5TAAB2k804AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAAEgAAABIAEbJaz4AAABuSURBVBjTY2AgF2hqgQCCr+0V4O7hFmgCF7CJyKysKkmxhfGNLaw9SppqAi2gfMuY5Agrl+ZaC6iAUXRJZX6Ic0klTMA5urapPFY5NRcmYKFqWl8S5RobBRNg0PbNT3a1dDGH8RlM3LysTRjIBwAG6xrzJt11BAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNS0xMi0wMlQxNDoyNjoyOSswMTowMMBG13YAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTQtMTEtMTJUMDg6Mzk6MTkrMDE6MDA7fJ3DAAAAAElFTkSuQmCC')}
  5533. ${img('geoctub', 'CAAAAAA6mKC9AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJ0Uk5TAAB2k804AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAAEgAAABIAEbJaz4AAACESURBVBjTdc+xDcMwDARA7cKKHTuWX37LHaw+vQbQAJomA7j2DB7FhCMFCZB8pxPwJEv5kQcZW+3HencRBekak4aaMQIi8YJdAQ1CMeE0UBkuaLMETklQ9Alhka0JzzXWqLVBuQYPpWcVuBbZjZafNRYcDk9o/b07bvhINz+/zxu1/M0FSRcmAk/HaIcAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTUtMTItMDJUMTQ6MjY6MjkrMDE6MDDARtd2AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE0LTExLTEyVDA4OjM5OjE5KzAxOjAwO3ydwwAAAABJRU5ErkJggg==')}
  5534. ${img('geohype', 'CAAAAAA6mKC9AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJ0Uk5TAAB2k804AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAAEgAAABIAEbJaz4AAACKSURBVBjTbU+rFQQhDKQSDDISEYuMREfHx6eHKMpYuf5qoIQt5bgDblfcuJk3nySEhSvceDV3c/ejT66lspopE9pXyIlkCrHMBACpu1DClekQAREi/loviCnF/NhRwJLaQ6hVhPjB8bOCsjlnNnNl0FWJVWxAqGzHONRHpu5Ml+nQ+8GzNW9n+Is3eg80Nk0iiwoAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTUtMTItMDJUMTQ6MjY6MjkrMDE6MDDARtd2AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE0LTExLTEyVDA4OjM5OjE5KzAxOjAwO3ydwwAAAABJRU5ErkJggg==')}
  5535. ${img('geomixture', 'BAMAAADt3eJSAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAACFQTFRFAAAAAAAAKysrVVUA//8B//8AgICAqqpV398gv79A////VYJtlwAAAAF0Uk5TAEDm2GYAAAABYktHRApo0PRWAAAACXBIWXMAAABIAAAASABGyWs+AAAAXklEQVQI12NgwASCQsJCgoZAhoADq1tKIJAhEpDGxpYIZKgxsLElgBhibAkOCY4gKTaGkPRGIEPUIYEBrEaAIY0tDawmgYWNgREkkjCVjRWkWCUhLY0FJCIIBljsBgCZTAykgaRiRwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNS0xMi0wMlQxNDoyNjoyOSswMTowMMBG13YAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTQtMTEtMTJUMDg6Mzk6MTkrMDE6MDA7fJ3DAAAAAElFTkSuQmCC')}
  5536. ${img('geopcon', 'CAAAAAA6mKC9AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJ0Uk5TAAB2k804AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAAEgAAABIAEbJaz4AAACJSURBVBjTdc+hGcQwCIZhhjl/rkgWiECj8XgGyAbZoD5LdIRMkEnKkV575n75Pp8AgLU54dmh6mauelyAL2Qzxfe2sklioq6FacFAcRFXYhwJHdU5rDD2hEYB/CmoJVRMiIJqgtENuoqA8ltAlYAqRH4d1tGkwzTqN2gA7Nv+fUwkgZ/3mg34txM+szzATJS1HQAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNS0xMi0wMlQxNDoyNjoyOSswMTowMMBG13YAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTQtMTEtMTJUMDg6Mzk6MTkrMDE6MDA7fJ3DAAAAAElFTkSuQmCC')}
  5537. ${img('geosphere', 'CAAAAAA6mKC9AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJ0Uk5TAAB2k804AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAAEgAAABIAEbJaz4AAACFSURBVBjTdY+xEcQwCAQp5QNFjpQ5vZACFBFTADFFfKYCXINzlUAJruXll2ekxDAEt9zcANFbXb2mqm56dxsymAH0yccAJaeNi0h5QGyfxGJmivMPjj0nmLsbRmyFCss3rlbpcUjfS8wLUNRcJyCF6uqg2IvYCnoKC7f1kSbA6riTz7evfwj3Ml+H3KBqAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE1LTEyLTAyVDE0OjI2OjI5KzAxOjAwwEbXdgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNC0xMS0xMlQwODozOToxOSswMTowMDt8ncMAAAAASUVORK5CYII=')}
  5538. ${img('geotrap', 'CAAAAAA6mKC9AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJ0Uk5TAAB2k804AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAAEgAAABIAEbJaz4AAAB5SURBVBjTbY+hFYAwDETZB1OJi4yNPp0JqjtAZ2AELL5DdABmIS2PtLxHXH7u7l2W5W+uHMHpGiCHLYR1yw4SCZMIXBOJWVSjK7QDDAu4g8OBmAKK4sAEDdR3rw8YmcUcrEijKKhl7lN1IQPn9ExlgU6/WEyc75+5AYK0KY5oHBDfAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE1LTEyLTAyVDE0OjI2OjI5KzAxOjAwwEbXdgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNC0xMS0xMlQwODozOToxOSswMTowMDt8ncMAAAAASUVORK5CYII=')}
  5539. ${img('geotubeseg', 'CAAAAAA6mKC9AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJ0Uk5TAAB2k804AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAAEgAAABIAEbJaz4AAACBSURBVBjTdc+hEcQwDARA12P6QFBQ9LDwcXEVkA7SQTr4BlJBakgpsWdsh/wfux3NSCrlV86Mlrxmz1pBWq3bAHwETohxABVmDZADQp1BE+wDNnGywzHgmHDOreJNTDH3Xn3CVX0dpu2MHcIFBkYp/gKsQ8SCQ72V+36/+2aWf3kAQfgshnpXF0wAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTUtMTItMDJUMTQ6MjY6MjkrMDE6MDDARtd2AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE0LTExLTEyVDA4OjM5OjE5KzAxOjAwO3ydwwAAAABJRU5ErkJggg==')}
  5540. ${img('geoxtru', 'CAAAAAA6mKC9AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJ0Uk5TAAB2k804AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAAEgAAABIAEbJaz4AAABcSURBVBjTY2AgEmhpeZV56vmWwQW00QUYwAJlSAI6XmVqukh8PT1bT03PchhXX09Pr9wQIQDiJ+ZowgWAXD3bck+QQDlCQTkDQgCoxA/ERBKwhbDglgA1lDMQDwCc/Rvq8nYsWgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNS0xMi0wMlQxNDoyNjoyOSswMTowMMBG13YAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTQtMTEtMTJUMDg6Mzk6MTkrMDE6MDA7fJ3DAAAAAElFTkSuQmCC')}
  5541. ${img('geobbox', 'CAAAAAA6mKC9AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJ0Uk5TAAB2k804AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAAEgAAABIAEbJaz4AAAB/SURBVBjTVc+hEYAwDAXQLlNRF1tVGxn9NRswQiSSCdgDyQBM0FlIIb2WuL77uf6E8E0N02wKYRwDciTKREVvB04GuZSyOMCABRB1WGzF3uDNQTvs/RcDtJXT4fSEXA5XoiQt0ttVSm8Co2psIOvoimjAOqBmFtH5wEP2373TPIvTK1nrpULXAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE1LTEyLTAyVDE0OjI2OjI5KzAxOjAwwEbXdgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNC0xMS0xMlQwODozOToxOSswMTowMDt8ncMAAAAASUVORK5CYII=')}
  5542. ${img('geoconeseg', 'CAAAAAA6mKC9AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJ0Uk5TAAB2k804AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAAEgAAABIAEbJaz4AAAB4SURBVBjTdc6hEcAgDAXQbFNZXHQkFlkd/30myAIMwAws0gmYpVzvoFyv/S5P/B+izzQ387ZA2pkDnvsU1SQLVIFrOM4JFmEaYp2gCQbmPEGODhJ8jt7Am47hwgrzInGAifa/elUZnQLY00iU30BZAV+BWi2VfnIBv1osbHH8jX0AAAAldEVYdGRhdGU6Y3JlYXRlADIwMTUtMTItMDJUMTQ6MjY6MjkrMDE6MDDARtd2AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE0LTExLTEyVDA4OjM5OjE5KzAxOjAwO3ydwwAAAABJRU5ErkJggg==')}
  5543. ${img('geoeltu', 'CAAAAAA6mKC9AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJ0Uk5TAAB2k804AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAAEgAAABIAEbJaz4AAACGSURBVBjTdY+hFYUwDEU7xq9CIXC4uNjY6KczQXeoYgVMR2ABRmCGjvIp/6dgiEruueedvBDuOR57LQnKyc8CJmKO+N8bieIUPtmBWjIIx8XDBHYCipsnql1g2D0UP2OoDqwBncf+RdZmzFMHizRjog7KZYzawd4Ay93lEAPWR7WAvNbwMl/XwSxBV8qCjgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNS0xMi0wMlQxNDoyNjoyOSswMTowMMBG13YAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTQtMTEtMTJUMDg6Mzk6MTkrMDE6MDA7fJ3DAAAAAElFTkSuQmCC')}
  5544. ${img('geomaterial', 'CAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJiS0dEAP+Hj8y/AAAACXBIWXMAAABIAAAASABGyWs+AAAAbElEQVQoz62QMRbAIAhDP319Xon7j54qHSyCtaMZFCUkRjgDIdRU9yZUCfg8ut5aAHdcxtoNurmgA3ABNKIR9KimhSukPe2qxcCYC0pfFXx/aFWo7i42KKItOpopqvvnLzJmtlZTS7EfGAfwAM4EQbLIGV0sAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE1LTEyLTAyVDE0OjI2OjI5KzAxOjAwwEbXdgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNC0xMS0xMlQwODozOToxOSswMTowMDt8ncMAAAAASUVORK5CYII=')}
  5545. ${img('geoparab', 'CAAAAAA6mKC9AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJ0Uk5TAAB2k804AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAAEgAAABIAEbJaz4AAAB/SURBVBjTbY+xDYAwDAQ9UAp3X7p0m9o9dUZgA9oMwAjpMwMzMAnYBAQSX9mn9+tN9KOtzsWsLOvYCziUGNX3nnCLJRzKPgeYrhPW7FJNLUB3YJazYKQKTnBaxgXRzNmJcrt7XCHQp9kEB1wfELEir/KGj4Foh8A+/zW1nf51AFabKZuWK+mNAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE1LTEyLTAyVDE0OjI2OjI5KzAxOjAwwEbXdgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNC0xMS0xMlQwODozOToxOSswMTowMDt8ncMAAAAASUVORK5CYII=')}
  5546. ${img('geopgon', 'CAAAAAA6mKC9AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJ0Uk5TAAB2k804AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAAEgAAABIAEbJaz4AAABwSURBVBjTY2AgDlwAAzh3sX1sPRDEeuwDc+8V2dsHgQQ8LCzq74HkLSzs7Yva2tLt7S3sN4MNiDUGKQmysCi6BzWkzcI+PdY+aDPCljZlj1iFOUjW1tvHLjYuQhJIt5/DcAFZYLH9YnSn7iPST9gAACbsJth21haFAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE1LTEyLTAyVDE0OjI2OjI5KzAxOjAwwEbXdgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNC0xMS0xMlQwODozOToxOSswMTowMDt8ncMAAAAASUVORK5CYII=')}
  5547. ${img('geotorus', 'CAAAAAA6mKC9AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJ0Uk5TAAB2k804AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAAEgAAABIAEbJaz4AAACGSURBVBjTjY+hFcMwDEQ9SkFggXGIoejhw+LiGkBDlHoAr+AhgjNL5byChuXeE7gvPelUyjOds/f5Zw0ggfj5KVCPMBWeyx+SbQ1XUriAC2XfpWWxjQQEZasRtRHiCUAj3qN4JaolUJppzh4q7dUTdHFXW/tH9OuswWm3nI7tc08+/eGLl758ey9KpKrNOQAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNS0xMi0wMlQxNDoyNjoyOSswMTowMMBG13YAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTQtMTEtMTJUMDg6Mzk6MTkrMDE6MDA7fJ3DAAAAAElFTkSuQmCC')}
  5548. ${img('geotrd1', 'CAAAAAA6mKC9AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJ0Uk5TAAB2k804AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAAEgAAABIAEbJaz4AAAB/SURBVBjTbc6xDQMhDAVQ9qH6lUtal65/zQ5IDMAMmYAZrmKGm4FJzlEQQUo+bvwkG4fwm9lbodV7w40Y4WGfSxQiXiJlQfZOjWRb8Ioi3tKuBQMCo7+9N72BzPsfAuoTdUP9QN8wgOQwvsfWmHzpeT5BKydMNW0nhJGvGf7mAc5WKO9e5N2dAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE1LTEyLTAyVDE0OjI2OjI5KzAxOjAwwEbXdgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNC0xMS0xMlQwODozOToxOSswMTowMDt8ncMAAAAASUVORK5CYII=')}
  5549. ${img('geotube', 'CAAAAAA6mKC9AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJ0Uk5TAAB2k804AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAAEgAAABIAEbJaz4AAACGSURBVBjTRc+tEcAwCAXgLFNbWeSzSDQazw5doWNUZIOM0BEyS/NHy10E30HyklKvWnJ+0le3sJoKn3X2z7GRuvG++YRyMMDt0IIKUXMzxbnugJi5m9K1gNnGBOUFElAWGMaKIKI4xoQggl00gT+A9hXWgDwnfqgsHRAx2m+8bfjfdyrx5AtsSjpwu+M2RgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNS0xMi0wMlQxNDoyNjoyOSswMTowMMBG13YAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTQtMTEtMTJUMDg6Mzk6MTkrMDE6MDA7fJ3DAAAAAElFTkSuQmCC')}
  5550. ${img('evepoints', 'BAMAAADt3eJSAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABJQTFRF////n4mJcEdKRDMzcEdH////lLE/CwAAAAF0Uk5TAEDm2GYAAAABYktHRACIBR1IAAAACXBIWXMAAABIAAAASABGyWs+AAAAI0lEQVQI12NgIAowIpgKEJIZLiAgAKWZGQzQ9UGlWIizBQgAN4IAvGtVrTcAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTYtMDktMDJUMTU6MDQ6MzgrMDI6MDDPyc7hAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE2LTA5LTAyVDE1OjA0OjM4KzAyOjAwvpR2XQAAAABJRU5ErkJggg==')}
  5551. ${img('evetrack', 'CAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJiS0dEAP+Hj8y/AAAACXBIWXMAAABIAAAASABGyWs+AAAAqElEQVQoz32RMQrCQBBFf4IgSMB0IpGkMpVHCFh7BbHIGTyVhU0K8QYewEKsbVJZaCUiPAsXV8Puzhaz7H8zs5+JUDjikLilQr5zpCRl5xMXZNScQE5gSMGaz70jjUAJcw5c3UBMTsUe+9Kzf065SbropeLXimWfDIgoab/tOyPGzOhz53+oSWcSGh7UdB2ZNKXBZdgAuUdEKJYmrEILyVgG6pE2tEHgDfe42rbjYzSHAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE2LTA5LTAyVDE1OjA0OjQ3KzAyOjAwM0S3EQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNi0wOS0wMlQxNTowNDo0NyswMjowMEIZD60AAAAASUVORK5CYII=')}
  5552. .jsroot .geovis_this { background-color: lightgreen; }
  5553. .jsroot .geovis_daughters { background-color: lightblue; }
  5554. .jsroot .geovis_all { background-color: yellow; }`);
  5555. }
  5558. /** @summary Create geo painter
  5559.   * @private */
  5560. function createGeoPainter(dom, obj, opt) {
  5561.    injectGeoStyle();
  5563.    geoCfg('GradPerSegm', settings.GeoGradPerSegm);
  5564.    geoCfg('CompressComp', settings.GeoCompressComp);
  5566.    const painter = new TGeoPainter(dom, obj);
  5568.    painter.decodeOptions(opt); // indicator of initialization
  5570.    return painter;
  5571. }
  5574. /** @summary provide menu for geo object
  5575.   * @private */
  5576. function provideMenu(menu, item, hpainter) {
  5577.    if (!item._geoobj) return false;
  5579.    const obj = item._geoobj, vol = item._volume,
  5580.          iseve = ((obj._typename === clTEveGeoShapeExtract) || (obj._typename === clREveGeoShapeExtract));
  5582.    if (!vol && !iseve)
  5583.       return false;
  5585.    menu.separator();
  5587.    const scanEveVisible = (obj2, arg, skip_this) => {
  5588.       if (!arg) arg = { visible: 0, hidden: 0 };
  5590.       if (!skip_this) {
  5591.          if (arg.assign !== undefined)
  5592.             obj2.fRnrSelf = arg.assign;
  5593.          else if (obj2.fRnrSelf)
  5594.             arg.vis++;
  5595.          else
  5596.             arg.hidden++;
  5597.       }
  5599.       if (obj2.fElements) {
  5600.          for (let n = 0; n < obj2.fElements.arr.length; ++n)
  5601.             scanEveVisible(obj2.fElements.arr[n], arg, false);
  5602.       }
  5604.       return arg;
  5605.    }, toggleEveVisibility = arg => {
  5606.       if (arg === 'self') {
  5607.          obj.fRnrSelf = !obj.fRnrSelf;
  5608.          item._icon = item._icon.split(' ')[0] + provideVisStyle(obj);
  5609.          hpainter.updateTreeNode(item);
  5610.       } else {
  5611.          scanEveVisible(obj, { assign: (arg === 'true') }, true);
  5612.          hpainter.forEachItem(m => {
  5613.             // update all child items
  5614.             if (m._geoobj && m._icon) {
  5615.                m._icon = item._icon.split(' ')[0] + provideVisStyle(m._geoobj);
  5616.                hpainter.updateTreeNode(m);
  5617.             }
  5618.          }, item);
  5619.       }
  5621.       findItemWithGeoPainter(item, true);
  5622.    }, toggleMenuBit = arg => {
  5623.       toggleGeoBit(vol, arg);
  5624.       const newname = item._icon.split(' ')[0] + provideVisStyle(vol);
  5625.       hpainter.forEachItem(m => {
  5626.          // update all items with that volume
  5627.          if (item._volume === m._volume) {
  5628.             m._icon = newname;
  5629.             hpainter.updateTreeNode(m);
  5630.          }
  5631.       });
  5633.       hpainter.updateTreeNode(item);
  5634.       findItemWithGeoPainter(item, true);
  5635.    }, drawitem = findItemWithGeoPainter(item),
  5636.       fullname = drawitem ? hpainter.itemFullName(item, drawitem) : '';
  5638.    if ((item._geoobj._typename.indexOf(clTGeoNode) === 0) && drawitem) {
  5639.       menu.add('Focus', () => {
  5640.         if (drawitem && isFunc(drawitem._painter?.focusOnItem))
  5641.            drawitem._painter.focusOnItem(fullname);
  5642.       });
  5643.    }
  5645.    if (iseve) {
  5646.       menu.addchk(obj.fRnrSelf, 'Visible', 'self', toggleEveVisibility);
  5647.       const res = scanEveVisible(obj, undefined, true);
  5648.       if (res.hidden + res.visible > 0)
  5649.          menu.addchk((res.hidden === 0), 'Daughters', res.hidden ? 'true' : 'false', toggleEveVisibility);
  5650.    } else {
  5651.       const stack = drawitem?._painter?.getClones()?.findStackByName(fullname),
  5652.             phys_vis = stack ? drawitem._painter.getClones().getPhysNodeVisibility(stack) : null,
  5653.             is_visible = testGeoBit(vol, geoBITS.kVisThis);
  5655.       menu.addchk(testGeoBit(vol, geoBITS.kVisNone), 'Invisible', geoBITS.kVisNone, toggleMenuBit);
  5656.       if (stack) {
  5657.          const changePhysVis = arg => {
  5658.             drawitem._painter.getClones().setPhysNodeVisibility(stack, (arg === 'off') ? false : arg);
  5659.             findItemWithGeoPainter(item, true);
  5660.          };
  5662.          menu.sub('Physical vis', 'Physical node visibility - only for this instance');
  5663.          menu.addchk(phys_vis?.visible, 'on', 'on', changePhysVis, 'Enable visibility of phys node');
  5664.          menu.addchk(phys_vis && !phys_vis.visible, 'off', 'off', changePhysVis, 'Disable visibility of physical node');
  5665.          menu.add('reset', 'clear', changePhysVis, 'Reset custom visibility of physical node');
  5666.          menu.add('reset all', 'clearall', changePhysVis, 'Reset all custom settings for all nodes');
  5667.          menu.endsub();
  5668.       }
  5670.       menu.addchk(is_visible, 'Logical vis',
  5671.             geoBITS.kVisThis, toggleMenuBit, 'Logical node visibility - all instances');
  5672.       menu.addchk(testGeoBit(vol, geoBITS.kVisDaughters), 'Daughters',
  5673.             geoBITS.kVisDaughters, toggleMenuBit, 'Logical node daugthers visibility');
  5674.    }
  5676.    return true;
  5677. }
  5679. let createItem = null;
  5681. /** @summary create list entity for geo object
  5682.   * @private */
  5683. function createList(parent, lst, name, title) {
  5684.    if (!lst?.arr?.length)
  5685.       return;
  5687.    const list_item = {
  5688.       _name: name,
  5689.       _kind: prROOT + clTList,
  5690.       _title: title,
  5691.       _more: true,
  5692.       _geoobj: lst,
  5693.       _parent: parent,
  5694.       _get(item /* , itemname */) {
  5695.          return Promise.resolve(item._geoobj || null);
  5696.       },
  5697.       _expand(node, lst2) {
  5698.          // only childs
  5700.          if (lst2.fVolume)
  5701.             lst2 = lst2.fVolume.fNodes;
  5703.          if (!lst2.arr)
  5704.             return false;
  5706.          node._childs = [];
  5708.          checkDuplicates(null, lst2.arr);
  5710.          for (const n in lst2.arr)
  5711.             createItem(node, lst2.arr[n]);
  5713.          return true;
  5714.       }
  5715.    };
  5717.    if (!parent._childs)
  5718.       parent._childs = [];
  5719.    parent._childs.push(list_item);
  5720. }
  5723. /** @summary Expand geo object
  5724.   * @private */
  5725. function expandGeoObject(parent, obj) {
  5726.    injectGeoStyle();
  5728.    if (!parent || !obj) return false;
  5730.    const isnode = (obj._typename.indexOf(clTGeoNode) === 0),
  5731.          isvolume = (obj._typename.indexOf(clTGeoVolume) === 0),
  5732.          ismanager = (obj._typename === clTGeoManager),
  5733.          iseve = ((obj._typename === clTEveGeoShapeExtract) || (obj._typename === clREveGeoShapeExtract)),
  5734.          isoverlap = (obj._typename === clTGeoOverlap);
  5736.    if (!isnode && !isvolume && !ismanager && !iseve && !isoverlap) return false;
  5738.    if (parent._childs) return true;
  5740.    if (ismanager) {
  5741.       createList(parent, obj.fMaterials, 'Materials', 'list of materials');
  5742.       createList(parent, obj.fMedia, 'Media', 'list of media');
  5743.       createList(parent, obj.fTracks, 'Tracks', 'list of tracks');
  5744.       createList(parent, obj.fOverlaps, 'Overlaps', 'list of detected overlaps');
  5745.       createItem(parent, obj.fMasterVolume);
  5746.       return true;
  5747.    }
  5749.    if (isoverlap) {
  5750.       createItem(parent, obj.fVolume1);
  5751.       createItem(parent, obj.fVolume2);
  5752.       createItem(parent, obj.fMarker, 'Marker');
  5753.       return true;
  5754.    }
  5756.    let volume, subnodes, shape;
  5758.    if (iseve) {
  5759.       subnodes = obj.fElements?.arr;
  5760.       shape = obj.fShape;
  5761.    } else {
  5762.       volume = isnode ? obj.fVolume : obj;
  5763.       subnodes = volume?.fNodes?.arr;
  5764.       shape = volume?.fShape;
  5765.    }
  5767.    if (!subnodes && (shape?._typename === clTGeoCompositeShape) && shape?.fNode) {
  5768.       if (!parent._childs) {
  5769.          createItem(parent, shape.fNode.fLeft, 'Left');
  5770.          createItem(parent, shape.fNode.fRight, 'Right');
  5771.       }
  5773.       return true;
  5774.    }
  5776.    if (!subnodes)
  5777.       return false;
  5779.    checkDuplicates(obj, subnodes);
  5781.    for (let i = 0; i < subnodes.length; ++i)
  5782.       createItem(parent, subnodes[i]);
  5784.    return true;
  5785. }
  5788. /** @summary create hierarchy item for geo object
  5789.   * @private */
  5790. createItem = function(node, obj, name) {
  5791.    const sub = {
  5792.       _kind: prROOT + obj._typename,
  5793.       _name: name || getObjectName(obj),
  5794.       _title: obj.fTitle,
  5795.       _parent: node,
  5796.       _geoobj: obj,
  5797.       _get(item /* ,itemname */) {
  5798.           // mark object as belong to the hierarchy, require to
  5799.           if (item._geoobj) item._geoobj.$geoh = true;
  5800.           return Promise.resolve(item._geoobj);
  5801.       }
  5802.    };
  5803.    let volume, shape, subnodes, iseve = false;
  5805.    if (obj._typename === 'TGeoMaterial')
  5806.       sub._icon = 'img_geomaterial';
  5807.    else if (obj._typename === 'TGeoMedium')
  5808.       sub._icon = 'img_geomedium';
  5809.    else if (obj._typename === 'TGeoMixture')
  5810.       sub._icon = 'img_geomixture';
  5811.    else if ((obj._typename.indexOf(clTGeoNode) === 0) && obj.fVolume) {
  5812.       sub._title = 'node:' + obj._typename;
  5813.       if (obj.fTitle) sub._title += ' ' + obj.fTitle;
  5814.       volume = obj.fVolume;
  5815.    } else if (obj._typename.indexOf(clTGeoVolume) === 0)
  5816.       volume = obj;
  5817.    else if ((obj._typename === clTEveGeoShapeExtract) || (obj._typename === clREveGeoShapeExtract)) {
  5818.       iseve = true;
  5819.       shape = obj.fShape;
  5820.       subnodes = obj.fElements ? obj.fElements.arr : null;
  5821.    } else if ((obj.fShapeBits !== undefined) && (obj.fShapeId !== undefined))
  5822.       shape = obj;
  5824.    if (volume) {
  5825.       shape = volume.fShape;
  5826.       subnodes = volume.fNodes ? volume.fNodes.arr : null;
  5827.    }
  5829.    if (volume || shape || subnodes) {
  5830.       if (volume) sub._volume = volume;
  5832.       if (subnodes) {
  5833.          sub._more = true;
  5834.          sub._expand = expandGeoObject;
  5835.       } else if (shape && (shape._typename === clTGeoCompositeShape) && shape.fNode) {
  5836.          sub._more = true;
  5837.          sub._shape = shape;
  5838.          sub._expand = function(node2 /* , obj */) {
  5839.             createItem(node2, node2._shape.fNode.fLeft, 'Left');
  5840.             createItem(node2, node2._shape.fNode.fRight, 'Right');
  5841.             return true;
  5842.          };
  5843.       }
  5845.       if (!sub._title && (obj._typename !== clTGeoVolume))
  5846.          sub._title = obj._typename;
  5848.       if (shape) {
  5849.          if (sub._title === '')
  5850.             sub._title = shape._typename;
  5852.          sub._icon = getShapeIcon(shape);
  5853.       } else
  5854.          sub._icon = sub._more ? 'img_geocombi' : 'img_geobbox';
  5856.       if (volume)
  5857.          sub._icon += provideVisStyle(volume);
  5858.       else if (iseve)
  5859.          sub._icon += provideVisStyle(obj);
  5861.       sub._menu = provideMenu;
  5862.       sub._icon_click = browserIconClick;
  5863.    }
  5865.    if (!node._childs)
  5866.       node._childs = [];
  5868.    if (!sub._name) {
  5869.       if (isStr(node._name)) {
  5870.          sub._name = node._name;
  5871.          if (sub._name.at(-1) === 's')
  5872.             sub._name = sub._name.slice(0, sub._name.length - 1);
  5873.          sub._name += '_' + node._childs.length;
  5874.       } else
  5875.          sub._name = 'item_' + node._childs.length;
  5876.    }
  5878.    node._childs.push(sub);
  5880.    return sub;
  5881. };
  5883. /** @summary Draw dummy geometry
  5884.   * @private */
  5885. async function drawDummy3DGeom(painter) {
  5886.    const shape = create(clTNamed);
  5887.    shape._typename = clTGeoBBox;
  5888.    shape.fDX = 1e-10;
  5889.    shape.fDY = 1e-10;
  5890.    shape.fDZ = 1e-10;
  5891.    shape.fShapeId = 1;
  5892.    shape.fShapeBits = 0;
  5893.    shape.fOrigin = [0, 0, 0];
  5895.    const obj = Object.assign(create(clTNamed),
  5896.                 { _typename: clTEveGeoShapeExtract,
  5897.                   fTrans: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0],
  5898.                   fShape: shape, fRGBA: [0, 0, 0, 0], fElements: null, fRnrSelf: false }),
  5899.          pp = painter.getPadPainter(),
  5900.          pad = pp?.getRootPad(true),
  5901.          opt = 'dummy;' + (pad?.fFillColor && (pad?.fFillStyle > 1000) ? 'bkgr_' + pad.fFillColor : '');
  5903.    return TGeoPainter.draw(pp || painter.getDom(), obj, opt);
  5904. }
  5906. /** @summary Direct draw function for TAxis3D
  5907.   * @private */
  5908. function drawAxis3D() {
  5909.    const main = this.getMainPainter();
  5911.    if (isFunc(main?.setAxesDraw))
  5912.       return main.setAxesDraw(true);
  5914.    console.error('no geometry painter found to toggle TAxis3D drawing');
  5915. }
  5917. /** @summary Build three.js model for given geometry object
  5918.   * @param {Object} obj - TGeo-related object
  5919.   * @param {Object} [opt] - options
  5920.   * @param {Number} [opt.vislevel] - visibility level like TGeoManager, when not specified - show all
  5921.   * @param {Number} [opt.numnodes=1000] - maximal number of visible nodes
  5922.   * @param {Number} [opt.numfaces=100000] - approx maximal number of created triangles
  5923.   * @param {Number} [opt.instancing=-1] - <0 disable use of InstancedMesh, =0 only for large geometries, >0 enforce usage of InstancedMesh
  5924.   * @param {boolean} [opt.doubleside=false] - use double-side material
  5925.   * @param {boolean} [opt.wireframe=false] - show wireframe for created shapes
  5926.   * @param {boolean} [opt.transparency=0] - make nodes transparent
  5927.   * @param {boolean} [opt.dflt_colors=false] - use default ROOT colors
  5928.   * @param {boolean} [opt.set_names=true] - set names to all Object3D instances
  5929.   * @param {boolean} [opt.set_origin=false] - set TGeoNode/TGeoVolume as Object3D.userData
  5930.   * @return {object} Object3D with created model
  5931.   * @example
  5932.   * import { build } from 'https://root.cern/js/latest/modules/geom/TGeoPainter.mjs';
  5933.   * let obj3d = build(obj);
  5934.   * // this is three.js object and can be now inserted in the scene
  5935.   */
  5936. function build(obj, opt) {
  5937.    if (!obj) return null;
  5939.    if (!opt) opt = {};
  5940.    if (!opt.numfaces) opt.numfaces = 100000;
  5941.    if (!opt.numnodes) opt.numnodes = 1000;
  5942.    if (!opt.frustum) opt.frustum = null;
  5944.    opt.res_mesh = opt.res_faces = 0;
  5946.    if (opt.instancing === undefined)
  5947.       opt.instancing = -1;
  5949.    opt.info = { num_meshes: 0, num_faces: 0 };
  5951.    let clones, visibles;
  5953.    if (obj.visibles && obj.nodes && obj.numnodes) {
  5954.       // case of draw message from geometry viewer
  5956.       const nodes = obj.numnodes > 1e6 ? { length: obj.numnodes } : new Array(obj.numnodes);
  5958.       obj.nodes.forEach(node => {
  5959.          nodes[node.id] = ClonedNodes.formatServerElement(node);
  5960.       });
  5962.       clones = new ClonedNodes(null, nodes);
  5963.       clones.name_prefix = clones.getNodeName(0);
  5965.       // normally only need when making selection, not used in geo viewer
  5966.       // this.geo_clones.setMaxVisNodes(draw_msg.maxvisnodes);
  5967.       // this.geo_clones.setVisLevel(draw_msg.vislevel);
  5968.       // TODO: provide from server
  5969.       clones.maxdepth = 20;
  5971.       const nsegm = obj.cfg?.nsegm || 30;
  5973.       for (let cnt = 0; cnt < obj.visibles.length; ++cnt) {
  5974.          const item = obj.visibles[cnt], rd = item.ri;
  5976.          // entry may be provided without shape - it is ok
  5977.          if (rd)
  5978.             item.server_shape = rd.server_shape = createServerGeometry(rd, nsegm);
  5979.       }
  5981.       visibles = obj.visibles;
  5982.    } else {
  5983.       let shape = null, hide_top = false;
  5985.       if (('fShapeBits' in obj) && ('fShapeId' in obj)) {
  5986.          shape = obj; obj = null;
  5987.       } else if ((obj._typename === clTGeoVolumeAssembly) || (obj._typename === clTGeoVolume))
  5988.          shape = obj.fShape;
  5989.        else if ((obj._typename === clTEveGeoShapeExtract) || (obj._typename === clREveGeoShapeExtract))
  5990.          shape = obj.fShape;
  5991.        else if (obj._typename === clTGeoManager) {
  5992.          obj = obj.fMasterVolume;
  5993.          hide_top = !opt.showtop;
  5994.          shape = obj.fShape;
  5995.       } else if (obj.fVolume)
  5996.          shape = obj.fVolume.fShape;
  5997.        else
  5998.          obj = null;
  6001.       if (opt.composite && shape && (shape._typename === clTGeoCompositeShape) && shape.fNode)
  6002.          obj = buildCompositeVolume(shape);
  6004.       if (!obj && shape)
  6005.          obj = Object.assign(create(clTNamed), { _typename: clTEveGeoShapeExtract, fTrans: null, fShape: shape, fRGBA: [0, 1, 0, 1], fElements: null, fRnrSelf: true });
  6007.       if (!obj) return null;
  6009.       if (obj._typename.indexOf(clTGeoVolume) === 0)
  6010.          obj = { _typename: clTGeoNode, fVolume: obj, fName: obj.fName, $geoh: obj.$geoh, _proxy: true };
  6012.       clones = new ClonedNodes(obj);
  6013.       clones.setVisLevel(opt.vislevel);
  6014.       clones.setMaxVisNodes(opt.numnodes);
  6016.       if (opt.dflt_colors)
  6017.          clones.setDefaultColors(true);
  6019.       const uniquevis = opt.no_screen ? 0 : clones.markVisibles(true);
  6020.       if (uniquevis <= 0)
  6021.          clones.markVisibles(false, false, hide_top);
  6022.       else
  6023.          clones.markVisibles(true, true, hide_top); // copy bits once and use normal visibility bits
  6025.       clones.produceIdShifts();
  6027.       // collect visible nodes
  6028.       const res = clones.collectVisibles(opt.numfaces, opt.frustum);
  6030.       visibles = res.lst;
  6031.    }
  6033.    if (!opt.material_kind)
  6034.       opt.material_kind = 'lambert';
  6035.    if (opt.set_names === undefined)
  6036.       opt.set_names = true;
  6038.    clones.setConfig(opt);
  6040.    // collect shapes
  6041.    const shapes = clones.collectShapes(visibles);
  6043.    clones.buildShapes(shapes, opt.numfaces);
  6045.    const toplevel = new THREE.Object3D();
  6046.    toplevel.clones = clones; // keep reference on JSROOT data
  6048.    const colors = getRootColors();
  6050.    if (clones.createInstancedMeshes(opt, toplevel, visibles, shapes, colors))
  6051.       return toplevel;
  6053.    for (let n = 0; n < visibles.length; ++n) {
  6054.       const entry = visibles[n];
  6055.       if (entry.done) continue;
  6057.       const shape = entry.server_shape || shapes[entry.shapeid];
  6058.       if (!shape.ready) {
  6059.          console.warn('shape marked as not ready when it should');
  6060.          break;
  6061.       }
  6063.       clones.createEntryMesh(opt, toplevel, entry, shape, colors);
  6064.    }
  6066.    return toplevel;
  6067. }
  6069. export { ClonedNodes, build, TGeoPainter, GeoDrawingControl,
  6070.          expandGeoObject, createGeoPainter, drawAxis3D, drawDummy3DGeom, produceRenderOrder };