From b499e9694eccfd60791e0c0be43e0e94f1783fef Mon Sep 17 00:00:00 2001
From: Knox <knox.h@qq.com>
Date: Mon, 2 Dec 2024 09:23:25 +0800
Subject: [PATCH] improve spine preview (#17989)

* improve spine preview

* refine i18n
---
 editor/i18n/en/assets.js                 |  5 ++
 editor/i18n/zh/assets.js                 |  5 ++
 editor/inspector/assets/spine-preview.js | 94 +++++++++++++++++++-----
 3 files changed, 84 insertions(+), 20 deletions(-)

diff --git a/editor/i18n/en/assets.js b/editor/i18n/en/assets.js
index 1bb98009914..f9747b95809 100644
--- a/editor/i18n/en/assets.js
+++ b/editor/i18n/en/assets.js
@@ -16,6 +16,11 @@ module.exports = {
             animation: 'Animation',
             loop: 'Loop',
             timeScale: 'Rate',
+            premultipliedAlpha: 'Premultiplied Alpha',
+            useTint: 'Use Tint',
+            debugSlots: 'Debug Slots',
+            debugBones: 'Debug Bones',
+            debugMesh: 'Debug Mesh',
         },
     },
 
diff --git a/editor/i18n/zh/assets.js b/editor/i18n/zh/assets.js
index a189c139a81..cffc333c5ed 100644
--- a/editor/i18n/zh/assets.js
+++ b/editor/i18n/zh/assets.js
@@ -16,6 +16,11 @@ module.exports = {
             animation: '动画',
             loop: '循环',
             timeScale: '速率',
+            premultipliedAlpha: '启用贴图预乘',
+            useTint: '启用染色效果',
+            debugSlots: '调试槽',
+            debugBones: '调试骨骼',
+            debugMesh: '调试网格',
         },
     },
 
diff --git a/editor/inspector/assets/spine-preview.js b/editor/inspector/assets/spine-preview.js
index 1d1dd9c5ab7..6851e28d373 100644
--- a/editor/inspector/assets/spine-preview.js
+++ b/editor/inspector/assets/spine-preview.js
@@ -14,12 +14,32 @@ exports.template = /* html */`
             </ui-prop>
             <ui-prop class="loop">
                 <ui-label slot="label" value="i18n:ENGINE.inspector.spine.loop"></ui-label>
-                <ui-checkbox slot="content" class="loop-check-box"></ui-checkbox>
+                <ui-checkbox slot="content" class="loop-checkbox"></ui-checkbox>
             </ui-prop>
             <ui-prop class="timeScale">
                 <ui-label slot="label" value="i18n:ENGINE.inspector.spine.timeScale"></ui-label>
                 <ui-slider slot="content" class="time-scale-slider" value="1"></ui-slider>
             </ui-prop>
+            <ui-prop class="premultipliedAlpha">
+                <ui-label slot="label" value="i18n:ENGINE.inspector.spine.premultipliedAlpha"></ui-label>
+                <ui-checkbox slot="content" class="premultiplied-alpha-checkbox"></ui-checkbox>
+            </ui-prop>
+            <ui-prop class="useTint">
+                <ui-label slot="label" value="i18n:ENGINE.inspector.spine.useTint"></ui-label>
+                <ui-checkbox slot="content" class="use-tint-checkbox"></ui-checkbox>
+            </ui-prop>
+            <ui-prop class="debugSlots">
+                <ui-label slot="label" value="i18n:ENGINE.inspector.spine.debugSlots"></ui-label>
+                <ui-checkbox slot="content" class="debug-slots-checkbox"></ui-checkbox>
+            </ui-prop>
+            <ui-prop class="debugBones">
+                <ui-label slot="label" value="i18n:ENGINE.inspector.spine.debugBones"></ui-label>
+                <ui-checkbox slot="content" class="debug-bones-checkbox"></ui-checkbox>
+            </ui-prop>
+            <ui-prop class="debugMesh">
+                <ui-label slot="label" value="i18n:ENGINE.inspector.spine.debugMesh"></ui-label>
+                <ui-checkbox slot="content" class="debug-mesh-checkbox"></ui-checkbox>
+            </ui-prop>
         </div>
         <div class="image">
             <canvas class="canvas"></canvas>
@@ -103,11 +123,38 @@ exports.$ = {
     pause: '.pause',
     stop: '.stop',
     duration: '.duration',
-    loop: '.loop-check-box',
+    loop: '.loop-checkbox',
+    useTint: '.use-tint-checkbox',
     timeScale: '.time-scale-slider',
+    debugSlots: '.debug-slots-checkbox',
+    debugBones: '.debug-bones-checkbox',
+    premultipliedAlpha: '.premultiplied-alpha-checkbox',
+    debugMesh: '.debug-mesh-checkbox',
     animationCtrl: '.anim-control',
 };
 
+const CheckBox = [
+    'loop',
+    'useTint',
+    'debugSlots',
+    'debugBones',
+    'debugMesh',
+    'premultipliedAlpha',
+];
+
+const Slider = [
+    'timeScale',
+];
+
+const Other = [
+    'play',
+    'stop',
+    'skinSelectPro',
+    'animationSelectPro',
+];
+
+const Properties = CheckBox.concat(Slider).concat(Other);
+
 async function callFunction(funcName, ...args) {
     return await Editor.Message.request('scene', 'call-preview-function', 'scene:spine-preview', funcName, ...args);
 }
@@ -195,6 +242,7 @@ const Elements = {
             const panel = this;
 
             callFunction('stop');
+            callFunction('close');
             panel.resizeObserver.unobserve(panel.$.image);
         },
     },
@@ -232,21 +280,15 @@ const Elements = {
             const panel = this;
 
             if (!info) {
-                panel.$.loop.setAttribute('disabled', '');
-                panel.$.timeScale.setAttribute('disabled', '');
-                panel.$.play.setAttribute('disabled', '');
-                panel.$.stop.setAttribute('disabled', '');
-                panel.$.skinSelectPro.setAttribute('disabled', '');
-                panel.$.animationSelectPro.setAttribute('disabled', '');
+                Properties.forEach(property => {
+                    panel.$[property].setAttribute('disabled', '');
+                });
                 return;
             }
 
-            panel.$.loop.removeAttribute('disabled');
-            panel.$.timeScale.removeAttribute('disabled');
-            panel.$.play.removeAttribute('disabled');
-            panel.$.stop.removeAttribute('disabled');
-            panel.$.skinSelectPro.removeAttribute('disabled');
-            panel.$.animationSelectPro.removeAttribute('disabled');
+            Properties.forEach(property => {
+                panel.$[property].removeAttribute('disabled');
+            });
 
             Elements.spine.updateEnum.call(panel, panel.$.skinSelectPro, info.skin);
             Elements.spine.updateEnum.call(panel, panel.$.animationSelectPro, info.animation);
@@ -265,12 +307,20 @@ const Elements = {
         ready() {
             const panel = this;
 
-            panel.$.timeScale.addEventListener('change', (event) => {
-                callFunction('setTimeScale', Number(event.target.value));
+            Slider.forEach((key) => {
+                panel.$[key].addEventListener('change', (event) => {
+                    callFunction('setProperties', key, Number(event.target.value));
+                });
             });
-            panel.$.loop.addEventListener('confirm', (event) => {
-                callFunction('setLoop', Boolean(event.target.value));
+
+            CheckBox.forEach((key) => {
+                panel.$[key].addEventListener('confirm', (event) => {
+                    callFunction('setProperties', key, Boolean(event.target.value)).then((() => {
+                        this.isPreviewDataDirty = true;
+                    }));
+                });
             });
+
             panel.$.play.addEventListener('click', () => {
                 callFunction('play', panel.animationIndex);
             });
@@ -284,8 +334,12 @@ const Elements = {
         updateInfo(info) {
             const panel = this;
 
-            panel.$.loop.setAttribute('value', Boolean(info.loop));
-            panel.$.timeScale.setAttribute('value', Number(info.timeScale));
+            CheckBox.forEach((key) => {
+                panel.$[key].setAttribute('value', Boolean(info[key]));
+            });
+            Slider.forEach((key) => {
+                panel.$[key].setAttribute('value', Number(info[key]));
+            });
         },
         update(playing) {
             const panel = this;