보드 요소
보드 페이지는 그릴 수 있는 객체를 elements에 저장하고, 화면에 표시되는 순서를 elementOrder에 저장합니다. 모든 요소에는 안정적인 id, type, 그리고 캔버스에서의 위치와 크기를 설명하는 transform이 있습니다.
공통 요소 필드
| 필드 | 타입 | 설명 |
|---|---|---|
| id | string | 페이지 내에서 고유한 요소 ID입니다. |
| type | BoardElementType | text, shape, image, connector, container, table, group 등의 요소 종류입니다. |
| transform | IBoardElementTransform | 위치, 크기, 회전, 배율, 기울이기, 뒤집기 값입니다. |
| parentId? | string | 상위 컨테이너 또는 그룹 ID입니다. |
| laneId? | string | 요소가 스윔레인 안에 있을 때의 스윔레인 레인 ID입니다. |
| name? | string | 사람이 읽을 수 있는 요소 이름입니다. |
| description? | string | 접근성 또는 애플리케이션 메타데이터입니다. |
| visible? | boolean | 요소를 렌더링할지 여부입니다. |
| selectable? | boolean | 편집기에서 요소를 선택할 수 있는지 여부입니다. |
| locked? | boolean | 편집이 잠겨 있는지 여부입니다. |
| custom? | `Record<string, unknown> | null` |
요소 타입
| 타입 | 추가 데이터 | 일반적인 용도 |
|---|---|---|
text | text, textStyle, textData | 스티커 메모, 레이블, 리치 텍스트 블록입니다. |
shape | shapeData | 사각형, 화살표, 설명선, 사용자 정의 도형입니다. |
image | source, imageSourceType, crop | 임베딩된 이미지입니다. |
connector | connectorData | 자유 지점이나 도형에 연결된 선과 화살표입니다. |
container | containerData | 프레임, 영역, 스윔레인, UML 패키지, 시스템 경계입니다. |
table | tableId | 테이블 플러그인에서 제공하는 보드 테이블 요소입니다. |
chart | chartId | 차트 요소입니다. |
media | mediaType, source | 오디오 및 동영상 자리표시자입니다. |
group | children | 그룹으로 묶인 요소 모음입니다. |
컨테이너
컨테이너는 containerData.behavior로 포함 관계의 동작을 정의하고 containerData.capturePolicy로 캡처 규칙을 정의합니다. 순서와 상하위 관계가 일관되게 유지되도록 요소를 컨테이너 안팎으로 이동할 때는 Facade 컨테이너 메서드를 사용하세요.
TypeScript
board.wrapElementsInContainer(['task-1', 'task-2'], { title: 'Sprint 1',})스윔레인
스윔레인은 containerData.swimlane이 있는 컨테이너입니다. 레인에는 안정적인 ID, 제목, 순서 값, 크기와 선택적인 축소 상태가 있습니다.
TypeScript
board.setSwimlaneLanes('lane-board', { orientation: 'horizontal', lanes: [ { id: 'todo', title: 'Todo', order: 0, size: 240 }, { id: 'doing', title: 'Doing', order: 1, size: 240 }, ],})커넥터
커넥터는 끝점과 라우팅 데이터를 사용합니다. 끝점은 자유 지점, 도형 경계, 연결 지점 또는 라이프라인일 수 있습니다. 라우팅 데이터는 도형의 기하 정보에 의존하는 경우가 많으므로 커넥터를 편집할 때는 Facade 작업이나 UI 작업을 우선 사용하세요.
이 가이드는 어떠셨나요?