Skip to content

User feedback: SVG export preserves view state and Inkscape-compatible structure#17

Open
happykhan wants to merge 2 commits into
masterfrom
fix/svg-export
Open

User feedback: SVG export preserves view state and Inkscape-compatible structure#17
happykhan wants to merge 2 commits into
masterfrom
fix/svg-export

Conversation

@happykhan
Copy link
Copy Markdown
Owner

Summary

Fixes two user-reported issues with SVG/PNG export from BRIG plots.

Issue Change Status
#14 - SVG export resets zoom and legend positions Thread zoom, pan offset, and legend positions from the canvas preview through to the SVG renderer so exports match the on-screen view Done
#15 - SVG is flat/uneditable in Inkscape Add Inkscape namespace, id/label attributes on all groups, hoist gradient defs to root, add transparent background rects on legend groups Done

Details

Issue #14: The ExportPanel previously created a fresh CircularPlotRenderer with no access to the zoom/pan/legend-drag state held in CircularPlot. Now CircularPlot exposes a PlotViewState via callback, Home threads it to ExportPanel, and the SVG renderer's render() method accepts an optional SVGViewState to apply the same transforms.

Issue #15: SVG groups now have meaningful id and inkscape:label attributes (e.g. "GC Content", "Ring: query_name", "Scale Markers"). Gradient <defs> are hoisted from legend groups to a top-level <defs id="defs"> element so they resolve correctly when groups are moved. Legend groups have a transparent background rect so they can be selected as a unit.

Test plan

  • npm run build passes (TypeScript + Vite)
  • npm test passes (132/132 unit tests)
  • Manual: load a reference genome, zoom/pan the plot, drag legends, then export SVG and verify the view matches
  • Manual: open exported SVG in Inkscape and verify groups appear as named layers with selectable legends

🤖 Generated with Claude Code

happykhan and others added 2 commits May 27, 2026 16:33
)

The SVG export previously created a fresh renderer with no access to
the user's current zoom level, pan offset, or dragged legend positions.
This meant the exported image always showed the default 100% view
regardless of what the user was looking at in the canvas preview.

- Add PlotViewState interface and onViewStateChange callback to CircularPlot
- Expose getLegendPositions() on CanvasPlotRenderer
- Thread view state from CircularPlot -> Home -> ExportPanel -> SVG renderer
- Both SVG and PNG exports now reproduce the exact canvas view

Closes #14

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…re (#15)

The SVG renderer now produces Inkscape-compatible output:

- Add xmlns:inkscape namespace to the root <svg> element
- Add id and inkscape:label attributes to all <g> elements so each ring,
  legend, and scale marker appears as a named layer/group in Inkscape
- Hoist gradient <defs> from legend groups to the top-level <svg> element
  so gradient references resolve correctly when groups are moved
- Add transparent background rects to GC and ring legend groups so they
  are selectable as a single unit in Inkscape
- Accept SVGViewState in render() to apply zoom/pan transforms and
  user-dragged legend positions to the exported SVG

Closes #15

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@cloudflare-workers-and-pages
Copy link
Copy Markdown

Deploying brigx with  Cloudflare Pages  Cloudflare Pages

Latest commit: 05e141c
Status: ✅  Deploy successful!
Preview URL: https://e999b5a2.brigx.pages.dev
Branch Preview URL: https://fix-svg-export.brigx.pages.dev

View logs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant