#3452623: Canvas interaction UI

Closes #3452623

Goals

Demonstrate a proposed basic UX and technical solution to how we might display multiple different viewport sizes of the preview similar to other modern competing page builders. Prompt discussion/ideation with UX team to progress the wireframes/user journey.

Press and hold the space bar and then click and drag the mouse to pan. Hold space and use the mouse wheel to zoom. + and - keys also zoom.

Non-goals

• Finalised UX
• Tests - awaiting more confirmation/decision on UX direction before investing time on polish and tests

MR Contents

• Viewport with performant pan and scale (zoom)
• x/y and scale values are stored in Redux state allowing for them to be set programatically for elsewhere in the app
• Multiple previews displayed and kept in sync
• Lifted state for primary/contextual panels into a slice

Known issues

• Zooming is a bit wonky and progressively wonkier the further you pan from the center of the canvas. Requires centering the canvas on the mouse when zooming.
• Hard coded values to account for sidebar and topbar width/height when determining the start position of the canvas
• Focus on the iFrame previews prevents the hotkeys (space, + and -) from working. Solution is in another as of yet unmerged MR. Solution is in MR now
• No tests!