How to do zoom and pan a large image(dynamic large size) inside a small viewport?

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By redwave1992

Dear developers

I am new in game programming and in developing game using Godot engine and is facing the above problem.

I have a 720x1090 screen resolution and it will be in portrait mode. I wished to create a overlay node(like a dialog) in a smaller size(600x600) and that node will contain a large image(full body human character) and I want it zoomable and pannable for the player look at(zoom/pan) the full body/half body/face/hand/feet/etc but it is not working well.

Here is my node setup:
Main node
–player cash label(on top)
–hboxcontainer which holds 4 buttons to change screen(on bottom)
–dialog_node(big image view)

Dialog_node
–viewportcontainer(clip content on)(600x600)(should work like a subscene)
----viewport
------camera2d(current on)
------texturerect

And uses this tutorial for camera interaction: https://kidscancode.org/godot_recipes/2d/touchscreen_camera/

The result is i cannot touch anything inside the dialog_node to interact with it, instead it can interact with the image inside when i touch outside on viewport which is wrong.

Is there any tutorial/sample code that can do zoom/pan large image inside a viewport irrelevant to my main game UI