Added mousewheel support for PixiJS Lists.

lib/pixi/list.html

@@ -10,6 +10,7 @@
 
     <script src="../3rdparty/highlight/highlight.pack.js"></script>
     <script src="../../dist/iwmlib.3rdparty.js"></script>
+    <script src="../3rdparty/gsap/src/uncompressed/plugins/ThrowPropsPlugin.js"></script>
 
     <script src="../../dist/iwmlib.pixi.js"></script>
     <script src="../../dist/iwmlib.js"></script>
@@ -75,7 +76,8 @@ app.loadTextures([
 
     const bambooList = new List(bamboos, {
         orientation: 'horizontal',
-        width: 300
+        width: 300,
+        app
     })
     bambooList.x = 200
     bambooList.y = 10
@@ -98,7 +100,8 @@ app.loadTextures([
     const textList = new List(texts, {
         orientation: 'vertical',
         height: 200,
-        padding: 2
+        padding: 2,
+        app
     })
     textList.x = 200
     textList.y = 200

lib/pixi/list.js

@@ -39,6 +39,8 @@ export default class List extends PIXI.Container {
      *     left, center and right.
      * @param {string} [opts.verticalAlign=middle] - The vertical position of the items. Possible values are
      *     top, middle and bottom.
+     * @param {PIXI.Application} [opts.app] - The PixiJS Application. Must be set if you want to use the mousewheel to
+     *     scroll your list.
      */
     constructor(items = [], opts = {}) {
 
@@ -51,7 +53,8 @@ export default class List extends PIXI.Container {
             align: 'left',
             verticalAlign: 'middle',
             width: null,
-            height: null
+            height: null,
+            app: null
         }, opts)
 
         this.__items = items
@@ -97,6 +100,22 @@ export default class List extends PIXI.Container {
         this.on('pointercancel', this.onEnd.bind(this))
         this.on('pointerout', this.onEnd.bind(this))
         this.on('pointerupoutside', this.onEnd.bind(this))
+        this.on('scroll', this.onScroll.bind(this))
+
+        // mousewheel
+        //--------------------
+        if (this.opts.app) {
+            const app = this.opts.app
+            app.view.addEventListener('mousewheel', event => {
+                event.preventDefault()
+                const bounds = this.mask ? this.mask.getBounds() : this.getBounds()
+                const x = event.clientX - app.view.getBoundingClientRect().left
+                const y = event.clientY - app.view.getBoundingClientRect().top
+                if (bounds.contains(x, y)) {
+                    this.emit('scroll', event)
+                }
+            })
+        }
 
         this.layout()
 
@@ -324,12 +343,39 @@ export default class List extends PIXI.Container {
         }
     }
 
+    /**
+     * 
+     * @private
+     * @param {*} event 
+     */
+    onScroll(event) {
+
+        this.capture(event)
+
+        if (this.opts.orientation === 'horizontal') {
+            this.container.position.x -= event.deltaX
+            if (this.container.position.x > 0) {
+                this.container.position.x = 0
+            } else if (this.container.position.x + this.innerWidth < this.opts.width) {
+                this.container.position.x = this.opts.width - this.innerWidth
+            }
+        } else {
+            this.container.position.y -= event.deltaY
+            if (this.container.position.y > 0) {
+                this.container.position.y = 0
+            } else if (this.container.position.y + this.innerHeight < this.opts.height) {
+                this.container.position.y = this.opts.height - this.innerHeight
+            }
+        }
+    }
+
     /**
      * Captures an event to inform InteractionMapper about processed events.
      *
      * @param {event|PIXI.InteractionEvent} event - The PIXI event to capture.
      */
     capture(event) {
-        Events.capturedBy(event.data.originalEvent, this)
+        const originalEvent = event.data && event.data.originalEvent ? event.data.originalEvent : event
+        Events.capturedBy(originalEvent, this)
     }
 }