Support multiple layers in the scene

All view objects are drawn to a single layer (children of the root of the scene graph). For a fun project I recently wanted to put something on top of all other drawables (without impacting the layer of other drawables). A patch to do this looked like this. It added layers to the sharedData object so that you can place drawables on a back, middle, and top layer (at least in custom code).

```patch Subject: [PATCH] on --- Index: client/board/entry.js IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/client/board/entry.js b/client/board/entry.js --- a/client/board/entry.js (revision d115c3c63f8ccb65588740ee6966f273979dc3d6) +++ b/client/board/entry.js (date 1700263463043) @@ -34,7 +34,7 @@ document.body.appendChild( simDisplayDiv ); // Create the root of the scene graph. -const scene = new phet.scenery.Node(); +const rootNode = new phet.scenery.Node(); // The object in localStorage on page load const storedBoardConfig = JSON.parse( localStorage.boardConfig || '{}' ); @@ -74,7 +74,7 @@ // component. ReactDOM.render( , @@ -119,11 +119,21 @@ const mapOfPaperProgramNumbersToPreviousMarkers = new Map(); +const backLayer = new phet.scenery.Node(); +const midLayer = new phet.scenery.Node(); +const topLayer = new phet.scenery.Node(); + +rootNode.addChild( backLayer ); +rootNode.addChild( midLayer ); +rootNode.addChild( topLayer ); + // {Object} - This object contains the data that is passed into the handlers for the paper programs and can be used to // share information between them. The data can be referenced and sometimes updated. const sharedData = { model: boardModel, - scene: scene, + backLayer: backLayer, + scene: midLayer, + topLayer: topLayer, get displaySize() { // If full screen, the display size is the full window - a getter ```

phetsims / paper-land

Support multiple layers in the scene #205