Skip to content

transform:scale via react-zoom-pan-pinch causes incorrect behavior in autoscroll in PDND. #203

Open
@rohanajayjain

Description

@rohanajayjain

I'm a big fan of the library, and it's been great implementing drag and drop with it. However, I'm running into issues when trying to wrap the React Kanban Board example with react-zoom-pan-pinch which uses transform:scale under the hood for zoom in/zoom out interactions.

From what I gather, this is because PDND uses viewport coordinates and transform:scale doesn't actually change the layout, so there are inaccuracies in the calculations when not at a scale of 100%. For example, auto-scrolling and overflow scrolling fail when the parent is scaled.

Is this a supported use case of PDND? From my research, it seemed that this wasn't a supported use case of react-beautiful-dnd but would save me having to reimplement drag and drop if this library did support it.

If this is supported, I'd greatly appreciate any guidance on reconciling react-zoom-pan-pinch with PDND (or even just how to use a parent container with transform:scale and PDND). Thanks!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions