fix(showcase): fixed an issue where viewport does not update correctly

.env

@@ -1,11 +1,11 @@
-VITE_TITLE="Arknights: Ch'en/Chen the Holungday - 明日方舟：假日威龙陈"
-VITE_FILENAME=dyn_illust_char_1013_chen2
-VITE_LOGO_FILENAME=logo_rhodes_override
-VITE_FALLBACK_FILENAME=char_1013_chen2_2
-VITE_VIEWPORT_LEFT=0
-VITE_VIEWPORT_RIGHT=0
-VITE_VIEWPORT_TOP=1
-VITE_VIEWPORT_BOTTOM=1
-VITE_INVERT_FILTER=false
+VITE_TITLE="Arknights: Skadi the Corrupting Heart - 明日方舟：浊心斯卡蒂"
+VITE_FILENAME=dyn_illust_char_1012_skadi2
+VITE_LOGO_FILENAME=logo_egir
+VITE_FALLBACK_FILENAME=char_1012_skadi2_2
+VITE_VIEWPORT_LEFT=-5
+VITE_VIEWPORT_RIGHT=-10
+VITE_VIEWPORT_TOP=0
+VITE_VIEWPORT_BOTTOM=-12
+VITE_INVERT_FILTER=true
 VITE_IMAGE_WIDTH=2048
 VITE_IMAGE_HEIGHT=2048

preprocessing.js

@@ -43,6 +43,7 @@ const SHOWCASE_PUBLIC_FOLDER = path.join(__dirname, "public")
 const SHOWCASE_PUBLIC_ASSSETS_FOLDER = path.join(SHOWCASE_PUBLIC_FOLDER, "assets")
 const EXTRACTED_FOLDER = path.join(OPERATOR_SOURCE_FOLDER, OPERATOR_NAME, 'extracted')
 const OPERATOR_SHARE_FOLDER = path.join(OPERATOR_SOURCE_FOLDER, '_share')
+rmdir(SHOWCASE_PUBLIC_FOLDER)
 if (mode === 'NODE') {
 
     switch (op) {
@@ -54,7 +55,6 @@ if (mode === 'NODE') {
     }
 
     rmdir(OPERATOR_RELEASE_FOLDER)
-    rmdir(SHOWCASE_PUBLIC_FOLDER)
 
     const projectJson = new ProjectJson(config, OPERATOR_NAME, __dirname, OPERATOR_SHARE_FOLDER)
     projectJson.load().then((content) => {

src/components/settings.js

@@ -33,11 +33,6 @@ export default class Settings {
   #padRight = this.#defaultPadRight
   #padTop = this.#defaultPadTop
   #padBottom = this.#defaultPadBottom
-  #hideLogo = this.#defaulthideLogo
-  #hidePositionSettings = true
-  #backgroundClearDisabled = true
-  #logoClearDisabled = true
-  #isPlaying = true
 
   constructor(el, logoEl) {
     this.#el = el
@@ -70,7 +65,6 @@ export default class Settings {
   }
 
   setLogoDisplay(flag) {
-    this.#hideLogo = flag
     this.#logoEl.hidden = flag;
   }
 
@@ -153,28 +147,36 @@ export default class Settings {
       case "left":
         this.#padLeft = value
         this.spinePlayer.updateViewport({
-          ...this.#defaultViewport,
           padLeft: `${value}%`,
+          padRight: `${this.#padRight}%`,
+          padTop: `${this.#padTop}%`,
+          padBottom: `${this.#padBottom}%`,
         })
         break;
       case "right":
         this.#padRight = value
         this.spinePlayer.updateViewport({
-          ...this.#defaultViewport,
+          padLeft: `${this.#padLeft}%`,
           padRight: `${value}%`,
+          padTop: `${this.#padTop}%`,
+          padBottom: `${this.#padBottom}%`,
         })
         break;
       case "top":
         this.#padTop = value
         this.spinePlayer.updateViewport({
-          ...this.#defaultViewport,
+          padLeft: `${this.#padLeft}%`,
+          padRight: `${this.#padRight}%`,
           padTop: `${value}%`,
+          padBottom: `${this.#padBottom}%`,
         })
         break;
       case "bottom":
         this.#padBottom = value
         this.spinePlayer.updateViewport({
-          ...this.#defaultViewport,
+          padLeft: `${this.#padLeft}%`,
+          padRight: `${this.#padRight}%`,
+          padTop: `${this.#padTop}%`,
           padBottom: `${value}%`,
         })
         break;