homemanager-fe/src/modules/house-planner/index.ts

import { HousePlannerCanvas } from './canvas';
import { Layer } from './interfaces';

export class HousePlanner {
  public canvas!: HTMLCanvasElement;
  public manager?: HousePlannerCanvas;

  initialize(canvas: HTMLCanvasElement, initialData: Layer[]) {
    this.canvas = canvas;
    this.resizeCanvas();
    this.addResizeEvents();
    this.manager = new HousePlannerCanvas(canvas);
    this.manager.layers = initialData;
    this.manager.tools.selectLayer(
      initialData[initialData.findIndex((layer) => layer.active)]
    );
    this.manager.tools.setInitialSelection();
    this.manager.tools.setTool('move');
    this.manager.draw();
    return () => this.cleanUp();
  }

  cleanUp() {
    window.removeEventListener('resize', this.boundResizeEvent);
    this.manager?.cleanUp();
  }

  private addResizeEvents() {
    window.addEventListener('resize', this.boundResizeEvent);
  }

  resizeCanvas() {
    this.canvas.width = this.canvas.parentElement!.clientWidth;
    this.canvas.height = this.canvas.parentElement!.clientHeight;
    this.manager?.draw();
  }

  private boundResizeEvent = this.resizeCanvas.bind(this);
}