Drag Box
SplitScreen에 drop할 수 있는 드래그 시작 요소를 만들고, 필요하면 순수 Drag & Drop source로도 사용합니다.
기본 사용
FlexLayoutSplitScreenDragBox의 children은 사용자가 잡는 UI이고, targetComponent는 drop 후 split screen에 들어갈 실제 화면입니다.
navigationTitle은 라벨 데이터만 전달합니다.
DragBox의 navigationTitle은 drop된 화면의 라벨 데이터입니다. DragBox는 navigationTitleComponent 같은 타이틀 렌더러를 보관하지 않으며, 실제 타이틀 디자인은 drop 대상 FlexLayoutSplitScreen의 navigationTitleComponent가 결정합니다.
Escape로 drag 취소
드래그 중 Escape를 누르면 현재 drag를 취소합니다. clone과 pending drag state를 정리하고 isDragging false / isDrop false를 전파하므로 Split Screen의 분할 안내도 즉시 사라지며 dropEndCallback이나 화면 분할이 실행되지 않습니다.
Next.js URL 렌더링
Next.js 전용 진입점에서 import하면 targetComponent 대신 url만 전달할 수 있습니다. iframe은 기본 false이며, false일 때 생성된 registry와 Provider를 통해 서버 렌더링합니다.
문서 바깥 drop
dropDocumentOutsideOption을 주면 document 바깥으로 drop될 때 새 창/탭을 여는 동작을 구성할 수 있습니다.
자주 쓰는 props
navigationTitle
drop 후 화면에 붙는 라벨 데이터입니다. 타이틀 UI 스타일은 수신하는 FlexLayoutSplitScreen이 담당합니다.
dropEndCallback
drop이 끝난 뒤 x, y, containerName을 받아 후처리합니다.
isBlockingActiveInput
input/textarea/select/contenteditable 등 active 입력 요소에서 drag 시작을 막을지 제어합니다. 기본값은 false입니다.
customData
드래그 중 함께 전달할 string/number/boolean 기반의 커스텀 데이터입니다.
scrollTargetRef
드래그 중 viewport edge auto-scroll 대신 특정 scroll container를 대상으로 삼을 때 사용합니다.