diff --git a/cocos/physics-2d/box2d-wasm/joints/joint-2d.ts b/cocos/physics-2d/box2d-wasm/joints/joint-2d.ts index 0f4c964861b..9d28ebc03e3 100644 --- a/cocos/physics-2d/box2d-wasm/joints/joint-2d.ts +++ b/cocos/physics-2d/box2d-wasm/joints/joint-2d.ts @@ -62,6 +62,13 @@ export class B2Joint implements IJoint2D { PhysicsSystem2D.instance._callAfterStep(this, this._init); } + apply (): void { + PhysicsSystem2D.instance._callAfterStep(this, this.destroy); + if (this.comp!.enabledInHierarchy) { + PhysicsSystem2D.instance._callAfterStep(this, this._init); + } + } + _init (): void { if (this._inited) return; diff --git a/cocos/physics-2d/box2d/joints/joint-2d.ts b/cocos/physics-2d/box2d/joints/joint-2d.ts index 8aa60b35467..9cf1d9b7087 100644 --- a/cocos/physics-2d/box2d/joints/joint-2d.ts +++ b/cocos/physics-2d/box2d/joints/joint-2d.ts @@ -62,6 +62,13 @@ export class b2Joint implements IJoint2D { PhysicsSystem2D.instance._callAfterStep(this, this._init); } + apply (): void { + PhysicsSystem2D.instance._callAfterStep(this, this._destroy); + if (this.comp!.enabledInHierarchy) { + PhysicsSystem2D.instance._callAfterStep(this, this._init); + } + } + _init (): void { if (this._inited) return; diff --git a/cocos/physics-2d/framework/components/joints/joint-2d.ts b/cocos/physics-2d/framework/components/joints/joint-2d.ts index 57e2d0285a0..dd4653afc0e 100644 --- a/cocos/physics-2d/framework/components/joints/joint-2d.ts +++ b/cocos/physics-2d/framework/components/joints/joint-2d.ts @@ -81,7 +81,7 @@ export class Joint2D extends Component { * @zh * 关节所绑定的刚体组件。 */ - _body: RigidBody2D | null = null + _body: RigidBody2D | null = null; get body (): RigidBody2D | null { return this._body; } @@ -132,4 +132,16 @@ export class Joint2D extends Component { this._joint.onDestroy(); } } + + /** + * @en + * If the physics engine is box2d, need to call this function to apply current changes to joint, this will regenerate inner box2d joint. + * @zh + * 如果物理引擎是 box2d, 需要调用此函数来应用当前 joint 中的修改。 + */ + apply (): void { + if (this._joint && this._joint.apply) { + this._joint.apply(); + } + } } diff --git a/cocos/physics-2d/framework/physics-selector.ts b/cocos/physics-2d/framework/physics-selector.ts index 958ae1da47b..443f778831d 100644 --- a/cocos/physics-2d/framework/physics-selector.ts +++ b/cocos/physics-2d/framework/physics-selector.ts @@ -297,6 +297,7 @@ const ENTIRE_JOINT: IEntireJoint = { impl: null, initialize: FUNC, + apply: FUNC, setDampingRatio: FUNC, setFrequency: FUNC, diff --git a/cocos/physics-2d/spec/i-physics-joint.ts b/cocos/physics-2d/spec/i-physics-joint.ts index 67b5d7cd999..ae23b558420 100644 --- a/cocos/physics-2d/spec/i-physics-joint.ts +++ b/cocos/physics-2d/spec/i-physics-joint.ts @@ -22,15 +22,13 @@ THE SOFTWARE. */ - - import { IVec2Like } from '../../core'; import { ILifecycle } from '../../physics/spec/i-lifecycle'; import { Joint2D, RigidBody2D } from '../framework'; export interface IJoint2D extends ILifecycle { readonly impl: any; - + apply (): void; initialize (v: Joint2D): void; } diff --git a/editor/i18n/en/components.js b/editor/i18n/en/components.js index 6f2d6c36cc0..6d974cfb90d 100644 --- a/editor/i18n/en/components.js +++ b/editor/i18n/en/components.js @@ -46,5 +46,7 @@ module.exports = { applyCameraSizeLessThanMinimum: 'Current screen ratio is less than its limit, applying current minimum instead. Please reduce lower LOD levels screen size and try again later.', applyCameraSizeGreaterThanMaximum: 'Current screen ratio is greater than its limit, applying current maximum instead. Please Increase higher LOD levels screen size and try again later.', }, + + blockInputEventsTip: 'This component will block all input events, preventing the input from penetrating to other nodes below the screen, typically for the background of the top-level UI of the screen.', }, }; diff --git a/editor/i18n/zh/components.js b/editor/i18n/zh/components.js index c0b0768836e..583aa2579e5 100644 --- a/editor/i18n/zh/components.js +++ b/editor/i18n/zh/components.js @@ -42,5 +42,7 @@ module.exports = { applyCameraSizeLessThanMinimum: '当前屏占比小于目前层级能使用的最小值，无法设置，设置为目前层级能使用的最小值。请更新更低 LOD 层级的屏幕尺寸之后再次尝试。', applyCameraSizeGreaterThanMaximum: '当前屏占比大于目前层级能使用的最大值，无法设置，设置为目前层级能使用的最大值。请更新更高 LOD 层级的屏幕尺寸之后再次尝试。', }, + + blockInputEventsTip: '该组件将拦截所有输入事件，防止输入穿透到屏幕下方的其它节点，一般用于屏幕上层 UI 的背景。', }, }; diff --git a/editor/inspector/assets/fbx/index.js b/editor/inspector/assets/fbx/index.js index c1e2860ab3b..d06d56f2fe7 100644 --- a/editor/inspector/assets/fbx/index.js +++ b/editor/inspector/assets/fbx/index.js @@ -2,7 +2,8 @@ const path = require('path'); const { injectionStyle } = require('../../utils/prop'); -let cacheActiveTab = 'animation'; +const defaultActiveTab = 'animation'; +let cacheActiveTab = defaultActiveTab; exports.template = /* html */`
@@ -97,9 +98,13 @@ const Elements = { }, update() { const panel = this; - Editor.Message.broadcast('fbx-inspector:change-tab', panel.activeTab); panel.$.tabPanel.setAttribute('src', Components[panel.activeTab]); panel.$.tabPanel.update(panel.assetList, panel.metaList); + + // Delay, waiting for the fbx preview area initialization to complete + setTimeout(() => { + Editor.Message.broadcast('fbx-inspector:change-tab', panel.activeTab); + }); }, }, }; diff --git a/editor/inspector/assets/fbx/preview.js b/editor/inspector/assets/fbx/preview.js index a19ecff5a3e..27601e33a94 100644 --- a/editor/inspector/assets/fbx/preview.js +++ b/editor/inspector/assets/fbx/preview.js @@ -74,7 +74,6 @@ exports.style = /* css*/` } .preview-container { min-height: 200px; - border-top: 1px solid var(--color-normal-border); } .preview-container > .animation-info { padding-right: 4px; @@ -96,7 +95,7 @@ exports.style = /* css*/` margin-right: 6px; } .preview-container > .image { - height: 200px; + height: var(--inspector-footer-preview-height, 200px); overflow: hidden; display: flex; flex: 1; diff --git a/editor/inspector/assets/image-preview.js b/editor/inspector/assets/image-preview.js index 227e8dd892d..e9f77ecf123 100644 --- a/editor/inspector/assets/image-preview.js +++ b/editor/inspector/assets/image-preview.js @@ -11,10 +11,9 @@ exports.template = /* html */` exports.style = /* css */` .image-preview { - height: 200px; + height: var(--inspector-footer-preview-height, 200px); background: var(--color-normal-fill-emphasis); display: flex; - padding: 4px; position: relative; box-sizing: border-box; } diff --git a/editor/inspector/assets/material-header.js b/editor/inspector/assets/material-header.js index f0ab30cb00b..a008efd9069 100644 --- a/editor/inspector/assets/material-header.js +++ b/editor/inspector/assets/material-header.js @@ -1,34 +1,41 @@ 'use strict'; +const previewParams = { + shape: 'sphere', + light: true, +}; + exports.template = /* html */`
-
- - + + - Light + Light
+
`; exports.style = /* css */` :host > .section { - height: 200px; - padding: 4px 0 4px 4px; - box-sizing: border-box; display: flex; + flex-direction: column; + height: var(--inspector-header-preview-height, 200px); + padding: 4px; + box-sizing: border-box; background: var(--color-normal-fill); - border-bottom: 1px solid var(--color-normal-border); } -:host > .section > canvas { flex: 1; min-width: 0; } -:host > .section > .tools { display: flex; flex-direction: column; padding: 0 4px; } +:host > .section > canvas { flex: 1; max-height: 100%; aspect-ratio: auto; } +:host > .section > .tools { display: flex; margin-bottom: 4px; } +:host > .section > .tools > ui-select { flex: 1; } +:host > .section > .tools > ui-checkbox { margin-left: 4px; } `; exports.$ = { @@ -96,15 +103,20 @@ exports.ready = async function() { const panel = this; callMaterialPreviewFunction('resetCamera'); - callMaterialPreviewFunction('setLightEnable', true); - panel.$.light.addEventListener('confirm', async () => { - await callMaterialPreviewFunction('setLightEnable', this.$.light.checked); + + panel.$.light.value = previewParams.light; + callMaterialPreviewFunction('setLightEnable', previewParams.light); + panel.$.light.addEventListener('confirm', async (event) => { + previewParams.light = event.target.value; + await callMaterialPreviewFunction('setLightEnable', previewParams.light); panel.isPreviewDataDirty = true; }); - callMaterialPreviewFunction('setPrimitive', 'box'); - panel.$.primitive.addEventListener('confirm', async () => { - await callMaterialPreviewFunction('setPrimitive', this.$.primitive.value); + panel.$.primitive.value = previewParams.shape; + callMaterialPreviewFunction('setPrimitive', previewParams.shape); + panel.$.primitive.addEventListener('confirm', async (event) => { + previewParams.shape = event.target.value; + await callMaterialPreviewFunction('setPrimitive', previewParams.shape); panel.isPreviewDataDirty = true; }); @@ -140,7 +152,7 @@ exports.ready = async function() { panel.$.canvas.addEventListener('wheel', async (event) => { await callMaterialPreviewFunction('onMouseWheel', { wheelDeltaY: event.wheelDeltaY, - wheelDeltaX: event.wheelDeltaX + wheelDeltaX: event.wheelDeltaX, }); panel.isPreviewDataDirty = true; }); diff --git a/editor/inspector/assets/material.js b/editor/inspector/assets/material.js index 5ca424d74e8..4d5d9add58a 100644 --- a/editor/inspector/assets/material.js +++ b/editor/inspector/assets/material.js @@ -97,7 +97,7 @@ exports.template = /* html */ ` Effect - + diff --git a/editor/inspector/assets/mesh-preview.js b/editor/inspector/assets/mesh-preview.js index a69fd881961..d8f92e2c8e4 100644 --- a/editor/inspector/assets/mesh-preview.js +++ b/editor/inspector/assets/mesh-preview.js @@ -37,7 +37,7 @@ exports.style = /* css */` margin-right: 6px; } .preview > .image { - height: 200px; + height: var(--inspector-footer-preview-height, 200px); overflow: hidden; display: flex; flex: 1; diff --git a/editor/inspector/assets/skeleton-preview.js b/editor/inspector/assets/skeleton-preview.js index f588382f703..d29fbc990e5 100644 --- a/editor/inspector/assets/skeleton-preview.js +++ b/editor/inspector/assets/skeleton-preview.js @@ -22,7 +22,7 @@ exports.style = /* css */` margin-right: 6px; } .preview > .image { - height: 200px; + height: var(--inspector-footer-preview-height, 200px); overflow: hidden; display: flex; flex: 1; diff --git a/editor/inspector/assets/texture-cube.js b/editor/inspector/assets/texture-cube.js index ff47207fbc7..d38f77da78c 100644 --- 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`); + } }); } diff --git a/editor/inspector/components.js b/editor/inspector/components.js index 1dd378709ac..9aa9232a313 100644 --- a/editor/inspector/components.js +++ b/editor/inspector/components.js @@ -22,4 +22,5 @@ module.exports = { 'cc.Widget': join(__dirname, './components/widget.js'), 'cc.Class': join(__dirname, './components/class.js'), 'cc.LODGroup': join(__dirname, './components/lod-group/index.js'), + 'cc.BlockInputEvents': join(__dirname, './components/block-input-events.js'), }; diff --git a/editor/inspector/components/block-input-events.js b/editor/inspector/components/block-input-events.js new file mode 100644 index 00000000000..a49cf0a85f2 --- /dev/null +++ b/editor/inspector/components/block-input-events.js @@ -0,0 +1,18 @@ +const { $, update, close } = require('./base'); + +exports.style = /* css */` + .block-input-events { + border: 1px solid var(--color-default-border-weaker); + border-radius: 4px; + margin: 8px; + padding: 8px; + } +`; + +exports.template =/* html */ ` +
+ +
`; +exports.$ = $; +exports.update = update; +exports.close = close; diff --git a/editor/inspector/contributions/asset.css b/editor/inspector/contributions/asset.css index b2f571b24f1..5b2da992ce2 100644 --- a/editor/inspector/contributions/asset.css +++ b/editor/inspector/contributions/asset.css @@ -62,6 +62,11 @@ opacity: 0.55; } +:host > .container > .header > .location { + display: none; + margin-right: 4px; +} + :host > .container > .header > .copy { margin-right: 4px; } @@ -101,11 +106,33 @@ display: flex; flex-direction: column; overflow: hidden; + position: relative; +} + +:host > .container > .content > section > inspector-resize-preview { + position: absolute; + left: 0; + right: 0; + z-index: 10; +} + +:host > .container > .content > section > inspector-resize-preview[area="header"] { + bottom: 0; +} + +:host > .container > .content > section > inspector-resize-preview[area="footer"] { + top: 0; +} + +:host > .container > .content > .content-header, +:host > .container > .content > .content-footer { + max-height: 80vh; } :host > .container > .content > .content-section { flex: 1; overflow: auto; + min-height: 200px; } :host > .container > .content > section > ui-panel { @@ -118,6 +145,10 @@ min-height: 0; } +:host([uuid]) > .container > .header > .location { + display: inline-flex; +} + :host([sub-type="material"]) > .container > .content, :host([sub-type="gltf-material"]) > .container > .content { padding-top: 0; diff --git a/editor/inspector/contributions/asset.js b/editor/inspector/contributions/asset.js index 255b025959c..82a0b596fd5 100644 --- a/editor/inspector/contributions/asset.js +++ b/editor/inspector/contributions/asset.js @@ -21,6 +21,9 @@ exports.template = ` + + + @@ -29,9 +32,13 @@ exports.template = `
-
+
+ +
-
+
+ +
`; @@ -40,6 +47,7 @@ exports.$ = { container: '.container', header: '.header', content: '.content', + location: '.location', copy: '.copy', icon: '.icon', image: '.image', @@ -129,7 +137,7 @@ const Elements = { if (panel.type === 'unknown') { panel.metaList = []; panel.metaListOrigin = []; - return false; + return; } try { @@ -231,6 +239,13 @@ const Elements = { Editor.Message.request('assets', 'ui-kit:touch-asset', uuid); }); }); + + panel.$.location.addEventListener('click', (event) => { + event.stopPropagation(); + panel.uuidList.forEach((uuid) => { + Editor.Message.request('assets', 'ui-kit:touch-asset', uuid); + }); + }); }, update() { const panel = this; @@ -314,7 +329,7 @@ const Elements = { for (const renderName in panel.contentRenders) { const { list, contentRender } = panel.contentRenders[renderName]; - contentRender.__panels__ = Array.from(contentRender.children); + contentRender.__panels__ = Array.from(contentRender.children).filter((el) => el.tagName === 'UI-PANEL'); let i = 0; for (i; i < list.length; i++) { const file = list[i]; @@ -337,7 +352,6 @@ const Elements = { contentRender.removeChild(contentRender.__panels__[i]); } - contentRender.__panels__ = Array.from(contentRender.children); try { await Promise.all( contentRender.__panels__.map(($panel) => { @@ -390,9 +404,9 @@ exports.methods = { } return { - uuidListStr:JSON.stringify(panel.uuidList), - metaListStr:JSON.stringify(panel.metaList), - renderDataStr:JSON.stringify(renderData), + uuidListStr: JSON.stringify(panel.uuidList), + metaListStr: JSON.stringify(panel.metaList), + renderDataStr: JSON.stringify(renderData), }; }, restore(record) { diff --git a/editor/inspector/contributions/node.js b/editor/inspector/contributions/node.js index 171a1093c3b..d0437f39422 100644 --- a/editor/inspector/contributions/node.js +++ b/editor/inspector/contributions/node.js @@ -249,15 +249,13 @@ exports.listeners = { } /** - * Hack：stop preview - * For the reason: preview-set-property and cancel-preview-set-property is command machining. - * Changes between component properties are not controlled to be strictly reversible. - * So stop preview some properties. + * Some assets don`t need to preview, like: + * cc.AnimationClip */ - const stopPreviewOnTheseTooltips = [ - 'i18n:ENGINE.animation.default_clip', + const notNeedToPreview = [ + 'cc.AnimationClip', ]; - if (stopPreviewOnTheseTooltips.includes(dump.tooltip)) { + if (notNeedToPreview.includes(dump.type)) { return; }