PIXI UI Lists Scrolling #1

Closed
opened 5 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 5 years ago
skupke self-assigned this 5 years ago
skupke commented 5 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 5 years ago
Sign in to join this conversation.
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
Loading…
There is no content yet.