Draw frame over a child

[dann]

Hi!

I would like to draw a node that hold its children in the way shown on the gif.

The problem in the border: it would be great if the border shell draw over the child. How can i get it?

My code:

function createRectWithText( w, h, t, c ) {
  const graphics = new PIXI.Graphics()
    .beginFill( c )
    .drawRoundedRect( 0, 0, w, h )
    .endFill()
  
  const sprite = new PIXI.Sprite( graphics.generateCanvasTexture() );
  
  graphics.destroy();

  const graphics_border = new PIXI.Graphics()
    .lineStyle( 10, 0x000000, 1, 0 )
    .beginFill( 0xffffff, 0 )
    .drawRoundedRect( 0, 0, w, h )
    .endFill()
  const sprite_border = new PIXI.Sprite( graphics_border.generateCanvasTexture() );
  graphics_border.destroy();

  let textStyle = new PIXI.TextStyle( {
    fontSize: h / 3,// * ( dpi_x + dpi_y ) / 2 / 96,
    wordWrap : true,
    wordWrapWidth : w
  } );
  var text = new PIXI.Text( t, textStyle );

  const container = new PIXI.Container()
  container.text = t

  const mask = new PIXI.Graphics()
    .beginFill( 0xff0000 )
    .drawRoundedRect( 0, 0, w, h )
    .endFill()
  container.mask = mask

  container.addChild( sprite );
  container.addChild( sprite sprite_border );
  container.addChild( text );
  container.addChild( mask );

  .......................................
  
  return container
}

let a = createRectWithText( 300, 100, "Qwe asdfghjlk zxc rty vbn qwe asd zxc bnm", 0x888888 )
a.x = 30
a.y = 20
let b = createRectWithText( 300, 100, "B", 0xaaaaaa )
b.x = 70
b.y = 50
a.addChild( b )
app.stage.addChild( a )
app.stage.sortableChildren = true

dann