Add test code

rexrainbow · Sep 27, 2023 · e838815 · e838815
1 parent b11fa4a
commit e838815
Show file tree

Hide file tree

Showing 11 changed files with 170 additions and 14 deletions.
diff --git a/dist/rexgameobjectshellplugin.js b/dist/rexgameobjectshellplugin.js
@@ -38536,7 +38536,7 @@
     var selectedFile = files[0];
     return canvas.loadFromFilePromise(selectedFile).then(function () {
       imageBox.scaleImage();
-      parent.emit('select', selectedFile, self);
+      parent.emit('select', selectedFile, parent);
     });
   };
 
@@ -38576,13 +38576,22 @@
     }
   };
 
+  var GetFileName = function GetFileName(file) {
+    if (!file) {
+      return null;
+    }
+    var name = file.name;
+    return name.substr(0, name.lastIndexOf('.'));
+  };
+
   var SaveTexture = function SaveTexture(key) {
     var canvas = this.childrenMap.canvas;
     canvas.generateTexture(key);
     return this;
   };
 
   var methods$i = {
+    getFileName: GetFileName,
     saveTexture: SaveTexture
   };
   Object.assign(methods$i, OpenMethods);
@@ -38613,7 +38622,7 @@
       }
       _this.clickTarget = GetClickTarget(_assertThisInitialized(_this), config);
       if (_this.clickTarget) {
-        if (!GetValue$1o(config, 'domButton', false)) {
+        if (!GetValue$1o(config, 'domButton', true)) {
           _this.clickBehavior = CreateClickBehavior(_assertThisInitialized(_this), config);
         } else {
           _this.fileChooser = CreateFileChooser(_assertThisInitialized(_this));

diff --git a/dist/rexgameobjectshellplugin.min.js b/dist/rexgameobjectshellplugin.min.js
diff --git a/dist/rexuiplugin.js b/dist/rexuiplugin.js
@@ -40996,7 +40996,7 @@
     var selectedFile = files[0];
     return canvas.loadFromFilePromise(selectedFile).then(function () {
       imageBox.scaleImage();
-      parent.emit('select', selectedFile, self);
+      parent.emit('select', selectedFile, parent);
     });
   };
 
@@ -41036,13 +41036,22 @@
     }
   };
 
+  var GetFileName = function GetFileName(file) {
+    if (!file) {
+      return null;
+    }
+    var name = file.name;
+    return name.substr(0, name.lastIndexOf('.'));
+  };
+
   var SaveTexture = function SaveTexture(key) {
     var canvas = this.childrenMap.canvas;
     canvas.generateTexture(key);
     return this;
   };
 
   var methods$i = {
+    getFileName: GetFileName,
     saveTexture: SaveTexture
   };
   Object.assign(methods$i, OpenMethods);
@@ -41073,7 +41082,7 @@
       }
       _this.clickTarget = GetClickTarget(_assertThisInitialized(_this), config);
       if (_this.clickTarget) {
-        if (!GetValue$1A(config, 'domButton', false)) {
+        if (!GetValue$1A(config, 'domButton', true)) {
           _this.clickBehavior = CreateClickBehavior(_assertThisInitialized(_this), config);
         } else {
           _this.fileChooser = CreateFileChooser(_assertThisInitialized(_this));

diff --git a/dist/rexuiplugin.min.js b/dist/rexuiplugin.min.js
diff --git a/examples/ui-imageinputlabel/image-input.js b/examples/ui-imageinputlabel/image-input.js
@@ -19,7 +19,7 @@ class Demo extends Phaser.Scene {
         var label = this.rexUI.add.imageInputLabel({
             orientation: 'y',
             x: 400, y: 300,
-            width: 240, height: 320,
+            width: 260,
             space: { left: 20, right: 20, top: 20, bottom: 20, icon: 10 },
 
             iconWidth: 200, iconHeight: 200,
@@ -30,22 +30,25 @@ class Demo extends Phaser.Scene {
                 strokeWidth: 3
             }),
 
-            text: this.rexUI.wrapExpandText(this.add.text(0, 0, 'AABB')),
+            text: this.add.text(0, 0, 'AABB'),
             expandTextWidth: true,
 
             canvas: {
                 fill: 'grey'
             },
 
             clickTarget: 'icon',
-            
+
             domButton: false, // true
         })
-            .on('select', function (file) {
+            .layout()
+
+        label
+            .on('select', function (file, label) {
                 console.log(file);
-                label.setText(file.name)
+                label.setText(label.getFileName(file));
             })
-            .layout()
+
 
     }
 

diff --git a/examples/ui-imageinputlabel/save-texture.bat b/examples/ui-imageinputlabel/save-texture.bat
@@ -0,0 +1,5 @@
+@echo off
+set main=./examples/ui-imageinputlabel/save-texture.js
+cd ..
+cd ..
+npm run watch
diff --git a/examples/ui-imageinputlabel/save-texture.js b/examples/ui-imageinputlabel/save-texture.js
@@ -0,0 +1,118 @@
+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;
+
+
+class Demo extends Phaser.Scene {
+    constructor() {
+        super({
+            key: 'examples'
+        })
+    }
+
+    preload() { }
+
+    create() {
+        var label = this.rexUI.add.imageInputLabel({
+            orientation: 'y',
+            x: 400, y: 300,
+            width: 240,
+            space: { left: 20, right: 20, top: 20, bottom: 20, icon: 20, text: 20 },
+
+            iconWidth: 200, iconHeight: 200,
+
+            background: this.rexUI.add.roundRectangle({
+                radius: 20,
+                strokeColor: COLOR_DARK,
+                strokeWidth: 3
+            }),
+
+            // Editable text input
+            text: CreateCanvasInput(this),
+            expandTextWidth: true,
+
+            // 'Save' button 
+            action: this.add.text(0, 0, 'Save'),
+
+            canvas: {
+                fill: 'grey'
+            },
+
+            clickTarget: 'icon', 
+
+            domButton: true, // true
+        })
+            .layout()
+
+        var gameObject;
+
+        label
+            .on('select', function (file, label) {
+                console.log(file);
+                label.setText(label.getFileName(file));
+            })
+            .onClick(label.getElement('action'), function () {
+                var key = label.text;
+                label.saveTexture(key);
+                console.log(`Save texture ${key}`)
+
+                // Display new texture
+                if (!gameObject) {
+                    gameObject = this.add.image(0, 0, '').setOrigin(0);
+                }
+                gameObject.setTexture(key);
+            }, this)
+
+
+    }
+
+    update() { }
+}
+
+var CreateCanvasInput = function (scene) {
+    return scene.rexUI.add.canvasInput({
+        background: {
+            'focus.stroke': 'red',
+        },
+
+        style: {
+            fontSize: 20,
+            backgroundBottomY: 5,
+            backgroundHeight: 24,
+
+            'cursor.color': 'black',
+            'cursor.backgroundColor': 'white',
+        },
+
+        text: 'Click icon',
+
+        selectAll: true
+    })
+}
+
+var config = {
+    type: Phaser.AUTO,
+    parent: 'phaser-example',
+    width: 800,
+    height: 600,
+    scale: {
+        mode: Phaser.Scale.FIT,
+        autoCenter: Phaser.Scale.CENTER_BOTH,
+    },
+    dom: {
+        createContainer: true
+    },
+    scene: Demo,
+    plugins: {
+        scene: [{
+            key: 'rexUI',
+            plugin: UIPlugin,
+            mapping: 'rexUI'
+        }]
+    }
+};
+
+var game = new Phaser.Game(config);
diff --git a/templates/ui/imageinputlabel/ImageInputLabel.js b/templates/ui/imageinputlabel/ImageInputLabel.js
@@ -31,7 +31,7 @@ class ImageInputLabel extends Label {
 
         this.clickTarget = GetClickTarget(this, config);
         if (this.clickTarget) {
-            if (!GetValue(config, 'domButton', false)) {
+            if (!GetValue(config, 'domButton', true)) {
                 this.clickBehavior = CreateClickBehavior(this, config);
             } else {
                 this.fileChooser = CreateFileChooser(this, config);

diff --git a/templates/ui/imageinputlabel/methods/GetFileName.js b/templates/ui/imageinputlabel/methods/GetFileName.js
@@ -0,0 +1,10 @@
+var GetFileName = function (file) {
+    if (!file) {
+        return null;
+    }
+
+    var name = file.name;
+    return name.substr(0, name.lastIndexOf('.'));
+}
+
+export default GetFileName;
diff --git a/templates/ui/imageinputlabel/methods/Methods.js b/templates/ui/imageinputlabel/methods/Methods.js
@@ -1,7 +1,9 @@
 import OpenMethods from './OpenMethods.js';
+import GetFileName from './GetFileName.js';
 import SaveTexture from './SaveTexture.js';
 
 var methods = {
+    getFileName: GetFileName,
     saveTexture: SaveTexture,
 };
 

diff --git a/templates/ui/imageinputlabel/methods/OnSelectFile.js b/templates/ui/imageinputlabel/methods/OnSelectFile.js
@@ -10,7 +10,7 @@ var OnSelectFile = function (parent, files) {
         .then(function () {
             imageBox.scaleImage();
 
-            parent.emit('select', selectedFile, self);
+            parent.emit('select', selectedFile, parent);
         })
 }