test: 💍 Added trackpad panning utils

__tests__/features/pan-touch/pan-touch.base.spec.tsx

@@ -81,44 +81,4 @@ describe("Pan Touch [Base]", () => {
       expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
     });
   });
-  // describe("When max position is set", () => {
-  // it("should not exceed max position", async () => {
-  //   const { content, touchPan } = renderApp({
-  //     maxPositionX: 20,
-  //     maxPositionY: 20,
-  //     doubleClick: {
-  //       disabled: true,
-  //     },
-  //   });
-  //   expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
-  //   touchPan({ x: 200, y: 200 });
-  //   expect(content.style.transform).toBe("translate(20px, 20px) scale(1)");
-  //   touchPan({ x: -20, y: -20 });
-  //   expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
-  // });
-  // it("should not exceed min position", async () => {
-  //   const { content, touchPan, zoom, ref } = renderApp({
-  //     minPositionX: 30,
-  //     minPositionY: 30,
-  //     onTransform: (ctx) => {
-  //       console.log(ctx.instance.state);
-  //     },
-  //   });
-  //   zoom({ value: 1.5 });
-  //   expect(content.style.transform).toBe("translate(30px, 30px) scale(1.5)");
-  //   touchPan({ x: -20, y: -20 });
-  //   await waitFor(() => {
-  //     expect(content.style.transform).toBe(
-  //       "translate(30px, 30px) scale(1.5)",
-  //     );
-  //   });
-  //   await sleep(10);
-  //   touchPan({ x: 50, y: 50 });
-  //   await waitFor(() => {
-  //     expect(content.style.transform).toBe(
-  //       "translate(80px, 80px) scale(1.5)",
-  //     );
-  //   });
-  // });
-  // });
 });

__tests__/features/pan-track-pad/pan-track-pad.base.spec.tsx

@@ -0,0 +1,83 @@
+import { waitFor } from "@testing-library/react";
+
+import { renderApp, sleep } from "../../utils";
+
+describe("Pan TrackPad [Base]", () => {
+  describe("When panning to coords", () => {
+    it("should not change translate with disabled padding", async () => {
+      const { content, trackPadPan } = renderApp({
+        wheel: {
+          disabled: true,
+        },
+        trackPadPanning: {
+          disabled: false,
+        },
+        disablePadding: true,
+      });
+      expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
+      trackPadPan({ x: -100, y: -100 });
+      expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
+    });
+    it("should return to position with padding enabled", async () => {
+      const { content, trackPadPan } = renderApp({
+        wheel: {
+          disabled: true,
+        },
+        trackPadPanning: {
+          disabled: false,
+        },
+        autoAlignment: {
+          disabled: false,
+        },
+      });
+      expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
+      trackPadPan({ x: -100, y: -100 });
+      expect(content.style.transform).toBe(
+        "translate(-100px, -100px) scale(1)",
+      );
+      await waitFor(() => {
+        expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
+      });
+    });
+  });
+  describe("When locked axis", () => {
+    it("should not change x axis transform", async () => {
+      const { content, trackPadPan } = renderApp({
+        wheel: {
+          disabled: true,
+        },
+        trackPadPanning: {
+          disabled: false,
+          lockAxisX: true,
+        },
+      });
+      expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
+      trackPadPan({ x: -100, y: -100 });
+      expect(content.style.transform).toBe("translate(0px, -100px) scale(1)");
+    });
+    it("should not change y axis transform", async () => {
+      const { content, trackPadPan } = renderApp({
+        wheel: {
+          disabled: true,
+        },
+        trackPadPanning: {
+          disabled: false,
+          lockAxisY: true,
+        },
+      });
+      expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
+      trackPadPan({ x: -100, y: -100 });
+      expect(content.style.transform).toBe("translate(-100px, 0px) scale(1)");
+    });
+  });
+  describe("When disabled", () => {
+    it("should not change transform", async () => {
+      const { content, trackPadPan } = renderApp({
+        disabled: true,
+      });
+      expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
+      trackPadPan({ x: -100, y: -100 });
+      expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
+    });
+  });
+});

__tests__/utils/render-app.tsx

@@ -20,6 +20,7 @@ interface RenderApp {
   wrapper: HTMLElement;
   pan: (options: { x: number; y: number; steps?: number }) => void;
   touchPan: (options: { x: number; y: number; steps?: number }) => void;
+  trackPadPan: (options: { x: number; y: number; steps?: number }) => void;
   zoom: (options: { value: number; center?: [number, number] }) => void;
   pinch: (options: {
     value: number;
@@ -283,6 +284,48 @@ export const renderApp = ({
     });
   };
 
+  const trackPadPan: RenderApp["trackPadPan"] = (options) => {
+    const { x, y, steps = 1 } = options;
+    if (!ref.current) throw new Error("ref.current is null");
+
+    waitForPreviousActionToEnd();
+
+    const xStep = x / steps;
+    const yStep = y / steps;
+
+    userEvent.hover(content);
+
+    fireEvent(
+      content,
+      new WheelEvent("wheel", {
+        bubbles: true,
+        deltaX: 0,
+        deltaY: 0,
+      }),
+    );
+    [...Array(steps)].forEach((_, index) => {
+      if (index !== steps - 1) {
+        fireEvent(
+          content,
+          new WheelEvent("wheel", {
+            bubbles: true,
+            deltaX: -xStep * index,
+            deltaY: -yStep * index,
+          }),
+        );
+      } else {
+        fireEvent(
+          content,
+          new WheelEvent("wheel", {
+            bubbles: true,
+            deltaX: -x,
+            deltaY: -y,
+          }),
+        );
+      }
+    });
+  };
+
   return {
     ...view,
     ref,
@@ -297,5 +340,6 @@ export const renderApp = ({
     pan,
     pinch,
     touchPan,
+    trackPadPan,
   };
 };

src/models/context.model.ts

@@ -93,12 +93,12 @@ export type ReactZoomPanPinchProps = {
     allowPanning?: boolean;
     excluded?: string[];
   };
-  trackPadPanning: {
-    disabled: boolean;
+  trackPadPanning?: {
+    disabled?: boolean;
     velocityDisabled?: boolean;
     lockAxisX?: boolean;
     lockAxisY?: boolean;
-    activationKeys: string[] | ((keys: string[]) => boolean);
+    activationKeys?: string[] | ((keys: string[]) => boolean);
     excluded?: string[];
   };
   doubleClick?: {

src/stories/docs/props.tsx

@@ -294,6 +294,42 @@ export const wrapperPropsTable: ComponentProps = {
         "List of the class names or tags that should not activate this feature. (E.g. ['my-custom-class-name', 'div', 'a'])",
     },
   },
+  trackPadPanning: {
+    trackPadPanning: {
+      type: [""],
+      defaultValue: "",
+      description: "",
+    },
+    disabled: {
+      type: ["boolean"],
+      defaultValue: String(initialSetup.panning.disabled),
+      description: "Disable the panning feature.",
+    },
+    lockAxisX: {
+      type: ["boolean"],
+      defaultValue: String(initialSetup.panning.lockAxisX),
+      description:
+        "Disable the panning feature for the X axis (prevents horizontal panning).",
+    },
+    lockAxisY: {
+      type: ["boolean"],
+      defaultValue: String(initialSetup.panning.lockAxisY),
+      description:
+        "Disable the panning feature for the Y axis (prevents vertical panning).",
+    },
+    activationKeys: {
+      type: ["string[]"],
+      defaultValue: String(initialSetup.panning.activationKeys),
+      description:
+        "List of keys which, when held down, should activate this feature.",
+    },
+    excluded: {
+      type: ["string[]"],
+      defaultValue: String(initialSetup.panning.excluded),
+      description:
+        "List of the class names or tags that should not activate this feature. (E.g. ['my-custom-class-name', 'div', 'a'])",
+    },
+  },
   doubleClick: {
     doubleClick: {
       type: [""],