PIXI UI Lists Scrolling #1

New Issue

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

uoestermeier 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.

uoestermeier added the

Enhancement

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

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

skupke 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.

skupke closed this issue

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

Sign in to join this conversation.

No Label

Bug

Enhancement

No Milestone

No Assignees

2 Participants

Notifications

Due Date

The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: IWMBrowser/iwmlib#1