ts-pinch-zoom

Introduction

ts-pinch-zoom is a lightweight, performant library built using TypeScript for enabling pinch-zoom and scroll functionalities on HTML elements. It provides seamless interaction for touch devices and smooth zooming experiences for users.

브라우저에서는 자체 내장 기능으로 인해 pinch zoom이 가능하지만, Webview에서 사용할 때에는 제한되는 부분이 있어 ts pinch zoom을 제작하였습니다.

Features

• Pinch-to-zoom support
• Momentum scrolling
• Configurable zoom range
• Smooth animation and transitions
• Support for touch and pointer events

---

Installation

Install the package using npm:

npm install ts-pinch-zoom

Or using yarn:

yarn add ts-pinch-zoom

---

Usage

Basic Example

1. Import the package and initialize it with a target element.

import { PinchZoom } from 'ts-pinch-zoom';

const container = document.querySelector('#zoom-container') as HTMLElement;
const pinchZoom = new PinchZoom(container, {
  zoomMin: 1,
  zoomMax: 3,
  startZoom: 1,
});

2. Add some basic HTML and CSS:

<div id="zoom-container" style="width: 300px; height: 300px; overflow: hidden;">
  <img src="image.jpg" alt="Zoomable Image" style="width: 100%; height: auto;">
</div>

---

Options

The library accepts an options object to customize its behavior:

Option	Type	Default	Description
zoom	boolean	true	Enables or disables zoom functionality.
zoomMin	number	1	Minimum zoom scale.
zoomMax	number	3	Maximum zoom scale.
startZoom	number	1	Initial zoom scale when the component loads.
scrollX	boolean	true	Enables horizontal scrolling.
scrollY	boolean	true	Enables vertical scrolling.
momentum	boolean	true	Enables momentum-based scrolling.
bounce	boolean	false	Enables bounce effect when scrolling past boundaries.
preventDefault	boolean	true	Prevents default scrolling behavior during touch events.

For a full list of options, refer to the source code.

---

Methods

Method	Description
scrollTo(x: number, y: number, time?: number)	Scrolls to the specified position with optional animation time.
zoom(scale: number, x?: number, y?: number, time?: number)	Zooms to a specific scale at the given coordinates.
refresh()	Recalculates layout and updates the component.
disable()	Disables interaction with the component.
enable()	Enables interaction with the component.

---

Example: Advanced Usage

import { PinchZoom } from 'ts-pinch-zoom';

const container = document.getElementById('zoom-container') as HTMLElement;
const pinchZoom = new PinchZoom(container, {
  zoomMin: 0.5,
  zoomMax: 5,
  startZoom: 1,
  bounce: true,
  scrollX: true,
  scrollY: true,
});

pinchZoom.on('zoomStart', () => {
  console.log('Zoom started');
});

pinchZoom.on('zoomEnd', () => {
  console.log('Zoom ended');
});

---

Development

To set up the project locally:

1. Clone the repository:

git clone https://github.com/[your-username]/ts-pinch-zoom.git

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

To build the project:

npm run build

To run tests:

npm run test

---

License

This project is licensed under the MIT License.

---

Author

yohan.kim

• Email: yohanpro@yohanpro.com

Feel free to contact me for questions or contributions!

---

Contributing

Contributions are welcome! Please fork the repository and submit a pull request.

---

Changelog

See CHANGELOG.md for recent updates.

---

Acknowledgments

Special thanks to the contributors and open-source community.