Skip to content

Feat/per line styling#462

Open
santichausis wants to merge 3 commits into
DenverCoder1:mainfrom
santichausis:feat/per-line-styling
Open

Feat/per line styling#462
santichausis wants to merge 3 commits into
DenverCoder1:mainfrom
santichausis:feat/per-line-styling

Conversation

@santichausis

Copy link
Copy Markdown

Closes #409

Summary

  • Each line can now have its own color, size, and letterSpacing
    via comma-separated values in the existing parameters
  • Fewer values than lines → last valid value repeats
  • Single value → applies globally (fully backwards compatible)
  • Demo UI: each line has its own color picker; global font color removed from Options

Usage

?lines=Hello;World;Foo&color=FF0000,00FF00,0000FF&size=20,30,14

Test plan

  • All 46 existing tests pass
  • New tests: single/multiple colors, fallback, invalid, per-line sizes, letter spacings
  • SVG output verified: each gets correct fill and font-size
  • Backwards compatible: existing single-value URLs unchanged

Allows each line to have its own color, font size, and letter spacing
by passing comma-separated values to the existing parameters.

- color=FF0000,00FF00 applies different colors per line
- size=20,30 applies different sizes per line
- letterSpacing=2px,normal applies different letter spacing per line

If fewer values are provided than lines, the last valid value is
repeated for the remaining lines. Single values continue to apply
globally, preserving full backwards compatibility.

Closes DenverCoder1#409
Each line in the demo now has its own color picker so users can
visually set different colors per line without editing the URL manually.

- Adds a color swatch next to each line input
- Removes the global font color from Options (replaced by per-line pickers)
- Outputs a single color value when all lines share the same color,
  or comma-separated values when they differ
- Handles add/remove/reset/restore correctly for per-line colors

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds per-line styling support for multiline typing SVG rendering by allowing comma-separated values for existing color, size, and letterSpacing parameters, and updates the demo UI and tests accordingly.

Changes:

  • Extend RendererModel to parse color, size, and letterSpacing into per-line arrays with fallback behavior.
  • Update the SVG template to apply per-line fill, font-size, and letter-spacing to each <text> element.
  • Update demo UI to use per-line color pickers and add PHPUnit tests for the new parsing behavior.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
tests/OptionsTest.php Adds unit tests covering per-line parsing for colors, sizes, and letter-spacing.
src/views/RendererView.php Passes per-line arrays into the template render scope.
src/templates/main.php Uses per-line arrays when emitting <text> styling attributes.
src/models/RendererModel.php Implements per-line parsing helpers and stores per-line arrays on the model.
src/demo/js/script.js Adds per-line color inputs and serializes them back into the color query param.
src/demo/index.php Adjusts demo layout and removes the global font color option.
src/demo/css/style.css Adds styling for the new 4-column line editor and color input.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +130 to +135
$this->sizes = $this->buildPerLineArray(
$params["size"] ?? $this->DEFAULTS["size"],
[$this, "parsePositiveInt"],
$this->size,
$lineCount
);
Comment thread src/templates/main.php
Comment on lines +58 to +61
<text font-family='"<?= $font ?>", monospace' fill='<?= $colors[$i] ?>' font-size='<?= $sizes[$i] ?>'
dominant-baseline='<?= $vCenter ? "middle" : "auto" ?>'
x='<?= $center ? "50%" : "0%" ?>' text-anchor='<?= $center ? "middle" : "start" ?>'
letter-spacing='<?= $letterSpacing ?>'>
letter-spacing='<?= $letterSpacings[$i] ?>'>
Comment thread src/demo/js/script.js Outdated
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
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.

Can we add multiline customization?

2 participants