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

/** 특성 팔레트 본문 — 선택 객체의 값을 읽고 바로 고친다 (PROPERTIES) */
import type { FC } from 'react';
import type { Entity } from '../entities/Entity';
import { polylineLength, sampleEntityPoints } from '../helpers/geometry/sample-entity';
import {
	getEntities,
	getLayers,
	getSelectedEntities,
	setEntities,
} from '../state';
import { dashToLineType, LINE_TYPES, LINE_WIDTHS } from './RibbonWidgets';

interface PropertiesEditorProps {
	compact?: boolean;
}

function applyToSelection(mutate: (entity: Entity) => void): void {
	const selected = getSelectedEntities();
	if (!selected.length) return;
	for (const entity of selected) mutate(entity);
	setEntities([...getEntities()], true);
}

/** 여러 객체가 값이 다르면 '*가지각색' 대신 첫 객체 값을 보여 준다 (AutoCAD와 같은 관행) */
export const PropertiesEditor: FC<PropertiesEditorProps> = ({ compact = false }) => {
	const selected = getSelectedEntities();
	const layers = getLayers();
	const first = selected[0];

	if (!first) {
		return <p className="cad-properties__empty">선택된 객체가 없습니다.</p>;
	}

	const points = sampleEntityPoints(first);
	const box = first.getBoundingBox();

	return (
		<div className="cad-properties-editor" data-compact={compact}>
			<div className="cad-properties-editor__title">
				{selected.length === 1 ? first.getType() : `여러 객체 (${selected.length})`}
			</div>

			<label>
				<span>색상</span>
				<input
					type="color"
					value={first.lineColor}
					onChange={(event) =>
						applyToSelection((entity) => {
							entity.lineColor = event.target.value;
						})
					}
				/>
			</label>

			<label>
				<span>선가중치</span>
				<select
					value={first.lineWidth}
					onChange={(event) =>
						applyToSelection((entity) => {
							entity.lineWidth = Number(event.target.value);
						})
					}
				>
					{LINE_WIDTHS.map((width) => (
						<option key={width} value={width}>
							{width}px
						</option>
					))}
				</select>
			</label>

			<label>
				<span>선종류</span>
				<select
					value={dashToLineType(first.lineDash)}
					onChange={(event) => {
						const dash = LINE_TYPES.find((type) => type.value === event.target.value)?.dash;
						applyToSelection((entity) => {
							entity.lineDash = dash ? [...dash] : undefined;
						});
					}}
				>
					{LINE_TYPES.map((type) => (
						<option key={type.value} value={type.value}>
							{type.label}
						</option>
					))}
				</select>
			</label>

			<label>
				<span>도면층</span>
				<select
					value={first.layerId}
					onChange={(event) =>
						applyToSelection((entity) => {
							entity.layerId = event.target.value;
						})
					}
				>
					{layers.map((layer) => (
						<option key={layer.id} value={layer.id}>
							{layer.name}
						</option>
					))}
				</select>
			</label>

			<label>
				<span>투명도</span>
				<input
					type="number"
					min={0}
					max={90}
					step={5}
					value={Math.round((1 - (first.opacity ?? 1)) * 100)}
					onChange={(event) => {
						const percent = Math.min(90, Math.max(0, Number(event.target.value)));
						applyToSelection((entity) => {
							entity.opacity = 1 - percent / 100;
						});
					}}
				/>
			</label>

			{!compact && (
				<dl className="cad-properties-editor__readout">
					<div>
						<dt>길이</dt>
						<dd>{polylineLength(points).toFixed(3)}</dd>
					</div>
					<div>
						<dt>크기</dt>
						<dd>
							{(box.xmax - box.xmin).toFixed(3)} × {(box.ymax - box.ymin).toFixed(3)}
						</dd>
					</div>
					<div>
						<dt>시작점</dt>
						<dd>
							{points[0] ? `${points[0].x.toFixed(2)}, ${points[0].y.toFixed(2)}` : '-'}
						</dd>
					</div>
					<div>
						<dt>그룹</dt>
						<dd>{first.groupId ? '있음' : '없음'}</dd>
					</div>
				</dl>
			)}
		</div>
	);
};