From 6b6009675272f8605785816accd290454ceec6e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=88=98=ED=98=84?= Date: Mon, 26 Oct 2026 20:15:10 +0900 Subject: [PATCH] feat(center-graphic): tunnel and bridge section shapes in simple examples - CompactFacilityConnection gets an optional segmentShape ('tunnel' | 'bridge'); omitted keeps the narrow centre strip - Tunnel: 30% rounded section with a white outline and a dot on each end - Bridge: 30% square section with white end lines and a square mark at each end --- .../components/CompactFacilityConnection.css | 26 +++++++++++++++++++ .../components/CompactFacilityConnection.tsx | 7 +++-- .../src/components/FacilityBatch.tsx | 2 +- .../src/components/TunnelFacility.tsx | 2 +- 4 files changed, 33 insertions(+), 4 deletions(-) diff --git a/packages/center-graphic/src/components/CompactFacilityConnection.css b/packages/center-graphic/src/components/CompactFacilityConnection.css index 95a37f1..1370030 100644 --- a/packages/center-graphic/src/components/CompactFacilityConnection.css +++ b/packages/center-graphic/src/components/CompactFacilityConnection.css @@ -37,6 +37,32 @@ border-inline: 2px solid #fff; } +/* Facility section shapes (2026-10-26, user reference): a 30% section centred on the route, a #400500 mark at each end + (the joint size, 40% of the route). Tunnel: rounded ends inside a white outline, a dot on each end's centre. + Bridge: square ends with the white end lines, a square mark against each end. */ +.compact-facility-connection__segment[data-shape] { width: 30%; } +.compact-facility-connection__segment[data-shape]::before, +.compact-facility-connection__segment[data-shape]::after { + content: ''; + position: absolute; + top: 50%; + width: var(--compact-joint-size); + height: var(--compact-joint-size); + transform: translateY(-50%); + background: #400500; +} +.compact-facility-connection__segment[data-shape="tunnel"] { + inset-block: calc(var(--compact-route-outline) * -1); + border: var(--compact-route-outline) solid #fff; + border-radius: 9999px; +} +.compact-facility-connection__segment[data-shape="tunnel"]::before, +.compact-facility-connection__segment[data-shape="tunnel"]::after { border-radius: 50%; } +.compact-facility-connection__segment[data-shape="tunnel"]::before { left: calc((var(--compact-route-primary) - var(--compact-joint-size)) / 2); } +.compact-facility-connection__segment[data-shape="tunnel"]::after { right: calc((var(--compact-route-primary) - var(--compact-joint-size)) / 2); } +.compact-facility-connection__segment[data-shape="bridge"]::before { left: 0; } +.compact-facility-connection__segment[data-shape="bridge"]::after { right: 0; } + .compact-facility-connection__anchor { z-index: 1; position: absolute; diff --git a/packages/center-graphic/src/components/CompactFacilityConnection.tsx b/packages/center-graphic/src/components/CompactFacilityConnection.tsx index 4a06af9..3e38aa4 100644 --- a/packages/center-graphic/src/components/CompactFacilityConnection.tsx +++ b/packages/center-graphic/src/components/CompactFacilityConnection.tsx @@ -3,19 +3,22 @@ import type { ReactNode } from 'react'; import './CompactFacilityConnection.css'; // Shared Web preview relationship; entity assets and text layout remain child-owned. -export function CompactFacilityConnection({ children, className, routeMode, sourceStatus, label }: { +// segmentShape (2026-10-26, inline routes only): the facility's section on the route — 'tunnel' = rounded ends with a +// dot at each end, 'bridge' = square ends with a square mark at each end. Omitted: the narrow centre strip as before. +export function CompactFacilityConnection({ children, className, routeMode, sourceStatus, label, segmentShape }: { children?: ReactNode; className?: string; routeMode?: string; sourceStatus?: string; label?: string; + segmentShape?: 'tunnel' | 'bridge'; }) { const inline = routeMode === 'inline'; return (
diff --git a/packages/center-graphic/src/components/FacilityBatch.tsx b/packages/center-graphic/src/components/FacilityBatch.tsx index a6a98d6..1d5238e 100644 --- a/packages/center-graphic/src/components/FacilityBatch.tsx +++ b/packages/center-graphic/src/components/FacilityBatch.tsx @@ -343,7 +343,7 @@ function Sample({ title, note, children }: { title: string; note?: string; child function CompactAppliedExample({ config }: { config: FacilityConfig }) { return ( - + ); diff --git a/packages/center-graphic/src/components/TunnelFacility.tsx b/packages/center-graphic/src/components/TunnelFacility.tsx index c4f3202..1bbd7f3 100644 --- a/packages/center-graphic/src/components/TunnelFacility.tsx +++ b/packages/center-graphic/src/components/TunnelFacility.tsx @@ -168,7 +168,7 @@ function TunnelSample({ title, note, children }: { title: string; note?: string; function CompactTunnelExample() { return ( - + );