ボード要素
ボードページでは、描画可能なオブジェクトを 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 操作を使用することを推奨します。
このガイドはいかがですか？