refactor(image-cropper): prefer dom events

Author: segunadebayo

packages/machines/image-cropper/src/image-cropper.connect.ts

@@ -232,43 +232,6 @@ export function connect<T extends PropTypes>(
           const point = getEventPoint(event)
           send({ type: "PAN_POINTER_DOWN", point })
         },
-        onWheel(event) {
-          const viewportEl = event.currentTarget
-          const rect = viewportEl.getBoundingClientRect()
-          const point = {
-            x: event.clientX - rect.left,
-            y: event.clientY - rect.top,
-          }
-          send({ type: "ZOOM", trigger: "wheel", delta: event.deltaY, point })
-        },
-        onTouchStart(event) {
-          if (event.touches.length >= 2) {
-            const touches = Array.from(event.touches).map((touch) => ({
-              x: touch.clientX,
-              y: touch.clientY,
-            }))
-
-            send({ type: "PINCH_START", touches })
-          }
-        },
-        onTouchMove(event) {
-          if (event.touches.length >= 2) {
-            event.preventDefault()
-
-            const touches = Array.from(event.touches).map((touch) => ({
-              x: touch.clientX,
-              y: touch.clientY,
-            }))
-
-            send({ type: "PINCH_MOVE", touches })
-          }
-        },
-
-        onTouchEnd(event) {
-          if (event.touches.length < 2) {
-            send({ type: "PINCH_END" })
-          }
-        },
       })
     },
 

packages/machines/image-cropper/src/image-cropper.machine.ts

@@ -187,7 +187,7 @@ export const machine = createMachine<ImageCropperSchema>({
   states: {
     idle: {
       entry: ["checkImageStatus"],
-      effects: ["trackViewportResize"],
+      effects: ["trackViewportResize", "trackWheelEvent", "trackTouchEvents"],
       on: {
         SET_NATURAL_SIZE: {
           actions: ["setNaturalSize"],
@@ -810,6 +810,70 @@ export const machine = createMachine<ImageCropperSchema>({
           resizeObserver.disconnect()
         }
       },
+
+      trackWheelEvent({ scope, send }) {
+        const viewportEl = dom.getViewportEl(scope)
+        if (!viewportEl) return
+
+        function onWheel(event: WheelEvent) {
+          event.preventDefault()
+
+          if (!viewportEl) return
+
+          const rect = viewportEl.getBoundingClientRect()
+          const point = {
+            x: event.clientX - rect.left,
+            y: event.clientY - rect.top,
+          }
+
+          send({ type: "ZOOM", trigger: "wheel", delta: event.deltaY, point })
+        }
+
+        return addDomEvent(viewportEl, "wheel", onWheel, { passive: false })
+      },
+
+      trackTouchEvents({ scope, send }) {
+        const viewportEl = dom.getViewportEl(scope)
+        if (!viewportEl) return
+
+        function onTouchStart(event: TouchEvent) {
+          if (event.touches.length >= 2) {
+            event.preventDefault()
+
+            const touches = Array.from(event.touches).map((touch) => ({
+              x: touch.clientX,
+              y: touch.clientY,
+            }))
+
+            send({ type: "PINCH_START", touches })
+          }
+        }
+
+        function onTouchMove(event: TouchEvent) {
+          if (event.touches.length >= 2) {
+            event.preventDefault()
+
+            const touches = Array.from(event.touches).map((touch) => ({
+              x: touch.clientX,
+              y: touch.clientY,
+            }))
+
+            send({ type: "PINCH_MOVE", touches })
+          }
+        }
+
+        function onTouchEnd(event: TouchEvent) {
+          if (event.touches.length < 2) {
+            send({ type: "PINCH_END" })
+          }
+        }
+
+        return callAll(
+          addDomEvent(viewportEl, "touchstart", onTouchStart, { passive: false }),
+          addDomEvent(viewportEl, "touchmove", onTouchMove, { passive: false }),
+          addDomEvent(viewportEl, "touchend", onTouchEnd),
+        )
+      },
     },
   },
 })

website/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts"
+import "./.next/dev/types/routes.d.ts"
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.