Taffy: 柔軟で高性能なクロスプラットフォームUIレイアウトライブラリ

Taffyは、Rustで書かれた、柔軟で高性能なクロスプラットフォームUIレイアウトライブラリです。現在、CSS Block、Flexbox、CSS Gridのレイアウトアルゴリズムを実装しています。他のパラダイムへの対応も計画されています。このライブラリやその他の将来の開発計画については、ロードマップのイシューを参照してください。このクレートは、複数のチームによる共同プロジェクトであり、他のUIおよびGUIライブラリの依存関係として使用されるように設計されています。現在、以下のライブラリでTaffyが使用されています: Servo: 代替ウェブブラウザ Blitz: ラディカルにモジュラー化されたウェブエンジン Bevy: 人間工学に基づいた、ECSファーストのRustゲームエンジン Takumi: Reactコンポーネントを画像にレンダリング iocraft: ターミナル用の美しいインターフェースを作成 Slint: ネイティブユーザーインターフェースを構築するための宣言型GUIツールキット Lapceテキストエディタ（Floem UIフレームワーク経由） Zedテキストエディタ（GPUI UIフレームワーク経由） Usage use taffy::prelude::* // まずTaffyTreeのインスタンスを作成します let mut tree : TaffyTree<()> = TaffyTree::new(); // `TaffyTree.new_leaf`と`TaffyTree.new_with_children`を使用してノードのツリーを作成します。 // これらの関数はどちらも、そのノードを参照するために使用できるノードIDを返します。 // Style構造体はスタイリング情報を指定するために使用されます。 let header_node = tree .new_leaf(Style { size: Size { width: length(800.0), height: length(100.0) }, ..Default::default() }) .unwrap(); let body_node = tree .new_leaf(Style { size: Size { width: length(800.0), height: auto() }, flex_grow: 1.0, ..Default::default() }) .unwrap(); let root_node = tree .new_with_children( Style { flex_direction: FlexDirection::Column, size: Size { width: length(800.0), height: length(600.0) }, ..Default::default() }, &[header_node, body_node], ) .unwrap(); // レイアウトアルゴリズムを実行するためにツリーのルートでcompute_layoutを呼び出します tree.compute_layout(root_node, Size::MAX_CONTENT).unwrap(); // `TaffyTree.layout`を使用して計算されたレイアウトを検査します assert_eq!(tree.layout(root_node).unwrap().size.width, 800.0); assert_eq!(tree.layout(root_node).unwrap().size.height, 600.0); assert_eq!(tree.layout(header_node).unwrap().size.width, 800.0); assert_eq!(tree.layout(header_node).unwrap().size.height, 100.0); assert_eq!(tree.layout(body_node).unwrap().size.width, 800.0); assert_eq!(tree.layout(body_node).unwrap().size.height, 500.0); // この値は明示的に設定されていませんでしたが、Taffyによって計算されました 他の言語へのバインディング Python（stretchable WIP） Cバインディング（WIP） WASMバインディング 学習リソース TaffyはFlexboxとCSS Gridの仕様を忠実に実装しているため、Web向けに設計されたドキュメントはTaffyの実装にもそのまま適用できます。個々のスタイルプロパティのリファレンスドキュメントについては、MDNドキュメント（例: widthプロパティに関するこのページ）を参照することをお勧めします。通常、検索エンジンで「MDN property-name」と検索すると、そのようなページを見つけることができます。CSSレイアウトに関するガイドレベルのドキュメントに興味がある場合は、以下のリソースをお勧めします: Flexbox Flexbox Froggy. これは、Flexboxの重要な部分を楽しくインタラクティブに学べるチュートリアル/ゲームです。 A Complete Guide To Flexbox by CSS Tricks. これは、さまざまなFlexboxプロパティとその仕組みについて、イラストと包括的な説明を含む詳細なガイドです。 CSS Grid CSS Grid Garden. これは、CSS Gridの重要な部分を楽しくインタラクティブに学べるチュートリアル/ゲームです。 A Complete Guide To CSS Grid by CSS Tricks. これは、さまざまなCSS Gridプロパティとその仕組みについて、イラストと包括的な説明を含む詳細なガイドです。 ベンチマーク（Yogaとの比較） 2021 MacBook Pro M1 Proプロセッサでcriterionを使用して実行 ベンチマークはレイアウト計算のみを測定します。ツリー作成は測定しません。 Yogaのベンチマークはyogaクレート（Rustバインディング）経由で実行されました。 ほとんどの一般的なウェブサイトには3,000から10,000ノードが含まれているようです（ただし、テキストレイアウトも必要ですが、yogaとtaffyの両方とも実装していません）。 以下の表には複数の異なる単位（ミリ秒 vs マイクロ秒）が含まれていることに注意してください。 Benchmark Node Count Depth Yoga (ba27f9d) Taffy (71027a8) yoga 'huge nested' 1,000 3 364.60 µs 329.04 µs yoga 'huge nested' 10,000 4 4.1988 ms 4.3486 ms yoga 'huge nested' 100,000 5 45.804 ms 38.559 ms big trees (wide) 1,000 1 737.77 µs 505.99 µs big trees (wide) 10,000 1 7.1007 ms 8.3395 ms big trees (wide) 100,000 1 135.78 ms 247.42 ms big trees (deep) 4,000 12 2.2333 ms 1.7400 ms big trees (deep) 10,000 14 5.9477 ms 4.4445 ms big trees (deep) 100,000 17 76.755 ms 63.778 ms super deep 1,000 1,000 555.32 µs 472.85 µs 貢献 貢献を歓迎します。taffyを使用、改善、または構築したい場合は、会話に参加したり、イシューを開いたり、PRを送信したりしてください。taffyの使用方法について質問がある場合は、ディスカッションを開いてください。そうすれば、他の人が見つけられるように質問に答えることができます。