Skip to content

🐛 [BUG]: Canvas gets "stuck" on first load when using figma-style controls #1248

@snoozbuster

Description

@snoozbuster

Is there an existing issue for this?

  • I have searched the existing issues and this is a new bug.

Current Behavior

My desire is to have the following behavior (figma-style controls):

  • clicking and dragging with no buttons pressed selects nodes
  • scrolling with no buttons pressed pans the canvas
  • holding Meta and scrolling zooms
  • there is no key combination which causes clicking and dragging to pan the canvas

If I use the following config, which seems correct to me:

{
  panActivationKeyCode: true,
  selectionKeyCode: true,
  panOnScroll: true,
  zoomOnScroll: false,
  panOnDrag: false,
  multiSelectionKeyCode: null
}

Then the behavior I get is:

  • On initial load, panning is completely disabled (selecting works fine)
  • If I press meta and scroll, no zoom occurs
  • After pressing and releasing Meta once and then panning by scrolling, the following things happen:
    • the canvas suddenly seems to "respond" to all panning and zooming that was done in the initial state, causing the canvas to jump and re-focus
    • Thereafter, the canvas works as desired

Expected Behavior

This configuration should work to produce the desired effects without requiring Meta to be pressed and released once first.

Steps To Reproduce

  1. Paste the given config object into the useVueFlow() call in the basic example on the website.
  2. Observe the reported effects.

Relevant log output

No response

Anything else?

In 1.19.0, this config worked to produce the controls I wanted:

{
  panActivationKeyCode: 'Shift',
  selectionKeyCode: true,
  panOnScroll: true,
  zoomOnScroll: false,
  panOnDrag: true,
  multiSelectionKeyCode: null
}

This worked great, although I am not sure that panActivationKeyCode does anything meaningful here (as in my app on 1.19.0, pressing Shift does nothing). In 1.28.0, this produces the following result:

  • On initial load, panning is completely disabled (selecting works fine)
  • If I press meta and scroll, no zoom occurs
  • After pressing and releasing Meta once and then panning by scrolling, the following things happen:
    • the canvas suddenly seems to "respond" to all panning and zooming that was done in the initial state, causing the canvas to jump and re-focus
    • clicking and dragging pans the canvas
    • scrolling pans the canvas
    • holding Shift activates node selection

So it has the same "sticking" effect, but produces a different behavior after "unsticking".

I believe this change in behavior is caused by this commit - but it is not clear to me why, it's not clear to me what issue that was fixing, and it's especially not clear to me how to get the canvas to not be stuck on first load. How am I supposed to get my desired controls back in 1.28.0 and avoid this sticking effect?

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions