Middle click + drag doesn't work correctly if middle click is inside preview iframe

Created on 2 July 2024, 3 months ago
Updated 1 September 2024, 15 days ago

Problem/Motivation

Work to improve the UX of the panning/zooming of the canvas has been done - the controls are now using the canvas' scroll position rather than translating the div with CSS - this means using a trackpad on a mac works.

When using a mouse, a user should be able to hold middle mouse button and drag to pan around. This works if the user's initial middle mouse click is outside of the preview iframe but does not work if that initial click is somewhere inside the iFrame.

Steps to reproduce

Move your mouse outside of the iframe
Click and hold down the middle mouse button
Move the mouse
observe that the canvas view pans around
release the middle mouse button.

Now
Move your mouse OVER the iframe
Click and hold down the middle mouse button
Move the mouse
observe that the canvas view DOES NOT pan around
release the middle mouse button.

Proposed resolution

On mouse down, I set the iFrame's CSS pointer-event property to 'none' - hoping that the mouse move will then be on the parent document however this doesn't work.

A different solution is required - perhaps displaying a transparent div on middlemouse down over the iframe that intercepts the mousemove events?
Perhaps using postmessages to pass the mousemove events from the iframe up to the parent?

🐛 Bug report
Status

Needs work

Component

Page builder

Created by

🇬🇧United Kingdom jessebaker

Live updates comments and jobs are added and updated live.
  • Needs tests

    The change is currently missing an automated test that fails when run with the original code, and succeeds when the bug has been fixed.

Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024