fix edit texture-cube bug (#16260)

* fix edit texture-cube bug * recover partial code
cocos · Sep 22, 2023 · 8485880 · 8485880
1 parent fccaa94
commit 8485880
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/editor/inspector/assets/image-preview.js b/editor/inspector/assets/image-preview.js
@@ -14,7 +14,6 @@ exports.style = /* css */`
         height: 200px;
         background: var(--color-normal-fill-emphasis);
         display: flex;
-        padding: 4px;
         position: relative;
         box-sizing: border-box;
     }

diff --git a/editor/inspector/assets/texture-cube.js b/editor/inspector/assets/texture-cube.js
@@ -133,6 +133,8 @@ const Elements = {
                 image.setAttribute('droppable', 'cc.ImageAsset');
                 image.setAttribute('class', key);
                 image.setAttribute('placeholder', key);
+                image.setAttribute('show-alpha', '');
+                image.setAttribute('fill', '');
                 image.addEventListener('confirm', panel.change.bind(panel, key));
 
                 panel.$[`${key}-drag-item`] = dragItem;
@@ -142,9 +144,13 @@ const Elements = {
             function observer() {
                 cancelAnimationFrame(panel.animationFrameId);
                 panel.animationFrameId = window.requestAnimationFrame(() => {
-                    const { clientWidth, clientHeight } = panel.$.container;
-                    const size = Math.round(Math.min((clientWidth - 40) / 4, (clientHeight - 40) / 3));
-                    panel.$.container.style.setProperty('--size', `${size}px`);
+                    const { clientWidth } = panel.$.container;
+                    const size = Math.round((clientWidth - 40) / 4);
+                    // 16 is fault tolerance to avoid page scrollbar flickering
+                    if (Math.abs((panel.cachePrevWidth || 0) - clientWidth) > 16) {
+                        panel.cachePrevWidth = clientWidth;
+                        panel.$.container.style.setProperty('--size', `${size}px`);
+                    }
                 });
             }