Taffy Layout ドキュメント
ハイパフォーマンスでクロスプラットフォームな UI レイアウトエンジン。
Taffy Layout は Rust で書かれ、WebAssembly (JS/TS) にコンパイル可能な高性能レイアウトエンジンです。ブラウザレベルの Flexbox および Grid アルゴリズムを DOM に依存しないで実装しており、ターミナル UI、Canvas レンダラー、ゲーム UI、カスタムレンダリングエンジンに最適です。
作成できるもの
- DOM 非依存のレイアウト:Canvas、WebGL、ターミナルアプリ向けの CSS スタイルのレイアウト。
- 大規模なノードツリー:高速で決定論的なパフォーマンスを持つ大規模 UI ツリー。
- カスタム計測:テキスト、画像、動的コンテンツのサイズ計測のサポート。
- 再利用可能なパターン:UI コンポーネントに明確にマッピングされるレイアウトパターン。
ドキュメントマップ
| セクション | 説明 |
|---|---|
| スタートガイド | インストール、初期化、最初のレイアウト。 |
| コアコンセプト | サイズモデル、利用可能なスペース、計測。 |
| スタイリング | Flexbox、Grid、スペーシング、サイズ、配置。 |
| クックブック | すぐに使える一般的な UI レイアウトパターン。 |
| 高度なトピック | デバッグ、パフォーマンス、エラーハンドリング。 |
| API リファレンス | 詳細な API ドキュメント(自動生成)。 |
シンプルなメンタルモデル
Taffy の使用は、以下の3ステップだけで:
- 構築 (Construct):スタイル付きのノードツリーを構築します。
- 計算 (Compute):利用可能なスペースに基づいてレイアウトを計算します。
- 読み取り (Read):計算された
x、y、width、heightを取得します。
UI ツリー構造: └── TaffyTree ├── Style (入力: Flex, Width, Padding 等のルール) └── Layout (出力: 計算された X, Y, Width, Height)
次のステップ
- クイックスタート - 最初のレイアウトを数分で構築します。
- スタイリングガイド - レイアウトの制御方法を学びます。
- レイアウトクックブック - 実践的な例をコピー&ペーストします。