Add drag pan type

[ghsteff]

PR Checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

The only way to pan the chart is with scrolling

What is the new behavior?

You can pan charts by dragging the screen with panType='drag'. This will also enable zooming with the mouse wheel

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

Screen.Recording.2024-07-03.at.2.16.11.PM.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
reaflow	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 8, 2024 2:54pm

[netlify]

✅ Deploy Preview for reaflow ready!

Name	Link
🔨 Latest commit	85ec43c
🔍 Latest deploy log	https://app.netlify.com/sites/reaflow/deploys/668bfd605badc00008624cd6
😎 Deploy Preview	https://deploy-preview-256--reaflow.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[amcdnl]

We probably want to add pinch too. Use the pinch in react-use-gesture

[amcdnl]

I would also combine the gestures into 1 and use the wheel event they provide - https://use-gesture.netlify.app/docs/gestures/#handling-multiple-gestures-at-once

[ghsteff]

ah nice that's cleaner

[ghsteff]

the pinch zoom is already being applied here

reaflow/src/utils/useZoom.ts

Lines 52 to 67 in 85ec43c

	useGesture(
	{
	onPinch: ({ offset: [d], event }) => {
	event.preventDefault();
	// TODO: Set X/Y on center of zoom
	const next = limit(d / 100, minZoom, maxZoom);
	setFactor(next);
	onZoomChange(next + 1);
	}
	},
	{
	enabled: !disabled,
	domTarget: svgRef,
	eventOptions: { passive: false }
	}
	);

[amcdnl]

You don't need this because u set the domTarget correct?

[ghsteff]

Correct