Fix pinch-zoom crash when second finger lands in ScrollElement

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres (more or less) to [Semantic Versioning](http://semver.o
 
 ## Unreleased
 
+## 0.30.0 (beta.19)
+
+* Fix crash (`Cannot read properties of null (reading 'x')`) during two-finger pinch-zoom on touch devices in ScrollElement.
+
 ## 0.30.0 (beta.18)
 
 * Migrate test suite from Jest/Enzyme to Vitest + React Testing Library.

__tests__/components/ScrollElement/ScrollElement.test.tsx

@@ -292,4 +292,55 @@ describe("ScrollElement", () => {
 
     rafSpy.mockRestore();
   });
+
+  it("does not throw on the first pinch-zoom move after the second finger lands", () => {
+    const onZoomMock = vi.fn();
+    const { getByTestId } = render(
+      <ScrollElement {...defaultProps} onZoom={onZoomMock}>
+        <div />
+      </ScrollElement>
+    );
+
+    const scrollEl = getByTestId("scroll-element");
+
+    act(() => {
+      scrollEl.dispatchEvent(
+        new PointerEvent("pointerdown", {
+          clientX: 100,
+          clientY: 200,
+          pointerType: "touch",
+          isPrimary: true,
+          bubbles: true,
+        })
+      );
+      scrollEl.dispatchEvent(
+        new PointerEvent("pointerdown", {
+          clientX: 300,
+          clientY: 200,
+          pointerType: "touch",
+          isPrimary: false,
+          bubbles: true,
+        })
+      );
+    });
+
+    expect(() => {
+      act(() => {
+        scrollEl.dispatchEvent(
+          new PointerEvent("pointermove", {
+            clientX: 350,
+            clientY: 200,
+            pointerType: "touch",
+            isPrimary: false,
+            bubbles: true,
+          })
+        );
+      });
+    }).not.toThrow();
+
+    expect(onZoomMock).toHaveBeenCalledTimes(1);
+    const [scale, xRatio] = onZoomMock.mock.calls[0];
+    expect(scale).toBe(0.8);
+    expect(Number.isFinite(xRatio)).toBe(true);
+  });
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-calendar-timeline",
-  "version": "0.30.0-beta.18",
+  "version": "0.30.0-beta.19",
   "description": "react-calendar-timeline",
   "packageManager": "npm@10.1.0",
   "scripts": {

src/lib/scroll/ScrollElement.tsx

@@ -183,10 +183,9 @@ class ScrollElement extends Component<Props, State> {
       this.lastTouchDistance = null;
       this.singleTouchStart = { x: e.clientX, y: e.clientY, screenY: window.scrollY };
       this.lastSingleTouch = { x: e.clientX, y: e.clientY, screenY: window.scrollY };
-    } else {
+    } else if (this.singleTouchStart) {
       e.preventDefault();
-      this.lastTouchDistance = Math.abs(e.clientX - this.singleTouchStart!.x);
-      this.singleTouchStart = null;
+      this.lastTouchDistance = Math.abs(e.clientX - this.singleTouchStart.x);
       this.lastSingleTouch = null;
     }
   };
@@ -197,11 +196,11 @@ class ScrollElement extends Component<Props, State> {
       e.preventDefault();
       return;
     }
-    if (this.lastTouchDistance && !e.isPrimary) {
+    if (this.lastTouchDistance && !e.isPrimary && this.singleTouchStart) {
       e.preventDefault();
-      const touchDistance = Math.abs(e.clientX - this.singleTouchStart!.x);
+      const touchDistance = Math.abs(e.clientX - this.singleTouchStart.x);
       const parentPosition = getParentPosition(e.currentTarget as HTMLElement);
-      const xPosition = (e.clientX + this.singleTouchStart!.x) / 2 - parentPosition.x;
+      const xPosition = (e.clientX + this.singleTouchStart.x) / 2 - parentPosition.x;
       if (touchDistance !== 0 && this.lastTouchDistance !== 0) {
         onZoom(this.lastTouchDistance / touchDistance, xPosition / width);
         this.lastTouchDistance = touchDistance;
@@ -228,6 +227,7 @@ class ScrollElement extends Component<Props, State> {
   handleTouchEnd = () => {
     if (this.lastTouchDistance) {
       this.lastTouchDistance = null;
+      this.singleTouchStart = null;
     }
     if (this.lastSingleTouch) {
       this.lastSingleTouch = null;