From bff77040e88b9b5282dccc38304f95b4e23a48ca Mon Sep 17 00:00:00 2001 From: Rex Date: Mon, 14 Aug 2023 00:18:12 +0800 Subject: [PATCH] Add test code --- examples/ui-gridtable/overlap-slider.bat | 5 + examples/ui-gridtable/overlap-slider.js | 127 ++++++++++++++++++ templates/ui/label/Label.js | 4 + .../ui/titlelabel/methods/LayoutMode0.js | 4 + .../ui/titlelabel/methods/LayoutMode1.js | 4 + 5 files changed, 144 insertions(+) create mode 100644 examples/ui-gridtable/overlap-slider.bat create mode 100644 examples/ui-gridtable/overlap-slider.js diff --git a/examples/ui-gridtable/overlap-slider.bat b/examples/ui-gridtable/overlap-slider.bat new file mode 100644 index 0000000000..94145e2000 --- /dev/null +++ b/examples/ui-gridtable/overlap-slider.bat @@ -0,0 +1,5 @@ +@echo off +set main=./examples/ui-gridtable/overlap-slider.js +cd .. +cd .. +npm run watch \ No newline at end of file diff --git a/examples/ui-gridtable/overlap-slider.js b/examples/ui-gridtable/overlap-slider.js new file mode 100644 index 0000000000..cce399e7c8 --- /dev/null +++ b/examples/ui-gridtable/overlap-slider.js @@ -0,0 +1,127 @@ +import phaser from 'phaser/src/phaser.js'; +import UIPlugin from '../../templates/ui/ui-plugin.js'; + +const COLOR_PRIMARY = 0x4e342e; +const COLOR_LIGHT = 0x7b5e57; +const COLOR_DARK = 0x260e04; + +const Random = Phaser.Math.Between; + +class Demo extends Phaser.Scene { + constructor() { + super({ + key: 'examples' + }) + } + + preload() { } + + create() { + var gridTable = this.rexUI.add.gridTable({ + x: 400, + y: 300, + width: 300, + height: 520, + + scrollMode: 'y', + + background: this.rexUI.add.roundRectangle({ radius: 10, color: COLOR_PRIMARY }), + + table: { + cellHeight: 80, + + columns: 1, + + mask: { + padding: { left: 100, right: 100, top: 2, bottom: 2 }, + }, + + reuseCellContainer: true, + }, + + slider: { + track: this.rexUI.add.roundRectangle({ width: 20, radius: 10, color: COLOR_DARK }), + thumb: this.rexUI.add.roundRectangle({ radius: 13, color: COLOR_LIGHT }), + position: 'left' + }, + + space: { + left: 20, + right: 20, + top: 20, + bottom: 20, + + table: 10, + }, + + createCellContainerCallback: function (cell, cellContainer) { + var scene = cell.scene, + width = cell.width, + height = cell.height, + item = cell.item, + index = cell.index; + if (cellContainer === null) { + cellContainer = scene.rexUI.add.label({ + width: width, + height: height, + + orientation: 'x', + background: scene.rexUI.add.roundRectangle({ color: COLOR_PRIMARY, strokeColor: COLOR_DARK, strokeWidth: 2 }), + icon: scene.rexUI.add.roundRectangle({ width: 60, height: 40, color: 0x0 }), + text: scene.add.text(0, 0, ''), + + space: { + left: -20, right: 20, top: 20, bottom: 20, + icon: 10 + } + }); + } + + // Set properties from item value + cellContainer.setMinSize(width, height); // Size might changed in this demo + cellContainer.getElement('text').setText(item.id); // Set text of text object + cellContainer.getElement('icon').setFillStyle(item.color); // Set fill color of round rectangle object + cellContainer.getElement('background').setStrokeStyle(2, COLOR_DARK).setDepth(0); + return cellContainer; + }, + items: CreateItems(100) + }) + .layout() + .drawBounds(this.add.graphics(), 0xff0000); + + } + + update() { } +} + +var CreateItems = function (count) { + var data = []; + for (var i = 0; i < count; i++) { + data.push({ + id: i, + color: Random(0, 0xffffff) + }); + } + return data; +} + +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.js b/templates/ui/label/Label.js index 6dc97c1a88..31026da94a 100644 --- a/templates/ui/label/Label.js +++ b/templates/ui/label/Label.js @@ -41,6 +41,7 @@ class Label extends LabelBase { right: GetValue(config, 'space.icon', 0), top: GetValue(config, 'space.iconTop', 0), bottom: GetValue(config, 'space.iconBottom', 0), + left: GetValue(config, 'space.iconLeft', 0), }; } } else { @@ -49,6 +50,7 @@ class Label extends LabelBase { bottom: GetValue(config, 'space.icon', 0), left: GetValue(config, 'space.iconLeft', 0), right: GetValue(config, 'space.iconRight', 0), + top: GetValue(config, 'space.iconTop', 0), }; } } @@ -104,11 +106,13 @@ class Label extends LabelBase { padding = { top: GetValue(config, 'space.actionTop', 0), bottom: GetValue(config, 'space.actionBottom', 0), + right: GetValue(config, 'space.actionRight', 0), }; } else { padding = { left: GetValue(config, 'space.actionLeft', 0), right: GetValue(config, 'space.actionRight', 0), + bottom: GetValue(config, 'space.actionBottom', 0), }; } var fitRatio = GetValue(config, 'squareFitAction', false) ? 1 : 0; diff --git a/templates/ui/titlelabel/methods/LayoutMode0.js b/templates/ui/titlelabel/methods/LayoutMode0.js index 9ecbd0cf0d..96d9b10848 100644 --- a/templates/ui/titlelabel/methods/LayoutMode0.js +++ b/templates/ui/titlelabel/methods/LayoutMode0.js @@ -36,12 +36,14 @@ var LayoutMode0 = function (config) { right: GetValue(config, 'space.icon', 0), top: GetValue(config, 'space.iconTop', 0), bottom: GetValue(config, 'space.iconBottom', 0), + left: GetValue(config, 'space.iconLeft', 0), }; } else { padding = { bottom: GetValue(config, 'space.icon', 0), left: GetValue(config, 'space.iconLeft', 0), right: GetValue(config, 'space.iconRight', 0), + top: GetValue(config, 'space.iconTop', 0), }; } var fitRatio = GetValue(config, 'squareFitIcon', false) ? 1 : 0; @@ -131,11 +133,13 @@ var LayoutMode0 = function (config) { padding = { top: GetValue(config, 'space.actionTop', 0), bottom: GetValue(config, 'space.actionBottom', 0), + right: GetValue(config, 'space.actionRight', 0), }; } else { padding = { left: GetValue(config, 'space.actionLeft', 0), right: GetValue(config, 'space.actionRight', 0), + bottom: GetValue(config, 'space.actionBottom', 0), }; } var fitRatio = GetValue(config, 'squareFitAction', false) ? 1 : 0; diff --git a/templates/ui/titlelabel/methods/LayoutMode1.js b/templates/ui/titlelabel/methods/LayoutMode1.js index dd929ff7b1..6377d00ef3 100644 --- a/templates/ui/titlelabel/methods/LayoutMode1.js +++ b/templates/ui/titlelabel/methods/LayoutMode1.js @@ -84,12 +84,14 @@ var LayoutMode1 = function (config) { right: GetValue(config, 'space.icon', 0), top: GetValue(config, 'space.iconTop', 0), bottom: GetValue(config, 'space.iconBottom', 0), + left: GetValue(config, 'space.iconLeft', 0), }; } else { padding = { bottom: GetValue(config, 'space.icon', 0), left: GetValue(config, 'space.iconLeft', 0), right: GetValue(config, 'space.iconRight', 0), + top: GetValue(config, 'space.iconTop', 0), }; } var fitRatio = GetValue(config, 'squareFitIcon', false) ? 1 : 0; @@ -146,11 +148,13 @@ var LayoutMode1 = function (config) { padding = { top: GetValue(config, 'space.actionTop', 0), bottom: GetValue(config, 'space.actionBottom', 0), + right: GetValue(config, 'space.actionRight', 0), }; } else { padding = { left: GetValue(config, 'space.actionLeft', 0), right: GetValue(config, 'space.actionRight', 0), + bottom: GetValue(config, 'space.actionBottom', 0), }; } var fitRatio = GetValue(config, 'squareFitAction', false) ? 1 : 0;