From 4b02dde153ef8c71039733af288a4286f9770a7c Mon Sep 17 00:00:00 2001 From: ypshim Date: Tue, 3 Nov 2026 18:28:29 +0900 Subject: [PATCH] =?UTF-8?q?feat(plan):=20=E2=91=A1=20=EA=B5=90=EB=8C=80=20?= =?UTF-8?q?=EC=B9=B4=EB=93=9C=EB=A5=BC=203D=20=EC=B0=BD=20=EC=95=84?= =?UTF-8?q?=EB=9E=98=EB=A1=9C=20=EC=98=AE=EA=B8=B0=EA=B3=A0=20=EA=B5=90?= =?UTF-8?q?=EB=9F=89=EB=B0=9B=EC=B9=A8=20=EC=82=BD=EB=8F=84=203=EA=B0=9C?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 교대 카드를 왼쪽 목록 아래에서 가운데 3D 창 아래(교각 부재 카드 자리)로 옮김. 부재 · 교대 목록에서 고른 부재의 내용을 보여 주고, 머리줄에 부재 이름과 요약을 표시 - 왼쪽 편집 영역 정리: ②의 편집 버튼과 접히는 편집 영역을 없앰. 왼쪽에는 구조물 목록과 부재 · 교대 목록만 남김 - 교량받침 카드: 블럭 배치(분리 고정, 일체 비활성), 상세 보기(받침 ①–⑤), 삽도 3개(평면 · 단면 · 솔플레이트 상세, src/view/abut-bearing-svg.ts), ELEVATION TABLE, 솔플레이트 TABLE, 공통 · 규칙 입력, 검사 줄 - 삽도 테스트 3건 추가. 전체 650건 통과, 타입 검사·빌드 통과. 브라우저 시각 확인은 미실시 Co-Authored-By: Claude Opus 5.5 --- index.html | 24 +++----- src/main.ts | 93 ++++++++++++++++++++++------ src/style.css | 9 +++ src/view/abut-bearing-svg.ts | 108 +++++++++++++++++++++++++++++++++ tests/abut-bearing-svg.test.ts | 29 +++++++++ 5 files changed, 231 insertions(+), 32 deletions(-) create mode 100644 src/view/abut-bearing-svg.ts create mode 100644 tests/abut-bearing-svg.test.ts diff --git a/index.html b/index.html index c4bbcd3..ba2aa1d 100644 --- a/index.html +++ b/index.html @@ -183,20 +183,6 @@

교각·교대 목록

-

부재 · 교대

부재 · 5개

@@ -205,6 +191,16 @@
+ +

코핑

diff --git a/src/main.ts b/src/main.ts index b7baca7..d00497d 100644 --- a/src/main.ts +++ b/src/main.ts @@ -11,6 +11,7 @@ import { ABUT_DETAIL_LABELS, ABUT_SEGMENT_HEADER, abutInputRows, abutSegmentRows import { applyAbutEdit, applyBearingEdit, applyBearingRule, applyShapeEdit, ABUT_EDIT_FIELDS, BEARING_RULE_FIELDS, SHAPE_EDIT_FIELDS, restoreAbutDefault, setWingForm } from './core/abut/edit'; import { ABUT_SHAPE_DEFAULT, resolveShape } from './core/abut/shape'; import { abutShown, piersShown } from './core/abut/visibility'; +import { abutBearingPlanSvg, abutBearingSectionSvg, abutSolplateSvg, type AbutBearingDetail } from './view/abut-bearing-svg'; import { ABUT_BEARING_RULE_DEFAULT, ABUT_BLOCK_MM, @@ -145,6 +146,8 @@ const state = { abutActive: null as string | null, /** The 부재 · 교대 row whose card is open in ② (2026-11-03). */ abutMember: 'bearing' as AbutMemberId, + /** The bearing the ② 교량받침 삽도 draw (상세 보기). */ + abutBearingNo: 1, /** The editable part of the 교대 panel is open (2026-11-03). */ abutEditOpen: false, /** 교대 기본값 (가져온 그대로), for 기본값 복원. */ @@ -713,7 +716,8 @@ const ABUT_QA_NOTES = [ const ABUT_SLOTS = { shape: { root: 'abut-panel', name: 'abut-panel-name', input: 'abut-panel-input', toggle: 'abut-panel-edit-toggle', editor: 'abut-panel-editor', summary: 'abut-panel-summary', basic: 'abut-panel-basic', bearings: 'abut-panel-bearings', shape: 'abut-panel-shape', msg: 'abut-panel-msg', prefix: 'abs' }, - plan: { wing: 'abut-panel-plan-wing', root: 'abut-panel-plan',name: 'abut-panel-plan-name', toggle: 'abut-panel-plan-edit-toggle', editor: 'abut-panel-plan-editor', basic: 'abut-panel-plan-basic', bearings: 'abut-panel-plan-bearings', shape: 'abut-panel-plan-shape', msg: 'abut-panel-plan-msg', prefix: 'abp' }, + // ② has no 편집 toggle and no basic items: the card sits under the 3D view and shows the picked member (2026-11-03). + plan: { wing: 'abut-panel-plan-wing', root: 'abut-panel-plan', name: 'abut-panel-plan-name', bearings: 'abut-panel-plan-bearings', shape: 'abut-panel-plan-shape', msg: 'abut-panel-plan-msg', prefix: 'abp' }, } as const; /** Shows the 교대 입력 in place of the pier info when an abutment is selected (2026-11-03). */ @@ -779,7 +783,18 @@ function fillAbutBearingCard( } return tbl; }; - box.append(el('p', '블럭 배치: 분리 (교대 일체 블럭은 규칙 미정 — 교좌면이 계단이라 분리 고정)', 'muted small')); + // 블럭 배치 (시안): 분리 고정, 일체는 규칙 미정이라 고를 수 없다. + const layout = el('div', undefined, 'abut-bearing-pick'); + layout.append(el('span', '블럭 배치', 'muted small')); + const sep = el('button', '분리', 'btn small'); + sep.type = 'button'; + sep.setAttribute('aria-pressed', 'true'); + const one = el('button', '일체', 'btn small'); + one.type = 'button'; + one.disabled = true; + one.title = '교대 일체 블럭은 규칙 미정 (교좌면이 계단이라 분리 고정)'; + layout.append(sep, one, el('span', '교대 일체 블럭은 규칙 미정 (교좌면이 계단이라 분리 고정)', 'muted small')); + box.append(layout); let model: AbutModel; let members: AbutMembers; try { @@ -790,11 +805,46 @@ function fillAbutBearingCard( return; } const m3 = (v: number) => v.toFixed(3); + const elev = abutElevationRows(model, rule); + const sol = abutSolplateRows(model, rule, rec.slopeI); + // 상세 보기 (받침 ①–⑤): the three 삽도 draw the picked bearing. + const pickNo = elev.some((r) => r.no === state.abutBearingNo) ? state.abutBearingNo : elev[0].no; + const picker = el('div', undefined, 'abut-bearing-pick'); + picker.append(el('span', '상세 보기 (받침)', 'muted small')); + for (const r of elev) { + const b = el('button', r.seg, 'btn small'); + b.type = 'button'; + b.setAttribute('aria-pressed', String(r.no === pickNo)); + b.addEventListener('click', () => { + state.abutBearingNo = r.no; + renderAll(); + }); + picker.append(b); + } + box.append(picker); + const er = elev.find((r) => r.no === pickNo)!; + const sr = sol.find((r) => r.no === pickNo)!; + const detail: AbutBearingDetail = { + no: er.no, blockMm: ABUT_BLOCK_MM, padMm: ABUT_PAD_PLAN_MM, A: er.A, B: er.B, L: sr.L, W: sr.W, + h1: er.h1, h2: er.h2, h3: er.h3, h4: er.h4, T1: sr.T1, T2: sr.T2, rotDeg: er.rotDeg, S: sr.S, seatEl: er.seatEl, z: er.z, + }; + const figs = el('div', undefined, 'abut-bearing-figs'); + for (const [svg, caption] of [ + [abutBearingPlanSvg(detail), '평면 · 점선 = 몰탈패드, 주황 점선 = 솔플레이트'], + [abutBearingSectionSvg(detail), '단면 · 교축 방향 · E = h1 + h2 + h3 + h4'], + [abutSolplateSvg(detail), '솔플레이트 상세 · 가정'], + ]) { + const fig = el('figure', undefined, 'abut-fig'); + fig.innerHTML = svg; + fig.append(el('figcaption', caption, 'muted small')); + figs.append(fig); + } + box.append(figs); box.append(el('p', '받침 ELEVATION TABLE (mm, EL·위치는 m) · 거리는 IP3(① 쪽)에서 · h3·h4는 가정 (QA-15)', 'lbl')); box.append( table( ['No.', '위치 s', '구간', '교좌면 EL', 'h1 블럭', 'h2 패드', 'z = EL.X', 'h3 받침', 'h4 솔플', 'E', '솔플 상면 EL', 'A', 'B', '블럭 ~ 계단 경계', '방위각 CAD / 진북 (°)', '블럭 회전 (°)'], - abutElevationRows(model, rule).map((r) => [ + elev.map((r) => [ String(r.no), m3(r.sFromIp3M), r.seg, m3(r.seatEl), String(r.h1), String(r.h2), m3(r.z), String(r.h3), String(r.h4), String(r.E), m3(r.solplateTopEl), String(r.A), String(r.B), r.stepGapM === null ? '—' : m3(r.stepGapM), r.azimuthCadDeg === null || r.azimuthNorthDeg === null ? '입력 없음' : `${r.azimuthCadDeg.toFixed(3)} / ${r.azimuthNorthDeg.toFixed(3)}`, @@ -806,7 +856,7 @@ function fillAbutBearingCard( box.append( table( ['No.', 'S (%)', 'L', 'W', 'T', 'T1', 'T2', '검산 T1 − T2 ≈ L·|S|'], - abutSolplateRows(model, rule, rec.slopeI).map((r) => [String(r.no), r.S.toFixed(3), String(r.L), String(r.W), String(r.T), String(r.T1), String(r.T2), r.check]), + sol.map((r) => [String(r.no), r.S.toFixed(3), String(r.L), String(r.W), String(r.T), String(r.T1), String(r.T2), r.check]), ), ); box.append(el('p', `공통 · 규칙 — 블럭 평면 ${ABUT_BLOCK_MM} × ${ABUT_BLOCK_MM} (기본값) · 몰탈패드 ${ABUT_PAD_PLAN_MM} × ${ABUT_PAD_PLAN_MM} × 50 (기본값) · 블럭 높이 = min(z) − 교좌면 (계산)`, 'muted small')); @@ -846,11 +896,15 @@ function fillAbutBearingCard( /** Shows only the card of the open row in the ② 교대 editor; the basic items stay visible. */ function applyAbutMemberCard(rec: AbutRecord): void { const member = state.abutMember; - const group = (id: string) => $(id).closest('details') ?? $(id); - group('abut-panel-plan-bearings').hidden = member !== 'bearing'; - group('abut-panel-plan-shape').hidden = member !== 'shape'; + $('abut-panel-plan-bearings').hidden = member !== 'bearing'; + $('abut-panel-plan-shape').hidden = member !== 'shape'; $('abut-panel-plan-wing').hidden = member !== 'wing'; - $('abut-panel-plan-msg').textContent = ABUT_MEMBER_EDITABLE[member] ? '' : `${rec.name} 입력은 2단계에서 추가합니다. 현재 값만 보여 줍니다.`; + // The card title is the picked row; its 요약 follows the name (시안 머리줄). + const slabWidth = abutSummaryRows(rec).find(([label]) => label === '접속슬래브 폭')?.[1] ?? '—'; + const row = abutMemberRows(rec, slabWidth).find((r) => r.id === member); + $('abut-panel-plan-member').textContent = row?.label ?? ''; + $('abut-panel-plan-name').textContent = `${rec.name} · ${row?.summary ?? ''}`; + $('abut-panel-plan-msg').textContent = ABUT_MEMBER_EDITABLE[member] ? '' : `${rec.name}: 이 부재의 입력은 2단계에서 추가합니다. 현재 값만 보여 줍니다.`; } /** Fills one 교대 입력 panel: the basic items, the 받침 values and the 형상 values. Each change is checked and applied. */ @@ -865,16 +919,19 @@ function fillAbutSlot(slot: (typeof ABUT_SLOTS)[keyof typeof ABUT_SLOTS], rec: A if ('input' in slot) fillList($(slot.input), abutInputRows(rec)); // ② has no 상세 (계산값) block (2026-11-03); ① keeps it. if ('summary' in slot) fillList($(slot.summary), abutSummaryRows(rec).filter(([label]) => ABUT_DETAIL_LABELS.includes(label))); - // 편집 opens the editable fields; they stay closed until asked for (2026-11-03). - const toggle = $(slot.toggle); - toggle.textContent = state.abutEditOpen ? '닫기' : '편집'; - toggle.setAttribute('aria-expanded', String(state.abutEditOpen)); - toggle.onclick = () => { - state.abutEditOpen = !state.abutEditOpen; - renderAll(); - }; - $(slot.editor).hidden = !state.abutEditOpen; - const basic = $(slot.basic); + // 편집 opens the editable fields in ①; they stay closed until asked for (2026-11-03). ② has no toggle. + if ('toggle' in slot) { + const toggle = $(slot.toggle); + toggle.textContent = state.abutEditOpen ? '닫기' : '편집'; + toggle.setAttribute('aria-expanded', String(state.abutEditOpen)); + toggle.onclick = () => { + state.abutEditOpen = !state.abutEditOpen; + renderAll(); + }; + $(slot.editor).hidden = !state.abutEditOpen; + } + // ② has no basic items; a detached box keeps the shared code simple. + const basic = 'basic' in slot ? $(slot.basic) : el('div'); const bearings = $(slot.bearings); const shape = $(slot.shape); const msg = $(slot.msg); diff --git a/src/style.css b/src/style.css index 5fd2bc4..6da6275 100644 --- a/src/style.css +++ b/src/style.css @@ -901,3 +901,12 @@ body { background: #eef1f4; font-family: 'Noto Sans KR', system-ui, sans-serif; #abut-panel-plan-bearings > .abut-seg { display: block; overflow-x: auto; border-collapse: collapse; font-size: 12px; } #abut-panel-plan-bearings > .abut-seg th, #abut-panel-plan-bearings > .abut-seg td { border-bottom: 1px solid #e6eaef; padding: 4px 6px; text-align: right; white-space: nowrap; font-family: 'JetBrains Mono', ui-monospace, monospace; } #abut-panel-plan-bearings > .abut-seg th { color: #55606e; font-weight: 500; font-family: inherit; } + +/* ② 교대 카드 under the 3D view (2026-11-03): pickers, the three 받침 삽도 side by side, full-width rows. */ +#abut-panel-plan .abut-bearing-pick { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } +#abut-panel-plan .abut-bearing-pick .btn[aria-pressed='true'] { background: #1f5fa8; border-color: #1f5fa8; color: #ffffff; } +#abut-panel-plan .abut-bearing-figs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } +#abut-panel-plan .abut-fig { margin: 0; background: #f6f8fa; border: 1px solid #d5dbe2; border-radius: 6px; padding: 6px; } +#abut-panel-plan .abut-fig svg { display: block; width: 100%; height: auto; } +#abut-panel-plan > .edit-row { padding: 0 12px 10px; } +@media (max-width: 900px) { #abut-panel-plan .abut-bearing-figs { grid-template-columns: minmax(0, 1fr); } } diff --git a/src/view/abut-bearing-svg.ts b/src/view/abut-bearing-svg.ts new file mode 100644 index 0000000..0051e9f --- /dev/null +++ b/src/view/abut-bearing-svg.ts @@ -0,0 +1,108 @@ +/** + * 교대 받침 상세 삽도 (2026-11-03, 시안 ② 교량받침 카드): 평면, 교축 방향 단면, 솔플레이트 상세. 순수 문자열 함수. + * 입력은 받침 표에서 이미 계산한 값뿐이다(교대 모델을 다시 읽지 않는다). 치수는 mm, EL은 m. + */ + +export interface AbutBearingDetail { + no: number; + /** 블럭 평면 (정사각), 몰탈패드 평면 (정사각), mm. */ + blockMm: number; + padMm: number; + /** 받침 A × B, 솔플레이트 L × W (mm). */ + A: number; + B: number; + L: number; + W: number; + /** 높이 (mm): 블럭 콘크리트 h1, 패드 h2, 받침 h3, 솔플레이트 h4 = T. */ + h1: number; + h2: number; + h3: number; + h4: number; + T1: number; + T2: number; + /** 블럭 평면 회전 (deg), 교대축 직각 기준. */ + rotDeg: number; + /** 솔플레이트 경사 (%). */ + S: number; + seatEl: number; + z: number; +} + +const INK = '#18212b'; +const MUTED = '#55606e'; +const ORANGE = '#c46a1a'; +const text = (x: number, y: number, s: string, anchor = 'middle', fill = INK) => + `${s}`; +const square = (cx: number, cy: number, w: number, h: number, style: string) => + ``; + +/** 평면: 블럭 1200, 몰탈패드 1000 (점선), 솔플레이트 L × W (주황 점선), 받침 A × B. 블럭은 받침 방위각만큼 돈다. */ +export function abutBearingPlanSvg(d: AbutBearingDetail): string { + const k = 0.17; // px per mm + const cx = 150; + const cy = 130; + const turn = `transform="rotate(${(-d.rotDeg).toFixed(3)} ${cx} ${cy})"`; + return [ + ``, + ``, + square(cx, cy, d.blockMm * k, d.blockMm * k, `fill="#dfe5ec" stroke="${MUTED}"`), + square(cx, cy, d.padMm * k, d.padMm * k, `fill="none" stroke="${MUTED}" stroke-dasharray="4 3"`), + square(cx, cy, d.L * k, d.W * k, `fill="none" stroke="${ORANGE}" stroke-dasharray="5 3"`), + square(cx, cy, d.A * k, d.B * k, `fill="#b9c3ce" stroke="${INK}"`), + ``, + text(cx, cy - (d.blockMm * k) / 2 - 8, `${d.blockMm}`), + text(cx, cy + 4, `${d.A} × ${d.B}`), + text(cx, cy + (d.blockMm * k) / 2 + 16, `솔플 ${d.L} × ${d.W} · 패드 ${d.padMm}`, 'middle', MUTED), + text(cx, 262, `받침 ${d.no} · 회전 ${d.rotDeg.toFixed(2)}° (방위각)`, 'middle', MUTED), + '', + ].join(''); +} + +/** 교축 방향 단면 (높이 2배 과장): 블럭 h1, 패드 h2, 받침 h3, 솔플레이트 h4. E = h1 + h2 + h3 + h4. */ +export function abutBearingSectionSvg(d: AbutBearingDetail): string { + const kx = 0.17; + const ky = 0.34; // 2× exaggerated heights + const cx = 150; + const base = 215; + const E = d.h1 + d.h2 + d.h3 + d.h4; + const layer = (bottom: number, h: number, w: number, style: string) => + ``; + const at = (mm: number) => base - mm * ky; + const right = cx + (d.blockMm * kx) / 2 + 6; + return [ + ``, + ``, + layer(0, d.h1, d.blockMm, `fill="#dfe5ec" stroke="${MUTED}"`), + layer(d.h1, d.h2, d.padMm, `fill="#c9d1da" stroke="${MUTED}"`), + layer(d.h1 + d.h2, d.h3, d.A, `fill="#b9c3ce" stroke="${INK}"`), + layer(d.h1 + d.h2 + d.h3, d.h4, d.L, `fill="#f0c9a0" stroke="${ORANGE}"`), + text(right, at(d.h1 / 2) + 4, `h1 ${d.h1}`, 'start'), + text(right, at(d.h1 + d.h2 / 2) + 4, `h2 ${d.h2}`, 'start'), + text(right, at(d.h1 + d.h2 + d.h3 / 2) + 4, `h3 ${d.h3}`, 'start'), + text(right, at(E - d.h4 / 2) + 4, `h4 ${d.h4}`, 'start'), + text(cx, at(E) - 10, `E = ${E}`), + text(24, base + 16, `교좌면 ${d.seatEl.toFixed(3)}`, 'start', MUTED), + text(24, at(d.h1 + d.h2) - 4, `z ${d.z.toFixed(3)}`, 'start', MUTED), + text(cx, 244, '교축 방향 · 높이 2배 과장', 'middle', MUTED), + '', + ].join(''); +} + +/** 솔플레이트 상세: 길이 L, 두께 T1 → T2 (경사 S). 두께는 과장해서 그린다. */ +export function abutSolplateSvg(d: AbutBearingDetail): string { + const kx = 0.3; + const ky = 2.2; // thickness exaggerated + const x0 = 45; + const x1 = x0 + d.L * kx; + const base = 120; + return [ + ``, + ``, + text(x0 - 4, base - (d.T1 * ky) / 2 + 4, `T1 ${d.T1}`, 'end'), + text(x1 + 4, base - (d.T2 * ky) / 2 + 4, `T2 ${d.T2}`, 'start'), + text((x0 + x1) / 2, base + 18, `L ${d.L} · W ${d.W}`), + text((x0 + x1) / 2, base - Math.max(d.T1, d.T2) * ky - 10, `S ${d.S.toFixed(3)} % · T ${d.h4}`), + text(165, 180, '솔플레이트 상세 · 두께 과장 · 가정 (QA-15)', 'middle', MUTED), + '', + ].join(''); +} diff --git a/tests/abut-bearing-svg.test.ts b/tests/abut-bearing-svg.test.ts new file mode 100644 index 0000000..4f70318 --- /dev/null +++ b/tests/abut-bearing-svg.test.ts @@ -0,0 +1,29 @@ +import { describe, expect, it } from 'vitest'; +import { abutBearingPlanSvg, abutBearingSectionSvg, abutSolplateSvg, type AbutBearingDetail } from '../src/view/abut-bearing-svg'; + +// 운곡교 A1 받침 ① (교대 받침 표의 값: 블럭 125 = 75 + 50, h3 181, T 30, L 800, T1 38 / T2 22, 회전 −4.42°). +const d: AbutBearingDetail = { + no: 1, blockMm: 1200, padMm: 1000, A: 700, B: 640, L: 800, W: 740, + h1: 75, h2: 50, h3: 181, h4: 30, T1: 38, T2: 22, rotDeg: -4.42, S: -1.91, seatEl: 44.367, z: 44.492, +}; + +describe('교대 받침 삽도 (시안 ② 교량받침 카드)', () => { + it('평면: block, pad, solplate and bearing sizes, turned by the bearing azimuth', () => { + const svg = abutBearingPlanSvg(d); + expect(svg).toContain('700 × 640'); + expect(svg).toContain('솔플 800 × 740 · 패드 1000'); + expect(svg).toContain('rotate(4.420 150 130)'); + expect(svg.match(/ { + const svg = abutBearingSectionSvg(d); + for (const s of ['h1 75', 'h2 50', 'h3 181', 'h4 30', 'E = 336', '교좌면 44.367', 'z 44.492']) expect(svg).toContain(s); + expect(svg.match(/ { + const svg = abutSolplateSvg(d); + for (const s of ['T1 38', 'T2 22', 'L 800 · W 740', 'S -1.910 %']) expect(svg).toContain(s); + }); +});