feat: add zoom in/out buttons and keyboard shortcuts to Studio Canvas

[UmakanthKaspa]

This pull request improves the Studio Canvas by adding:

• Zoom In and Zoom Out buttons

• Keyboard shortcuts:

  • + or = to zoom in
  • - or _ to zoom out
  • 0 to reset (fit to screen)

• Shows tooltips with shortcuts on the zoom buttons

• Zoom level is saved in local storage and restored when the page reloads

• Zoom shortcuts only work when the mouse is inside the canvas

• Prevents zooming while typing in input fields

Demo Video:

Screencast.from.2025-05-03.20-56-13.webm

Closes: #58

[0MUHAMMEDIRFAN]

You can also move the tablet , mobile , desktop icon in the top right corner of canvas into this zoom elements container

[UmakanthKaspa]

You can also move the tablet , mobile , desktop icon in the top right corner of canvas into this zoom elements container

@0MUHAMMEDIRFAN Done. Breakpoints moved to toolbar.

[ruchamahabal]

The breakpoints should still be above the canvas. Don't merge them with the canvas controls. Also, if we want to keep the explicit buttons for zooming in and out, I would prefer a sequence like chrome's toolbar

Zoom percentage is displayed on the left side. Controls are on the right

[ruchamahabal]

1. Builder uses cmd + & cmd - to do so. Those are the standard zoom in & out shortcuts and we should stick to it: https://github.com/frappe/builder/blob/8d45e36f04e8a78ab2a74e85d81dfbab54d0e1de/frontend/src/utils/useBuilderEvents.ts#L400
2. Code for keyboard shortcuts is in useStudioEvents composable. So it should be there. Copy builder's logic instead of redoing it here.

[0MUHAMMEDIRFAN]

Does it make sense to move all controls above the canvas?

[ruchamahabal]

Does it make sense to move all controls above the canvas?

IMO, no. Grouping should be based on purpose. Apart from having all the controls together, that design doesn't provide any benefit on the utility side of things. If there are too many unrelated controls on the bar, it becomes overwhelming. The current design gives clear isolation and grouping is more explicit.

Also, the zoom control panel stays where it is when you have zoomed in a lot. On the other hand, the breakpoint buttons don't have to be present at such point because you are most likely trying to focus on a small space on one of the canvases.