base/TAttMarkerHandler.mjs

  1. import { isObject } from '../core.mjs';
  2. import { select as d3_select } from '../d3.mjs';
  3. import { getColor } from './colors.mjs';
  6. // list of marker types which can have line widths
  7. const root_50_67 = [2, 3, 5, 4, 25, 26, 27, 28, 30, 32, 35, 36, 37, 38, 40, 42, 44, 46],
  8.     // internal recoding of root markers
  9.     root_markers = [
  10.       0, 1, 2, 3, 4,           //  0..4
  11.       5, 106, 107, 104, 1,     //  5..9
  12.       1, 1, 1, 1, 1,           // 10..14
  13.       1, 1, 1, 1, 1,           // 15..19
  14.       104, 125, 126, 132, 4,   // 20..24
  15.       25, 26, 27, 28, 130,     // 25..29
  16.       30, 3, 32, 127, 128,     // 30..34
  17.       35, 36, 37, 38, 137,     // 35..39
  18.       40, 140, 42, 142, 44,    // 40..44
  19.       144, 46, 146, 148, 149]; // 45..49
  22. /**
  23.   * @summary Handle for marker attributes
  24.   * @private
  25.   */
  27. class TAttMarkerHandler {
  29.    /** @summary constructor
  30.      * @param {object} args - attributes, see {@link TAttMarkerHandler#setArgs} for details */
  31.    constructor(args) {
  32.       this.x0 = this.y0 = 0;
  33.       this.color = 'black';
  34.       this.style = 1;
  35.       this.size = 8;
  36.       this.scale = 1;
  37.       this.stroke = true;
  38.       this.fill = true;
  39.       this.marker = '';
  40.       this.ndig = 0;
  41.       this.used = true;
  42.       this.changed = false;
  43.       this.func = this.apply.bind(this);
  44.       this.setArgs(args);
  45.       this.changed = false;
  46.    }
  48.    /** @summary Set marker attributes.
  49.      * @param {object} args - arguments can be
  50.      * @param {object} args.attr - instance of TAttrMarker (or derived class) or
  51.      * @param {string} args.color - color in HTML form like grb(1,4,5) or 'green'
  52.      * @param {number} args.style - marker style
  53.      * @param {number} args.size - marker size
  54.      * @param {number} [args.refsize] - when specified and marker size < 1, marker size will be calculated relative to that size */
  55.    setArgs(args) {
  56.       if (isObject(args) && (typeof args.fMarkerStyle === 'number')) args = { attr: args };
  58.       if (args.attr) {
  59.          args.color ??= args.painter ? args.painter.getColor(args.attr.fMarkerColor) : getColor(args.attr.fMarkerColor);
  60.          if (!args.style || (args.style < 0)) args.style = args.attr.fMarkerStyle;
  61.          args.size ??= args.attr.fMarkerSize;
  62.       }
  64.       this.color = args.color;
  65.       this.style = args.style;
  66.       this.size = args.size;
  67.       this.refsize = args.refsize;
  69.       this._configure();
  70.    }
  72.    /** @summary Set usage flag of attribute */
  73.    setUsed(flag) {
  74.       this.used = flag;
  75.    }
  77.    /** @summary Reset position, used for optimization of drawing of multiple markers
  78.     * @private */
  79.    resetPos() { this.lastx = this.lasty = null; }
  81.    /** @summary Create marker path for given position.
  82.      * @desc When drawing many elementary points, created path may depend from previously produced markers.
  83.      * @param {number} x - first coordinate
  84.      * @param {number} y - second coordinate
  85.      * @return {string} path string */
  86.    create(x, y) {
  87.       if (!this.optimized)
  88.          return `M${(x + this.x0).toFixed(this.ndig)},${(y + this.y0).toFixed(this.ndig)}${this.marker}`;
  90.       // use optimized handling with relative position
  91.       const xx = Math.round(x), yy = Math.round(y);
  92.       let mv = `M${xx},${yy}`;
  93.       if (this.lastx !== null) {
  94.          if ((xx === this.lastx) && (yy === this.lasty))
  95.             mv = ''; // pathological case, but let exclude it
  96.          else {
  97.             const m2 = `m${xx-this.lastx},${yy - this.lasty}`;
  98.             if (m2.length < mv.length) mv = m2;
  99.          }
  100.       }
  101.       this.lastx = xx + 1; this.lasty = yy;
  102.       return mv + 'h1';
  103.    }
  105.    /** @summary Returns full size of marker */
  106.    getFullSize() { return this.scale * this.size; }
  108.    /** @summary Returns approximate length of produced marker string */
  109.    getMarkerLength() { return this.marker ? this.marker.length : 10; }
  111.    /** @summary Change marker attributes.
  112.     *  @param {string} color - marker color
  113.     *  @param {number} style - marker style
  114.     *  @param {number} size - marker size */
  115.    change(color, style, size) {
  116.       this.changed = true;
  118.       if (color !== undefined) this.color = color;
  119.       if ((style !== undefined) && (style >= 0)) this.style = style;
  120.       if (size !== undefined) this.size = size;
  122.       this._configure();
  123.    }
  125.    /** @summary Prepare object to create marker
  126.      * @private */
  127.    _configure() {
  128.       this.x0 = this.y0 = 0;
  130.       if ((this.style === 1) || (this.style === 777)) {
  131.          this.fill = false;
  132.          this.marker = 'h1';
  133.          this.size = 1;
  134.          this.optimized = true;
  135.          this.resetPos();
  136.          return true;
  137.       }
  139.       this.optimized = false;
  140.       this.lwidth = 1;
  142.       let style = this.style;
  143.       if (style >= 50) {
  144.          this.lwidth = 2 + Math.floor((style - 50) / root_50_67.length);
  145.          style = root_50_67[(style - 50) % root_50_67.length];
  146.       }
  148.       const marker_kind = root_markers[style] ?? 104,
  149.             shape = marker_kind % 100;
  151.       this.fill = (marker_kind >= 100);
  153.       this.scale = this.refsize || 8; // v7 defines refsize as 1 or pad height
  155.       const size = this.getFullSize();
  157.       this.ndig = (size > 7) ? 0 : ((size > 2) ? 1 : 2);
  158.       if (shape === 30) this.ndig++; // increase precision for star
  159.       let s1 = size.toFixed(this.ndig);
  160.       const s2 = (size/2).toFixed(this.ndig),
  161.             s3 = (size/3).toFixed(this.ndig),
  162.             s4 = (size/4).toFixed(this.ndig),
  163.             s8 = (size/8).toFixed(this.ndig),
  164.             s38 = (size*3/8).toFixed(this.ndig),
  165.             s34 = (size*3/4).toFixed(this.ndig);
  167.       switch (shape) {
  168.          case 1: // dot
  169.             this.marker = 'h1';
  170.             break;
  171.          case 2: // plus
  172.             this.y0 = -size / 2;
  173.             this.marker = `v${s1}m-${s2},-${s2}h${s1}`;
  174.             break;
  175.          case 3: // asterisk
  176.             this.y0 = -size / 2;
  177.             this.marker = `v${s1}m-${s2},-${s2}h${s1}m-${s8},-${s38}l-${s34},${s34}m${s34},0l-${s34},-${s34}`;
  178.             break;
  179.          case 4: // circle
  180.             this.x0 = -parseFloat(s2);
  181.             s1 = (parseFloat(s2) * 2).toFixed(this.ndig);
  182.             this.marker = `a${s2},${s2},0,1,0,${s1},0a${s2},${s2},0,1,0,-${s1},0z`;
  183.             break;
  184.          case 5: // multiply
  185.             this.x0 = this.y0 = -3 / 8 * size;
  186.             this.marker = `l${s34},${s34}m0,-${s34}l-${s34},${s34}`;
  187.             break;
  188.          case 6: // small dot
  189.             this.x0 = -1;
  190.             this.marker = 'a1,1,0,1,0,2,0a1,1,0,1,0,-2,0z';
  191.             break;
  192.          case 7: // medium dot
  193.             this.x0 = -1.5;
  194.             this.marker = 'a1.5,1.5,0,1,0,3,0a1.5,1.5,0,1,0,-3,0z';
  195.             break;
  196.          case 25: // square
  197.             this.x0 = this.y0 = -size / 2;
  198.             this.marker = `v${s1}h${s1}v-${s1}z`;
  199.             break;
  200.          case 26: // triangle-up
  201.             this.y0 = -size / 2;
  202.             this.marker = `l-${s2},${s1}h${s1}z`;
  203.             break;
  204.          case 27: // diamond
  205.             this.y0 = -size / 2;
  206.             this.marker = `l${s3},${s2}l-${s3},${s2}l-${s3},-${s2}z`;
  207.             break;
  208.          case 28: // cross
  209.             this.x0 = this.y0 = size / 6;
  210.             this.marker = `h${s3}v-${s3}h-${s3}v-${s3}h-${s3}v${s3}h-${s3}v${s3}h${s3}v${s3}h${s3}z`;
  211.             break;
  212.          case 30: { // star
  213.             this.y0 = -size / 2;
  214.             const s56 = (size*5/6).toFixed(this.ndig), s58 = (size*5/8).toFixed(this.ndig);
  215.             this.marker = `l${s3},${s1}l-${s56},-${s58}h${s1}l-${s56},${s58}z`;
  216.             break;
  217.          }
  218.          case 32: // triangle-down
  219.             this.y0 = size / 2;
  220.             this.marker = `l-${s2},-${s1}h${s1}z`;
  221.             break;
  222.          case 35:
  223.             this.x0 = -size / 2;
  224.             this.marker = `l${s2},${s2}l${s2},-${s2}l-${s2},-${s2}zh${s1}m-${s2},-${s2}v${s1}`;
  225.             break;
  226.          case 36:
  227.             this.x0 = this.y0 = -size / 2;
  228.             this.marker = `h${s1}v${s1}h-${s1}zl${s1},${s1}m0,-${s1}l-${s1},${s1}`;
  229.             break;
  230.          case 37:
  231.             this.x0 = -size/2;
  232.             this.marker = `h${s1}l-${s4},-${s2}l-${s2},${s1}h${s2}l-${s2},-${s1}z`;
  233.             break;
  234.          case 38:
  235.             this.x0 = -size/4; this.y0 = -size/2;
  236.             this.marker = `h${s2}l${s4},${s4}v${s2}l-${s4},${s4}h-${s2}l-${s4},-${s4}v-${s2}zm${s4},0v${s1}m-${s2},-${s2}h${s1}`;
  237.             break;
  238.          case 40:
  239.             this.x0 = -size/4; this.y0 = -size/2;
  240.             this.marker = `l${s2},${s1}l${s4},-${s4}l-${s1},-${s2}zm${s2},0l-${s2},${s1}l-${s4},-${s4}l${s1},-${s2}z`;
  241.             break;
  242.          case 42:
  243.             this.y0 = -size/2;
  244.             this.marker = `l${s8},${s38}l${s38},${s8}l-${s38},${s8}l-${s8},${s38}l-${s8},-${s38}l-${s38},-${s8}l${s38},-${s8}z`;
  245.             break;
  246.          case 44:
  247.             this.x0 = -size/4; this.y0 = -size/2;
  248.             this.marker = `h${s2}l-${s8},${s38}l${s38},-${s8}v${s2}l-${s38},-${s8}l${s8},${s38}h-${s2}l${s8},-${s38}l-${s38},${s8}v-${s2}l${s38},${s8}z`;
  249.             break;
  250.          case 46:
  251.             this.x0 = -size/4; this.y0 = -size/2;
  252.             this.marker = `l${s4},${s4}l${s4},-${s4}l${s4},${s4}l-${s4},${s4}l${s4},${s4}l-${s4},${s4}l-${s4},-${s4}l-${s4},${s4}l-${s4},-${s4}l${s4},-${s4}l-${s4},-${s4}z`;
  253.             break;
  254.          case 48:
  255.             this.x0 = -size/4; this.y0 = -size/2;
  256.             this.marker = `l${s4},${s4}l-${s4},${s4}l-${s4},-${s4}zm${s2},0l${s4},${s4}l-${s4},${s4}l-${s4},-${s4}zm0,${s2}l${s4},${s4}l-${s4},${s4}l-${s4},-${s4}zm-${s2},0l${s4},${s4}l-${s4},${s4}l-${s4},-${s4}z`;
  257.             break;
  258.          case 49:
  259.             this.x0 = -size/6; this.y0 = -size/2;
  260.             this.marker = `h${s3}v${s3}h-${s3}zm${s3},${s3}h${s3}v${s3}h-${s3}zm-${s3},${s3}h${s3}v${s3}h-${s3}zm-${s3},-${s3}h${s3}v${s3}h-${s3}z`;
  261.             break;
  262.          default: // diamond
  263.             this.y0 = -size / 2;
  264.             this.marker = `l${s3},${s2}l-${s3},${s2}l-${s3},-${s2}z`;
  265.             break;
  266.       }
  268.       return true;
  269.    }
  271.    /** @summary get stroke color */
  272.    getStrokeColor() { return this.stroke ? this.color : 'none'; }
  274.    /** @summary get fill color */
  275.    getFillColor() { return this.fill ? this.color : 'none'; }
  277.    /** @summary returns true if marker attributes will produce empty (invisible) output */
  278.    empty() { return (this.color === 'none') || (!this.fill && !this.stroke); }
  280.    /** @summary Apply marker styles to created element */
  281.    apply(selection) {
  282.       this.used = true;
  283.       selection.style('stroke', this.stroke ? this.color : 'none')
  284.                .style('stroke-width', this.stroke && (this.lwidth > 1) ? this.lwidth : null)
  285.                .style('fill', this.fill ? this.color : 'none');
  286.    }
  288.    /** @summary Method used when color or pattern were changed with OpenUi5 widgets.
  289.      * @private */
  290.    verifyDirectChange(/* painter */) {
  291.       this.change(this.color, parseInt(this.style), parseFloat(this.size));
  292.    }
  294.    /** @summary Create sample with marker in given SVG element
  295.      * @param {selection} svg - SVG element
  296.      * @param {number} width - width of sample SVG
  297.      * @param {number} height - height of sample SVG
  298.      * @private */
  299.    createSample(svg, width, height, plain) {
  300.       if (plain) svg = d3_select(svg);
  301.       this.resetPos();
  302.       svg.append('path')
  303.          .attr('d', this.create(width / 2, height / 2))
  304.          .call(this.func);
  305.    }
  307. } // class TAttMarkerHandler
  309. export { TAttMarkerHandler };