gui.mjs

  1. import { decodeUrl, settings, constants, gStyle, internals, browser,
  2.          findFunction, parse, isFunc, isStr, isObject, isBatchMode, setBatchMode } from './core.mjs';
  3. import { select as d3_select } from './d3.mjs';
  4. import { HierarchyPainter } from './gui/HierarchyPainter.mjs';
  5. import { setStoragePrefix, readSettings, readStyle } from './gui/utils.mjs';
  6. import { setDefaultDrawOpt } from './draw.mjs';
  7. import { createMenu, closeMenu } from './gui/menu.mjs';
  10. /** @summary Read style and settings from URL
  11.   * @private */
  12. function readStyleFromURL(url) {
  13.    // first try to read settings from local storage
  14.    const d = decodeUrl(url),
  15.          prefix = d.get('storage_prefix');
  17.    if (isStr(prefix) && prefix)
  18.       setStoragePrefix(prefix);
  20.    if (readSettings())
  21.       setDefaultDrawOpt(settings._dflt_drawopt);
  23.    readStyle();
  25.    function get_bool(name, field, special) {
  26.       if (d.has(name)) {
  27.          const val = d.get(name);
  28.          if (special && (val === special))
  29.             settings[field] = special;
  30.          else
  31.             settings[field] = (val !== '0') && (val !== 'false') && (val !== 'off');
  32.       }
  33.    }
  35.    if (d.has('optimize')) {
  36.       settings.OptimizeDraw = 2;
  37.       let optimize = d.get('optimize');
  38.       if (optimize) {
  39.          optimize = parseInt(optimize);
  40.          if (Number.isInteger(optimize))
  41.             settings.OptimizeDraw = optimize;
  42.       }
  43.    }
  45.    if (d.has('scale')) {
  46.       const s = parseInt(d.get('scale'));
  47.       settings.CanvasScale = Number.isInteger(s) ? s : 2;
  48.    }
  50.    const b = d.get('batch');
  51.    if (b !== undefined) {
  52.       setBatchMode(d !== 'off');
  53.       if (b === 'png')
  54.          internals.batch_png = true;
  55.    }
  57.    get_bool('lastcycle', 'OnlyLastCycle');
  58.    get_bool('usestamp', 'UseStamp');
  59.    get_bool('dark', 'DarkMode');
  60.    get_bool('approx_text_size', 'ApproxTextSize');
  62.    let mr = d.get('maxranges');
  63.    if (mr) {
  64.       mr = parseInt(mr);
  65.       if (Number.isInteger(mr)) settings.MaxRanges = mr;
  66.    }
  68.    if (d.has('wrong_http_response'))
  69.       settings.HandleWrongHttpResponse = true;
  71.    if (d.has('prefer_saved_points'))
  72.       settings.PreferSavedPoints = true;
  74.    const tf1_style = d.get('tf1');
  75.    if (tf1_style === 'curve')
  76.       settings.FuncAsCurve = true;
  77.    else if (tf1_style === 'line')
  78.       settings.FuncAsCurve = false;
  80.    if (d.has('with_credentials'))
  81.       settings.WithCredentials = true;
  83.    let inter = d.get('interactive');
  84.    if (inter === 'nomenu')
  85.       settings.ContextMenu = false;
  86.    else if (inter !== undefined) {
  87.       if (!inter || (inter === '1'))
  88.          inter = '111111';
  89.       else if (inter === '0')
  90.          inter = '000000';
  91.       if (inter.length === 6) {
  92.          switch (inter[0]) {
  93.             case '0': settings.ToolBar = false; break;
  94.             case '1': settings.ToolBar = 'popup'; break;
  95.             case '2': settings.ToolBar = true; break;
  96.          }
  97.          inter = inter.slice(1);
  98.       }
  99.       if (inter.length === 5) {
  100.          settings.Tooltip = parseInt(inter[0]);
  101.          settings.ContextMenu = (inter[1] !== '0');
  102.          settings.Zooming = (inter[2] !== '0');
  103.          settings.MoveResize = (inter[3] !== '0');
  104.          settings.DragAndDrop = (inter[4] !== '0');
  105.       }
  106.    }
  108.    get_bool('tooltip', 'Tooltip');
  110.    const mathjax = d.get('mathjax', null);
  111.    let latex = d.get('latex', null);
  112.    if ((mathjax !== null) && (mathjax !== '0') && (latex === null))
  113.       latex = 'math';
  114.    if (latex !== null)
  115.       settings.Latex = constants.Latex.fromString(latex);
  117.    if (d.has('nomenu')) settings.ContextMenu = false;
  118.    if (d.has('noprogress'))
  119.       settings.ProgressBox = false;
  120.    else
  121.       get_bool('progress', 'ProgressBox', 'modal');
  123.    if (d.has('notouch')) browser.touches = false;
  124.    if (d.has('adjframe')) settings.CanAdjustFrame = true;
  126.    const has_toolbar = d.has('toolbar');
  127.    if (has_toolbar) {
  128.       const toolbar = d.get('toolbar', '');
  129.       let val = null;
  130.       if (toolbar.indexOf('popup') >= 0) val = 'popup';
  131.       if (toolbar.indexOf('left') >= 0) { settings.ToolBarSide = 'left'; val = 'popup'; }
  132.       if (toolbar.indexOf('right') >= 0) { settings.ToolBarSide = 'right'; val = 'popup'; }
  133.       if (toolbar.indexOf('vert') >= 0) { settings.ToolBarVert = true; val = 'popup'; }
  134.       if (toolbar.indexOf('show') >= 0) val = true;
  135.       settings.ToolBar = val || ((toolbar.indexOf('0') < 0) && (toolbar.indexOf('false') < 0) && (toolbar.indexOf('off') < 0));
  136.    }
  138.    get_bool('skipsi', 'SkipStreamerInfos');
  139.    get_bool('skipstreamerinfos', 'SkipStreamerInfos');
  141.    if (d.has('nodraggraphs'))
  142.       settings.DragGraphs = false;
  144.    if (d.has('palette')) {
  145.       const palette = parseInt(d.get('palette'));
  146.       if (Number.isInteger(palette) && (palette > 0) && (palette < 113)) settings.Palette = palette;
  147.    }
  149.    const render3d = d.get('render3d'), embed3d = d.get('embed3d'), geosegm = d.get('geosegm');
  150.    if (render3d) settings.Render3D = constants.Render3D.fromString(render3d);
  151.    if (embed3d) settings.Embed3D = constants.Embed3D.fromString(embed3d);
  152.    if (geosegm) settings.GeoGradPerSegm = Math.max(2, parseInt(geosegm));
  153.    get_bool('geocomp', 'GeoCompressComp');
  155.    if (d.has('hlimit')) settings.HierarchyLimit = parseInt(d.get('hlimit'));
  157.    function get_int_style(name, field, dflt) {
  158.       if (!d.has(name)) return;
  159.       const val = d.get(name);
  160.       if (!val || (val === 'true') || (val === 'on'))
  161.          gStyle[field] = dflt;
  162.       else if ((val === 'false') || (val === 'off'))
  163.          gStyle[field] = 0;
  164.       else
  165.          gStyle[field] = parseInt(val);
  166.       return gStyle[field];
  167.    }
  168.    function get_float_style(name, field) {
  169.       if (!d.has(name)) return;
  170.       const val = d.get(name),
  171.             flt = Number.parseFloat(val);
  172.       if (Number.isFinite(flt))
  173.          gStyle[field] = flt;
  174.    }
  176.    if (d.has('histzero')) gStyle.fHistMinimumZero = true;
  177.    if (d.has('histmargin')) gStyle.fHistTopMargin = parseFloat(d.get('histmargin'));
  178.    get_int_style('optstat', 'fOptStat', 1111);
  179.    get_int_style('optfit', 'fOptFit', 0);
  180.    const has_date = get_int_style('optdate', 'fOptDate', 1),
  181.          has_file = get_int_style('optfile', 'fOptFile', 1);
  182.    if ((has_date || has_file) && !has_toolbar)
  183.       settings.ToolBarVert = true;
  184.    get_float_style('datex', 'fDateX');
  185.    get_float_style('datey', 'fDateY');
  187.    get_int_style('opttitle', 'fOptTitle', 1);
  188.    if (d.has('utc'))
  189.       settings.TimeZone = 'UTC';
  190.    if (d.has('cet'))
  191.       settings.TimeZone = 'Europe/Berlin';
  192.    else if (d.has('timezone')) {
  193.       settings.TimeZone = d.get('timezone');
  194.       if ((settings.TimeZone === 'default') || (settings.TimeZone === 'dflt'))
  195.          settings.TimeZone = 'Europe/Berlin';
  196.       else if (settings.TimeZone === 'local')
  197.          settings.TimeZone = '';
  198.    }
  200.    gStyle.fStatFormat = d.get('statfmt', gStyle.fStatFormat);
  201.    gStyle.fFitFormat = d.get('fitfmt', gStyle.fFitFormat);
  202. }
  205. /** @summary Build main GUI
  206.   * @desc Used in many HTML files to create JSROOT GUI elements
  207.   * @param {String} gui_element - id of the `<div>` element
  208.   * @param {String} gui_kind - either 'online', 'nobrowser', 'draw'
  209.   * @return {Promise} with {@link HierarchyPainter} instance
  210.   * @example
  211.   * import { buildGUI } from 'https://root.cern/js/latest/modules/gui.mjs';
  212.   * buildGUI('guiDiv'); */
  213. async function buildGUI(gui_element, gui_kind = '') {
  214.    const myDiv = d3_select(isStr(gui_element) ? `#${gui_element}` : gui_element);
  215.    if (myDiv.empty())
  216.       return Promise.reject(Error('no div for gui found'));
  218.    myDiv.html(''); // clear element
  220.    const d = decodeUrl(), getSize = name => {
  221.       const res = d.has(name) ? d.get(name).split('x') : [];
  222.       if (res.length !== 2)
  223.          return null;
  224.       res[0] = parseInt(res[0]);
  225.       res[1] = parseInt(res[1]);
  226.       return res[0] > 0 && res[1] > 0 ? res : null;
  227.    };
  228.    let online = (gui_kind === 'online'), nobrowser = false, drawing = false;
  230.    if (gui_kind === 'draw')
  231.       online = drawing = nobrowser = true;
  232.    else if ((gui_kind === 'nobrowser') || d.has('nobrowser') || (myDiv.attr('nobrowser') && myDiv.attr('nobrowser') !== 'false'))
  233.       nobrowser = true;
  235.    if (myDiv.attr('ignoreurl') === 'true')
  236.       settings.IgnoreUrlOptions = true;
  238.    readStyleFromURL();
  240.    if (isBatchMode())
  241.       nobrowser = true;
  243.    const divsize = getSize('divsize'), canvsize = getSize('canvsize'), smallpad = getSize('smallpad');
  244.    if (divsize)
  245.       myDiv.style('position', 'relative').style('width', divsize[0] + 'px').style('height', divsize[1] + 'px');
  246.    else if (!isBatchMode()) {
  247.       d3_select('html').style('height', '100%');
  248.       d3_select('body').style('min-height', '100%').style('margin', 0).style('overflow', 'hidden');
  249.       myDiv.style('position', 'absolute').style('left', 0).style('top', 0).style('bottom', 0).style('right', 0).style('padding', '1px');
  250.    }
  251.    if (canvsize) {
  252.       settings.CanvasWidth = canvsize[0];
  253.       settings.CanvasHeight = canvsize[1];
  254.    }
  255.    if (smallpad) {
  256.       settings.SmallPad.width = smallpad[0];
  257.       settings.SmallPad.height = smallpad[1];
  258.    }
  260.    const hpainter = new HierarchyPainter('root', null);
  261.    if (online) hpainter.is_online = drawing ? 'draw' : 'online';
  262.    if (drawing || isBatchMode())
  263.       hpainter.exclude_browser = true;
  264.    hpainter.start_without_browser = nobrowser;
  266.    return hpainter.startGUI(myDiv).then(() => {
  267.       if (!nobrowser)
  268.          return hpainter.initializeBrowser();
  269.       if (!drawing)
  270.          return;
  271.       const func = internals.getCachedObject || findFunction('GetCachedObject'),
  272.             obj = isFunc(func) ? parse(func()) : undefined;
  273.       if (isObject(obj))
  274.          hpainter.setCachedObject(obj);
  275.       let opt = d.get('opt', '');
  276.       if (d.has('websocket'))
  277.          opt += ';websocket';
  278.       return hpainter.display('', opt);
  279.    }).then(() => hpainter);
  280. }
  282. export { buildGUI, internals, readStyleFromURL, HierarchyPainter, createMenu, closeMenu };