updateCanvas()

in src/ui/Histogram/UiHistogram.js [195:316]

• 109 lines of code
• 17 McCabe index (conditional complexity)

  updateCanvas() {
    if (this.refs.canvasHistogram === undefined) {
      return;
    }
    const ctx = this.refs.canvasHistogram.getContext('2d');
    const w = this.refs.canvasHistogram.clientWidth;
    const h = this.refs.canvasHistogram.clientHeight;
    ctx.fillStyle = 'rgb(220, 220, 220)';
    ctx.fillRect(0, 0, w, h);

    const vol = this.props.volume;
    if (vol !== null) {
      this.getVolumeHistogram(vol);
    }

    const xMin = Math.floor(0.01 * w);
    const xMax = Math.floor(0.99 * w);
    const yMin = Math.floor(0.05 * h);
    const yMax = Math.floor(0.95 * h);
    const wRect = xMax - xMin;
    const hRect = yMax - yMin;

    ctx.lineWidth = 1;
    ctx.strokeStyle = '#0a0a0a';

    ctx.moveTo(xMin, yMax);
    ctx.lineTo(xMin, yMin);
    ctx.stroke();

    ctx.moveTo(xMin, yMax);
    ctx.lineTo(xMax, yMax);
    ctx.stroke();

    ctx.font = '10px Arial';
    ctx.fillStyle = 'rgb(120, 20, 20)';
    ctx.textBaseline = 'top';
    ctx.textAlign = 'center';

    let maxHistValue = 1.0;
    if (this.m_peakIndex > 0) {
      maxHistValue = this.m_histogram[this.m_peakIndex] * 2;
      maxHistValue = maxHistValue > 1.0 ? 1.0 : maxHistValue;
    }

    let i;
    const NUM_X_MARKS = 4;
    for (i = 0; i <= NUM_X_MARKS; i++) {
      const x = xMin + Math.floor((wRect * i) / NUM_X_MARKS);
      ctx.moveTo(x, yMax);
      ctx.lineTo(x, yMax + 6);
      ctx.stroke();
      const valMark = Math.floor(0 + (this.m_numColors * i) / NUM_X_MARKS);
      if (i === 0) {
        ctx.textAlign = 'left';
      } else if (i === NUM_X_MARKS) {
        ctx.textAlign = 'right';
      } else {
        ctx.textAlign = 'center';
      }
      ctx.fillText(valMark.toString(), x, yMax + 4);
    }

    if (NEED_TO_DRAW_VERTICAL_MARKS) {
      ctx.textBaseline = 'bottom';
      ctx.textAlign = 'left';
      ctx.fillStyle = 'rgb(120, 60, 60)';
      const NUM_Y_MARKS = 4;
      for (i = 0; i <= NUM_Y_MARKS; i++) {
        if (i === NUM_Y_MARKS) {
          ctx.textBaseline = 'top';
        }
        const y = yMax - Math.floor((hRect * i) / NUM_Y_MARKS);
        ctx.moveTo(xMin, y);
        ctx.lineTo(xMin - 4, y);
        ctx.stroke();
        const valMark = 0 + (maxHistValue * i) / NUM_Y_MARKS;
        ctx.fillText(valMark.toFixed(2), xMin + 6, y);
      }
    }

    ctx.lineWidth = 2;
    ctx.strokeStyle = '#080808';
    ctx.fillStyle = '#707070';

    ctx.beginPath();
    {
      ctx.moveTo(xMin, yMax);
      let i;
      let x, y;
      for (i = 0; i < this.m_numColors; i++) {
        x = xMin + Math.floor((wRect * i) / this.m_numColors);
        let v = this.m_histogram[i] / maxHistValue;
        v = v >= 1.0 ? 1.0 : v;
        y = yMax - Math.floor(hRect * v);
        ctx.lineTo(x, y);
      }
      y = yMax;
      ctx.lineTo(x, y);
    }
    ctx.closePath();
    ctx.fill();
    // draw peak
    if (this.m_peakIndex > 0) {
      ctx.lineWidth = 1;
      ctx.strokeStyle = '#eeeeee';
      const x = xMin + Math.floor((wRect * this.m_peakIndex) / this.m_numColors);
      let v = this.m_histogram[this.m_peakIndex] / maxHistValue;
      v = v >= 1.0 ? 1.0 : v;
      let y = yMax - Math.floor(hRect * v);
      ctx.beginPath();
      ctx.setLineDash([5, 15]);
      ctx.moveTo(x, y);
      y = yMax;
      ctx.lineTo(x, y);
      ctx.stroke();
      ctx.setLineDash([]);
    }
    // render points and lines for modified transfer fucntion
    if (this.m_transfFuncCallback !== undefined && this.m_transfFuncUpdateCallback !== undefined) {
      this.m_transfFunc.render(ctx, xMin, yMin, wRect, hRect);
    }
  } // end update canvas