fix(showcase): fixed an issue where the position wouldn't load in wallpaper engine

.gitignore

@@ -37,3 +37,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+temp

libs/content_processor.js

@@ -24,15 +24,7 @@ export default class Matcher {
           'assets',
           `return new Evalable(config, assets).${name}`)
         )(Evalable, this.#config, this.#assets)
-        if (matches.length > 1) {
-          try {
-            this.content = this.content.replace(match, result)
-          } catch (e) {
-            throw new Error(e)
-          }
-        } else if (matches.length === 1) {
-          this.content = result
-        }
+        this.content = matches.length > 1 ? this.content.replace(match, result) : result
       })
     }
     return this.content

src/components/player.js

@@ -55,6 +55,7 @@ export default function spinePlayer(el) {
         entry.mixDuration = 0.3;
         widget.animationState.addAnimation(0, "Idle", true, 0);
       }
+      window.settings.loadViewport()
     },
   })
 }

src/components/settings.js

@@ -150,45 +150,37 @@ export default class Settings {
     document.getElementById("custom_background_clear").disabled = true
   }
 
+  loadViewport() {
+    this.spinePlayer.updateViewport({
+      padLeft: `${this.#padLeft}%`,
+      padRight: `${this.#padRight}%`,
+      padTop: `${this.#padTop}%`,
+      padBottom: `${this.#padBottom}%`,
+    })
+  }
+
   positionPadding(key, value) {
     switch (key) {
       case "left":
         this.#padLeft = value
-        this.spinePlayer.updateViewport({
-          padLeft: `${value}%`,
-          padRight: `${this.#padRight}%`,
-          padTop: `${this.#padTop}%`,
-          padBottom: `${this.#padBottom}%`,
-        })
         break;
       case "right":
         this.#padRight = value
-        this.spinePlayer.updateViewport({
-          padLeft: `${this.#padLeft}%`,
-          padRight: `${value}%`,
-          padTop: `${this.#padTop}%`,
-          padBottom: `${this.#padBottom}%`,
-        })
         break;
       case "top":
         this.#padTop = value
-        this.spinePlayer.updateViewport({
-          padLeft: `${this.#padLeft}%`,
-          padRight: `${this.#padRight}%`,
-          padTop: `${value}%`,
-          padBottom: `${this.#padBottom}%`,
-        })
         break;
       case "bottom":
         this.#padBottom = value
-        this.spinePlayer.updateViewport({
-          padLeft: `${this.#padLeft}%`,
-          padRight: `${this.#padRight}%`,
-          padTop: `${this.#padTop}%`,
-          padBottom: `${value}%`,
-        })
+        break;
+      default:
+        this.#padLeft = value.left
+        this.#padRight = value.right
+        this.#padTop = value.top
+        this.#padBottom = value.bottom
         break;
     }
+    this.loadViewport()
   }
 
   positionReset() {

src/libs/wallpaper_engine.js

@@ -40,6 +40,13 @@ window.wallpaperPropertyListener = {
         if (properties.position) {
             if (!properties.position.value) {
                 window.settings.positionReset()
+            } else {
+                window.settings.positionPadding(null, {
+                    left: properties.paddingleft.value,
+                    right: properties.paddingright.value,
+                    top: properties.paddingtop.value,
+                    bottom: properties.paddingbottom.value,
+                })
             }
         }
         if (properties.paddingleft) {