Aislo/B07_DesignDetail/openwebcad/src/components/LayerManager.tsx

import type { FC, MouseEvent } from 'react';
import type { Layer } from '../App.types.ts';
import { getNewLayer } from '../helpers/get-new-layer.ts';
import {
	getActiveLayerId,
	getEntities,
	getLayers,
	getSelectedEntities,
	setEntities,
	setSelectedEntityIds,
} from '../state.ts';
import { Button } from './Button';
import { IconName } from './Icon/Icon.tsx';

interface LayerManagerProps {
	layers: Layer[];
	setLayers: (layers: Layer[]) => void;
	activeLayerId: string;
	setActiveLayerId: (layerId: string) => void;
	className?: string;
}

export const LayerManager: FC<LayerManagerProps> = ({
	layers,
	setLayers,
	activeLayerId,
	setActiveLayerId,
	className,
}) => {
	const handleLayerClick = (evt: MouseEvent, layerId: string) => {
		evt.stopPropagation();
		setActiveLayerId(layerId);
	};

	const handleSelectEntitiesOnLayer = (evt: MouseEvent, layerId: string): void => {
		evt.stopPropagation();
		const entitiesOnLayer = getEntities().filter((entity) => entity.layerId === layerId);
		setSelectedEntityIds(entitiesOnLayer.map((entity) => entity.id));
	};

	const handleAssignSelectionToLayer = (evt: MouseEvent, layerId: string): void => {
		evt.stopPropagation();
		const selectedEntities = getSelectedEntities();
		for (const entity of selectedEntities) {
			entity.layerId = layerId;
		}
		// 객체를 옮기는 것도 도면 편집이다 — 되돌리기·미저장 표시에 실어야 한다.
		setEntities([...getEntities()], true);
	};

	const handleDeleteLayer = (evt: MouseEvent, layerId: string): void => {
		evt.stopPropagation();
		const entitiesNotOnLayer = getEntities().filter((entity) => entity.layerId !== layerId);
		// 도면층을 지우면 그 위의 객체가 통째로 사라진다 — 되돌리기에 실어야 Ctrl+Z로 돌아온다.
		setEntities(entitiesNotOnLayer, true);
		setLayers(getLayers().filter((layer) => layer.id !== layerId));
		if (getActiveLayerId() === layerId) {
			setActiveLayerId(getLayers()[0].id);
		}
	};

	const handleShowHideLayer = (evt: MouseEvent, layerId: string): void => {
		evt.stopPropagation();
		const layer: Layer | undefined = layers.find((layer) => layer.id === layerId);
		if (!layer) {
			return;
		}
		layer.isVisible = !layer.isVisible;
		setLayers([...layers]);
		if (getActiveLayerId() === layerId && !layer.isVisible) {
			setActiveLayerId(getLayers()[0].id);
		}
	};

	const handleLockUnlockLayer = (evt: MouseEvent, layerId: string): void => {
		evt.stopPropagation();
		const layer: Layer | undefined = layers.find((layer) => layer.id === layerId);
		if (!layer) {
			return;
		}
		layer.isLocked = !layer.isLocked;
		setLayers([...layers]);
		if (getActiveLayerId() === layerId && layer.isLocked) {
			setActiveLayerId(getLayers()[0].id);
		}
	};

	const handleCreateNewLayer = (evt: MouseEvent): void => {
		evt.stopPropagation();
		const newLayer: Layer = getNewLayer();
		setLayers([...getLayers(), newLayer]);
		setActiveLayerId(newLayer.id);
	};

	return (
		<div className={`layer-manager flex flex-col ${className}`}>
			<div className="layers-wrapper flex flex-col gap-2">
				{layers.map((layer) => (
					<div className="layer flex flex-row relative" key={`layer-${layer.id}`}>
						<Button
							label={layer.name}
							title="Set this layer as active"
							active={activeLayerId === layer.id}
							onClick={(evt) => handleLayerClick(evt, layer.id)}
							className="flex-grow min-w-0 overflow-hidden"
							left={
								<>
									<Button
										iconName={layer.isVisible ? IconName.Eye : IconName.EyeClosed}
										title="Show/hide layer content"
										onClick={(evt) => handleShowHideLayer(evt, layer.id)}
										size="small"
										className="w-7 -ml-1"
										type="transparent"
										active={activeLayerId === layer.id}
									/>
									<Button
										iconName={layer.isLocked ? IconName.Lock : IconName.Unlock}
										title="Lock/Unlock layer content"
										onClick={(evt) => handleLockUnlockLayer(evt, layer.id)}
										size="small"
										className="w-7"
										type="transparent"
										active={activeLayerId === layer.id}
									/>
								</>
							}
							right={
								<>
									<Button
										iconName={IconName.Direction}
										title="Select entities on this layer"
										onClick={(evt) => handleSelectEntitiesOnLayer(evt, layer.id)}
										size="small"
										className="w-7"
										type="transparent"
										active={activeLayerId === layer.id}
									/>
									<Button
										iconName={IconName.Download}
										title="Assign current selection to layer"
										onClick={(evt) => handleAssignSelectionToLayer(evt, layer.id)}
										size="small"
										className="w-7"
										type="transparent"
										active={activeLayerId === layer.id}
									/>
									<Button
										iconName={IconName.FolderX}
										title="delete layer and content"
										onClick={(evt) => handleDeleteLayer(evt, layer.id)}
										size="small"
										className="w-7"
										type="transparent"
										active={activeLayerId === layer.id}
									/>
								</>
							}
						/>
					</div>
				))}
			</div>
			<Button
				label="새 도면층"
				iconName={IconName.FolderPlus}
				title="도면층을 새로 만든다"
				onClick={(evt) => handleCreateNewLayer(evt)}
				className="w-full mt-2"
			/>
		</div>
	);
};