fill: elementIsSelected()

in client/src/components/special/hcs-image/hcs-cell-selector/index.js [1363:1544]
175 lines of code
29 McCabe index (conditional complexity)

            fill: elementIsSelected(this.hoveredElement)
              ? this.selectedHoverColor
              : this.primaryHoverColor
          }
        );
      }
    }
    if (this.hoveredElement && elementIsSelectable(this.hoveredElement)) {
      this.canvas.style.cursor = 'pointer';
    } else {
      this.canvas.style.cursor = 'default';
    }
    scaleMatrices.clear();
  };

  renderRect = (x, y, width, height, options = {}) => {
    if (
      !this.ctx ||
      !this.defaultGlProgram ||
      !this.buffers
    ) {
      return;
    }
    if (width < 0 || height < 0) {
      return;
    }
    const {
      stroke,
      fill
    } = options;
    const gl = this.ctx;
    this.setPixelDrawingUniforms();
    this.setViewUniforms(x, y, width, -height);
    if (fill) {
      gl.uniform4fv(this.defaultGlProgram.color, new Float32Array(fill));
      gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers.rectangle.buffer);
      gl.vertexAttribPointer(this.defaultGlProgram.aPosition, 2, gl.FLOAT, false, 0, 0);
      gl.enableVertexAttribArray(this.defaultGlProgram.aPosition);
      gl.drawArrays(gl.TRIANGLES, 0, this.buffers.rectangle.vertexCount);
    }
    if (stroke) {
      gl.uniform4fv(this.defaultGlProgram.color, new Float32Array(stroke));
      gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers.rectangleBorder.buffer);
      gl.vertexAttribPointer(this.defaultGlProgram.aPosition, 2, gl.FLOAT, false, 0, 0);
      gl.enableVertexAttribArray(this.defaultGlProgram.aPosition);
      gl.drawArrays(gl.LINES, 0, this.buffers.rectangleBorder.vertexCount);
    }
  }

  renderCircle = (x, y, radius, options = {}) => {
    if (
      !this.ctx ||
      !this.defaultGlProgram ||
      !this.buffers
    ) {
      return;
    }
    if (radius < 0 || !radius) {
      return;
    }
    const {
      stroke,
      fill
    } = options;
    const gl = this.ctx;
    this.setPixelDrawingUniforms();
    this.setViewUniforms(x, y, radius, radius);
    if (fill) {
      gl.uniform4fv(this.defaultGlProgram.color, new Float32Array(fill));
      gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers.circle.buffer);
      gl.vertexAttribPointer(this.defaultGlProgram.aPosition, 2, gl.FLOAT, false, 0, 0);
      gl.enableVertexAttribArray(this.defaultGlProgram.aPosition);
      gl.drawArrays(gl.TRIANGLES, 0, this.buffers.circle.vertexCount);
    }
    if (stroke) {
      gl.uniform4fv(this.defaultGlProgram.color, new Float32Array(stroke));
      gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers.circleBorder.buffer);
      gl.vertexAttribPointer(this.defaultGlProgram.aPosition, 2, gl.FLOAT, false, 0, 0);
      gl.enableVertexAttribArray(this.defaultGlProgram.aPosition);
      gl.drawArrays(gl.LINES, 0, this.buffers.circleBorder.vertexCount);
    }
  }

  drawSelection = () => {
    if (this.mouseEvent && this.mouseEvent.startUnits && this.mouseEvent.endUnits) {
      const {
        x: x1,
        y: y1
      } = this.unitPointToPxPoint(this.mouseEvent.startUnits);
      const {
        x: x2,
        y: y2
      } = this.unitPointToPxPoint(this.mouseEvent.endUnits);
      this.renderRect(
        Math.min(x1, x2),
        Math.min(y1, y2),
        Math.abs(x2 - x1),
        Math.abs(y2 - y1),
        {
          stroke: this.primaryColor,
          fill: this.selectionColor
        }
      );
    }
  };

  drawWell = () => {
    const {radius} = this.props;
    if (!this.ctx || !radius || Number.isNaN(Number(radius))) {
      return;
    }
    const center = this.unitPointToPxPoint({x: this.width / 2.0, y: this.height / 2.0});
    this.renderCircle(
      center.x,
      center.y,
      2.0,
      {
        fill: this.defaultColor
      }
    );
    this.renderCircle(
      center.x,
      center.y,
      radius * this.unitScale,
      {
        stroke: this.defaultColor
      }
    );
  };

  drawRulers = () => {
    this.renderRect(
      0,
      0,
      this.totalWidth,
      this.offsets.top - 1,
      {fill: this.backgroundColor}
    );
    this.renderRect(
      0,
      this.totalHeight - this.offsets.bottom + 1,
      this.totalWidth,
      this.offsets.bottom - 1,
      {fill: this.backgroundColor}
    );
    this.renderRect(
      0,
      0,
      this.offsets.left - 1,
      this.totalHeight,
      {fill: this.backgroundColor}
    );
    this.renderRect(
      this.totalWidth - this.offsets.right + 1,
      0,
      this.offsets.right - 1,
      this.totalHeight,
      {fill: this.backgroundColor}
    );
    if (!this.textCtx || !this.props.showRulers) {
      return;
    }

    this.textCtx.clearRect(
      0,
      0,
      this.textCtx.canvas.width,
      this.textCtx.canvas.height
    );
    const dpr = window.devicePixelRatio;
    this.textCtx.font = `${FONT_SIZE_PX * dpr}px sans-serif`;
    this.textCtx.fillStyle = this.textColor;
    this.textCtx.textAlign = 'center';
    this.textCtx.textBaseline = 'middle';

    let previousVisiblePosition = -Infinity;
    for (let i = 0; i < this.width; i++) {
      const p = this.unitPointToPxPoint({x: i + 0.5, y: 0});
      const x = p.x - this.maxColumnLabelSize / 2.0;
      if (x > previousVisiblePosition) {
        previousVisiblePosition = p.x + this.maxColumnLabelSize / 2.0;
        if (p.x < this.offsets.left || p.x > this.totalWidth - this.offsets.right) {