Snapgrid vertical/horizontal guidelines relative to a specific container

Environments

• Framework name: React
• Framework version: Latest
• Moveable Component version: Latest
• Testable Address(optional):

Description

Hello, I’m looking for a way to pass a list of vertical and horizontal guidelines using the snappable able, but make the guidelines relative to the container of the element or a user-specified container. Would it be possible to include a prop like the following:

guidelinesContainer: (selected: (HTMLElement | SVGElement)[]) => HTMLElement

Return value of this would be the container that the guidelines are relative to.

This way when I pass guidelines to verticalGuidelines and horizontalGuidelines, the values can depend on a container other than the container of the react-moveable instance.

[nelsondude]

On second thought, I’m thinking a better way for this would be when passing in verticalGuidelines/horizontalGuidelines, the prop would have the following typing:

type verticalGuidelines = number[] | {container: HTMLElement, value: number}[] type horizontalGuidelines = number[] | {container: HTMLElement, value: number}[]

This would allow the user to specify the guideline relative to a particular container before hand. My use case is that I have a single moveable instance managing the components on multiple “pages” but these pages can be zoomed in and out. Since the moveable instance currently lives outside of the pages, the vertical guidelines have to be changed every time the zoom of the page is changed

[nelsondude]

No problem, i think this should help me accomplish what I was trying to do. Thanks! works great.