No more explicit layer groups, and separate extension into video and pen.

src/engine/stage-layering.js

@@ -3,54 +3,25 @@ class StageLayering {
         return 'background';
     }
 
-    static get EXTENSION_LAYER () {
+    static get VIDEO_LAYER () {
-        return 'extensions';
+        return 'video';
+    }
+
+    static get PEN_LAYER () {
+        return 'pen';
     }
 
     static get SPRITE_LAYER () {
         return 'sprite';
     }
 
-    static get BUBBLE_LAYER () {
-        return 'bubble';
-    }
-
-    static get BACKGROUND_ORDER () {
-        return 0;
-    }
-
-    // Video should be in the back of the extension group
-    static get VIDEO_ORDER () {
-        return 0;
-    }
-
-    static get PEN_ORDER () {
-        return 1;
-    }
-
     // Order of layer groups relative to each other,
-    // and ordering style of each
-    // Currently extensions are the only layer group
-    // that have an explicit ordering (e.g. video must be behind pen).
-    // All other groups here are ordered based on when they get added
     static get LAYER_GROUPS () {
         return [
-            {
+            StageLayering.BACKGROUND_LAYER,
-                group: StageLayering.BACKGROUND_LAYER,
+            StageLayering.VIDEO_LAYER,
-                // This is a weird use case for a layer group ordering style,
+            StageLayering.PEN_LAYER,
-                // because in the main Scratch use case, this group has only one item,
+            StageLayering.SPRITE_LAYER
-                // so ordering of the items doesn't really matter.
-                explicitOrdering: false
-
-            },
-            {
-                group: StageLayering.EXTENSION_LAYER,
-                explicitOrdering: true
-            },
-            {
-                group: StageLayering.SPRITE_LAYER,
-                explicitOrdering: false
-            }
         ];
     }
 }

src/extensions/scratch3_pen/index.js

@@ -128,8 +128,7 @@ class Scratch3PenBlocks {
     _getPenLayerID () {
         if (this._penSkinId < 0 && this.runtime.renderer) {
             this._penSkinId = this.runtime.renderer.createPenSkin();
-            this._penDrawableId = this.runtime.renderer.createDrawable(
+            this._penDrawableId = this.runtime.renderer.createDrawable(StageLayering.PEN_LAYER);
-                StageLayering.EXTENSION_LAYER, StageLayering.PEN_ORDER);
             this.runtime.renderer.updateDrawableProperties(this._penDrawableId, {skinId: this._penSkinId});
         }
         return this._penSkinId;

src/io/video.js

@@ -146,7 +146,7 @@ class Video {
         if (this._skinId === -1 && this._skin === null && this._drawable === -1) {
             this._skinId = renderer.createPenSkin();
             this._skin = renderer._allSkins[this._skinId];
-            this._drawable = renderer.createDrawable(StageLayering.EXTENSION_LAYER, StageLayering.VIDEO_ORDER);
+            this._drawable = renderer.createDrawable(StageLayering.VIDEO_LAYER);
             renderer.updateDrawableProperties(this._drawable, {
                 skinId: this._skinId
             });

src/sprites/rendered-target.js

@@ -847,11 +847,9 @@ class RenderedTarget extends Target {
      */
     goBehindOther (other) {
         if (this.renderer) {
-            this.renderer.positionDrawableRelativeToOther(
+            const otherLayer = this.renderer.setDrawableOrder(
-                this.drawableID, other.drawableID, -1, StageLayering.SPRITE_LAYER);
+                other.drawableID, 0, StageLayering.SPRITE_LAYER, true);
-            // const otherLayer = this.renderer.setDrawableOrder(
+            this.renderer.setDrawableOrder(this.drawableID, otherLayer, StageLayering.SPRITE_LAYER);
-            //     other.drawableID, 0, StageLayering.SPRITE_LAYER, true);
-            // this.renderer.setDrawableOrder(this.drawableID, otherLayer, StageLayering.SPRITE_LAYER);
         }
     }