Questions tagged [panzoom]
A JS library for universal support in panning and zooming in the browser. Use this tag when you have a question or issue related to the library.
panzoom
34
questions
5
votes
2
answers
3k
views
( panzoom ) How to stop Image from panning out of the view?
is there a way other than resetting the zoom to force image not to get lost completely while panning using Panzoom library
const element = document.querySelector('#scene');
const zoomLevels = [...
- 7,702
4
votes
2
answers
7k
views
How to use Panzoom javascript in Angular 8+?
I am unable to use Panzoom Javascript library in Angular. I get
ERROR
Error: panzoom is not defined
Here is the stackblitz of what i have done till now .
Here is the working demo of how it should ...
- 7,702
4
votes
1
answer
1k
views
PanZoom catch Touch Up event
I am using Panzoom JS to zoom in on a map. It is working just the way I need it for zooming in and out on mobile and desktop. When you click on an item on the map, I grab the x/y coordinates relative ...
- 865
3
votes
5
answers
3k
views
How to initially center an image inside inline-block container when using panzoom?
I want to set the initial position of the image as centered how can I do that? I don't want to do CSS centering as it will be applied always only at the first time I want the position to be set as ...
- 7,702
3
votes
2
answers
150
views
Calculating visible area in infinite webpage
I'm using @panzoom/panzoom package for creating infinite webpage where I have items placed on it. When user pans I need to lazyload items based on their x and y coordinates. To achieve lazyload of ...
- 3,660
2
votes
1
answer
5k
views
How to implement zoomIn and zoomout in vue-panzoom
I am trying to implement vue-panzoom's manual zoom option.
panzoom is the parent library and the
default zoom which is well demoed here is what i am trying to acheive
https://timmywil.com/panzoom/...
user7091075
2
votes
1
answer
2k
views
How to zoom and scroll an <svg> element
I'm a newbie in html/css/JS development, I'm trying to learn for hobbyist purpose.
I'm trying to create a page with an <svg> element inside a <div> and I'm looking for a way to pan with ...
- 363
2
votes
1
answer
476
views
Zooming in with keyboard moves the centered image to right
This is continuation from this post
When i click and zoom in the image it pushes the centered image to the right how can I force it zoom and not move to right
const element = document....
- 7,702
2
votes
1
answer
968
views
vue3 unhandeled error when using vue-panzoom component
I used the panzoom in an older vue2 project.
Now I tested the component in a simple vue3 setup and got "Unhandled error during execution of mounted hook at at "
and "Cannot create ...
- 1,247
2
votes
0
answers
196
views
Using Panzoom with Painterro for zooming in on images
I have a project that has Painterro integration for creating images. I had added Panzoom feature to that image, where by upon shift + mouse scroll event, we zoom the image. But this causes issue with ...
2
votes
0
answers
420
views
getImageData() returns wrong data when panning/zooming canvas (Physical mobile device issue only)
Context:
I'm using Andrei Kashcha's (anvaka) panzoom library: https://github.com/anvaka/panzoom to provide detailed color picking functionalities:
I've created a 1' movie to illustrate the use case: ...
- 334
2
votes
1
answer
1k
views
@angular/cdk/drag-drop inside panzoom
I'm using Angular 10 with panzoom. Inside the panzoom element I have draggable elements using @angular/cdk/drag-drop.
This works fine until I zoom in or out with the panzoom. When zoomed in the ...
- 725
1
vote
1
answer
2k
views
Panzoom inconsistent when zooming in without a mouse and keyboard buttons
I have tried the solution posted in this github post
Steps to reproduce:
Click on Zoom in Button twice.
When Zoom is 150%; Click zoom out.
The image zooms in but should actually zoom out
...
- 7,702
1
vote
1
answer
2k
views
Convert mouse position to Canvas Coordinates and back
I'm creating a canvas with an overlay div to add markers on click and I want markers to change position when I pan zoom the canvas or resize the window. I'm using https://github.com/timmywil/panzoom ...
- 100
1
vote
1
answer
526
views
how can i Pause vue-panZoom
I have a Grid with vue-panZoom
inside it there is a vue-draggable-resizable area like in the image below
Image
When i drag the (vue-draggable-resizable) gray square, the black (pan-zoom) rectangle ...
- 15
1
vote
1
answer
100
views
SVG Pan Zoom: On Click Center Group Inside SVG to the Viewport
I am using this SVG Pan Zoom Library: https://github.com/bumbu/svg-pan-zoom
I have prepared a CodePen for you: https://codepen.io/ItsBenedict/pen/vYMbjpK
If you click on a category, the group should ...
- 15
1
vote
1
answer
343
views
Zoom only if [CTRL] key is pressed and auto repositioning of the image with panzoom - Angular
I am able to zoom in and out of my image with mouse scroll but I would like to zoom only if the [CTRL] key is pressed and using the mouse scroll. I would also like my image to go back to its initial ...
- 23
1
vote
1
answer
1k
views
Panzoom library: Zoom in and out while clicking the image works only for the first time
I'm using Panzoom library panzoom and would like to be able to zoom in and zoom out an image while clicking the image itself. It works. But only for the first time. I want to zoom in an image in two ...
- 21
1
vote
1
answer
299
views
TypeError: Cannot read properties of undefined (reading 'on') when using panZoom in Vue 3
VUE 3 JS: Implementing the code for panZoom, I'm hitting the TypeError: Cannot read properties of undefined (reading 'on') . I got only solution https://github.com/thecodealer/vue-panzoom/issues/43 ...
- 1,643
1
vote
0
answers
296
views
Javascript Error: PanZoom JS function Not working on Dynamic Uploaded Image
I am trying to implement the PanZoom JS Functionality in my Code. The Code works fine when I add the static Image to the The WebPage and add the PanZoom Function to it.
Eg:
>>HTML
<div class=...
- 435
1
vote
0
answers
1k
views
Pan and zoom div container with draggable elements
I am trying to create a virtual post it board where you can add a note, drag it, etc. I also want to be able to zoom in and out of the board and pan around. I have most of this working but when I do ...
- 473
1
vote
1
answer
976
views
jsPlumb + Panzoom infinite droppable canvas
I have created a codepen that uses jquery ui droppable(for drag/drop), jsPlumb (for flowcharting) and Panzoom (panning and zooming) to create a flowchart builder. You could drag the list items from ...
1
vote
0
answers
415
views
How to programmatically smoothly zoom to a point with panzoom?
Using the panzoom library, assuming the containing div is 400x300px, and an interesting item is found on 120-150x200-250 (Before zooming), how can one programmatically zoom to this rectangle with a ...
- 30k
1
vote
0
answers
109
views
How to install timmywill panzoom with a script tag
I am trying to add panzoom to my page via a vanilla script tag. In the documentation it says:
With a script tag:
<script src="/js/panzoom.js"></script>
I can not find a folder called ...
- 149
0
votes
1
answer
461
views
Why panzoom not disabled in svelte?
I am trying both panzoom library in projects. The panzoom is working perfectly but when I try to pause or dispose panzoom, it is not working. I have tried multiple approach to solve this but didn't ...
0
votes
1
answer
130
views
Zoom (panZoom) not working when switching plots in R shiny
I am able to use zoom on a single image, and that works well. However, in a more complex app, I have a dynamic UI that the plotting depends on a selectInput() like this:
output$all <- renderUI({
...
- 262
0
votes
0
answers
4
views
How to fit mermaid diagram to fit into the parent container ngx-panzoom
We have a mermaid diagram data and we're rendering mermaid content using mermaid library in Angular. I have wrapped mermaid content within panzoom to exploit zoom-in and zoom-out functionality, the ...
0
votes
0
answers
90
views
Adding/Removing Blazor components dynamically (Panzoom)
I am trying to create something like a map that i can add pins of points of interest on it. I am using this library just for reference ( https://github.com/shaigem/BlazorPanzoom).
The problem i have ...
0
votes
1
answer
79
views
Angular: ERROR TypeError: this.panZoomAPI.panDelta is not a function
I have made a small ->stackblitz <- to demonstrate my issue.
I have a master component that has pan-zoom within which there's a parent component that holds some content (the children). The ...
0
votes
1
answer
533
views
multiple panzoom's on one page
I'm using this panzoom library, however I'm struggling to get it to work multiple instances on the same page with custom options.
Here is a jsFiddle which allows for multiple panzooms all with the ...
- 1,445
0
votes
1
answer
1k
views
Panzoom library and filling a div with a centered image
The Panzoom library (https://timmywil.com/panzoom/demo/) allows you to move and zoom an image in a div:
var panzoom1 = Panzoom(document.querySelector(".zoom-area1"), {
maxScale: 6
});
document....
0
votes
0
answers
286
views
How to place the transfom origin point of element in center of the view port
I'm trying to make a website where you can zoom and pan.
Currently I'm working with the panzoom package, but the user should be able to rotate the scene content around the center of their screen.
I ...
0
votes
1
answer
244
views
Test if point outside pan-zoom bounds
I want to test if the location of a particular SVG element is inside or outside of the currently visible pan-zoom region. If it's outside then I can pan to get it just inside the corresponding border.
...
- 314
0
votes
1
answer
2k
views
Vue panzoom container
I would like to use this plug in to zoom and pan around a number of other components but am struggling to work out the best way to implement
https://github.com/timmywil/panzoom
It looks like a good ...
- 856