From 6167676715e01297697b42eb504e26788fef66a2 Mon Sep 17 00:00:00 2001 From: Nikita Nafranets Date: Wed, 31 Jan 2024 16:19:35 +0300 Subject: [PATCH] feat: added pan on scroll, improve the build (#447) Co-authored-by: Nikita Nafranets --- .github/workflows/release.yml | 2 +- package.json | 3 ++ rollup.config.js | 2 +- src/constants/state.constants.ts | 1 + src/core/instance.core.ts | 51 +++++++++++++++++++++++++++++++- src/models/context.model.ts | 1 + src/stories/docs/props.tsx | 14 +++++---- src/stories/types/args.types.ts | 8 +++++ 8 files changed, 73 insertions(+), 9 deletions(-) diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 4cc44b2f..96a1480c 100644 --- a/.github/workflows/release.yml +++ b/.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" diff --git a/package.json b/package.json index 9ba6540b..7df8b04b 100644 --- a/package.json +++ b/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", diff --git a/rollup.config.js b/rollup.config.js index 9ad3079a..242dabe1 100644 --- a/rollup.config.js +++ b/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, }), diff --git a/src/constants/state.constants.ts b/src/constants/state.constants.ts index 64f68bdc..642927f4 100644 --- a/src/constants/state.constants.ts +++ b/src/constants/state.constants.ts @@ -37,6 +37,7 @@ export const initialSetup: LibrarySetup = { allowLeftClickPan: true, allowMiddleClickPan: true, allowRightClickPan: true, + wheelPanning: false, activationKeys: [], excluded: [], }, diff --git a/src/core/instance.core.ts b/src/core/instance.core.ts index 5a3042c1..62160540 100644 --- a/src/core/instance.core.ts +++ b/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 | 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; diff --git a/src/models/context.model.ts b/src/models/context.model.ts index be13e0d5..eea6ddbd 100644 --- a/src/models/context.model.ts +++ b/src/models/context.model.ts @@ -86,6 +86,7 @@ export type ReactZoomPanPinchProps = { allowRightClickPan?: boolean; activationKeys?: string[]; excluded?: string[]; + wheelPanning?: boolean; }; pinch?: { step?: number; diff --git a/src/stories/docs/props.tsx b/src/stories/docs/props.tsx index be8b3bee..84d673bc 100644 --- a/src/stories/docs/props.tsx +++ b/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[]"], diff --git a/src/stories/types/args.types.ts b/src/stories/types/args.types.ts index 75754d57..ed75ecaa 100644 --- a/src/stories/types/args.types.ts +++ b/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" },