search

svgdotjs / svg.panzoom.js

A plugin for svg.js which enables panzoom for viewbox elements
MIT License
95 stars 54 forks source link

PanZoom cannot be disabled and zoomMin,zoomMax also doesnt work? #60

Closed balaram26 closed 4 years ago

balaram26 commented 4 years ago

Hi, I use the following combination of the plugin:

"svg.draggable.js": "^2.2.1", "svg.js": "^2.6.6", "svg.pan-zoom.js": "^2.7.0", "svg.resize.js": "^1.4.3", "svg.select.js": "^2.1.2", "vue": "^2.6.10",

I added the draggable function to my svg container and then the panzoom function to the main group of the SVG image. But both the means to disable the wheelzoom dosent work. 

group.panZoom(false) 
group.panZoom({
      wheelZoom: false,
      zoomMin: 0.5,
      zoomMax: 2
    })

So is the issue related with my versions ? I can only use this specific version combinations for both zoom and drag to work in my project. Or can the panzoom should not be applied at group level? if so, then how to get both zoom and drag functionality at same time?

Fuzzyma commented 4 years ago

panzoom() can only be used on elements that support the viewbox attribute. Group is not one of them. But you can try to create a nested() svg instead

balaram26 commented 4 years ago

panzoom() can only be used on elements that support the viewbox attribute. Group is not one of them. But you can try to create a nested() svg instead

Thats weird, because when i changed my group to nested, the panzoom totally stopped working. But when i changed back from nested to panzoom, it worked without any issues. Here is my container and group initiation code:

const svgContainer = this.svg.size('100%', this.canHeight) this.treeBaseGroup = svgContainer .group() .draggable() .size(this.winWidth, this.canHeight) .id('base_skeleton') this.treeBaseGroup.panZoom()

balaram26 commented 4 years ago

panzoom() can only be used on elements that support the viewbox attribute. Group is not one of them. But you can try to create a nested() svg instead

I found the reason. Since i had to use specific combination of versions to get all of them working, the old panzoom methods are different from new one mentioned in the website. for my version, i found set of demo files inside the js module folder,based on that i have fixed the issue. for my version, the panzoom should be set as:

panZoom({zoom:[0.5,2]})

With this, it was solved, thanks.