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

/** 리본 안에 들어가는 위젯 패널 — 특성(색·굵기·선종류), 도면층, 문자 스타일 */
import type { FC } from 'react';
import { runCommandInput } from '../commands/run-command';
import type { Entity } from '../entities/Entity';
import { EntityName } from '../entities/Entity';
import type { TextEntity } from '../entities/TextEntity';
import {
	getActiveLayerId,
	getActiveLineColor,
	getActiveLineDash,
	getActiveLineWidth,
	getActiveTextStyle,
	getEntities,
	getLayers,
	getSelectedEntities,
	setActiveLayerId,
	setActiveLineColor,
	setActiveLineDash,
	setActiveLineWidth,
	setActiveTextStyle,
	setEntities,
} from '../state';

export const LINE_TYPES: { value: string; label: string; dash: number[] | undefined }[] = [
	{ value: 'solid', label: '실선', dash: undefined },
	{ value: 'dashed', label: '파선', dash: [10, 5] },
	{ value: 'dashdot', label: '1점쇄선', dash: [12, 4, 2, 4] },
	{ value: 'dotted', label: '점선', dash: [2, 4] },
];

export const LINE_WIDTHS = [1, 2, 3, 4, 5];

const FONT_FAMILIES = ['Noto Sans KR', 'Malgun Gothic', 'Pretendard', 'Arial', 'monospace'];

export const dashToLineType = (dash: number[] | undefined): string =>
	LINE_TYPES.find((type) => JSON.stringify(type.dash) === JSON.stringify(dash))?.value ?? 'solid';

/** 선택 객체가 있으면 즉시 적용하고, 없으면 이후 그리기 기본값만 바꾼다. */
function applyToSelection(mutate: (entity: Entity) => void, trackInUndoStack = true): boolean {
	const selected = getSelectedEntities();
	if (!selected.length) return false;
	for (const entity of selected) {
		mutate(entity);
	}
	setEntities([...getEntities()], trackInUndoStack);
	return true;
}

/**
 * 색 선택기는 드래그하는 내내 값 변경을 쏜다. 그 하나하나를 되돌리기·변경통지에 실으면
 * 색 한 번 고르는 동안 수십 건이 나간다(2026-09-01 지적). 끄는 동안에는 화면만 칠하고,
 * 멎은 뒤 한 번만 되돌리기·통지에 싣는다.
 */
const COLOR_COMMIT_DELAY_MS = 350;
let colorCommitTimer: ReturnType<typeof setTimeout> | undefined;
function paintNowCommitLater(mutate: (entity: Entity) => void): void {
	applyToSelection(mutate, false); // 화면만 — 되돌리기·미저장 표시는 아직
	clearTimeout(colorCommitTimer);
	colorCommitTimer = setTimeout(() => {
		applyToSelection(() => {}, true); // 멎었다 — 이번 한 번만 실어 보낸다
	}, COLOR_COMMIT_DELAY_MS);
}

export const PropertiesWidget: FC = () => {
	const lineColor = getActiveLineColor();
	const lineWidth = getActiveLineWidth();
	const lineType = dashToLineType(getActiveLineDash());

	return (
		<div className="cad-ribbon-props">
			<label className="cad-prop" title="객체 색상 (COLOR)">
				<span>색상</span>
				<input
					type="color"
					value={lineColor}
					onChange={(event) => {
						const color = event.target.value;
						setActiveLineColor(color);
						paintNowCommitLater((entity) => {
							entity.lineColor = color;
						});
					}}
				/>
			</label>
			<label className="cad-prop" title="선가중치 (LWEIGHT)">
				<span>선가중치</span>
				<select
					value={lineWidth}
					onChange={(event) => {
						const width = Number(event.target.value);
						setActiveLineWidth(width);
						applyToSelection((entity) => {
							entity.lineWidth = width;
						});
					}}
				>
					{LINE_WIDTHS.map((width) => (
						<option key={width} value={width}>
							{width}px
						</option>
					))}
				</select>
			</label>
			<label className="cad-prop" title="선종류 (LINETYPE)">
				<span>선종류</span>
				<select
					value={lineType}
					onChange={(event) => {
						const dash = LINE_TYPES.find((type) => type.value === event.target.value)?.dash;
						setActiveLineDash(dash ? [...dash] : undefined);
						applyToSelection((entity) => {
							entity.lineDash = dash ? [...dash] : undefined;
						});
					}}
				>
					{LINE_TYPES.map((type) => (
						<option key={type.value} value={type.value}>
							{type.label}
						</option>
					))}
				</select>
			</label>
		</div>
	);
};

export const LayersWidget: FC = () => {
	const layers = getLayers();
	const activeLayerId = getActiveLayerId();

	return (
		<div className="cad-ribbon-props">
			<label className="cad-prop cad-prop--wide" title="현재 도면층">
				<span>현재 도면층</span>
				<select value={activeLayerId} onChange={(event) => setActiveLayerId(event.target.value)}>
					{/* 잠금 도면층(배경)은 고를 수 없으니 보여 주지 않는다. 현재 층이 잠금이면
					    (전부 잠금인 도면) 표시가 비지 않게 그 항목만 남긴다. */}
					{layers
						.filter((layer) => !layer.isLocked || layer.id === activeLayerId)
						.map((layer) => (
							<option key={layer.id} value={layer.id}>
								{layer.name}
							</option>
						))}
				</select>
			</label>
			<button
				type="button"
				className="cad-tool"
				data-size="small"
				title="도면층 특성 관리자 (LAYER)"
				onClick={() => runCommandInput('LAYER')}
			>
				<span className="cad-tool__glyph">▤</span>
				<span className="cad-tool__label">도면층</span>
			</button>
		</div>
	);
};

export const TextStyleWidget: FC = () => {
	const textStyle = getActiveTextStyle();

	const handle = (patch: Partial<typeof textStyle>, live = false) => {
		setActiveTextStyle(patch);
		const mutate = (entity: Entity) => {
			if (entity.getType() === EntityName.Text) {
				(entity as TextEntity).setTextOptions(patch);
			}
		};
		// 색만 드래그 중 연발한다 — 나머지 항목은 한 번 고르면 끝이라 바로 싣는다.
		if (live) paintNowCommitLater(mutate);
		else applyToSelection(mutate);
	};

	return (
		<div className="cad-ribbon-props">
			<label className="cad-prop cad-prop--wide" title="문자 글꼴 (STYLE)">
				<span>글꼴</span>
				<select
					value={textStyle.fontFamily}
					onChange={(event) => handle({ fontFamily: event.target.value })}
				>
					{FONT_FAMILIES.map((family) => (
						<option key={family} value={family}>
							{family}
						</option>
					))}
				</select>
			</label>
			<label className="cad-prop" title="문자 높이">
				<span>크기</span>
				<input
					type="number"
					min={4}
					max={120}
					value={textStyle.fontSize}
					onChange={(event) => {
						const size = Number(event.target.value);
						if (Number.isFinite(size) && size > 0) handle({ fontSize: size });
					}}
				/>
			</label>
			<label className="cad-prop" title="굵게">
				<span>굵게</span>
				<input
					type="checkbox"
					checked={textStyle.bold}
					onChange={(event) => handle({ bold: event.target.checked })}
				/>
			</label>
			<label className="cad-prop" title="기울임">
				<span>기울임</span>
				<input
					type="checkbox"
					checked={textStyle.italic}
					onChange={(event) => handle({ italic: event.target.checked })}
				/>
			</label>
			<label className="cad-prop" title="문자 색상">
				<span>색상</span>
				<input
					type="color"
					value={textStyle.textColor}
					onChange={(event) => handle({ textColor: event.target.value }, true)}
				/>
			</label>
		</div>
	);
};