Add setChildrenAlignMode method

docs/docs/ui-label.md

@@ -242,6 +242,19 @@ label.layout();
 
 See also - [dirty](ui-basesizer.md#dirty)
 
+### Change children's align mode
+
+```javascript
+label
+    .setChildrenAlignMode(mode)
+    .layout();
+```
+
+- `mode` : Alignment of icon, text, action game objects.
+    - `undefined`, or `'left'`, or `'top'` : Align game objects at left, or top.
+    - `'center'` : Align game objects at center.
+    - `'right'`, or `'bottom'` : Align game objects at right, or bottom.
+
 ### Get element
 
 - Get element

examples/ui-label/set-children-align-mode.bat

@@ -0,0 +1,5 @@
+@echo off
+set main=./examples/ui-label/set-children-align-mode.js
+cd ..
+cd ..
+npm run watch

examples/ui-label/set-children-align-mode.js

@@ -0,0 +1,91 @@
+import phaser from 'phaser/src/phaser.js';
+import UIPlugin from '../../templates/ui/ui-plugin.js';
+
+const COLOR_MAIN = 0x4e342e;
+const COLOR_LIGHT = 0x7b5e57;
+const COLOR_DARK = 0x260e04;
+
+class Demo extends Phaser.Scene {
+    constructor() {
+        super({
+            key: 'examples'
+        })
+
+    }
+
+    preload() { }
+
+    create() {
+        var label = CreateLabel(this, 'Label', true)
+            .setPosition(400, 300)
+            .layout()
+
+        this.rexUI.add.buttons({
+            x: 400, y: 400,
+            orientation: 'x',
+
+            buttons: [
+                CreateLabel(this, 'Left'),
+                CreateLabel(this, 'Center'),
+                CreateLabel(this, 'Right')
+            ]
+        })
+            .layout()
+            .on('button.click', function (button, index, pointer, event) {
+                switch (index) {
+                    case 0: label.setChildrenAlignMode('left').layout(); break;
+                    case 1: label.setChildrenAlignMode('center').layout(); break;
+                    case 2: label.setChildrenAlignMode('right').layout(); break;
+                }
+            })
+            .on('button.over', function (button, index, pointer, event) {
+                button.getElement('background').setFillStyle(COLOR_DARK);
+            })
+            .on('button.out', function (button, index, pointer, event) {
+                button.getElement('background').setFillStyle();
+            })
+
+    }
+
+    update() { }
+}
+
+var CreateLabel = function (scene, text, hasIcon) {
+    if (hasIcon === undefined) {
+        hasIcon = false;
+    }
+    return scene.rexUI.add.label({
+        width: 240, height: 60,
+        background: scene.rexUI.add.roundRectangle(0, 0, 2, 2).setStrokeStyle(2, COLOR_LIGHT),
+        text: scene.add.text(0, 0, text),
+        icon: (hasIcon) ? scene.rexUI.add.roundRectangle(0, 0, 0, 0, 10, COLOR_LIGHT) : undefined,
+        space: {
+            left: 10,
+            right: 10,
+            top: 10,
+            bottom: 10,
+            icon: 10
+        }
+    });
+}
+
+var config = {
+    type: Phaser.AUTO,
+    parent: 'phaser-example',
+    width: 800,
+    height: 600,
+    scale: {
+        mode: Phaser.Scale.FIT,
+        autoCenter: Phaser.Scale.CENTER_BOTH,
+    },
+    scene: Demo,
+    plugins: {
+        scene: [{
+            key: 'rexUI',
+            plugin: UIPlugin,
+            mapping: 'rexUI'
+        }]
+    }
+};
+
+var game = new Phaser.Game(config);

templates/ui/label/Label.d.ts

@@ -49,4 +49,7 @@ declare class Label extends LabelBase {
         scene: Phaser.Scene,
         config?: Label.IConfig
     );
+
+    setChildrenAlignMode(mode: Label.AlignTypes): this;
+
 }

templates/ui/label/methods/Methods.js

@@ -1,9 +1,11 @@
 import AppendText from '../../../../plugins/utils/text/AppendText.js';
 import ResetDisplayContent from './ResetDisplayContent.js';
+import SetChildrenAlignMode from './SetChildrenAlignMode.js';
 
 var methods = {
     appendText: AppendText,
     resetDisplayContent: ResetDisplayContent,
+    setChildrenAlignMode: SetChildrenAlignMode,
 }
 
 export default methods;

templates/ui/label/methods/SetChildrenAlignMode.js

@@ -0,0 +1,37 @@
+var SetChildrenAlignMode = function (mode) {
+    var children = this.sizerChildren;
+
+    var firstChild = children[0];
+
+    if (    // Has left space
+        (mode === 'right') ||
+        (mode === 'bottom') ||
+        (mode === 'center')
+    ) {
+        if (!firstChild.isRexSpace) {
+            this.insertSpace(0);
+        }
+
+    } else {  // Does not have left space
+        if (firstChild.isRexSpace) {
+            this.remove(firstChild, true);
+        }
+    }
+
+    var lastChildIndex = children.length - 1;
+    var lastChild = children[lastChildIndex];
+    if (mode === 'center') {   // Has right space
+        if (!lastChild.isRexSpace) {
+            this.insertSpace(lastChildIndex + 1);
+        }
+
+    } else {  // Does not have right space
+        if (lastChild.isRexSpace) {
+            this.remove(lastChild, true);
+        }
+    }
+
+    return this;
+}
+
+export default SetChildrenAlignMode;