Allow scroll on overlayed elements to scroll the viewport

[ribx]

Hi,

I have pretty much the opposite problem of this one:

https://github.com/davidfig/pixi-viewport/issues/130

I would like to have the viewport scroll, whenever it receives a wheel event.

I think it should be the responsibility of the overlayed element to stop the propagation of the wheel event.

I could fix it though, because we are running in fullscreen only at the moment (or at least always in the top left corner)

I think these lines should be deleted, but that would break the current behaviour: https://github.com/davidfig/pixi-viewport/blob/master/src/InputManager.ts#L230-L236

What do you think, @davidfig?

[davidfig]

Hmm...this code may have been put in before we had the point-over-viewport check. Is your divWheel element different from PIXI's canvas element? I would think that would be the only way this causes a problem since the event should eventually flow down the canvas element even with overlay elements above it.

[ribx]

divWheel is a div that is around the canvas, which also holds another div for my overlays. That way the events can travel through the dom tree to the divWheel from both the canvas and the overlays:

div (divWheel)
 |--- div (holds the overlays)
 |      `---- overlay elements (are the target of the wheel events)
 `--- canvas (app.view)

[davidfig]

why isn't the divWheel attached to the canvas element?

[ribx]

what do you mean by "attached"? the canvas is renderer inside the divWheel div with height/width 100%, here is the code:

    this.view.style.height = '100%'
    this.view.style.width = '100%'
    this.view.autofocus = true
    this.view.tabIndex = 0
    this.textFieldContainer.style.position = 'absolute'
    this.textFieldContainer.style.top = '0'
    this.textFieldContainer.style.left = '0'
    this.textFieldContainer.style.width = '0'
    this.textFieldContainer.style.height = '0'
    this.view.appendChild(this.textFieldContainer)

    this.view.appendChild(this.app.view)

    const viewport = new Viewport({
      interaction: this.app.renderer.plugins.interaction,
      threshold: this.config.interaction.clickMoveThreshold,
      divWheel: this.view,
      passiveWheel: false,
      stopPropagation: true,
    })```

Later there will be text fields that will go into that container and rendered above the canvas (because writing a text editor in pixi is a bit too much ;-) )