How can I use CTRL + wheel to zoom in and out rather than just the wheel, and how can I make the wheel simply drag the screen instead of zooming in and out?

[ebrahim-mansour]

Hello everyone,

I just wanted to modify a few general Canvas behaviors to resemble those found on Miro:

• I wanted to change the "Mouse Wheel" action to move up, down, left, and right within the canvas, instead of zooming in and out
• I wanted to change the "Mouse Left Click" action to be selecting components in the Canvas rather than moving up, down, left, or right.
• I also wanted to transform the cursor to a pointer when the user clicks "Space + Mouse Left Click" so that dragging is possible.

[siarheihuzarevich]

Hello,

Thank you for your interest in Foblex Flow. To achieve the behavior you described, you can create your own custom zoom directive. By writing a custom directive, you’ll be able to:

• Override the mouse wheel action to pan the Canvas instead of zooming.

• Customize the left mouse click to select components instead of moving the Canvas.

• Add logic for the “Space + Left Mouse Click” combination to enable dragging and change the cursor.

The library is flexible enough to accommodate these modifications, so most of your requirements can be fulfilled with this approach.

[siarheihuzarevich]

Yes, I mean overriding the fDraggable and fZoom directives

[ebrahim-mansour]

Since I have never done this before, I would appreciate it if you could walk me through the steps. Thanks in advance.

[siarheihuzarevich]

I think not, I don’t have enough time to explain everything to you. But you can explore the code yourself

[ebrahim-mansour]

I simply meant how to use the overrided code and integrate it, not how to explore the source.
In any case, I appreciate your response and will take care of it.

[siarheihuzarevich]

Well, I explained to you that you need to write your own fDraggable and fZoom directives that will suit your needs

[siarheihuzarevich]

Hi again! Just a quick update 🙂

As of version 17.1.1, you no longer need to override fZoom or fDraggable to customize canvas interactions.

A new custom event trigger system has been introduced, which allows you to configure wheel behavior, left click, keyboard combinations (like Space + Click), and more — all without writing custom directives.

Here’s a live example of how to use it:
🔗 https://flow.foblex.com/examples/custom-event-triggers

Let me know if you have any questions!