zoom-pan | zoom and pan implementation in vanillaJS | Data Visualization library

I've designed and built an interactive Org Chart that allows users to view business organizations in a hierarchical format. By default only the first row below the root node of the chart is visible, but users can click to expand the chart further, thereby changing the size of the chart. Users can also drag and drop nodes to simulate a reorganization of the business.

I'm currently using react-zoom-pan-pinch to allow users to zoom and pan the chart. It works very well when the org chart has not been expanded too much, but becomes problematic at larger chart scales.

The problem is that the organizations being represented by the chart are very broad in comparison to their depth, meaning a fully expanded chart is a horizontal rectangle, not a square. react-zoom-pan-pinch will only allow me to zoom out to the maximum vertical extent of the chart, meaning users can't view a fully expanded organization without scrolling from side to side. This is not an acceptable behavior.

This is for work, so I cannot post code without violating numerous agreements. Instead I have linked to the react-zoom-pan-pinch documentation and will go over what I have tried changing.

The first place I looked was the TransformWrapper Props section of the documentation.

There I found the inititalScale, minScale, and maxScale props.

I can set the initialScale prop to a value of less than 1, and obtain something close to the result I want at first. Setting it to 0.5 results in the chart being zoomed out further than normally possible, but when I zoom in to a value of 1 I am unable to zoom back out. This was expected, as the minScale prop was still set to 1.

Having checked that the props indeed work, I went ahead and set minScale to 0.5, assuming I would be able to zoom back out to the initial view seen when initialScale is set to 0.5. This seemed like it should work, but it did not. Even with the minScale prop set to 0.5, I am unable to zoom back out after zooming in to a value of 1. This is very strange to me, as the acceptance of 0.5 as the initialScale prop and subsequent rendering of the chart indicates that values below 1 are acceptable.

I am now messing around with the rest of the props listed in the documentation, but have yet to achieve the desired result (infinite zoomout).

I believe the root of the issue is that react-zoom-pan-pinch is meant for images, not things that change size and aspect ratio, but it is a good package and I would prefer to keep using it.

Is anyone familiar enough with this package to know the settings I should be using to allow infinite zoom out, and if so what are those settings?

I'm using an npm called react-zoom-pan-pinch which has multiple func as props. but I want to call some of them outside of the component. how can I call the component functions in my own function?

Context:

I try to create a coloring pixels game with Canvas. As of right now, I render a few rects via strokeRect that can be painted onClick via fillRect.

Since the canvas is not full screen but just a fixed size I need to calculate the offset. When I have the coordinates I just divide the x with the rect width (10).

Here is the code I have.

First I get the correct cursor position:

I have used the code posted here by SebasianKruse https://forums.xamarin.com/discussion/74168/full-screen-image-viewer-with-pinch-to-zoom-pan-to-move-tap-to-show-captions-for-xamarin-forms/p2 to be able to pinch zoom and pan my image. It works great in Android, but in IOS I can't zoom nor pan.

I tried to set a breakpoint inside the OnPanUpdated but its never reached on IOS.

here is my code:

xaml:

I'm using react-zoom-pan-pinch in my project. So I want to use this in conditionally in my render.

Please check the below codes:

I know it will work:

I'm creating a zoomable and "pannable" canvas by using useWheel from react-use-gesture.

The progress is good so far, until I tried to zoom around origin point (which is the mouse position).

I'm having trouble calculating the position displacement to accommodate the changes caused by scaling around a different origin point.

Here's a code sandbox (check App.js around line 60): https://codesandbox.io/s/usewheel-zoom-pan-stackoverflow-27o0l

Thanks

Here is a fiddle of what actually have. https://jsfiddle.net/Lofdujwr/

I'm using a library for zoom and pan an SVG svgpanzoom. I have a button when clicked it zooms on spain for example, so I put the coordinates in: