Logical layout + percentage prop-getter

Ouverte
#34 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
5/5
Temps estimé
Plus d'une semaine
Accessibilité débutants
35/100
Type d'issue
Fonctionnalité
Clarté
Plutôt claire
Activité
Calme
Stack technique
typescript
Domaine
frontend

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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

Langage dominant
TypeScript
Étoiles
620
Forks
6
Métriques de merge des PR
Aucune PR mergée en 30 j

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de TanStack/time

Toutes les issues de TanStack/time

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.