draw/TArrowPainter.mjs

  1. import { TLinePainter } from './TLinePainter.mjs';
  2. import { ensureTCanvas } from '../gpad/TCanvasPainter.mjs';
  5. /**
  6.  * @summary Painter for TArrow class
  7.  * @private
  8.  */
  10. class TArrowPainter extends TLinePainter {
  12.    #beg;
  13.    #mid;
  14.    #end;
  15.    #angle2; // half of angle in rad
  16.    #wsize; // arrow size
  18.    /** @summary Create line segment with rotation */
  19.    rotate(angle, x0, y0) {
  20.       let dx = this.#wsize * Math.cos(angle), dy = this.#wsize * Math.sin(angle), res = '';
  21.       if ((x0 !== undefined) && (y0 !== undefined))
  22.          res = `M${Math.round(x0-dx)},${Math.round(y0-dy)}`;
  23.       else {
  24.          dx = -dx; dy = -dy;
  25.       }
  26.       res += `l${Math.round(dx)},${Math.round(dy)}`;
  27.       if (x0 && (y0 === undefined))
  28.          res += 'z';
  29.       return res;
  30.    }
  32.    /** @summary Create SVG path for the arrow */
  33.    createPath() {
  34.       const angle = Math.atan2(this.y2 - this.y1, this.x2 - this.x1),
  35.             dlen = this.#wsize * Math.cos(this.#angle2),
  36.             dx = dlen*Math.cos(angle), dy = dlen*Math.sin(angle);
  38.       let path = '';
  39.       if (this.#beg) {
  40.          path += this.rotate(angle - Math.PI - this.#angle2, this.x1, this.y1) +
  41.                  this.rotate(angle - Math.PI + this.#angle2, this.#beg > 10);
  42.       }
  44.       if (this.#mid % 10 === 2) {
  45.          path += this.rotate(angle - Math.PI - this.#angle2, (this.x1+this.x2-dx)/2, (this.y1+this.y2-dy)/2) +
  46.                  this.rotate(angle - Math.PI + this.#angle2, this.#mid > 10);
  47.       }
  49.       if (this.#mid % 10 === 1) {
  50.          path += this.rotate(angle - this.#angle2, (this.x1+this.x2+dx)/2, (this.y1+this.y2+dy)/2) +
  51.                  this.rotate(angle + this.#angle2, this.#mid > 10);
  52.       }
  54.       if (this.#end) {
  55.          path += this.rotate(angle - this.#angle2, this.x2, this.y2) +
  56.                  this.rotate(angle + this.#angle2, this.#end > 10);
  57.       }
  59.       return `M${Math.round(this.x1 + (this.#beg > 10 ? dx : 0))},${Math.round(this.y1 + (this.#beg > 10 ? dy : 0))}` +
  60.              `L${Math.round(this.x2 - (this.#end > 10 ? dx : 0))},${Math.round(this.y2 - (this.#end > 10 ? dy : 0))}` +
  61.               path;
  62.    }
  64.    /** @summary calculate all TArrow coordinates */
  65.    prepareDraw() {
  66.       super.prepareDraw();
  68.       const arrow = this.getObject(),
  69.             oo = arrow.fOption,
  70.             rect = this.getPadPainter().getPadRect();
  72.       this.#wsize = Math.max(3, Math.round(Math.max(rect.width, rect.height) * arrow.fArrowSize * 0.8));
  73.       this.#angle2 = arrow.fAngle/2/180 * Math.PI;
  74.       this.#beg = this.#mid = this.#end = 0;
  76.       if (oo.indexOf('<') === 0)
  77.          this.#beg = (oo.indexOf('<|') === 0) ? 12 : 2;
  78.       if (oo.indexOf('->-') >= 0)
  79.          this.#mid = 1;
  80.       else if (oo.indexOf('-|>-') >= 0)
  81.          this.#mid = 11;
  82.       else if (oo.indexOf('-<-') >= 0)
  83.          this.#mid = 2;
  84.       else if (oo.indexOf('-<|-') >= 0)
  85.          this.#mid = 12;
  87.       const p1 = oo.lastIndexOf('>'), p2 = oo.lastIndexOf('|>'), len = oo.length;
  88.       if ((p1 >= 0) && (p1 === len-1))
  89.          this.#end = ((p2 >= 0) && (p2 === len-2)) ? 11 : 1;
  91.       this.createAttFill({ attr: arrow, enable: (this.#beg > 10) || (this.#end > 10) });
  92.   }
  94.    /** @summary Add extras to path for TArrow */
  95.    addExtras(elem) {
  96.       elem.call(this.fillatt.func);
  97.    }
  99.    /** @summary Draw TArrow object */
  100.    static async draw(dom, obj, opt) {
  101.       const painter = new TArrowPainter(dom, obj, opt);
  102.       return ensureTCanvas(painter, false).then(() => painter.redraw());
  103.    }
  105. } // class TArrowPainter
  107. export { TArrowPainter };