Pixi ungrouping

by Hooman Askari

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.0/pixi.min.js"></script>
<button id="group">Group</button>
<button id="rotate">Rotate</button>
<button id="scale">Scale</button>
<button id="ungroup">Ungroup</button>
<div id="canvas-wrapper"></div>

CSS

html, body {
  padding: 0;
  margin: 0;
}

canvas {
  display: block;
}

JavaScript

const groupButton = document.getElementById('group');
const rotateButton = document.getElementById('rotate');
const scaleButton = document.getElementById('scale');
const ungrouppButton = document.getElementById('ungroup');

const app = new PIXI.Application({
  transparent: false,
  autoDensity: true,
  antialias: true,
  autoResize: true,
  // forceCanvas: true,
  preserveDrawingBuffer: true,
  roundedPixels: true,
  backgroundColor: 0xE5E5E5,
  width: window.innerWidth,
  height: window.innerHeight,
  resolution: window.devicePixelRatio
});

document.getElementById('canvas-wrapper').appendChild(app.view);

function createRect(x, y) {
    let graphics = new PIXI.Graphics();
    graphics.beginFill(0xff0000);
    graphics.drawRect(x, y, 50, 50);
    graphics.endFill();
    graphics.name = 'rect';

    graphics.scale.set(2);
    graphics.angle = 0;
    graphics.interactive = graphics.buttonMode = true;
    setPivotToCenter(graphics);
    graphics.position.set(x + graphics.pivot.x, y + graphics.pivot.y);

    return graphics;
}

function createEllipse(x, y) {
    let graphics = new PIXI.Graphics();
    graphics.beginFill(0xffFF00);
    graphics.drawEllipse(x, y, 50, 25);
    graphics.endFill();
    graphics.name = 'ellipse';
    
    graphics.scale.set(2);
    graphics.angle = 0;
  	graphics.interactive = graphics.buttonMode = true;
    setPivotToCenter(graphics);
    graphics.position.set(x + graphics.pivot.x, y + graphics.pivot.y);

    return graphics;
}

function createContainer() {
    let container = new PIXI.Container();
    return container;
}

let graphics1 = createRect(100, 10);
let graphics2 = createEllipse(100, 80);

app.stage.addChild(graphics1, graphics2);

let container = createContainer();

groupButton.onclick = () => {
  container.addChild(graphics1, graphics2);
  app.stage.addChild(container);
  container.interactive = container.buttonMode = true;
  container.interactiveChildren = false;
  container.hitArea = container.getLocalBounds();
 ...