Problem
I’m making an SVG font editor where you can drag and drop components to create compound characters. The position and dimension of the component grows/shrinks in the unit size of the grid, but the rendered component doesn’t snap to grid.
Steps to reproduce
- Go to the live web app
- Click on the “+” button next to “Compound Characters”
- Enter an arbitrary letter “c”
- Press enter to create a compound character
- Drag any characters under “Simple Characters” to the grid editor on the right
- In the grid editor, drag the component around. You can see that it is not snapped to grid
Code
Model
stores a dictionary of characters of MyChar
type. There are two kinds of characters - SimpleChar
and CompoundChar
. They both contains MyCharRef
which stores mainly the dimension
(width & height) and position
(x & y) of the character. The unit of measurement is percentage so the character can be scaled relative to its parent CompoundChar
or the root SVG. A SimpleChar
is basically an alias for MyCharRef
and a CompoundChar
contains a list of MyCharRef
as its components in addition to its own information stored in a separate MyCharRef
.
type MyChar
= SimpleChar MyCharRef
| CompoundChar MyCharRef (List MyCharRef)
type alias MyCharRef =
{ char : Char
, id : Id
, dimension : Vec2
, position : Vec2
}
The characters are rendered in a square grid of size boxUnits
and has a border of width borderUnits
round it. The actual size in px of a unit is stored in unitSize
.
renderChar
renders the character
onDragBy
updates the position and dimension of components
My guesses
- Maybe I messed up the position calculation in the
renderChar
function? - Maybe due to limited accuracy of the percentage unit in svg?