fix(zoomwithwheel): animate should always be disabled when zooming wi…

…th wheel

Close gh-571

demo/examples/Focal.tsx

@@ -28,7 +28,8 @@ export default function Focal() {
   const panzoomRef = useRef<PanzoomObject>(null)
   let panzoom = panzoomRef.current
   useEffect(() => {
-    panzoom = panzoomRef.current = Panzoom(elem.current, { canvas: true })
+    // Ensure animate doesn't interfere with zoomWithWheel
+    panzoom = panzoomRef.current = Panzoom(elem.current, { animate: true, canvas: true })
     const parent = elem.current.parentElement
     parent.addEventListener('wheel', function (event) {
       if (!event.shiftKey) {

src/panzoom.ts

@@ -406,7 +406,7 @@ function Panzoom(
     // or it conflicts with regular page scroll
     event.preventDefault()
 
-    const opts = { ...options, ...zoomOptions }
+    const opts = { ...options, ...zoomOptions, animate: false }
 
     // Normalize to deltaX in case shift modifier is used on Mac
     const delta = event.deltaY === 0 && event.deltaX ? event.deltaX : event.deltaY

src/types.ts

@@ -336,12 +336,16 @@ export interface PanzoomObject {
   /**
    * Zoom the Panzoom element to a focal point using the given WheelEvent
    *
-   *
    * This is a convenience function that may not handle all use cases.
    * Other cases should handroll solutions using the `zoomToPoint`
    * method or the `zoom` method's focal option.
    *
-   * **Note**: the focal point zooming pan adjustment is not affected by the `disablePan` option.
+   * **Notes**:
+   *
+   * - the focal point zooming pan adjustment is
+   *   not affected by the `disablePan` option.
+   * - animate should not be used when zooming with the wheel,
+   *   and is therefore always disabled.
    *
    * ```js
    * // Bind to mousewheel