base/ObjectPainter.mjs

  1. import { select as d3_select, pointer as d3_pointer } from '../d3.mjs';
  2. import { settings, constants, internals, isNodeJs, isBatchMode, getPromise, BIT,
  3.          prROOT, clTObjString, clTAxis, isObject, isFunc, isStr, getDocument, urlClassPrefix } from '../core.mjs';
  4. import { isPlainText, producePlainText, produceLatex, produceMathjax, typesetMathjax, approximateLabelWidth } from './latex.mjs';
  5. import { getElementRect, BasePainter, makeTranslate } from './BasePainter.mjs';
  6. import { TAttMarkerHandler } from './TAttMarkerHandler.mjs';
  7. import { TAttFillHandler } from './TAttFillHandler.mjs';
  8. import { TAttLineHandler } from './TAttLineHandler.mjs';
  9. import { TAttTextHandler } from './TAttTextHandler.mjs';
  10. import { FontHandler } from './FontHandler.mjs';
  11. import { getRootColors } from './colors.mjs';
  14. /**
  15.  * @summary Painter class for ROOT objects
  16.  *
  17.  */
  19. class ObjectPainter extends BasePainter {
  21.    #pad_name;        // pad name where object is drawn
  22.    #draw_object;     // drawn object
  23.    #main_painter;    // WeakRef to main painter in the pad
  24.    #primary_ref;     // reference of primary painter - if any
  25.    #secondary_id;    // id of this painter in relation to primary painter
  26.    #options_store;   // stored draw options used to check changes
  27.    #user_tooltip_handler; // configured user tooltip handler
  28.    #user_tooltip_timeout; // timeout configured with tooltip handler
  29.    #user_toottip_handle; // timeout handle processing user tooltip
  30.    #user_context_menu; // function for user context menu
  31.    #special_draw_area; // current special draw area like projection
  32.    #root_colors;     // custom colors list
  34.    /** @summary constructor
  35.      * @param {object|string} dom - dom element or identifier or pad painter
  36.      * @param {object} obj - object to draw
  37.      * @param {string} [opt] - object draw options */
  38.    constructor(dom, obj, opt) {
  39.       let pad_name = '';
  40.       if (isFunc(dom?.forEachPainterInPad)) {
  41.          pad_name = dom.this_pad_name;
  42.          dom = dom.getDom();
  43.       }
  45.       super(dom);
  47.       // this.draw_g = undefined; // container for all drawn objects
  48.       this.setPadName(pad_name); // name of pad where object is drawn
  49.       this.assignObject(obj);
  50.       if (isStr(opt))
  51.          this.options = { original: opt };
  52.    }
  54.    /** @summary Assign object to the painter
  55.      * @protected */
  56.    assignObject(obj) { this.#draw_object = isObject(obj) ? obj : null; }
  58.    /** @summary Returns drawn object */
  59.    getObject() { return this.#draw_object; }
  61.    /** @summary Assigns pad name where element will be drawn
  62.      * @desc Should happened before first draw of element is performed, only for special use case
  63.      * @param {string} [pad_name] - on which sub-pad element should be draw, if not specified - use current
  64.      * @protected */
  65.    setPadName(pad_name) {
  66.       // console.warn('setPadName is deprecated, to be removed in v8');
  67.       this.#pad_name = isStr(pad_name) ? pad_name : '';
  68.    }
  70.    /** @summary Returns pad name where object is drawn */
  71.    getPadName() { return this.#pad_name || ''; }
  73.    /** @summary Indicates that drawing runs in batch mode
  74.      * @private */
  75.    isBatchMode() { return isBatchMode() ? true : (this.getCanvPainter()?.isBatchMode() ?? false); }
  77.    /** @summary Assign snapid to the painter
  78.     * @desc Identifier used to communicate with server side and identifies object on the server
  79.     * @private */
  80.    assignSnapId(id) { this.snapid = id; }
  82.    /** @summary Generic method to cleanup painter.
  83.      * @desc Remove object drawing and (in case of main painter) also main HTML components
  84.      * @protected */
  85.    cleanup() {
  86.       this.removeG();
  88.       let keep_origin = true;
  90.       if (this.isMainPainter()) {
  91.          const pp = this.getPadPainter();
  92.          if (!pp || pp.isCanvas('auto'))
  93.             keep_origin = false;
  94.       }
  96.       // cleanup all existing references
  97.       this.#pad_name = undefined;
  98.       this.#main_painter = null;
  99.       this.#draw_object = null;
  100.       delete this.snapid;
  101.       this._is_primary = undefined;
  102.       this.#primary_ref = undefined;
  103.       this.#secondary_id = undefined;
  105.       // remove attributes objects (if any)
  106.       delete this.fillatt;
  107.       delete this.lineatt;
  108.       delete this.markeratt;
  109.       this.#root_colors = undefined;
  110.       delete this.options;
  111.       this.#options_store = undefined;
  113.       // remove extra fields from v7 painters
  114.       delete this.rstyle;
  115.       delete this.csstype;
  117.       super.cleanup(keep_origin);
  118.    }
  120.    /** @summary Returns drawn object name */
  121.    getObjectName() { return this.getObject()?.fName ?? ''; }
  123.    /** @summary Returns drawn object class name */
  124.    getClassName() { return this.getObject()?._typename ?? ''; }
  126.    /** @summary Checks if drawn object matches with provided typename
  127.      * @param {string|object} arg - typename (or object with _typename member)
  128.      * @protected */
  129.    matchObjectType(arg) {
  130.       const clname = this.getClassName();
  131.       if (!arg || !clname)
  132.          return false;
  133.       if (isStr(arg))
  134.          return arg === clname;
  135.       if (isStr(arg._typename))
  136.          return arg._typename === clname;
  137.       return Boolean(clname.match(arg));
  138.    }
  140.    /** @summary Change item name
  141.      * @desc When available, used for svg:title property
  142.      * @private */
  143.    setItemName(name, opt, hpainter) {
  144.       super.setItemName(name, opt, hpainter);
  145.       if (this.no_default_title || !name) return;
  146.       const can = this.getCanvSvg();
  147.       if (!can.empty()) can.select('title').text(name);
  148.                    else this.selectDom().attr('title', name);
  149.       const cp = this.getCanvPainter();
  150.       if (cp && ((cp === this) || (this.isMainPainter() && (cp === this.getPadPainter()))))
  151.          cp.drawItemNameOnCanvas(name);
  152.    }
  154.    /** @summary Store actual this.options together with original string
  155.      * @private */
  156.    storeDrawOpt(original) {
  157.       if (!this.options) return;
  158.       if (!original) original = '';
  159.       const pp = original.indexOf(';;');
  160.       if (pp >= 0) original = original.slice(0, pp);
  161.       this.options.original = original;
  162.       this.#options_store = Object.assign({}, this.options);
  163.    }
  165.    /** @summary Return dom argument for object drawing
  166.     * @desc Can be used to draw other objects on same pad / same dom element
  167.     * @protected */
  168.    getDrawDom() {
  169.       return this.getPadPainter() || this.getDom();
  170.    }
  172.    /** @summary Return actual draw options as string
  173.      * @param ignore_pad - do not include pad settings into histogram draw options
  174.      * @desc if options are not modified - returns original string which was specified for object draw */
  175.    getDrawOpt(ignore_pad) {
  176.       if (!this.options) return '';
  178.       if (isFunc(this.options.asString)) {
  179.          let changed = false;
  180.          const pp = this.getPadPainter();
  181.          if (!this.#options_store || pp?._interactively_changed)
  182.             changed = true;
  183.          else {
  184.             for (const k in this.#options_store) {
  185.                if (this.options[k] !== this.#options_store[k]) {
  186.                   if ((k[0] !== '_') && (k[0] !== '$') && (k[0].toLowerCase() !== k[0]))
  187.                      changed = true;
  188.                }
  189.             }
  190.          }
  192.          if (changed && isFunc(this.options.asString))
  193.             return this.options.asString(this.isMainPainter(), ignore_pad ? null : pp?.getRootPad());
  194.       }
  196.       return this.options.original || ''; // nothing better, return original draw option
  197.    }
  199.    /** @summary Returns array with supported draw options as configured in draw.mjs
  200.      * @desc works via pad painter and only when module was loaded */
  201.    getSupportedDrawOptions() {
  202.       const pp = this.getPadPainter(),
  203.             cl = this.getClassName();
  205.       if (!cl || !isFunc(pp?.getObjectDrawSettings))
  206.          return [];
  208.       return pp.getObjectDrawSettings(prROOT + cl, 'nosame')?.opts;
  209.    }
  211.    /** @summary Central place to update objects drawing
  212.      * @param {object} obj - new version of object, values will be updated in original object
  213.      * @param {string} [opt] - when specified, new draw options
  214.      * @return {boolean|Promise} for object redraw
  215.      * @desc Two actions typically done by redraw - update object content via {@link ObjectPainter#updateObject} and
  216.       * then redraw correspondent pad via {@link ObjectPainter#redrawPad}. If possible one should redefine
  217.       * only updateObject function and keep this function unchanged. But for some special painters this function is the
  218.       * only way to control how object can be update while requested from the server
  219.       * @protected */
  220.    redrawObject(obj, opt) {
  221.       if (!this.updateObject(obj, opt)) return false;
  222.       const doc = getDocument(),
  223.             current = doc.body.style.cursor;
  224.       document.body.style.cursor = 'wait';
  225.       const res = this.redrawPad();
  226.       doc.body.style.cursor = current;
  227.       return res;
  228.    }
  230.    /** @summary Generic method to update object content.
  231.      * @desc Default implementation just copies first-level members to current object
  232.      * @param {object} obj - object with new data
  233.      * @param {string} [opt] - option which will be used for redrawing
  234.      * @protected */
  235.    updateObject(obj /* , opt */) {
  236.       if (!this.matchObjectType(obj))
  237.          return false;
  238.       Object.assign(this.getObject(), obj);
  239.       return true;
  240.    }
  242.    /** @summary Returns string with object hint
  243.      * @desc It is either item name or object name or class name.
  244.      * Such string typically used as object tooltip.
  245.      * If result string larger than 20 symbols, it will be shorten. */
  246.    getObjectHint() {
  247.       const iname = this.getItemName();
  248.       if (iname)
  249.          return (iname.length > 20) ? '...' + iname.slice(iname.length - 17) : iname;
  250.       return this.getObjectName() || this.getClassName() || '';
  251.    }
  253.    /** @summary Set colors list
  254.     * @protected */
  255.    setColors(lst) { this.#root_colors = lst; }
  257.    /** @summary Return colors list
  258.     * @protected */
  259.    getColors(force) {
  260.       if (!this.#root_colors && force)
  261.          this.setColors(this.getCanvPainter()?.getColors() || getRootColors());
  262.       return this.#root_colors;
  263.    }
  265.    /** @summary returns color from current list of colors
  266.      * @desc First checks canvas painter and then just access global list of colors
  267.      * @param {number} indx - color index
  268.      * @return {string} with SVG color name or rgb()
  269.      * @protected */
  270.    getColor(indx) { return this.getColors(true)[indx]; }
  272.    /** @summary Add color to list of colors
  273.      * @desc Returned color index can be used as color number in all other draw functions
  274.      * @return {number} new color index
  275.      * @protected */
  276.    addColor(color) {
  277.       const lst = this.getColors(true),
  278.             indx = lst.indexOf(color);
  279.       if (indx >= 0)
  280.          return indx;
  281.       lst.push(color);
  282.       return lst.length - 1;
  283.    }
  285.    /** @summary returns tooltip allowed flag
  286.      * @desc If available, checks in canvas painter
  287.      * @private */
  288.    isTooltipAllowed() {
  289.       const src = this.getCanvPainter() || this;
  290.       return src.tooltip_allowed;
  291.    }
  293.    /** @summary change tooltip allowed flag
  294.      * @param {boolean|string} [on = true] set tooltip allowed state or 'toggle'
  295.      * @private */
  296.    setTooltipAllowed(on = true) {
  297.       const src = this.getCanvPainter() || this;
  298.       src.tooltip_allowed = (on === 'toggle') ? !src.tooltip_allowed : on;
  299.    }
  301.    /** @summary Checks if draw elements were resized and drawing should be updated.
  302.      * @desc Redirects to {@link TPadPainter#checkCanvasResize}
  303.      * @private */
  304.    checkResize(arg) {
  305.       return this.getCanvPainter()?.checkCanvasResize(arg);
  306.    }
  308.    /** @summary removes <g> element with object drawing
  309.      * @desc generic method to delete all graphical elements, associated with the painter
  310.      * @protected */
  311.    removeG() {
  312.       this.draw_g?.remove();
  313.       delete this.draw_g;
  314.    }
  316.    /** @summary Returns created <g> element used for object drawing
  317.      * @desc Element should be created by {@link ObjectPainter#createG}
  318.      * @protected */
  319.    getG() { return this.draw_g; }
  321.    /** @summary (re)creates svg:g element for object drawings
  322.      * @desc either one attach svg:g to pad primitives (default)
  323.      * or svg:g element created in specified frame layer ('main_layer' will be used when true specified)
  324.      * @param {boolean|string} [frame_layer] - when specified, <g> element will be created inside frame layer, otherwise in the pad
  325.      * @protected */
  326.    createG(frame_layer, use_a = false) {
  327.       let layer;
  329.       if (frame_layer === 'frame2d') {
  330.          const fp = this.getFramePainter();
  331.          frame_layer = fp && !fp.mode3d;
  332.       }
  334.       if (frame_layer) {
  335.          const frame = this.getFrameSvg();
  336.          if (frame.empty()) {
  337.             console.error('Not found frame to create g element inside');
  338.             return frame;
  339.          }
  340.          if (!isStr(frame_layer)) frame_layer = 'main_layer';
  341.          layer = frame.selectChild('.' + frame_layer);
  342.       } else
  343.          layer = this.getLayerSvg('primitives_layer');
  345.       if (this.draw_g && this.draw_g.node().parentNode !== layer.node()) {
  346.          console.log('g element changes its layer!!');
  347.          this.removeG();
  348.       }
  350.       if (this.draw_g) {
  351.          // clear all elements, keep g element on its place
  352.          this.draw_g.selectAll('*').remove();
  353.       } else {
  354.          this.draw_g = layer.append(use_a ? 'svg:a' : 'svg:g');
  356.          if (!frame_layer)
  357.             layer.selectChildren('.most_upper_primitives').raise();
  358.       }
  360.       // set attributes for debugging, both should be there for opt out them later
  361.       const clname = this.getClassName(), objname = this.getObjectName();
  362.       if (objname || clname) {
  363.          this.draw_g.attr('objname', (objname || 'name').replace(/[^\w]/g, '_'))
  364.                     .attr('objtype', (clname || 'type').replace(/[^\w]/g, '_'));
  365.       }
  367.       this.draw_g.property('in_frame', Boolean(frame_layer)); // indicates coordinate system
  369.       return this.draw_g;
  370.    }
  372.    /** @summary Bring draw element to the front */
  373.    bringToFront(check_online) {
  374.       if (!this.draw_g) return;
  375.       const prnt = this.draw_g.node().parentNode;
  376.       prnt?.appendChild(this.draw_g.node());
  378.       if (!check_online || !this.snapid) return;
  379.       const pp = this.getPadPainter();
  380.       if (!pp?.snapid) return;
  382.       this.getCanvPainter()?.sendWebsocket('POPOBJ:'+JSON.stringify([pp.snapid.toString(), this.snapid.toString()]));
  383.    }
  385.    /** @summary Canvas main svg element
  386.      * @return {object} d3 selection with canvas svg
  387.      * @protected */
  388.    getCanvSvg() { return this.selectDom().select('.root_canvas'); }
  390.    /** @summary Pad svg element
  391.      * @param {string} [pad_name] - pad name to select, if not specified - pad where object is drawn
  392.      * @return {object} d3 selection with pad svg
  393.      * @protected */
  394.    getPadSvg(pad_name) {
  395.       if (pad_name === undefined)
  396.          pad_name = this.getPadName();
  398.       const c = this.getCanvSvg();
  399.       if (!pad_name || c.empty())
  400.          return c;
  402.       return c.select('.primitives_layer .__root_pad_' + pad_name);
  403.    }
  405.    /** @summary Assign secondary id
  406.      * @private */
  407.    setSecondaryId(primary, name) {
  408.       primary._is_primary = true; // mark as primary, used later
  409.       this.#primary_ref = new WeakRef(primary);
  410.       this.#secondary_id = name;
  411.    }
  413.    /** @summary Returns secondary id
  414.      * @private */
  415.    getSecondaryId() { return this.#secondary_id; }
  417.    /** @summary Check if this is secondary painter
  418.      * @desc if primary painter provided - check if this really main for this
  419.      * @private */
  420.    isSecondary(primary) {
  421.       if (!this.#primary_ref)
  422.          return false;
  423.       return !isObject(primary) ? true : this.#primary_ref.deref() === primary;
  424.    }
  426.    /** @summary Return primary object
  427.      * @private */
  428.    getPrimary() { return this.#primary_ref?.deref(); }
  430.    /** @summary Provides identifier on server for requested sub-element */
  431.    getSnapId(subelem) {
  432.       if (!this.snapid)
  433.          return '';
  435.       return this.snapid.toString() + (subelem ? '#'+subelem : '');
  436.    }
  438.    /** @summary Method selects immediate layer under canvas/pad main element
  439.      * @param {string} name - layer name, exits 'primitives_layer', 'btns_layer', 'info_layer'
  440.      * @param {string} [pad_name] - pad name; current pad name  used by default
  441.      * @protected */
  442.    getLayerSvg(name, pad_name) {
  443.       let svg = this.getPadSvg(pad_name);
  444.       if (svg.empty()) return svg;
  446.       if (name.indexOf('prim#') === 0) {
  447.          svg = svg.selectChild('.primitives_layer');
  448.          name = name.slice(5);
  449.       }
  451.       return svg.selectChild('.' + name);
  452.    }
  454.    /** @summary Method selects current pad name
  455.      * @param {string} [new_name] - when specified, new current pad name will be configured
  456.      * @return {string} previous selected pad or actual pad when new_name not specified
  457.      * @private
  458.      * @deprecated to be removed in v8 */
  459.    selectCurrentPad() {
  460.       console.warn('selectCurrentPad is deprecated, will be removed in v8');
  461.       return '';
  462.    }
  464.    /** @summary returns pad painter
  465.      * @param {string} [pad_name] pad name or use current pad by default
  466.      * @protected */
  467.    getPadPainter(pad_name) {
  468.       const elem = this.getPadSvg(isStr(pad_name) ? pad_name : undefined);
  469.       return elem.empty() ? null : elem.property('pad_painter');
  470.    }
  472.    /** @summary returns canvas painter
  473.      * @protected */
  474.    getCanvPainter() {
  475.       const elem = this.getCanvSvg();
  476.       return elem.empty() ? null : elem.property('pad_painter');
  477.    }
  479.    /** @summary Return functor, which can convert x and y coordinates into pixels, used for drawing in the pad
  480.      * @desc X and Y coordinates can be converted by calling func.x(x) and func.y(y)
  481.      * Only can be used for painting in the pad, means CreateG() should be called without arguments
  482.      * @param {boolean} isndc - if NDC coordinates will be used
  483.      * @param {boolean} [noround] - if set, return coordinates will not be rounded
  484.      * @param {boolean} [use_frame_coordinates] - use frame coordinates even when drawing on the pad
  485.      * @protected */
  486.    getAxisToSvgFunc(isndc, nornd, use_frame_coordinates) {
  487.       const func = { isndc, nornd },
  488.             use_frame = this.draw_g?.property('in_frame');
  489.       if (use_frame || (use_frame_coordinates && !isndc))
  490.          func.fp = this.getFramePainter();
  491.       if (func.fp?.grx && func.fp?.gry) {
  492.          func.x0 = (use_frame_coordinates && !isndc) ? func.fp.getFrameX() : 0;
  493.          func.y0 = (use_frame_coordinates && !isndc) ? func.fp.getFrameY() : 0;
  494.          if (nornd) {
  495.             func.x = function(x) { return this.x0 + this.fp.grx(x); };
  496.             func.y = function(y) { return this.y0 + this.fp.gry(y); };
  497.          } else {
  498.             func.x = function(x) { return this.x0 + Math.round(this.fp.grx(x)); };
  499.             func.y = function(y) { return this.y0 + Math.round(this.fp.gry(y)); };
  500.          }
  501.       } else if (!use_frame) {
  502.          const pp = this.getPadPainter();
  503.          func.pad = isndc ? null : pp?.getRootPad(true); // need for NDC conversion
  504.          func.padw = pp?.getPadWidth() ?? 10;
  505.          func.x = function(value) {
  506.             if (this.pad) {
  507.                if (this.pad.fLogx)
  508.                   value = (value > 0) ? Math.log10(value) : this.pad.fUxmin;
  509.                value = (value - this.pad.fX1) / (this.pad.fX2 - this.pad.fX1);
  510.             }
  511.             value *= this.padw;
  512.             return this.nornd ? value : Math.round(value);
  513.          };
  514.          func.padh = pp?.getPadHeight() ?? 10;
  515.          func.y = function(value) {
  516.             if (this.pad) {
  517.                if (this.pad.fLogy)
  518.                   value = (value > 0) ? Math.log10(value) : this.pad.fUymin;
  519.                value = (value - this.pad.fY1) / (this.pad.fY2 - this.pad.fY1);
  520.             }
  521.             value = (1 - value) * this.padh;
  522.             return this.nornd ? value : Math.round(value);
  523.          };
  524.       } else {
  525.          console.error(`Problem to create functor for ${this.getClassName()}`);
  526.          func.x = () => 0;
  527.          func.y = () => 0;
  528.       }
  529.       return func;
  530.    }
  532.    /** @summary Converts x or y coordinate into pad SVG coordinates.
  533.      * @desc Only can be used for painting in the pad, means CreateG() should be called without arguments
  534.      * @param {string} axis - name like 'x' or 'y'
  535.      * @param {number} value - axis value to convert.
  536.      * @param {boolean} ndc - is value in NDC coordinates
  537.      * @param {boolean} [noround] - skip rounding
  538.      * @return {number} value of requested coordinates
  539.      * @protected */
  540.    axisToSvg(axis, value, ndc, noround) {
  541.       const func = this.getAxisToSvgFunc(ndc, noround);
  542.       return func[axis](value);
  543.    }
  545.    /** @summary Converts pad SVG x or y coordinates into axis values.
  546.      * @desc Reverse transformation for {@link ObjectPainter#axisToSvg}
  547.      * @param {string} axis - name like 'x' or 'y'
  548.      * @param {number} coord - graphics coordinate.
  549.      * @param {boolean} ndc - kind of return value
  550.      * @return {number} value of requested coordinates
  551.      * @protected */
  552.    svgToAxis(axis, coord, ndc) {
  553.       const use_frame = this.draw_g?.property('in_frame');
  555.       if (use_frame)
  556.          return this.getFramePainter()?.revertAxis(axis, coord) ?? 0;
  558.       const pp = this.getPadPainter(),
  559.             pad = (ndc || !pp) ? null : pp.getRootPad(true);
  560.       let value = !pp ? 0 : ((axis === 'y') ? (1 - coord / pp.getPadHeight()) : coord / pp.getPadWidth());
  562.       if (pad) {
  563.          if (axis === 'y') {
  564.             value = pad.fY1 + value * (pad.fY2 - pad.fY1);
  565.             if (pad.fLogy) value = Math.pow(10, value);
  566.          } else {
  567.             value = pad.fX1 + value * (pad.fX2 - pad.fX1);
  568.             if (pad.fLogx) value = Math.pow(10, value);
  569.          }
  570.       }
  572.       return value;
  573.    }
  575.    /** @summary Returns svg element for the frame in current pad
  576.      * @protected */
  577.    getFrameSvg(pad_name) {
  578.       const layer = this.getLayerSvg('primitives_layer', pad_name);
  579.       if (layer.empty()) return layer;
  580.       let node = layer.node().firstChild;
  581.       while (node) {
  582.          const elem = d3_select(node);
  583.          if (elem.classed('root_frame')) return elem;
  584.          node = node.nextSibling;
  585.       }
  586.       return d3_select(null);
  587.    }
  589.    /** @summary Returns frame painter for current pad
  590.      * @desc Pad has direct reference on frame if any
  591.      * @protected */
  592.    getFramePainter() {
  593.       return this.getPadPainter()?.getFramePainter();
  594.    }
  596.    /** @summary Returns painter for main object on the pad.
  597.      * @desc Typically it is first histogram drawn on the pad and which draws frame axes
  598.      * But it also can be special use-case as TASImage or TGraphPolargram
  599.      * @param {boolean} [not_store] - if true, prevent temporary storage of main painter reference
  600.      * @protected */
  601.    getMainPainter(not_store) {
  602.       let res = this.#main_painter?.deref();
  603.       if (!res) {
  604.          const pp = this.getPadPainter();
  605.          res = pp ? pp.getMainPainter() : this.getTopPainter();
  606.          this.#main_painter = not_store || !res ? null : new WeakRef(res);
  607.       }
  608.       return res || null;
  609.    }
  611.    /** @summary Returns true if this is main painter
  612.      * @protected */
  613.    isMainPainter() { return this === this.getMainPainter(); }
  615.    /** @summary Assign this as main painter on the pad
  616.      * @desc Main painter typically responsible for axes drawing
  617.      * Should not be used by pad/canvas painters, but rather by objects which are drawing axis
  618.      * @protected */
  619.    setAsMainPainter(force) {
  620.       const pp = this.getPadPainter();
  621.       if (!pp)
  622.          this.setTopPainter(); // fallback on BasePainter method
  623.       else
  624.          pp.setMainPainter(this, force);
  625.    }
  627.    /** @summary Add painter to pad list of painters
  628.      * @desc Normally called from {@link ensureTCanvas} function when new painter is created
  629.      * @protected */
  630.    addToPadPrimitives() {
  631.       const pp = this.getPadPainter();
  633.       if (!pp || (pp === this))
  634.          return null;
  636.       if (pp.painters.indexOf(this) < 0)
  637.          pp.painters.push(this);
  639.       return pp;
  640.    }
  642.    /** @summary Remove painter from pad list of painters
  643.      * @protected */
  644.    removeFromPadPrimitives() {
  645.       const pp = this.getPadPainter();
  646.       if (!pp || (pp === this))
  647.          return false;
  649.       const k = pp.painters.indexOf(this);
  650.       if (k >= 0)
  651.          pp.painters.splice(k, 1);
  652.       return true;
  653.    }
  655.    /** @summary Creates marker attributes object
  656.      * @desc Can be used to produce markers in painter.
  657.      * See {@link TAttMarkerHandler} for more info.
  658.      * Instance assigned as this.markeratt data member, recognized by GED editor
  659.      * @param {object} args - either TAttMarker or see arguments of {@link TAttMarkerHandler}
  660.      * @return {object} created handler
  661.      * @protected */
  662.    createAttMarker(args) {
  663.       if (args === undefined)
  664.          args = { attr: this.getObject() };
  665.       else if (!isObject(args))
  666.          args = { std: true };
  667.       else if (args.fMarkerColor !== undefined && args.fMarkerStyle !== undefined && args.fMarkerSize !== undefined)
  668.          args = { attr: args, std: false };
  670.       if (args.std === undefined)
  671.          args.std = true;
  672.       if (args.painter === undefined)
  673.          args.painter = this;
  675.       let handler = args.std ? this.markeratt : null;
  677.       if (!handler)
  678.          handler = new TAttMarkerHandler(args);
  679.       else if (!handler.changed || args.force)
  680.          handler.setArgs(args);
  682.       if (args.std)
  683.          this.markeratt = handler;
  684.       return handler;
  685.    }
  687.    /** @summary Creates line attributes object.
  688.      * @desc Can be used to produce lines in painter.
  689.      * See {@link TAttLineHandler} for more info.
  690.      * Instance assigned as this.lineatt data member, recognized by GED editor
  691.      * @param {object} args - either TAttLine or see constructor arguments of {@link TAttLineHandler}
  692.      * @protected */
  693.    createAttLine(args) {
  694.       if (args === undefined)
  695.          args = { attr: this.getObject() };
  696.       else if (!isObject(args))
  697.          args = { std: true };
  698.       else if (args.fLineColor !== undefined && args.fLineStyle !== undefined && args.fLineWidth !== undefined)
  699.          args = { attr: args, std: false };
  701.       if (args.std === undefined)
  702.          args.std = true;
  703.       if (args.painter === undefined)
  704.          args.painter = this;
  706.       let handler = args.std ? this.lineatt : null;
  708.       if (!handler)
  709.          handler = new TAttLineHandler(args);
  710.       else if (!handler.changed || args.force)
  711.          handler.setArgs(args);
  713.       if (args.std)
  714.          this.lineatt = handler;
  715.       return handler;
  716.    }
  718.    /** @summary Creates text attributes object.
  719.      * @param {object} args - either TAttText or see constructor arguments of {@link TAttTextHandler}
  720.      * @protected */
  721.    createAttText(args) {
  722.       if (args === undefined)
  723.          args = { attr: this.getObject() };
  724.       else if (!isObject(args))
  725.          args = { std: true };
  726.       else if (args.fTextFont !== undefined && args.fTextSize !== undefined && args.fTextColor !== undefined)
  727.          args = { attr: args, std: false };
  729.       if (args.std === undefined)
  730.          args.std = true;
  731.       if (args.painter === undefined)
  732.          args.painter = this;
  734.       let handler = args.std ? this.textatt : null;
  736.       if (!handler)
  737.          handler = new TAttTextHandler(args);
  738.       else if (!handler.changed || args.force)
  739.          handler.setArgs(args);
  741.       if (args.std)
  742.          this.textatt = handler;
  743.       return handler;
  744.    }
  746.    /** @summary Creates fill attributes object.
  747.      * @desc Method dedicated to create fill attributes, bound to canvas SVG
  748.      * otherwise newly created patters will not be usable in the canvas
  749.      * See {@link TAttFillHandler} for more info.
  750.      * Instance assigned as this.fillatt data member, recognized by GED editors
  751.      * @param {object} [args] - for special cases one can specify TAttFill as args or number of parameters
  752.      * @param {boolean} [args.std = true] - this is standard fill attribute for object and should be used as this.fillatt
  753.      * @param {object} [args.attr = null] - object, derived from TAttFill
  754.      * @param {number} [args.pattern = undefined] - integer index of fill pattern
  755.      * @param {number} [args.color = undefined] - integer index of fill color
  756.      * @param {string} [args.color_as_svg = undefined] - color will be specified as SVG string, not as index from color palette
  757.      * @param {number} [args.kind = undefined] - some special kind which is handled differently from normal patterns
  758.      * @return created handle
  759.      * @protected */
  760.    createAttFill(args) {
  761.       if (args === undefined)
  762.          args = { attr: this.getObject() };
  763.       else if (!isObject(args))
  764.          args = { std: true };
  765.       else if (args._typename && args.fFillColor !== undefined && args.fFillStyle !== undefined)
  766.          args = { attr: args, std: false };
  768.       if (args.std === undefined)
  769.          args.std = true;
  770.       if (args.painter === undefined)
  771.          args.painter = this;
  773.       let handler = args.std ? this.fillatt : null;
  775.       if (!args.svg)
  776.          args.svg = this.getCanvSvg();
  778.       if (!handler)
  779.          handler = new TAttFillHandler(args);
  780.       else if (!handler.changed || args.force)
  781.          handler.setArgs(args);
  783.       if (args.std)
  784.          this.fillatt = handler;
  785.       return handler;
  786.    }
  788.    /** @summary call function for each painter in the pad
  789.      * @desc Iterate over all known painters
  790.      * @private */
  791.    forEachPainter(userfunc, kind) {
  792.       // iterate over all painters from pad list
  793.       const pp = this.getPadPainter();
  794.       if (pp)
  795.          pp.forEachPainterInPad(userfunc, kind);
  796.       else {
  797.          const painter = this.getTopPainter();
  798.          if (painter && (kind !== 'pads'))
  799.             userfunc(painter);
  800.       }
  801.    }
  803.    /** @summary indicate that redraw was invoked via interactive action (like context menu or zooming)
  804.      * @desc Use to catch such action by GED and by server-side
  805.      * @return {Promise} when completed
  806.      * @private */
  807.    async interactiveRedraw(arg, info, subelem) {
  808.       let reason, res;
  809.       if (isStr(info) && info.indexOf('exec:'))
  810.          reason = info;
  812.       if (arg === 'pad')
  813.          res = this.redrawPad(reason);
  814.       else if (arg !== false)
  815.          res = this.redraw(reason);
  817.       return getPromise(res).then(() => {
  818.          if (arg === 'attribute')
  819.             return this.getPadPainter()?.redrawLegend();
  820.       }).then(() => {
  821.          // inform GED that something changes
  822.          const canp = this.getCanvPainter();
  824.          if (isFunc(canp?.producePadEvent))
  825.             canp.producePadEvent('redraw', this.getPadPainter(), this, null, subelem);
  827.          // inform server that draw options changes
  828.          if (isFunc(canp?.processChanges))
  829.             canp.processChanges(info, this, subelem);
  831.          return this;
  832.       });
  833.    }
  835.    /** @summary Redraw all objects in the current pad
  836.      * @param {string} [reason] - like 'resize' or 'zoom'
  837.      * @return {Promise} when pad redraw completed
  838.      * @protected */
  839.    async redrawPad(reason) {
  840.       return this.getPadPainter()?.redrawPad(reason) ?? false;
  841.    }
  843.    /** @summary execute selected menu command, either locally or remotely
  844.      * @private */
  845.    executeMenuCommand(method) {
  846.       if (method.fName === 'Inspect')
  847.          // primitive inspector, keep it here
  848.          return this.showInspector();
  850.       return false;
  851.    }
  853.    /** @summary Invoke method for object via WebCanvas functionality
  854.      * @desc Requires that painter marked with object identifier (this.snapid) or identifier provided as second argument
  855.      * Canvas painter should exists and in non-readonly mode
  856.      * Execution string can look like 'Print()'.
  857.      * Many methods call can be chained with 'Print();;Update();;Clear()'
  858.      * @private */
  859.    submitCanvExec(exec, snapid) {
  860.       if (!exec || !isStr(exec)) return;
  862.       const canp = this.getCanvPainter();
  863.       if (isFunc(canp?.submitExec))
  864.          canp.submitExec(this, exec, snapid);
  865.    }
  867.    /** @summary remove all created draw attributes
  868.      * @protected */
  869.    deleteAttr() {
  870.       delete this.lineatt;
  871.       delete this.fillatt;
  872.       delete this.markeratt;
  873.    }
  875.    /** @summary Show object in inspector for provided object
  876.      * @protected */
  877.    showInspector(/* opt */) {
  878.       return false;
  879.    }
  881.    /** @summary Fill context menu for the object
  882.      * @private */
  883.    fillContextMenu(menu) {
  884.       const cl = this.getClassName(),
  885.             name = this.getObjectName(),
  886.             p = cl.lastIndexOf('::'),
  887.             cl0 = (p > 0) ? cl.slice(p+2) : cl,
  888.             hdr = (cl0 && name) ? `${cl0}:${name}` : (cl0 || name || 'object'),
  889.             url = cl ? `${urlClassPrefix}${cl.replaceAll('::', '_1_1')}.html` : '';
  891.       menu.header(hdr, url);
  893.       const size0 = menu.size();
  895.       if (isFunc(this.fillContextMenuItems))
  896.          this.fillContextMenuItems(menu);
  898.       if ((menu.size() > size0) && this.showInspector('check'))
  899.          menu.add('Inspect', this.showInspector);
  901.       menu.addAttributesMenu(this);
  903.       return menu.size() > size0;
  904.    }
  906.    /** @summary shows objects status
  907.      * @desc Either used canvas painter method or globally assigned
  908.      * When no parameters are specified, just basic object properties are shown
  909.      * @private */
  910.    showObjectStatus(name, title, info, info2) {
  911.       let cp = this.getCanvPainter();
  913.       if (!isFunc(cp?.showCanvasStatus))
  914.          cp = null;
  916.       if (!cp && !isFunc(internals.showStatus))
  917.          return false;
  919.       if (this.enlargeMain('state') === 'on')
  920.          return false;
  922.       if ((name === undefined) && (title === undefined)) {
  923.          const obj = this.getObject();
  924.          if (!obj) return;
  925.          name = this.getItemName() || obj.fName;
  926.          title = obj.fTitle || obj._typename;
  927.          info = obj._typename;
  928.       }
  930.       if (cp)
  931.          cp.showCanvasStatus(name, title, info, info2);
  932.       else
  933.          internals.showStatus(name, title, info, info2);
  934.    }
  936.    /** @summary Redraw object
  937.      * @desc Basic method, should be reimplemented in all derived objects
  938.      * for the case when drawing should be repeated
  939.      * @abstract
  940.      * @protected */
  941.    redraw(/* reason */) {}
  943.    /** @summary Start text drawing
  944.      * @desc required before any text can be drawn
  945.      * @param {number} font_face - font id as used in ROOT font attributes
  946.      * @param {number} font_size - font size as used in ROOT font attributes
  947.      * @param {object} [draw_g] - element where text drawn, by default using main object <g> element
  948.      * @param {number} [max_font_size] - maximal font size, used when text can be scaled
  949.      * @protected */
  950.    startTextDrawing(font_face, font_size, draw_g, max_font_size, can_async) {
  951.       if (!draw_g) draw_g = this.draw_g;
  952.       if (!draw_g || draw_g.empty())
  953.          return false;
  955.       const font = (font_size === 'font') ? font_face : new FontHandler(font_face, font_size);
  956.       if (can_async && font.needLoad())
  957.          return font;
  959.       font.setPainter(this); // may be required when custom font is used
  961.       draw_g.call(font.func);
  963.       draw_g.property('draw_text_completed', false) // indicate that draw operations submitted
  964.             .property('all_args', []) // array of all submitted args, makes easier to analyze them
  965.             .property('text_font', font)
  966.             .property('text_factor', 0)
  967.             .property('max_text_width', 0) // keep maximal text width, use it later
  968.             .property('max_font_size', max_font_size)
  969.             .property('_fast_drawing', this.getPadPainter()?.isFastDrawing() ?? false);
  971.       if (draw_g.property('_fast_drawing'))
  972.          draw_g.property('_font_too_small', (max_font_size && (max_font_size < 5)) || (font.size < 4));
  974.       return true;
  975.    }
  977.    /** @summary Start async text drawing
  978.     * @return {Promise} for loading of font if necessary
  979.     * @private */
  980.    async startTextDrawingAsync(font_face, font_size, draw_g, max_font_size) {
  981.       const font = this.startTextDrawing(font_face, font_size, draw_g, max_font_size, true);
  982.       if ((font === true) || (font === false))
  983.          return font;
  984.       return font.load().then(res => {
  985.          if (!res)
  986.             return false;
  988.          return this.startTextDrawing(font, 'font', draw_g, max_font_size);
  989.       });
  990.    }
  992.    /** @summary Apply scaling factor to all drawn text in the <g> element
  993.      * @desc Can be applied at any time before finishTextDrawing is called - even in the postprocess callbacks of text draw
  994.      * @param {number} factor - scaling factor
  995.      * @param {object} [draw_g] - drawing element for the text
  996.      * @protected */
  997.    scaleTextDrawing(factor, draw_g) {
  998.       if (!draw_g) draw_g = this.draw_g;
  999.       if (!draw_g || draw_g.empty()) return;
  1000.       if (factor && (factor > draw_g.property('text_factor')))
  1001.          draw_g.property('text_factor', factor);
  1002.    }
  1004.    /** @summary Analyze if all text draw operations are completed
  1005.      * @private */
  1006.    #checkAllTextDrawing(draw_g, resolveFunc, try_optimize) {
  1007.       const all_args = draw_g.property('all_args') || [];
  1008.       let missing = 0;
  1010.       all_args.forEach(arg => { if (!arg.ready) missing++; });
  1012.       if (missing > 0) {
  1013.          if (isFunc(resolveFunc)) {
  1014.             draw_g.node().textResolveFunc = resolveFunc;
  1015.             draw_g.node().try_optimize = try_optimize;
  1016.          }
  1017.          return;
  1018.       }
  1020.       draw_g.property('all_args', null); // clear all_args property
  1022.       // adjust font size (if there are normal text)
  1023.       const f = draw_g.property('text_factor'),
  1024.             font = draw_g.property('text_font'),
  1025.             max_sz = draw_g.property('max_font_size');
  1026.       let font_size = font.size, any_text = false, only_text = true;
  1028.       if ((f > 0) && ((f < 0.95) || (f > 1.05)))
  1029.          font.size = Math.max(1, Math.floor(font.size / f));
  1031.       if (max_sz && (font.size > max_sz))
  1032.          font.size = max_sz;
  1034.       if (font.size !== font_size) {
  1035.          draw_g.call(font.func);
  1036.          font_size = font.size;
  1037.       }
  1039.       all_args.forEach(arg => {
  1040.          if (arg.mj_node && arg.mj_func) {
  1041.             const svg = arg.mj_node.select('svg'); // MathJax svg
  1042.             arg.mj_func(this, arg.mj_node, svg, arg, font_size, f);
  1043.             delete arg.mj_node; // remove reference
  1044.             only_text = false;
  1045.          } else if (arg.txt_g)
  1046.             only_text = false;
  1047.       });
  1049.       if (!resolveFunc) {
  1050.          resolveFunc = draw_g.node().textResolveFunc;
  1051.          try_optimize = draw_g.node().try_optimize;
  1052.          delete draw_g.node().textResolveFunc;
  1053.          delete draw_g.node().try_optimize;
  1054.       }
  1056.       const optimize_arr = (try_optimize && only_text) ? [] : null;
  1058.       // now process text and latex drawings
  1059.       all_args.forEach(arg => {
  1060.          let txt, is_txt, scale = 1;
  1061.          if (arg.txt_node) {
  1062.             txt = arg.txt_node;
  1063.             delete arg.txt_node;
  1064.             is_txt = true;
  1065.             if (optimize_arr !== null) optimize_arr.push(txt);
  1066.          } else if (arg.txt_g) {
  1067.             txt = arg.txt_g;
  1068.             delete arg.txt_g;
  1069.             is_txt = false;
  1070.          } else
  1071.             return;
  1073.          txt.attr('visibility', null);
  1075.          any_text = true;
  1077.          if (arg.width) {
  1078.             // adjust x position when scale into specified rectangle
  1079.             if (arg.align[0] === 'middle')
  1080.                arg.x += arg.width / 2;
  1081.              else if (arg.align[0] === 'end')
  1082.                 arg.x += arg.width;
  1083.          }
  1085.          if (arg.height) {
  1086.             if (arg.align[1].indexOf('bottom') === 0)
  1087.                arg.y += arg.height;
  1088.             else if (arg.align[1] === 'middle')
  1089.                arg.y += arg.height / 2;
  1090.          }
  1092.          let dx = 0, dy = 0;
  1094.          if (is_txt) {
  1095.             // handle simple text drawing
  1097.             if (isNodeJs()) {
  1098.                if (arg.scale && (f > 0)) { arg.box.width *= 1/f; arg.box.height *= 1/f; }
  1099.             } else if (!arg.plain && !arg.fast) {
  1100.                // exact box dimension only required when complex text was build
  1101.                arg.box = getElementRect(txt, 'bbox');
  1102.             }
  1104.             if (arg.plain) {
  1105.                txt.attr('text-anchor', arg.align[0]);
  1106.                if (arg.align[1] === 'top')
  1107.                   txt.attr('dy', '.8em');
  1108.                else if (arg.align[1] === 'middle') {
  1109.                   // if (isNodeJs()) txt.attr('dy', '.4em'); else // old workaround for node.js
  1110.                   txt.attr('dominant-baseline', 'middle');
  1111.                }
  1112.             } else {
  1113.                txt.attr('text-anchor', 'start');
  1114.                dx = ((arg.align[0] === 'middle') ? -0.5 : ((arg.align[0] === 'end') ? -1 : 0)) * arg.box.width;
  1115.                dy = ((arg.align[1] === 'top') ? (arg.top_shift || 1) : (arg.align[1] === 'middle') ? (arg.mid_shift || 0.5) : 0) * arg.box.height;
  1116.             }
  1117.          } else if (arg.text_rect) {
  1118.             // handle latex drawing
  1119.             const box = arg.text_rect;
  1121.             scale = (f > 0) && (Math.abs(1-f) > 0.01) ? 1/f : 1;
  1123.             dx = ((arg.align[0] === 'middle') ? -0.5 : ((arg.align[0] === 'end') ? -1 : 0)) * box.width * scale;
  1125.             if (arg.align[1] === 'top')
  1126.                dy = -box.y1*scale;
  1127.             else if (arg.align[1] === 'bottom')
  1128.                dy = -box.y2*scale;
  1129.             else if (arg.align[1] === 'middle')
  1130.                dy = -0.5*(box.y1 + box.y2)*scale;
  1131.          } else
  1132.             console.error('text rect not calcualted - please check code');
  1134.          if (!arg.rotate) {
  1135.             arg.x += dx;
  1136.             arg.y += dy;
  1137.             dx = dy = 0;
  1138.          }
  1140.          // use translate and then rotate to avoid complex sign calculations
  1141.          let trans = makeTranslate(Math.round(arg.x), Math.round(arg.y)) || '';
  1142.          const dtrans = makeTranslate(Math.round(dx), Math.round(dy)),
  1143.                append = aaa => { if (trans) trans += ' '; trans += aaa; };
  1145.          if (arg.rotate)
  1146.             append(`rotate(${Math.round(arg.rotate)})`);
  1147.          if (scale !== 1)
  1148.             append(`scale(${scale.toFixed(3)})`);
  1149.          if (dtrans)
  1150.             append(dtrans);
  1151.          if (trans)
  1152.             txt.attr('transform', trans);
  1153.       });
  1156.       // when no any normal text drawn - remove font attributes
  1157.       if (!any_text)
  1158.          font.clearFont(draw_g);
  1160.       if ((optimize_arr !== null) && (optimize_arr.length > 1)) {
  1161.          ['fill', 'text-anchor'].forEach(name => {
  1162.             let first = optimize_arr[0].attr(name);
  1163.             optimize_arr.forEach(txt_node => {
  1164.                const value = txt_node.attr(name);
  1165.                if (!value || (value !== first)) first = undefined;
  1166.             });
  1167.             if (first) {
  1168.                draw_g.attr(name, first);
  1169.                optimize_arr.forEach(txt_node => { txt_node.attr(name, null); });
  1170.             }
  1171.          });
  1172.       }
  1174.       // if specified, call resolve function
  1175.       if (resolveFunc) resolveFunc(this); // IMPORTANT - return painter, may use in draw methods
  1176.    }
  1178.    /** @summary Post-process plain text drawing
  1179.      * @private */
  1180.    #postprocessDrawText(arg, txt_node) {
  1181.       // complete rectangle with very rough size estimations
  1182.       arg.box = !isNodeJs() && !settings.ApproxTextSize && !arg.fast
  1183.                  ? getElementRect(txt_node, 'bbox')
  1184.                  : (arg.text_rect || { height: Math.round(1.15 * arg.font_size), width: approximateLabelWidth(arg.text, arg.font, arg.font_size) });
  1186.       txt_node.attr('visibility', 'hidden'); // hide elements until text drawing is finished
  1188.       if (arg.box.width > arg.draw_g.property('max_text_width'))
  1189.          arg.draw_g.property('max_text_width', arg.box.width);
  1190.       if (arg.scale)
  1191.          this.scaleTextDrawing(Math.max(1.05 * arg.box.width / arg.width, arg.box.height / arg.height), arg.draw_g);
  1193.       arg.result_width = arg.box.width;
  1194.       arg.result_height = arg.box.height;
  1196.       if (isFunc(arg.post_process))
  1197.          arg.post_process(this);
  1199.       return arg.box.width;
  1200.    }
  1202.    /** @summary Draw text
  1203.      * @desc The only legal way to draw text, support plain, latex and math text output
  1204.      * @param {object} arg - different text draw options
  1205.      * @param {string} arg.text - text to draw
  1206.      * @param {number} [arg.align = 12] - int value like 12 or 31
  1207.      * @param {string} [arg.align = undefined] - end;bottom
  1208.      * @param {number} [arg.x = 0] - x position
  1209.      * @param {number} [arg.y = 0] - y position
  1210.      * @param {number} [arg.width] - when specified, adjust font size in the specified box
  1211.      * @param {number} [arg.height] - when specified, adjust font size in the specified box
  1212.      * @param {boolean} [arg.scale = true] - scale into draw box when width and height parameters are specified
  1213.      * @param {number} [arg.latex] - 0 - plain text, 1 - normal TLatex, 2 - math
  1214.      * @param {string} [arg.color=black] - text color
  1215.      * @param {number} [arg.rotate] - rotation angle
  1216.      * @param {number} [arg.font_size] - fixed font size
  1217.      * @param {object} [arg.draw_g] - element where to place text, if not specified central draw_g container is used
  1218.      * @param {function} [arg.post_process] - optional function called when specified text is drawn
  1219.      * @protected */
  1220.    drawText(arg) {
  1221.       if (!arg.text)
  1222.          arg.text = '';
  1224.       arg.draw_g = arg.draw_g || this.draw_g;
  1225.       if (!arg.draw_g || arg.draw_g.empty())
  1226.          return;
  1228.       const font = arg.draw_g.property('text_font');
  1229.       arg.font = font; // use in latex conversion
  1231.       if (font) {
  1232.          arg.color = arg.color || font.color;
  1233.          arg.align = arg.align || font.align;
  1234.          arg.rotate = arg.rotate || font.angle;
  1235.       }
  1237.       let align = ['start', 'middle'];
  1239.       if (isStr(arg.align)) {
  1240.          align = arg.align.split(';');
  1241.          if (align.length === 1)
  1242.             align.push('middle');
  1243.       } else if (typeof arg.align === 'number') {
  1244.          if ((arg.align / 10) >= 3)
  1245.             align[0] = 'end';
  1246.          else if ((arg.align / 10) >= 2)
  1247.             align[0] = 'middle';
  1248.          if ((arg.align % 10) === 0)
  1249.             align[1] = 'bottom';
  1250.          else if ((arg.align % 10) === 1)
  1251.             align[1] = 'bottom-base';
  1252.          else if ((arg.align % 10) === 3)
  1253.             align[1] = 'top';
  1254.       } else if (isObject(arg.align) && (arg.align.length === 2))
  1255.          align = arg.align;
  1257.       if (arg.latex === undefined)
  1258.          arg.latex = 1; //  0: text, 1: latex, 2: math
  1259.       arg.align = align;
  1260.       arg.x = arg.x || 0;
  1261.       arg.y = arg.y || 0;
  1262.       if (arg.scale !== false)
  1263.          arg.scale = arg.width && arg.height && !arg.font_size;
  1264.       arg.width = arg.width || 0;
  1265.       arg.height = arg.height || 0;
  1267.       if (arg.draw_g.property('_fast_drawing')) {
  1268.          if (arg.scale) {
  1269.             // area too small - ignore such drawing
  1270.             if (arg.height < 4)
  1271.                return 0;
  1272.          } else if (arg.font_size) {
  1273.             // font size too small
  1274.             if (arg.font_size < 4)
  1275.                return 0;
  1276.          } else if (arg.draw_g.property('_font_too_small')) {
  1277.             // configure font is too small - ignore drawing
  1278.             return 0;
  1279.          }
  1280.       }
  1282.       // include drawing into list of all args
  1283.       arg.draw_g.property('all_args').push(arg);
  1284.       arg.ready = false; // indicates if drawing is ready for post-processing
  1286.       let use_mathjax = (arg.latex === 2);
  1287.       const cl = constants.Latex;
  1289.       if (arg.latex === 1) {
  1290.          use_mathjax = (settings.Latex === cl.AlwaysMathJax) ||
  1291.                        ((settings.Latex === cl.MathJax) && arg.text.match(/[#{\\]/g)) ||
  1292.                        arg.text.match(/[\\]/g);
  1293.       }
  1295.       if (!use_mathjax || arg.nomathjax) {
  1296.          arg.txt_node = arg.draw_g.append('svg:text');
  1298.          if (arg.color)
  1299.             arg.txt_node.attr('fill', arg.color);
  1301.          if (arg.font_size)
  1302.             arg.txt_node.attr('font-size', arg.font_size);
  1303.          else
  1304.             arg.font_size = font.size;
  1306.          arg.plain = !arg.latex || (settings.Latex === cl.Off) || (settings.Latex === cl.Symbols);
  1308.          arg.simple_latex = arg.latex && (settings.Latex === cl.Symbols);
  1310.          if (!arg.plain || arg.simple_latex || arg.font?.isSymbol) {
  1311.             if (arg.simple_latex || isPlainText(arg.text) || arg.plain) {
  1312.                arg.simple_latex = true;
  1313.                producePlainText(this, arg.txt_node, arg);
  1314.             } else {
  1315.                arg.txt_node.remove(); // just remove text node
  1316.                delete arg.txt_node;
  1317.                arg.txt_g = arg.draw_g.append('svg:g');
  1318.                produceLatex(this, arg.txt_g, arg);
  1319.             }
  1320.             arg.ready = true;
  1321.             this.#postprocessDrawText(arg, arg.txt_g || arg.txt_node);
  1323.             if (arg.draw_g.property('draw_text_completed'))
  1324.                this.#checkAllTextDrawing(arg.draw_g); // check if all other elements are completed
  1325.             return 0;
  1326.          }
  1328.          arg.plain = true;
  1329.          arg.txt_node.text(arg.text);
  1330.          arg.ready = true;
  1332.          return this.#postprocessDrawText(arg, arg.txt_node);
  1333.       }
  1335.       arg.mj_node = arg.draw_g.append('svg:g').attr('visibility', 'hidden'); // hide text until drawing is finished
  1337.       produceMathjax(this, arg.mj_node, arg).then(() => {
  1338.          arg.ready = true;
  1339.          if (arg.draw_g.property('draw_text_completed'))
  1340.             this.#checkAllTextDrawing(arg.draw_g);
  1341.       });
  1343.       return 0;
  1344.    }
  1346.    /** @summary Finish text drawing
  1347.      * @desc Should be called to complete all text drawing operations
  1348.      * @param {function} [draw_g] - <g> element for text drawing, this.draw_g used when not specified
  1349.      * @return {Promise} when text drawing completed
  1350.      * @protected */
  1351.    async finishTextDrawing(draw_g, try_optimize) {
  1352.       if (!draw_g)
  1353.          draw_g = this.draw_g;
  1354.       if (!draw_g || draw_g.empty())
  1355.          return false;
  1357.       draw_g.property('draw_text_completed', true); // mark that text drawing is completed
  1359.       return new Promise(resolveFunc => {
  1360.          this.#checkAllTextDrawing(draw_g, resolveFunc, try_optimize);
  1361.       });
  1362.    }
  1364.    /** @summary Configure user-defined context menu for the object
  1365.      * @desc fillmenu_func will be called when context menu is activated
  1366.      * Arguments fillmenu_func are (menu,kind)
  1367.      * First is menu object, second is object sub-element like axis 'x' or 'y'
  1368.      * Function should return promise with menu when items are filled
  1369.      * @param {function} fillmenu_func - function to fill custom context menu for object */
  1370.    configureUserContextMenu(fillmenu_func) {
  1371.       this.#user_context_menu = isFunc(fillmenu_func) ? fillmenu_func : undefined;
  1372.    }
  1374.    /** @summary Fill object menu in web canvas
  1375.      * @private */
  1376.    async fillObjectExecMenu(menu, kind) {
  1377.       if (isFunc(this.#user_context_menu))
  1378.          return this.#user_context_menu(menu, kind);
  1380.       const canvp = this.getCanvPainter();
  1382.       if (!this.snapid || !canvp || canvp?.isReadonly() || !canvp?.getWebsocket())
  1383.          return menu;
  1385.       function doExecMenu(arg) {
  1386.          const execp = menu.exec_painter || this,
  1387.                cp = execp.getCanvPainter(),
  1388.                item = menu.exec_items[parseInt(arg)];
  1390.          if (!item?.fName) return;
  1392.          // this is special entry, produced by TWebMenuItem, which recognizes editor entries itself
  1393.          if (item.fExec === 'Show:Editor') {
  1394.             if (isFunc(cp?.activateGed))
  1395.                cp.activateGed(execp);
  1396.             return;
  1397.          }
  1399.          if (isFunc(cp?.executeObjectMethod) && cp.executeObjectMethod(execp, item, item.$execid))
  1400.             return;
  1402.          item.fClassName = execp.getClassName();
  1403.          if ((item.$execid.indexOf('#x') > 0) || (item.$execid.indexOf('#y') > 0) || (item.$execid.indexOf('#z') > 0))
  1404.             item.fClassName = clTAxis;
  1406.          if (execp.executeMenuCommand(item))
  1407.             return;
  1409.          if (!item.$execid)
  1410.             return;
  1412.          if (!item.fArgs) {
  1413.             return cp?.v7canvas ? cp.submitExec(execp, item.fExec, kind)
  1414.                                 : execp.submitCanvExec(item.fExec, item.$execid);
  1415.          }
  1417.          menu.showMethodArgsDialog(item).then(args => {
  1418.             if (!args || execp.executeMenuCommand(item, args))
  1419.                return;
  1421.             const exec = item.fExec.slice(0, item.fExec.length - 1) + args + ')';
  1422.             if (cp?.v7canvas)
  1423.                cp.submitExec(execp, exec, kind);
  1424.             else
  1425.                cp?.sendWebsocket(`OBJEXEC:${item.$execid}:${exec}`);
  1426.          });
  1427.       }
  1429.       const doFillMenu = (_menu, _reqid, _resolveFunc, reply) => {
  1430.          // avoid multiple call of the callback after timeout
  1431.          if (menu._got_menu)
  1432.             return;
  1433.          menu._got_menu = true;
  1435.          if (reply && (_reqid !== reply.fId))
  1436.             console.error(`missmatch between request ${_reqid} and reply ${reply.fId} identifiers`);
  1438.          menu.exec_items = reply?.fItems;
  1440.          if (menu.exec_items?.length) {
  1441.             if (_menu.size() > 0)
  1442.                _menu.separator();
  1444.             let lastclname;
  1446.             for (let n = 0; n < menu.exec_items.length; ++n) {
  1447.                const item = menu.exec_items[n];
  1448.                item.$execid = reply.fId;
  1449.                item.$menu = menu;
  1451.                if (item.fClassName && lastclname && (lastclname !== item.fClassName)) {
  1452.                   _menu.endsub();
  1453.                   lastclname = '';
  1454.                }
  1455.                if (lastclname !== item.fClassName) {
  1456.                   lastclname = item.fClassName;
  1457.                   const p = lastclname.lastIndexOf('::'),
  1458.                         shortname = (p > 0) ? lastclname.slice(p+2) : lastclname;
  1460.                   _menu.sub(shortname.replace(/[<>]/g, '_'));
  1461.                }
  1463.                if ((item.fChecked === undefined) || (item.fChecked < 0))
  1464.                   _menu.add(item.fName, n, doExecMenu);
  1465.                else
  1466.                   _menu.addchk(item.fChecked, item.fName, n, doExecMenu);
  1467.             }
  1469.             if (lastclname)
  1470.                _menu.endsub();
  1471.          }
  1473.          _resolveFunc(_menu);
  1474.       },
  1476.       reqid = this.getSnapId(kind);
  1478.       menu._got_menu = false;
  1480.       // if menu painter differs from this, remember it for further usage
  1481.       if (menu.painter)
  1482.          menu.exec_painter = (menu.painter !== this) ? this : undefined;
  1484.       return new Promise(resolveFunc => {
  1485.          let did_resolve = false;
  1487.          function handleResolve(res) {
  1488.             if (did_resolve) return;
  1489.             did_resolve = true;
  1490.             resolveFunc(res);
  1491.          }
  1493.          // set timeout to avoid menu hanging
  1494.          setTimeout(() => doFillMenu(menu, reqid, handleResolve), 2000);
  1496.          canvp.submitMenuRequest(this, kind, reqid).then(lst => doFillMenu(menu, reqid, handleResolve, lst));
  1497.       });
  1498.    }
  1500.    /** @summary Configure user-defined tooltip handler
  1501.      * @desc Hook for the users to get tooltip information when mouse cursor moves over frame area
  1502.      * Handler function will be called every time when new data is selected
  1503.      * when mouse leave frame area, handler(null) will be called
  1504.      * @param {function} handler - function called when tooltip is produced
  1505.      * @param {number} [tmout = 100] - delay in ms before tooltip delivered */
  1506.    configureUserTooltipHandler(handler, tmout = 100) {
  1507.       if (!handler || !isFunc(handler)) {
  1508.          this.#user_tooltip_handler = undefined;
  1509.          this.#user_tooltip_timeout = undefined;
  1510.       } else {
  1511.          this.#user_tooltip_handler = handler;
  1512.          this.#user_tooltip_timeout = tmout;
  1513.       }
  1514.    }
  1516.     /** @summary Configure user-defined click handler
  1517.       * @desc Function will be called every time when frame click was performed
  1518.       * As argument, tooltip object with selected bins will be provided
  1519.       * If handler function returns true, default handling of click will be disabled
  1520.       * @param {function} handler - function called when mouse click is done */
  1521.    configureUserClickHandler(handler) {
  1522.       const fp = this.getFramePainter();
  1523.       if (isFunc(fp?.configureUserClickHandler))
  1524.          fp.configureUserClickHandler(handler);
  1525.    }
  1527.    /** @summary Configure user-defined dblclick handler
  1528.      * @desc Function will be called every time when double click was called
  1529.      * As argument, tooltip object with selected bins will be provided
  1530.      * If handler function returns true, default handling of dblclick (unzoom) will be disabled
  1531.      * @param {function} handler - function called when mouse double click is done */
  1532.    configureUserDblclickHandler(handler) {
  1533.       const fp = this.getFramePainter();
  1534.       if (isFunc(fp?.configureUserDblclickHandler))
  1535.          fp.configureUserDblclickHandler(handler);
  1536.    }
  1538.    /** @summary Check if user-defined tooltip function was configured
  1539.      * @return {boolean} flag is user tooltip handler was configured */
  1540.    hasUserTooltip() {
  1541.       return isFunc(this.#user_tooltip_handler);
  1542.    }
  1544.    /** @summary Provide tooltips data to user-defined function
  1545.      * @param {object} data - tooltip data
  1546.      * @private */
  1547.    provideUserTooltip(data) {
  1548.       if (!this.hasUserTooltip())
  1549.          return;
  1551.       if (this.#user_tooltip_timeout <= 0)
  1552.          return this.#user_tooltip_handler(data);
  1554.       if (this.#user_toottip_handle) {
  1555.          clearTimeout(this.#user_toottip_handle);
  1556.          this.#user_toottip_handle = undefined;
  1557.       }
  1559.       if (!data)
  1560.          return this.#user_tooltip_handler(data);
  1562.       // only after timeout user function will be called
  1563.       this.#user_toottip_handle = setTimeout(() => {
  1564.          this.#user_toottip_handle = undefined;
  1565.          if (this.#user_tooltip_handler)
  1566.             this.#user_tooltip_handler(data);
  1567.       }, this.#user_tooltip_timeout);
  1568.    }
  1570.    /** @summary Provide projection areas
  1571.      * @param kind - 'X', 'Y', 'XY' or ''
  1572.      * @private */
  1573.    async provideSpecialDrawArea(kind) {
  1574.       if (kind === this.#special_draw_area)
  1575.          return true;
  1577.       return this.getCanvPainter().toggleProjection(kind).then(() => {
  1578.          this.#special_draw_area = kind;
  1579.          return true;
  1580.       });
  1581.    }
  1583.    /** @summary Draw in special projection areas
  1584.      * @param obj - object to draw
  1585.      * @param opt - draw option
  1586.      * @param kind - '', 'X', 'Y'
  1587.      * @private */
  1588.    async drawInSpecialArea(obj, opt, kind) {
  1589.       const canp = this.getCanvPainter();
  1590.       if (this.#special_draw_area && isFunc(canp?.drawProjection))
  1591.          return canp.drawProjection(kind || this.#special_draw_area, obj, opt);
  1593.       return false;
  1594.    }
  1596.    /** @summary Get tooltip for painter and specified event position
  1597.      * @param {Object} evnt - object with clientX and clientY positions
  1598.      * @private */
  1599.    getToolTip(evnt) {
  1600.       if ((evnt?.clientX === undefined) || (evnt?.clientY === undefined))
  1601.          return null;
  1603.       const frame = this.getFrameSvg();
  1604.       if (frame.empty())
  1605.          return null;
  1606.       const layer = frame.selectChild('.main_layer');
  1607.       if (layer.empty())
  1608.          return null;
  1610.       const pos = d3_pointer(evnt, layer.node()),
  1611.             pnt = { touch: false, x: pos[0], y: pos[1] };
  1613.       if (isFunc(this.extractToolTip))
  1614.          return this.extractToolTip(pnt);
  1616.       pnt.disabled = true;
  1618.       const res = isFunc(this.processTooltipEvent) ? this.processTooltipEvent(pnt) : null;
  1620.       return res?.user_info || res;
  1621.    }
  1623. } // class ObjectPainter
  1626. /** @summary Generic text drawing
  1627.   * @private */
  1628. function drawRawText(dom, txt /* , opt */) {
  1629.    const painter = new BasePainter(dom);
  1630.    painter.txt = txt;
  1632.    painter.redrawObject = function(obj) {
  1633.       this.txt = obj;
  1634.       this.drawText();
  1635.       return true;
  1636.    };
  1638.    painter.drawText = async function() {
  1639.       let stxt = (this.txt._typename === clTObjString) ? this.txt.fString : this.txt.value;
  1640.       if (!isStr(stxt))
  1641.          stxt = '<undefined>';
  1643.       const mathjax = this.txt.mathjax || (settings.Latex === constants.Latex.AlwaysMathJax);
  1645.       if (!mathjax && !('as_is' in this.txt)) {
  1646.          const arr = stxt.split('\n');
  1647.          stxt = '';
  1648.          for (let i = 0; i < arr.length; ++i)
  1649.             stxt += `<pre style='margin:0'>${arr[i]}</pre>`;
  1650.       }
  1652.       const frame = this.selectDom();
  1653.       let main = frame.select('div');
  1654.       if (main.empty())
  1655.          main = frame.append('div').attr('style', 'max-width:100%;max-height:100%;overflow:auto');
  1656.       main.html(stxt);
  1658.       // (re) set painter to first child element, base painter not requires canvas
  1659.       this.setTopPainter();
  1661.       if (mathjax)
  1662.          typesetMathjax(frame.node());
  1664.       return this;
  1665.    };
  1667.    return painter.drawText();
  1668. }
  1670. /** @summary Returns pad painter (if any) for specified DOM element
  1671.   * @param {string|object} dom - id or DOM element
  1672.   * @private */
  1673. function getElementPadPainter(dom) {
  1674.    return new ObjectPainter(dom).getPadPainter();
  1675. }
  1677. /** @summary Returns canvas painter (if any) for specified DOM element
  1678.   * @param {string|object} dom - id or DOM element
  1679.   * @private */
  1680. function getElementCanvPainter(dom) {
  1681.    return new ObjectPainter(dom).getCanvPainter();
  1682. }
  1684. /** @summary Returns main painter (if any) for specified HTML element - typically histogram painter
  1685.   * @param {string|object} dom - id or DOM element
  1686.   * @private */
  1687. function getElementMainPainter(dom) {
  1688.    return new ObjectPainter(dom).getMainPainter(true);
  1689. }
  1691. /** @summary Save object, drawn in specified element, as JSON.
  1692.   * @desc Normally it is TCanvas object with list of primitives
  1693.   * @param {string|object} dom - id of top div element or directly DOMElement
  1694.   * @return {string} produced JSON string */
  1695. function drawingJSON(dom) {
  1696.    return getElementCanvPainter(dom)?.produceJSON() || '';
  1697. }
  1699. let $active_pp = null;
  1701. /** @summary Set active pad painter
  1702.   * @desc Normally be used to handle key press events, which are global in the web browser
  1703.   * @param {object} args - functions arguments
  1704.   * @param {object} args.pp - pad painter
  1705.   * @param {boolean} [args.active] - is pad activated or not
  1706.   * @private */
  1707. function selectActivePad(args) {
  1708.    if (args.active) {
  1709.       $active_pp?.getFramePainter()?.setFrameActive(false);
  1710.       $active_pp = args.pp;
  1711.       $active_pp?.getFramePainter()?.setFrameActive(true);
  1712.    } else if ($active_pp === args.pp)
  1713.       $active_pp = null;
  1714. }
  1716. /** @summary Returns current active pad
  1717.   * @desc Should be used only for keyboard handling
  1718.   * @private */
  1719. function getActivePad() {
  1720.    return $active_pp;
  1721. }
  1723. /** @summary Check resize of drawn element
  1724.   * @param {string|object} dom - id or DOM element
  1725.   * @param {boolean|object} arg - options on how to resize
  1726.   * @desc As first argument dom one should use same argument as for the drawing
  1727.   * As second argument, one could specify 'true' value to force redrawing of
  1728.   * the element even after minimal resize
  1729.   * Or one just supply object with exact sizes like { width:300, height:200, force:true };
  1730.   * @example
  1731.   * import { resize } from 'https://root.cern/js/latest/modules/base/ObjectPainter.mjs';
  1732.   * resize('drawing', { width: 500, height: 200 });
  1733.   * resize(document.querySelector('#drawing'), true); */
  1734. function resize(dom, arg) {
  1735.    if (arg === true)
  1736.       arg = { force: true };
  1737.    else if (!isObject(arg))
  1738.       arg = null;
  1739.    let done = false;
  1740.    new ObjectPainter(dom).forEachPainter(painter => {
  1741.       if (!done && isFunc(painter.checkResize))
  1742.          done = painter.checkResize(arg);
  1743.    });
  1744.    return done;
  1745. }
  1748. /** @summary Safely remove all drawings from specified element
  1749.   * @param {string|object} dom - id or DOM element
  1750.   * @public
  1751.   * @example
  1752.   * import { cleanup } from 'https://root.cern/js/latest/modules/base/ObjectPainter.mjs';
  1753.   * cleanup('drawing');
  1754.   * cleanup(document.querySelector('#drawing')); */
  1755. function cleanup(dom) {
  1756.    const dummy = new ObjectPainter(dom), lst = [];
  1757.    dummy.forEachPainter(p => { if (lst.indexOf(p) < 0) lst.push(p); });
  1758.    lst.forEach(p => p.cleanup());
  1759.    dummy.selectDom().html('');
  1760.    return lst;
  1761. }
  1763. const EAxisBits = {
  1764.    kDecimals: BIT(7),
  1765.    kTickPlus: BIT(9),
  1766.    kTickMinus: BIT(10),
  1767.    kAxisRange: BIT(11),
  1768.    kCenterTitle: BIT(12),
  1769.    kCenterLabels: BIT(14),
  1770.    kRotateTitle: BIT(15),
  1771.    kPalette: BIT(16),
  1772.    kNoExponent: BIT(17),
  1773.    kLabelsHori: BIT(18),
  1774.    kLabelsVert: BIT(19),
  1775.    kLabelsDown: BIT(20),
  1776.    kLabelsUp: BIT(21),
  1777.    kIsInteger: BIT(22),
  1778.    kMoreLogLabels: BIT(23),
  1779.    kOppositeTitle: BIT(32) // artificial bit, not possible to set in ROOT
  1780. }, kAxisLabels = 'labels', kAxisNormal = 'normal', kAxisFunc = 'func', kAxisTime = 'time';
  1782. Object.assign(internals.jsroot, { ObjectPainter, cleanup, resize });
  1784. export { getElementPadPainter, getElementCanvPainter, getElementMainPainter, drawingJSON,
  1785.          selectActivePad, getActivePad, cleanup, resize, drawRawText,
  1786.          ObjectPainter, EAxisBits, kAxisLabels, kAxisNormal, kAxisFunc, kAxisTime };