💡 Multi-line flex wrapping (flexWrap)
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 52/100
- issue の種類
- 機能追加
- 明瞭さ
- おおむね明確
- 活発さ
- 静か
- 技術スタック
- c, typescript
- 領域
- cli
調査の方向性
test/flex-wrap.test.ts で失敗しているテストを実行し、nm/repro/flex-wrap の diff を main と比較します。ops.ts のレイアウトグループを、src/clayterm.c:499 のデコードと vendored の clay/clay.h の設定まで追跡します。wrap、nowrap、wrap-reverse が要求された行配置を生成し、nowrap がデフォルトのままであれば完了です。
索引モデルが issue の本文から書いたものです。
説明
Is your feature request related to a problem?
A flex container lays every child out on a single main-axis line, so children that exceed the container's main-axis size overflow past it instead of breaking. In a row container 2 cells wide with children A (1 wide) and BC (2 wide), BC is placed at x:1 and overflows to x:3—past width:2—and the grid prints ABC on one row. There's no way to ask a container to wrap, which makes column-of-cards / tag-cloud layouts impossible without measuring and chunking children by hand on the JS side.
Describe the solution you'd like
A container set to wrap should start a new line when a child no longer fits along the main axis (accumulated child main size + gaps exceeds the container's main-axis size), stacking the lines along the cross axis. For the example above, BC should land at {x:0, y:1, width:2, height:1} and the grid should print A then BC on two rows.
open("root", {
layout: {
width: fixed(2),
height: fixed(4),
direction: "ltr",
flexWrap: "wrap", // "nowrap" (default) | "wrap" | "wrap-reverse"
},
});
flexWrap should mirror the CSS flex-wrap property. Default to "nowrap", support "wrap" and "wrap-reverse".
Describe alternatives you've considered
We can pre-measure children in JS, chunk them into rows by hand, and emit a column of explicit ltr rows. That falls apart the moment sizing is fit/grow (we'd be duplicating the renderer's own measurement) and it doesn't survive a resize without re-chunking.
Additional context
Failing test case on nm/repro/flex-wrap (test · diff).
A wrap field needs to thread through the wire format and the layout pass: the layout group in ops.ts, the layout decode in reduce (src/clayterm.c:499), and Clay_LayoutConfig in the vendored clay/clay.h, which is single-line today.
- 主要言語
- TypeScript
- スター
- 42
- フォーク
- 2
- 平均マージ
- 2日 5時間
- マージ済み PR(30日)
- 12
コントリビューションガイド
このリポジトリのコントリビューションガイドは索引されていません
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
bombshell-dev/tty のほかの issue
-
enhancement
難易度 2/5 1〜3時間 初心者へのやさしさ 76/100
bombshell-dev/tty#61 · リアクション 1 件 ·
-
難易度 5/5 1週間以上 初心者へのやさしさ 25/100
bombshell-dev/tty#129 ·
-
question
難易度 5/5 1週間以上 初心者へのやさしさ 38/100
bombshell-dev/tty#112 ·
-
enhancement high priority
難易度 3/5 1〜2日 初心者へのやさしさ 68/100
bombshell-dev/tty#83 · コメント 2 件 ·
-
enhancement
難易度 4/5 3〜5日 初心者へのやさしさ 48/100
bombshell-dev/tty#82 ·
bombshell-dev/tty の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
-
bug v2
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
modelcontextprotocol/inspector#2458 · コメント 1 件 ·
-
難易度 1/5 1時間未満 初心者へのやさしさ 75/100
railmapgen/rmp-gallery#4068 ·
-
Mend: dependency security vulnerability status: needs triage 🕵️♀️
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
carbon-design-system/ibm-products#9907 ·