yx-react-template/src/course-runtime/canvas/useCanvasScale.ts

import { useEffect, useState } from "react";

interface CanvasScaleOptions {
	width: number;
	height: number;
	maxScale: number;
}

function calculateScale({
	width,
	height,
	maxScale,
}: CanvasScaleOptions): number {
	if (typeof window === "undefined") return maxScale;
	return Math.min(
		window.innerWidth / width,
		window.innerHeight / height,
		maxScale,
	);
}

export function useCanvasScale({
	width,
	height,
	maxScale,
}: CanvasScaleOptions): number {
	const [scale, setScale] = useState(() =>
		calculateScale({ width, height, maxScale }),
	);

	useEffect(() => {
		const updateScale = () =>
			setScale(calculateScale({ width, height, maxScale }));
		updateScale();
		window.addEventListener("resize", updateScale);
		window.visualViewport?.addEventListener("resize", updateScale);

		return () => {
			window.removeEventListener("resize", updateScale);
			window.visualViewport?.removeEventListener("resize", updateScale);
		};
	}, [height, maxScale, width]);

	return scale;
}