PIXI TextInput Demo

import { Application } from 'pixi.js'
import TextInput from '../text-input.js'

let app
let input

function init(){
    app = new Application(
        { 
            width: 1000,
            height: 600,
            antialias: true,
            backgroundColor: 0xffffff,
            resolution: window.devicePixelRatio || 1
        }
    )
    document.getElementById('canvas-placeholder').appendChild(app.view)


    input = new TextInput({
        input: {
            fontFamily: 'Arial',
            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
    app.stage.addChild(input)

    setupDemoControls()
}