From fd7d76cb0c7275a7c580fbae8705c77ee7e8aad5 Mon Sep 17 00:00:00 2001
From: Halyul <i@halyul.dev>
Date: Thu, 3 Jun 2021 23:03:18 -0400
Subject: [PATCH] fix(wallpaper engine): fixed an issue on position loading

---
 template/assets/runner.js       | 10 +++++++---
 template/assets/settings.js     | 11 ++++++++---
 template/assets/spine-player.js | 14 ++++++--------
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/template/assets/runner.js b/template/assets/runner.js
index 4454c80..776d91b 100644
--- a/template/assets/runner.js
+++ b/template/assets/runner.js
@@ -37,7 +37,7 @@ if (!supportsWebGL()) {
     fallback();
 } else {
     var e = document.getElementById("container");
-	
+    var settings;
 	var spinePlayer = new spine.SpinePlayer(e, {
         jsonUrl: window.operatorSettings.jsonUrl,
         skelUrl: window.operatorSettings.skelUrl,
@@ -51,9 +51,13 @@ if (!supportsWebGL()) {
         showControls: false,
         fps: window.operatorSettings.fps,
         defaultMix: window.operatorSettings.defaultMix,
-        success: window.operatorSettings.success,
+        success: function (e) {
+            window.operatorSettings.success(e);
+            settings.spinePlayerLoaded = true;
+            settings.loadViewport();
+        },
     });
-    var settings = new Settings({
+    settings = new Settings({
         logo: document.getElementById("logo"),
         spinePlayer: spinePlayer,
         operatorSettings: window.operatorSettings
diff --git a/template/assets/settings.js b/template/assets/settings.js
index f922e9d..60401f8 100644
--- a/template/assets/settings.js
+++ b/template/assets/settings.js
@@ -12,7 +12,7 @@ var Settings = (function () {
         this.logoSrc = this.logoEl.src;
         this.opacity = parseFloat(getComputedStyle(this.logoEl).opacity) * 100;
         this.el = document.createElement("div");
-        
+        this.spinePlayerLoaded = false;
     }
     Settings.prototype.validateConfig = function () {
         if (typeof this.logoEl === "string")
@@ -64,7 +64,8 @@ var Settings = (function () {
         this.logoEl.style.opacity = opacity / 100;
     };
     Settings.prototype.positionReset = function () {
-        this.spinePlayer.updateViewport(window.operatorSettings.viewport)
+        if (this.spinePlayerLoaded)
+            this.spinePlayer.updateViewport(window.operatorSettings.viewport)
     };
     Settings.prototype.positionPadding = function (key, value) {
         switch (key) {
@@ -81,7 +82,11 @@ var Settings = (function () {
                 this.viewport.padBottom = `${value}%`;
                 break;
         }
-        this.spinePlayer.updateViewport(this.viewport)
+        this.loadViewport();
+    };
+    Settings.prototype.loadViewport = function () {
+        if (this.spinePlayerLoaded)
+            this.spinePlayer.updateViewport(this.viewport);
     };
     Settings.prototype.open = function () {
         this.el.classList.add("website-settings");
diff --git a/template/assets/spine-player.js b/template/assets/spine-player.js
index 7bd0ec3..2c83925 100644
--- a/template/assets/spine-player.js
+++ b/template/assets/spine-player.js
@@ -11318,14 +11318,12 @@ var spine;
 			this.time.setFps(value);
 		};
 		SpinePlayer.prototype.updateViewport = function (viewport) {
-			if (this.loaded) {
-				var _currentViewport = this.currentViewport;
-				_currentViewport.padLeft = this.percentageToWorldUnit(_currentViewport.width, viewport.padLeft);
-				_currentViewport.padRight = this.percentageToWorldUnit(_currentViewport.width, viewport.padRight);
-				_currentViewport.padBottom = this.percentageToWorldUnit(_currentViewport.height, viewport.padBottom);
-				_currentViewport.padTop = this.percentageToWorldUnit(_currentViewport.height, viewport.padTop);
-				this.currentViewport = _currentViewport;
-			}
+			var _currentViewport = this.currentViewport;
+			_currentViewport.padLeft = this.percentageToWorldUnit(_currentViewport.width, viewport.padLeft);
+			_currentViewport.padRight = this.percentageToWorldUnit(_currentViewport.width, viewport.padRight);
+			_currentViewport.padBottom = this.percentageToWorldUnit(_currentViewport.height, viewport.padBottom);
+			_currentViewport.padTop = this.percentageToWorldUnit(_currentViewport.height, viewport.padTop);
+			this.currentViewport = _currentViewport;
 		};
 		SpinePlayer.HOVER_COLOR_INNER = new spine.Color(0.478, 0, 0, 0.25);
 		SpinePlayer.HOVER_COLOR_OUTER = new spine.Color(1, 1, 1, 1);