[Feature] Resources: `<mask>` and non-rectangular (path) clips
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 5/5
- 预计耗时
- 一周以上
- 新手友好度
- 42/100
- Issue 类型
- 功能
- 描述清晰度
- 基本清楚
- 活跃度
- 活跃
- 技术栈
- typescript
调研方向
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.
由索引模型根据 Issue 内容生成。
描述
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).
- 主要语言
- TypeScript
- 星标
- 819
- 派生
- 49
- 平均合并
- 4 小时 58 分钟
- 30 天内合并 PR
- 15
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 没有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
TanStack/charts 的其他 Issue
-
[Bug] Focus guides: `url(#id)` paints ignore `idPrefix`可能已有人在做 @getdownandcode 于 1 天前认领。 未关闭
难度 2/5 1-3 小时 新手友好度 78/100
维护者通常 1 天内回复
-
[Bug] Printed charts keep their screen width: resize redraw waits for an animation frame可能已有人在做 @piecyk 今天认领。 未关闭
难度 3/5 1-2 天 新手友好度 25/100
维护者通常 1 天内回复
-
[Feature] Readable outside labels for crowded pie and donut charts可能已有人在做 关联的 PR 仍在进行中或已合并。 未关闭
难度 5/5 一周以上 新手友好度 25/100
维护者通常 1 天内回复
-
难度 4/5 3-5 天 新手友好度 57/100
维护者通常 1 天内回复
-
难度 5/5 一周以上 新手友好度 35/100
维护者通常 1 天内回复
相似的 Issue
-
enhancement good first issue help wanted
难度 2/5 1-3 小时 新手友好度 78/100
OWASP/cve-lite-cli#1335 ·
维护者通常 1 天内回复
-
难度 1/5 1 小时以内 新手友好度 66/100
code-yeongyu/senpi#3353 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 72/100
维护者通常 1 天内回复
-
Channels status: needs triage
难度 2/5 1-3 小时 新手友好度 70/100
mastra-ai/mastra#27093 · 1 条评论 ·
维护者通常 1 天内回复
-
enhancement needs-triage ui
难度 2/5 1-3 小时 新手友好度 86/100
维护者通常 1 天内回复