Aislo/B07_wf4_DesignDetail/openwebcad/src/main.tsx

import { Point } from '@flatten-js/core';
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Actor, type MachineSnapshot } from 'xstate';
import { HIGHLIGHT_ENTITY_DISTANCE, SNAP_POINT_DISTANCE } from './App.consts';
import App from './App.tsx';
import { ScreenCanvasDrawController } from './drawControllers/screenCanvas.drawController';
import { draw } from './helpers/draw';
import { findClosestEntity } from './helpers/find-closest-entity';
import { getNewLayer } from './helpers/get-new-layer.ts';
import { trackHoveredSnapPoint } from './helpers/track-hovered-snap-points';
import { InputController } from './inputController/input-controller.ts';
import { registerAisloDrawingBridge } from './integration/aislo-drawing-bridge.ts';
import {
	getActiveToolActor,
	getCanvas,
	getEntities,
	getHoveredSnapPoints,
	getLastDrawTimestamp,
	getScreenCanvasDrawController,
	getSnapPoint,
	setActiveLayerId,
	setActiveToolActor,
	setCanvas,
	setEntities,
	setHighlightedEntityIds,
	setHoveredSnapPoints,
	setInputController,
	setLastDrawTimestamp,
	setLayers,
	setScreenCanvasDrawController,
} from './state';
import { Tool } from './tools';
import { TOOL_STATE_MACHINES } from './tools/tool.consts';
import { ActorEvent, type DrawEvent } from './tools/tool.types';

ReactDOM.createRoot(document.getElementById('root') as HTMLDivElement).render(
	<React.StrictMode>
		<App />
	</React.StrictMode>
);

function startDrawLoop(
	screenCanvasDrawController: ScreenCanvasDrawController,
	timestamp: DOMHighResTimeStamp
) {
	const lastDrawTimestamp = getLastDrawTimestamp();

	const elapsedTime = timestamp - lastDrawTimestamp;
	setLastDrawTimestamp(timestamp);

	// biome-ignore lint/suspicious/noExplicitAny: <explanation>
	const activeToolSnapshot: MachineSnapshot<any, any, any, any, any, any, any, any> | undefined =
		getActiveToolActor()?.getSnapshot();
	if (
		activeToolSnapshot?.status === 'active' &&
		activeToolSnapshot?.can({ type: ActorEvent.DRAW })
	) {
		getActiveToolActor()?.send({
			type: ActorEvent.DRAW,
			drawController: screenCanvasDrawController,
		} as DrawEvent);
	}

	/**
	 * Highlight the entity closest to the mouse when the select tool is active
	 */
	if (getActiveToolActor()?.getSnapshot()?.context?.type === Tool.SELECT) {
		const screenCanvasDrawController = getScreenCanvasDrawController();
		if (!screenCanvasDrawController) {
			throw new Error('getScreenCanvasDrawController() returned null');
		}
		const { distance, entity: closestEntity } = findClosestEntity(
			screenCanvasDrawController.getWorldMouseLocation(),
			getEntities()
		);

		if (distance < HIGHLIGHT_ENTITY_DISTANCE) {
			setHighlightedEntityIds([closestEntity.id]);
		}
	}

	/**
	 * Track hovered snap points
	 */
	trackHoveredSnapPoint(
		getSnapPoint(),
		getHoveredSnapPoints(),
		setHoveredSnapPoints,
		SNAP_POINT_DISTANCE / screenCanvasDrawController.getScreenScale(),
		elapsedTime
	);

	/**
	 * Draw everything on the canvas
	 */
	draw(screenCanvasDrawController);

	requestAnimationFrame((newTimestamp: DOMHighResTimeStamp) => {
		startDrawLoop(screenCanvasDrawController, newTimestamp);
	});
}

function handleWindowResize() {
	const canvas = getCanvas();
	if (canvas) {
		const bounds = canvas.getBoundingClientRect();
		const width = Math.max(1, Math.round(bounds.width));
		const height = Math.max(1, Math.round(bounds.height));
		canvas.width = width;
		canvas.height = height;
		getScreenCanvasDrawController().setCanvasSize(new Point(width, height));
	}
}

function initApplication() {
	const canvas = document.getElementsByTagName('canvas')[0] as HTMLCanvasElement | null;
	if (canvas) {
		setCanvas(canvas);

		const context = canvas.getContext('2d');
		if (!context) return;

		setEntities([], true); // Creates the first undo entry

		const layers = [getNewLayer()];
		setLayers(layers);
		setActiveLayerId(layers[0].id);
		registerAisloDrawingBridge();
		const screenCanvasDrawController = new ScreenCanvasDrawController(context);
		setScreenCanvasDrawController(screenCanvasDrawController);

		window.addEventListener('resize', handleWindowResize);
		new ResizeObserver(handleWindowResize).observe(canvas);
		const inputController = new InputController();
		setInputController(inputController);

		handleWindowResize();

		startDrawLoop(screenCanvasDrawController, 0);

		const lineToolActor = new Actor(TOOL_STATE_MACHINES[Tool.LINE]);
		lineToolActor.start();
		setActiveToolActor(lineToolActor);
	}
}

document.addEventListener('DOMContentLoaded', () => {
	initApplication();
});