Add Left, Right, and Middle click pan options

[EEwing]

This PR allows users to disable panning with certain mouse buttons. At the moment, any mouse button that triggers a MouseEvent will initiate panning, but in many situations a user might want to limit that functionality to a single button, or any of a set of buttons. For instance, a common use case is that right click should not pan, or that only middle click should pan to emulate other similar desktop applications with zoom/pan/pinch interfaces.

With this PR, all three buttons (left click, right click, middle click) are enabled by default to avoid changing existing functionality. To disable specific button presses, you can add any of the following props to the TransformWrapper:

allowLeftClickPan: Allows left click to initiate panning. Defaults to true
allowMiddleClickPan: Allows middle click to initiate panning. Defaults to true
allowRightClickPan: Allows right click to initiate panning. Defaults to true

Here is an example bit of code to disable left and right click panning, and only allow middle click to initiate panning:

function MyComponent() {
    return (
        <TransformWrapper
            panning={{
                allowLeftClickPan: false,
                allowMiddleClickPan: true,
                allowRightClickPan: false
            }}
        >
            <TransformComponent>
                <div>Content</div>
            </TransformComponent>
        </TransformWrapper>
    )
}

[Trithir]

This would be incredibly helpful! The only way I can use panning right now is by using an activationKey. Being able to enable only MMB for panning would improve the UX greatly.

[github-actions]

🎉 This PR is included in version 3.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀