Dynamic snap to guidelines, instead of widths/heights provided for each axis?

[brutal-orange]

Environments

• Framework name: React
• Framework version: 18.2
• Moveable Component version: 0.55.0
• Testable Address(optional): Here

Description

I have a Moveable that uses grid lines as its guidelines. I'm trying to find a way to make it snap/resize to only its guidelines, no in-betweens. I am not setting any snapWidth/Height properties, since, in my case, they can be dynamic and/or unknown. I can compute them if I really needed to, but I'd much rather not.

Every time a section is created, it gets a number of rows/columns-as-divs, those are then set and used as guidelines (the guidelines is an array of classes, nothing more).

In essence, given my definition of Moveable inside Element.tsx, is there a way to make it snap to its guidelines?

Awesome library, btw :)

[daybrush]

@brutal-orange

Try setting snapThreshold, snapWidth, and snapHeight to the same number.

Now the threshold has the same width and height, but I will add threshold props for width and height respectively.

[brutal-orange]

@daybrush Thanks a lot for the quick answer - again, really amazing library - unfortunately, not what I need.

I need the snappable to snap only to guidelines. Assume that the width/height of the snappable was correct, and that it'd match my CSS grid.

Not sure if it makes sense, but if I were to put snapGridHeight/Width at, say, 30,50 (to match my container's width+height, together with its rows/columns), that'd work, but what do I do when the screen resizes? It's better to snap to guidelines, if possible, since CSS grid is inherently responsive, so, my 30,50 would adapt to screen size. I understand the math behind this is a bit more complicated, but do you think this is something the library can help me with, or do I have to write it on my own?

This is what I wanna do: see how the draggable snaps to the grid lines only?

[daybrush]

@brutal-orange

That's what I said.

I plan to add snapVerticalThreshold={50}, snapHorizontalThreshold={30} like this.

A similar role now is snapThreshold.

[brutal-orange]

Incredible @daybrush - the amount of support you put into this library is insane. Unparalleled. Wish you the best, and here's to many more years of daybrush! 👍

[jadiagaurang]

@daybrush and @brutal-orange, I have similar requirements to snap Elements to CSSGrid (Squarespace Style)

#935

For now, I am using snapGridWidth: 50 and snapGridHeight: 50 to achieve that! I also round the x and y positions to the nearest 50 if needed on the "dragEnd" event.

I look forward to seeing how I can use snapVerticalThreshold and snapHorizontalThreshold!

Thanks!

[brutal-orange]

Hey @jadiagaurang - saw your other issue! Any chance you can post a link to your working example? As I noted, if we worked with fixed values, we'll have issues on responsive screens. In essence, we'd always have some padding, to ensure our real container is a multiplier of 50 (so, if it wasn't, we'd get misaligments). I'm sorry if the wording here is bad on my part, but it seems that concrete values will not be a good candidate, simply because of this. We need to "snap to [only] guidelines"...whatever that means technically.

---

Btw, as a side-note: if "snapping to guidelines" were possible, the way I built my grid would work. You can even make the guidelines 1px wide/tall, so that you wouldn't snap to the (current implementation's) guidedlines' edges. On the looks side of things - I will make sure to post a working nice example of my app. Just happened to stumble upon Squarespace's builder. Theirs looks nice, BUT it can be improved massively. Alas, it's all just CSS trickery, so, not sure how helpful it'll be :)

[jadiagaurang]

@brutal-orange I can't post a working example due to my employer's policy. But I look forward to your working example with CSS Grid output.

[daybrush]

@jadiagaurang @brutal-orange

• croact-moveable 0.9.0
• @moveable/helper 0.1.3
• lit-moveable 0.30.0
• moveable 0.53.0
• preact-moveable 0.55.0
• react-moveable 0.56.0
• svelte-moveable 0.45.0
• vue-moveable 2.0.0-beta.87
• vue3-moveable 0.28.0
• ngx-moveable 0.50.0

moveable's new version is released.

snapVerticalThreshold, snapHorizontalThreshold props are added.

Make snapVerticalThreshold equal to snapGridWidth.
Make snapHorizontalThreshold equal to snapGridHeight.