Improvement features for Input text box

Extensions/TextInput/JsExtension.js

@@ -78,6 +78,15 @@ module.exports = {
       } else if (propertyName === 'disabled') {
         objectContent.disabled = newValue === '1';
         return true;
+      } else if (propertyName === 'maxLength') {
+        objectContent.maxLength = newValue;
+        return true;
+      } else if (propertyName === 'padding') {
+        objectContent.padding = newValue;
+        return true;
+      } else if (propertyName === 'textAlign') {
+        objectContent.textAlign = newValue;
+        return true;
       }
 
       return false;
@@ -200,6 +209,34 @@ module.exports = {
         .setLabel(_('Width'))
         .setGroup(_('Border appearance'));
 
+      objectProperties
+        .getOrCreate('padding')
+        .setValue((objectContent.padding || 0).toString())
+        .setType('number')
+        .setLabel(_('Padding'))
+        .setGroup(_('Font'));
+      objectProperties
+        .getOrCreate('maxLength')
+        .setValue((objectContent.maxLength || 0).toString())
+        .setType('number')
+        .setLabel(_('Max length'))
+        .setDescription(
+          _(
+            'The maximum length of the input value. (this property will be ignored if the input type is a number'
+          )
+        )
+        .setAdvanced(true);
+
+      objectProperties
+        .getOrCreate('textAlign')
+        .setValue(objectContent.textAlign || 'left')
+        .setType('choice')
+        .addExtraInfo('left')
+        .addExtraInfo('center')
+        .addExtraInfo('right')
+        .setLabel(_('Text alignment'))
+        .setGroup(_('Font'));
+
       return objectProperties;
     };
     textInputObject.content = {
@@ -216,6 +253,9 @@ module.exports = {
       borderWidth: 1,
       readOnly: false,
       disabled: false,
+      padding: 0,
+      textAlign: 'left',
+      maxLength: 0,
     };
 
     textInputObject.updateInitialInstanceProperty = function (
@@ -572,6 +612,22 @@ module.exports = {
       .getCodeExtraInformation()
       .setFunctionName('isFocused');
 
+    object
+      .addScopedCondition(
+        'IsInputSubmitted',
+        _('Input is submitted'),
+        _(
+          'Check if the input is submitted, which usually happens when the Enter key is pressed on a keyboard, or a specific button on mobile virtual keyboards.'
+        ),
+        _('_PARAM0_ value was submitted'),
+        '',
+        'res/conditions/surObject24.png',
+        'res/conditions/surObject.png'
+      )
+      .addParameter('object', _('Text input'), 'TextInputObject', false)
+      .getCodeExtraInformation()
+      .setFunctionName('isSubmitted');
+
     object
       .addScopedAction(
         'Focus',
@@ -755,8 +811,23 @@ module.exports = {
         this._pixiTextMask.endFill();
 
         const isTextArea = object.content.inputType === 'text area';
+        const textAlign = object.content.textAlign
+          ? object.content.textAlign
+          : 'left';
+        const padding = object.content.padding
+          ? parseFloat(object.content.padding)
+          : 0;
+
+        if (textAlign === 'left')
+          this._pixiText.position.x = textOffset + padding;
+        else if (textAlign === 'right')
+          this._pixiText.position.x =
+            0 + width - this._pixiText.width - textOffset - padding;
+        else if (textAlign === 'center') {
+          this._pixiText.align = 'center';
+          this._pixiText.position.x = 0 + width / 2 - this._pixiText.width / 2;
+        }
 
-        this._pixiText.position.x = textOffset;
         this._pixiText.position.y = isTextArea
           ? textOffset
           : height / 2 - this._pixiText.height / 2;

Extensions/TextInput/tests/textinputruntimeobject.pixiruntimegamewithassets.spec.js

@@ -25,6 +25,9 @@ describe('gdjs.TextInputRuntimeObject (using a PixiJS RuntimeGame with DOM eleme
         borderWidth: 2,
         disabled: false,
         readOnly: false,
+        padding: 0,
+        textAlign: 'left',
+        maxLength: 20,
       },
     });
 
@@ -166,33 +169,33 @@ describe('gdjs.TextInputRuntimeObject (using a PixiJS RuntimeGame with DOM eleme
       object,
     } = await setupObjectAndGetDomElementContainer();
 
-    const inputElement = gameDomElementContainer.querySelector('input');
-    if (!inputElement) throw new Error('Expected input element to be found');
+    const formElement = gameDomElementContainer.querySelector('form');
+    if (!formElement) throw new Error('Expected form element to be found');
 
     // Check visibility of the DOM element is visible by default, if it should be visible
     // on the screen.
     runtimeScene.renderAndStep(1000 / 60);
-    expect(inputElement.style.display).to.be('initial');
+    expect(formElement.style.display).to.be('initial');
 
     // Check visibility of the DOM element is updated at each frame,
     // according to the object visibility.
     object.hide(true);
     runtimeScene.renderAndStep(1000 / 60);
-    expect(inputElement.style.display).to.be('none');
+    expect(formElement.style.display).to.be('none');
 
     object.hide(false);
     runtimeScene.renderAndStep(1000 / 60);
-    expect(inputElement.style.display).to.be('initial');
+    expect(formElement.style.display).to.be('initial');
 
     // Check visibility of the DOM element is updated at each frame,
     // according to the layer visibility.
     runtimeScene.getLayer('').show(false);
     runtimeScene.renderAndStep(1000 / 60);
-    expect(inputElement.style.display).to.be('none');
+    expect(formElement.style.display).to.be('none');
 
     runtimeScene.getLayer('').show(true);
     runtimeScene.renderAndStep(1000 / 60);
-    expect(inputElement.style.display).to.be('initial');
+    expect(formElement.style.display).to.be('initial');
 
     // Clean up - not mandatory but to avoid overloading the testing browser.
     runtimeScene.unloadScene();
@@ -205,31 +208,31 @@ describe('gdjs.TextInputRuntimeObject (using a PixiJS RuntimeGame with DOM eleme
       object,
     } = await setupObjectAndGetDomElementContainer();
 
-    const inputElement = gameDomElementContainer.querySelector('input');
-    if (!inputElement) throw new Error('Expected input element to be found');
+    const formElement = gameDomElementContainer.querySelector('form');
+    if (!formElement) throw new Error('Expected input element to be found');
 
     // Check visibility of the DOM element is visible by default, if it should be visible
     // on the screen.
     runtimeScene.renderAndStep(1000 / 60);
-    expect(inputElement.style.display).to.be('initial');
+    expect(formElement.style.display).to.be('initial');
 
     // Check visibility of the DOM element is updated at each frame,
     // according to the object position of screen.
     object.setX(-500); // -500 + 300 (object default width) = -200, still outside the camera.
     runtimeScene.renderAndStep(1000 / 60);
-    expect(inputElement.style.display).to.be('none');
+    expect(formElement.style.display).to.be('none');
 
     object.setWidth(600); // -500 + 600 = 100, inside the camera
     runtimeScene.renderAndStep(1000 / 60);
-    expect(inputElement.style.display).to.be('initial');
+    expect(formElement.style.display).to.be('initial');
 
     runtimeScene.getLayer('').setCameraX(900);
     runtimeScene.renderAndStep(1000 / 60);
-    expect(inputElement.style.display).to.be('none');
+    expect(formElement.style.display).to.be('none');
 
     runtimeScene.getLayer('').setCameraX(400);
     runtimeScene.renderAndStep(1000 / 60);
-    expect(inputElement.style.display).to.be('initial');
+    expect(formElement.style.display).to.be('initial');
 
     // Clean up - not mandatory but to avoid overloading the testing browser.
     runtimeScene.unloadScene();