기본 구조

구조는 컴포넌트가 다루는 대상의 소속, 순서, 좌표와 계층을 정의합니다. 포커스와 선택은 상호작용 상태가, 화면 표시와 제품 데이터는 실행 환경과 앱이 맡습니다.

순서

순서는 고유한 식별자를 한 줄로 놓은 유한한 목록입니다.

text

at      : Fin(n) → ID
indexOf : ID ⇀ Fin(n)

indexOf(at(i)) = i
at(indexOf(x)) = x

목록 상자, 탭, 메뉴, 도구 막대, 회전 목록과 라디오 버튼 묶음의 이동에 사용합니다. 검색으로 일부 항목을 숨겨도 남은 항목의 상대 순서는 유지됩니다. 양 끝에서는 멈추거나 처음으로 돌아가는 규칙을 명시적으로 고릅니다.

범위는 일정한 간격으로 나뉜 유한한 수치 영역입니다.

text

value(tick) = origin + tick × step
0 ≤ tick ≤ count

실제 기준값은 정수 단계입니다. 표시 숫자, 비율, 맞춤과 증감을 이 단계에서 계산하면 소수 간격에서도 정확한 값을 유지할 수 있습니다. 슬라이더, 증감 입력, 숫자 입력, 수량 입력과 영역 크기 조절에 사용합니다.

격자는 행과 열의 유한한 조합이며 비어 있는 칸을 허용합니다.

text

cellAt    : Row × Column ⇀ ID
positionOf: ID ⇀ Row × Column

방향 이동은 한 축을 유지하면서 이동 가능한 다음 칸을 찾습니다. 격자는 논리 좌표를 계산하고, 실행 환경은 픽셀 거리와 실제 배치를 맡습니다.

계층은 형제 순서가 있는 여러 루트 트리입니다.

text

parent   : ID → ID | virtualRoot
children : ID | virtualRoot → Sequence<ID>

모든 항목이 부모 하나를 갖는 비순환 구조입니다. 펼침 상태는 계층과 별도로 관리합니다. 두 모델을 조합하면 원래 계층을 유지하면서 화면에 보일 항목의 순서를 계산할 수 있습니다.