gpad/RCanvasPainter.mjs

  1. import { settings, create, parse, toJSON, loadScript, registerMethods, isBatchMode, isFunc, isStr, nsREX } from '../core.mjs';
  2. import { select as d3_select, rgb as d3_rgb } from '../d3.mjs';
  3. import { closeCurrentWindow, showProgress, loadOpenui5, ToolbarIcons, getColorExec } from '../gui/utils.mjs';
  4. import { GridDisplay, getHPainter } from '../gui/display.mjs';
  5. import { makeTranslate } from '../base/BasePainter.mjs';
  6. import { convertColor } from '../base/colors.mjs';
  7. import { selectActivePad, cleanup, resize, EAxisBits } from '../base/ObjectPainter.mjs';
  8. import { RObjectPainter } from '../base/RObjectPainter.mjs';
  9. import { RAxisPainter } from './RAxisPainter.mjs';
  10. import { RFramePainter } from './RFramePainter.mjs';
  11. import { RPadPainter } from './RPadPainter.mjs';
  12. import { addDragHandler } from './TFramePainter.mjs';
  15. /**
  16.  * @summary Painter class for RCanvas
  17.  *
  18.  * @private
  19.  */
  21. class RCanvasPainter extends RPadPainter {
  23.    #websocket; // WebWindow handle used for communication with server
  24.    #changed_layout; // modified layout
  25.    #submreq;  // submitted requests
  26.    #nextreqid; // id of next request
  28.    /** @summary constructor */
  29.    constructor(dom, canvas, opt) {
  30.       super(dom, canvas, opt, true);
  31.       this.#websocket = null;
  32.       this.#submreq = {};
  33.       this.tooltip_allowed = settings.Tooltip;
  34.       this.v7canvas = true;
  35.    }
  37.    /** @summary Cleanup canvas painter */
  38.    cleanup() {
  39.       this.#websocket = undefined;
  40.       this.#submreq = {};
  42.       if (this.#changed_layout)
  43.          this.setLayoutKind('simple');
  44.       this.#changed_layout = undefined;
  46.       super.cleanup();
  47.    }
  49.    /** @summary Returns readonly flag */
  50.    isReadonly() { return false; }
  52.    /** @summary Returns canvas name */
  53.    getCanvasName() {
  54.       const title = this.pad?.fTitle;
  55.       return (!title || !isStr(title)) ? 'rcanvas' : title.replace(/ /g, '_');
  56.    }
  58.    /** @summary Returns layout kind */
  59.    getLayoutKind() {
  60.       const origin = this.selectDom('origin'),
  61.          layout = origin.empty() ? '' : origin.property('layout');
  62.       return layout || 'simple';
  63.    }
  65.    /** @summary Set canvas layout kind */
  66.    setLayoutKind(kind, main_selector) {
  67.       const origin = this.selectDom('origin');
  68.       if (!origin.empty()) {
  69.          if (!kind) kind = 'simple';
  70.          origin.property('layout', kind);
  71.          origin.property('layout_selector', (kind !== 'simple') && main_selector ? main_selector : null);
  72.          this.#changed_layout = (kind !== 'simple'); // use in cleanup
  73.       }
  74.    }
  76.    /** @summary Changes layout
  77.      * @return {Promise} indicating when finished */
  78.    async changeLayout(layout_kind, mainid) {
  79.       const current = this.getLayoutKind();
  80.       if (current === layout_kind)
  81.          return true;
  83.       const origin = this.selectDom('origin'),
  84.             sidebar2 = origin.select('.side_panel2'),
  85.             lst = [];
  86.       let sidebar = origin.select('.side_panel'),
  87.           main = this.selectDom(), force;
  89.       while (main.node().firstChild)
  90.          lst.push(main.node().removeChild(main.node().firstChild));
  92.       if (!sidebar.empty())
  93.          cleanup(sidebar.node());
  94.       if (!sidebar2.empty())
  95.          cleanup(sidebar2.node());
  97.       this.setLayoutKind('simple'); // restore defaults
  98.       origin.html(''); // cleanup origin
  100.       if (layout_kind === 'simple') {
  101.          main = origin;
  102.          for (let k = 0; k < lst.length; ++k)
  103.             main.node().appendChild(lst[k]);
  104.          this.setLayoutKind(layout_kind);
  105.          force = true;
  106.       } else {
  107.          const grid = new GridDisplay(origin.node(), layout_kind);
  109.          if (mainid === undefined)
  110.             mainid = (layout_kind.indexOf('vert') === 0) ? 0 : 1;
  112.          main = d3_select(grid.getGridFrame(mainid));
  113.          main.classed('central_panel', true).style('position', 'relative');
  115.          if (mainid === 2) {
  116.             // left panel for Y
  117.             sidebar = d3_select(grid.getGridFrame(0));
  118.             sidebar.classed('side_panel2', true).style('position', 'relative');
  119.             // bottom panel for X
  120.             sidebar = d3_select(grid.getGridFrame(3));
  121.             sidebar.classed('side_panel', true).style('position', 'relative');
  122.          } else {
  123.             sidebar = d3_select(grid.getGridFrame(1 - mainid));
  124.             sidebar.classed('side_panel', true).style('position', 'relative');
  125.          }
  127.          // now append all childs to the new main
  128.          for (let k = 0; k < lst.length; ++k)
  129.             main.node().appendChild(lst[k]);
  131.          this.setLayoutKind(layout_kind, '.central_panel');
  133.          // remove reference to MDIDisplay, solves resize problem
  134.          origin.property('mdi', null);
  135.       }
  137.       // resize main drawing and let draw extras
  138.       resize(main.node(), force);
  139.       return true;
  140.    }
  142.    /** @summary Toggle projection
  143.      * @return {Promise} indicating when ready
  144.      * @private */
  145.    async toggleProjection(kind) {
  146.       delete this.proj_painter;
  148.       if (kind) this.proj_painter = { X: false, Y: false }; // just indicator that drawing can be preformed
  150.       if (isFunc(this.showUI5ProjectionArea))
  151.          return this.showUI5ProjectionArea(kind);
  153.       let layout = 'simple', mainid;
  155.       switch (kind) {
  156.          case 'XY': layout = 'projxy'; mainid = 2; break;
  157.          case 'X':
  158.          case 'bottom': layout = 'vert2_31'; mainid = 0; break;
  159.          case 'Y':
  160.          case 'left': layout = 'horiz2_13'; mainid = 1; break;
  161.          case 'top': layout = 'vert2_13'; mainid = 1; break;
  162.          case 'right': layout = 'horiz2_31'; mainid = 0; break;
  163.       }
  165.       return this.changeLayout(layout, mainid);
  166.    }
  168.    /** @summary Draw projection for specified histogram
  169.      * @private */
  170.    async drawProjection(/* kind, hist, hopt */) {
  171.       // dummy for the moment
  172.       return false;
  173.    }
  175.    /** @summary Draw in side panel
  176.      * @private */
  177.    async drawInSidePanel(canv, opt, kind) {
  178.       const sel = ((this.getLayoutKind() === 'projxy') && (kind === 'Y')) ? '.side_panel2' : '.side_panel',
  179.             side = this.selectDom('origin').select(sel);
  180.       return side.empty() ? null : this.drawObject(side.node(), canv, opt);
  181.    }
  183.    /** @summary Checks if canvas shown inside ui5 widget
  184.      * @desc Function should be used only from the func which supposed to be replaced by ui5
  185.      * @private */
  186.    testUI5() {
  187.       return this.use_openui ?? false;
  188.    }
  190.    /** @summary Show message
  191.      * @desc Used normally with web-based canvas and handled in ui5
  192.      * @private */
  193.    showMessage(msg) {
  194.       if (!this.testUI5())
  195.          showProgress(msg, 7000);
  196.    }
  198.    /** @summary Function called when canvas menu item Save is called */
  199.    saveCanvasAsFile(fname) {
  200.       const pnt = fname.indexOf('.');
  201.       this.createImage(fname.slice(pnt+1))
  202.           .then(res => this.sendWebsocket(`SAVE:${fname}:${res}`));
  203.    }
  205.    /** @summary Send command to server to save canvas with specified name
  206.      * @desc Should be only used in web-based canvas
  207.      * @private */
  208.    sendSaveCommand(fname) { this.sendWebsocket('PRODUCE:' + fname); }
  210.    /** @summary Return assigned web socket
  211.     * @private */
  212.    getWebsocket() { return this.#websocket; }
  214.    /** @summary Return true if message can be send via web socket
  215.     * @private */
  216.    canSendWebsocket(noper = 1) { return this.#websocket?.canSend(noper); }
  218.    /** @summary Send message via web socket
  219.      * @private */
  220.    sendWebsocket(msg) {
  221.       if (this.#websocket?.canSend()) {
  222.          this.#websocket.send(msg);
  223.          return true;
  224.       }
  226.       return false;
  227.    }
  229.    /** @summary Close websocket connection to canvas
  230.      * @private */
  231.    closeWebsocket(force) {
  232.       if (this.#websocket) {
  233.          this.#websocket.close(force);
  234.          this.#websocket.cleanup();
  235.          this.#websocket = undefined;
  236.       }
  237.    }
  239.    /** @summary Use provided connection for the web canvas
  240.      * @private */
  241.    useWebsocket(handle) {
  242.       this.closeWebsocket();
  244.       this.#websocket = handle;
  245.       this.#websocket.setReceiver(this);
  246.       this.#websocket.connect();
  247.    }
  249.    /** @summary set, test or reset timeout of specified name
  250.      * @desc Used to prevent overloading of websocket for specific function */
  251.    websocketTimeout(name, tm) {
  252.       if (!this.#websocket)
  253.          return;
  254.       if (!this.#websocket._tmouts)
  255.          this.#websocket._tmouts = {};
  257.       const handle = this.#websocket._tmouts[name];
  258.       if (tm === undefined)
  259.          return handle !== undefined;
  261.       if (tm === 'reset') {
  262.          if (handle) { clearTimeout(handle); delete this.#websocket._tmouts[name]; }
  263.       } else if (!handle && Number.isInteger(tm))
  264.          this.#websocket._tmouts[name] = setTimeout(() => { delete this.#websocket._tmouts[name]; }, tm);
  265.    }
  267.    /** @summary Handler for websocket open event
  268.      * @private */
  269.    onWebsocketOpened(/* handle */) {
  270.    }
  272.    /** @summary Handler for websocket close event
  273.      * @private */
  274.    onWebsocketClosed(/* handle */) {
  275.       if (!this.embed_canvas)
  276.          closeCurrentWindow();
  277.    }
  279.    /** @summary Handler for websocket message
  280.      * @private */
  281.    onWebsocketMsg(handle, msg) {
  282.       // console.log('GET_MSG ' + msg.slice(0,30));
  284.       if (msg === 'CLOSE') {
  285.          this.onWebsocketClosed();
  286.          this.closeWebsocket(true);
  287.       } else if (msg.slice(0, 5) === 'SNAP:') {
  288.          msg = msg.slice(5);
  289.          const p1 = msg.indexOf(':'),
  290.              snapid = msg.slice(0, p1),
  291.              snap = parse(msg.slice(p1+1));
  292.          this.syncDraw(true)
  293.              .then(() => {
  294.                 if (!this.snapid && snap?.fWinSize)
  295.                    this.resizeBrowser(snap.fWinSize[0], snap.fWinSize[1]);
  296.              }).then(() => this.redrawPadSnap(snap))
  297.              .then(() => {
  298.                  this.addPadInteractive();
  299.                  handle.send(`SNAPDONE:${snapid}`); // send ready message back when drawing completed
  300.                  this.confirmDraw();
  301.              }).catch(err => {
  302.                if (isFunc(this.showConsoleError))
  303.                   this.showConsoleError(err);
  304.                else
  305.                   console.log(err);
  306.              });
  307.       } else if (msg.slice(0, 4) === 'JSON') {
  308.          const obj = parse(msg.slice(4));
  309.          this.redrawObject(obj);
  310.       } else if (msg.slice(0, 9) === 'REPL_REQ:')
  311.          this.processDrawableReply(msg.slice(9));
  312.        else if (msg.slice(0, 4) === 'CMD:') {
  313.          msg = msg.slice(4);
  314.          const p1 = msg.indexOf(':'),
  315.              cmdid = msg.slice(0, p1),
  316.              cmd = msg.slice(p1+1),
  317.              reply = `REPLY:${cmdid}:`;
  318.          if ((cmd === 'SVG') || (cmd === 'PNG') || (cmd === 'JPEG') || (cmd === 'WEBP') || (cmd === 'PDF')) {
  319.             this.createImage(cmd.toLowerCase())
  320.                 .then(res => handle.send(reply + res));
  321.          } else if (cmd.indexOf('ADDPANEL:') === 0) {
  322.             if (!isFunc(this.showUI5Panel))
  323.                handle.send(reply + 'false');
  324.              else {
  325.                const window_path = cmd.slice(9),
  326.                      conn = handle.createNewInstance(window_path);
  328.                // set interim receiver until first message arrives
  329.                conn.setReceiver({
  330.                   cpainter: this,
  332.                   onWebsocketOpened() {
  333.                   },
  335.                   onWebsocketMsg(panel_handle, msg2) {
  336.                      const panel_name = (msg2.indexOf('SHOWPANEL:') === 0) ? msg2.slice(10) : '';
  337.                      this.cpainter.showUI5Panel(panel_name, panel_handle)
  338.                                   .then(res => handle.send(reply + (res ? 'true' : 'false')));
  339.                   },
  341.                   onWebsocketClosed() {
  342.                      // if connection failed,
  343.                      handle.send(reply + 'false');
  344.                   },
  346.                   onWebsocketError() {
  347.                      // if connection failed,
  348.                      handle.send(reply + 'false');
  349.                   }
  351.                });
  353.                // only when connection established, panel will be activated
  354.                conn.connect();
  355.             }
  356.          } else {
  357.             console.log('Unrecognized command ' + cmd);
  358.             handle.send(reply);
  359.          }
  360.       } else if ((msg.slice(0, 7) === 'DXPROJ:') || (msg.slice(0, 7) === 'DYPROJ:')) {
  361.          const kind = msg[1],
  362.              hist = parse(msg.slice(7));
  363.          this.drawProjection(kind, hist);
  364.       } else if (msg.slice(0, 5) === 'SHOW:') {
  365.          const that = msg.slice(5),
  366.              on = that.at(-1) === '1';
  367.          this.showSection(that.slice(0, that.length - 2), on);
  368.       } else
  369.          console.log(`unrecognized msg len: ${msg.length} msg: ${msg.slice(0, 30)}`);
  370.    }
  372.    /** @summary Submit request to RDrawable object on server side */
  373.    submitDrawableRequest(kind, req, painter, method) {
  374.       if (!this.getWebsocket() || !req?._typename || !painter.snapid || !isStr(painter.snapid))
  375.          return null;
  377.       if (kind && method) {
  378.          // if kind specified - check if such request already was submitted
  379.          if (!painter._requests) painter._requests = {};
  381.          const prevreq = painter._requests[kind];
  383.          if (prevreq) {
  384.             const tm = new Date().getTime();
  385.             if (!prevreq._tm || (tm - prevreq._tm < 5000)) {
  386.                prevreq._nextreq = req; // submit when got reply
  387.                return false;
  388.             }
  389.             delete painter._requests[kind]; // let submit new request after timeout
  390.          }
  392.          painter._requests[kind] = req; // keep reference on the request
  393.       }
  395.       req.id = painter.snapid;
  397.       if (method) {
  398.          if (!this.#nextreqid) this.#nextreqid = 1;
  399.          req.reqid = this.#nextreqid++;
  400.       } else
  401.          req.reqid = 0; // request will not be replied
  404.       const msg = JSON.stringify(req);
  406.       if (req.reqid) {
  407.          req._kind = kind;
  408.          req._painter = painter;
  409.          req._method = method;
  410.          req._tm = new Date().getTime();
  412.          this.#submreq[req.reqid] = req; // fast access to submitted requests
  413.       }
  415.       this.sendWebsocket('REQ:' + msg);
  416.       return req;
  417.    }
  419.    /** @summary Submit menu request
  420.      * @private */
  421.    async submitMenuRequest(painter, menukind, reqid) {
  422.       return new Promise(resolveFunc => {
  423.          this.submitDrawableRequest('', {
  424.             _typename: `${nsREX}RDrawableMenuRequest`,
  425.             menukind: menukind || '',
  426.             menureqid: reqid // used to identify menu request
  427.          }, painter, resolveFunc);
  428.       });
  429.    }
  431.    /** @summary Submit executable command for given painter */
  432.    submitExec(painter, exec, subelem) {
  433.       if (subelem && isStr(subelem)) {
  434.          const len = subelem.length;
  435.          if ((len > 2) && (subelem.indexOf('#x') === len - 2)) subelem = 'x'; else
  436.          if ((len > 2) && (subelem.indexOf('#y') === len - 2)) subelem = 'y'; else
  437.          if ((len > 2) && (subelem.indexOf('#z') === len - 2)) subelem = 'z';
  439.          if ((subelem === 'x') || (subelem === 'y') || (subelem === 'z'))
  440.             exec = subelem + 'axis#' + exec;
  441.          else
  442.             return console.log(`not recoginzed subelem ${subelem} in submitExec`);
  443.        }
  445.       this.submitDrawableRequest('', { _typename: `${nsREX}RDrawableExecRequest`, exec }, painter);
  446.    }
  448.    /** @summary Process reply from request to RDrawable */
  449.    processDrawableReply(msg) {
  450.       const reply = parse(msg);
  451.       if (!reply?.reqid) return false;
  453.       const req = this.#submreq[reply.reqid];
  454.       if (!req) return false;
  456.       // remove reference first
  457.       this.#submreq[reply.reqid] = undefined;
  459.       // remove blocking reference for that kind
  460.       if (req._kind && req._painter?._requests) {
  461.          if (req._painter._requests[req._kind] === req)
  462.             delete req._painter._requests[req._kind];
  463.       }
  465.       if (req._method)
  466.          req._method(reply, req);
  468.       // resubmit last request of that kind
  469.       if (req._nextreq && !req._painter._requests[req._kind])
  470.          this.submitDrawableRequest(req._kind, req._nextreq, req._painter, req._method);
  471.    }
  473.    /** @summary Show specified section in canvas */
  474.    async showSection(that, on) {
  475.       switch (that) {
  476.          case 'Menu': break;
  477.          case 'StatusBar': break;
  478.          case 'Editor': break;
  479.          case 'ToolBar': break;
  480.          case 'ToolTips': this.setTooltipAllowed(on); break;
  481.       }
  482.       return true;
  483.    }
  485.    /** @summary Method informs that something was changed in the canvas
  486.      * @desc used to update information on the server (when used with web6gui)
  487.      * @private */
  488.    processChanges(kind, painter, subelem) {
  489.       // check if we could send at least one message more - for some meaningful actions
  490.       if (!this.canSendWebsocket(2) || !isStr(kind))
  491.          return;
  493.       const msg = '';
  494.       if (!painter) painter = this;
  495.       switch (kind) {
  496.          case 'sbits':
  497.             console.log('Status bits in RCanvas are changed - that to do?');
  498.             break;
  499.          case 'frame': // when moving frame
  500.          case 'zoom':  // when changing zoom inside frame
  501.             console.log('Frame moved or zoom is changed - that to do?');
  502.             break;
  503.          case 'pave_moved':
  504.             console.log('TPave is moved inside RCanvas - that to do?');
  505.             break;
  506.          default:
  507.             if ((kind.slice(0, 5) === 'exec:') && painter?.snapid)
  508.                this.submitExec(painter, kind.slice(5), subelem);
  509.              else
  510.                console.log('UNPROCESSED CHANGES', kind);
  511.       }
  513.       if (msg)
  514.          console.log('RCanvas::processChanges want to send  ' + msg.length + '  ' + msg.slice(0, 40));
  515.    }
  517.    /** @summary Handle pad button click event
  518.      * @private */
  519.    clickPadButton(funcname, evnt) {
  520.       if (funcname === 'ToggleGed')
  521.          return this.activateGed(this, null, 'toggle');
  522.       if (funcname === 'ToggleStatus')
  523.          return this.activateStatusBar('toggle');
  524.       return super.clickPadButton(funcname, evnt);
  525.    }
  527.    /** @summary returns true when event status area exist for the canvas */
  528.    hasEventStatus() {
  529.       if (this.testUI5()) return false;
  530.       if (this.brlayout)
  531.          return this.brlayout.hasStatus();
  532.       const hp = getHPainter();
  533.       return hp ? hp.hasStatusLine() : false;
  534.    }
  536.    /** @summary Check if status bar can be toggled
  537.      * @private */
  538.    canStatusBar() {
  539.       return this.testUI5() || this.brlayout || getHPainter();
  540.    }
  542.    /** @summary Show/toggle event status bar
  543.      * @private */
  544.    activateStatusBar(state) {
  545.       if (this.testUI5())
  546.          return;
  547.       if (this.brlayout)
  548.          this.brlayout.createStatusLine(23, state);
  549.       else
  550.          getHPainter()?.createStatusLine(23, state);
  552.       this.processChanges('sbits', this);
  553.    }
  555.    /** @summary Show online canvas status
  556.      * @private */
  557.    showCanvasStatus(...msgs) {
  558.       if (this.testUI5()) return;
  560.       const br = this.brlayout || getHPainter()?.brlayout;
  562.       br?.showStatus(...msgs);
  563.    }
  565.    /** @summary Returns true if GED is present on the canvas */
  566.    hasGed() {
  567.       if (this.testUI5()) return false;
  568.       return this.brlayout?.hasContent() ?? false;
  569.    }
  571.    /** @summary Function used to de-activate GED
  572.      * @private */
  573.    removeGed() {
  574.       if (this.testUI5()) return;
  576.       this.registerForPadEvents(null);
  578.       if (this.ged_view) {
  579.          this.ged_view.getController().cleanupGed();
  580.          this.ged_view.destroy();
  581.          delete this.ged_view;
  582.       }
  583.       this.brlayout?.deleteContent(true);
  584.       this.processChanges('sbits', this);
  585.    }
  587.    /** @summary Get view data for ui5 panel
  588.      * @private */
  589.    getUi5PanelData(/* panel_name */) {
  590.       return { jsroot: { settings, create, parse, toJSON, loadScript, EAxisBits, getColorExec } };
  591.    }
  593.    /** @summary Function used to activate GED
  594.      * @return {Promise} when GED is there
  595.      * @private */
  596.    async activateGed(objpainter, kind, mode) {
  597.       if (this.testUI5() || !this.brlayout)
  598.          return false;
  600.       if (this.brlayout.hasContent()) {
  601.          if ((mode === 'toggle') || (mode === false))
  602.             this.removeGed();
  603.          else
  604.             objpainter?.getPadPainter()?.selectObjectPainter(objpainter);
  606.          return true;
  607.       }
  609.       if (mode === false)
  610.          return false;
  612.       const btns = this.brlayout.createBrowserBtns();
  614.       ToolbarIcons.createSVG(btns, ToolbarIcons.diamand, 15, 'toggle fix-pos mode', 'browser')
  615.                   .style('margin', '3px').on('click', () => this.brlayout.toggleKind('fix'));
  617.       ToolbarIcons.createSVG(btns, ToolbarIcons.circle, 15, 'toggle float mode', 'browser')
  618.                   .style('margin', '3px').on('click', () => this.brlayout.toggleKind('float'));
  620.       ToolbarIcons.createSVG(btns, ToolbarIcons.cross, 15, 'delete GED', 'browser')
  621.                   .style('margin', '3px').on('click', () => this.removeGed());
  623.       // be aware, that jsroot_browser_hierarchy required for flexible layout that element use full browser area
  624.       this.brlayout.setBrowserContent('<div class=\'jsroot_browser_hierarchy\' id=\'ged_placeholder\'>Loading GED ...</div>');
  625.       this.brlayout.setBrowserTitle('GED');
  626.       this.brlayout.toggleBrowserKind(kind || 'float');
  628.       return new Promise(resolveFunc => {
  629.          loadOpenui5.then(sap => {
  630.             d3_select('#ged_placeholder').text('');
  632.             sap.ui.require(['sap/ui/model/json/JSONModel', 'sap/ui/core/mvc/XMLView'], (JSONModel, XMLView) => {
  633.                const oModel = new JSONModel({ handle: null });
  635.                XMLView.create({
  636.                   viewName: 'rootui5.canv.view.Ged',
  637.                   viewData: this.getUi5PanelData('Ged')
  638.                }).then(oGed => {
  639.                   oGed.setModel(oModel);
  641.                   oGed.placeAt('ged_placeholder');
  643.                   this.ged_view = oGed;
  645.                   // TODO: should be moved into Ged controller - it must be able to detect canvas painter itself
  646.                   this.registerForPadEvents(oGed.getController().padEventsReceiver.bind(oGed.getController()));
  648.                   objpainter?.getPadPainter()?.selectObjectPainter(objpainter);
  650.                   this.processChanges('sbits', this);
  652.                   resolveFunc(true);
  653.                });
  654.             });
  655.          });
  656.       });
  657.    }
  659.    /** @summary produce JSON for RCanvas, which can be used to display canvas once again
  660.      * @private */
  661.    produceJSON() {
  662.       console.error('RCanvasPainter.produceJSON not yet implemented');
  663.       return '';
  664.    }
  666.    /** @summary resize browser window to get requested canvas sizes */
  667.    resizeBrowser(fullW, fullH) {
  668.       if (!fullW || !fullH || this.isBatchMode() || this.embed_canvas || this.batch_mode)
  669.          return;
  670.       this.getWebsocket()?.resizeWindow(fullW, fullH);
  671.    }
  673.    /** @summary draw RCanvas object */
  674.    static async draw(dom, can, opt) {
  675.       const nocanvas = !can;
  676.       if (nocanvas)
  677.          can = create(`${nsREX}RCanvas`);
  679.       const painter = new RCanvasPainter(dom, can, opt);
  680.       painter.createCanvasSvg(0);
  682.       selectActivePad({ pp: painter, active: false });
  684.       return painter.drawPrimitives().then(() => {
  685.          painter.addPadInteractive();
  686.          painter.addPadButtons();
  687.          painter.showPadButtons();
  688.          return painter;
  689.       });
  690.    }
  692. } // class RCanvasPainter
  695. /** @summary draw RPadSnapshot object
  696.   * @private */
  697. function drawRPadSnapshot(dom, snap, opt) {
  698.    const painter = new RCanvasPainter(dom, null, opt);
  699.    painter.batch_mode = isBatchMode();
  700.    return painter.syncDraw(true).then(() => painter.redrawPadSnap(snap)).then(() => {
  701.       painter.confirmDraw();
  702.       painter.showPadButtons();
  703.       return painter;
  704.    });
  705. }
  707. /** @summary Ensure RCanvas and RFrame for the painter object
  708.   * @param {Object} painter  - painter object to process
  709.   * @param {string|boolean} frame_kind  - false for no frame or '3d' for special 3D mode
  710.   * @desc Assigns DOM, creates and draw RCanvas and RFrame if necessary, add painter to pad list of painters
  711.   * @return {Promise} for ready
  712.   * @private */
  713. async function ensureRCanvas(painter, frame_kind) {
  714.    if (!painter)
  715.       return Promise.reject(Error('Painter not provided in ensureRCanvas'));
  717.    // simple check - if canvas there, can use painter
  718.    const pr = painter.getCanvSvg().empty() ? RCanvasPainter.draw(painter.getDom(), null /* noframe */) : Promise.resolve(true);
  720.    return pr.then(() => {
  721.       if ((frame_kind !== false) && painter.getFrameSvg().selectChild('.main_layer').empty())
  722.          return RFramePainter.draw(painter.getDom(), null, isStr(frame_kind) ? frame_kind : '');
  723.    }).then(() => {
  724.       painter.addToPadPrimitives();
  725.       return painter;
  726.    });
  727. }
  730. /** @summary Function used for direct draw of RFrameTitle
  731.   * @private */
  732. function drawRFrameTitle(reason, drag) {
  733.    const fp = this.getFramePainter();
  734.    if (!fp)
  735.       return console.log('no frame painter - no title');
  737.    const rect = fp.getFrameRect(),
  738.          fx = rect.x,
  739.          fy = rect.y,
  740.          fw = rect.width,
  741.          // fh           = rect.height,
  742.          ph = this.getPadPainter().getPadHeight(),
  743.          title = this.getObject(),
  744.          title_width = fw,
  745.          textFont = this.v7EvalFont('text', { size: 0.07, color: 'black', align: 22 });
  746.    let title_margin = this.v7EvalLength('margin', ph, 0.02),
  747.        title_height = this.v7EvalLength('height', ph, 0.05);
  749.    if (reason === 'drag') {
  750.       title_height = drag.height;
  751.       title_margin = fy - drag.y - drag.height;
  752.       const changes = {};
  753.       this.v7AttrChange(changes, 'margin', title_margin / ph);
  754.       this.v7AttrChange(changes, 'height', title_height / ph);
  755.       this.v7SendAttrChanges(changes, false); // do not invoke canvas update on the server
  756.    }
  758.    this.createG();
  760.    makeTranslate(this.draw_g, fx, Math.round(fy-title_margin-title_height));
  762.    return this.startTextDrawingAsync(textFont, 'font').then(() => {
  763.       this.drawText({ x: title_width/2, y: title_height/2, text: title.fText, latex: 1 });
  764.       return this.finishTextDrawing();
  765.    }).then(() => {
  766.       addDragHandler(this, { x: fx, y: Math.round(fy-title_margin-title_height), width: title_width, height: title_height,
  767.                              minwidth: 20, minheight: 20, no_change_x: true, redraw: d => this.redraw('drag', d) });
  768.    });
  769. }
  771. // ==========================================================
  773. registerMethods(`${nsREX}RPalette`, {
  775.    extractRColor(rcolor) {
  776.       const col = rcolor.fColor || 'black';
  777.       return convertColor(col);
  778.    },
  780.    getColor(indx) {
  781.       return this.palette[indx];
  782.    },
  784.    getContourIndex(zc) {
  785.       const cntr = this.fContour;
  786.       let l = 0, r = cntr.length - 1;
  788.       if (zc < cntr[0])
  789.          return -1;
  790.       if (zc >= cntr[r])
  791.          return r - 1;
  793.       if (this.fCustomContour) {
  794.          while (l < r - 1) {
  795.             const mid = Math.round((l+r)/2);
  796.             if (cntr[mid] > zc)
  797.                r = mid;
  798.             else
  799.                l = mid;
  800.          }
  801.          return l;
  802.       }
  804.       // last color in palette starts from level cntr[r-1]
  805.       return Math.floor((zc-cntr[0]) / (cntr[r-1] - cntr[0]) * (r-1));
  806.    },
  808.    getContourColor(zc) {
  809.       const zindx = this.getContourIndex(zc);
  810.       return (zindx < 0) ? '' : this.getColor(zindx);
  811.    },
  813.    getContour() {
  814.       return this.fContour && (this.fContour.length > 1) ? this.fContour : null;
  815.    },
  817.    deleteContour() {
  818.       delete this.fContour;
  819.    },
  821.    calcColor(value, entry1, entry2) {
  822.       const dist = entry2.fOrdinal - entry1.fOrdinal,
  823.             r1 = entry2.fOrdinal - value,
  824.             r2 = value - entry1.fOrdinal;
  826.       if (!this.fInterpolate || (dist <= 0))
  827.          return convertColor((r1 < r2) ? entry2.fColor : entry1.fColor);
  829.       // interpolate
  830.       const col1 = d3_rgb(this.extractRColor(entry1.fColor)),
  831.             col2 = d3_rgb(this.extractRColor(entry2.fColor)),
  832.             color = d3_rgb(Math.round((col1.r*r1 + col2.r*r2)/dist),
  833.                            Math.round((col1.g*r1 + col2.g*r2)/dist),
  834.                            Math.round((col1.b*r1 + col2.b*r2)/dist));
  836.       return color.formatRgb();
  837.    },
  839.    createPaletteColors(len) {
  840.       const arr = [];
  841.       let indx = 0;
  843.       while (arr.length < len) {
  844.          const value = arr.length / (len-1),
  846.           entry = this.fColors[indx];
  848.          if ((Math.abs(entry.fOrdinal - value) < 0.0001) || (indx === this.fColors.length - 1)) {
  849.             arr.push(this.extractRColor(entry.fColor));
  850.             continue;
  851.          }
  853.          const next = this.fColors[indx+1];
  854.          if (next.fOrdinal <= value)
  855.             indx++;
  856.          else
  857.             arr.push(this.calcColor(value, entry, next));
  858.       }
  860.       return arr;
  861.    },
  863.    getColorOrdinal(value) {
  864.       // extract color with ordinal value between 0 and 1
  865.       if (!this.fColors)
  866.          return 'black';
  867.       if ((typeof value !== 'number') || (value < 0))
  868.          value = 0;
  869.       else if (value > 1)
  870.          value = 1;
  872.       // TODO: implement better way to find index
  874.       let entry, next = this.fColors[0];
  875.       for (let indx = 0; indx < this.fColors.length - 1; ++indx) {
  876.          entry = next;
  878.          if (Math.abs(entry.fOrdinal - value) < 0.0001)
  879.             return this.extractRColor(entry.fColor);
  881.          next = this.fColors[indx+1];
  882.          if (next.fOrdinal > value)
  883.             return this.calcColor(value, entry, next);
  884.       }
  886.       return this.extractRColor(next.fColor);
  887.    },
  889.    setFullRange(min, max) {
  890.       // set full z scale range, used in zooming
  891.       this.full_min = min;
  892.       this.full_max = max;
  893.    },
  895.    createContour(logz, nlevels, zmin, zmax, zminpositive) {
  896.       this.fContour = [];
  897.       delete this.fCustomContour;
  898.       this.colzmin = zmin;
  899.       this.colzmax = zmax;
  901.       if (logz) {
  902.          if (this.colzmax <= 0) this.colzmax = 1.0;
  903.          if (this.colzmin <= 0) {
  904.             if ((zminpositive === undefined) || (zminpositive <= 0))
  905.                this.colzmin = 0.0001*this.colzmax;
  906.             else
  907.                this.colzmin = ((zminpositive < 3) || (zminpositive>100)) ? 0.3*zminpositive : 1;
  908.          }
  909.          if (this.colzmin >= this.colzmax)
  910.             this.colzmin = 0.0001*this.colzmax;
  912.          const logmin = Math.log(this.colzmin)/Math.log(10),
  913.              logmax = Math.log(this.colzmax)/Math.log(10),
  914.              dz = (logmax-logmin)/nlevels;
  915.          this.fContour.push(this.colzmin);
  916.          for (let level=1; level<nlevels; level++)
  917.             this.fContour.push(Math.exp((logmin + dz*level)*Math.log(10)));
  918.          this.fContour.push(this.colzmax);
  919.          this.fCustomContour = true;
  920.       } else {
  921.          if ((this.colzmin === this.colzmax) && this.colzmin) {
  922.             this.colzmax += 0.01*Math.abs(this.colzmax);
  923.             this.colzmin -= 0.01*Math.abs(this.colzmin);
  924.          }
  925.          const dz = (this.colzmax-this.colzmin)/nlevels;
  926.          for (let level=0; level<=nlevels; level++)
  927.             this.fContour.push(this.colzmin + dz*level);
  928.       }
  930.       if (!this.palette || (this.palette.length !== nlevels))
  931.          this.palette = this.createPaletteColors(nlevels);
  932.    }
  934. });
  936. /** @summary draw RFont object
  937.   * @private */
  938. function drawRFont() {
  939.    const font = this.getObject(),
  940.          svg = this.getCanvSvg(),
  941.          clname = 'custom_font_' + font.fFamily+font.fWeight+font.fStyle;
  942.    let defs = svg.selectChild('.canvas_defs');
  944.    if (defs.empty())
  945.       defs = svg.insert('svg:defs', ':first-child').attr('class', 'canvas_defs');
  947.    let entry = defs.selectChild('.' + clname);
  948.    if (entry.empty()) {
  949.       entry = defs.append('style')
  950.                   .attr('type', 'text/css')
  951.                   .attr('class', clname)
  952.                   .text(`@font-face { font-family: "${font.fFamily}"; font-weight: ${font.fWeight ? font.fWeight : 'normal'}; font-style: ${font.fStyle ? font.fStyle : 'normal'}; src: ${font.fSrc}; }`);
  953.       const p1 = font.fSrc.indexOf('base64,'),
  954.             p2 = font.fSrc.lastIndexOf(' format(');
  955.       if (p1 > 0 && p2 > p1) {
  956.          const base64 = font.fSrc.slice(p1 + 7, p2 - 2),
  957.                is_ttf = font.fSrc.indexOf('data:application/font-ttf') > 0;
  958.          // TODO: for the moment only ttf format supported by jsPDF
  959.          if (is_ttf)
  960.             entry.property('$fontcfg', { n: font.fFamily, base64 });
  961.       }
  962.    }
  964.    if (font.fDefault)
  965.       this.getPadPainter()._dfltRFont = font;
  967.    return true;
  968. }
  970. /** @summary draw RAxis object
  971.   * @private */
  972. function drawRAxis(dom, obj, opt) {
  973.    const painter = new RAxisPainter(dom, obj, opt);
  974.    painter.disable_zooming = true;
  975.    return ensureRCanvas(painter, false)
  976.            .then(() => painter.redraw())
  977.            .then(() => painter);
  978. }
  980. /** @summary draw RFrame object
  981.   * @private */
  982. function drawRFrame(dom, obj, opt) {
  983.    const p = new RFramePainter(dom, obj);
  984.    if (opt === '3d') p.mode3d = true;
  985.    return ensureRCanvas(p, false).then(() => p.redraw());
  986. }
  988. export { ensureRCanvas, drawRPadSnapshot,
  989.          drawRFrameTitle, drawRFont, drawRAxis, drawRFrame,
  990.          RObjectPainter, RPadPainter, RCanvasPainter };