Logical layout + percentage prop-getter

Offen
  • Stimmt etwas nicht?
#34 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Anfängerfreundlichkeit
35/100
Issue-Typ
Feature
Klarheit
Größtenteils klar
Aktivitätsstatus
Ruhig
Tech-Stack
typescript
Bereich
frontend

Rechercherichtung

Start by reading the parent issue #25 and the blocking issue #28 to understand the surrounding design and whether this work can begin. Then trace the core projection and view-layer APIs described here; the payload does not name specific files or tests. Done means the projection exposes fractional logical layout without container dimensions, and the view prop-getter produces percentage styles for both orientations.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

enhancement

Parent

https://github.com/TanStack/time/issues/25

What to build

Remove all pixel values from the core projection and introduce a percentage-based prop-getter that gives consumers an easy, zero-configuration way to position events. The kernel and projection are pixel-free; the prop-getter lives on the view layer.

The projection emits logical Event Layout per event: `{ startFraction, endFraction, column, columnCount, lane }`. The `getEventProps(event)` prop-getter on the view converts these into a `%`-based `style` object the consumer spreads directly onto an element. View orientation (vertical for day/week, horizontal for timeline) is a config on the view, not a separate function.

The timeline view ships under this slice — it is a view over the same logical layout data, not a separate product.

Acceptance criteria

  • `getUnavailableRanges(date)` no longer accepts `containerHeight`; returns fractional ranges (`{ startFraction, endFraction }`)
  • `getTimelineLayout()` returns fractional `left`/`width` (0–1 range) and logical `lane` index — no pixel values
  • `getEventProps(event)` returns `{ style: { position: 'absolute', top: '...%', height: '...%', ... } }` for vertical orientation
  • `getEventProps(event)` returns `{ style: { position: 'absolute', left: '...%', width: '...%', ... } }` for horizontal (timeline) orientation
  • Raw logical fields (`startFraction`, `endFraction`, `column`, `columnCount`, `lane`) remain public on the event layout object for canvas/virtualized renderers
  • Overlap resolution (interval-graph coloring → `column`/`columnCount`) is computed in the projection, not in the prop-getter
  • `currentTimePosition` (previously in pixels) is returned as a fraction (0–1)
  • No method in the core or projection accepts a container dimension as a parameter

Blocked by

https://github.com/TanStack/time/issues/28

Vorherrschende Sprache
TypeScript
Sterne
620
Forks
6
Keine gemergten PRs in 30 T.

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus TanStack/time

Alle Issues in TanStack/time

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.