PIXI UI Lists Scrolling #1

New Issue

Uwe Oestermeier · 2019-03-22T11:07:09+01:00

Uwe Oestermeier commented

2019-03-22 11:07:09 +01:00

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.

Uwe Oestermeier added the

Enhancement

label 2019-03-22 11:07:09 +01:00

Sebastian Kupke self-assigned this 2019-03-22 11:10:01 +01:00

Sebastian Kupke commented

2019-03-29 12:11:14 +01:00

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.

Sebastian Kupke closed this issue

2019-03-29 12:11:14 +01:00

Sign in to join this conversation.

2 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: IWMBrowser/iwmlib#1