Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improvement features for Input text box #7308

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Improvement features for Input text box #7308

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1096ee0
WIP + NEEDTOFIX : text-align
NeylMahfouf2608 Jan 14, 2025
28e578e
small fix on missed return statements (does not change behavior)
NeylMahfouf2608 Jan 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions Extensions/TextInput/JsExtension.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,18 @@ module.exports = {
objectContent.disabled = newValue === '1';
return true;
}
else if(propertyName === 'maxLength')
{
objectContent.maxLength = newValue;
}
else if (propertyName === 'padding')
{
objectContent.padding = newValue;
}
else if(propertyName === 'textAlignement')
{
objectContent.textAlignement = newValue;
}
ClementPasteau marked this conversation as resolved.
Show resolved Hide resolved

return false;
};
Expand Down Expand Up @@ -200,6 +212,30 @@ module.exports = {
.setLabel(_('Width'))
.setGroup(_('Border appearance'));

objectProperties
.getOrCreate('padding')
.setValue((objectContent.padding || 0).toString())
.setType('number')
.setLabel(_('Padding'))
.setGroup(_('Border appearance'));

objectProperties
.getOrCreate('maxLength')
.setValue(objectContent.maxLength || 20)
.setType('number')
.setLabel(_('Max length'))
.setGroup(_('Border appearance'));

objectProperties
.getOrCreate('textAlignement')
.setValue(objectContent.textAlignement || 'left')
.setType('choice')
.addExtraInfo('left')
.addExtraInfo('right')
.addExtraInfo('center')
.setLabel(_('text Alignement'))
.setGroup(_('Border appearance'));

return objectProperties;
};
textInputObject.content = {
Expand All @@ -216,6 +252,9 @@ module.exports = {
borderWidth: 1,
readOnly: false,
disabled: false,
padding: 0,
textAlignement: 'left',
maxLength: '20',
};

textInputObject.updateInitialInstanceProperty = function (
Expand Down
38 changes: 37 additions & 1 deletion Extensions/TextInput/textinputruntimeobject-pixi-renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,13 @@ namespace gdjs {
search: 'search',
};

const userFriendlyToHtmlAlignement =
{
left: 'left',
center: 'center',
right: 'right',
}

const formatRgbAndOpacityToCssRgba = (
rgbColor: [float, float, float],
opacity: float
Expand Down Expand Up @@ -59,6 +66,11 @@ namespace gdjs {
this._input.style.pointerEvents = 'auto'; // Element can be clicked/touched.
this._input.style.display = 'none'; // Hide while object is being set up.
this._input.style.boxSizing = 'border-box'; // Important for iOS, because border is added to width/height.
this._input.maxLength = this._object.getMaxLength();
this._input.style.padding = this._object.getPadding() + 'px';
this._input.style.textAlign = this._object.getTextAlignement();



this._input.addEventListener('input', () => {
if (!this._input) return;
Expand All @@ -83,6 +95,9 @@ namespace gdjs {
this.updateBorderWidth();
this.updateDisabled();
this.updateReadOnly();
this.updateTextlignement();
this.updateMaxLength();
this.updatePadding();

this._runtimeGame
.getRenderer()
Expand Down Expand Up @@ -216,6 +231,9 @@ namespace gdjs {
this._input.style.height = heightInContainer + 'px';
this._input.style.transform =
'rotate3d(0,0,1,' + (this._object.getAngle() % 360) + 'deg)';
this._input.style.display = 'initial';
this._input.style.padding = this._object.getPadding() + 'px';
this._input.style.textAlign = this._object.getTextAlignement();

// Automatically adjust the font size to follow the game scale.
this._input.style.fontSize =
Expand All @@ -224,7 +242,6 @@ namespace gdjs {
'px';

// Display after the object is positioned.
this._input.style.display = 'initial';
}

updateString() {
Expand Down Expand Up @@ -307,6 +324,25 @@ namespace gdjs {
this._input.readOnly = this._object.isReadOnly();
}

updateMaxLength() {
if(!this._input) return;

this._input.maxLength = this._object.getMaxLength();
}

updatePadding() {
if(!this._input) return;

this._input.style.padding = this._object.getPadding() + 'px';
}

updateTextlignement() {
if (!this._input) return;

const newTextAlignement = userFriendlyToHtmlAlignement[this._object.getTextAlignement()] || 'right';
this._input.style.textAlign = newTextAlignement;
}

isFocused() {
return this._input === document.activeElement;
}
Expand Down
71 changes: 69 additions & 2 deletions Extensions/TextInput/textinputruntimeobject.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,15 @@ namespace gdjs {
'search',
'text area',
] as const;
const supportedtextAlignement = [
'left',
'center',
'right',
] as const;

type SupportedInputType = typeof supportedInputTypes[number];

type SupportedInputType = typeof supportedInputTypes[number];
type SupportedtextAlignement = typeof supportedtextAlignement[number];
const parseInputType = (potentialInputType: string): SupportedInputType => {
const lowercasedNewInputType = potentialInputType.toLowerCase();

Expand All @@ -22,6 +28,16 @@ namespace gdjs {
return 'text';
};

const parseTextAlignement = (potentialTextAlignement: string): SupportedtextAlignement => {
const lowercasedNewTextAlignement = potentialTextAlignement.toLowerCase();

// @ts-ignore - we're actually checking that this value is correct.
if (supportedtextAlignement.includes(lowercasedNewTextAlignement))
return potentialTextAlignement as SupportedtextAlignement;

return 'left';
};

/** Base parameters for {@link gdjs.TextInputRuntimeObject} */
export interface TextInputObjectData extends ObjectData {
/** The base parameters of the TextInput */
Expand All @@ -34,6 +50,9 @@ namespace gdjs {
textColor: string;
fillColor: string;
fillOpacity: float;
padding : integer;
textAlign : SupportedtextAlignement;
maxLength : integer;
borderColor: string;
borderOpacity: float;
borderWidth: float;
Expand Down Expand Up @@ -84,6 +103,9 @@ namespace gdjs {
private _textColor: [float, float, float];
private _fillColor: [float, float, float];
private _fillOpacity: float;
private _padding : integer;
private _textAlign : SupportedtextAlignement;
private _maxLength : integer;
private _borderColor: [float, float, float];
private _borderOpacity: float;
private _borderWidth: float;
Expand All @@ -107,12 +129,15 @@ namespace gdjs {
this._fillColor = gdjs.rgbOrHexToRGBColor(objectData.content.fillColor);
this._fillOpacity = objectData.content.fillOpacity;
this._borderColor = gdjs.rgbOrHexToRGBColor(
objectData.content.borderColor
objectData.content.borderColor
);
this._borderOpacity = objectData.content.borderOpacity;
this._borderWidth = objectData.content.borderWidth;
this._disabled = objectData.content.disabled;
this._readOnly = objectData.content.readOnly;
this._padding = objectData.content.padding;
this._textAlign = objectData.content.textAlign;
this._maxLength = objectData.content.maxLength;

this._renderer = new gdjs.TextInputRuntimeObjectRenderer(
this,
Expand Down Expand Up @@ -189,6 +214,19 @@ namespace gdjs {
if (oldObjectData.content.readOnly !== newObjectData.content.readOnly) {
this.setReadOnly(newObjectData.content.readOnly);
}
if(oldObjectData.content.maxLength !== newObjectData.content.maxLength)
{
this.SetMaxLength(newObjectData.content.maxLength);
}
if(oldObjectData.content.textAlign !== newObjectData.content.textAlign)
{
this._textAlign = newObjectData.content.textAlign;
//this.setTextAlignement(newObjectData.content.textAlign);
}
if(oldObjectData.content.padding !== newObjectData.content.padding)
{
this.SetPadding(newObjectData.content.padding);
}
return true;
}

Expand Down Expand Up @@ -501,6 +539,35 @@ namespace gdjs {
return this._renderer.isFocused();
}

getMaxLength() : integer {
return this._maxLength;
}
SetMaxLength(value: integer)
{
this._maxLength = value;
this._renderer.updateMaxLength();
}
getPadding() : integer {
return this._padding;
}
SetPadding(value: integer)
{
this._padding = value;
}

getTextAlignement() : SupportedtextAlignement
{
return this._textAlign;
}

setTextAlignement(newTextAlignement: string) {
const lowercasedNewTextAlignement = newTextAlignement.toLowerCase();
if (lowercasedNewTextAlignement === this._textAlign) return;

this._textAlign = parseTextAlignement(lowercasedNewTextAlignement);
this._renderer.updateTextlignement();
}

focus(): void {
if (!this.isFocused()) {
// If the input was not previously focused, reset input manager because there is
Expand Down
Loading