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.

[ebrahim-mansour]

I tried using a directive that I had already built, but I was only able to override the wheel event; I was unable to apply the scroll or dragging events.

Additionally, the overriding only works in the blue region because the library is constructing the canvas with a width and height smaller than the screen, as in the following image.

Do you mean overriding the functionality in the library at a low level and rebuilding it?

Here is my code:

`
import { Directive, HostListener, Inject } from '@angular/core'
import { F_ZOOM, FZoomBase } from '@foblex/flow'

@directive({
selector: '[appCtrlZoom]',
standalone: true,
})
export class CtrlZoomDirective {
constructor(@Inject(F_ZOOM) private zoomService: FZoomBase) {}

@HostListener('wheel', ['$event']) onWheel(event: WheelEvent): void {
  event.preventDefault()
  event.stopPropagation()
  if (event.ctrlKey) {
    this.zoomService['onWheel'](event)
  } else {
    console.log(`🚀 scrolling....`)
    const scrollAmount = event.deltaY > 0 ? 100 : -100 // Define scroll step
    window.scrollBy(0, scrollAmount) // Adjust the scroll position vertically
  }
}

}
`

[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