diff --git a/B07_DesignDetail/openwebcad/src/App.css b/B07_DesignDetail/openwebcad/src/App.css index 7c36bfacc..21519acc1 100644 --- a/B07_DesignDetail/openwebcad/src/App.css +++ b/B07_DesignDetail/openwebcad/src/App.css @@ -334,6 +334,8 @@ body > canvas[data-id="canvas"] { border-radius: 3px; cursor: pointer; } +/* 고른 것들 색이 다름(488) — 빈 견본(투명 · 점선 테두리) */ +input[type="color"][data-mixed="true"]::-webkit-color-swatch { background: transparent !important; border: 1px dashed var(--cad-text-muted); } /* 위젯 패널 안의 작은 명령 버튼은 한 줄 높이에 맞춘다 */ .cad-ribbon-props .cad-tool[data-size="small"] { height: 22px; diff --git a/B07_DesignDetail/openwebcad/src/components/PropertiesEditor.tsx b/B07_DesignDetail/openwebcad/src/components/PropertiesEditor.tsx index 2512617f9..ae9191758 100644 --- a/B07_DesignDetail/openwebcad/src/components/PropertiesEditor.tsx +++ b/B07_DesignDetail/openwebcad/src/components/PropertiesEditor.tsx @@ -2,25 +2,31 @@ 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'; +import { + commonValue, + LINE_TYPES, + LINE_WIDTHS, + restyle, + selectionLineStyle, + styleTargets, +} from '../helpers/selection-style'; +import { getLayers, getSelectedEntities } from '../state'; 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); -} +/** 고른 것을 사본으로 바꿈 — 되돌리기 한 칸(488) · 선 특성은 글 뺌 */ +const applyToSelection = (mutate: (entity: Entity) => void) => restyle(getSelectedEntities(), mutate); +const applyToLines = (mutate: (entity: Entity) => void) => + restyle(styleTargets(getSelectedEntities()), mutate); -/** 여러 객체가 값이 다르면 '*가지각색' 대신 첫 객체 값을 보여 준다 (AutoCAD와 같은 관행) */ +/** 여러 객체가 값이 다르면 빈 칸(488 · 리본과 같은 규칙 · 고르면 모두에 적용) */ export const PropertiesEditor: FC = ({ compact = false }) => { const selected = getSelectedEntities(); const layers = getLayers(); const first = selected[0]; + const view = selectionLineStyle(); if (!first) { return

선택된 객체가 없습니다.

; @@ -39,9 +45,10 @@ export const PropertiesEditor: FC = ({ compact = false }) 색상 - applyToSelection((entity) => { + applyToLines((entity) => { entity.lineColor = event.target.value; }) } @@ -51,13 +58,14 @@ export const PropertiesEditor: FC = ({ compact = false })