constructor()

in frontend/src/components/jfr/flame-graph.js [890:1048]

• 133 lines of code
• 16 McCabe index (conditional complexity)

    constructor() {
      super();
      this.attachShadow({ mode: 'open' });
      let sr = this.shadowRoot;
      sr.appendChild(template.content.cloneNode(true));

      this.$canvas = sr.getElementById('flame-graph-canvas');
      this.$context = this.$canvas.getContext('2d');
      this.$context.save();

      this.$frameHeight = 24;

      this.$fgVGap = 0;
      this.$fgVEndGap = 5;
      this.$xGap = 0.2;
      this.$xGapThreashold = 0.01;
      this.$yGap = 0.5;
      this.$textGap = 6;
      this.$showTextWidthThreshold = 30;
      this.$fontFamily = 'Menlo,NotoSans,"Lucida Grande","Lucida Sans Unicode",sans-serif';
      this.$font = '400 12px ' + this.$fontFamily;
      this.$font_600 = '600 12px ' + this.$fontFamily;
      this.$rootFont = '600 14px ' + this.$fontFamily;
      this.$moreText = '...';

      this.$defaultColorScheme = {
        colorForZero: ['#c5c8d3', '#000000'],
        colors: [
          ['#761d96', '#ffffff'],
          ['#c12561', '#ffffff'],
          ['#fec91b', '#000000'],
          ['#3f7350', '#ffffff'],
          ['#408118', '#ffffff'],
          ['#3ea9da', '#000000'],
          ['#9fb036', '#ffffff'],
          ['#b671c1', '#ffffff'],
          ['#faa938', '#000000']
        ]
      };

      this.$maxY = 0;

      this.$flameGraph = sr.getElementById('flame-graph');
      this.$flameGraphInner = sr.getElementById('flame-graph-inner');
      this.$flameGraphInnerWrapper = sr.getElementById('flame-graph-inner-wrapper');
      this.$pinnedFrameMask = sr.getElementById('pinned-frame-mask');
      this.$frameMask = sr.getElementById('frame-mask');
      this.$flameGraphHelp = sr.getElementById('flame-graph-help');
      this.$closeFlameGraphHelp = sr.getElementById('close-flame-graph-help');

      this.$helpButton = sr.getElementById('help-button');

      this.$helpButton.addEventListener('click', () => {
        if (this.$flameGraphHelp.style.visibility !== 'visible') {
          this.$flameGraphHelp.style.visibility = 'visible';
        } else {
          this.$flameGraphHelp.style.visibility = 'hidden';
        }
      });

      this.$flameGraphInner.addEventListener('click', () => {
        if (this.$flameGraphHelp.style.visibility === 'visible') {
          this.$flameGraphHelp.style.visibility = 'hidden';
        }
      });

      this.$closeFlameGraphHelp.addEventListener('click', () => {
        this.$flameGraphHelp.style.visibility = 'hidden';
      });
      this.$commandMode = false;
      this.$frameMask.addEventListener('keydown', (e) => {
        if ((e.key === 'c' || e.key === 'C') && (e.metaKey || e.ctrlKey)) {
          this.copy(false);
          this.$commandMode = false;
        } else {
          if (this.$commandMode) {
            if (e.key === 'f' || e.key === 'F') {
              this.copy(false);
            } else if (e.key === 's' || e.key === 'S') {
              this.copy(true);
            }
            this.$commandMode = false;
          } else if (e.key === 'f' || e.key === 'F') {
            this.$commandMode = true;
          }
        }
      });
      this.$frameMaskText = sr.getElementById('frame-mask-text');
      this.$framePostcard = sr.getElementById('frame-postcard');
      this.$framePostcardShadow = sr.getElementById('frame-postcard-shadow');
      this.$framePostcardConnectingLine = sr.getElementById('frame-postcard-connecting-line');
      this.$framePostcardContent = sr.getElementById('frame-postcard-content');
      this.$framePostcardContentMain = sr.getElementById('frame-postcard-content-main');
      this.$framePostcardContentMainLine = sr.getElementById('frame-postcard-content-main-line');
      this.$framePostcardContentMainTitle = sr.getElementById('frame-postcard-content-main-title');
      this.$framePostcardContentFoot = sr.getElementById('frame-postcard-content-foot');

      this.$frameMask.style.font = this.$font_600;

      this.$root = null;

      this.$currentFrame = null;
      this.$pinned = false;
      this.$pinnedFrame = null;
      this.$pinnedFrameLeft = null;
      this.$pinnedFrameRight = null;

      this.$drawingChildrenOfPinnedFrame = false;

      this.$frameMask.addEventListener('mousemove', (e) => {
        this.handleFrameMaskMouseMoveEvent(e);
      });
      this.$frameMask.addEventListener('click', (e) => {
        this.handleFrameMaskClickEvent(e);
      });
      this.$frameMask.addEventListener('dblclick', (e) => {
        if (window.getSelection) {
          window.getSelection().removeAllRanges();
        }
        this.handleFrameMaskClickEvent(e);
      });

      this.$scrollEventListener = () => {
        this.handleScrollEvent();
      };

      this.$flameGraphInner.addEventListener('scroll', this.$scrollEventListener);

      window.addEventListener('scroll', this.$scrollEventListener);

      this.$downwardBunnton = sr.getElementById('downward-button');
      this.$downwardBunnton.addEventListener('click', () => (this.downward = !this.downward));

      this.$root = new Frame(this, null, 0, true);

      this.$touchedFrame = null;

      this.$canvas.addEventListener('mousemove', (e) => {
        this.handleCanvasMouseMoveEvent(e);
      });

      this.$flameGraph.addEventListener('mouseleave', () => {
        if (this.$touchedFrame) {
          let tf = this.$touchedFrame;
          this.$touchedFrame = null;
          tf.leave();
        }
      });

      this.$totalWeight = 0;

      let o = this;
      new ResizeObserver(function () {
        o.render(true, false);
      }).observe(this.$flameGraph);

      this.$colorBarDiv = sr.getElementById('color-bar-div');
      this.$colorArrow = sr.getElementById('color-arrow');
    }