diff --git a/B06_Section/B06_Section_UI_Cross_Detail_Select.ts b/B06_Section/B06_Section_UI_Cross_Detail_Select.ts index 057f8c09c..f6f8f101e 100644 --- a/B06_Section/B06_Section_UI_Cross_Detail_Select.ts +++ b/B06_Section/B06_Section_UI_Cross_Detail_Select.ts @@ -6,7 +6,8 @@ * 하나 = 길이 · 경사비율 / 수평 · 높이 · 여럿 = 길이 합 / 닫힌 넓이 · 둘레(안 닫히면 「닫히지 않음」). * 닫힌 영역(259-2) = 조각으로 둘러싸인 면(`findFaces` · 열린 영역 제외) · 안 누름 = 그 영역(둘레 조각) * 고름 · Shift/Ctrl = 영역 더하기 · 채움 강조 · 값 = 면적 / 둘레 · 선으로 한 영역을 닫아도 채움. - * 벽 · 집수정 · 본체 둘레도 구조물 선(설계선 끝 ~ 비탈 밑을 이어 깎기 토사 · 암석 영역이 닫힘 · 261-3). + * 누름 판정(261-3) = 판정 선 굵기 대신 누른 자리 거리(`pickAt`) — 보통 배율 얇은 띠도 영역 · + * 벽 · 집수정 · 본체 둘레도 구조물 선(설계선 끝 ~ 비탈 밑을 이어 깎기 토사 · 암석 영역이 닫힘). * 표 칸 누름 = 저장된 조각을 다시 고름(`choose`) · 띠 = 값 글만(`note`). * 칸에 넣기 = 표 우클릭 「그래프에서 고르기」 동안만(`_Cross_Detail_Table` 이 [칸에 넣기] · Enter 로 씀). * ponytail: 그림을 다시 그리면(칸 크기 · 카드 다시 그림) 고름을 지움 — 조각 키 기억은 필요할 때. @@ -49,12 +50,13 @@ export function pxToM(axes: CrossAxesOptions): (p: number[]) => Pt { }; } -function mToPx(axes: CrossAxesOptions): (p: Pt) => string { +/** m → 그림 px(`join` 하면 `x,y`). */ +function mToPx(axes: CrossAxesOptions): (p: Pt) => Pt { return ([offset, elevation]) => { const display = axes.elevationMid + (elevation - axes.elevationMid) * axes.exaggeration; const x = CROSS_PAD.left + (axes.maxOffset - offset) * axes.pixelsPerMeter; const y = CROSS_PAD.top + (axes.displayMax - display) * axes.pixelsPerMeter; - return `${x},${y}`; + return [x, y]; }; } @@ -208,6 +210,67 @@ export interface DetailSelect { detach: () => void; } +/** 선 누름 거리(화면 px) — 이 안이면 선 · 영역 안이면 맞은편 선까지의 ⅓ 안이어야 선(261-3). */ +export const LINE_PICK_PX = 4; + +const segmentGap = (p: Pt, a: Pt, b: Pt): number => { + const d = [b[0] - a[0], b[1] - a[1]]; + const size2 = d[0] ** 2 + d[1] ** 2; + const t = size2 + ? Math.max(0, Math.min(1, ((p[0] - a[0]) * d[0] + (p[1] - a[1]) * d[1]) / size2)) + : 0; + return Math.hypot(p[0] - a[0] - t * d[0], p[1] - a[1] - t * d[1]); +}; +const pathGap = (p: Pt, path: Pt[]): number => + Math.min(...path.slice(1).map((q, i) => segmentGap(p, path[i], q))); +const inside = (p: Pt, ring: Pt[]): boolean => + ring.reduce((inn, a, i) => { + const b = ring[(i + 1) % ring.length]; + return a[1] > p[1] !== b[1] > p[1] && + p[0] < a[0] + ((p[1] - a[1]) * (b[0] - a[0])) / (b[1] - a[1]) + ? !inn + : inn; + }, false); + +/** + * 누른 자리 → 선 · 영역(261-3) — 좌표는 그림 px · `scale` = 화면 px / 그림 px · `areas` = 영역 넓이. + * 가장 가까운 선이 `LINE_PICK_PX` 안이면 선 — 단 영역 안이면 그 선과 끝이 안 닿는 맞은편 선보다 + * 절반 이하로 가까워야 선(얇은 띠 가운데 ⅓ = 영역) · 아니면 누른 자리를 품은 가장 작은 영역. + */ +export function pickAt( + point: Pt, + scale: number, + paths: Pt[][], + rings: Pt[][], + areas: number[], + pieces: SplitPiece[], +): { piece: number } | { face: number } | null { + const gaps = paths.map((path) => pathGap(point, path) * scale); + const nearest = gaps.reduce((best, gap, i) => (gap < gaps[best] ? i : best), 0); + const ends = (piece: SplitPiece): Pt[] => [ + piece.points[0], + piece.points[piece.points.length - 1], + ]; + const touches = (a: SplitPiece, b: SplitPiece): boolean => + ends(a).some((p) => + ends(b).some((q) => Math.hypot(p[0] - q[0], p[1] - q[1]) <= LINE_TOLERANCE_M), + ); + const across = Math.min( + Infinity, + ...gaps.filter((_, i) => i !== nearest && !touches(pieces[i], pieces[nearest])), + ); + const face = rings + .flatMap((ring, i) => (inside(point, ring) ? [i] : [])) + .sort((a, b) => areas[a] - areas[b])[0]; + if ( + paths.length && + gaps[nearest] <= LINE_PICK_PX && + (face === undefined || gaps[nearest] * 2 <= across) + ) + return { piece: nearest }; + return face === undefined ? null : { face }; +} + /** 조각의 자리 이름 — 선 종류 + mm 로 맞춘 꼭짓점(px → m 되짚기의 부동소수 흔들림 거름). */ const pieceKey = (piece: SplitPiece | undefined): string => piece ? `${piece.line}|${piece.points.map((p) => p.map((v) => v.toFixed(3))).join(";")}` : ""; @@ -228,6 +291,10 @@ export function attachDetailSelect(input: { let hits: SVGPolylineElement[] = []; let faces: Face[] = []; let faceEls: SVGPolygonElement[] = []; + /** 그림 층 · 조각 · 영역 고리(그림 px) — 누름 판정. */ + let layer: SVGGElement | null = null; + let paths: Pt[][] = []; + let rings: Pt[][] = []; let selected: number[] = []; /** 영역 누름으로 고른 면 — 비면 고른 조각이 한 면을 꼭 닫을 때 그 면. */ let chosenFaces: number[] = []; @@ -270,18 +337,25 @@ export function attachDetailSelect(input: { if (bar && label.parentElement !== bar) bar.prepend(label, put); }; + /** 누른 자리(그림 안만) → 선 · 영역 — 판정 선 굵기 대신 거리로(261-3). */ + const pickOf = (event: MouseEvent): ReturnType => { + const ctm = layer?.getScreenCTM(); + if (!ctm || !layer?.ownerSVGElement?.contains(event.target as Node)) return null; + const p = new DOMPoint(event.clientX, event.clientY).matrixTransform(ctm.inverse()); + const areas = faces.map((face) => face.area); + return pickAt([p.x, p.y], Math.hypot(ctm.a, ctm.b), paths, rings, areas, pieces); + }; + const onClick = (event: MouseEvent): void => { - const target = event.target as Element; - const hit = target.closest?.(`.${PIECE_HIT_CLASS}`); + const pick = pickOf(event); const shift = event.shiftKey || event.ctrlKey || event.metaKey; const additive = shift || mode === "area"; noteText = null; - if (!hit) { - const face = target.closest?.(`.${FACE_HIT_CLASS}`); - if (face && !(mode === "area" && input.band?.(event))) { + if (!pick || !("piece" in pick)) { + if (pick && !(mode === "area" && input.band?.(event))) { // 영역 안 누름 = 그 영역 둘레 조각 고름(259-2) · 길이 고르기여도 바로 넣지 않음(Enter) event.stopPropagation(); - const index = faceEls.indexOf(face as SVGPolygonElement); + const index = pick.face; chosenFaces = toggleSelection(chosenFaces, index, shift); selected = regionEdges(chosenFaces.map((i) => faces[i])); show(); @@ -292,9 +366,10 @@ export function attachDetailSelect(input: { show(); return; } - event.stopPropagation(); + // 선이 표 띠 누름(같은 cad 의 다음 듣기)보다 앞섬 + event.stopImmediatePropagation(); chosenFaces = []; - selected = toggleSelection(selected, hits.indexOf(hit as SVGPolylineElement), additive); + selected = toggleSelection(selected, pick.piece, additive); show(); input.picked(additive); }; @@ -305,31 +380,29 @@ export function attachDetailSelect(input: { // 다시 그려도(창 크기 · 카드 다시 세움) 같은 자리 조각은 고름 유지 — 지우면 바로 꺼졌음(233-2) const keep = new Set(selected.map((i) => pieceKey(pieces[i]))); const axes = input.axes(); - const layer = cad.querySelector("g.b06-chart__plot-layer"); + layer = cad.querySelector("g.b06-chart__plot-layer"); pieces = axes && layer ? collectPieces([...layer.querySelectorAll("*")], axes) : []; selected = pieces.flatMap((piece, i) => (keep.has(pieceKey(piece)) ? [i] : [])); chosenFaces = []; faces = findFaces(pieces); const toPx = axes ? mToPx(axes) : null; + paths = toPx ? pieces.map((piece) => piece.points.map(toPx)) : []; + rings = toPx ? faces.map((face) => face.ring.map(toPx)) : []; // 영역 판정 면 먼저(밑) → 조각 판정 선(위) - faceEls = toPx - ? faces.map((face) => { - const el = document.createElementNS(SVG_NS, "polygon"); - el.setAttribute("points", face.ring.map(toPx).join(" ")); - el.setAttribute("class", FACE_HIT_CLASS); - layer?.append(el); - return el; - }) - : []; - hits = toPx - ? pieces.map((piece) => { - const hit = document.createElementNS(SVG_NS, "polyline"); - hit.setAttribute("points", piece.points.map(toPx).join(" ")); - hit.setAttribute("class", `${PIECE_HIT_CLASS} ${PIECE_HIT_CLASS}--${piece.line}`); - layer?.append(hit); - return hit; - }) - : []; + faceEls = rings.map((ring) => { + const el = document.createElementNS(SVG_NS, "polygon"); + el.setAttribute("points", ring.join(" ")); + el.setAttribute("class", FACE_HIT_CLASS); + layer?.append(el); + return el; + }); + hits = paths.map((path, i) => { + const hit = document.createElementNS(SVG_NS, "polyline"); + hit.setAttribute("points", path.join(" ")); + hit.setAttribute("class", `${PIECE_HIT_CLASS} ${PIECE_HIT_CLASS}--${pieces[i].line}`); + layer?.append(hit); + return hit; + }); show(); }, setMode(kind) { diff --git a/B06_Section/B06_Section_UI_Cross_Detail_Table.ts b/B06_Section/B06_Section_UI_Cross_Detail_Table.ts index 65cc99823..366264f28 100644 --- a/B06_Section/B06_Section_UI_Cross_Detail_Table.ts +++ b/B06_Section/B06_Section_UI_Cross_Detail_Table.ts @@ -24,7 +24,7 @@ import type { import type { CrossPickPiece, SectionSample } from "./B06_Section_Api_Types"; import type { CrossAxesOptions } from "./B06_Section_UI_Cross_Axes"; import { pickLines, piecesValue } from "./B06_Section_UI_Cross_Detail_Geom"; -import { attachDetailSelect, PIECE_HIT_CLASS } from "./B06_Section_UI_Cross_Detail_Select"; +import { attachDetailSelect } from "./B06_Section_UI_Cross_Detail_Select"; /** 서버 `MAX_ROWS` · `MAX_COLUMNS` · `LINE_TOLERANCE_M` 와 같은 값. */ export const MAX_ROWS = 12; @@ -393,10 +393,9 @@ export function attachDetailTable(host: DetailTableHost): { document .elementsFromPoint(event.clientX, event.clientY) .find((el) => cad.contains(el) && el.closest(AREA_PICK_SELECTOR)); - // 면적 띠 · 사토장 누름 = 그 띠 면적(179-4 그대로 · 영역보다 앞) — 선 조각 누름은 위가 맡음 + // 면적 띠 · 사토장 누름 = 그 띠 면적(179-4 그대로 · 영역보다 앞) — 선 누름은 위가 막음(261-3 거리 판정) const onPick = (event: MouseEvent): void => { - if (picking?.kind !== "area" || (event.target as Element).closest(`.${PIECE_HIT_CLASS}`)) - return; + if (picking?.kind !== "area") return; const hit = bandAt(event); const source = hit ? areaSourceOf(hit) : null; if (!source) return; diff --git a/B06_Section/B06_Section_UI_Style_Cross_Detail.css b/B06_Section/B06_Section_UI_Style_Cross_Detail.css index be3ea6726..f9507d873 100644 --- a/B06_Section/B06_Section_UI_Style_Cross_Detail.css +++ b/B06_Section/B06_Section_UI_Style_Cross_Detail.css @@ -185,7 +185,8 @@ .b06-detail__piece { fill: none; stroke: transparent; - stroke-width: 10; + /* 누름 판정은 거리(LINE_PICK_PX 4) — 굵기는 걸침 표시만 */ + stroke-width: 8; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: stroke; diff --git a/resources/tester/fixtures/b06_261_3_cross_415.json b/resources/tester/fixtures/b06_261_3_cross_415.json new file mode 100644 index 000000000..3e3c74f6e --- /dev/null +++ b/resources/tester/fixtures/b06_261_3_cross_415.json @@ -0,0 +1 @@ +[{"tag":"polyline","cls":"b06-chart__cross-profile","dl":false,"pts":[[949.954642190761,98.34482758620575],[943.9057761359919,103.41302728071172],[937.856910081223,108.574113362354],[931.8080440264539,113.79092159809379],[925.7591779716848,116.3634075493297],[919.7103119169159,116.29158331379654],[913.6614458621468,119.40724533901843],[907.6125798073778,128.6081150062668],[901.5637137526088,136.825681007652],[895.5148476978397,140.7823168804701],[889.4659816430707,144.57612937682438],[883.4171155883017,145.92762751944147],[877.3682495335327,147.27912566205856],[871.3193834787636,149.41340756082334],[865.2705174239946,151.6286595805964],[859.2216513692256,160.15366524808218],[853.1727853144566,170.78189793600617],[847.1239192596876,176.7764088804081],[841.0750532049185,179.99066742232273],[835.0261871501496,182.80751546443977],[828.9773210953805,185.17395284238637],[822.9284550406114,188.64809486547938],[816.8795889858425,194.55915565378862],[810.8307229310734,201.03251903054885],[804.7818568763043,209.94251082695544],[798.7329908215354,218.7469378129739],[792.6841247667663,224.27866211325696],[786.6352587119974,229.81038641354002],[780.5863926572283,240.940372540707],[774.5375266024593,252.87010344444045],[768.4886605476903,262.9864810868107],[762.4397944929212,272.4983955443274],[756.3909284381522,278.89896686698546],[750.3420623833832,283.1707123680587],[744.2931963286142,286.96572253989297],[738.2443302738451,290.14777691893215],[732.1954642190761,293.9478439427878],[726.1465981643071,299.107502492042],[720.097732109538,304.0510471548911],[714.0488660547691,307.82759618752465],[708,311.6041452201596],[701.951133945231,315.9430573299059],[695.902267890462,320.2819694396523],[689.8534018356929,323.72677446237947],[683.804535780924,327.04386372722547],[677.7556697261549,330.0219261474343],[671.7068036713858,332.86733693506136],[665.6579376166169,335.10343334726014],[659.6090715618478,336.86563739726404],[653.5602055070788,338.91952986616036],[647.5113394523098,341.34845203045313],[641.4624733975407,343.8562151149041],[635.4136073427718,346.56547802537034],[629.3647412880027,349.78795092738864],[623.3158752332337,356.6029058679937],[617.2670091784647,363.4178608085988],[611.2181431236957,368.15345755421663],[605.1692770689266,372.88905429983583],[599.1204110141576,374.600193822605],[593.0715449593886,375.75124464189906],[587.0226789046195,376.6134500093462],[580.9738128498506,377.3443707879392],[574.9249467950815,381.8309962067428],[568.8760807403125,389.2387158252522],[562.8272146855435,396.575312876689],[556.7783486307744,403.8079178229121],[550.7294825760055,409.86913566216543],[544.6806165212364,412.4161316918462],[538.6317504664673,415.7644452032679],[532.5828844116984,424.7219689891325],[526.5340183569293,433.67948067726644],[520.4851523021603,436.17899310841756],[514.4362862473913,438.47018259264297],[508.38742019262224,445.02930679232855],[502.33855413785324,452.5733436562465],[496.28968808308423,456.2258788370261],[490.24082202831516,458.10954411740977],[484.19195597354616,460.61677490164794],[478.14308991877715,463.67421054222643],[472.0942238640081,468.8769491155226],[466.0453578092391,477.65517241379195]]},{"tag":"line","cls":"b06-chart__design-cross","dl":true,"pts":[[732.1954642190761,325.66273823867266],[726.1465981643071,325.57200524785054]]},{"tag":"line","cls":"b06-chart__design-cross","dl":true,"pts":[[726.1465981643071,325.57200524785054],[720.097732109538,325.48127225702837]]},{"tag":"line","cls":"b06-chart__design-cross","dl":true,"pts":[[720.097732109538,325.48127225702837],[714.0488660547691,325.3905392662076]]},{"tag":"line","cls":"b06-chart__design-cross","dl":true,"pts":[[714.0488660547691,325.3905392662076],[708,325.2998062753855]]},{"tag":"line","cls":"b06-chart__design-cross","dl":true,"pts":[[708,325.2998062753855],[701.951133945231,325.20907328456474]]},{"tag":"line","cls":"b06-chart__design-cross","dl":true,"pts":[[701.951133945231,325.20907328456474],[695.902267890462,325.11834029374256]]},{"tag":"line","cls":"b06-chart__design-cross","dl":true,"pts":[[695.902267890462,325.11834029374256],[689.8534018356929,325.0276073029218]]},{"tag":"line","cls":"b06-chart__design-cross","dl":true,"pts":[[689.8534018356929,325.0276073029218],[683.804535780924,324.9368743120997]]},{"tag":"line","cls":"b06-chart__design-cross","dl":true,"pts":[[683.804535780924,324.9368743120997],[674.1263500932936,333.0020290517912]]},{"tag":"line","cls":"b06-chart__design-cross","dl":true,"pts":[[674.1263500932936,333.0020290517912],[665.7789149377124,342.6802147394211]]},{"tag":"line","cls":"b06-chart__design-cross","dl":true,"pts":[[665.7789149377124,342.6802147394211],[641.2227165723032,343.9671505633862]]},{"tag":"polyline","cls":"b06-chart__rock-boundary","dl":false,"pts":[[949.954642190761,104.39369364097477],[943.9057761359919,109.46189333548074],[937.856910081223,114.62297941712302],[931.8080440264539,119.83978765286282],[925.7591779716848,122.41227360409871],[919.7103119169159,122.34044936856556],[913.6614458621468,125.45611139378745],[907.6125798073778,134.65698106103582],[901.5637137526088,142.87454706242102],[895.5148476978397,146.8311829352391],[889.4659816430707,150.62499543159342],[883.4171155883017,151.9764935742105],[877.3682495335327,153.3279917168276],[871.3193834787636,155.46227361559238],[865.2705174239946,157.67752563536544],[859.2216513692256,166.20253130285118],[853.1727853144566,176.83076399077518],[847.1239192596876,182.82527493517713],[841.0750532049185,186.03953347709177],[835.0261871501496,188.8563815192088],[828.9773210953805,191.22281889715538],[822.9284550406114,194.6969609202484],[816.8795889858425,200.60802170855763],[810.8307229310734,207.0813850853179],[804.7818568763043,215.99137688172448],[798.7329908215354,224.79580386774293],[792.6841247667663,230.327528168026],[786.6352587119974,235.85925246830902],[780.5863926572283,246.98923859547602],[774.5375266024593,258.9189694992094],[768.4886605476903,269.03534714157973],[762.4397944929212,278.5472615990965],[756.3909284381522,284.94783292175447],[750.3420623833832,289.21957842282774],[744.2931963286142,293.014588594662],[738.2443302738451,296.19664297370116],[732.1954642190761,299.9967099975568],[726.1465981643071,305.15636854681105],[720.097732109538,310.0999132096601],[714.0488660547691,313.87646224229366],[708,317.6530112749286],[701.951133945231,321.991923384675],[695.902267890462,326.3308354944213],[689.8534018356929,329.7756405171485],[683.804535780924,333.0927297819945],[677.7556697261549,336.07079220220334],[671.7068036713858,338.91620298983037],[665.6579376166169,341.1522994020292],[659.6090715618478,342.91450345203305],[653.5602055070788,344.96839592092937],[647.5113394523098,347.39731808522214],[641.4624733975407,349.90508116967317],[635.4136073427718,352.61434408013935],[629.3647412880027,355.83681698215764],[623.3158752332337,362.65177192276275],[617.2670091784647,369.4667268633678],[611.2181431236957,374.20232360898564],[605.1692770689266,378.93792035460484],[599.1204110141576,380.649059877374],[593.0715449593886,381.8001106966681],[587.0226789046195,382.6623160641152],[580.9738128498506,383.39323684270823],[574.9249467950815,387.8798622615118],[568.8760807403125,395.2875818800212],[562.8272146855435,402.624178931458],[556.7783486307744,409.8567838776811],[550.7294825760055,415.91800171693444],[544.6806165212364,418.46499774661527],[538.6317504664673,421.81331125803695],[532.5828844116984,430.7708350439015],[526.5340183569293,439.72834673203545],[520.4851523021603,442.22785916318657],[514.4362862473913,444.51904864741203],[508.38742019262224,451.07817284709756],[502.33855413785324,458.6222097110155],[496.28968808308423,462.27474489179514],[490.24082202831516,464.1584101721788],[484.19195597354616,466.66564095641695],[478.14308991877715,469.7230765969955],[472.0942238640081,474.9258151702916],[466.0453578092391,483.704038468561]]},{"tag":"polygon","cls":"b06-chart__culvert-basin","dl":false,"pts":[[736.913579741796,343.80933640297974],[732.1954642190761,325.66273823867266],[734.6150106409838,325.66273823867266],[739.3331261637036,343.80933640297974]]},{"tag":"polygon","cls":"b06-chart__culvert-basin","dl":false,"pts":[[738.7040440940075,341.3897899810716],[753.221322625453,341.3897899810716],[752.4954586988808,343.80933640297974],[739.3331261637036,343.80933640297974]]},{"tag":"polyline","cls":"b06-chart__design-cross","dl":false,"pts":[[753.221322625453,341.3897899810716],[801.4280127212174,220.8730647416608],[843.7112234665693,178.58985399634633]]},{"tag":"polyline","cls":"b06-chart__design-cross","dl":false,"pts":[[665.7789149377124,342.6802147394211],[641.2227165723032,343.9671505633862]]},{"tag":"polygon","cls":"b06-chart__culvert-revet is-selectable","dl":false,"pts":[[676.8483398179395,348.72908079419017],[676.8483398179395,333.0020290517912],[668.6823706440014,333.0020290517912],[663.9642551212817,348.72908079419017]]}] diff --git a/resources/tester/helper_233_2_view_pick.cjs b/resources/tester/helper_233_2_view_pick.cjs index 0158756a5..f4c8623ca 100644 --- a/resources/tester/helper_233_2_view_pick.cjs +++ b/resources/tester/helper_233_2_view_pick.cjs @@ -275,6 +275,17 @@ const layerChildren = []; const layer = { querySelectorAll: () => [...layerChildren], append: (hit) => layerChildren.push(hit), + // 261-3 누름 = 거리 판정 — 화면 좌표 = 그림 px(배율 1) + getScreenCTM: () => ({ a: 1, b: 0, inverse: () => null }), + ownerSVGElement: { contains: () => true }, +}; +globalThis.DOMPoint = class { + constructor(x, y) { + [this.x, this.y] = [x, y]; + } + matrixTransform() { + return this; + } }; const drawGround = () => { layerChildren.length = 0; @@ -302,7 +313,17 @@ const select = DTS.attachDetailSelect({ drawGround(); select.redraw(); const hit = layerChildren.find((el) => el.classes.has(DTS.PIECE_HIT_CLASS)); -click({ target: hit, shiftKey: false, ctrlKey: false, metaKey: false, stopPropagation() {} }); +const [clientX, clientY] = hit.getAttribute("points").split(" ")[0].split(",").map(Number); +click({ + target: hit, + clientX, + clientY, + shiftKey: false, + ctrlKey: false, + metaKey: false, + stopPropagation() {}, + stopImmediatePropagation() {}, +}); out.detailPicked = select.source("length")?.pieces.length ?? 0; axes = { ...axes, pixelsPerMeter: 23 }; // 창 크기 바뀜 → 다시 그림 drawGround(); diff --git a/resources/tester/helper_261_3_detail_pick.cjs b/resources/tester/helper_261_3_detail_pick.cjs new file mode 100644 index 000000000..5e913780e --- /dev/null +++ b/resources/tester/helper_261_3_detail_pick.cjs @@ -0,0 +1,85 @@ +/* PLAN 261-3 단위검증 헬퍼 — [상세] 누름 판정(거리 · 얇은 띠) · 구조물 둘레로 닫히는 깎기 영역. + * 화면 TS 를 그 자리에서 트랜스파일해 Node 로 돌림. 입력 = 표준입력 JSON + * {cases: [{name, axes, elements: [{tag, cls, dl, pts(그림 px)}], clicks: [[x, y, scale]]}]} · + * 결과 = 표준출력 JSON {이름: {pieces, faces, clicks}}. 짝 = `test_261_3_detail_pick.py`. + */ +const fs = require("fs"); +const path = require("path"); +const ts = require(path.join(__dirname, "..", "..", "config", "node_modules", "typescript")); + +const ROOT = path.join(__dirname, "..", ".."); +const B06 = path.join(ROOT, "B06_Section"); +const common = fs.readFileSync(path.join(B06, "B06_Section_UI_Section_Common.ts"), "utf8"); +const CROSS_PAD = Function(`return ${/export const CROSS_PAD = (\{[^}]*\})/.exec(common)[1]}`)(); +globalThis.window = { sessionStorage: new Map(), localStorage: new Map() }; +globalThis.document = { addEventListener: () => {}, removeEventListener: () => {} }; + +const STUBS = { + "@ui/ui_template_context_menu": { createMapContextMenu: () => ({}) }, + "./B06_Section_UI_Section_Common": { CROSS_PAD }, +}; +const resolve = (base) => (fs.existsSync(`${base}.ts`) ? `${base}.ts` : base); +function loadTs(full) { + const js = ts.transpileModule(fs.readFileSync(full, "utf8"), { + compilerOptions: { module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES2020 }, + }).outputText; + const box = { exports: {} }; + const localRequire = (request) => { + if (STUBS[request]) return STUBS[request]; + if (request.endsWith(".css")) return {}; + if (request.startsWith("@util/")) + return loadTs(resolve(path.join(ROOT, "common_util", request.slice(6)))); + return loadTs(resolve(path.join(path.dirname(full), request))); + }; + new Function("exports", "module", "require", js)(box.exports, box, localRequire); + return box.exports; +} +const G = loadTs(path.join(B06, "B06_Section_UI_Cross_Detail_Geom.ts")); +const S = loadTs(path.join(B06, "B06_Section_UI_Cross_Detail_Select.ts")); + +const element = (e) => ({ + tagName: e.tag, + classList: { contains: (name) => e.cls.split(/\s+/).includes(name) }, + hasAttribute: (name) => name === "data-design-line" && e.dl, + getAttribute: (name) => { + if (name === "points") return e.pts.map((p) => p.join(",")).join(" "); + const m = /^([xy])([12])$/.exec(name); + return m ? String(e.pts[+m[2] - 1][m[1] === "x" ? 0 : 1]) : null; + }, +}); + +const { cases } = JSON.parse(fs.readFileSync(0, "utf8")); +const out = {}; +for (const { name, axes, elements, clicks } of cases) { + const pieces = S.collectPieces(elements.map(element), axes); + const faces = G.findFaces(pieces); + const toPx = ([offset, elevation]) => [ + CROSS_PAD.left + (axes.maxOffset - offset) * axes.pixelsPerMeter, + CROSS_PAD.top + + (axes.displayMax - + (axes.elevationMid + (elevation - axes.elevationMid) * axes.exaggeration)) * + axes.pixelsPerMeter, + ]; + const paths = pieces.map((piece) => piece.points.map(toPx)); + const rings = faces.map((face) => face.ring.map(toPx)); + const areas = faces.map((face) => face.area); + out[name] = { + pieces: pieces.map((piece) => ({ line: piece.line, points: piece.points })), + faces: faces.map((face) => { + const edges = face.edges.map((i) => pieces[i]); + const source = S.selectionSource("area", edges); + return { + area: face.area, + edges: face.edges, + lines: [...new Set(edges.map((piece) => piece.line))].sort(), + ring: face.ring, + source, + }; + }), + clicks: (clicks ?? []).map(([x, y, scale]) => + S.pickAt([x, y], scale, paths, rings, areas, pieces), + ), + px: { paths, rings }, + }; +} +process.stdout.write(JSON.stringify(out)); diff --git a/resources/tester/test_261_3_detail_pick.py b/resources/tester/test_261_3_detail_pick.py new file mode 100644 index 000000000..91779b7ba --- /dev/null +++ b/resources/tester/test_261_3_detail_pick.py @@ -0,0 +1,237 @@ +# -*- coding: utf-8 -*- +"""PLAN 261-3 — B06 [상세] 영역 고르기: 보통 배율 얇은 띠 누름 · 깎기 토사 / 암석 영역 나눔. + +못박는 것 + - 누름 판정 = 거리(`pickAt`) — 얇은 띠(6 px) 가운데 = 영역 · 선 1 px = 선 · 영역 밖 선 가까이 = 선 · + 넓은 영역은 선 4 px 안 = 선 · 확대 · 축소 배율에서도 같은 판정. + - 벽 · 집수정 둘레 = 구조물 선 — 설계선 끝 ~ 깎기 비탈 밑을 이어 깎기 암석(암선 ↔ 설계선) · + 깎기 토사(지반 ↔ 암선) 영역이 따로 닫힘 · 면적 = 사다리꼴 셈 · 서버 거울. + - 실측 그림(검증_랩탑메인 4+15 배수관 · 암 · 깎기 비탈) — 깎기 암석 영역이 생김 · 보통 배율 띠 누름 = 영역. + +./venv/Scripts/python.exe -m pytest resources/tester/test_261_3_detail_pick.py -q +""" + +import json +import os +import re +import subprocess +from pathlib import Path + +import pytest + +from B07_DesignDetail.B07_DesignDetail_Engine_Cross_Table_Edit import cell_value + +ROOT = Path(__file__).resolve().parents[2] +HERE = Path(__file__).resolve().parent +PAD = { + k: float(v) + for k, v in re.findall( + r"(\w+): (\d+)", + re.search( + r"export const CROSS_PAD = \{([^}]*)\}", + (ROOT / "B06_Section" / "B06_Section_UI_Section_Common.ts").read_text(encoding="utf-8"), + ).group(1), + ) +} + +pytestmark = pytest.mark.skipif( + not (ROOT / "config" / "node_modules").is_dir(), reason="프론트엔드 의존성 미설치" +) + +# ── 견본: 암 지반(암선 = 지반 − 0.6 m · 보통 배율 6 px 띠) + 오른쪽 설계 비탈 + 왼쪽 집수정 · 깎기 비탈 ── +AXES = { + "pixelsPerMeter": 10, + "maxOffset": 14, + "displayMax": 106, + "elevationMid": 100, + "exaggeration": 1, +} +ROCK = -0.6 +DESIGN = { + "design_elevation_m": 98.0, + "geometry_preset": "rock", + "rock_boundary_offset_m": ROCK, + "design_line": [{"offset_m": x, "elevation_m": y} for x, y in [(6, 104), (2, 98), (-2, 98)]], +} +SAMPLES = [{"offset_m": x, "elevation_m": 100.0, "valid": True} for x in (-10, -5, 0, 5, 10)] + + +def px(offset: float, elevation: float) -> list[float]: + return [ + PAD["left"] + (AXES["maxOffset"] - offset) * AXES["pixelsPerMeter"], + PAD["top"] + (AXES["displayMax"] - elevation) * AXES["pixelsPerMeter"], + ] + + +def el(tag: str, cls: str, pts, dl: bool = False) -> dict: + return {"tag": tag, "cls": cls, "dl": dl, "pts": [px(*p) for p in pts]} + + +GROUND = [(x, 100.0) for x in (-10, -5, 0, 5, 10)] +ELEMENTS = [ + el("polyline", "b06-chart__cross-profile", GROUND), + el("polyline", "b06-chart__rock-boundary", [(x, y + ROCK) for x, y in GROUND]), + el("line", "b06-chart__design-cross", [(6, 104), (2, 98)], dl=True), + el("line", "b06-chart__design-cross", [(2, 98), (-2, 98)], dl=True), + el("polygon", "b06-chart__culvert-basin", [(-2, 98), (-2, 97), (-3, 97), (-3, 98)]), + el("polyline", "b06-chart__design-cross", [(-3, 98), (-4, 100)]), # 집수정 절토선(구조물) +] +RIGHT_ROCK = 2 + 1.4 * 4 / 6 # 설계 비탈(4 : 6) × 암선 99.4 +RIGHT_GROUND = 2 + 2 * 4 / 6 # 설계 비탈 × 지반 100 +LEFT_ROCK = -3 - 1.4 / 2 # 깎기 비탈(1 : 0.5) × 암선 +LEFT_GROUND = -4.0 +CUT_ROCK = ((RIGHT_ROCK - LEFT_ROCK) + 5) / 2 * 1.4 # 암선 ↔ 노면 · 집수정 윗변(-3 ~ 2) +CUT_SOIL = ((RIGHT_GROUND - LEFT_GROUND) + (RIGHT_ROCK - LEFT_ROCK)) / 2 * 0.6 + +# 누름(그림 px · 배율) — 지반 y 70 · 암선 y 76 · 노면 y 90 +CLICKS = [ + [198, 73, 1], # 띠 가운데 = 영역(토사) + [198, 71, 1], # 지반선 1 px = 선 + [198, 75, 1], # 암선 1 px = 선 + [198, 79, 1], # 넓은 암석 영역 · 암선 3 px = 선 + [198, 81, 1], # 암선 5 px = 영역(암석) + [198, 67, 1], # 영역 밖 · 지반선 3 px = 선 + [198, 60, 1], # 영역 밖 · 먼 곳 = 없음 + [198, 73, 3.7], # 확대 — 띠 가운데 = 영역 + [198, 73, 0.5], # 축소 — 띠 가운데 = 영역 +] + + +def run(cases: list[dict]) -> dict: + proc = subprocess.run( # noqa: S603 — 고정 실행 파일 + ["node", str(HERE / "helper_261_3_detail_pick.cjs")], + input=json.dumps({"cases": cases}), + capture_output=True, + text=True, + encoding="utf-8", + timeout=60, + cwd=os.fspath(ROOT), + ) + assert proc.returncode == 0, proc.stderr + return json.loads(proc.stdout) + + +@pytest.fixture(scope="module") +def out() -> dict: + basinless = [e for e in ELEMENTS if "basin" not in e["cls"]] + return run( + [ + {"name": "sample", "axes": AXES, "elements": ELEMENTS, "clicks": CLICKS}, + {"name": "basinless", "axes": AXES, "elements": basinless}, + ] + ) + + +def face_of(case: dict, lines: list[str]) -> tuple[int, dict]: + found = [(i, f) for i, f in enumerate(case["faces"]) if f["lines"] == lines] + assert len(found) == 1, [f["lines"] for f in case["faces"]] + return found[0] + + +def piece_line(case: dict, pick: dict) -> str: + return case["pieces"][pick["piece"]]["line"] + + +# ── 깎기 토사 · 암석 영역 따로 ───────────────────────────────────────────── + + +def test_깎기_암석_토사_영역_따로_면적(out): + case = out["sample"] + _, rock = face_of(case, ["design", "rock", "structure"]) + _, soil = face_of(case, ["design", "ground", "rock", "structure"]) + assert rock["area"] == pytest.approx(CUT_ROCK, abs=1e-6) + assert soil["area"] == pytest.approx(CUT_SOIL, abs=1e-6) + # 집수정 안 = 따로(넓이 1) · 셋뿐(열린 지반 · 암선 바깥 제외) + assert sorted(round(f["area"], 6) for f in case["faces"]) == sorted( + [round(CUT_ROCK, 6), round(CUT_SOIL, 6), 1.0] + ) + + +def test_비탈_끝이_지반선에_닿기만_해도_나눔(out): + ground_ends = { + round(p["points"][k][0], 4) + for p in out["sample"]["pieces"] + if p["line"] == "ground" + for k in (0, -1) + } + assert {LEFT_GROUND, round(RIGHT_GROUND, 4)} <= ground_ends + + +def test_집수정_없으면_암석_영역_안_닫힘(out): + # 고침 전 꼴 — 설계선 끝 ~ 비탈 밑이 안 이어져 토사 띠만 남음 + faces = out["basinless"]["faces"] + assert [f["lines"] for f in faces] == [["design", "ground", "rock", "structure"]] + assert faces[0]["area"] == pytest.approx(CUT_SOIL, abs=1e-6) + + +def test_암석_영역_서버_거울(out): + _, rock = face_of(out["sample"], ["design", "rock", "structure"]) + number, _text, again = cell_value(rock["source"], DESIGN, SAMPLES) + assert not again and number == pytest.approx(CUT_ROCK, abs=1e-3) + + +# ── 누름 판정(거리) ────────────────────────────────────────────────────── + + +def test_얇은_띠_보통_배율_가운데_누름_영역(out): + case = out["sample"] + soil, _ = face_of(case, ["design", "ground", "rock", "structure"]) + rock, _ = face_of(case, ["design", "rock", "structure"]) + picks = case["clicks"] + assert picks[0] == {"face": soil} + assert picks[4] == {"face": rock} + assert picks[7] == {"face": soil} and picks[8] == {"face": soil} + + +def test_선_가까이_누름_선(out): + case = out["sample"] + picks = case["clicks"] + assert piece_line(case, picks[1]) == "ground" + assert piece_line(case, picks[2]) == "rock" + assert piece_line(case, picks[3]) == "rock" + assert piece_line(case, picks[5]) == "ground" + assert picks[6] is None + + +# ── 실측 그림(검증_랩탑메인 4+15) ───────────────────────────────────────── + + +@pytest.fixture(scope="module") +def real() -> dict: + elements = json.loads( + (HERE / "fixtures" / "b06_261_3_cross_415.json").read_text(encoding="utf-8") + ) + ppm = 241.954642190761 / 20 # 눈금 20 m = 241.95 px · 과장 1 + axes = { + "pixelsPerMeter": ppm, + "maxOffset": (708 - PAD["left"]) / ppm, # 0 m 눈금 x 708 + "displayMax": 875 + (318.52362895766817 - PAD["top"]) / ppm, # 875 m 눈금 y 318.52 + "elevationMid": 870, + "exaggeration": 1, + } + case = {"name": "real", "axes": axes, "elements": elements} + first = run([case])["real"] + band = [(i, f) for i, f in enumerate(first["faces"]) if "ground" in f["lines"]] + soil, face = max(band, key=lambda item: item[1]["area"]) # 깎기 토사 띠 + # 띠의 지반 조각(가장 긴 것) 가운데 꼭짓점 — 그 밑 3 px(띠 가운데) · 1 px(지반선) + ground = max( + (i for i in face["edges"] if first["pieces"][i]["line"] == "ground"), + key=lambda i: len(first["pieces"][i]["points"]), + ) + path = first["px"]["paths"][ground] + x, y = path[len(path) // 2] + case["clicks"] = [[x, y + 3, 1], [x, y + 1, 1]] + return {**run([case])["real"], "soil": soil, "ground": ground} + + +def test_실측_깎기_암석_영역_생김(real): + rock = [f for f in real["faces"] if f["lines"] == ["design", "rock", "structure"]] + assert rock and max(f["area"] for f in rock) == pytest.approx(18.24, abs=0.05) + soil = real["faces"][real["soil"]] + assert soil["lines"] == ["design", "ground", "rock", "structure"] + assert soil["area"] == pytest.approx(6.00, abs=0.05) + + +def test_실측_보통_배율_띠_누름(real): + assert real["clicks"][0] == {"face": real["soil"]} + assert real["clicks"][1] == {"piece": real["ground"]}