drozhzhin-n-e / vue-pinch-zoom Goto Github PK

Vue library for images scaling and dragging with touch screen gestures.

Home Page: http://ivylab.space/pinch-zoom/vue

License: Apache License 2.0

JavaScript 1.09% HTML 1.34% Vue 19.92% TypeScript 77.64%

vue-pinch-zoom's Introduction

Hello

I am open to job offers. If you are interested in my open source projects, then I can quickly adapt them to your requirements or develop similar solutions for your tasks.

vue-pinch-zoom's People

Contributors

Stargazers

Watchers

vue-pinch-zoom's Issues

zoomControlScale not working

Hi there,

I am using :zoomControlScale=8 or another non '1' value, but it always simply zooms to scale factor of 1.
Changing the value in the vue prop does not change anything.

This should take affect when once click the magnifying glass icon correct?

Please help, thnx

limitZoom breaks zooming out

Setting the prop limitZoom to any number will break the pinch zoom, it is still possible to zoom in and pan, but zooming out does not work anymore.

Adding vue-pinch-zoom in ionic 6 causes "expected an object or null, got undefined" in vue-router.esm-bundler.js

Hello o/
First of all, thanks for this project!

I'm trying to use this module in my ionic 6 project with vue.js, but I'm getting an error, I would appreciate if anyone could shed some light (thanks in advance).

What I did:

npm i vue-pinch-zoom

Then in my vue page I have:

<template>
...
    <pinch-zoom>
            <img :src="mapa" /> 
    </pinch-zoom>
...
</template>

<script lang="ts">
...
import PinchZoom from 'vue-pinch-zoom';
...
export default defineComponent({
  name: 'MrMapa',
  components: {
 ...
    PinchZoom,
  },
  setup() {
    const mapa = computed(() => require('@/assets/mapa-teste.png'));
    return {
        mapa,
    };
  },
});
</script>

But when I load the page, I'm getting the following in the console:

TypeError: Object.setPrototypeOf: expected an object or null, got undefined
    extendStatics PinchZoom.umd.js:2584
    __extends PinchZoom.umd.js:2588
    Appvue_type_script_lang_ts_PinchZoom PinchZoom.umd.js:4440
    fb15 PinchZoom.umd.js:4613
    __nested_webpack_require_652__ PinchZoom.umd.js:30
    <anonymous> PinchZoom.umd.js:94
    <anonymous> PinchZoom.umd.js:97
    webpackUniversalModuleDefinition PinchZoom.umd.js:3
    <anonymous> PinchZoom.umd.js:10
    js VueJS
    __webpack_require__ app.js:282
    fn app.js:537
    <anonymous> index.js:4
    ts VueJS
    __webpack_require__ app.js:282
    fn app.js:537
    <anonymous> MrMapa.vue:5
    ts VueJS
    __webpack_require__ app.js:282
    fn app.js:537
    <anonymous> MrMapa.vue:3
    vue VueJS
    __webpack_require__ app.js:282
    fn app.js:537
    promise callback*component index.ts:11
    extractComponentsGuards vue-router.esm-bundler.js:2021
    navigate vue-router.esm-bundler.js:3143
    promise callback*navigate vue-router.esm-bundler.js:3138
    pushWithRedirect vue-router.esm-bundler.js:3030
    push vue-router.esm-bundler.js:2966
    navigate index.esm.js:578
    handleRouterLink index.esm.js:181
    handleClick index.esm.js:198
    patchStopImmediatePropagation runtime-dom.esm-bundler.js:380
    callWithErrorHandling runtime-core.esm-bundler.js:155
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:164
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:174
    invoker runtime-dom.esm-bundler.js:366
    addEventListener runtime-dom.esm-bundler.js:316
    patchEvent runtime-dom.esm-bundler.js:334
    patchProp runtime-dom.esm-bundler.js:398
    mountElement runtime-core.esm-bundler.js:4603
    processElement runtime-core.esm-bundler.js:4566
    patch runtime-core.esm-bundler.js:4486
    componentUpdateFn runtime-core.esm-bundler.js:5037
    run reactivity.esm-bundler.js:167
    setupRenderEffect runtime-core.esm-bundler.js:5156
    mountComponent runtime-core.esm-bundler.js:4939
    processComponent runtime-core.esm-bundler.js:4897
    patch runtime-core.esm-bundler.js:4489
    mountChildren runtime-core.esm-bundler.js:4685
    mountElement runtime-core.esm-bundler.js:4594
    processElement runtime-core.esm-bundler.js:4566
    patch runtime-core.esm-bundler.js:4486
    componentUpdateFn runtime-core.esm-bundler.js:5037
    run reactivity.esm-bundler.js:167
    setupRenderEffect runtime-core.esm-bundler.js:5156
    mountComponent runtime-core.esm-bundler.js:4939
    processComponent runtime-core.esm-bundler.js:4897
    patch runtime-core.esm-bundler.js:4489
    mountChildren runtime-core.esm-bundler.js:4685
    processFragment runtime-core.esm-bundler.js:4856
    patch runtime-core.esm-bundler.js:4482
    mountChildren runtime-core.esm-bundler.js:4685
    mountElement runtime-core.esm-bundler.js:4594
    processElement runtime-core.esm-bundler.js:4566
vue-router.esm-bundler.js:3302

The image loads fine without the pinch-zoom component.

Any help would be great, thanks a lot!

License

Hey,

Great library, any plans to add a license?

Event emitting?

Any plans to implement emitting events? If so, I could definitely use this.

Zoom/pinch/scale events of some kind would be really useful.

Right now I'm working around it (inefficiently) with this in my parent component:

{
....
  data: function(){
    return {
      pinchZoomScale: 0
    }
  },
  mounted(){
    setInterval(() => {
      if(this.$refs.pinchy){
        this.pinchZoomScale = this.$refs.pinchy.getScale();
      }
    }, 100);
  },
  watch: {
    pinchZoomScale(){
      // my event handling in here
    }
  },
....
}

Pass event as argument to detectTap to avoid errors on some legacy firefox versions

The plugin is currently throwing errors on some legacy Firefox versions:

ReferenceError: event is not defined

The issue is the function detectTap that gets called from onmouseup events. Since event is not defined within the function scope, it looks up window.event instead. It works on most browsers, but we're getting errors on some legacy Firefox versions where window.event is unsupported or bugged and returns undefined, causing the error.

I think it would be better to pass event as an argument to detectTap. This would also be consistent with how the rest of the code is structured, so I guess this is simply an oversight? Either way, relying on window.event is not recommended: https://developer.mozilla.org/en-US/docs/Web/API/Window/event

Cheers!

Zooming in big screens (iPad Pro Retina or similars)

Hello everyone.

We noticed two bugs when zooming in bigger screens:

When the user double tap the image, the fullImage is replaced and the X/Y position of the zoom get lost. Another portion of the image gets zoomed;
Then double tapping again, the image is filled the entire screen instead of the original position.

Did a wireframe to illustrate. Is any config that I'm missing?

Thanks in advance!

Vue 3?

There are any plans to update the component to Vue 3?

Thank you

Cannot read property 'destroy' of undefined

In mounted component , if component is set as disabled="true",
VueComponent.PinchZoom.beforeDestroy cant destroy himself
Error in beforeDestroy hook: "TypeError: Cannot read property 'destroy' of undefined"

This is how to get it working in Nuxt (or get rid of "document is not defined")

The issue is that document is not available when server-side rendering.

Create a plugin file with this name and content:

plugins/client-only.pinch-zoom.js:

import Vue from 'vue'

export default () => {
	const PinchZoom = require('vue-pinch-zoom')
	Vue.component('pinch-zoom', PinchZoom);
}

Then add this to your plugins in nuxt.config.js:

plugins: [{ src: 'plugins/client-only.pinch-zoom.js', mode: 'client'  }],

This will then globally register your component on the client-side only, and you will not get the error of " document is not defined" on build.

Hopefully this helps someone

Firefox 68 dragging selects image

If the zoomed image is dragged by mouse in Firefox 68, the image is immediately selected by the Browser. Tested with Windows 10, Firefox 68, using browserstack.com

Import declaration conflicts with local declaration of 'Properties'.

ERROR IN: node_modules/vue-pinch-zoom/types/index.d.ts(2,10):
2:10 Import declaration conflicts with local declaration of 'Properties'.
    1 | import { Vue } from 'vue-property-decorator';
  > 2 | import { Properties } from './interfaces';
      |          ^
    3 | export default class PinchZoom extends Vue {
    4 |     properties: Properties;
    5 |     transitionDuration: number;

Getting [Vue warn] $attrs is readonly when handling toggleZoom()

Hello! I'm using this pinch zoom component for a custom internal files viewer component. For that reason I disabled the native controls and created handle methods for the toggleZoom(), accessible via this.$refs['refname'].toggleZoom(). But, when I use that component method the console return the following errors:

[Vue warn]: $attrs is readonly.

found in

---> <PinchZoom>

[Vue warn]: $listeners is readonly.

found in

---> <PinchZoom>

Searching at stackoverflow I found the possible cause of the problem: "this can be due to contradictory locations of where you are importing Vue from, in different files..." answer.

Any idea if this can be the real problem?

drozhzhin-n-e / vue-pinch-zoom Goto Github PK

vue-pinch-zoom's Introduction

Hello

vue-pinch-zoom's People

Contributors

Stargazers

Watchers

Forkers

vue-pinch-zoom's Issues

Recommend Projects

Recommend Topics

Recommend Org