thecodealer / vue-panzoom Goto Github PK

Having transformOrigin within defaults removes the posibility to enable zoom to cursor function, since Object.assign ignores all null and undefined values

By default panzoom zooms around the mouse, rather than the screen center. This is represented by the options object having transformOrigin set to null.

vue-panzoom has a default options which sets transformOrigin to { x: .5, y: .5 }, which represents zooming around the screen center. If I pass an options object with { transformOrigin: null }, it does not override the default value - I suspect because it ignores null values.

I get a bunch of
no export found in vue errors with latest version
reverting to "vue-panzoom": "1.1.3" fixed it

Should consider bumping the major version if its intended and not a bug

Hi, I'm using this component in a Vue PWA. while testing on desktop, zooming via mousewheel works perfect. as soon as I move to mobile, pinch to zoom stops working (zooms the entire webview instead). any thoughts?

thanks,

Hello, i start panZoom like this
<panZoom :options="{ minZoom: 0.2, maxZoom: 1, initialZoom: 0.2, autocenter: true, boundsPadding: 1, }" > <img :src="image.path" /> </panZoom>

but on start image has this transform transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 338, 554);
338, 554 - size of my modal

when i move image transform change to this transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, -4, -1);

initialZoom and autocenter not aplying, what is my mistake?

looks like var transformAdjusted = keepTransformInsideBounds(); working wrong, but i not shure.

When Zoomin to minimum scale align the image to center by default. is it possible

Using Vue2 js

                <panZoom selector=".zoomable" :options="{minZoom: 1, maxZoom: 5}" @init="panCheck()">
                    <img  :src="chartImage" class="chart-img zoomable">

                    <span class="chart-mark popover__title not-zoomable">
                    </span>
                    </panZoom>


panCheck(panzoomInstance,id){
            if(panzoomInstance){    
                panzoomInstance.on('zoomend', function(e){
                    if(panzoomInstance.getMaxZoom() === 1){
                        panzoomInstance.setTransformOrigin({x: 0.5, y: 0.5});
                    }
                });
            }

        },

I cannot get this install to work

Uncaught Error: Cannot create panzoom for the current type of dom element
at Proxy.createPanZoom (vue-panzoom.js?v=59f1ef57:632:15)
at Proxy.mounted (vue-panzoom.js?v=59f1ef57:1473:36)
....

I tried with older version, different error message at 1.1.3, 1.1.4,

Can anybody help

My final goal is to get it run on Nuxt 3.0, advice would be also welcome

how to use without Vue.use(), i mean i want to use locally inside compnent

HELP PLS VUE 3


Also, mouse zoom doesn't work.

Currently there is no @types/pan-zoom to use this library with Typescript without complaints.

Vue is Typescript friendly, so this can library can be useful to be it too.

89/5000

When I'm in Google Chrome, I click on that dom, and then I just press up and down and left and right and there's a black border, but I look for css and I don't add any style, how do I get rid of that, Firefox doesn't have that problem, Google doe

I used the panzoom in an older vue2 project.

Now I tested it in a simple vue3 setup, I got Unhandled error during execution of mounted hook
at
at

and Cannot create panzoom for the current type of dom element

where's the problem?

my package.json

{
  "name": "image-zoom-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-panzoom": "^1.1.6"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.15",
    "@vue/cli-plugin-eslint": "~4.5.15",
    "@vue/cli-service": "~4.5.15",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

main.js

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

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

// install plugin
app.use(panZoom);

// createApp(App).mount('#app')
app.mount('#app')

and the vue file

<template>
  <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
  <!-- <HelloWorld msg="Welcome to Your Vue.js 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>

</template>

<script>


export default {
  name: 'App',
  components: {
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-top: 0px;
  margin-left:0px;
  background-color: red;
  position : fixed;
  top: 0px;
  left:0px;
  width: 1920px;
  height: 1080px;
}
</style>

How to center the content after pan or zoom, or how to reset the component?

Hello!

How can I retrieve/set the instance name of the panzoom component? I would like to pause panning but do now know how to access the instance.

From the original package:

var element = document.getElementById('scene');
var instance = panzoom(element);

instance.isPaused(); //  returns false
instance.pause();    //  Pauses event handling
instance.isPaused(); //  returns true now
instance.resume();   //  Resume panzoom
instance.isPaused(); //  returns false again 

Trying to port my PWA to Quasar. I've installed the component and setup (app.use) via a Quasar Boot file but when the component inits I get this error:

vue-panzoom.esm.js:68 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'on')
at Proxy.attachEvents (vue-panzoom.esm.js:68:35)

I am really not sure what I am doing wrong, but I am getting the following error when using vue-panzoom 1.1.3 with a Vue 2 project (2.6.12):

Failed to mount component: template or render function not defined.

The code I am using:

<template>
  <div class="page">
    <pan-zoom class="image-viewer" :options="{minZoom: 0.5, maxZoom: 5}">
      <img :src="url" />
    </pan-zoom>
  </div>
</template>

<script>
import PanZoom from 'vue-panzoom';

export default {
  components: {
    PanZoom
  },
  data () {
    return {
      url: '/images/sample-image.png',
    }
  }
};
</script>

when the component is initalized I got

TypeError: Cannot read properties of undefined (reading 'on')
    at Proxy.attachEvents (vue-panzoom.esm.js:68:1)
    at Proxy.mounted (vue-panzoom.esm.js:32:1)
    at eval (runtime-core.esm-bundler.js:2739:1)
    at callWithErrorHandling (runtime-core.esm-bundler.js:157:1)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:166:1)
    at hook.__weh.hook.__weh (runtime-core.esm-bundler.js:2713:1)
    at flushPostFlushCbs (runtime-core.esm-bundler.js:343:1)
    at flushJobs (runtime-core.esm-bundler.js:397:1)

when I load the component inside a router view the first time it is broken, when using another view before the component shows the component!

is there a workaround to fix this issue?

Any plans to upgrade panzoom to the next version? If wanted I can submit a pull-request for this.

As per #27 the newest function still breaks when used in Nuxt.

hi,
so the panning functionality is working fine on Firefox, but it is very very sensitive on google chrome, like if you barely touch to screen, it will pan to the end of the screen, can you help me with this ? how to make it similar to firefox

I'm trying to get this to run with laravel/inertia + vue3.

app.js (I added 2 lines to the boilerplate from laravel/jetstream with inertia, see comments)

require('./bootstrap');

// Import modules...
import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';

const el = document.getElementById('app');

import panZoom from 'vue-panzoom' // I added this line...

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({ methods: { route } })
    .use(panZoom) // and this line
    .use(InertiaPlugin)
    .mount(el);

MyComponent.vue

<template>
    <div>
        <panZoom>
            Test
        </panZoom>
    </div>
</template>

<script>
export default {

}
</script>

I get the following error
Uncaught TypeError: Cannot set property '$panZoom' of undefined
at Object.install (app.js:50218)
at Object.use (app.js:8680)
at Module../resources/js/app.js (app.js:23584)
at webpack_require (app.js:50873)
at app.js:51035
at Function.webpack_require.O (app.js:50910)
at app.js:51037
at app.js:51039
this corresponds to the following code in dist/vue-panzoom.esm.js:123

var PanZoomPlugin = {
    install: function install(Vue, options) {
        var _name = options && options.componentName ? options.componentName : PanZoomComponent.name;
        Vue.component(_name, PanZoomComponent);
        Vue.prototype.$panZoom = panZoom; // it crashes here...
    }
};

package.json

...
   "dependencies": {
        "vue-panzoom": "^1.1.4"
    },
    "devDependencies": {
        "@inertiajs/inertia": "^0.8.4",
        "@inertiajs/inertia-vue3": "^0.3.5",
        "@inertiajs/progress": "^0.2.4",
        "@tailwindcss/forms": "^0.2.1",
        "@tailwindcss/typography": "^0.3.0",
        "@vue/compiler-sfc": "^3.0.5",
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "postcss-import": "^12.0.1",
        "tailwindcss": "^2.0.1",
        "vue": "^3.0.5",
        "vue-loader": "^16.1.2"
    }

Note: I also tried in app.js

import Vue from 'vue';
import panZoom from 'vue-panzoom';
Vue.use(panZoom);

but this leads to (when running npm run dev): WARNING export 'default' (imported as 'Vue') was not found in 'vue'
and (in the browser): Cannot read property 'use' of undefined (in the line Vue.use(panZoom))

Any help would be much appreciated! Thanks in advance!

Error on Visual Code saying:

Could not find a declaration file for module 'vue-panzoom'. '/Users/nataliaoledzka/Documents/Capstone/capstone-codemarch22/node_modules/vue-panzoom/dist/vue-panzoom.umd.js' implicitly has an 'any' type.
Try npm install @types/vue-panzoom if it exists or add a new declaration (.d.ts) file containing declare module 'vue-panzoom';ts(7016)

Tried npm install @types/vue-panzoom and tried to add a new declaration file but either I did it incorrectly or it doesn't work.

Thank you!

zoomend seem to not be working. I don't see any reason why they shouldn't in your code, so perhaps the orginal lib your wrapping has an issue. Have to get pretty creative to work around it.

Great work on this component! I'm wondering if it is possible to programmatically initialize the components. I have a SVG image that I embed dynamically using v-html and I'm hoping to use your component like so:

<panZoom selector="#container"> -->
    <div v-html="svg_data"></div>
</panZoom>

At the moment however I get this error:

[Vue warn]: Error in mounted hook: "TypeError: screenCTM is null"

Is it possible to programmatically initialize panZoom once I now the DOM has rendered SVG data?

Getting the following warnings, in the CLI, when launching a page using 'vue-panzoom', version 1.1.4:

 WARNING  Compiled with 4 warnings                                                                                                                                        10:16:56 p.m.

 warning  in ./node_modules/vue-panzoom/dist/vue-panzoom.esm.js

"export 'createBlock' was not found in 'vue'

 warning  in ./node_modules/vue-panzoom/dist/vue-panzoom.esm.js

"export 'createVNode' was not found in 'vue'

 warning  in ./node_modules/vue-panzoom/dist/vue-panzoom.esm.js

"export 'openBlock' was not found in 'vue'

 warning  in ./node_modules/vue-panzoom/dist/vue-panzoom.esm.js

"export 'renderSlot' was not found in 'vue'

Using with vue 2.6.12

Hi, I'm still having some ittues getting panzoom to work properly on firefox browsers. It seems screenCTM returns null in some cases causing panzoom to fail. I think this is an issue with firefox (see also this issue at the svg.js: svgdotjs/svg.js#968) it would however be nice if panzoom would work cross browser even with this firefox issue being present.

Is there any workaround we could implement? I'd be happy to help but am at a loss as where to start on this.

Has anyone figured out how to use this with nuxt?

client.js?06a0:97 TypeError: Object(...) is not a function
    at Proxy.render (vue-panzoom.esm.js?2d7e:107)
    at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3548)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4055)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479)
    at new Watcher (vue.runtime.esm.js?2b0e:4468)
    at mountComponent (vue.runtime.esm.js?2b0e:4073)
    at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8415)
    at init (vue.runtime.esm.js?2b0e:3118)
    at createComponent (vue.runtime.esm.js?2b0e:5978)
    at createElm (vue.runtime.esm.js?2b0e:5925)
TypeError: this.$el.querySelector is not a function
    at VueComponent.scene (vue-panzoom.esm.js?2d7e:38)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479)
    at Watcher.evaluate (vue.runtime.esm.js?2b0e:4584)
    at VueComponent.computedGetter [as scene] (vue.runtime.esm.js?2b0e:4836)
    at VueComponent.mounted (vue-panzoom.esm.js?2d7e:28)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4219)
    at Object.insert (vue.runtime.esm.js?2b0e:3139)
    at invokeInsertHook (vue.runtime.esm.js?2b0e:6346)
    at VueComponent.patch [as __patch__] (vue.runtime.esm.js?2b0e:6565)

My setup:

// nuxt.config.js
plugins: [
    '@/plugins/panzoom.js'
]

// plugins/panzoom.js
import Vue from 'vue'
import panZoom from 'vue-panzoom'

Vue.use(panZoom);

// MyComponent.vue
<template>
        <panZoom selector=".class-selector">
          <svg class="class-selector">
          </svg>
        </panZoom>
</template>

I also tried the basic example in the readme, but it has the same error:

        <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>

[email protected]
[email protected]
[email protected]

EDIT: Webpack also shows this error, not sure what it means yet:

[HMR] bundle 'client' has 4 warnings
client.js?1b93:196 ./node_modules/vue-panzoom/dist/vue-panzoom.esm.js 111:22-33
"export 'createBlock' was not found in 'vue'./node_modules/vue-panzoom/dist/vue-panzoom.esm.js 113:6-17
"export 'createVNode' was not found in 'vue'./node_modules/vue-panzoom/dist/vue-panzoom.esm.js 111:9-18
"export 'openBlock' was not found in 'vue'./node_modules/vue-panzoom/dist/vue-panzoom.esm.js 113:38-48
"export 'renderSlot' was not found in 'vue'

is it possible to pause dragging through a function?

npm install vue-panzoom --save doesn't work.

After install. I add code in main.js and then add

I get panzoom not installed and then it tells me to npm install vue-panzoom --save it.

Is the issue similar to this?

Using the lib like this:

    <panZoom selector="#g1" @init="onInit">

methods: {
    onInit: function (panzoomInstance, id) {
      console.log('panzoomInstance :>> ', panzoomInstance)
      panzoomInstance.setMaxZoom(5)

      // panzoomInstance.zoomTo(0, 2000, 4)
      // panzoomInstance.zoomAbs(0, 1000, 5)

    },
  },

Neither zoomTo or zoomAbs zooms into the picture. Thoughts?

I have implemented zoomin and zoom out using button and I am trying to disable default scroll-based zoom , I have tried using the disableZoom option mentioned here https://github.com/timmywil/panzoom#zoomoptions , which unfortunately did not work. Is there any other way I can achieve this or any other prop?
This is what I have tried.
https://codesandbox.io/s/poc-zoompan-2we0v?file=/src/App.vue

When using vue-panzoom, it gives an error screenshot attached below, this is a global problem please tell me how to avoid it?