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

Related tags

Scroll vue scroll zoom
Overview

vue-pinch-scroll-zoom

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

example:

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

Installation

npm i @coddicat/vue-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 } from "@coddicat/vue-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 PinchScrollZoom).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

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;
}
Comments
  • Component overwrites default right-click behaviour of images

    Component overwrites default right-click behaviour of images

    When using the component (which I love by the way, thanks) the default browser options are no longer available: image instead of image

    Is there any way I can get the default behaviour back? Our clients need to download images

    opened by ShadowSpade 4
  • How to disable scrolling and panning

    How to disable scrolling and panning

    Hi,

    I'm trying to find a way how to disable all scrolling and panning, while keeping the current transformation. Is that possible. And if so, can you tell me how to do that?

    opened by theoreticalsampling 3
  • Docs : Miss the needed dependency vue-property-decorator

    Docs : Miss the needed dependency vue-property-decorator

    Hi,

    I got this error while trying to use your package:

    This dependency was not found:
    
    * vue-property-decorator in ./node_modules/@coddicat/vue-pinch-scroll-zoom/lib/index.esm.js
    

    I'm adapting the package so it doesn't use vue-property-decorator but I think it's worth the mentioning in the documentation :)

    Thanks !

    opened by RomainBillot 2
  • Full viewport size

    Full viewport size

    Is it possible to set the width and height props to match the viewport width and height and have within enabled?

    My use case is a responsive fullscreen modal, with a image.

    opened by anandpatel 1
  • Upgrade library from vue2 to vue3

    Upgrade library from vue2 to vue3

    Upgrade vue2 to vue3

    • [X] Install dependencies for build to vue3 by used vue-sfc-rollup for setting configuration
    • [X] Migration pinch-scroll-zoom.vue to vue3 composition-api - I have add some method because i used it with our project
    • [X] I add example by own because i cannot publish to npm, So can you help me for consider PR
    • [X] Update Readme.md with new props since i cannot find solution with get attrs of $listiners on vue3
    opened by voratham 1
  • Off positioned cursor/touch origin

    Off positioned cursor/touch origin

    Hi,

    First of all, thanks for the neat plugin. You did a great job!

    I noticed an annoying bug when the component is used in the right side of the window and you start scrolling to zoom which results in off positioned originX and originY.

    The possible solution could be using a ref for div.pinch-scroll-zoom and calculating the refs' absolute position with .getBoundingClientRect().left for horizontal axis and .getBoundingClientRect().top for vertical axis, then extracting these distances from originX and originY accordingly.

    opened by Bambalazs 1
  • Unable to resolve dependency trees

    Unable to resolve dependency trees

    I couldn't install this with my vue-cli 3 project. Below is the error code.

    npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: [email protected] npm ERR! node_modules/vue npm ERR! [email protected]"^3.2.13" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer [email protected]"^2.6.11" from @coddicat/[email protected] npm ERR! node_modules/@coddicat/vue-pinch-scroll-zoom npm ERR! @coddicat/[email protected]"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

    opened by yxnzhe 0
  • [FIX]  wrong export path component

    [FIX] wrong export path component

    🔥 [FIX] wrong export path component

    🤔 Problem

    • [X] When was call pinch-scroll-zoom-component , It will show resolve not found from issue @Anthelmeifs https://github.com/coddicat/vue-pinch-scroll-zoom/issues/13#issuecomment-1117941564

    🟢 Solution

    • [X] Config path vue3-pinch-scroll-zoom on rollup.config and package.json
    • [X] Move some type and interface to entry.esm for easier to use
    • [X] Update Readme.md
    opened by voratham 0
  • Width and Height are not reactive

    Width and Height are not reactive

    I'm using the Vue3 version and it looks like the width and height values are not reactive, so for example, I can't dynamically resize the zoomer in a responsive design app. I guess I can understand this isn't an easy undertaking, but thought I'd save somebody a few hours trying to make it work.

     <PinchScrollZoom
        :width="item.slideSizeWidth"  // dynamically changing item.slideSizeWidth has no effect !!!
        :height="item.slideSizeHeight"
    

    If one were to implement this feature, forcing a reset whenever the width or height changed would be a fine simplification.

    opened by jaybo 0
Owner
CoddiCat
CoddiCat
Scroll Picker Component for Vue2. Support All Gestures of Mouse(even also MouseWheel!) and Touch.

Scroll Picker Component for Vue2. Support All Gestures of Mouse(even also MouseWheel!) and Touch.

chenronghui 0 Mar 1, 2021
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Mauricio Farias Dziedzinski 531 Sep 27, 2022
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Mauricio Farias Dziedzinski 531 Sep 27, 2022
Component that customizes the scroll and inserts shadow when scrolling exists

Vue Scroll Shadow • • Component that customizes the scroll and inserts shadow when scrolling exists Installation NPM npm i vue-scroll-shadow # or yarn

André Lins 2 Feb 13, 2022
⌨️ A Safari browser extension, use keyboard control browser jumps, scrolling, switching tabs and more. support iPadOS and macOS

Support Keyboard Key Description k Scroll up j Scroll down u Fast scroll up d Fast scroll down h Scroll left l Scroll right f Highlight shift Open lin

Haojen 34 Oct 4, 2022
SkyScroll - A Vue plugin for scroll/resize events and calculations.

SkyScroll A Vue plugin for scroll/resize events and calculations. Description This plugin exposes a handful of useful properties on all Vue instances,

Limbo (formerly Skybrud) 1 Oct 4, 2018
Adds a directive that listens for click events and scrolls to elements.

vue-scrollto DEMO Scrolling to elements was never this easy! This is for vue 2.x and vue 3.x (since v2.19.0) For vue 1.x use [email protected] (note

Igor Randjelovic 1.9k Sep 27, 2022
Adds a directive that listens for click events and scrolls to elements.

vue-scroll-to Vue.js directive that listens for click events and scrolls to elements. Install With npm do: $ npm install vue-scroll-to --save or $ yar

Kevin Houghton 17 Jul 15, 2022
trigger functions and events based on the element position on the screen

VueWaypoint trigger functions and events based on the element position on the screen Demo Simple demo page Open your browser console and see what's go

Marco 'Gatto' Boffo 447 Sep 30, 2022
Vue-slidePage is a fullscreen scrolling component of Vue.js, Based on slidePage

vue-slidePage Introduction vue-slidePage is a fullscreen scrolling component of Vue.js, Based on slidePage Demo simple custom Usage Install $ npm i -S

null 16 Nov 12, 2021
Lightweight package for highlighting menu items as you scroll the page, also scrolling to target section when item clicked. Use as a vue component/directive or in vanilla js.

navscroll-js Installation This package is available on npm. Using npm: npm install --save navscroll Using yarn: yarn add navscroll Directly include it

Honoré Nintunze 57 Mar 2, 2022
Vue Scroll Detect - Detect component visibility change on scrolling

Vue Scroll Detect Detect component visibility change on scrolling. Installation yarn add vue-scroll-detect Example See examples/ at Code Sandbox Usage

Dzul Nizam 1 Jun 5, 2022
A Vue plugin which supervises binding element's scrolling and trigger target elements class

A Vue plugin which supervises binding element's scrolling and trigger target elements class

null 0 Nov 27, 2020
A Vue plugin which supervises binding element's scrolling and trigger target elements class

vue-scroll-trigger A Vue plugin which supervises binding element's scrolling and trigger target elements class Sample BEHIVE-DESIGN Install with yarn

Ranlizzz 2 Nov 5, 2020
Animating vertical and horizontal scrolling

Animating vertical and horizontal scrolling. Inspired by rigor789/vue-scrollto and uses some of its code and functionality!!

Uther Pally 63 Sep 16, 2022
Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll

Vue2 Smooth Scroll Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll. For simple use-cases, the native scroll-behavior CSS p

xlaoyu 119 Aug 22, 2022
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Pete Hegman 182 Oct 1, 2022
:beginner:A simple, seamless scrolling for Vue.js vue无缝滚动component

vue-seamless-scroll A simple, Seamless scrolling for Vue.js Features Initial configuration support Compatible with multiple platforms Multi-technology

sos 1.5k Oct 2, 2022
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Pete Hegman 181 Aug 30, 2022