mwni / pixi-text-input Goto Github PK

I'm trying to use this in an application with viewport attached for canvas pan/zoom functionality.
How do I get this text field to respond to viewport zooming and panning?

// create viewport
        const viewport = new Viewport({
            screenWidth: window.innerWidth,
            screenHeight: window.innerHeight,
            worldWidth: 1000,
            worldHeight: 1000,

            interaction: this.app.renderer.plugins.interaction // the interaction module is important for wheel to work properly when renderer.view is placed or scaled
        })

        // add the viewport to the stage
        this.app.stage.addChild(viewport)

        // activate plugins
        viewport
            .drag()
            .pinch()
            .wheel()
            .decelerate()


        // ensure scrolling over canvas element does not scroll page
        this.app.view.addEventListener("wheel", function(evt){
            evt.preventDefault();
        })

        // add a red box
        const sprite = viewport.addChild(new PIXI.Sprite(PIXI.Texture.WHITE))
        sprite.tint = 0xff0000
        sprite.width = sprite.height = 100
        sprite.position.set(0, 0)


        // add input
        // @ts-ignore
        const input = new TextInput({
            input: {
                fontSize: '36px',
                padding: '12px',
                width: '500px',
                color: '#26272E'
            },
            box: {
                default: {fill: 0xE8E9F3, rounded: 12, stroke: {color: 0xCBCEE0, width: 3}},
                focused: {fill: 0xE1E3EE, rounded: 12, stroke: {color: 0xABAFC6, width: 3}},
                disabled: {fill: 0xDBDBDB, rounded: 12}
            }
        })

        input.placeholder = 'Enter your Text...'
        input.x = 500
        input.y = 300
        input.pivot.x = input.width/2
        input.pivot.y = input.height/2
        this.app.stage.addChild(input)

TextInput appears to be 'eating' mouse wheel events. Unfocussed text does not scroll (using pixi-wheel.js to scroll a container holding the input object). Wheel works when input is focussed, but no wheel events reach the container. When unfocussed, no wheel events reach the container and text does not scroll.

Hi!
I try to use Your module for login form in my game, I noticed that there is no way to set different input types, for example "password".
Having looked at the code, I decided that adding it would not be difficult.
For example update method:
_createDOMInput(type){
if(this._multiline){
this._dom_input = document.createElement('textarea')
this._dom_input.style.resize = 'none'
}else{
this._dom_input = document.createElement('input')

  this._dom_input.type = type
}

and set type as constructor parameter
styles, type

TextInput.anchor seems to be missing

I've been trying to get the text input to work in my project.

"pixi-text-input": "^1.0.6"
"pixi.js-legacy": "5.3.8"

I had to tweak the import as per the first issue thread:
import TextInput from "pixi-text-input"

and when creating the text input field with:
let t1 = new TextInput({...
that seemed to be fine.

However, when I add it to the stage, I get this error:
Uncaught TypeError: (intermediate value).render is not a function
at TextInput.render (pixi-input-test.js:70784:11)
at Container.render (pixi-input-test.js:17434:34)
at Renderer.render (pixi-input-test.js:11239:23)
at Application.render (pixi-input-test.js:45510:23)
at TickerListener.emit (pixi-input-test.js:21105:25)
at Ticker.update (pixi-input-test.js:21560:37)
at Ticker._tick (pixi-input-test.js:21310:23)

Any ideas how to resolve?

Steps to reproduce:

1. Write some text in input
2. Place text cursor in the middle of text
3. Defocus input by clicking outside
4. Click again on input trying to place text cursors somewhere else

Current behavior:

Text cursor is placed in original location, in the middle

Expected behavior:

Text cursor is placed where mouse cursor clicked

Here's git showing this behavior:

https://giphy.com/gifs/hosFDTCEf9Zhldlf7O

What happen :
On iOS Chrome / Safari 13.5 on the first click it take the focus but the it didn't open the keyboard

Behavior expected :
We click it take the focus and open the keyboard

What we try :
use focus() one or more time on touch
use select() one or more time on touch

Note :
The bug is easily reproducible on the demo link
It works as expected on Android.

Thanks in advance.

Just flagging this as an issue for anyone else that runs across it!

The framerate will take a massive nosedive if you have dozens of text inputs on screen and you're dragging them inside a container; this is because of the bounds calculation that happens in the _update. There's probably a more efficient way to make this happen, though I don't have any suggestions at this time.

It would be great to add a dispose methods to cleanup the dom, listeners etc.. from memory

Hello.

Please add max length param.

Thank you for your work.

When I'm writing the username the placeholder is not removed. See the screenshot below

Code:

const username_input = new PIXI.TextInput({
        input: {
            fontSize: '38px',
            padding: '14px',
            width: '400px',
            color: '#26272E'
        }, 
        box: {
            default: {fill: 0xFFFFFF, rounded: 12, stroke: {color: 0xC8C8C8, width: 3}}
        }
    });
username_input.x = app.screen.width/2-200;
username_input.y = app.screen.height/2;

username_input.placeholder = 'Username'

app.stage.addChild(username_input);

I'd like to set following attributes so all spellcheck etc. features are disabled for input:

        autocorrect: 'off',
        autocomplete: 'off',
        autocapitalize: 'off',
        spellcheck: false

Unfortunately these cannot be set as styles but attributes of input. Is it possible? Could you please add this feature?

Text alignment doesn't work in the Pixi.Text surrogate, probably because HTML Input style is "textAlign" and for Pixi.Text just "align". I can set textAlign in the input options and it works, but if I have substituteText set true, the surrogate just goes to the left when the text input is unfocused.

It would probably be easy to fix by adding an exception for it to the _deriveSurrogateStyle?

Hello,

Thank you for the TextInput ! :)

How can I make this work:

                const input = new TextInput(input_style,box_styles);
                input.placeholder = 'Search feature';
                input.x = this.object.position.x;
                input.y = this.object.position.y + index * viewport.gridSize * 2;
                input.height = viewport.gridSize * 2;
                input.width = this.object.width;
                viewport.addChild(input);
                input.on('mousedown', (e) => {
                    console.log('mousedown in text');
                    e.stopPropagation();
                });
                input.on('mouseup', (e) => {
                    console.log('mouseup in text');
                    e.stopPropagation();
                });

the latest published package.json:

{
  "name": "pixi-text-input",
  "version": "1.0.4",
  "description": "Plugin for pixi.js which provides a convenient way of adding a text input to the pixijs-stage.",
  "main": "PIXI.TextInput.js",
  "dependencies": {
    "pixi.js": "^4.8.0"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Mwni/PIXI.TextInput.git"
  },
  "keywords": [
    "pixi",
    "pixi.js",
    "input",
    "text",
    "ui"
  ],
  "author": "Mwni",
  "license": "MIT"
}

pixi.js should be a peerDependency (and changed to include v5 support). as-is, this package installs its own v4 pixi.js, and doesn't work when used from v5 pixi.js.

Any way to import this into an Angular 6 project?

With TextInput I can:

• backspace any character
• select all with cmd-a (ctrl-A on windows) and then hitting backspace erases everything entered

Then I set restrict to '[a-zA-Z0-9\ ]+'. This causes:

• backspace works but for the first entered character. I cannot remove that one with backspace. I just have to select everything and start typing
• select all and then hitting backspace doesn't do anything. Select all and then typing does work though but is less intuitive.

I tried adding \b to the regexp but this doesn't solve the issue. Something prevents backspace to work properly when using the restrict option.

Please host your demos on github or some other reliable provider (codepen?)

The current ones are 404ing :)

Hello

Is NPM package updated to latest version?
https://www.npmjs.com/package/pixi-text-input?activeTab=versions

Thank you for this plugin

When the control is focused the font size is slightly smaller than when it is not.
We're using multiline mode

Where I can find typings for this to use with typescript?

Hi @Mwni, thanks for the effort on this library, really useful :)

Do you plan to support vertical alignment?

Sadly your plugin for PIXI.js has no typescript support at all. Unlike PIXI.js, I am not able to include it into my ts project and get it working...
It would be great if some kind of support could be added

_deriveSurrogateText on line 423 needs to be updated to handle password type. The following is the code I used to handle it for my project:
_proto._deriveSurrogateText = function _deriveSurrogateText() {
var txt = this._dom_input.value;
if(this._dom_input.value.length === 0)
{
txt = this._placeholder;
}else if(this._dom_input.type == 'password'){
txt = "•".repeat(this._dom_input.value.length);
}
return txt;
};

Right now the input becomes very blurry on MacOS when input is not focused

It would be really easy and convenient if this is exported as npm package and to be able to import it in a project via the esnext import statement for example

Hi. does this plugin work with pixijs V3? this is for which version of pixijs?

Hello

When using css textIndent, text in input form start jump to beginning when unfocus form.
https://www.pixiplayground.com/#/edit/ikn~oQk~V1nCYrVIFm~XI

And placeholder did not consider this prop.

Is it possible to change the width after an input has been created? I've tried several approaches but not sure if it's possible.

When you press back arrow ( to delete the previous character ) the onkeydown is not called.

Hi. I download and modify this code for my project =)

Modify functions:

_createSurrogate()

this._surrogate_hitbox.eventMode = 'static';
if (PIXI.VERSION[0] != '7') this._surrogate_hitbox.interactive = true;

_updateSurrogateHitbox(bounds)

this._surrogate_hitbox.eventMode = this._disabled?'auto':'static';
 if (PIXI.VERSION[0] != '7') this._surrogate_hitbox.interactive = !this._disabled;

_createSurrogate()

this._surrogate_hitbox.eventMode = 'static';
if (PIXI.VERSION[0] != '7') this._surrogate_hitbox.interactive = true;

/*some code....*/        

this.addChild(this._surrogate_mask, this._surrogate, this._surrogate_hitbox);

I'm modify original code and all working. This is not the best solution, but for now it suits me.

before use!

window.PIXI = PIXI;

And declare window.PIXI in index.d.ts!
declare global { interface Window { PIXI: any } }

textinput.ts

When you use tab in mobile mode on Chrome desktop then you cant focus anymore by clicking on the field.

How to replace input with *'s(or any other password character, eg black dot •)

I have installed package using npm install. As a result I have errors. As you see in screenshot some properties are marked red in pixi-textinput-v5.

And the error message says "Duplicate identifier 'substituteText'.ts(2300)". The same is for placeholder, disabled, maxLength, restrict.

When text field get's focus, the text turns black. Inconvenient if the unfocussed text is white on a black background- everything disappears.

Hello.

Is option to make multiline input form?

Needs to support current major Pixi version i.e v6

when using some combinaison the focus position of the text is different than the blur position

for example with

			input: {
				lineHeight: '40px',
				fontSize: '14px',
				padding: '16px',
				paddingTop: '18px',
				paddingLeft: '14px',
				paddingBottom: '8px',
				width: '200px',
				color: '#5b1289',
			},

I don't know how to get the text...