This took a lot of trial and error to get this working.
- First I had to figure out how to copy the terminal output as HTML.
I had to configure keybindings for Select All and Copy As HTML in
the Ubuntu terminal.
- GitHub doesn't support line-height in markdown, so I came up with
using an SVG with <foreignObject> to contain the screenshot HTML.
- GitHub doesn't support inline SVG, so I had to use <img>, that's fine.
An external file is cleaner anyways.
- I spent a long time trying to fix the seams between rows of text.
`line-height: <font-size>` is not `line-height: 1`!
I think I tried `line-height: 1` first, but it wasn't working for some
reason so I tried a bajillion things, having mentally discounted it,
before circling back to it and trying it again and it actually worked.
- I spent a long time futzing about with SVG viewports and units.
- The text was staggered due to some of the Unicode characters, so I
developed a script to fix that up. I managed to achieve a nice
development cycle for this, but only near the end of developing it.
Most of the time while working on it I was copying and pasting
the updated code into the console after hitting up up enter to
re-run grapheme-splitter's JS.
The next commit will apply this script.
- All in all, getting this screenshot working took basically all day!
Compare that to my first day of progress on this project, having
never used the Textual framework before, and also having not used
Python for a while. In summary, coding is a land of contrasts.
- VS Code's markdown rendering isn't working with the ch/lh units.
These are pretty good candidates, paired together.
For the Free-Form Select icon (⢼⠮), I'm specifically imitating the
asymmetrical star shape from MS Paint.
Ideally it would be nice if you could access everything, but it's not
part of the design of MS Paint, and I don't want to design for it here.
In MS Paint, there's a minimum window size.
* Implemented the Fill With Color tool using the algorithm described as
"combined-scan-and-fill span filler" on Wikipedia.
* I added handling for the affected region being None, which turned
out more complicated than I would like...
Some cases may be able to be simplified or removed.
* Also, I moved event.stop() to the top so I don't need to call it in
multiple places when there are multiple return points.
You could imagine having a brush with momentum, that swings around the
mouse without always reaching it. But it's just generally clearer to
not have an inadequate initial region that's then extended.
