[Jextic]

Resolves #9352

Changes:

• Calls on

  if (overlay.parentNode !== actualCanvas.parentNode) {
       actualCanvas.parentNode.insertBefore(overlay, actualCanvas.nextSibling);
  }
  

  before _positionCanvas(overlay, actualCanvas); so that the loading overlay is attached to the actual canvas container before the position is calculated. This fixes the bug since the browser couldn't calculate the relative offset coordinates of the actual canvas if the overlay was detached.
• Additionally, a parenting check is added in animate() so that if a mismatch occurs between the parent of the sketch canvas and the parent of the loading overlay, the loading overlay will be re-parented.
• Unit test for dynamic parenting check added.

Tests:

reparented-overlay.mp4

reparented-overlay-test-2.mp4

The second test was a basic overlay parenting check with the following code:
index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    body {
      display: flex;
      gap: 20px;
      padding: 20px;
    }
    .box {
      width: 200px;
      height: 200px;
      border: 2px solid #000;
      position: relative;
    }
  </style>

  <script src="/p5.js"></script>
  <script src="./sketch.js"></script>
</head>
<body>
  <div id="c1" class="box"></div>
  <div id="c2" class="box"></div>
</body>
</html>

sketch.js:

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

async function setup() {
  const canvas = createCanvas(200, 200).parent('c1');
  await delay(1000);

  canvas.parent('c2');
  await delay(1000);

  background('lightgreen');
}

PR Checklist

• npm run lint passes
• Unit tests are included / updated

[p5-bot]

Continuous Release

CDN link

• https://raw.esm.sh/pr/p5@36886e9/lib/p5.min.js

Published Packages

• https://pkg.pr.new/p5@36886e9

Commit hash: 36886e9

Previous deployments

---

This is an automated message.

[ksen0]

Nice work! and great documentation