new(zoom): add pinch and zoom support

package.json

@@ -49,6 +49,7 @@
     "release": "yarn run prepare-release && lerna publish --exact",
     "setup": "yarn run build",
     "test": "yarn run jest",
+    "test:watch": "yarn run jest --watch",
     "ts": "ts-node --project ./tsconfig.node.json",
     "type": "nimbus typescript --build --reference-workspaces",
     "type:workspaces": "nimbus typescript --build"

packages/visx-demo/src/sandboxes/visx-geo-custom/Example.tsx

@@ -75,14 +75,14 @@ export default function GeoCustom({ width, height, events = true }: GeoCustomPro
 
   return width < 10 ? null : (
     <>
-      <Zoom
+      <Zoom<SVGSVGElement>
         width={width}
         height={height}
         scaleXMin={100}
         scaleXMax={1000}
         scaleYMin={100}
         scaleYMax={1000}
-        transformMatrix={{
+        initialTransformMatrix={{
           scaleX: initialScale,
           scaleY: initialScale,
           translateX: centerX,
@@ -93,7 +93,13 @@ export default function GeoCustom({ width, height, events = true }: GeoCustomPro
       >
         {zoom => (
           <div className="container">
-            <svg width={width} height={height} className={zoom.isDragging ? 'dragging' : undefined}>
+            <svg
+              width={width}
+              height={height}
+              className={zoom.isDragging ? 'dragging' : undefined}
+              ref={zoom.containerRef}
+              style={{ touchAction: 'none' }}
+            >
               <rect x={0} y={0} width={width} height={height} fill={background} rx={14} />
               <CustomProjection<FeatureShape>
                 projection={PROJECTIONS[projection]}

packages/visx-demo/src/sandboxes/visx-zoom-i/Example.tsx

@@ -38,21 +38,22 @@ export default function ZoomI({ width, height }: ZoomIProps) {
 
   return (
     <>
-      <Zoom
+      <Zoom<SVGSVGElement>
         width={width}
         height={height}
         scaleXMin={1 / 2}
         scaleXMax={4}
         scaleYMin={1 / 2}
         scaleYMax={4}
-        transformMatrix={initialTransform}
+        initialTransformMatrix={initialTransform}
       >
         {zoom => (
           <div className="relative">
             <svg
               width={width}
               height={height}
-              style={{ cursor: zoom.isDragging ? 'grabbing' : 'grab' }}
+              style={{ cursor: zoom.isDragging ? 'grabbing' : 'grab', touchAction: 'none' }}
+              ref={zoom.containerRef}
             >
               <RectClipPath id="zoom-clip" width={width} height={height} />
               <rect width={width} height={height} rx={14} fill={bg} />

packages/visx-zoom/package.json

@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "@types/react": "*",
+    "@use-gesture/react": "^10.0.0-beta.22",
     "@visx/event": "1.7.0",
     "prop-types": "^15.6.2"
   }