Skip to content

Add multi-SVG frame sequence support to plot prep tool - #32

Merged
dxviie merged 3 commits into
mainfrom
claude/prep-multiple-svg-support-qk5w24
Jul 30, 2026
Merged

Add multi-SVG frame sequence support to plot prep tool#32
dxviie merged 3 commits into
mainfrom
claude/prep-multiple-svg-support-qk5w24

Conversation

@dxviie

@dxviie dxviie commented Jul 30, 2026

Copy link
Copy Markdown
Owner

Summary

Extends the plot prep tool to handle multiple same-size SVGs as a frame sequence, laying them out in a grid across multiple pages. This enables batch processing of animation frames or studio video exports directly in the prep tool.

Key Changes

  • Frame sequence input: Accept multiple SVGs, folders, or ZIP archives (including the studio's frame-sequence format) via drag-and-drop or file picker

    • Automatically sorts frames using natural filename ordering (frame-2 before frame-10)
    • Validates that all frames have uniform dimensions
    • Extracts SVGs from ZIP archives with optional svg/ subfolder support

  • Grid layout system (src/lib/prep/multi.ts):

    • Calculates optimal grid layout fitting frames on pages with configurable margins and gaps
    • Centers grid blocks on pages and respects edge clearance
    • Handles overflow gracefully with a fits flag when frames exceed usable area

  • Frame numbering: Renders frame numbers as single-stroke Hershey digits (src/lib/prep/hershey.ts)

    • Extracts frame numbers from filenames or uses 1-based position
    • Configurable offset from cell corners
    • Plottable output layer

  • Paper outline styles (src/lib/prep/outline.ts):

    • Refactored outline rendering to support three styles: full rectangle, corner marks, or crosses
    • Corner/cross marks work as cut guides around multi-frame cells

  • Layer merging (src/lib/prep/multi.ts):

    • Combines per-frame Inkscape layers into unified output layers (all "CYAN" layers merge into one)
    • Preserves layer structure for Saxi/Inkscape pen selection
    • Supports reversed layer duplication across all frames

  • Multi-frame export:

    • Exports frame sequences as ZIP archives with one SVG per page
    • Each page contains properly positioned and scaled frame content with merged layers
    • Includes frame numbers, paper outlines, and calibration markers as needed

  • ZIP reading (src/lib/prep/zipRead.ts):

    • Minimal ZIP parser supporting stored and deflate-compressed entries
    • Handles archives with optional comments and directory entries

  • UI enhancements:

    • Frame layout controls: margin, gap, edge clearance, label offset
    • Frame numbers layer toggle
    • Paper outline style selector
    • Multi-frame preview with page navigation
    • Folder picker button for convenient directory selection
    • Updated empty state messaging

Implementation Details

  • Grid layout uses row-major cell indexing with configurable gaps and edge margins
  • Frame positioning accounts for viewBox transformations and scaling
  • Layer merging preserves first-appearance order and strips colliding IDs
  • Hershey glyph rendering trims left side bearing for optical alignment
  • ZIP reading scans backwards for end-of-central-directory to handle archive comments
  • All grid/naming logic is unit-tested; DOM operations isolated to browser context

https://claude.ai/code/session_01GJsUC1mnuqLosvcYYg27js

claude added 3 commits July 30, 2026 11:16
@claude
Support multiple SVGs in prep for studio frame sequences
fe0ebe2 
The prep tool now accepts a list of same-size SVGs, a folder, or the
studio's frame-sequence zip (SVGs in the root or an svg/ subfolder) —
geared to the video export. Frames are laid out as a centered grid with
per-frame margin, adjustable gap and page-edge clearance, across as many
pages as needed, with a paged preview.

- mixed frame sizes are rejected with a clear message
- matching layers of all frames are merged into one layer per label, so
  color/layer selection in saxi stays as simple as for a single SVG
- each frame carries its number in plottable Hershey simplex digits, on
  a frame-labels layer
- paper outline gained a style select (full rectangle, corners,
  crosses) — around each frame cell in multi mode, and available for
  single SVGs too
- export downloads a zip with one decorated page SVG per sheet

New prep modules: zipRead (stored + deflate reader), hershey (public
domain simplex digits), multi (grid math, name utils, layer merge),
outline (mark styles) — pure parts unit-tested.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GJsUC1mnuqLosvcYYg27js
@claude
Place frame numbers equidistant from cell left and bottom edges
cf23607 
The label keeps (margin − height)/2 below its baseline; use the same
inset from the cell's left edge instead of the full frame margin. Trim
the Hershey glyphs' left side bearing so the ink starts exactly at the
inset — digit 1 carries a wide built-in bearing that would otherwise
push it visibly right.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GJsUC1mnuqLosvcYYg27js
@claude
Decouple frame-number placement from the frame margin
74d215f 
New 'number offset' slider under frame layout sets the number's distance
from its cell's bottom-left corner, and a 'frame numbers' toggle under
output layers turns the layer off entirely (hiding the slider with it).
The number's cap height is a fixed 2.5 mm now instead of following the
margin.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GJsUC1mnuqLosvcYYg27js
@dxviie
dxviie merged commit f6cd7db into main Jul 30, 2026
2 checks passed
@dxviie
dxviie deleted the claude/prep-multiple-svg-support-qk5w24 branch July 30, 2026 12:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@dxviie @claude