Canvas: Add Pan and Zoom

[drew08t]

Add pan and zoom to canvas.

This feature will exist behind feature flag: canvasPanelPanZoom

• Add feature
• Fix moveable scaling
• Fix pan :( :)
• Fix drag
• Fix resize
• Fix arrow appearance while zoomed
• Minor clean-up to arrows during zoom (shift depending on anchor)
• Transform position while adding element using context menu
• Mini map is only updating for arrows To be addressed later: Canvas: Include preview of canvas in minimap #78561
• Ensure mini map has no mouse events
• Add zoom toggle to options or behind feature flag
• BONUS (if built into library): UI Hints
• Option or control to toggle mini map
• General code cleanup
• Fix dragging of selected group while zoomed
• Apply feature flag to options menu for minimap

New "Simplified" Minimap:

Pan / Zoom:

Arrow Behavior:

Add Element During Zoom:

Resize/Delete Arrow:

Select:

Closes #63902, #73953, #73177

[drew08t]

I’ve found a small issue when the pan stops working. It happens when you right-click on canvas (probably opens some invisible context menu in the background). To enable panning back you have to left-click somewhere on canvas. I know it’s a small one but it can be confusing. Let me know if you have an issue with reproducing.

About to do some refactoring. I will make sure to test this afterwards!

[nmarrs]

🥇 great job on this! I went through and smoothed a few things over - I'm comfortable with this in its current state to move forward and merge :)

Re: @Develer finding with phantom context menu while in panel edit mode, I was also able to replicate that. I created #79883 as a follow-up to address that bug / edge case (at this point I don't think we should block merging this PR as this is an experimental feature behind a FF and we need to prioritize progress over perfection 😬)

[drew08t]

Nice job!

[kasaranenikarthik]

Hi
Seems like the 10.3.1 and the public preview of this feature doesn't include all the features. I was only able to zoom but not drag/move around well. Is it the case for all?
Could you please tell me when this feature can be launched for all the users?

Thanks in advance

[drew08t]

Hi Seems like the 10.3.1 and the public preview of this feature doesn't include all the features. I was only able to zoom but not drag/move around well. Is it the case for all? Could you please tell me when this feature can be launched for all the users?

Thanks in advance

Thanks for the feedback, @kasaranenikarthik! Please create an issue so we can better capture and track what you are experiencing.

[11phc]

Hi, I am trying to overlay elements in exact locations over a large jpeg, set as background in Original scaling mode. I also want it to be responsive and work on desktop and iphone, i.e. portrait and landscape.

The issue I have with canvasPanelPanZoom on a narrow iphone browser (or a narrowed desktop browser) is that the background image is only initially rendered as wide as the browser window allows, trimming off the right hand side of the jpeg image as expected, but you can never zoom or pan to the right hand side of the image / canvas panel and see the "trimmed" bit, if that makes sense?

Likewise in the vertical plane, if the panel height is not high enough to contain the original background image, then you will never be able to zoom or pan down to the bottom part of the background image. Thanks

p.s. would you like me to create this as an Issue? thanks