Prevent dragging of button group if buttons are not wider than maxWidth.

dist/iwmlib.pixi.js

@@ -3378,18 +3378,21 @@
          * @param {*} event
          */
         onStart(event) {
-            this.__dragging = true;
 
-            this.capture(event);
+            if ((this.opts.maxWidth != null && this.__initWidth > this.opts.maxWidth) || (this.opts.maxHeight != null && this.__initHeight > this.opts.maxHeight)) {
+                this.__dragging = true;
 
-            this.__delta = {
+                this.capture(event);
-                x: this.container.position.x - event.data.global.x,
-                y: this.container.position.y - event.data.global.y
-            };
 
-            TweenLite.killTweensOf(this.container.position, { x: true, y: true });
+                this.__delta = {
-            if (typeof ThrowPropsPlugin != 'undefined') {
+                    x: this.container.position.x - event.data.global.x,
-                ThrowPropsPlugin.track(this.container.position, 'x,y');
+                    y: this.container.position.y - event.data.global.y
+                };
+
+                TweenLite.killTweensOf(this.container.position, { x: true, y: true });
+                if (typeof ThrowPropsPlugin != 'undefined') {
+                    ThrowPropsPlugin.track(this.container.position, 'x,y');
+                }
             }
         }
 
@@ -3484,25 +3487,28 @@
          * @param {*} event
          */
         onScroll(event) {
-            this.capture(event);
 
-            if (this.opts.orientation === 'horizontal') {
+            if ((this.opts.maxWidth != null && this.__initWidth > this.opts.maxWidth) || (this.opts.maxHeight != null && this.__initHeight > this.opts.maxHeight)) {
-                this.container.position.x -= event.deltaX;
+                this.capture(event);
-                if (this.container.position.x > 0) {
+
-                    this.container.position.x = 0;
+                if (this.opts.orientation === 'horizontal') {
-                } else if (this.container.position.x + this.__initWidth < this.opts.maxWidth) {
+                    this.container.position.x -= event.deltaX;
-                    this.container.position.x = this.opts.maxWidth - this.__initWidth;
+                    if (this.container.position.x > 0) {
-                }
+                        this.container.position.x = 0;
-            } else {
+                    } else if (this.container.position.x + this.__initWidth < this.opts.maxWidth) {
-                this.container.position.y -= event.deltaY;
+                        this.container.position.x = this.opts.maxWidth - this.__initWidth;
-                if (this.container.position.y > 0) {
+                    }
-                    this.container.position.y = 0;
+                } else {
-                } else if (this.container.position.y + this.container.height < this.opts.maxHeight) {
+                    this.container.position.y -= event.deltaY;
-                    this.container.position.y = this.opts.maxHeight - this.container.height;
+                    if (this.container.position.y > 0) {
+                        this.container.position.y = 0;
+                    } else if (this.container.position.y + this.container.height < this.opts.maxHeight) {
+                        this.container.position.y = this.opts.maxHeight - this.container.height;
+                    }
                 }
+
+                this.stack();
             }
-
-            this.stack();
         }
 
         /**

lib/pixi/buttongroup.html

@@ -30,7 +30,7 @@
 const app = new PIXIApp({
     view: canvas,
     width: 1000,
-    height: 1400
+    height: 1700
 }).setup().run()
 
 const buttonGroup1 = new ButtonGroup({
@@ -324,12 +324,24 @@ const buttonGroup18 = new ButtonGroup({
     app
 })
 
+const buttonGroup19 = new ButtonGroup({
+    x: 10,
+    y: 1420,
+    buttons: [
+        {label: 'move'},
+        {label: 'explanation dried'},
+        {label: 'out catch'}
+    ],
+    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, buttonGroup18)
+app.scene.addChild(buttonGroup14, buttonGroup15, buttonGroup16, buttonGroup17, buttonGroup18, buttonGroup19)
     </script>
 </body>
 </html>

lib/pixi/buttongroup.js

@@ -440,18 +440,21 @@ export default class ButtonGroup extends PIXI.Container {
      * @param {*} event
      */
     onStart(event) {
-        this.__dragging = true
 
-        this.capture(event)
+        if ((this.opts.maxWidth != null && this.__initWidth > this.opts.maxWidth) || (this.opts.maxHeight != null && this.__initHeight > this.opts.maxHeight)) {
+            this.__dragging = true
 
-        this.__delta = {
+            this.capture(event)
-            x: this.container.position.x - event.data.global.x,
-            y: this.container.position.y - event.data.global.y
-        }
 
-        TweenLite.killTweensOf(this.container.position, { x: true, y: true })
+            this.__delta = {
-        if (typeof ThrowPropsPlugin != 'undefined') {
+                x: this.container.position.x - event.data.global.x,
-            ThrowPropsPlugin.track(this.container.position, 'x,y')
+                y: this.container.position.y - event.data.global.y
+            }
+
+            TweenLite.killTweensOf(this.container.position, { x: true, y: true })
+            if (typeof ThrowPropsPlugin != 'undefined') {
+                ThrowPropsPlugin.track(this.container.position, 'x,y')
+            }
         }
     }
 
@@ -546,25 +549,28 @@ export default class ButtonGroup extends PIXI.Container {
      * @param {*} event
      */
     onScroll(event) {
-        this.capture(event)
 
-        if (this.opts.orientation === 'horizontal') {
+        if ((this.opts.maxWidth != null && this.__initWidth > this.opts.maxWidth) || (this.opts.maxHeight != null && this.__initHeight > this.opts.maxHeight)) {
-            this.container.position.x -= event.deltaX
+            this.capture(event)
-            if (this.container.position.x > 0) {
+
-                this.container.position.x = 0
+            if (this.opts.orientation === 'horizontal') {
-            } else if (this.container.position.x + this.__initWidth < this.opts.maxWidth) {
+                this.container.position.x -= event.deltaX
-                this.container.position.x = this.opts.maxWidth - this.__initWidth
+                if (this.container.position.x > 0) {
-            }
+                    this.container.position.x = 0
-        } else {
+                } else if (this.container.position.x + this.__initWidth < this.opts.maxWidth) {
-            this.container.position.y -= event.deltaY
+                    this.container.position.x = this.opts.maxWidth - this.__initWidth
-            if (this.container.position.y > 0) {
+                }
-                this.container.position.y = 0
+            } else {
-            } else if (this.container.position.y + this.container.height < this.opts.maxHeight) {
+                this.container.position.y -= event.deltaY
-                this.container.position.y = this.opts.maxHeight - this.container.height
+                if (this.container.position.y > 0) {
+                    this.container.position.y = 0
+                } else if (this.container.position.y + this.container.height < this.opts.maxHeight) {
+                    this.container.position.y = this.opts.maxHeight - this.container.height
+                }
             }
+
+            this.stack()
         }
-
-        this.stack()
     }
 
     /**