feat: added pan on scroll, improve the build (#447)

Co-authored-by: Nikita Nafranets <n.nafranets@vk.team>

Author: dimensi

.github/workflows/release.yml

@@ -17,7 +17,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Wait on tests
-        uses: lewagon/wait-on-check-action@v1.1.2
+        uses: lewagon/wait-on-check-action@v1.3.1
         with:
           ref: ${{ github.ref }}
           check-name: "Run tests"

package.json

@@ -8,6 +8,9 @@
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "source": "src/index.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "rollup -c",
     "build:docs": "build-storybook",

rollup.config.js

@@ -29,7 +29,7 @@ export default [
         exclude: "node_modules/**",
       }),
       del({ targets: ["dist/*"] }),
-      typescript({ sourceMap: false }),
+      typescript({ sourceMap: false, declaration: false }),
       postcss({
         modules: true,
       }),

src/constants/state.constants.ts

@@ -37,6 +37,7 @@ export const initialSetup: LibrarySetup = {
     allowLeftClickPan: true,
     allowMiddleClickPan: true,
     allowRightClickPan: true,
+    wheelPanning: false,
     activationKeys: [],
     excluded: [],
   },

src/core/instance.core.ts

@@ -26,7 +26,12 @@ import {
   handleWheelZoom,
   handleWheelStop,
 } from "./wheel/wheel.logic";
-import { isPanningAllowed, isPanningStartAllowed } from "./pan/panning.utils";
+import {
+  getPaddingValue,
+  handleNewPosition,
+  isPanningAllowed,
+  isPanningStartAllowed,
+} from "./pan/panning.utils";
 import {
   handlePanning,
   handlePanningEnd,
@@ -68,6 +73,7 @@ export class ZoomPanPinch {
   public wheelAnimationTimer: ReturnType<typeof setTimeout> | null = null;
   // panning helpers
   public isPanning = false;
+  public isWheelPanning = false;
   public startCoords: StartCoordsType = null;
   public lastTouch: number | null = null;
   // pinch helpers
@@ -112,6 +118,11 @@ export class ZoomPanPinch {
     const passive = makePassiveEventOption();
     const currentDocument = this.wrapperComponent?.ownerDocument;
     const currentWindow = currentDocument?.defaultView;
+    this.wrapperComponent?.addEventListener(
+      "wheel",
+      this.onWheelPanning,
+      passive,
+    );
     // Panning on window to allow panning when mouse is out of component wrapper
     currentWindow?.addEventListener("mousedown", this.onPanningStart, passive);
     currentWindow?.addEventListener("mousemove", this.onPanning, passive);
@@ -197,6 +208,44 @@ export class ZoomPanPinch {
   // Pan
   /// ///////
 
+  onWheelPanning = (event: WheelEvent): void => {
+    const { disabled, wheel, panning } = this.setup;
+    if (
+      !this.wrapperComponent ||
+      !this.contentComponent ||
+      disabled ||
+      !wheel.wheelDisabled ||
+      panning.disabled ||
+      !panning.wheelPanning ||
+      event.ctrlKey
+    ) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    const { positionX, positionY } = this.transformState;
+    const mouseX = positionX - event.deltaX;
+    const mouseY = positionY - event.deltaY;
+    const newPositionX = panning.lockAxisX ? positionX : mouseX;
+    const newPositionY = panning.lockAxisY ? positionY : mouseY;
+
+    const { sizeX, sizeY } = this.setup.alignmentAnimation;
+    const paddingValueX = getPaddingValue(this, sizeX);
+    const paddingValueY = getPaddingValue(this, sizeY);
+
+    if (newPositionX === positionX && newPositionY === positionY) return;
+
+    handleNewPosition(
+      this,
+      newPositionX,
+      newPositionY,
+      paddingValueX,
+      paddingValueY,
+    );
+  };
+
   onPanningStart = (event: MouseEvent): void => {
     const { disabled } = this.setup;
     const { onPanningStart } = this.props;

src/models/context.model.ts

@@ -86,6 +86,7 @@ export type ReactZoomPanPinchProps = {
     allowRightClickPan?: boolean;
     activationKeys?: string[];
     excluded?: string[];
+    wheelPanning?: boolean;
   };
   pinch?: {
     step?: number;

src/stories/docs/props.tsx

@@ -230,6 +230,11 @@ export const wrapperPropsTable: ComponentProps = {
       defaultValue: String(initialSetup.panning.disabled),
       description: "Disable the panning feature.",
     },
+    wheelPanning: {
+      type: ["boolean"],
+      defaultValue: String(initialSetup.panning.wheelPanning),
+      description: "Enable wheel/trackpad panning.",
+    },
     velocityDisabled: {
       type: ["boolean"],
       defaultValue: String(initialSetup.panning.velocityDisabled),
@@ -251,20 +256,17 @@ export const wrapperPropsTable: ComponentProps = {
     allowLeftClickPan: {
       type: ["boolean"],
       defaultValue: String(initialSetup.panning.allowLeftClickPan),
-      description:
-        "Allow left click to initiate panning",
+      description: "Allow left click to initiate panning",
     },
     allowMiddleClickPan: {
       type: ["boolean"],
       defaultValue: String(initialSetup.panning.allowMiddleClickPan),
-      description:
-        "Allow middle click to initiate panning",
+      description: "Allow middle click to initiate panning",
     },
     allowRightClickPan: {
       type: ["boolean"],
       defaultValue: String(initialSetup.panning.allowRightClickPan),
-      description:
-        "Allow right click to initiate panning",
+      description: "Allow right click to initiate panning",
     },
     activationKeys: {
       type: ["string[]"],

src/stories/types/args.types.ts

@@ -71,6 +71,14 @@ export const argsTypes = {
       disable: true,
     },
   },
+  "panning.wheelPanning": {
+    defaultValue: initialSetup.panning.wheelPanning,
+    control: { type: "boolean" },
+    table: {
+      defaultValue: { summary: "false" },
+      type: { summary: "boolean" },
+    },
+  },
   "panning.disabled": {
     defaultValue: initialSetup.panning.disabled,
     control: { type: "boolean" },