Get parent width\height on added

[clifftm]

Hello.

I'v got a trouble and don't understand how to fix it.

I need to store a percent of width\height of a child object according to its parent. Those children can change its parents. So every child do that on a constructor:

constructor(){
   this.on('added', onAdded, this)
}

onAdded(){
   this.percentWidth = this.width / this.parent.width;
   this.percentHeight = this.height / this.parent.height;
}

When i'v got small number of children everything is ok. But if i am trying to add 30000+ children to a container\stage, this.parent.width begin to recalculate its bounds in exponential time, and causes page to hang.

Overriding _calculateBounds won't help because parent.width will go again through 30000 children and calculate 30000*30000 times its bound.

when calling addChild, a parent container do

//core/display/Container.js
addChild(child)
{
    ...

    this._boundsID++;

and causes to execute calculateBounds again even if skipUpdate = true

//core/display/DisplayObject.js

getBounds(skipUpdate, rect)
    {
        if (!skipUpdate)
        {
            if (!this.parent)
            {
                this.parent = this._tempDisplayObjectParent;
                this.updateTransform();
                this.parent = null;
            }
            else
            {
                this._recursivePostUpdateTransform();
                this.updateTransform();
            }
        }
        if (this._boundsID !== this._lastBoundsID)
        {
            this.calculateBounds(); 
        }

You can see that online at https://pixijs.io/examples/#/basics/container.js and paste this

var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
document.body.appendChild(app.view);

var container = new PIXI.Container();

app.stage.addChild(container);

var texture = PIXI.Texture.fromImage('required/assets/basics/bunny.png');

function bug(){
  let w = 0; //this.parent.width;
  let h = 0; //this.parent.height;
}


for (var i = 0; i < 30000; i++) {
    var bunny = new PIXI.Sprite(texture);
    bunny.on('added',bug,bunny);
    bunny.anchor.set(0.5);
    bunny.x = Math.random()*800;
    bunny.y = Math.random()*600;
    container.addChild(bunny);
}

// Center on the screen
container.x = (app.screen.width - container.width) / 2;
container.y = (app.screen.height - container.height) / 2;

 

So is there any way to operate parent.width\height when child is added to a parent?

Probably the best way is to calculate this.percentWidth\Height on a getter, but may be there is some other way out

Thanks. Sorry for bad english and long post 

[xerver]

A container's width/height is the union size of the children it has. It has no explicit width/height otherwise.

Setting a child to a % of the container width/height is a weird thing to do, because the child width/height/position affects the parent width/height. I don't think you want to use .width/.height, but instead have a "real size" that you store separately that is just a number, not a union of children sizes.

[clifftm]

I know that width\height of a container is changing dynamically depending on its children position

But let's assume you have 2 containers on a stage(also container) with a separate sprites 500x500 and 500x500. And you created 30000 small sprites and trying to add them exactly in that 500x500 bounds.

Sprite has a getter

get width()
    {
        return Math.abs(this.scale.x) * this._texture.orig.width;
    }

So adding 30000 children directly on it works fine, exept that i need to scale all children position\scale by sprite.scale.x\y when my texture is not 500x500 and sprite created like here

var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
document.body.appendChild(app.view);

var sprite = new PIXI.Sprite(PIXI.Texture.WHITE);
sprite.width = 800;
sprite.height = 600;


app.stage.addChild(sprite);

var texture = PIXI.Texture.fromImage('required/assets/basics/bunny.png');

function bug(){
  let w = this.parent.width;
  let h = this.parent.height;

  this.x /= this.parent.scale.x;
  this.y /= this.parent.scale.y;
  
  this.scale.x /= this.parent.scale.x;
  this.scale.y /= this.parent.scale.y;

  this.alpha /= this.parent.alpha;
}


for (var i = 0; i < 1000; i++) {
    var bunny = new PIXI.Sprite(texture);
    bunny.on('added',bug,bunny);
    bunny.x = Math.random()*800;
    bunny.y = Math.random()*600;
    sprite.addChild(bunny);
}

and watch on alpha of the children, if i don't want to change it. By the way this.scale.x /= this.parent.scale.x makes bunny look blurry.

But if i incapsulate that sprite into container, that troubles are gone. I have a "background" sprite with it's own alpha\scale and other children with their private props. I can even set alpha's separately to a container\background sprite\bunnys.

var container = new PIXI.Container();
container.addChild(sprite);
app.stage.addChild(container);

But now dropping bunnys on a container, will recalculate parent bounds for every bunny, when it's actual width\height won't change, because container has 1 big child sprite 500x500 and all other put in that area.

I have 30000 small bunnys and want to drop to an x = 10%*newParent.width,  and y=10%*newParent.height  on drag&drop, and i don't know on what "component" its dropping: Container\Stage or Sprite 

But code logic should be the same for all cases, right? (Look at the attachment) .

Bunny say "just put me to an X= 10% of that object on what you dropped me. I don't care who is it, even if Darth Vader"

It's very strange, that a "Container" doesn't store it's biggest child size and didn't check if adding child is in that bound at first and stops recalculate bound if true 

[ivan.popelyshev]

> It's very strange, that a "Container" doesn't store it's biggest child size and didn't check if adding child is in that bound at first and stops recalculate bound if true 

Congratulations! You've reached the bounds of PIXI Container! Welcome to the club! Now you can make your own container, and publish it as a plugin.

[clifftm]

That exactly what i'm trying to do, but i want that my "SuperPuperContainer" will work even with based pixi objects