draw/more.mjs

  1. import { BIT, isFunc, clTLatex, clTLink, clTMathText, clTAnnotation } from '../core.mjs';
  2. import { BasePainter, makeTranslate, DrawOptions } from '../base/BasePainter.mjs';
  3. import { addMoveHandler } from '../gui/utils.mjs';
  4. import { assignContextMenu } from '../gui/menu.mjs';
  7. /** @summary Draw TText
  8.   * @private */
  9. async function drawText() {
  10.    const text = this.getObject(),
  11.          pp = this.getPadPainter(),
  12.          fp = this.getFramePainter(),
  13.          is_url = text.fName.startsWith('http://') || text.fName.startsWith('https://');
  14.    let pos_x = text.fX, pos_y = text.fY, use_frame = false,
  15.        fact = 1,
  16.        annot = this.matchObjectType(clTAnnotation);
  18.    this.createAttText({ attr: text });
  20.    if (annot && fp?.mode3d && isFunc(fp?.convert3DtoPadNDC)) {
  21.       const pos = fp.convert3DtoPadNDC(text.fX, text.fY, text.fZ);
  22.       pos_x = pos.x;
  23.       pos_y = pos.y;
  24.       this.isndc = true;
  25.       annot = '3d';
  26.    } else if (text.TestBit(BIT(14))) {
  27.       // NDC coordinates
  28.       this.isndc = true;
  29.    } else if (pp.getRootPad(true)) {
  30.       // force pad coordinates
  31.       const d = new DrawOptions(this.getDrawOpt());
  32.       use_frame = d.check('FRAME');
  33.    } else {
  34.       // place in the middle
  35.       this.isndc = true;
  36.       pos_x = pos_y = 0.5;
  37.       text.fTextAlign = 22;
  38.    }
  40.    this.createG(use_frame ? 'frame2d' : undefined, is_url);
  42.    this.draw_g.attr('transform', null); // remove transform from interactive changes
  44.    this.pos_x = this.axisToSvg('x', pos_x, this.isndc);
  45.    this.pos_y = this.axisToSvg('y', pos_y, this.isndc);
  46.    this.swap_xy = use_frame && fp?.swap_xy;
  48.    if (this.swap_xy)
  49.       [this.pos_x, this.pos_y] = [this.pos_y, this.pos_x];
  51.    const arg = this.textatt.createArg({ x: this.pos_x, y: this.pos_y, text: text.fTitle, latex: 0 });
  53.    if ((text._typename === clTLatex) || annot)
  54.       arg.latex = 1;
  55.    else if (text._typename === clTMathText) {
  56.       arg.latex = 2;
  57.       fact = 0.8;
  58.    }
  60.    if (is_url) {
  61.       this.draw_g.attr('href', text.fName);
  62.       if (!this.isBatchMode())
  63.          this.draw_g.append('svg:title').text(`link on ${text.fName}`);
  64.    }
  66.    return this.startTextDrawingAsync(this.textatt.font, this.textatt.getSize(pp, fact /* , 0.05 */))
  67.               .then(() => this.drawText(arg))
  68.               .then(() => this.finishTextDrawing())
  69.               .then(() => {
  70.       if (this.isBatchMode())
  71.          return this;
  73.       if (pp.isButton() && !pp.isEditable()) {
  74.          this.draw_g.on('click', () => this.getCanvPainter().selectActivePad(pp));
  75.          return this;
  76.       }
  78.       this.pos_dx = this.pos_dy = 0;
  80.       if (!this.moveDrag) {
  81.          this.moveDrag = function(dx, dy) {
  82.             this.pos_dx += dx;
  83.             this.pos_dy += dy;
  84.             makeTranslate(this.draw_g, this.pos_dx, this.pos_dy);
  85.          };
  86.       }
  88.       if (!this.moveEnd) {
  89.          this.moveEnd = function(not_changed) {
  90.             if (not_changed) return;
  91.             const txt = this.getObject();
  92.             let fx = this.svgToAxis('x', this.pos_x + this.pos_dx, this.isndc),
  93.                 fy = this.svgToAxis('y', this.pos_y + this.pos_dy, this.isndc);
  94.             if (this.swap_xy)
  95.                [fx, fy] = [fy, fx];
  97.             txt.fX = fx;
  98.             txt.fY = fy;
  99.             this.submitCanvExec(`SetX(${fx});;SetY(${fy});;`);
  100.          };
  101.       }
  103.       if (annot !== '3d')
  104.          addMoveHandler(this, true, is_url);
  105.       else {
  106.          fp.processRender3D = true;
  107.          this.handleRender3D = () => {
  108.             const pos = fp.convert3DtoPadNDC(text.fX, text.fY, text.fZ),
  109.                   new_x = this.axisToSvg('x', pos.x, true),
  110.                   new_y = this.axisToSvg('y', pos.y, true);
  111.             makeTranslate(this.draw_g, new_x - this.pos_x, new_y - this.pos_y);
  112.          };
  113.       }
  115.       assignContextMenu(this);
  117.       this.fillContextMenuItems = function(menu) {
  118.          menu.add('Change text', () => menu.input('Enter new text', text.fTitle).then(t => {
  119.             text.fTitle = t;
  120.             this.interactiveRedraw('pad', `exec:SetTitle("${t}")`);
  121.          }));
  122.       };
  124.       if (this.matchObjectType(clTLink)) {
  125.          this.draw_g.style('cursor', 'pointer')
  126.                     .on('click', () => this.submitCanvExec('ExecuteEvent(kButton1Up, 0, 0);;'));
  127.       }
  129.       return this;
  130.    });
  131. }
  133. /** @summary Draw TEllipse
  134.   * @private */
  135. function drawEllipse() {
  136.    const ellipse = this.getObject(),
  137.          closed_ellipse = (ellipse.fPhimin === 0) && (ellipse.fPhimax === 360),
  138.          is_crown = (ellipse._typename === 'TCrown');
  140.    this.createAttLine({ attr: ellipse });
  141.    this.createAttFill({ attr: ellipse });
  143.    this.createG();
  145.    const funcs = this.getAxisToSvgFunc(),
  146.          x = funcs.x(ellipse.fX1),
  147.          y = funcs.y(ellipse.fY1),
  148.          rx = is_crown && (ellipse.fR1 <= 0) ? (funcs.x(ellipse.fX1 + ellipse.fR2) - x) : (funcs.x(ellipse.fX1 + ellipse.fR1) - x),
  149.          ry = y - funcs.y(ellipse.fY1 + ellipse.fR2),
  150.          dr = Math.PI/180;
  152.    let path = '';
  154.    if (is_crown && (ellipse.fR1 > 0)) {
  155.       const ratio = ellipse.fYXRatio ?? 1,
  156.             rx1 = rx, ry2 = ratio * ry,
  157.             ry1 = ratio * (y - funcs.y(ellipse.fY1 + ellipse.fR1)),
  158.             rx2 = funcs.x(ellipse.fX1 + ellipse.fR2) - x;
  160.       if (closed_ellipse) {
  161.          path = `M${-rx1},0A${rx1},${ry1},0,1,0,${rx1},0A${rx1},${ry1},0,1,0,${-rx1},0` +
  162.                 `M${-rx2},0A${rx2},${ry2},0,1,0,${rx2},0A${rx2},${ry2},0,1,0,${-rx2},0`;
  163.       } else {
  164.          const large_arc = (ellipse.fPhimax-ellipse.fPhimin>=180) ? 1 : 0,
  165.                a1 = ellipse.fPhimin*dr, a2 = ellipse.fPhimax*dr,
  166.                dx1 = Math.round(rx1*Math.cos(a1)), dy1 = Math.round(ry1*Math.sin(a1)),
  167.                dx2 = Math.round(rx1*Math.cos(a2)), dy2 = Math.round(ry1*Math.sin(a2)),
  168.                dx3 = Math.round(rx2*Math.cos(a1)), dy3 = Math.round(ry2*Math.sin(a1)),
  169.                dx4 = Math.round(rx2*Math.cos(a2)), dy4 = Math.round(ry2*Math.sin(a2));
  171.          path = `M${dx2},${dy2}A${rx1},${ry1},0,${large_arc},0,${dx1},${dy1}` +
  172.                 `L${dx3},${dy3}A${rx2},${ry2},0,${large_arc},1,${dx4},${dy4}Z`;
  173.       }
  174.    } else if (ellipse.fTheta === 0) {
  175.       if (closed_ellipse)
  176.          path = `M${-rx},0A${rx},${ry},0,1,0,${rx},0A${rx},${ry},0,1,0,${-rx},0Z`;
  177.       else {
  178.          const x1 = Math.round(rx * Math.cos(ellipse.fPhimin*dr)),
  179.                y1 = Math.round(ry * Math.sin(ellipse.fPhimin*dr)),
  180.                x2 = Math.round(rx * Math.cos(ellipse.fPhimax*dr)),
  181.                y2 = Math.round(ry * Math.sin(ellipse.fPhimax*dr));
  182.          path = `M0,0L${x1},${y1}A${rx},${ry},0,1,1,${x2},${y2}Z`;
  183.       }
  184.    } else {
  185.       const ct = Math.cos(ellipse.fTheta*dr),
  186.             st = Math.sin(ellipse.fTheta*dr),
  187.             phi1 = ellipse.fPhimin*dr,
  188.             phi2 = ellipse.fPhimax*dr,
  189.             np = 200,
  190.             dphi = (phi2-phi1) / (np - (closed_ellipse ? 0 : 1));
  191.       let lastx = 0, lasty = 0;
  192.       if (!closed_ellipse) path = 'M0,0';
  193.       for (let n = 0; n < np; ++n) {
  194.          const angle = phi1 + n*dphi,
  195.                dx = ellipse.fR1 * Math.cos(angle),
  196.                dy = ellipse.fR2 * Math.sin(angle),
  197.                px = funcs.x(ellipse.fX1 + dx*ct - dy*st) - x,
  198.                py = funcs.y(ellipse.fY1 + dx*st + dy*ct) - y;
  199.          if (!path)
  200.             path = `M${px},${py}`;
  201.          else if (lastx === px)
  202.             path += `v${py-lasty}`;
  203.          else if (lasty === py)
  204.             path += `h${px-lastx}`;
  205.          else
  206.             path += `l${px-lastx},${py-lasty}`;
  207.          lastx = px; lasty = py;
  208.       }
  209.       path += 'Z';
  210.    }
  212.    this.x = x;
  213.    this.y = y;
  215.    makeTranslate(this.draw_g.append('svg:path'), x, y)
  216.       .attr('d', path)
  217.       .call(this.lineatt.func)
  218.       .call(this.fillatt.func);
  220.    assignContextMenu(this);
  222.    addMoveHandler(this);
  224.    this.moveDrag = function(dx, dy) {
  225.       this.x += dx;
  226.       this.y += dy;
  227.       makeTranslate(this.draw_g.select('path'), this.x, this.y);
  228.    };
  230.    this.moveEnd = function(not_changed) {
  231.       if (not_changed) return;
  232.       const ell = this.getObject();
  233.       ell.fX1 = this.svgToAxis('x', this.x);
  234.       ell.fY1 = this.svgToAxis('y', this.y);
  235.       this.submitCanvExec(`SetX1(${ell.fX1});;SetY1(${ell.fY1});;Notify();;`);
  236.    };
  237. }
  239. /** @summary Draw TPie
  240.   * @private */
  241. function drawPie() {
  242.    this.createG();
  244.    const pie = this.getObject(),
  245.          nb = pie.fPieSlices.length,
  246.          xc = this.axisToSvg('x', pie.fX),
  247.          yc = this.axisToSvg('y', pie.fY),
  248.          rx = this.axisToSvg('x', pie.fX + pie.fRadius) - xc,
  249.          ry = this.axisToSvg('y', pie.fY + pie.fRadius) - yc;
  251.    makeTranslate(this.draw_g, xc, yc);
  253.    // Draw the slices
  254.    let total = 0,
  255.        af = (pie.fAngularOffset*Math.PI)/180,
  256.        x1 = Math.round(rx*Math.cos(af)),
  257.        y1 = Math.round(ry*Math.sin(af));
  259.    for (let n = 0; n < nb; n++)
  260.       total += pie.fPieSlices[n].fValue;
  262.    for (let n = 0; n < nb; n++) {
  263.       const slice = pie.fPieSlices[n];
  265.       this.createAttLine({ attr: slice });
  266.       this.createAttFill({ attr: slice });
  268.       af += slice.fValue/total*2*Math.PI;
  269.       const x2 = Math.round(rx*Math.cos(af)),
  270.             y2 = Math.round(ry*Math.sin(af));
  272.       this.draw_g
  273.           .append('svg:path')
  274.           .attr('d', `M0,0L${x1},${y1}A${rx},${ry},0,0,0,${x2},${y2}z`)
  275.           .call(this.lineatt.func)
  276.           .call(this.fillatt.func);
  277.       x1 = x2; y1 = y2;
  278.    }
  279. }
  281. /** @summary Draw TMarker
  282.   * @private */
  283. function drawMarker() {
  284.    const marker = this.getObject(),
  285.          kMarkerNDC = BIT(14);
  287.    this.isndc = marker.TestBit(kMarkerNDC);
  289.    const use_frame = this.isndc ? false : new DrawOptions(this.getDrawOpt()).check('FRAME'),
  290.          swap_xy = use_frame && this.getFramePainter()?.swap_xy;
  292.    this.createAttMarker({ attr: marker });
  294.    this.createG(use_frame ? 'frame2d' : undefined);
  296.    let x = this.axisToSvg('x', marker.fX, this.isndc),
  297.        y = this.axisToSvg('y', marker.fY, this.isndc);
  298.    if (swap_xy)
  299.       [x, y] = [y, x];
  301.    const path = this.markeratt.create(x, y);
  303.    if (path) {
  304.       this.draw_g.append('svg:path')
  305.           .attr('d', path)
  306.           .call(this.markeratt.func);
  307.    }
  309.    assignContextMenu(this);
  311.    addMoveHandler(this);
  313.    this.dx = this.dy = 0;
  315.    this.moveDrag = function(dx, dy) {
  316.       this.dx += dx;
  317.       this.dy += dy;
  318.       makeTranslate(this.draw_g.select('path'), this.dx, this.dy);
  319.    };
  321.    this.moveEnd = function(not_changed) {
  322.       if (not_changed) return;
  323.       const mrk = this.getObject();
  324.       let fx = this.svgToAxis('x', this.axisToSvg('x', mrk.fX, this.isndc) + this.dx, this.isndc),
  325.           fy = this.svgToAxis('y', this.axisToSvg('y', mrk.fY, this.isndc) + this.dy, this.isndc);
  326.       if (swap_xy)
  327.          [fx, fy] = [fy, fx];
  328.       mrk.fX = fx;
  329.       mrk.fY = fy;
  330.       this.submitCanvExec(`SetX(${fx});;SetY(${fy});;Notify();;`);
  331.       this.redraw();
  332.    };
  333. }
  335. /** @summary Draw TPolyMarker
  336.   * @private */
  337. function drawPolyMarker() {
  338.    const poly = this.getObject(),
  339.          func = this.getAxisToSvgFunc();
  341.    this.createAttMarker({ attr: poly });
  343.    this.createG();
  345.    let path = '';
  346.    for (let n = 0; n <= poly.fLastPoint; ++n)
  347.       path += this.markeratt.create(func.x(poly.fX[n]), func.y(poly.fY[n]));
  349.    if (path) {
  350.       this.draw_g.append('svg:path')
  351.           .attr('d', path)
  352.           .call(this.markeratt.func);
  353.    }
  355.    assignContextMenu(this);
  357.    addMoveHandler(this);
  359.    this.dx = this.dy = 0;
  361.    this.moveDrag = function(dx, dy) {
  362.       this.dx += dx;
  363.       this.dy += dy;
  364.       makeTranslate(this.draw_g.select('path'), this.dx, this.dy);
  365.    };
  367.    this.moveEnd = function(not_changed) {
  368.       if (not_changed) return;
  369.       const poly2 = this.getObject(),
  370.             func2 = this.getAxisToSvgFunc();
  372.       let exec = '';
  373.       for (let n = 0; n <= poly2.fLastPoint; ++n) {
  374.          const x = this.svgToAxis('x', func2.x(poly2.fX[n]) + this.dx),
  375.                y = this.svgToAxis('y', func2.y(poly2.fY[n]) + this.dy);
  376.          poly2.fX[n] = x;
  377.          poly2.fY[n] = y;
  378.          exec += `SetPoint(${n},${x},${y});;`;
  379.       }
  380.       this.submitCanvExec(exec + 'Notify();;');
  381.       this.redraw();
  382.    };
  383. }
  385. /** @summary Draw JS image
  386.   * @private */
  387. function drawJSImage(dom, obj, opt) {
  388.    const painter = new BasePainter(dom),
  389.          main = painter.selectDom(),
  390.          img = main.append('img').attr('src', obj.fName).attr('title', obj.fTitle || obj.fName);
  392.    if (opt && opt.indexOf('scale') >= 0)
  393.       img.style('width', '100%').style('height', '100%');
  394.    else if (opt && opt.indexOf('center') >= 0) {
  395.       main.style('position', 'relative');
  396.       img.attr('style', 'margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);');
  397.    }
  399.    painter.setTopPainter();
  401.    return painter;
  402. }
  404. export { drawText, drawEllipse, drawPie, drawMarker, drawPolyMarker, drawJSImage };