radeax / vue-panzoom

Vue plugin to zoom/pan dom elements

vue-panzoom

This is a Vue.js port of panzoom, an extensible, mobile friendly pan and zoom framework (supports DOM and SVG).

Demo

• Regular DOM object
• Standalone page - this repository
• YASIV - my hobby project
• SVG Tiger - js fiddle

Installation

Using npm

npm install vue-panzoom --save

Using yarn

yarn add vue-panzoom

Usage

main.js

// import Vuejs
import Vue from 'vue'
import App from './App.vue'

// import vue-panzoom
import panZoom from 'vue-panzoom'

// install plugin
Vue.use(panZoom);

new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue

<template>
    <div id="app">
        <!-- apply to an image -->
        <panZoom>
            <img src="https://picsum.photos/300">
        </panZoom>

        <!-- apply to regular dom elements -->
        <panZoom>
            <p>You can zoom me</p>
        </panZoom>

        <!-- apply to svg -->
        <panZoom selector="#g1">
            <svg height="210" width="400">
                <g id="g1">
                    <path d="M150 0 L75 200 L225 200 Z" />
                </g>
            </svg>
        </panZoom>
    </div>
</template>

Changing the component's name

If you wish to change the name of the vue component from the default panZoom, you pass an option to the plugin like so:

Vue.use(panZoom, {componentName: 'yourPanZoom'});

and then use in your vue template like so:

<yourPanZoom></yourPanZoom>

Attributes

selector

Use this to specify an element within the scope of vue-panzoom component instance, to apply panZoom to. Default is the first root element of the vue-panzoom component. It accepts standard css selector specification.

<panZoom selector=".zoomable">
  <div class="not-zoomable">I cannot be zoomed and panned</div>
  <div class="zoomable">I can be zoomed and panned</div>
</panZoom>

Options

The options prop is used to define panzoom options. All panzoom options are supported

<panZoom :options="{minZoom: 0.5, maxZoom: 5}"></panZoom>

Events

You can listen to specific events in the lifecycle of a vue-panzoom instance. For example, in the code below the function onPanStart will be called when pan begins

<panZoom @panstart="onPanStart"></panZoom>

Another way to listen to events within the init event's callback, when you know for sure everything is ready and the panzoom instance is available. For example

<panZoom @init="onInit"></panZoom>

onInit: function(panzoomInstance, id) {
  panzoomInstance.on('panstart', function(e){
    console.log(e);
  });
}

init event

This event is fired when the vue-panzoom instance has been initialized successfully. For example:

<panZoom @init="onInit"></panZoom>

panzoom events

All events supported by panzoom are also supported here.

upgrading from 1.1.3 to 1.1.4

Version 1.1.4 uses "rollup-plugin-vue": "^6.0.0", which requires Vue 3. For projects using Vue 2, downgrade to 1.1.3, e.g.:

npm install [email protected]