feat: add canvas rendering for Arrow, Link, Vector, and Image marks#530
Merged
Conversation
Add canvas helpers for the four remaining marks without canvas support: - ArrowCanvas: uses Path2D(arrowPath()) to reuse existing geometry - LinkCanvas: uses d3-shape line().context() with curve factories - VectorCanvas: uses Path2D(shapePath()) with canvas translate/rotate - ImageCanvas: async image loading with cache + circular clipping Extract shared vector shape definitions (arrow, spike, arrow-filled) to src/lib/helpers/vectorShapes.ts to avoid duplication between Vector.svelte and VectorCanvas.svelte. All helpers follow a standardized convention: typed interface with generics, options prop (not mark), resolveScaledStyleProps for styles, Attachment pattern for lifecycle. Closes svelteplot#26, closes svelteplot#28, closes svelteplot#31, closes svelteplot#473. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Standalone guide explaining how to add canvas rendering to a mark. Covers the standardized convention, common patterns (Path2D, d3-shape context, transforms), and a reference table of all canvas helpers. Can be merged into CONTRIBUTING or kept as a standalone reference. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
✅ Deploy Preview for svelteplot ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
gka
approved these changes
Mar 29, 2026
Contributor
There was a problem hiding this comment.
can we move this into the AI instructions?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Add canvas rendering helpers for the four remaining marks that lacked canvas support, completing canvas coverage for all renderable marks.
arrowPath()geometry helper vianew Path2D(pathString), no geometry duplicationline().context(ctx)with curve factories for cartesian linksPath2D(shapePath())withctx.translate()/rotate()for positioned shapes; supports all three built-in shapes (arrow, spike, arrow-filled) plus customShapeRendererMap<string, HTMLImageElement>cache;$statecounter triggers redraws on load; circular clipping viactx.arc()/clip()whenris setRefactoring
maybeShape,shapePath) fromVector.sveltetosrc/lib/helpers/vectorShapes.ts— bothVector.svelte(SVG) andVectorCanvas.svelte(canvas) import from the same sourceVector.svelteis net -53 lines after extractionConvention
All four new helpers follow a standardized pattern (documented in
CANVAS_GUIDE.md, included as a separate droppable commit):interfacewithDatum extends DataRecordgenericsoptionsprop (notmark) — receives only what the helper needsresolveScaledStyleProps()for style resolution +resolveColor()for CSS variable/currentColor handlingconst render: Attachment = (canvasEl: Element) =>lifecycle patternclearRectcleanup in$effectreturnExisting canvas coverage (already in main)
The Tier 2 marks (BarX, BarY, Cell, RectX, RectY, AreaX, AreaY, RegressionX, RegressionY) already have canvas wired — they're thin wrappers that pass the
canvasprop through to their parent marks (Rect, Area, Line) which handle it. No changes needed.Test plan
pnpm test— 758 tests pass (91 files)pnpm check— 0 type errorspnpm lint— 0 errors (after prettier)Closes #26, closes #28, closes #31, closes #473.
Prerequisite for #32 (
<Plot canvas>toggle).🤖 Generated with Claude Code