toggleTrack()

in source/webapp/src/lib/js/imagePreview.js [820:915]
82 lines of code
18 McCabe index (conditional complexity)

  toggleTrack(trackId, onOff) {
    const canvas = $(`#${ImagePreview.Constants.Id.CavnasList}`).find(`[data-track="${trackId}"]`).first();

    if (!onOff) {
      canvas.addClass('collapse');
      return;
    }

    const init = !(canvas.data('init') === false);
    if (init) {
      canvas.removeClass('collapse');
      return;
    }

    const canvasW = canvas.width();
    const canvasH = canvas.height();
    /* note: need to explicitly set the canvas width and height */
    canvas[0].width = canvasW;
    canvas[0].height = canvasH;

    const ctx = canvas[0].getContext('2d');

    const coord = canvas.data('coord').split(',').map(x =>
      Number.parseFloat(x));
    const w = Math.floor(coord[0] * canvasW);
    const h = Math.floor(coord[1] * canvasH);
    let x = Math.floor(coord[2] * canvasW);
    let y = Math.floor(coord[3] * canvasH);

    const hasCoord = (w || h || x || y);
    if (hasCoord) {
      ctx.strokeStyle = '#ffffff'; // #ff9900
      ctx.moveTo(0, 0);
      ctx.strokeRect(x, y, w, h);
    }

    const name = canvas.data('name');
    const confidence = Number.parseFloat(canvas.data('confidence')).toFixed(2);
    const gender = canvas.data('gender');
    const ageRange = canvas.data('age-range');
    const parentName = canvas.data('parent-name');

    const text = [
      `${name} (${confidence})`,
      gender && `Gender: ${gender}`,
      ageRange && `Age: ${ageRange}`,
      parentName && `(${parentName})`,
    ].filter(x0 => x0);

    let fontSize;
    const lineSpace = 0;

    if (hasCoord) {
      fontSize = 12;
      ctx.textAlign = 'left';
      ctx.textBaseline = 'top';
    } else {
      x = 0.5 * canvasW;
      y = 0.5 * canvasH;
      fontSize = 18;
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
    }
    ctx.font = `${fontSize}px sans-serif`;

    switch (canvas.data('type')) {
      case 'moderation':
      case 'celeb':
        ctx.fillStyle = '#ffffff';
        break;
      case 'faceMatch':
        ctx.fillStyle = '#ffffff';
        break;
      case 'face':
        ctx.fillStyle = '#ffffff';
        break;
      case 'label':
        ctx.fillStyle = '#ffffff';
        break;
      case 'text':
        ctx.fillStyle = '#ffffff';
        break;
      default:
        ctx.fillStyle = '#ffffff';
        break;
    }

    let y0 = Math.max((y - (text.length * (fontSize + lineSpace))), 2);
    while (text.length) {
      ctx.fillText(text.shift(), x, y0);
      y0 += (fontSize + lineSpace);
    }

    canvas.data('init', 'true');
    canvas.removeClass('collapse');
  }