constructor()

in src/loader/loader-core.ts [122:181]

• 42 lines of code
• 3 McCabe index (conditional complexity)

  constructor(containerNode: Node, props: Partial<LoaderCoreProps>) {
    this.props = Object.assign({}, LoaderCore.defaultProps, props);
    this.canvas = document.createElement('canvas');
    this.canvas.dataset.test = 'ring-loader';
    this.canvas.classList.add(styles.canvas);

    this.textNode = document.createElement('div');
    this.textNode.dataset.test = 'ring-loader-text';
    this.textNode.classList.add(styles.text);

    this.textNode.textContent = this.props.message ? this.props.message : '';

    containerNode.appendChild(this.canvas);
    containerNode.appendChild(this.textNode);

    const pixelRatio = LoaderCore.getPixelRatio();
    const canvasSize = this.props.size * pixelRatio;

    this.canvas.width = canvasSize;
    this.canvas.height = canvasSize;

    //Fixate canvas physical size to avoid real size scaling
    this.canvas.style.width = `${this.props.size}px`;
    this.canvas.style.height = `${this.props.size}px`;

    this.ctx = this.canvas.getContext('2d');

    this.ctx?.scale(pixelRatio, pixelRatio);

    this.height = this.props.size;
    this.width = this.props.size;

    this.particles = [];

    //Configuration
    this.baseSpeed = 1.0;
    this.colorIndex = 0;
    this.maxRadius = 10;
    this.minRadius = 6;
    this.colorChangeTick = 40;

    //State
    this.x = 0;
    this.y = 0;
    this.radius = 8;
    this.hSpeed = 1.5;
    this.vSpeed = 0.5;
    this.radiusSpeed = 0.05;
    this.tick = 0;

    this.prepareInitialState(INITIAL_TICKS);

    this.isRunning = !this.props.stop;

    if (this.isRunning) {
      this.startAnimation();
    } else {
      this.draw();
    }
  }