drawOccupancyZones.ts

import { drawOccupancyZonesTexts } from './drawOccupancyZonesTexts';
import {
  TRACK_HEIGHT_CONTAINER,
  CANVAS_PADDING,
  OCCUPANCY_ZONE_START,
  OCCUPANCY_ZONE_HEIGHT,
  COLORS,
} from '../../consts';
import type { OccupancyZone, Track } from '../../types';
type DrawZone = {
  ctx: CanvasRenderingContext2D;
  arrivalTime: number;
  departureTime: number;
};

const drawDefaultZone = ({ ctx, arrivalTime, departureTime }: DrawZone) => {
  ctx.beginPath();
  ctx.rect(arrivalTime, OCCUPANCY_ZONE_START, departureTime! - arrivalTime, OCCUPANCY_ZONE_HEIGHT);
  ctx.fill();
  ctx.stroke();
};

const drawThroughTrain = ({ ctx, arrivalTime }: Omit<DrawZone, 'departureTime'>) => {
  ctx.beginPath();
  ctx.moveTo(arrivalTime - 1, OCCUPANCY_ZONE_START + 1.5);
  ctx.lineTo(arrivalTime - 4.5, OCCUPANCY_ZONE_START - 3.5);
  ctx.lineTo(arrivalTime + 4.5, OCCUPANCY_ZONE_START - 3.5);
  ctx.lineTo(arrivalTime + 1, OCCUPANCY_ZONE_START + 1.5);
  ctx.lineTo(arrivalTime + 4.5, OCCUPANCY_ZONE_START + 6.5);
  ctx.lineTo(arrivalTime - 4.5, OCCUPANCY_ZONE_START + 6.5);
  ctx.lineTo(arrivalTime - 1, OCCUPANCY_ZONE_START + 1.5);
  ctx.fill();
  ctx.moveTo(arrivalTime - 1, OCCUPANCY_ZONE_START + 1.5);
  ctx.lineTo(arrivalTime + 1, OCCUPANCY_ZONE_START + 1.5);
  ctx.stroke();
};

export const drawOccupancyZones = ({
  ctx,
  width,
  height,
  tracks,
  occupancyZones,
  getTimePixel,
}: {
  ctx: CanvasRenderingContext2D;
  width: number;
  height: number;
  tracks: Track[] | undefined;
  occupancyZones: OccupancyZone[] | undefined;
  getTimePixel: (time: number) => number;
}) => {
  ctx.clearRect(0, 0, width, height);

  tracks?.forEach((track, index) => {
    const trackTranslate = index === 0 ? CANVAS_PADDING : TRACK_HEIGHT_CONTAINER;
    ctx.translate(0, trackTranslate);

    const filteredOccupancyZone = occupancyZones?.filter((zone) => zone.trackId === track.id);

    if (filteredOccupancyZone) {
      filteredOccupancyZone.forEach((zone) => {
        const arrivalTime = getTimePixel(zone.arrivalTime.getTime());
        const departureTime = getTimePixel(zone.departureTime.getTime());
        const isThroughTrain = arrivalTime === departureTime;

        ctx.fillStyle = zone.color;
        ctx.strokeStyle = COLORS.WHITE_100;
        ctx.lineWidth = 1;
        ctx.lineJoin = 'round';
        ctx.lineCap = 'round';

        if (isThroughTrain) {
          drawThroughTrain({ ctx, arrivalTime });
        } else {
          drawDefaultZone({ ctx, arrivalTime, departureTime });
        }
        drawOccupancyZonesTexts({
          ctx,
          zone,
          arrivalTime,
          departureTime,
          isThroughTrain,
        });
      });
    }
  });
};