packages/ranuts/index.html

<!doctype html>
<html lang="en">
  <head>
    <link rel="icon" href="data:;" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>node and hierarchy</title>
  </head>

  <body>
    <div id="app">
      <canvas id="hierarchy" width="500" height="500"></canvas>
    </div>
    <script type="module">
      import { Application, Graphics, Container } from './src/utils/visual/index.ts';
      const app = new Application({
        view: document.getElementById('hierarchy'),
      });
      console.log('app', app);
      const blackGraphic = new Graphics();
      blackGraphic.beginFill('white');
      blackGraphic.drawRect(0, 0, 300, 300);

      const redGraphic = new Graphics();
      redGraphic.beginFill('red');
      redGraphic.drawRect(0, 0, 200, 200);

      const container1 = new Container();
      container1.addChild(blackGraphic);
      container1.addChild(redGraphic);

      const container2 = new Container();
      container2.addChild(container1);

      const greenGraphic = new Graphics();
      greenGraphic.beginFill('green');
      greenGraphic.drawRect(150, 0, 180, 180);

      container2.addChild(greenGraphic);

      const yellowGraphic = new Graphics();
      // yellowGraphic.beginFill('yellow');
      yellowGraphic.lineStyle({ width: 30, color: 'yellow', cap: 'round', join: 'round' });
      yellowGraphic.drawRect(0, 0, 250, 150);

      app.stage.addChild(container2);
      app.stage.addChild(yellowGraphic);

      app.render();

      setTimeout(() => {
        yellowGraphic.position.set(200, 0);
        app.render();
      }, 1000);
    </script>
  </body>
</html>