@sergtyapkin/vue3-zoompinch v1.0.4

Zoom-pinch Vue.js component

LIVE DEMO

🔥 Super easy light-weight and fast Vue.js component for zoom-pinch-pan-move inner element like in Google maps with really much customable settings

!TIP Component can store it's state into localStorage and restore state from it. To use it, just set the localStorageUniqueName prop!

!IMPORTANT By default gesture controls are not enabled and wheel scrolling is scaling. If you want to enable touchpad gestures and moving by wheel scrolling, enable gesture

!IMPORTANT Automatically uses:

width: 100%;
height: 100%;

Navigation:

👉 Usage:

main.ts:

import '@sergtyapkin/vue3-zoompinch/style.css';

Any *.vue file:

<template>
  <!-- ... -->
  <ZoomPinch
    centered
    mouse
    touch
    gesture
    :min-scale="0.2"
    :max-scale="10"
    @drag="(dx, dy) => yourOnDrag(dx, dy)"
    @move="(dx, dy) => yourOnMove(dx, dy)"
    @scale="(scaleDelta) => yourOnScale(scaleDelta)"
    @click-clean="(x, y) => yourOnClick(x, y)"
  >
    <!-- Any of your own inner HTML element. For example <img> -->
  </ZoomPinch>
</template>

<script lang="ts">
  import ZoomPinch from '@sergtyapkin/vue3-zoompinch';
  
  export default {
    components: {ZoomPinch},
    
    methods: {
      yourOnDrag(dx: number, dy: number) {console.log("Dragged by:", dx, dy)},
      yourOnMove(dx: number, dy: number) {console.log("Moved by:", dx, dy)},
      yourOnScale(scaleDelta: number) {console.log("Scaled by:", scaleDelta)},
      yourOnClick(x: number, y: number) {console.log("Clicked on:", x, y)},
    }
  }
</script>

⚙️ Props

!TIP All props are not required 🙃

Controls

Constraints

Features

Default values

Service

⚙️ Emits

drag(dx: number, dy: number)
// Emits only when user drags and moves inner element 

move(dx: number, dy: number)
// Emits when user moves inner element or it moves with scaling

scale(scaleDelta: number)
// Emits with scaling

clickClear(x: number, y: number)
// Emits only if user clicks on element without any dragging

⚙️ Methods

reset(): void
// Reset translation and scale to defaults

getScale(): number
// Returns current scale

getTranslate(): {x: number, y: number}
// Returns current translation