View sprite layers

Author: rgantzos

features/features.json

@@ -1,4 +1,9 @@
 [
+  {
+    "version": 2,
+    "id": "sprite-layers",
+    "versionAdded": "v3.9.0"
+  },
   {
     "version": 2,
     "id": "hide-project-tags",

features/sprite-layers/data.json

@@ -0,0 +1,32 @@
+{
+    "title": "View Sprite Layers",
+    "description": "Allows you to hover over the show/hide toggle in the sprite properties panel of the editor to view the sprite layers.",
+    "credits": [
+        {
+            "username": "-Brass_Glass-",
+            "url": "https://scratch.mit.edu/users/-Brass_Glass-/"
+        },
+        {
+            "username": "rgantzos",
+            "url": "https://scratch.mit.edu/users/rgantzos/"
+        }
+    ],
+    "type": [
+        "Editor"
+    ],
+    "tags": [
+        "New"
+    ],
+    "scripts": [
+        {
+            "file": "script.js",
+            "runOn": "/projects/*"
+        }
+    ],
+    "styles": [
+        {
+            "file": "style.css",
+            "runOn": "/projects/*"
+        }
+    ]
+}

features/sprite-layers/script.js

@@ -0,0 +1,61 @@
+export default async function ({ feature, console }) {
+    window.feature = feature
+
+    ScratchTools.waitForElements("div[class*='sprite-info_row_']:nth-child(2) > div[class*='sprite-info_group_']:nth-child(1)", function (button) {
+        button.addEventListener("mouseover", function () {
+            if (feature.traps.vm.editingTarget.isStage || button.querySelector(".ste-layers")) return;
+
+            button.style.position = "relative"
+
+            let div = document.createElement("div")
+            div.className = "ste-layers"
+
+            let h3 = document.createElement("h3")
+            h3.textContent = "Layers"
+            div.appendChild(h3)
+
+            div.appendChild(buildDiagram())
+
+            if (div.querySelector("div").childNodes.length > 12) {
+                div.classList.add("ste-long-layers")
+            }
+
+            let p = document.createElement("p")
+            p.textContent = "Layers to the left are to the front. Bright blue indicates the current sprite, and light blue indicates any of its clones."
+            div.appendChild(p)
+
+            button.appendChild(div)
+        })
+
+        button.addEventListener("mouseout", function () {
+            button.querySelector(".ste-layers")?.remove()
+            button.style.position = null
+        })
+    })
+
+    function buildDiagram() {
+        let targets = feature.traps.vm.runtime.targets
+
+        let div = document.createElement("div")
+        let elements = []
+
+        for (var i in targets) {
+            let place = document.createElement("div")
+            place.style.width = `calc(${(100 / targets.length).toString()}% - .1rem)`
+            elements.push(place)
+        }
+
+        for (var i in targets) {
+            if (targets[i].sprite.name === feature.traps.vm.editingTarget.sprite.name) {
+                if (targets[i].isOriginal) {
+                    elements[targets[i].getLayerOrder() - 1].style.backgroundColor = "#034efc"
+                } else {
+                    elements[targets[i].getLayerOrder() - 1].style.backgroundColor = "#034efc70"
+                }
+            }
+        }
+
+        div.append(...elements)
+        return div
+    }
+}

features/sprite-layers/style.css

@@ -0,0 +1,53 @@
+.ste-layers {
+    width: 25rem;
+    border-radius: .5rem;
+    height: 9.75rem;
+    background: white;
+    position: absolute;
+    border: 2px solid rgba(3, 78, 252, .5);
+    padding: .5rem;
+    text-align: left;
+    left: 50%;
+    bottom: -7rem;
+    transform: translate(-50%, -100%);
+    z-index: 999;
+    box-shadow: 0px 0px 10px rgb(3, 78, 252, .3);
+}
+
+.ste-layers h3 {
+    font-size: 1.1rem;
+    margin-bottom: .5rem;
+    margin-left: .15rem;
+}
+
+.ste-layers>div>div {
+    border-radius: .5rem;
+    height: 3rem;
+    display: inline-block;
+    background-color: lightgray;
+    margin-left: .05rem;
+    margin-right: .05rem;
+    flex-shrink: 0;
+}
+
+.ste-layers>div {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    text-align: center;
+}
+
+.ste-layers p {
+    font-size: .8rem;
+    opacity: .6;
+    font-style: italic;
+    line-height: .95rem;
+    padding-left: .05rem;
+    padding-right: .05rem;
+}
+
+.ste-long-layers>div>div:nth-child(even) {
+    height: 2rem;
+    position: relative;
+    top: .5rem;
+}