Providers / Store / Utils
내부 제어가 필요할 때 사용하는 하위 API입니다.
Providers
| API | Signature | - | Description |
|---|---|---|---|
FlexLayoutProvider | ({ value, children }) => JSX.Element | - | FlexLayoutContextValue를 하위 컨테이너에 제공합니다. 일반적으로 FlexLayout이 내부에서 자동으로 사용합니다. |
useFlexLayoutContext | () => FlexLayoutContextValue | - | 현재 FlexLayout context를 읽습니다. Provider 밖에서 호출하면 에러를 던집니다. |
ContainerOpenCloseProvider | ({ layoutName, containerName, sizeName }) => null | - | 컨테이너별 open/close subject와 spread subject를 준비하고 명령을 구독합니다. FlexLayout이 컨테이너마다 자동 렌더링합니다. |
containerOpenCloseSubjectMap | SubjectMap<ContainerStateRequest> | - | containerName별 open/close/toggle 명령 subject map입니다. |
containerSpreadSubjectMap | SubjectMap<ContainerState> | - | containerName별 open/close 결과 상태 stream입니다. |
Store
| API | Signature | - | Description |
|---|---|---|---|
setScrollPosition | (layoutName, position) => void | - | key/layoutName 기준으로 스크롤 위치를 저장합니다. |
getScrollPosition | (layoutName) => Observable<ScrollPosition | undefined> | - | 저장된 스크롤 위치 stream을 반환합니다. |
removeScrollPosition | (layoutName) => void | - | 저장된 스크롤 위치를 제거합니다. |
setSplitScreen | (rootName, layoutName, layoutInfo) => void | - | root/layoutName 기준 split screen layoutInfo를 저장합니다. |
resetRootSplitScreen | (rootName) => void | - | root split screen store를 초기화합니다. |
removeRootSplitScreen | (rootName) => void | - | root split screen store를 삭제합니다. |
removeSplitScreenChild | (rootName, screenKey) => void | - | screenKey에 해당하는 split screen child를 제거합니다. |
getCurrentSplitScreenComponents | (rootName) => DropTargetComponent[] | - | 현재 root 아래의 split screen component 목록을 반환합니다. |
getSplitScreen | (rootName, layoutName) => Observable<SplitScreenLayoutInfo | undefined> | - | 특정 split screen layoutInfo stream을 반환합니다. |
setContainerRef | (layoutName, containerName, ref) => void | - | 컨테이너 DOM ref를 store에 등록/해제합니다. |
setResizePanelRef | (layoutName, containerName, ref) => void | - | resize panel DOM ref를 store에 등록/해제합니다. |
getLayoutInfos | (layoutName) => Observable<LayoutInfo | undefined> | - | layoutName 기준 container/resizePanel ref 정보 stream을 반환합니다. |
getContainerRef | ({ layoutName?, containerName }) => Observable<RefObject<HTMLElement> | undefined> | - | 컨테이너 ref stream을 반환합니다. |
getResizePanelRef | ({ layoutName?, containerName }) => Observable<RefObject<HTMLElement> | undefined> | - | resize panel ref stream을 반환합니다. |
Utils
| API | Signature | - | Description |
|---|---|---|---|
isDocumentOut | ({ x, y }) => boolean | - | 좌표가 document 경계 밖인지 검사합니다. |
getClientXy | (event: Event) => { x, y } | - | mouse/touch event에서 client 좌표를 추출합니다. |
isOverMove | (elementSize, elementMinSize) => boolean | - | 요소 크기가 최소 크기를 넘어 이동 가능한지 검사합니다. |
findNotCloseFlexContent | (list, index, direction) => HTMLElement | undefined | - | 닫히지 않은 인접 flex content를 찾습니다. |
remain | (total, minusList) => number | - | 전체 grow에서 특정 grow 목록을 제외한 나머지를 계산합니다. |
resize | (list, totalGrow) => void | - | DOM 목록의 flex grow를 재분배합니다. |
mathWeight | (totalCount, totalGrow) => number | - | 남은 grow를 요소 수에 맞춰 나눈 weight를 계산합니다. |
mathGrow | (targetSize, parentSize, totalCount) => number | - | 픽셀 크기를 flex grow 값으로 변환합니다. |
getGrow | (el) => number | - | HTMLElement/Element의 현재 flex grow를 읽습니다. |
closeFlex | (target, list, options) => Promise<void> | - | 특정 컨테이너를 닫고 주변 flex grow를 재분배합니다. |
openFlex | (target, list, options) => Promise<number | void> | - | 닫힌 컨테이너를 열고 grow 값을 복원/재계산합니다. |
FlexLayout, FlexLayoutContainer, FlexLayoutSplitScreen 중심으로 작성하는 것을 권장합니다.