[Feature] Resources: `<mask>` and non-rectangular (path) clips
Los mantenedores suelen responder en 1 día
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 5/5
- Tiempo estimado
- Más de una semana
- Aptitud para principiantes
- 42/100
- Tipo de issue
- Nueva funcionalidad
- Claridad
- Bastante claro
- Estado de actividad
- Activo
- Stack tecnológico
- typescript
- Área
- data-visualization, frontend
Línea de trabajo
Start with packages/charts-core/src/types.ts for SceneGroup.clip, then trace how clipping is rendered in svg-renderer.ts and canvas.ts and applied in nearest.ts hit testing. The request also needs a mask resource alongside gradients or patterns, but does not specify its shape or rendering API. Done means path clips work in SVG, canvas, and hit testing, and masks can be declared and referenced as resources.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
Version: @tanstack/charts 1.1.0 (57774e1). Split from the comments on #128 and #191 so the ask stays open when those issues close.
Two resource types have no scene representation: a <mask> (first reported on 0.16.0, still absent in 1.1.0) and a clip that is not a rectangle.
Mask (from #128's comment)
An SVG <mask> with maskUnits="userSpaceOnUse" used as an edge fade on a live (rolling) line chart. It fades the line, its fill and the tip marker together, so a stroke gradient with opacity stops in gradients cannot replace it. We render it beside the chart svg and reference it by id, the same seam as patterns. packages/charts-core/src has no mask handling.
Path clip (from #191's comment)
SceneGroup.clipisChartBounds(x,y,width,height) (types.ts:1500).- The SVG renderer always writes
<clipPath><rect/></clipPath>(svg-renderer.ts:169-176), canvas usescontext.rect(...)thenclip()(canvas.ts:1243-1251), and hit testing intersects bounds (nearest.ts:198-203). - The only path
<clipPath>is private to the arc enter sweep (motion.ts:1653-1663). No scene node carries a path clip or mask.
Example: a highlight pulse that must be clipped to a non-rectangular silhouette (an isometric bar's front face, side face and lid). A rectangular clip lights the neighbouring faces.
Ask
Allow clip to be a rect or a path ({ path: string, fillRule?: 'nonzero' | 'evenodd' }), rendered as the <clipPath> child in SVG and a Path2D clip on canvas, with the path's bounds used for hit testing. For masks, a declared masks resource next to gradients (scoped by idPrefix), or the same generic resource slot that PR #166 adds for <pattern>.
Read from source, not run.
Related: #128 / PR #166 (<pattern> resources), #191 (gradients).
- Lenguaje dominante
- TypeScript
- Estrellas
- 819
- Forks
- 49
- Merge medio
- 12 h 9 min
- PR fusionados (30 d)
- 6
Preparar el entorno
- Sin Dockerfile ni archivo de Docker Compose
- Sin plantilla de pull request
- Leer la guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de TanStack/charts
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
Los mantenedores suelen responder en 1 día
-
Renderer treats a sub-pixel width difference as a resize, which cancels the `motion()` entranceAbierto
Dificultad 1/5 Menos de una hora Aptitud para principiantes 85/100
TanStack/charts#182 · 1 comentario ·
Los mantenedores suelen responder en 1 día
-
brushX with `values` can shorten the selection range when it’s dragged to the plot edgePosiblemente ocupada @andersk la tomó hace 6 días. Abierto
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
Los mantenedores suelen responder en 1 día
-
Dificultad 4/5 3-5 días Aptitud para principiantes 57/100
Los mantenedores suelen responder en 1 día
-
Dificultad 5/5 Más de una semana Aptitud para principiantes 35/100
Los mantenedores suelen responder en 1 día
Todos los issues de TanStack/charts
Issues similares
-
priority:high
Dificultad 2/5 1-3 horas Aptitud para principiantes 72/100
Los mantenedores suelen responder en 1 día
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
Los mantenedores suelen responder en 1 día
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 65/100
immich-app/immich#32426 ·
Los mantenedores suelen responder en 1 día
-
documentation good first issue hacktoberfest help wanted
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
libredb/libredb-studio#1756 ·
Los mantenedores suelen responder en 1 día
-
state:triage-needed
Dificultad 2/5 1-3 horas Aptitud para principiantes 62/100
Los mantenedores suelen responder en 1 día