Add offsetOriginX , offsetOriginY parameters

rexrainbow · Oct 4, 2024 · 870c197 · 870c197
1 parent e54d919
commit 870c197
Show file tree

Hide file tree

Showing 21 changed files with 273 additions and 93 deletions.
diff --git a/docs/docs/ui-fixwidthsizer.md b/docs/docs/ui-fixwidthsizer.md
@@ -235,7 +235,11 @@ sizer.add(child,
     {
         padding: {left: 0, right: 0, top: 0, bottom: 0},
         key: undefined,
-        index: undefined
+        index: undefined,
+        offsetX: 0,
+        offsetY: 0,
+        offsetOriginX: 0,
+        offsetOriginY: 0,
     }
 );
 ```
@@ -261,9 +265,12 @@ sizer.add(child, padding, key, index);
 - `key` : Add this child into childMap, which could be read back by `sizer.getElement(key)`.
     - `undefined` : Don't add this child. Default value.
     - `items` : Reserved key, for all children item.
+- `offsetX`, `offsetOriginX` : Apply offset `offsetX + offsetOriginY * width` to x coordinate after alignment.
+- `offsetY`, `offsetOriginY` : Apply offset `offsetY + offsetOriginY * height` to y coordinate after alignment.
 - `index` : Insert child to.
     - `undefined` : Insert child at last.
 
+
 ### Insert child
 
 ```javascript

diff --git a/docs/docs/ui-gridsizer.md b/docs/docs/ui-gridsizer.md
@@ -291,7 +291,11 @@ gridSizer.add(child,
         align: 'center',
         padding: {left: 0, right: 0, top: 0, bottom: 0},
         expand: false,        // expand: {width, height}
-        key: undefined
+        key: undefined,
+        offsetX: 0,
+        offsetY: 0,
+        offsetOriginX: 0,
+        offsetOriginY: 0,
     }
 );
 ```
@@ -341,6 +345,9 @@ gridSizer.add(child, column, row, align, padding, expand, key);
         - `{width: true, height: true}` : Expand width and height of child.
 - `key` : Add this child into childMap, which could be read back by `sizer.getElement(key)`.
     - `undefined` : Don't add this child. Default value.
+- `offsetX`, `offsetOriginX` : Apply offset `offsetX + offsetOriginY * width` to x coordinate after alignment.
+- `offsetY`, `offsetOriginY` : Apply offset `offsetY + offsetOriginY * height` to y coordinate after alignment.
+
 
 ### Insert empty row/column
 

diff --git a/docs/docs/ui-overlapsizer.md b/docs/docs/ui-overlapsizer.md
@@ -203,7 +203,9 @@ sizer.add(child,
         key: undefined,
         align: 'center',     
         offsetX: 0,
-        offsetY: 0,   
+        offsetY: 0,
+        offsetOriginX: 0,
+        offsetOriginY: 0,
         padding: {left: 0, right: 0, top: 0, bottom: 0},
         expand: true,        // expand: {width, height}
         minWidth: undefined,
@@ -238,7 +240,8 @@ sizer.add(child, key, align, padding, expand, minWidth, minHeight, offsetX, offs
     - `'right-top'` , or `Phaser.Display.Align.TOP_RIGHT` : Align game object at right-top.
     - `'right-center'` , or `Phaser.Display.Align.RIGHT_CENTER` : Align game object at right-center.
     - `'right-bottom'` , or `Phaser.Display.Align.BOTTOM_RIGHT` : Align game object at right-bottom.
-- `offsetX`, `offsetY` : Apply offset to x, y coordinate after alignment.
+- `offsetX`, `offsetOriginX` : Apply offset `offsetX + offsetOriginY * width` to x coordinate after alignment.
+- `offsetY`, `offsetOriginY` : Apply offset `offsetY + offsetOriginY * height` to y coordinate after alignment.
 - `padding` : Extra padded space. Default is 0.
     - A number for left/right/top/bottom bounds,
     - Or a plain object.

diff --git a/docs/docs/ui-sizer.md b/docs/docs/ui-sizer.md
@@ -253,6 +253,10 @@ sizer.add(child,
         minWidth: undefined,
         minHeight: undefined,
         fitRatio: 0,  // true
+        offsetX: 0,
+        offsetY: 0,
+        offsetOriginX: 0,
+        offsetOriginY: 0,
     }
 );
 ```
@@ -310,6 +314,8 @@ sizer.add(child, proportion, align, padding, expand, key, index);
     - `0`, or `false` : Ignore this feature. Default behavior.
     - `true` : Fit ratio (width/height) from game object's display size.
     - `> 0` : Fit ratio (width/height). `1` is square.
+- `offsetX`, `offsetOriginX` : Apply offset `offsetX + offsetOriginY * width` to x coordinate after alignment.
+- `offsetY`, `offsetOriginY` : Apply offset `offsetY + offsetOriginY * height` to y coordinate after alignment.
 
 
 ### Insert child

diff --git a/examples/test/test-ui.js b/examples/test/test-ui.js
@@ -11,43 +11,6 @@ class Demo extends Phaser.Scene {
     preload() { }
 
     create() {
-        this.add
-            .rectangle(160, 160, 240, 360)
-            .setFillStyle(0x880000)
-            .setOrigin(0, 0);
-
-        var sizer = this.rexUI.add.sizer({
-            orientation: 'y',
-            x: 160,
-            y: 160,
-            width: 240,
-            height: 360,
-            origin: 0,
-        })
-            .addBackground(
-                this.add
-                    .rectangle(0, 0, 0, 0)
-                    .setFillStyle(0x008800)
-                    .setOrigin(0, 0),
-            )
-
-        for (let i = 0; i < 6; i++) {
-            let child = this.add.text(0, 0, `${i} TEXT`, {
-                fixedWidth: 240,
-                fixedHeight: 40,
-                backgroundColor: 'grey'
-            })
-
-            sizer.add(
-                this.add.container()
-                    .add(child)
-                    .setSize(240, 40),
-                { offsetX: -120, offsetY: -20 }
-            );
-        }
-
-        sizer.layout()
-
     }
 
     update() { }

diff --git a/examples/ui-sizer/offset-origin.bat b/examples/ui-sizer/offset-origin.bat
@@ -0,0 +1,4 @@
+set main=./examples/ui-sizer/offset-origin.js
+cd ..
+cd ..
+npm run watch
diff --git a/examples/ui-sizer/offset-origin.js b/examples/ui-sizer/offset-origin.js
@@ -0,0 +1,75 @@
+import phaser from 'phaser/src/phaser.js';
+import UIPlugin from '../../templates/ui/ui-plugin.js';
+
+class Demo extends Phaser.Scene {
+    constructor() {
+        super({
+            key: 'examples'
+        })
+    }
+
+    preload() { }
+
+    create() {
+        this.add
+            .rectangle(160, 160, 240, 360)
+            .setFillStyle(0x880000)
+            .setOrigin(0, 0);
+
+        var sizer = this.rexUI.add.sizer({
+            orientation: 'y',
+            x: 160,
+            y: 160,
+            width: 240,
+            height: 360,
+            origin: 0,
+        })
+            .addBackground(
+                this.add
+                    .rectangle(0, 0, 0, 0)
+                    .setFillStyle(0x008800)
+                    .setOrigin(0, 0),
+            )
+
+        for (let i = 0; i < 6; i++) {
+            let child = this.add.text(0, 0, `${i} TEXT`, {
+                fixedWidth: 240,
+                fixedHeight: 40,
+                backgroundColor: 'grey'
+            })
+
+            sizer.add(
+                this.add.container()
+                    .add(child)
+                    .setSize(240, 40),
+                { offsetOriginX: -0.5, offsetOriginY: -0.5 }
+            );
+        }
+
+        sizer.layout()
+
+    }
+
+    update() { }
+}
+
+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);
diff --git a/templates/ui/basesizer/LayoutBackgrounds.js b/templates/ui/basesizer/LayoutBackgrounds.js
@@ -34,7 +34,10 @@ var LayoutBackgrounds = function () {
 
         ResizeGameObject(child, width, height);
 
-        LayoutChild.call(this, child, x, y, width, height, ALIGN_CENTER);
+        LayoutChild.call(this,
+            child, x, y, width, height, ALIGN_CENTER,
+            0, 0
+        );
     }
 }
 

diff --git a/templates/ui/basesizer/utils/LayoutChild.js b/templates/ui/basesizer/utils/LayoutChild.js
@@ -1,14 +1,13 @@
 import AlignIn from '../../../../plugins/utils/actions/AlignIn.js';
 
 var LayoutChild = function (child, x, y, width, height, align, offsetX, offsetY) {
+    if (offsetX === undefined) { offsetX = 0; }
+    if (offsetY === undefined) { offsetY = 0; }
+
     AlignIn(child, x, y, width, height, align);
 
-    if (offsetX !== undefined) {
-        child.x += offsetX;
-    }
-    if (offsetY !== undefined) {
-        child.y += offsetY;
-    }
+    child.x += offsetX;
+    child.y += offsetY;
 
     this.resetChildPositionState(child);
 

diff --git a/templates/ui/fixwidthsizer/AddChildMethods.js b/templates/ui/fixwidthsizer/AddChildMethods.js
@@ -13,21 +13,47 @@ var Add = function (gameObject, paddingConfig, childKey, index) {
         return this;
     }
 
+    var offsetX, offsetY;
+    var offsetOriginX, offsetOriginY;
+
     AddChild.call(this, gameObject);
 
     if (IsPlainObject(paddingConfig)) {
         var config = paddingConfig;
         paddingConfig = GetValue(config, 'padding', 0);
         childKey = GetValue(config, 'key', undefined);
         index = GetValue(config, 'index', undefined);
+
+        offsetX = GetValue(config, 'offsetX', 0);
+        offsetY = GetValue(config, 'offsetY', 0);
+        offsetOriginX = GetValue(config, 'offsetOriginX', 0);
+        offsetOriginY = GetValue(config, 'offsetOriginY', 0);
     }
     if (paddingConfig === undefined) {
         paddingConfig = 0;
     }
 
+    if (offsetX === undefined) {
+        offsetX = 0;
+    }
+    if (offsetY === undefined) {
+        offsetY = 0;
+    }
+    if (offsetOriginX === undefined) {
+        offsetOriginX = 0;
+    }
+    if (offsetOriginY === undefined) {
+        offsetOriginY = 0;
+    }
+
     var config = this.getSizerConfig(gameObject);
     config.align = ALIGN_CENTER;
     config.padding = GetBoundsConfig(paddingConfig);
+    config.alignOffsetX = offsetX;
+    config.alignOffsetY = offsetY;
+    config.alignOffsetOriginX = offsetOriginX;
+    config.alignOffsetOriginY = offsetOriginY;
+
     if ((index === undefined) || (index >= this.sizerChildren.length)) {
         this.sizerChildren.push(gameObject);
     } else {

diff --git a/templates/ui/fixwidthsizer/FixWidthSizer.d.ts b/templates/ui/fixwidthsizer/FixWidthSizer.d.ts
@@ -34,6 +34,16 @@ declare namespace FixWidthSizer {
 
         align?: AlignTypes;
     }
+
+    interface IAddConfig {
+        padding?: FixWidthSizer.PaddingTypes,
+        key?: string,
+        index?: number,
+        offsetX?: number,
+        offsetY?: number,
+        offsetOriginX?: number,
+        offsetOriginY?: number,
+    }
 }
 
 declare class FixWidthSizer extends BaseSizer {

diff --git a/templates/ui/fixwidthsizer/LayoutChildren.js b/templates/ui/fixwidthsizer/LayoutChildren.js
@@ -10,7 +10,7 @@ var LayoutChildren = function () {
     var child, childConfig, padding, justifySpace = 0, indentLeft, indentTop;
     var startX = this.innerLeft,
         startY = this.innerTop;
-    var x, y, width, height; // Align zone
+    var x, y, width, height, alignOffsetX, alignOffsetY; // Align zone
     var lines = this.wrapResult.lines;  // Get this.wrapResult from RunChildrenWrap()
     var line, lineChlidren, remainderLineWidth;
 
@@ -124,7 +124,13 @@ var LayoutChildren = function () {
                 itemY = y + height + (padding.top * this.scaleY) + justifySpace;
             }
 
-            LayoutChild.call(this, child, x, y, width, height, childConfig.align);
+            alignOffsetX = (childConfig.alignOffsetX + (childConfig.alignOffsetOriginX * width)) * this.scaleX;
+            alignOffsetY = (childConfig.alignOffsetY + (childConfig.alignOffsetOriginY * height)) * this.scaleY;
+
+            LayoutChild.call(this,
+                child, x, y, width, height, childConfig.align,
+                alignOffsetX, alignOffsetY
+            );
         }
 
         if (horizontalWrap) {

diff --git a/templates/ui/gridsizer/AddChildMethods.js b/templates/ui/gridsizer/AddChildMethods.js
@@ -53,6 +53,9 @@ var GetEmptyCellIndex = function (columnIndex, rowIndex, cells, columnCount, row
 }
 
 var Add = function (gameObject, columnIndex, rowIndex, align, paddingConfig, expand, childKey) {
+    var offsetX, offsetY;
+    var offsetOriginX, offsetOriginY;
+
     AddChild.call(this, gameObject);
     if (IsPlainObject(columnIndex)) {
         var config = columnIndex;
@@ -62,6 +65,11 @@ var Add = function (gameObject, columnIndex, rowIndex, align, paddingConfig, exp
         paddingConfig = GetValue(config, 'padding', 0);
         expand = GetValue(config, 'expand', false);
         childKey = GetValue(config, 'key', undefined);
+
+        offsetX = GetValue(config, 'offsetX', 0);
+        offsetY = GetValue(config, 'offsetY', 0);
+        offsetOriginX = GetValue(config, 'offsetOriginX', 0);
+        offsetOriginY = GetValue(config, 'offsetOriginY', 0);
     }
 
     // Get insert index
@@ -95,6 +103,19 @@ var Add = function (gameObject, columnIndex, rowIndex, align, paddingConfig, exp
         expand = true;
     }
 
+    if (offsetX === undefined) {
+        offsetX = 0;
+    }
+    if (offsetY === undefined) {
+        offsetY = 0;
+    }
+    if (offsetOriginX === undefined) {
+        offsetOriginX = 0;
+    }
+    if (offsetOriginY === undefined) {
+        offsetOriginY = 0;
+    }
+
     var config = this.getSizerConfig(gameObject);
     config.align = align;
     config.padding = GetBoundsConfig(paddingConfig);
@@ -107,6 +128,11 @@ var Add = function (gameObject, columnIndex, rowIndex, align, paddingConfig, exp
         config.expandHeight = expand;
     }
 
+    config.alignOffsetX = offsetX;
+    config.alignOffsetY = offsetY;
+    config.alignOffsetOriginX = offsetOriginX;
+    config.alignOffsetOriginY = offsetOriginY;
+
     this.sizerChildren[itemIndex] = gameObject;
 
     if (childKey !== undefined) {