drag bad working after select a child

[meghe2000]

When I drag on an empty stage, it moves fine.
But when I do this on my children, it gets annoying.

const viewport = new Viewport({
    screenWidth: window.innerWidth,
    screenHeight: window.innerHeight,
    worldHeight: 1000,
    worldWidth: 1000,

    // interaction: app.renderer.plugins.interaction // the interaction module is important for wheel to work properly when renderer.view is placed or scaled
})
viewport.drag({}).pinch({}).wheel({}).decelerate({}).setZoom(0.5)

pixi-viewport": "^4.38.0
pixijs": "^7.1.1
os: windows 11 - chrome 109

[davidfig]

What do you mean? How is it annoying?

[meghe2000]

google drive video
Video of the problem has been sent.
When we select the box and understand if the pointer is removed from the box. Drag is generally disabled.

[meghe2000]

Did you notice the problem?

[davidfig]

(I think) you need to call event.stopPropagation() in your pointerdown function for when you start drag of your object. Otherwise viewport's pointerDown will trigger.

[meghe2000]

I tested this, but it didn't work

[davidfig]

If you're handling the event, then the viewport shouldn't get the pointerdown, which triggers the drag. You'll have to debug the events to see what's going on. pointermove on viewport will not trigger unless it also receives the pointerdown event.

[meghe2000]

import { Application, Sprite, Texture } from 'pixijs';
import { Viewport } from 'pixi-viewport'


const app = new Application({
    backgroundAlpha: 1,
    width: innerWidth, height: innerHeight,
    antialias: true,
})
document.body.appendChild(app.view)

const stage = new Viewport({
    screenWidth: window.innerWidth,
    screenHeight: window.innerHeight,
    worldHeight: 1000,
    worldWidth: 1000,
})
app.stage.addChild(stage)
stage.drag().pinch().wheel().decelerate().setZoom(0.5).clampZoom({ maxScale: 2, minScale: 0.3 }).interactiveChildren = true

for (let x = 0; x < 25; x++) {
    for (let y = 0; y < 25; y++) {
        Spawn(x, y)
    }
}

function Spawn(x, y) {
    const box = Sprite.from(Texture.WHITE)
    box.position.set(x * Texture.WHITE.width, y * Texture.WHITE.height)
    box.scale.set(0.90)
    box.on('click', () => console.log('box clicked!'))
    box.interactive = true
    stage.addChild(box)
}

I want to move on the boxes and click on them as well.

[TimWillebrands]

@davidfig
I seem to run into the same issue. When you're dragging and the cursor intersects with an object that has the 'interactive' property the drag action sometimes cancels.
In our case we're not attempting to block any event-propagation as it's just a little on-hover effect to guide the user.

The drag doesn't seem to cancel immediately, when you're dragging fast enough or slowly it seems to take a while before it cancels. Also when the drag remains within a limited amount of objects it doesn't cancel either, only reliably when it's more than 3ish.

Interactive off:

Interactive on (at no point do I cause a pointerup event when the drag cancels):

NB: We're on this branch: https://github.com/cuire/pixi-viewport/tree/v5 but since the issue seems very similar I still though to comment

[voidrender]

I'm running into similar problems on the v5 branch, where if I drag a sprite too quickly it will stop following the cursor. I switched from onpointermove to onglobalpointermove and it resolves it outside of a viewport, but when I put it inside of a viewport it moves with the viewport. So...not really a fix, but might be a new path to explore.

[meghe2000]

This is one of the biggest problems with pixi-viewport!

[littleboarx]

I check the source code and find out it is due to the incorrect pointerout event handler pop from the child element. A pr may come later.

[davidfig]

Yes, this is caused by pointerout calling cancel. I'll pull together a PR.