Skip to content

#3452623: Canvas interaction UI

Harumi Jang requested to merge issue/experience_builder-3452623: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. Solution is in MR now
  • No tests!
Edited by Harumi Jang

Merge request reports