Skip to content

Resolve #3452623 "Canvas interaction UI"

Jesse Baker requested to merge exp-canvas into 0.x

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.
  • No tests!

Merge request reports