search

open-source-labs / Svelvet

🎛 A Svelte library for building dynamic, infinitely customizable node-based user interfaces and flowcharts
https://svelvet.io
2.49k stars 161 forks source link

Align snapTo based on Grid dots if grid and snapTo is the same size #489

Open mmailaender opened 7 months ago

mmailaender commented 7 months ago

The (default) gridWith is 22px big. If the snapTo is also set to 22px the alignment of the nodes should be based on the Grid dots.

Current behavior: image

Expected behavior (Screenshot from React Flow): image

kkarpeev commented 7 months ago

Hi! I've tried to force this behavior on v8 with a custom background component (with background-image: radial-gradient(), position & size), but didn't succeed for now. Just don't have time to finish it properly. Maybe I'll return to this later.
And, yeah, that is expected behavior out-of-box if we take React Flow as a prototype.

mmailaender commented 7 months ago

Maybe an easy solution could be to align the background grid with x: 0 and y: 0?

Currently x: 0 and y: 0 is in the center of 4 dots. image

And instead making one dot as the anchor for x: 0 and y: 0 like this: image

kkarpeev commented 1 week ago

Maybe an easy solution could be to align the background grid with x: 0 and y: 0?

Have you tried zoom?