InputBase.call(this, options.width || (options.background ? options.background.width : 150), options.height || (options.background ? options.background.height : 20), options.tabIndex || 0, options.tabGroup || 0)

I added brackets to ternary operator, otherwise it wont work

Btw it seems like TextInput doesnt work with latest PIXIjs (4.7.0)

const mockScroll = new PUXI.ScrollWidget({
  scrollY: true,
  scrollX: true,
  scrollBars: true,
  height: 600
}).setLayoutOptions(
  new PUXI.FastLayoutOptions({
    width: 0.5,
    height: 0.25,
    x: 0.5,
    y: 0.7,
    anchor: PUXI.FastLayoutOptions.CENTER_ANCHOR
  })
).setBackground(0xffaabb)
  .setBackgroundAlpha(0.5)
  .addChild(new PUXI.Button({ text: 'Button 1' }).setBackground(0xff))
  .addChild(new PUXI.Button({ text: 'Button 2' })
    .setLayoutOptions(new PUXI.FastLayoutOptions({ x: 0, y: 50 }))
    .setBackground(0xff))
  .addChild(new PUXI.Button({ text: 'Button 3' })
    .setLayoutOptions(new PUXI.FastLayoutOptions({ x: 0, y: 250 }))
    .setBackground(0xff))

I created a scrollwidget just like the demo shows. but the height is always 0, i can't get the scrollwidget to scroll a bit. I don't see any instruction on how to use the widget correctly. please kindly help

Sorry, I seem to have created the issue in the wrong project!

I previously use PIXI.UI.Container for some offeset stuff, and now PIXI.UI.TextInput isn't clickable at all from container

here is example
https://codepen.io/dorogoi/pen/yvwRav

Hello,

Thanks for the pixi-ui, just loved!
Could you please tell me how to create a textured button, I couldn't understand how to change the background of the button when the mouse is hovering it or clicking it.

Thank you.

Mauricio.

I developed it with typeScript, but I didn't find that you provided a definition file. Can you help me?Thank you so much!~ : )

Hi, bQvle. First of all thanks for good library. Currently i'm developing easy game with pixi-typescript and i would like to make ui with your tool. Can i generate typescript definition of your library? Thanks.

Hey, guys! First of all: amazing project, I love the idea!

I was trying to give it a quick test, but alas, I couldn't find any demo page for it to get an impression of its capabilities.
Also, neither the example code in README works (it has syntax problems), nor did I manage to run the /example/ code in an online playground. And there are no actual instructions on how to install/add the package to an existing project.
I'm not well familiar with pixijs so I might be missing some obvious stuff here. npm i puxi.js and then import default or all from "puxi.js"? what version of pixijs is required?

It'd be cool to have some online editable demo for a quick overview and a short intro to pixi-ui installation and its concepts!

Thanks!

Hello.

1. Enter button does not consider multiline options.
   if (e.which === 13) { insertTextAtCaret('\n'); e.preventDefault(); return; }

2. Can you add event for enter button?
   Now i try to add new option

var keyDownEvent = function (e) { self.lastKeyDown = e.which; ... }
And using event "change" for catch when enter down.

this.chatInput.on("change", function (data) { if(this.lastKeyDown === 13){ chat.prevSend(); } })

I can't find it on NPM...

Maybe it's not published yet? Is it ready to be used?

when suppot pixi v6

class AnchorLayoutOptions extends LayoutOptions {
constructor(options) {
super(options.width, options.height);
this.anchorLeft = options.anchorLeft || 0;
this.anchorTop = options.anchorTop || 0;
this.anchorBottom = options.anchorBottom || 0;
this.anchorRight = options.anchorRight || 0;
this.horizontalAlign = options.horizontalAlign || ALIGN.LEFT;
this.verticalAlign = options.verticalAlign || ALIGN.CENTER;
}

because ALIGN.TOP value is 0, so when i set ALIGN.TOP to verticalAlign, here will be change to ALIGN.CENTER.

here is work.
class AnchorLayoutOptions extends LayoutOptions {
constructor(options) {
super(options.width, options.height);
this.anchorLeft = options.anchorLeft || 0;
this.anchorTop = options.anchorTop || 0;
this.anchorBottom = options.anchorBottom || 0;
this.anchorRight = options.anchorRight || 0;
if (options.horizontalAlign === 0) {
this.horizontalAlign = 0;
} else {
this.horizontalAlign = options.horizontalAlign || ALIGN.LEFT;
}

  if (options.verticalAlign === 0) {
    this.verticalAlign = 0;
  } else {
    this.verticalAlign = options.verticalAlign || ALIGN.CENTER;
  }
}

}

在设置ALIGN.TOP时，由于ALIGN.TOP为0，因此，会将verticalAlign改为ALIGN.CENTER

Fresh checkout, on Windows 10, NodeJS 10.16.0, and after an npm i

dave.moore@LAP00281 C:\projects\webgl\3rdparty-external\pixi-ui
$ npm run build

[email protected] build C:\projects\webgl\3rdparty-external\pixi-ui
rollup -c && lerna run extract-api --no-bail

packages\tween\src\index.ts → packages\tween\lib\puxi-tween.cjs, packages\tween\lib\puxi-tween.mjs...
created packages\tween\lib\puxi-tween.cjs, packages\tween\lib\puxi-tween.mjs in 228ms

packages\tween\src\index.ts → packages\tween\dist\puxi-tween.js...
created packages\tween\dist\puxi-tween.js in 127ms

packages\core\src\index.ts → packages\core\lib\puxi-core.cjs, packages\core\lib\puxi-core.mjs...
created packages\core\lib\puxi-core.cjs, packages\core\lib\puxi-core.mjs in 1.3s

packages\core\src\index.ts → packages\core\dist\puxi-core.js...
created packages\core\dist\puxi-core.js in 897ms

bundles\puxi.js\src\index.ts → bundles\puxi.js\lib\puxi.cjs, bundles\puxi.js\lib\puxi.mjs...(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
@puxi/core (imported by bundles\puxi.js\src\index.ts)
@puxi/tween (imported by bundles\puxi.js\src\index.ts)
created bundles\puxi.js\lib\puxi.cjs, bundles\puxi.js\lib\puxi.mjs in 26ms

bundles\puxi.js\src\index.ts → bundles\puxi.js\dist\puxi.js...
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
@puxi/core (imported by bundles\puxi.js\src\index.ts)
@puxi/tween (imported by bundles\puxi.js\src\index.ts)
(!) Missing global variable names
Use output.globals to specify browser global variable names corresponding to external modules
@puxi/core (guessing 'core')
@puxi/tween (guessing 'tween')
created bundles\puxi.js\dist\puxi.js in 23ms
lerna notice cli v3.20.2
lerna info Executing command in 3 packages: "npm run extract-api"
lerna info run Ran npm script 'extract-api' in '@puxi/tween' in 3.0s:

@puxi/[email protected] extract-api C:\projects\webgl\3rdparty-external\pixi-ui\packages\tween
tsc; api-extractor run

error TS6053: File ';.ts' not found.
error TS6053: File 'api-extractor.ts' not found.
error TS6053: File 'run.ts' not found.

lerna info run Ran npm script 'extract-api' in '@puxi/core' in 2.9s:

@puxi/[email protected] extract-api C:\projects\webgl\3rdparty-external\pixi-ui\packages\core
tsc; api-extractor run

error TS6053: File ';.ts' not found.
error TS6053: File 'api-extractor.ts' not found.
error TS6053: File 'run.ts' not found.

lerna info run Ran npm script 'extract-api' in 'puxi.js' in 0.9s:

[email protected] extract-api C:\projects\webgl\3rdparty-external\pixi-ui\bundles\puxi.js
api-extractor run

lerna ERR! Received non-zero exit code 2 during execution
lerna success run Ran npm script 'extract-api' in 3 packages in 6.8s:
lerna success - puxi.js
lerna success - @puxi/core
lerna success - @puxi/tween
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: rollup -c && lerna run extract-api --no-bail
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

$ npm run test

[email protected] test C:\projects\webgl\3rdparty-external\pixi-ui
mocha -r jsdom-global/register --exit

(node:7832) ExperimentalWarning: The fs.promises API is experimental

Error: Cannot find module '@pixi/filter-drop-shadow'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:690:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object. (C:\projects\webgl\3rdparty-external\pixi-ui\packages\core\lib\puxi-core.cjs:14:24)
at Module._compile (internal/modules/cjs/loader.js:776:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:690:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object. (C:\projects\webgl\3rdparty-external\pixi-ui\packages\core\test\layout-manager\AnchorLayout.test.js:7:6)
at Module._compile (internal/modules/cjs/loader.js:776:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:690:17)
at require (internal/modules/cjs/helpers.js:25:18)
at C:\projects\webgl\3rdparty-external\pixi-ui\node_modules\mocha\lib\mocha.js:314:36
at Array.forEach ()
at Mocha.loadFiles (C:\projects\webgl\3rdparty-external\pixi-ui\node_modules\mocha\lib\mocha.js:311:14)
at C:\projects\webgl\3rdparty-external\pixi-ui\node_modules\mocha\lib\mocha.js:347:12
at new Promise ()
at Mocha.loadFilesAsync (C:\projects\webgl\3rdparty-external\pixi-ui\node_modules\mocha\lib\mocha.js:346:12)
at singleRun (C:\projects\webgl\3rdparty-external\pixi-ui\node_modules\mocha\lib\cli\run-helpers.js:107:15)
at exports.runMocha (C:\projects\webgl\3rdparty-external\pixi-ui\node_modules\mocha\lib\cli\run-helpers.js:144:11)
at Object.exports.handler (C:\projects\webgl\3rdparty-external\pixi-ui\node_modules\mocha\lib\cli\run.js:306:11)
at Object.runCommand (C:\projects\webgl\3rdparty-external\pixi-ui\node_modules\mocha\node_modules\yargs\lib\command.js:242:26)
at Object.parseArgs [as _parseArgs] (C:\projects\webgl\3rdparty-external\pixi-ui\node_modules\mocha\node_modules\yargs\yargs.js:1096:28)
at Object.parse (C:\projects\webgl\3rdparty-external\pixi-ui\node_modules\mocha\node_modules\yargs\yargs.js:575:25)
at Object.exports.main (C:\projects\webgl\3rdparty-external\pixi-ui\node_modules\mocha\lib\cli\cli.js:68:6)
at Object. (C:\projects\webgl\3rdparty-external\pixi-ui\node_modules\mocha\bin\mocha:133:29)
at Module._compile (internal/modules/cjs/loader.js:776:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test: mocha -r jsdom-global/register --exit
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

I'm trying to use puxi in app created with create-react-app, but it can only work with .js extension, so here's what I did to make it work for me:

cp node_modules/puxi.js/lib/puxi.cjs node_modules/puxi.js/lib/puxi.js

then import * as PUXI from "puxi.js/lib/puxi.js".

Just to be clear solution I propose is just to rename .cjs to .js as it is in pixi.js

I'm using pixiui with pixijs 4.7.0
And text input do not intercept events (focus and keydown)

I'm trying to execute this simple code:

var scrollingContainer = new PIXI.UI.ScrollingContainer({ scrollY: true, width: 100, height: 200 });

this.scrollingContainer.addChild(new PIXI.Container());

The last line throws an error:

Container.js:70 Uncaught TypeError: Cannot read property 'parent' of undefined
    at Container.addChild (Container.js:70)
    at ScrollingContainer.UIBase.addChild (UIBase.js:321)
    at ScrollingContainer.addChild (ScrollingContainer.js:103)

If I try to add a sprite instead of a container, everything works as expected - no errors are thrown.

In DynamicText.js you refer to _width on line 100 but define width for centering.

I'm trying to use the ellipsis but I don't get it to work. There isn't any documentation around it.

What I'm trying to achieve is something like this:
https://stackoverflow.com/questions/3922739/limit-text-length-to-n-lines-using-css

Click events do not work on mobile devices. Perhaps requires a new feature; Is there a guide to contribute code to PIXI-UI

calc-property like this :

subComp.width = "100% - 20"

means the width is parent's width - 20px

I expect PUXI.TextWidget to be able to set colors with PIXI.TextStyle as well as PIXI.Text.
However, PUXI.TextWidget always appears black.

here is example.
https://jsfiddle.net/powder0326/rkabgtfw/47/

I just wanted to know if this project is at a usable state right now or if it is supposed to work at all.

I have just tried to test the ScrollingContainer with some texts on it and it is giving me some errors saying "updateTransform" is not a function.

On the other hand, what PIXI version am I supposed to use?

Thanks.

I am trying to get the position (x,y) of a ui element (button, text, etc) so i can work out when a virtual pointer collided with it.

I can easily get the width and the height of any ui elements but the x,y do not seem to be exposed.

1. Is there a way to get the x and y coordinate of a ui element?
2. is there a way to perform a hit test?

If not I would vote for a feature request 😄

The scrolling container should probably localize the offset vector here
https://github.com/pixijs/pixi-ui/blob/master/src/ScrollingContainer.js#L282

Otherwise having a scrolling container which is rotated will not work properly.
I have a scrolling container rotate 90º (well actually it is the whole screen but it doesn't matter) and the scroller drag x, y are switched because they are not rotated with the container.

Humm, I don't really have a strong suggestion about how to localize the vector.
I haven't found anything in PIXI to do so. Only 2 options came to my mind:

• DisplayObject.toLocal but it applies position transforms too
• Making a copy of the innerContainer worldTransform and setting tx, ty to 0 so I can transform the vector to local space.

PS: I'm currently using something similar to the first option as a workaround

function localizeVector(localDisplayObject, globalVector) {
    const globalPosition = localDisplayObject.getGlobalPosition();
    const globalPoint = {
        x: globalVector.x + globalPosition.x,
        y: globalVector.y + globalPosition.y
    };
    return localDisplayObject.toLocal(globalPoint);
}

Helllo.

I'm trying to figure out how that library works, and don't understand one thing:
Imagine that you have a draggable button and droppable container on whitch that button is dragging.
At first moment, the button can capture on("draggablestart"), then on("draggablemove") while moving, and after mouseup i'm awaiting for on("draggableend"), but a container fires his onDrop method, set item.dragging = false; and the button doesn't emit nothing. This leads to

this.drag.onDragEnd = function (e) {
if (this.dragging) { .... }

not to execute and not to fire self.emit("draggableend", e);

Is that a normal situation? how can i check if button was dropped\draggedend ? or maybe it's possible to add item.emit("draggableend"); after 458 line in UIBase.js?

Sorry, for my bad english.

many games require lists, such as leaderboards, friend lists, etc.

It works on Chrome but in Firefox and Edge pressing keys does not result in input.

It looks to me like the addEventListener for the temp input is being added correct on 3985 of pixi-ui.js
But that the associated inputEvent never fires.

I think it's possibly because the this.blur function which removes event listeners is called directly after they've been set up.

Maybe blur is being called in the wrong place?