Click events not scrolling with the view?

[shealyrd]

I have noticed that when using this scrollbox, the visuals in the container are moving but the click "hitboxes" are not.

Below is a modified example from davidfig where I have reduced the content height to force vertical scrolling:

function test()
{
    let scrollbox = new Scrollbox.Scrollbox({
        boxWidth: 550,
        boxHeight: 100
    });
    _renderer.stage.addChild(scrollbox);

    // insert element
    let tableStringContainer = new PIXI.Container(),
        hitArea = new PIXI.Graphics();

    // just added some colors and circles so I can see the scrollbox and target
    hitArea.beginFill(0xff0000).drawCircle(0, 0, 100).endFill()
    hitArea.beginFill(0xff0000, 1);
    hitArea.drawRect(0, 0, 540, 35);
    hitArea.endFill()
    hitArea.interactive = true;
    hitArea.buttonMode = true;

    hitArea
        .on('click', function ()
        {
            console.log('click');
        })
        .on('mouseover', function ()
        {
            console.log('mouseover');
        })
        .on('mouseout', function ()
        {
            console.log('mouseout');
        });
    tableStringContainer.addChild(hitArea);
    scrollbox.content.addChild(tableStringContainer);

    scrollbox.update();
}

window.onload = function ()
{
    _renderer = new PIXI.Application({ transparent: true, width: window.innerWidth, height: window.innerHeight, resolution: window.devicePixelRatio })
    document.body.appendChild(_renderer.view)
    _renderer.view.style.position = 'fixed'
    _renderer.view.style.width = '100vw'
    _renderer.view.style.height = '100vh'
    _renderer.view.style.left = 0
    _renderer.view.style.top = 0
test()
return

    horizontalVertical()
    vertical()
    horizontal()
    const nodrag = horizontalVertical('dragScroll=false (drag scrollbars to move)')
    nodrag.position.set(400, 425)
    nodrag.dragScroll = false
    window.addEventListener('resize', resize)

}

For me, the click events on the circle area are persisting on the left side of the screen, even when the circle is scrolled out of view.

Thanks

[DimitrisMpanis]

Same here. Did you manage to fix this?

[davidfig]

Thanks for the report. This is a weird one. The interaction code should work since pixi-scrollbox uses the normal pixi.js transformation functions. I'll see if I can track down the cause.

[davidfig]

Ok, I fixed this bug. You need to update pixi-scrollbox and pixi-viewport from npm.

The bug was caused by pixi-viewport.plugins.clamp(). pixi.js's interaction module does not handle containers that move (ie, if the container's position is changing, then it won't register an interaction--which is a weird omission). The viewport.plugins.clamp was improperly changing the position of the viewport (to the same clamped position) each frame even if nothing needed changing.

Let me know if there are any problems with this fix.

[Yakultea]

HI, This problem still exists. Why your example works, but I have this problem, can you help me solve it? Thank you!

[davidfig]

Sure. Can you provide details on your problem? The bug referenced above I think it fixed.

[Yakultea]

private _createScrollbox(): void{
		this._scrollBox = new Scrollbox({
			boxWidth: GameDetails.HEIGHT / 1.2, 
			boxHeight: GameDetails.WIDTH / 1.28 - 200,
			scrollbarSize: 25,
			scrollbarBackground: 0x000000,
			scrollbarForeground: 0xffbe00,
			dragScroll:true,
		});
		this._scrollBox.position.set(90,270);
		this.addChild(this._scrollBox);
		
		const gradTexture = this._createGradTexture();
		
		this._mainPanel = new Sprite(gradTexture);
		this._mainPanel.name = '_mainPanel';
		this._mainPanel.width = GameDetails.HEIGHT / 1.2;
		this._mainPanel.height = GameDetails.WIDTH * 5;
		this._scrollBox.content.addChild(this._mainPanel);
		
		this._scrollBox.update();
}

/*The above is the code, The interaction range is very large and strange, the position of the interaction range is very strange after setting the entire scrollbox position. And it only can trigger mouse scroll events, other mouse events cannot be triggered. What is the problem? thanks you! */

/* Sorry my English is not very good */

[davidfig]

This looks right. Can you show me your event code?

[Yakultea]

I don't understand the event code you said, sorry...
Or can you contact me by mail? I think you should understand Chinese, I ’m Taiwanese XD

[davidfig]

My Chinese is not great, regrettably. Is the problem that the scrollbox doesn't work or that you can't interact with the Sprite inside?

[Yakultea]

Yes!! And the interaction range is already outside the content.

When I set the position of the scrollbox, like this code:this._scrollBox.position.set(90,270);, the upper part of the content will not be able to interact, but the bottom half of the content is still interactive, and the outside of the scrollbox also can interact.

If what I said is still unclear, maybe I can video show you, thank you~~!

[davidfig]

Hmm...a JSFiddle would be even more useful to debug the problem.

[Yakultea]

I uploaded a video, the interaction range should only be inside the content, but it can also interact outside the content. And when I set the position of the box, the upper part of the content can't interact, but the interaction range is still extremely large. The mouse can’t drag the content to move, it can only scroll, hope this will make you understand the problem, thank you!

video URL => https://youtu.be/udnb8G9V9HI

[davidfig]

I'm still not sure what's causing the problem. Can you create a jsfiddle so i can debug it?

[Yakultea]

um...I think creating JSfiddle should not help ... because my code is only that. Can you tell me how to adjust the interaction range? thanks.

[Yakultea]

I found a new problem. When set this._scrollBox.disable = true; , I can grab the content and move it. Maybe it is Viewport catch the wrong position that causes the interaction range to be wrong...

[Yakultea]

Sorry to bother you, can you help me solve the problem about the interaction range? Or is there any other way to set the interaction range of the scrollbox?

[davidfig]

Can you create a jsfiddle so I can play with it and find the problem? Thanks!