fix(wallpaper engine): fixed an issue on position loading

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

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,6 +64,7 @@ var Settings = (function () {
         this.logoEl.style.opacity = opacity / 100;
     };
     Settings.prototype.positionReset = function () {
+        if (this.spinePlayerLoaded)
             this.spinePlayer.updateViewport(window.operatorSettings.viewport)
     };
     Settings.prototype.positionPadding = function (key, value) {
@@ -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");

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;
-			}
 		};
 		SpinePlayer.HOVER_COLOR_INNER = new spine.Color(0.478, 0, 0, 0.25);
 		SpinePlayer.HOVER_COLOR_OUTER = new spine.Color(1, 1, 1, 1);