WeatherTool/web/src/components/map/canvasDraw.ts

import { ResolutionPropsValue, WindProps, windProps } from "./mapConsts";
import { drawRotatedImage, getAngleFromString } from "./windAngles";

// cityName, {x, y}, weatherValue, icon
export type CityData = [cityName: string, {x: number, y: number }, weatherValue: number, icon: string | undefined]

export function drawOnMap(
    ctx: CanvasRenderingContext2D,
    imgArr: [HTMLImageElement, HTMLImageElement],
    cityData: CityData[],
    windData: [string, string, string, boolean, WindProps],
    overlayData: [string, string],
    props: ResolutionPropsValue,
): void {
    const [windDirection, windSpeed, windGusts, roundValues, windProp] = windData;
    const [bgImg, arrowImg] = imgArr;
    const [title, source] = overlayData;

    // bg
    ctx.drawImage(bgImg, 0, 0);

    // City value badges use a consistent height and expand horizontally to fit the value.
    cityData.forEach(([, {x, y}, value]) => {
        const localX = props.offsetX + x * props.scale;
        const localY = props.offsetY + y * props.scale;
        const numericValue = roundValues ? Math.round(value) : value.toFixed(1);
        const stringValue = numericValue.toString().replace(".", ",");

        ctx.font = `bold ${props.fontSize}px Rubik`;
        const badgeWidth = Math.max(props.boxSize, Math.ceil(ctx.measureText(stringValue).width + props.fontSize * 0.8));
        ctx.fillStyle = "#FFFFFF";
        ctx.fillRect(localX - badgeWidth / 2, localY - props.boxSize / 2, badgeWidth, props.boxSize);
    });

    // weather values
    cityData.forEach(([, {x, y}, value, icon]) => {
        const localX = props.offsetX + x * props.scale;
        const localY = props.offsetY + y * props.scale;

        ctx.font = `bold ${props.fontSize}px Rubik`;
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillStyle = "#000000";
        const numericValue = roundValues ? Math.round(value) : value.toFixed(1);
        const stringValue = numericValue.toString().replace(".", ",");
        ctx.fillText(stringValue, localX, localY);

        if (icon) {
            ctx.fillStyle = "#FFFFFF";
            ctx.font = `normal ${props.fontSize * 5}px Daira by LTV grafika`;
            const iconSize = ctx.measureText(icon);
            drawOpticallyCenteredGlyph(ctx, icon, localX + props.boxSize/2 + 10 + iconSize.width/2, localY);
        }
    });

    drawTitleOverlay(ctx, title, source, props.width);

    if (!props.showWind) return;

    // wind values
    ctx.font = `bold ${props.windFontSize}px Rubik`;
    ctx.textAlign = "left";
    ctx.textBaseline = "top";
    ctx.fillStyle = "#FFFFFF";
    const boxMiddleX = 1675;

    const directionWidth = ctx.measureText(windDirection).width;
    ctx.fillText(windDirection, windProp.offsetX + boxMiddleX - directionWidth / 2 + 30, (windProp.offsetY + 370)*windProp.scaleY);
    const angleInDegrees = getAngleFromString(windDirection);
    drawRotatedImage(ctx, arrowImg, windProp.offsetX + boxMiddleX - directionWidth / 2 - 30, (windProp.offsetY + 370)*windProp.scaleY, angleInDegrees);

    const speedWidth = ctx.measureText(windSpeed).width;
    ctx.fillText(windSpeed, windProp.offsetX + boxMiddleX - speedWidth / 2 - 30, (windProp.offsetY + 575)*windProp.scaleY);
    ctx.font = "bold 25px Rubik";
    ctx.fillText("M/S", windProp.offsetX + boxMiddleX + speedWidth / 2 - 22, (windProp.offsetY + 590)*windProp.scaleY);

    ctx.font = `bold ${props.windFontSize}px Rubik`;
    const gustsWidth = ctx.measureText(windGusts).width;
    ctx.fillText(windGusts, windProp.offsetX + boxMiddleX - gustsWidth / 2 - 30, (windProp.offsetY + 790)*windProp.scaleY);
    ctx.font = "bold 25px Rubik";
    ctx.fillText("M/S", windProp.offsetX + boxMiddleX + gustsWidth / 2 - 22, (windProp.offsetY + 805)*windProp.scaleY);
}

function drawOpticallyCenteredGlyph(ctx: CanvasRenderingContext2D, glyph: string, centerX: number, centerY: number): void {
    const metrics = ctx.measureText(glyph);
    ctx.textAlign = "left";
    ctx.textBaseline = "alphabetic";
    const x = centerX + (metrics.actualBoundingBoxLeft - metrics.actualBoundingBoxRight) / 2;
    const y = centerY + (metrics.actualBoundingBoxAscent - metrics.actualBoundingBoxDescent) / 2;
    ctx.fillText(glyph, x, y);
}

function drawTitleOverlay(ctx: CanvasRenderingContext2D, title: string, source: string, canvasWidth: number): void {
    if (!title.trim() && !source.trim()) return;

    const scale = canvasWidth / 1920;
    const right = 34 * scale;
    const top = 38 * scale;
    const horizontalPadding = 24 * scale;
    const titleHeight = 62 * scale;
    const sourceHeight = 38 * scale;

    ctx.textAlign = "left";
    ctx.textBaseline = "middle";
    ctx.font = `bold ${30 * scale}px Rubik`;
    const titleText = title.trim().toUpperCase();
    const titleWidth = Math.max(360 * scale, ctx.measureText(titleText).width + horizontalPadding * 2);
    const titleX = canvasWidth - right - titleWidth;

    ctx.fillStyle = "#9b0008";
    ctx.fillRect(titleX, top, titleWidth, titleHeight);
    ctx.fillStyle = "#FFFFFF";
    ctx.fillText(titleText, titleX + horizontalPadding, top + titleHeight / 2);

    if (source.trim()) {
        ctx.font = `bold ${19 * scale}px Rubik`;
        const sourceText = source.trim().toUpperCase();
        const sourceWidth = Math.max(130 * scale, ctx.measureText(sourceText).width + horizontalPadding * 2);
        const sourceX = canvasWidth - right - sourceWidth;
        ctx.fillStyle = "#FFFFFF";
        ctx.fillRect(sourceX, top + titleHeight, sourceWidth, sourceHeight);
        ctx.fillStyle = "#000000";
        ctx.fillText(sourceText, sourceX + horizontalPadding, top + titleHeight + sourceHeight / 2);
    }
}