eomsangdonandClaude Fable 5
61108f540d
구조물군 B~G 전체를 화면에서 수동 배치할 수 있게 한다. 타입 목록·옵션 폼은 서버 레지스트리(GET /structure-types)에서 받아 그리므로 구조물이 늘어도 프론트 코드는 그대로다. - B05_Profile_Api_Structures.ts: 레지스트리·정본 CRUD 클라이언트. 409(판번호 충돌)를 전용 오류로 구분, 구간형 기점 앵커 헬퍼. - B05_Profile_UI_Structures_Panel.ts: 사이드바 「구조물 추가」 섹션. 구조물군→종류→위치(점형/구간형)·설치측·이격·옵션 동적 폼·메모. - B05_Profile_UI_Structures_Marks.ts: 종단 그래프 서클마크 오버레이. 전 배치형태 = 마크 하나(구간형은 기점), 선택 시 벌룬 + 구간 띠 확장 (2026-08-16 사용자 확정 표기 규칙). 드래그 이동·겹침 스택. - B05_Profile_UI_Style_Structures.css: 마크·띠·벌룬 스타일. - Profile_Panel: 마크 레이어 장착·타입 주입·선택 동기화 API 추가. 우클릭 메뉴(Profile_Structures)에 레지스트리 타입 추가 항목. - Page: 진입 시 타입·정본 로드, 변경 즉시 정본 저장(직렬화 큐), 409 시 최신본 재적재 안내, 그래프↔사이드 선택 양방향 동기화. 정본 주입은 onChange를 울리지 않아 저장 루프를 차단. tsc --noEmit 통과. 기존 배관·배수유역·종단 편집 흐름은 손대지 않았다. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
85 lines
2.1 KiB
CSS
85 lines
2.1 KiB
CSS
/* =============================================================================
|
|
* B05 구조물 서클마크·벌룬 오버레이 스타일.
|
|
*
|
|
* 종단 그래프(.b05-profile__chart) 위에 얹는 레이어다. 그래프 자체의 조작(측점선 끌기,
|
|
* 우클릭 메뉴)을 막지 않도록 레이어는 이벤트를 통과시키고, 마크·벌룬만 이벤트를 받는다.
|
|
* ========================================================================== */
|
|
|
|
.b05-structure__layer {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
overflow: visible;
|
|
z-index: 3;
|
|
}
|
|
|
|
/* 서클마크 — 배치형태와 무관하게 하나. 구간형은 기점에 찍힌다. */
|
|
.b05-structure__mark {
|
|
position: absolute;
|
|
transform: translateX(-50%);
|
|
width: 18px;
|
|
height: 18px;
|
|
padding: 0;
|
|
border-radius: 50%;
|
|
border: 2px solid currentColor;
|
|
background: var(--color-surface, #fff);
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
cursor: grab;
|
|
pointer-events: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.b05-structure__mark:hover {
|
|
filter: brightness(0.92);
|
|
}
|
|
|
|
.b05-structure__mark.is-selected {
|
|
border-width: 3px;
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent);
|
|
}
|
|
|
|
.b05-structure__mark:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
/* 구간 띠 — 고른 동안에만 시~종점을 펼쳐 보여 준다. */
|
|
.b05-structure__band {
|
|
position: absolute;
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
opacity: 0.55;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 값 벌룬 — 유토곡선 벌룬과 같은 결(테두리 도형 + 여러 줄 텍스트). */
|
|
.b05-structure__balloon {
|
|
position: absolute;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
padding: 4px 8px;
|
|
border: 1.5px solid currentColor;
|
|
border-radius: 6px;
|
|
background: var(--color-surface, #fff);
|
|
box-shadow: 0 2px 6px rgb(0 0 0 / 18%);
|
|
font-size: 11px;
|
|
line-height: 1.35;
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
z-index: 4;
|
|
}
|
|
|
|
.b05-structure__balloon strong {
|
|
font-size: 11.5px;
|
|
}
|
|
|
|
.b05-structure__balloon-memo {
|
|
opacity: 0.7;
|
|
font-style: italic;
|
|
}
|