PIXI UI Lists Scrolling #1

Closed
opened 4 years ago by uoestermeier · 1 comments
Owner

Lists with many items often need scrolling. Scrolling with touch events works well but on desktop standard mouse scroll events are not supported. Adding the related scroll event handlers would be great.

Lists with many items often need scrolling. Scrolling with touch events works well but on desktop standard mouse scroll events are not supported. Adding the related scroll event handlers would be great.
uoestermeier added the
Enhancement
label 4 years ago
skupke self-assigned this 4 years ago
Owner

The PixiJS List now also supports the mouse wheel. In order to use the mouse wheel, the option app must be set (see Doctest or the example below), as the mouse wheel event is not directly supported by the PixiJS Interaction Manager (PixiJS Issue: https://github.com/pixijs/pixi.js/issues/4267). Therefore, it can only be bound to the HTML Canvas element. PixiJS List uses the app.view reference to get this element.

const app = new PIXIApp({
    view: canvas,
    width: 900,
    height: 420,
    transparent: false
}).setup().run()

const list = new List(texts, {
    orientation: 'vertical',
    height: 200,
    padding: 2,
    app
})

app.addChild(list)

Unfortunately, a moving list is being stopped hard at the moment. A soft run out or snap back is a bit difficult because the mouse wheel does not throw an "end event" like onpointerup or something.

The PixiJS List now also supports the mouse wheel. In order to use the mouse wheel, the option **app** must be set (see [Doctest](https://gitea.iwm-tuebingen.de/IWMBrowser/iwmlib/src/branch/master/lib/pixi/list.html) or the example below), as the mouse wheel event is not directly supported by the PixiJS Interaction Manager (PixiJS Issue: [https://github.com/pixijs/pixi.js/issues/4267](https://github.com/pixijs/pixi.js/issues/4267)). Therefore, it can only be bound to the HTML Canvas element. PixiJS List uses the `app.view` reference to get this element. ``` const app = new PIXIApp({ view: canvas, width: 900, height: 420, transparent: false }).setup().run() const list = new List(texts, { orientation: 'vertical', height: 200, padding: 2, app }) app.addChild(list) ``` Unfortunately, a moving list is being stopped hard at the moment. A soft run out or snap back is a bit difficult because the mouse wheel does not throw an "end event" like `onpointerup` or something.
skupke closed this issue 4 years ago
Sign in to join this conversation.
No Milestone
No Assignees
2 Participants
Notifications
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
There is no content yet.