High Performance Zoomable & Pannable Component – vue-zoomable

A tiny, touch-enabled, high-performance zoomable and pannable component for Vue 3 applications. Supports both SVG and HTML content.

How to use it:

1. Install and import the vue-zoomable component.

import VueZoomable from "vue-zoomable";
import "vue-zoomable/dist/style.css";

2. Wrap your content to be zoomable and pannable into the vue-zoomable component.

<!-- SVG -->
<template>
  <VueZoomable
    style="width: 500px; height: 500px; border: 1px solid black"
    selector="#myContent"
    :minZoom="0.5"
    :maxZoom="3"
  >
    <svg>
      <g id="myContent">
        <circle x="10" y="10" r="50" />
      </g>
    </svg>
  </VueZoomable>
</template>

<!-- HTML Content -->
<template>
  <VueZoomable
    style="width: 500px; height: 500px; border: 1px solid black"
    :selector="#boxes"
    :minZoom="0.3"
    :maxZoom="2"
    :dblClickZoomStep="0.4"
    :wheelZoomStep="0.01"
  >
    <div id="boxes">
      <div>
        <div></div>
        <div></div>
      </div>
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
  </VueZoomable>
</template>

3. Available component props.

zoom: {
  type: Number,
  default: null,
},
pan: {
  type: Object,
  default: null,
},
selector: {
  type: String,
  default: "* > *",
},
maxZoom: {
  type: Number,
  default: 3,
},
minZoom: {
  type: Number,
  default: 0.5,
},
initialPanX: {
  type: Number,
  default: 0,
},
initialPanY: {
  type: Number,
  default: 0,
},
initialZoom: {
  type: Number,
  default: 0.5,
},
dblClickZoomStep: {
  type: Number,
  default: 0.4,
},
wheelZoomStep: {
  type: Number,
  default: 0.05,
},
panEnabled: {
  type: Boolean,
  default: true,
},
zoomEnabled: {
  type: Boolean,
  default: true,
},
mouseEnabled: {
  type: Boolean,
  default: true,
},
touchEnabled: {
  type: Boolean,
  default: true,
},
dblClickEnabled: {
  type: Boolean,
  default: true,
},
wheelEnabled: {
  type: Boolean,
  default: true,
},
enableControllButton: {
  type: Boolean,
  default: false,
},
buttonPanStep: {
  type: Number,
  default: 15,
},
buttonZoomStep: {
  type: Number,
  default: 0.1,
},
enableWheelOnKey: {
  type: String,
  default: undefined,
}

Preview:

Changelog:

v1.1.9 (11/17/2023)

• Update

Download Details:

Author: HassaanAkbar

Live Demo: https://hassaanakbar.github.io/vue-zoomable/demos/svg-demo.html

Download Link: https://github.com/HassaanAkbar/vue-zoomable/archive/refs/heads/main.zip

Official Website: https://github.com/HassaanAkbar/vue-zoomable/tree/main

Install & Download: