From 944d4809a667d5cfdf5a0f4e7b0bd6c6096f33e8 Mon Sep 17 00:00:00 2001
From: knoxHuang <knox.h@qq.com>
Date: Fri, 8 Nov 2024 16:42:38 +0800
Subject: [PATCH] refine code

---
 .../renderer/particle-system-renderer-data.ts | 18 ++-----
 .../inspector/components/particle-system.js   | 53 +++++++++++++++++--
 2 files changed, 53 insertions(+), 18 deletions(-)

diff --git a/cocos/particle/renderer/particle-system-renderer-data.ts b/cocos/particle/renderer/particle-system-renderer-data.ts
index e2918f550dd..d6e7e57f5e0 100644
--- a/cocos/particle/renderer/particle-system-renderer-data.ts
+++ b/cocos/particle/renderer/particle-system-renderer-data.ts
@@ -159,15 +159,12 @@ export default class ParticleSystemRenderer {
     @type(Material)
     @displayOrder(8)
     @disallowAnimation
-    @visible(function (this: ParticleSystemRenderer): boolean { return !this._useGPU; })
     public get cpuMaterial (): Material | null {
         return this._cpuMaterial;
     }
 
     public set cpuMaterial (val: Material | null) {
-        if (val === null) {
-            return;
-        } else {
+        if (val) {
             const effectName = val.effectName;
             if (effectName.indexOf('particle') === -1 || effectName.indexOf('particle-gpu') !== -1) {
                 warnID(6035);
@@ -188,15 +185,12 @@ export default class ParticleSystemRenderer {
     @type(Material)
     @displayOrder(8)
     @disallowAnimation
-    @visible(function (this: ParticleSystemRenderer): boolean { return this._useGPU; })
     public get gpuMaterial (): Material | null {
         return this._gpuMaterial;
     }
 
     public set gpuMaterial (val: Material | null) {
-        if (val === null) {
-            return;
-        } else {
+        if (val) {
             const effectName = val.effectName;
             if (effectName.indexOf('particle-gpu') === -1) {
                 warnID(6035);
@@ -217,7 +211,6 @@ export default class ParticleSystemRenderer {
     @type(Material)
     @displayOrder(9)
     @disallowAnimation
-    @visible(function (this: ParticleSystemRenderer): boolean { return !this._useGPU; })
     @tooltip('i18n:particleSystemRenderer.trailMaterial')
     public get trailMaterial (): Material | null {
         if (!this._particleSystem) {
@@ -330,12 +323,7 @@ export default class ParticleSystemRenderer {
             this._particleSystem.processor = null!;
         }
         const useGPU = this._useGPU && isSupportGPUParticle();
-        if (!useGPU && this.cpuMaterial) {
-            this.particleMaterial = this.cpuMaterial;
-        }
-        if (useGPU && this.gpuMaterial) {
-            this.particleMaterial = this.gpuMaterial;
-        }
+        this.particleMaterial = useGPU ? this.gpuMaterial : this.cpuMaterial;
         this._particleSystem.processor = useGPU ? new ParticleSystemRendererGPU(this) : new ParticleSystemRendererCPU(this);
         this._particleSystem.processor.updateAlignSpace(this.alignSpace);
         this._particleSystem.processor.onInit(this._particleSystem);
diff --git a/editor/inspector/components/particle-system.js b/editor/inspector/components/particle-system.js
index b2a62d5d5cc..2ba5e1eeb3f 100644
--- a/editor/inspector/components/particle-system.js
+++ b/editor/inspector/components/particle-system.js
@@ -162,7 +162,21 @@ exports.template = /* html*/`
             <ui-prop type="dump" key="trailModule.value.colorOverTrail"></ui-prop>
             <ui-prop type="dump" key="trailModule.value.colorOvertime"></ui-prop>
         </ui-section>
-        <ui-prop type="dump" key="renderer"></ui-prop>
+        <ui-section empty="true" key="renderer" expand>
+            <div slot="header" style="overflow: hidden;">
+                <ui-label name style="white-space: nowrap;" value="Renderer"></ui-label>
+                <ui-label type style="white-space: nowrap;opacity: 0.55;margin-left: 4px;flex:auto;font-weight:normal;" value=": cc.ParticleSystemRenderer"></ui-label>
+            </div>
+            <ui-prop type="dump" key="renderer.value.renderMode"></ui-prop>
+            <ui-prop type="dump" key="renderer.value.velocityScale"></ui-prop>
+            <ui-prop type="dump" key="renderer.value.lengthScale"></ui-prop>
+            <ui-prop type="dump" key="renderer.value.mesh"></ui-prop>
+            <ui-prop class="cpu-material" type="dump" key="renderer.value.cpuMaterial"></ui-prop>
+            <ui-prop class="trail-material" type="dump" key="renderer.value.trailMaterial"></ui-prop>
+            <ui-prop class="gpu-material" type="dump" key="renderer.value.gpuMaterial"></ui-prop>
+            <ui-prop id="use-gpu" type="dump" key="renderer.value.useGPU"></ui-prop>
+            <ui-prop type="dump" key="renderer.value.alignSpace"></ui-prop>
+        </ui-section>
     </div>
 </div>
 
@@ -486,6 +500,7 @@ const uiElements = {
                 const dump = this.getObjectByKey(this.dump.value, key);
                 const showflag = element.getAttribute('showflag');
                 const disableflag = element.getAttribute('disableflag');
+                let isDisable = false;
                 if (typeof showflag === 'string') {
                     // only update the elements relate to eventInstigator
                     if (eventInstigatorKey) {
@@ -628,6 +643,27 @@ const uiElements = {
             context.putImageData(imageData, 0, 0);
         },
     },
+    useGPU: {
+        changeState(useGPU) {
+            if (useGPU) {
+                this.$.cpuMaterial.setAttribute('state-disabled', '');
+                this.$.trailMaterial.setAttribute('state-disabled', '');
+                this.$.gpuMaterial.removeAttribute('state-disabled');
+            } else {
+                this.$.cpuMaterial.removeAttribute('state-disabled');
+                this.$.trailMaterial.removeAttribute('state-disabled');
+                this.$.gpuMaterial.setAttribute('state-disabled', '');
+            }
+        },
+        ready() {
+            this.$.useGPU.addEventListener('change', (event) => {
+                uiElements.useGPU.changeState(event.target.value);
+            });
+        },
+        update() {
+            uiElements.useGPU.changeState.call(this, this.dump.value.renderer.value.useGPU.value);
+        },
+    },
 };
 exports.$ = {
     customProps: '#customProps',
@@ -635,7 +671,10 @@ exports.$ = {
     showBounds: '#showBounds',
     resetBounds: '#resetBounds',
     noisePreview: '#noisePreview',
-
+    useGPU: '#use-gpu',
+    cpuMaterial: '.cpu-material',
+    gpuMaterial: '.gpu-material',
+    trailMaterial: '.trail-material',
 };
 exports.ready = function() {
     for (const key in uiElements) {
@@ -661,6 +700,15 @@ exports.style = /* css */`
     .particle-system-component ui-section .header ui-checkbox {
         margin-right: 4px;
     }
+    .trail-material[state-disabled] {
+        opacity: 0.5;
+    }
+    .gpu-material[state-disabled] {
+        opacity: 0.5;
+    }
+    .cpu-material[state-disabled] {
+        opacity: 0.5;
+    }
 `;
 
 exports.listeners = {
@@ -697,7 +745,6 @@ exports.listeners = {
             textureAnimationModule: 'A100007',
             'limitVelocityOvertimeModule.enable':'A100008',
             'trailModule.enable': 'A100009',
-            'renderer.useGPU': 'A100010',
         };
 
         const dumpKey = Object.keys(trackMap).find(key => dump.path.endsWith(key));