Problem snapping SVG to grid

[AlienKevin]

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

1. Go to the live web app
2. Click on the “+” button next to “Compound Characters”
3. Enter an arbitrary letter “c”
4. Press enter to create a compound character
5. Drag any characters under “Simple Characters” to the grid editor on the right
6. 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?

[AlienKevin]

The problem turns out to be that I scaled the drag length with a wrongly calculated factor. I fixed the factor now and mostly solved the issue.