Weird behaviour on ctrl+wheel.

[MichaelErmovsky]

Hello there,

Looks like ctrl+wheel ignores all the scroll forbid properties:

<ReactFlow
    elements={elements}
    style={diagramStyle}
    onLoad={onDiagramLoad}
    nodeTypes={nodeTypes}
    connectionLineStyle={connectionLineStyle}
    snapToGrid={true}
    panOnScroll={false}
    zoomOnScroll={false}
    zoomOnDoubleClick={false}
    maxZoom={1.5}
    minZoom={0.2}
    snapGrid={[10, 10]}
    zoomActivationKeyCode={8}
  />

Still able to zoom with ctrl+scroll and zoom value jumps between min/max values. Also when max values reached browser zoom is being changed next.

Any ideas, maybe I did smth wrong? Thanks!

[moklick]

Hey @MichaelErmovsky

are you using a windows machine? I am not able to reproduce this.

[MichaelErmovsky]

Hi @moklick, yeah, windows 10, chrome x64 v88.0.4324.190

[wladimiiir]

I am having the same issue (Linux/Chrome). Additionally, I am trying to set zoomActivationKeyCode to any other value (Shift, Conrol), but it seems to be ignored. Default Meta works as expected.

[moklick]

Can someone check if this is "Looks like ctrl+wheel ignores all the scroll forbid properties" is still an issue on Windows?

@wladimiiir it seems that we need to handle those modifier keys differently. Normal keys do work for the zoomActivationKeyCode.

[dominiczy]

This is also an issue on Mac (on Chrome at least, with PanOnScroll=true): scrolling with Control will always zoom no matter what zoomActivationKeyCode is set to. However it will zoom very fast, much faster than when using the meta key. Also, it zooms regardless of whether the reactflow pane is in focus or not (unlike meta-key zooming)

[jackfishwick]

I checked and @dominiczy is right, it is slightly faster on Mac with the Ctrl+wheel however on Windows it is MUCH faster and makes the zoom almost unusable. I have a fix for it in #2577, let me know what you think!

(I have patched this onto the package as a hotfix for my users and it seems to work)

[standard-software]

I hope you get them in fast...

2577

Or fix zoomActivationKeyCode

[dominiczy]

Thanks for fixing @jackfishwick ! Hope @moklick will merge it in soon

[dominiczy]

@jackfishwick can I ask how you hotfixed the package? I want to do the same for my users. However reactflow in node_modules does not have the source files but just the packaged ones

[dominiczy]

@moklick is it still planned to fix this? I realize it's technically the browser's 'fault', but the issue can be clearly seen when going to https://reactflow.dev/docs/examples/overview/ and holding ctrl and wheel (or two-finger trackpad). The zoom will be way too fast (on Chrome, both Mac and Windows).

[dllnaoki]

Is there any hotfixed package??

[youcefs21]

@moklick wouldn't just setting a hard maximum for pinchDelta work well? I don't think that would break any accessibility

something like this:

const zoom = currentZoom * Math.pow(2, Math.min(Math.max(pinchDelta, -0.5), 0.5));

[cedeber]

I confirm as well, Ctrl (Windows) is always active, whatever other key you are given (the other given key works well, though).

In addition, when using the mouse (the device), as reported already, the zoom jumps weirdly from min to max. But I realized that on the same machine, when using the touchpad, then the scroll is smooth enough, although too fast, as also reported. Now I am wondering if the windows lines jumps settings is not responsible for this weird "jump" behavior for the mouse device.

On Firefox Windows, pressing Ctrl also accelerate the zoom speed on https://reactflow.dev/docs/examples/overview/. Not sure it's a Chrome-only issue.

I quickly check the code and looks like you are using d3zoom right. And guess what : https://github.com/d3/d3-zoom/pull/157 ;-) Not sure it's really solved though.

[moklick]

fixed in v11.8.0

[cedeber]

@moklick Thanks. Looks ok so far. But the same behavior happens when you use the mouse wheel on the Minimap.

[moklick]

oh nooo :D the minimap. I will check that! Thanks for the report @cedeber

[BCampbellDev]

This is also an issue on Mac (on Chrome at least, with PanOnScroll=true): scrolling with Control will always zoom no matter what zoomActivationKeyCode is set to. However it will zoom very fast, much faster than when using the meta key. Also, it zooms regardless of whether the reactflow pane is in focus or not (unlike meta-key zooming)

Did the issue with zoomActivationKeyCode get resolved in 11.8.0 ? I'm on 11.10.1 and still seeing this - no matter what I put as a value for the zoomActivationKeyCode prop - nothing changes, its always control that triggers zoom