https://github.com/sanichkotikov/pinch-zoom-pan

A simple module that add pinch-zoom and pan to your HTML element
https://github.com/sanichkotikov/pinch-zoom-pan

nativejs npm-module npm-package pan pinch zoom

Last synced: about 1 month ago
JSON representation

A simple module that add pinch-zoom and pan to your HTML element

• Host: GitHub
• URL: https://github.com/sanichkotikov/pinch-zoom-pan
• Owner: SanichKotikov
• License: mit
• Created: 2018-02-01T15:40:11.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-12-05T10:09:23.000Z (12 months ago)
• Last Synced: 2024-10-14T20:23:06.177Z (about 1 month ago)
• Topics: nativejs, npm-module, npm-package, pan, pinch, zoom
• Language: TypeScript
• Homepage: https://sanichkotikov.github.io/react-family-tree-example/
• Size: 90.8 KB
• Stars: 5
• Watchers: 2
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# pinch-zoom-pan

A simple module that add pinch-zoom and pan to your HTML element.

## Using

```bash

npm i -S pinch-zoom-pan

```

```html



  


    


      

    

  



```


```css

.root {

  position: relative;

  transform: translateZ(0);

  overflow: hidden;

}

.point {

  position: absolute;

  width: 0;

  height: 0;

  transform: translate(0, 0) scale(1);

  transform-origin: center;

  will-change: transform;

}

.canvas {

  position: absolute;

  transform: translate(-50%, -50%);

}

```

```javascript

import { create } from 'pinch-zoom-pan';

// Run module on mount

const canvas = create({

  element: document.getElementById('root'),

  // optional settings:

  minZoom: 0.5,

  maxZoom: 2,

  captureWheel: true,

});

// Should be called on unmount

canvas.destroy();

// Reset position and zoom to default values

canvas.reset();

// Manually update position and zoom

canvas.update({ z: 1.2 });

canvas.update((prev) => ({ z: prev.z + 0.2 }));

```

## Frameworks & libraries

* [React example](https://github.com/SanichKotikov/react-family-tree-example/tree/master/src/components/PinchZoomPan)

* [Solid example](https://github.com/SanichKotikov/solid-family-tree-example/tree/master/src/components/PinchZoomPan)

## Contributing

Please read [this documentation](https://github.com/SanichKotikov/contributing) before contributing.