private setupDom()

in tensorflow_similarity/visualization/projector_v2/views/projector.ts [117:164]

43 lines of code
2 McCabe index (conditional complexity)


  private setupDom(): {
    canvas: HTMLCanvasElement;
    container: HTMLElement;
  } {
    const canvas = this.renderer.domElement;
    updateStyles(this.labelContainer, {
      position: 'absolute',
      pointerEvents: 'none',
      willChange: 'top, left',
    } as Partial<CSSStyleDeclaration>);
    updateStyles(this.labelImg, {
      width: '300px',
      height: '200px',
      backgroundSize: 'contain',
      backgroundRepeat: 'no-repeat',
    });

    const container = createElement('div', null, [
      this.renderer.domElement,
      this.labelContainer,
      this.settings.getDomElement(),
    ]);
    updateStyles(container, {
      height: '100%',
      overflow: 'hidden',
      position: 'relative',
      width: '100%',
    });

    const resizeObserver = new anyWindow.ResizeObserver(() => {
      this.containerRect = container.getBoundingClientRect();
      const {width, height} = this.containerRect;
      this.renderer.setSize(width, height);

      if (this.camera instanceof THREE.PerspectiveCamera) {
        this.camera.aspect = width / height;
        this.camera.updateProjectionMatrix();
        this.renderer.setSize(width, height);
      }
    });
    resizeObserver.observe(container);

    canvas.addEventListener('mousemove', (event) => this.onMouseMove(event), {
      passive: true,
    });

    return {canvas, container};
  }