From 8b385a62b0ea14ae0aea89d28986e7ddfcd45a10 Mon Sep 17 00:00:00 2001 From: umsangdon Date: Sat, 29 Aug 2026 19:15:07 +0900 Subject: [PATCH] =?UTF-8?q?fix(B06):=20=EC=B9=B4=EB=93=9C=EB=A7=88?= =?UTF-8?q?=EB=8B=A4=20=EB=8B=A4=EB=A5=B8=20clipPath=20=EC=9D=B4=EB=A6=84?= =?UTF-8?q?=EC=9D=84=20=EC=8D=A8=20=ED=95=B4=EC=B9=AD=EC=9D=B4=20=EC=82=AC?= =?UTF-8?q?=EB=9D=BC=EC=A7=80=EC=A7=80=20=EC=95=8A=EA=B2=8C=20=ED=95=9C?= =?UTF-8?q?=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit clipPath id는 문서 전역인데 이름을 벽 키 + 배면 offset으로 지어, 같은 벽을 소유 측점과 연동 측점이 함께 그리면 이름이 겹쳤다. url(#id)는 문서에서 처음 만난 clipPath를 쓰므로 뒤 카드의 해칭이 앞 카드 좌표로 잘려 통째로 사라졌다. 벽을 옮기면 두 카드가 같은 offset으로 다시 겹쳐 증상이 재발했다. 측정(14+0.0 화면): 6개 중 4개 id가 중복 → 수정 후 10개 전부 고유, 모든 카드의 해칭 그룹이 화면에 폭을 갖는다. Co-Authored-By: Claude Opus 5 (1M context) --- B06_Section/B06_Section_UI_Cross_Wall_Hatch.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/B06_Section/B06_Section_UI_Cross_Wall_Hatch.ts b/B06_Section/B06_Section_UI_Cross_Wall_Hatch.ts index 85c9982a..717aa941 100644 --- a/B06_Section/B06_Section_UI_Cross_Wall_Hatch.ts +++ b/B06_Section/B06_Section_UI_Cross_Wall_Hatch.ts @@ -22,6 +22,14 @@ import type { WallLayout } from "./B06_Section_UI_Cross_Culvert_Types"; const SVG_NS = "http://www.w3.org/2000/svg"; const HATCH_CLASS = "b06-chart__culvert-stone"; +/** + * clipPath id 일련번호 — id는 **문서 전역**이라 같은 벽을 소유 측점과 연동 측점이 + * 함께 그리면 이름이 겹쳤다. `url(#id)`는 문서에서 **처음 만난** clipPath를 쓰므로, + * 뒤 카드의 해칭이 앞 카드 좌표로 잘려 통째로 사라졌다(2026-08-30 사용자: 기준 + * 측점 벽을 옮기니 연동 측점 형태 표현이 다 없어졌다). 카드·다시 그리기마다 새 번호. + */ +let clipSeq = 0; + /** 형태 문자열 → 표현 갈래. 판정 순서는 좁은 말(돌망태·바자)부터. */ export type WallHatch = "dry" | "wet" | "concrete" | "gabion" | "log" | "wattle"; @@ -174,7 +182,8 @@ export function appendWallHatch( ), ); - const clipId = `b06-revet-clip-${keyId}-${Math.round(wall.backOffset * 100)}`; + clipSeq += 1; + const clipId = `b06-revet-clip-${keyId}-${clipSeq}`; const clip = document.createElementNS(SVG_NS, "clipPath"); clip.setAttribute("id", clipId); const clipShape = document.createElementNS(SVG_NS, "polygon");