I have a Toolbar component in which their are images that can be dragged and dropped into a Playground component. The Playground component has a scale value which is initially 1. With mouse scroll you can zoom in and out of the playground. When zooming the images in the Playground component are scaled to give the effect of zooming. You can also drag around the playground to pan using the middle mouse button. The images in the Playground component are translated to give the effect of panning around. Below are the relevant components.
The minZoom and maxZoom is currently set to 1 as I am having issues with this, but originally should be 0.5 and 3, respectfully.
The issue arises when the playground has been panned around, the images are not dropped in the correct position where the mouse is. The same issue arises if the playground has been zoomed in or out.
The desired implementation is that the logic gate component is dropped always where the mouse is.