Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

V3.8.2 enable resize inspector preview area height #16219

Merged
merged 6 commits into from
Sep 22, 2023
Merged

V3.8.2 enable resize inspector preview area height #16219

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b5ec739
stash css style
arsen2010 Sep 6, 2023
7e4380c
Merge branch 'v3.8.2' of github.com:cocos/cocos-engine into v3.8.2
arsen2010 Sep 6, 2023
495a9da
use inspector-resize-preview to resize height
arsen2010 Sep 8, 2023
c1724e4
Merge branch 'v3.8.2' of github.com:cocos/cocos-engine into v3.8.2-as…
arsen2010 Sep 8, 2023
7d4fd58
delay broadcast fbx change tab
arsen2010 Sep 8, 2023
b70635b
change material-header layout
arsen2010 Sep 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions editor/inspector/assets/fbx/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */`
<div class="asset-fbx">
Expand Down Expand Up @@ -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);
});
Comment on lines +105 to +107
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why using setTimeout here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

因为 fbx 的头部区域也在初始化监听此广播事件，此为发送位置，需要等下监听位置初始化完成

},
},
};
Expand Down
3 changes: 1 addition & 2 deletions editor/inspector/assets/fbx/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion editor/inspector/assets/image-preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ 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;
Expand Down
18 changes: 10 additions & 8 deletions editor/inspector/assets/material-header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

exports.template = /* html */`
<div class="section">
<canvas></canvas>
<div class="tools">
<ui-select value="box" class="primitive">
<option>box</option>
Expand All @@ -15,20 +14,23 @@ exports.template = /* html */`
</ui-select>
<ui-checkbox checked>Light</ui-checkbox>
</div>
<canvas></canvas>
</div>
`;

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.$ = {
Expand Down Expand Up @@ -140,7 +142,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;
});
Expand Down
2 changes: 1 addition & 1 deletion editor/inspector/assets/material.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ exports.template = /* html */ `
<ui-prop>
<ui-label slot="label">Effect</ui-label>
<ui-select class="effect" slot="content"></ui-select>
<ui-button class="location" slot="content">
<ui-button class="location" slot="content" tooltip="i18n:ENGINE.assets.locate_asset">
<ui-icon value="location"></ui-icon>
</ui-button>
</ui-prop>
Expand Down
2 changes: 1 addition & 1 deletion editor/inspector/assets/mesh-preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion editor/inspector/assets/skeleton-preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
22 changes: 22 additions & 0 deletions editor/inspector/contributions/asset.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,11 +101,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;
}
Comment on lines +107 to 125
Copy link
Contributor

@doommm doommm Sep 21, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

avoid using unnecessary nested selector and it's better not to reply on specific DOM structure. make it clear, make it simple

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Specific structure selector can reduce false matches.


:host > .container > .content > .content-section {
flex: 1;
overflow: auto;
min-height: 200px;
}

:host > .container > .content > section > ui-panel {
Expand Down
19 changes: 11 additions & 8 deletions editor/inspector/contributions/asset.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,13 @@ exports.template = `
</ui-link>
</header>
<section class="content">
<section class="content-header"></section>
<section class="content-header">
<inspector-resize-preview area="header"></inspector-resize-preview>
</section>
<section class="content-section"></section>
<section class="content-footer"></section>
<section class="content-footer">
<inspector-resize-preview area="footer"></inspector-resize-preview>
</section>
</section>
</div>
`;
Expand Down Expand Up @@ -129,7 +133,7 @@ const Elements = {
if (panel.type === 'unknown') {
panel.metaList = [];
panel.metaListOrigin = [];
return false;
return;
}

try {
Expand Down Expand Up @@ -314,7 +318,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];
Expand All @@ -337,7 +341,6 @@ const Elements = {
contentRender.removeChild(contentRender.__panels__[i]);
}

contentRender.__panels__ = Array.from(contentRender.children);
try {
await Promise.all(
contentRender.__panels__.map(($panel) => {
Expand Down Expand Up @@ -390,9 +393,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) {
Expand Down
Loading