@dream07312/vue3-pinch-scroll-zoom
TypeScript icon, indicating that this package has built-in type declarations

0.1.0 • Public • Published

vue-pinch-scroll-zoom

Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices

original_repo: https://github.com/coddicat/vue-pinch-scroll-zoom/tree/main_vue3

example:

https://vue-pinch-scroll-zoom.coddicat.com/

Installation

npm i @dream07312/vue3-pinch-scroll-zoom

Usage

template:

<PinchScrollZoom
  ref="zoomer"
  :width="300"
  :height="400"
  :scale="scale"
  @scaling="scalingHandler"
  style="border: 1px solid black"
>
  <img src="https://picsum.photos/600/1000" width="300" height="400" />
</PinchScrollZoom>

type script:

import { Component, Vue } from "vue-property-decorator";
import PinchScrollZoom, { PinchScrollZoomEmitData, PinchScrollZoomRef } from "@dream07312/vue3-pinch-scroll-zoom";

@Component({
  name: "PinchScrollZoomExample",
  components: {
    PinchScrollZoom
  }
})
export default class PinchScrollZoomExample extends Vue {
  private scale = 2;
  public scalingHandler(e: PinchScrollZoomEmitData): void {
    console.log(e);
  },
  public reset() {
    (this.$refs.zoomer as PinchScrollZoomRef).setData({
      scale: 1,
      originX: 0,
      originY: 0,
      translateX: 0,
      translateY: 0        
    });
  }
}

Props

the following properties don't support the ".async" modifier

name required description default
width yes visible area width
height yes visible area height
contentWidth no should be defined when content width larger than container width
contentHeight no should be defined when content height larger than container height
minScale no minimum allowable scaling 0.3
maxScale no maximum allowable scaling 5
within no limit scrolling of content to its borders true
wheelVelocity no zoom velocity when mouse wheel 0.001
scale no scale of the content 1
origin-x no transform-origin-x width/2
origin-y no transform-origin-y height/2
translate-x no transform: translateX 0
translate-y no transform: translateY 0
throttleDelay no rendering delay (milliseconds) 25
draggable no draggable of/off true
enableScaling no for enable listener scaling event true
enableStartDrag no for enable listener startDrag event true
enableStopDrag no for enable listener stopDrag event true
enableDragging no for enable listener dragging event true

Events

the following events are emitted with the argument:

export interface PinchScrollZoomEmitData {
  x: number;
  y: number;
  scale: number;
  originX: number;
  originY: number;
  translateX: number;
  translateY: number;  
}
  • startDrag
  • stopDrag
  • dragging
  • scaling

Methods

.SetData(data: PinchScrollZoomSetData);

export interface PinchScrollZoomSetData {
    scale: number;
    originX: number;
    originY: number;
    translateX: number;
    translateY: number;
}

Readme

Keywords

none

Package Sidebar

Install

npm i @dream07312/vue3-pinch-scroll-zoom

Weekly Downloads

0

Version

0.1.0

License

MIT

Unpacked Size

17.7 kB

Total Files

3

Last publish

Collaborators

  • dream07312