docs: ✏️ Stories preparations

Author: prc5

package.json

@@ -35,6 +35,8 @@
     "@babel/runtime": "^7.23.8",
     "@commitlint/cli": "^18.4.4",
     "@commitlint/config-conventional": "^18.4.4",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-typescript": "^11.1.6",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^11.1.0",
     "@semantic-release/git": "^10.0.1",

rollup.config.mjs

@@ -4,7 +4,7 @@ import del from "rollup-plugin-delete";
 import typescript from "@rollup/plugin-typescript";
 import postcss from "rollup-plugin-postcss";
 import dts from "rollup-plugin-dts";
-import pkg from "./package.json";
+import pkg from "./package.json" with { type: "json" };
 
 export default [
   {

src/constants/state.constants.ts

@@ -29,6 +29,14 @@ export const initialSetup: LibrarySetup = {
     activationKeys: [],
     excluded: [],
   },
+  trackPadPanning: {
+    disabled: true,
+    velocityDisabled: false,
+    lockAxisX: false,
+    lockAxisY: false,
+    activationKeys: [],
+    excluded: [],
+  },
   panning: {
     disabled: false,
     velocityDisabled: false,
@@ -37,7 +45,6 @@ export const initialSetup: LibrarySetup = {
     allowLeftClickPan: true,
     allowMiddleClickPan: true,
     allowRightClickPan: true,
-    wheelPanning: false,
     activationKeys: [],
     excluded: [],
   },

src/core/instance.core.ts

@@ -17,15 +17,18 @@ import {
   getTransformStyles,
   makePassiveEventOption,
   getCenterPosition,
+  isExcludedNode,
 } from "../utils";
 import { handleCancelAnimation } from "./animations/animations.utils";
-import { isWheelAllowed } from "./wheel/wheel.utils";
+import { isWheelAllowed, isWheelPanningAllowed } from "./wheel/wheel.utils";
 import { isPinchAllowed, isPinchStartAllowed } from "./pinch/pinch.utils";
 import { handleCalculateBounds } from "./bounds/bounds.utils";
 import {
   handleWheelStart,
   handleWheelZoom,
   handleWheelStop,
+  handleWheelPanningStop,
+  handleWheelPanningStart,
 } from "./wheel/wheel.logic";
 import {
   getPaddingValue,
@@ -135,6 +138,16 @@ export class ZoomPanPinch {
       this.onWheelPanning,
       passive,
     );
+    this.wrapperComponent?.addEventListener(
+      "keyup",
+      this.setKeyUnPressed,
+      passive,
+    );
+    this.wrapperComponent?.addEventListener(
+      "keydown",
+      this.setKeyPressed,
+      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);
@@ -163,7 +176,21 @@ export class ZoomPanPinch {
     currentWindow?.removeEventListener("keyup", this.setKeyUnPressed, passive);
     currentWindow?.removeEventListener("keydown", this.setKeyPressed, passive);
     document.removeEventListener("mouseleave", this.clearPanning, passive);
-
+    this.wrapperComponent?.removeEventListener(
+      "wheel",
+      this.onWheelPanning,
+      passive,
+    );
+    this.wrapperComponent?.removeEventListener(
+      "keyup",
+      this.setKeyUnPressed,
+      passive,
+    );
+    this.wrapperComponent?.removeEventListener(
+      "keydown",
+      this.setKeyPressed,
+      passive,
+    );
     handleCancelAnimation(this);
     this.observer?.disconnect();
   };
@@ -222,56 +249,55 @@ export class ZoomPanPinch {
     const isAllowed = isWheelAllowed(this, event);
     if (!isAllowed) return;
 
-    const keysPressed = this.isPressingKeys(this.setup.wheel.activationKeys);
-    if (!keysPressed) return;
-
     handleWheelStart(this, event);
     handleWheelZoom(this, event);
     handleWheelStop(this, event);
   };
 
   /// ///////
-  // Pan
+  // Track Pad Panning
   /// ///////
 
   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;
-    }
+    const { onPanning } = this.props;
+    const { trackPadPanning } = this.setup;
+    const { lockAxisX, lockAxisY } = trackPadPanning;
+
+    const isAllowed = isWheelPanningAllowed(this, event);
+
+    if (!isAllowed) return;
 
     event.preventDefault();
     event.stopPropagation();
 
     const { positionX, positionY } = this.state;
     const mouseX = positionX - event.deltaX;
     const mouseY = positionY - event.deltaY;
-    const newPositionX = panning.lockAxisX ? positionX : mouseX;
-    const newPositionY = panning.lockAxisY ? positionY : mouseY;
+    const newPositionX = lockAxisX ? positionX : mouseX;
+    const newPositionY = lockAxisY ? positionY : mouseY;
 
     const { sizeX, sizeY } = this.setup.autoAlignment;
     const paddingValueX = getPaddingValue(this, sizeX);
     const paddingValueY = getPaddingValue(this, sizeY);
 
     if (newPositionX === positionX && newPositionY === positionY) return;
 
+    handleWheelPanningStart(this, event);
     handleNewPosition(
       this,
       newPositionX,
       newPositionY,
       paddingValueX,
       paddingValueY,
     );
+    handleCallback(getContext(this), event, onPanning);
+    handleWheelPanningStop(this, event);
   };
 
+  /// ///////
+  // Pan
+  /// ///////
+
   onPanningStart = (event: MouseEvent): void => {
     const { disabled } = this.setup;
     const { onPanningStart } = this.props;
@@ -315,10 +341,11 @@ export class ZoomPanPinch {
   };
 
   onPanningStop = (event: MouseEvent | TouchEvent): void => {
+    const { velocityDisabled } = this.setup.panning;
     const { onPanningStop } = this.props;
 
     if (this.isPanning) {
-      handlePanningEnd(this);
+      handlePanningEnd(this, velocityDisabled);
       handleCallback(getContext(this), event, onPanningStop);
     }
   };
@@ -456,6 +483,11 @@ export class ZoomPanPinch {
 
   setKeyPressed = (e: KeyboardEvent): void => {
     this.pressedKeys[e.key] = true;
+    console.log(
+      Object.entries(this.pressedKeys)
+        .filter(([, pressed]) => pressed)
+        .map(([key]) => key),
+    );
   };
 
   setKeyUnPressed = (e: KeyboardEvent): void => {

src/core/pan/panning.logic.ts

@@ -71,9 +71,9 @@ export function handlePanning(
 
 export function handlePanningEnd(
   contextInstance: ReactZoomPanPinchContext,
+  velocityDisabled: boolean,
 ): void {
   if (contextInstance.isPanning) {
-    const { velocityDisabled } = contextInstance.setup.panning;
     const { velocity, wrapperComponent, contentComponent } = contextInstance;
 
     contextInstance.isPanning = false;

src/core/wheel/wheel.logic.ts

@@ -119,3 +119,43 @@ export const handleWheelStop = (
     }, wheelStopEventTime);
   }
 };
+
+export const handleWheelPanningStart = (
+  contextInstance: ReactZoomPanPinchContext,
+  event: WheelEvent,
+): void => {
+  const { onWheelStart, onPanningStart } = contextInstance.props;
+
+  if (!contextInstance.wheelStopEventTimer) {
+    handleCancelAnimation(contextInstance);
+    handleCallback(getContext(contextInstance), event, onWheelStart);
+    handleCallback(getContext(contextInstance), event, onPanningStart);
+  }
+};
+
+export const handleWheelPanningStop = (
+  contextInstance: ReactZoomPanPinchContext,
+  event: WheelEvent,
+): void => {
+  const { onWheelStop, onPanningStop } = contextInstance.props;
+
+  // fire animation
+  cancelTimeout(contextInstance.wheelAnimationTimer);
+  contextInstance.wheelAnimationTimer = setTimeout(() => {
+    if (!contextInstance.mounted) return;
+    handleAlignToScaleBounds(contextInstance, event.x, event.y);
+    contextInstance.wheelAnimationTimer = null;
+  }, wheelAnimationTime);
+
+  // Wheel stop event
+  const hasStoppedZooming = handleWheelZoomStop(contextInstance, event);
+  if (hasStoppedZooming) {
+    cancelTimeout(contextInstance.wheelStopEventTimer);
+    contextInstance.wheelStopEventTimer = setTimeout(() => {
+      if (!contextInstance.mounted) return;
+      contextInstance.wheelStopEventTimer = null;
+      handleCallback(getContext(contextInstance), event, onWheelStop);
+      handleCallback(getContext(contextInstance), event, onPanningStop);
+    }, wheelStopEventTime);
+  }
+};

src/core/wheel/wheel.utils.ts

@@ -22,6 +22,41 @@ export const isWheelAllowed = (
 
   if (isExcluded) return false;
 
+  const keysPressed = contextInstance.isPressingKeys(
+    contextInstance.setup.wheel.activationKeys,
+  );
+
+  if (!keysPressed) return false;
+
+  return true;
+};
+
+export const isWheelPanningAllowed = (
+  contextInstance: ReactZoomPanPinchContext,
+  event: WheelEvent,
+): boolean => {
+  const { disabled, trackPadPanning } = contextInstance.setup;
+  const { activationKeys, excluded } = trackPadPanning;
+
+  if (!contextInstance.wrapperComponent || !contextInstance.contentComponent) {
+    return false;
+  }
+
+  if (disabled || trackPadPanning.disabled || event.ctrlKey) {
+    return false;
+  }
+
+  const isAllowed = isWheelAllowed(contextInstance, event);
+  // Cannot execute at the same time as wheel zoom
+  if (isAllowed) return false;
+
+  const target = event.target as HTMLElement;
+  const isExcluded = isExcludedNode(target, excluded);
+  if (isExcluded) return false;
+
+  const keysPressed = contextInstance.isPressingKeys(activationKeys);
+  if (!keysPressed) return false;
+
   return true;
 };
 

src/models/context.model.ts

@@ -86,14 +86,21 @@ export type ReactZoomPanPinchProps = {
     allowRightClickPan?: boolean;
     activationKeys?: string[] | ((keys: string[]) => boolean);
     excluded?: string[];
-    wheelPanning?: boolean;
   };
   pinch?: {
     step?: number;
     disabled?: boolean;
     allowPanning?: boolean;
     excluded?: string[];
   };
+  trackPadPanning: {
+    disabled: boolean;
+    velocityDisabled?: boolean;
+    lockAxisX?: boolean;
+    lockAxisY?: boolean;
+    activationKeys: string[] | ((keys: string[]) => boolean);
+    excluded?: string[];
+  };
   doubleClick?: {
     disabled?: boolean;
     step?: number;

src/stories/docs/props.tsx

@@ -230,17 +230,6 @@ 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),
-      description:
-        "Disable the panning velocity feature. It's triggered when you release the mouse button so the content is still moving after it and slowing down with calculated time.",
-    },
     lockAxisX: {
       type: ["boolean"],
       defaultValue: String(initialSetup.panning.lockAxisX),

src/stories/examples/bounds/bounds.stories.mdx

@@ -16,7 +16,18 @@ export const Template = (args) => (
     {...normalizeArgs(args)}
   >
     <TransformComponent
-      wrapperStyle={{ maxWidth: "100%", maxHeight: "calc(100vh - 50px)" }}
+      wrapperStyle={{
+        width: "400px",
+        height: "400px",
+        maxWidth: "70vw",
+        maxHeight: "70vh",
+      }}
+      contentStyle={{
+        width: "400px",
+        height: "400px",
+        maxWidth: "70vw",
+        maxHeight: "70vh",
+      }}
     >
       <div style={{ background: "#444", color: "white", padding: "50px" }}>
         <p>