마인드맵
보드의 마인드맵 지원은 선택 사항입니다. 제품에서 보드 캔버스 내부의 마인드맵 노드와 상호작용이 필요할 때 추가하세요.
마인드맵 지원 등록하기
import { UniverBoardsMindPlugin } from '@univerjs-pro/boards-mind'import { UniverBoardsMindUIPlugin } from '@univerjs-pro/boards-mind-ui'import BoardsMindUIKoKR from '@univerjs-pro/boards-mind-ui/locale/ko-KR'import '@univerjs-pro/boards-mind/facade'import '@univerjs-pro/boards-mind-ui/lib/index.css'univer.registerPlugin(UniverBoardsMindPlugin)univer.registerPlugin(UniverBoardsMindUIPlugin)모바일 지원
먼저 모바일 에디터를 구성하세요. 이 페이지의 플러그인 모드 초기화 코드에서 아래 데스크톱 등록을 같은 패키지의 모바일 버전으로 바꾸고 문서를 열기 전에 완료하세요. 모델 플러그인, 스타일, 언어 파일과 Facade 가져오기는 유지하며 두 버전을 동시에 등록하지 마세요.
| 패키지 | 데스크톱 등록 | 모바일 등록 |
|---|---|---|
@univerjs-pro/boards-mind-ui | UniverBoardsMindUIPlugin | UniverBoardsMindMobileUIPlugin |
패키지 역할
@univerjs-pro/boards-mind는 마인드맵 요소를 보드 모델과 통합합니다.@univerjs-pro/boards-mind-ui는 마인드맵 편집, 렌더링 및 UI 상호작용을 추가합니다. 또한 브라우저 편집기를 위한@univerjs-pro/boards-mind-ui/locale/*및@univerjs-pro/boards-mind-ui/lib/index.css도 제공합니다.
런타임 선택
브라우저 편집기에서는 두 패키지를 모두 사용하세요. 서버 측에서 스냅샷을 처리할 때는 모델 패키지를 UniverBoardsPlugin과 함께 등록하고 UI 패키지는 제외하세요.
마인드맵 요소가 포함된 스냅샷을 열기 전에 마인드맵 지원을 등록하세요.
Facade API
하위 도형과 연결선을 개별 수정하지 말고 구조화된 Facade를 사용하세요.
const board = univerAPI.getActiveBoard()if (!board) throw new Error('No active Board')const mindMap = board.insertMindMap({ left: 180, top: 180, root: { text: 'Release', children: [ { text: 'Product', children: [{ text: 'Scope' }, { text: 'UX' }] }, { text: 'Engineering', children: [{ text: 'API' }, { text: 'QA' }] }, { text: 'Launch', children: [{ text: 'Docs' }] }, ], },})if (!mindMap) throw new Error('Cannot insert mind map')const qa = mindMap.getNodes().find(node => node.getText() === 'QA')qa?.addChild({ text: 'Automation' })FBoard는 insertMindMap, getMindMap, getMindMaps를 제공합니다. 맵은 노드와 하위 노드 조회, 레이아웃, 경계, reflow, setLayout, setBranchLineType, 삭제를 지원합니다. 노드는 텍스트, 자식/형제 삽입, 부모 변경, 계층 올리기, 분리, 순서, 스타일, 접기를 지원합니다.
지정 영역 안에 재배치
reflow()는 Board 좌표의 사각형 안에 맵을 원자적으로 배치하고 가운데 정렬하며 노드와 텍스트 크기를 유지합니다. 기본적으로 최소 간격으로 재시도하고, 그래도 들어가지 않으면 Board를 유지한 채 bounds-too-small과 requiredBounds를 반환합니다.
const result = mindMap.reflow({ bounds: { left: 80, top: 80, width: 1_000, height: 600 }, padding: 24,})if (!result.success) { console.warn(result.reason, result.requiredBounds)}사각형은 배치 영역일 뿐이며 컨테이너의 부모, 잘림, 크기를 바꾸지 않습니다. 성공한 배치는 하나의 실행 취소 항목으로 저장됩니다.
이 가이드는 어떠셨나요?