From fd6a1699911eb94d5e0f5b5ae4c653651f8ffce7 Mon Sep 17 00:00:00 2001 From: Rex Date: Wed, 29 Nov 2023 21:28:34 +0800 Subject: [PATCH] Add setChildrenAlignMode method --- docs/docs/ui-label.md | 13 +++ examples/ui-label/set-children-align-mode.bat | 5 + examples/ui-label/set-children-align-mode.js | 91 +++++++++++++++++++ templates/ui/label/Label.d.ts | 3 + templates/ui/label/methods/Methods.js | 2 + .../ui/label/methods/SetChildrenAlignMode.js | 37 ++++++++ 6 files changed, 151 insertions(+) create mode 100644 examples/ui-label/set-children-align-mode.bat create mode 100644 examples/ui-label/set-children-align-mode.js create mode 100644 templates/ui/label/methods/SetChildrenAlignMode.js diff --git a/docs/docs/ui-label.md b/docs/docs/ui-label.md index cf12a6c0e9..324a92f825 100644 --- a/docs/docs/ui-label.md +++ b/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 diff --git a/examples/ui-label/set-children-align-mode.bat b/examples/ui-label/set-children-align-mode.bat new file mode 100644 index 0000000000..5993ef2b6c --- /dev/null +++ b/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 \ No newline at end of file diff --git a/examples/ui-label/set-children-align-mode.js b/examples/ui-label/set-children-align-mode.js new file mode 100644 index 0000000000..179344fbc6 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/templates/ui/label/Label.d.ts b/templates/ui/label/Label.d.ts index dfd2505b1c..9757da7b6b 100644 --- a/templates/ui/label/Label.d.ts +++ b/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; + } \ No newline at end of file diff --git a/templates/ui/label/methods/Methods.js b/templates/ui/label/methods/Methods.js index 01c7cbb7aa..6e543169ff 100644 --- a/templates/ui/label/methods/Methods.js +++ b/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; \ No newline at end of file diff --git a/templates/ui/label/methods/SetChildrenAlignMode.js b/templates/ui/label/methods/SetChildrenAlignMode.js new file mode 100644 index 0000000000..7bb94ab389 --- /dev/null +++ b/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; \ No newline at end of file