this.touch = function()

in frontend/src/components/jfr/flame-graph.js [752:870]
108 lines of code
12 McCabe index (conditional complexity)

    this.touch = function (x, y) {
      this.fg.$frameMask.style.left = this.x + 'px';
      this.fg.$frameMask.style.top = this.y + 'px';

      this.fg.$frameMask.style.width = this.width + 'px';
      this.fg.$frameMask.style.height = this.height + 'px';
      this.fg.$frameMask.style.backgroundColor = this.color[0];

      this.fg.$frameMaskText.style.color = this.color[1];
      this.fg.$frameMaskText.style.paddingLeft = this.fg.$textGap + 'px';
      this.fg.$frameMaskText.style.lineHeight = this.fg.$frameMask.style.height;
      this.fg.$frameMaskText.style.fontSize = this === this.fg.$root ? '14px' : '12px';
      this.fg.$frameMaskText.innerText = this.visibleText;

      this.fg.$frameMask.style.cursor = 'pointer';
      this.fg.$frameMask.style.visibility = 'visible';
      this.fg.$frameMask.focus();

      let top = this.y + this.height - this.fg.$flameGraphInner.scrollTop;
      let detailsNode = this.fg.shadowRoot.getElementById('frame-postcard-content-main-details');
      if (detailsNode) {
        detailsNode.parentNode.removeChild(detailsNode);
      }

      if (this !== this.fg.$root) {
        this.fg.$framePostcardContentMain.style.backgroundColor = this.color[0];
        this.fg.$framePostcardContentMain.style.color = this.color[1];
        let hp = Math.round((this.depth / this.maxDepth()) * 100);
        let direction = this.fg.downward ? 'to bottom' : 'to top';

        // title
        this.fg.$framePostcardContentMainTitle.innerText = this.fg.$$titleGenerator(
          this.fg.$dataSource,
          this.raw,
          this.infomation
        );
        this.fg.$framePostcardContentMainLine.style.background =
          'linear-gradient(' +
          direction +
          ', ' +
          hexToRGB(this.color[1], 0.7) +
          ' 0% ' +
          hp +
          '%, ' +
          hexToRGB(this.color[1], 0.2) +
          ' ' +
          hp +
          '% 100%)';

        // details
        let details = this.fg.$$detailsGenerator(this.fg.$dataSource, this.raw, this.infomation);
        if (details) {
          let keys = Object.keys(details);
          let content = null;
          if (keys.length > 0) {
            content =
              '<div id ="frame-postcard-content-main-details" style="width: 100%; font-size: 11px; word-wrap: break-word">';
            for (let i = 0; i < keys.length; i++) {
              content += '<div style="margin-top: 5px; opacity: .7">' + keys[i] + '</div>';
              content += '<ul style="margin: 2px 0 0 -15px"><li>' + details[keys[i]] + '</li></ul>';
            }
            content += '</div>';
          }
          if (content != null) {
            let t = document.createElement('template');
            t.innerHTML = content.trim();
            this.fg.$framePostcardContentMain.appendChild(t.content.firstChild);
          }
        }

        // foot
        this.fg.$framePostcardContentFoot.innerText = this.fg.$$footTextGenerator(
          this.fg.$dataSource,
          this.raw,
          this.infomation
        );
        let wp = Math.round((this.weight / this.fg.$totalWeight) * 100);

        let footColor = this.fg.$$footColorSelector(this.fg.$dataSource, this.raw, this.infomation);
        let startColor, endColor, fontColor;
        if (footColor.length > 2) {
          startColor = footColor[0];
          endColor = footColor[1];
          fontColor = footColor[2];
        } else {
          startColor = endColor = footColor[0];
          fontColor = footColor[2];
        }
        this.fg.$framePostcardContentFoot.style.background =
          'linear-gradient(to right, ' +
          hexToRGB(startColor) +
          ' 0% ' +
          wp +
          '%, ' +
          hexToRGB(endColor) +
          ' ' +
          wp +
          '% 100%)';
        this.fg.$framePostcardContentFoot.style.color = fontColor;

        this.fg.$framePostcardShadow.style.left = x + 'px';
        this.fg.$framePostcardShadow.style.top = top + 'px';
        this.fg.$framePostcard.style.visibility = 'visible';
        this.fg.decideFramePostcardLayout();

        if (this.fg.$$diff) {
          let diffPercent = this.diffPercent();
          let top;
          if (diffPercent > 0) {
            top = 0.5 * (1 - diffPercent) * 100 + '%';
          } else {
            top = (0.5 + 0.5 * -diffPercent) * 100 + '%';
          }
          this.fg.$colorArrow.style.top = top;
          this.fg.$colorArrow.style.visibility = 'visible';
        }
      }
      this.fg.$currentFrame = this;
    };