Improved button group stack sorting.

lib/pixi/buttongroup.html

@@ -303,12 +303,33 @@ const buttonGroup17 = new ButtonGroup({
     app
 })
 
+const buttonGroup18 = new ButtonGroup({
+    x: 10,
+    y: 1340,
+    buttons: [
+        {label: 'move'},
+        {label: 'explanation dried'},
+        {label: 'out catch'},
+        {label: 'late either'},
+        {label: 'tell pour'},
+        {label: 'willing apart airplane'},
+        {label: 'high war'},
+        {label: 'future struck'},
+        {label: 'sense image'},
+        {label: 'never'},
+        {label: 'mark cloth'},
+        {label: 'everywhere due large'}
+    ],
+    maxWidth: 500,
+    app
+})
+
 app.scene.addChild(buttonGroup1, buttonGroup2, buttonGroup3)
 app.scene.addChild(buttonGroup4)
 app.scene.addChild(buttonGroup5, buttonGroup6)
 app.scene.addChild(buttonGroup7, buttonGroup8)
 app.scene.addChild(buttonGroup9, buttonGroup10, buttonGroup11, buttonGroup12, buttonGroup13)
-app.scene.addChild(buttonGroup14, buttonGroup15, buttonGroup16, buttonGroup17)
+app.scene.addChild(buttonGroup14, buttonGroup15, buttonGroup16, buttonGroup17, buttonGroup18)
     </script>
 </body>
 </html>

lib/pixi/buttongroup.js

@@ -581,15 +581,24 @@ export default class ButtonGroup extends PIXI.Container {
         // z-index
         sorted
             .sort((a, b) => {
-                const distanceA = Math.abs(a.x - center)
-                const distanceB = Math.abs(b.x - center)
-                if (distanceA < distanceB) {
-                    return 1
-                } else if (distanceA > distanceB) {
-                    return -1
-                } else {
-                    return 0
+                const centerA = a.x + a.button.width / 2
+                const centerB = b.x + b.button.width / 2
+
+                if (centerA < center && centerB < center) {
+                    if (a.x < b.x) {
+                        return -1
+                    } else if (b.x < a.x) {
+                        return 1
+                    }
+                } else if (centerA > center && centerB > center) {
+                    if (a.x + a.button.width > b.x + b.button.width) {
+                        return -1
+                    } else if (b.x + b.button.width < a.x + a.button.x) {
+                        return 1
+                    }
                 }
+
+                return 0
             })
             .forEach(it => it.parent.addChild(it))
     }
@@ -629,15 +638,24 @@ export default class ButtonGroup extends PIXI.Container {
         // z-index
         sorted
             .sort((a, b) => {
-                const distanceA = Math.abs(a.y - center)
-                const distanceB = Math.abs(b.y - center)
-                if (distanceA < distanceB) {
-                    return 1
-                } else if (distanceA > distanceB) {
-                    return -1
-                } else {
-                    return 0
+                const centerA = a.y + a.button.height / 2
+                const centerB = b.y + b.button.height / 2
+
+                if (centerA < center && centerB < center) {
+                    if (a.y < b.y) {
+                        return -1
+                    } else if (b.y < a.y) {
+                        return 1
+                    }
+                } else if (centerA > center && centerB > center) {
+                    if (a.y + a.button.height > b.y + b.button.height) {
+                        return -1
+                    } else if (b.y + b.button.height < a.y + a.button.y) {
+                        return 1
+                    }
                 }
+
+                return 0
             })
             .forEach(it => it.parent.addChild(it))
     }