PIXIJS How to disable all children?

[kid_karma]

How can I disable a component and all it's children?

 

In the following example, I added a clickable sprite into a container, and disabled the container's interactivity. The sprite remains clickable.

I then add an interactive Graphics object in front of the container, hoping that would block the interactivity of the sprite, but this also achieves nothing as the sprite remains clickable.

	//build stage	var stage = new PIXI.Stage(0x66FF99);	stage.interactive = true;	var renderer = PIXI.autoDetectRenderer(400, 300);	document.body.appendChild(renderer.view);		requestAnimFrame( animate );		function animate() {		    requestAnimFrame( animate );	    renderer.render(stage);	}		//create clickable sprite	var sprite = PIXI.Sprite.fromImage("bunny.png");	sprite.interactive = sprite.buttonMode = true;	sprite.click = function(e){		//this always logs, even though container is disabled, and covered by graphics		console.log("click me");	};               //add a container to hold the sprite. Disable the interaction on the container               var container = new PIXI.DisplayObjectContainer();               container.position.x = 200;               container.position.y = 150;               container.interactive = false;               stage.addChild(container);               container.addChild(sprite);              //cover container with graphics              var g = new PIXI.Graphics();              g.interactive = true;              g.beginFill(0);              g.drawRect(0,0,400,300);              g.endFill();              stage.addChild(g);

 

Is there anyway to easily disable all children of a component? Or would I have to manually overwrite the interactive property of a DisplayObject and force it to disable all it's children as well?

 

I realize this example is impractical, however, in my actual application, when you click a certain button, a popup will display on top of all other components. While the popup is displayed, the user should not be able to click on any other components underneath it. I could achieve this by building the popup outside of the Canvas and disabling the entire canvas, but I would really like to keep the popup as part of this canvas, because it is very dynamic and needs to have direct communication with many other parts of the application.

 

 

[xerver]

Hey karma,

 

This sounds related to issue #513: https://github.com/GoodBoyDigital/pixi.js/issues/513

 

Have you tried this with the latest dev build?

[kid_karma]

Thanks for the link xerver. I looked at the JSFiddle code and realized that in order for the second case to work, I need to supply a hit area to the graphics.

g.hitArea = new PIXI.Rectangle(0, 0, 400, 300);

Not sure why the first case of disabling interaction on the parent object doesn't effect it's children, but it's not necesary so I will accept this as a working solution =)