gesto

What is gesto?

The 'gesto' npm package is a lightweight library for handling gesture events such as drag, pinch, and rotate. It provides a simple API to manage complex gesture interactions on web applications.

What are gesto's main functionalities?

Drag

This feature allows you to handle drag events. The code sample demonstrates how to use 'gesto' to make an element draggable by updating its transform property based on the drag distance.

const Gesto = require('gesto');
const target = document.querySelector('.target');
const gesto = new Gesto(target);
gesto.on('drag', ({ distX, distY }) => {
  target.style.transform = `translate(${distX}px, ${distY}px)`;
});

Pinch

This feature allows you to handle pinch events. The code sample shows how to use 'gesto' to scale an element based on pinch gestures.

const Gesto = require('gesto');
const target = document.querySelector('.target');
const gesto = new Gesto(target);
gesto.on('pinch', ({ scale }) => {
  target.style.transform = `scale(${scale})`;
});

Rotate

This feature allows you to handle rotate events. The code sample demonstrates how to use 'gesto' to rotate an element based on rotation gestures.

const Gesto = require('gesto');
const target = document.querySelector('.target');
const gesto = new Gesto(target);
gesto.on('rotate', ({ angle }) => {
  target.style.transform = `rotate(${angle}deg)`;
});

Other packages similar to gesto

hammerjs

Hammer.js is a popular library for handling touch gestures. It supports a wide range of gestures including tap, double tap, swipe, pinch, and rotate. Compared to 'gesto', Hammer.js offers more built-in gesture recognizers and is more widely used in the community.

interactjs

Interact.js is a powerful library for drag-and-drop, resizing, and multi-touch gestures. It provides a more comprehensive set of features for complex interactions compared to 'gesto', including inertia and snapping.

alloyfinger

AlloyFinger is a lightweight library for handling touch gestures. It supports basic gestures like tap, swipe, pinch, and rotate. AlloyFinger is similar to 'gesto' in terms of simplicity and ease of use, but it is more focused on mobile touch events.

README

Gesto

You can set up drag, pinch events in any browser.

• API Documentation

⚙️ Installation

$ npm i gesto

<script src="https://daybrush.com/gesto/release/latest/dist/gesto.min.js"></script>

🚀 How to use

import Gesto from "gesto";

let tx = 0;
let ty = 0;
let scale = 1;

const getso = new Gesto(target, {
    container: window,
    pinchOutside: true,
}).on("drag", e => {
    tx += e.deltaX;
    ty += e.deltaY;
    target.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`;
}).on("pinchStart", e => {
    e.datas.scale = scale;
}).on("pinch", e => {
    scale = e.datas.scale * e.scale;
    target.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`;
});

// remove event
getso.unset();

👏 Contributing

If you have any questions or requests or want to contribute to gesto, please write the issue or give me a Pull Request freely.

🐞 Bug Report

If you find a bug, please report to us opening a new Issue on GitHub.

📝 License

This project is MIT licensed.

MIT License

Copyright (c) 2019 Daybrush

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.