Skip to content

Commit

Permalink
new(zoom): add pinch and zoom support (#1305)
Browse files Browse the repository at this point in the history
* feat: added pinch and zoom support to visx-zoom

* deps: update yarn.lock

* chore: pr comments

* feat: changed pinchDelta to match wheelDelta since you do not have access to zoom in callback

* fix: zoom test

* feat: enhanced performance by pulling out default props and adding memoization to onPinch handler

Co-authored-by: Anthony Neel <aneel@snapchat.com>
Co-authored-by: Chris Williams <chris.williams@airbnb.com>
  • Loading branch information
3 people authored Aug 11, 2021
1 parent 8759b2a commit 2fc69e9
Show file tree
Hide file tree
Showing 8 changed files with 313 additions and 225 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
12 changes: 9 additions & 3 deletions packages/visx-demo/src/sandboxes/visx-geo-custom/Example.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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]}
Expand Down
7 changes: 4 additions & 3 deletions packages/visx-demo/src/sandboxes/visx-zoom-i/Example.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down
1 change: 1 addition & 0 deletions packages/visx-zoom/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
Expand Down
Loading

0 comments on commit 2fc69e9

Please sign in to comment.