💡 Multi-line flex wrapping (flexWrap)

Đang mở
#63 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
52/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
c, typescript
Lĩnh vực
cli

Hướng nghiên cứu

Chạy test đang bị lỗi trong test/flex-wrap.test.ts và so sánh diff của nm/repro/flex-wrap với main. Theo dõi nhóm layout trong ops.ts qua phần giải mã trong src/clayterm.c:499 và cấu hình clay/clay.h vendored. Hoàn tất khi wrap, nowrap và wrap-reverse tạo ra vị trí dòng được yêu cầu, trong đó nowrap vẫn là mặc định.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

enhancement

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.

Ngôn ngữ chính
TypeScript
Star
42
Fork
2
Merge trung bình
2 ngày 5 giờ
Pull request đã merge (30 ngày)
12

Hướng dẫn đóng góp

Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của bombshell-dev/tty

Tất cả issue của bombshell-dev/tty

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.