Skip to content

Commit

Permalink
matdbg: add option to hide inactive materials and variants (#8339)
Browse files Browse the repository at this point in the history 
The option will persist beyond user sessions through localStorage.
  • Loading branch information
@poweifeng
poweifeng authored Jan 7, 2025
1 parent a003d37 commit f0b9a30
Showing 1 changed file with 86 additions and 12 deletions.
98 changes: 86 additions & 12 deletions libs/matdbg/web/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -452,6 +452,7 @@ class AdvancedOptions extends LitElement {
static get properties() {
return {
currentBackend: {type: String, attribute: 'current-backend'},
hideInactiveVariants: {type: Boolean, attribute: 'hide-inactive-variants'},
availableBackends: {type: Array, state: true},
};
}
Expand All @@ -470,6 +471,9 @@ class AdvancedOptions extends LitElement {
justify-content: center;
align-items: flex-start;
}
.borderless {
border: 1px solid rgba(0,0,0,0);
}
label {
display: flex;
flex-direction: row;
Expand All @@ -486,6 +490,35 @@ class AdvancedOptions extends LitElement {
.option-heading {
margin-bottom: 5px;
}
/* Below is a custom checkbox */
input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
background-color: var(--form-background);
margin-right: 5px;
font: inherit;
width: 1.15em;
height: 1.15em;
border: 0.15em solid ${unsafeCSS(UNSELECTED_COLOR)};
border-radius: 0.15em;
display: grid;
place-content: center;
}
input[type="checkbox"]::before {
content: "";
width: 0.65em;
height: 0.65em;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
transform: scale(0);
transform-origin: bottom left;
box-shadow: inset 1em 1em var(--form-control-color);
/* Windows High Contrast Mode */
background-color: ${unsafeCSS(FOREGROUND_COLOR)};
}
input[type="checkbox"]:checked::before {
transform: scale(1);
}
`;
}

Expand Down Expand Up @@ -536,6 +569,25 @@ class AdvancedOptions extends LitElement {
`;
}

_hideInactiveVariantsOption() {
const onChange = (ev) => {
this.dispatchEvent(
new CustomEvent(
'option-hide-inactive-variants',
{detail: null, bubbles: true, composed: true}));
}
return html`
<div class="option borderless">
<!--<div class="option-heading">Current Backend</div>-->
<form action="" id="hide-inactive-variants-form">
<input type="checkbox" name="InactiveVariants"
?checked=${this.hideInactiveVariants} @change=${onChange}/>
Hide Inactive Variants
</form>
</div>
`;
}

constructor() {
super();
this.availableBackends = [];
Expand All @@ -544,6 +596,7 @@ class AdvancedOptions extends LitElement {
render() {
return html`
<menu-section title="Advanced Options">
${this._hideInactiveVariantsOption() ?? nothing}
${this._backendOption() ?? nothing}
</menu-section>
`;
Expand Down Expand Up @@ -613,11 +666,11 @@ class MaterialSidePanel extends LitElement {
currentShaderIndex: {type: Number, attribute: 'current-shader-index'},
currentBackend: {type: String, attribute: 'current-backend'},
currentLanguage: {type: String, attribute: 'current-language'},
hideInactiveVariants: {type: Boolean, attribute: 'hide-inactive-variants'},

database: {type: Object, state: true},
materials: {type: Array, state: true},
activeShaders: {type: Object, state: true},

variants: {type: Array, state: true},
}
}
Expand Down Expand Up @@ -747,6 +800,7 @@ class MaterialSidePanel extends LitElement {
if (b.active && !a.active) return 1;
return 0;
})
.filter((variant) => (!this.hideInactiveVariants || variant.shader.active))
.map((variant) => {
let divClass = 'material_variant_language';
const shaderIndex = +variant.shader.index;
Expand Down Expand Up @@ -778,7 +832,13 @@ class MaterialSidePanel extends LitElement {

render() {
const sections = (title, domain) => {
const mats = this.materials.filter((m) => m.domain == domain).map((mat) => {
const mats = this.materials
.filter((m) => m.domain == domain)
.filter((mat) => {
const material = this.database[mat.matid];
return !this.hideInactiveVariants || material.active;
})
.map((mat) => {
const material = this.database[mat.matid];
const onClick = this._handleMaterialClick.bind(this, mat.matid);
let divClass = 'material_variant_language';
Expand Down Expand Up @@ -806,15 +866,13 @@ class MaterialSidePanel extends LitElement {
}
return null;
};
let advancedOptions = null;
// Currently we only have one advanced option and it's only for when we're in matinfo
if (_isMatInfoMode(this.database)) {
advancedOptions =
(() => html`
<advanced-options id="advanced-options"
current-backend=${this.currentBackend}></advanced-options>
`)();
}
const advancedOptions =
(() => html`
<advanced-options id="advanced-options"
current-backend=${this.currentBackend}
?hide-inactive-variants=${this.hideInactiveVariants}
></advanced-options>
`)();

return html`
<style>${this.dynamicStyle()}</style>
Expand Down Expand Up @@ -874,6 +932,12 @@ class MatdbgViewer extends LitElement {

let materials = await fetchMaterials();
this.database = materials;

// This is the user preferences stored in localStorage
let hideInactiveVariantsVal = localStorage.getItem('option-hide-inactive-variants');
if (hideInactiveVariantsVal != null) {
this.hideInactiveVariants = hideInactiveVariantsVal == 'true';
}
}

_getShader() {
Expand Down Expand Up @@ -907,6 +971,7 @@ class MatdbgViewer extends LitElement {
this.currentMaterial = null;
this.currentLanguage = null;
this.currentBackend = null;
this.hideInactiveVariants = false;
this.init();

this.addEventListener('select-material',
Expand Down Expand Up @@ -957,6 +1022,12 @@ class MatdbgViewer extends LitElement {
}
);

this.addEventListener('option-hide-inactive-variants',
(ev) => {
this.hideInactiveVariants = !this.hideInactiveVariants;
localStorage.setItem('option-hide-inactive-variants', "" + this.hideInactiveVariants);
}
);
addEventListener('resize', this._onResize.bind(this));
}

Expand All @@ -972,6 +1043,8 @@ class MatdbgViewer extends LitElement {
currentBackend: {type: String, state: true},
codeViewerExpectedWidth: {type: Number, state: true},
codeViewerExpectedHeight: {type: Number, state: true},

hideInactiveVariants: {type: Boolean, state: true},
}
}

Expand Down Expand Up @@ -1085,7 +1158,8 @@ class MatdbgViewer extends LitElement {
current-language="${this.currentLanguage}"
current-shader-index="${this.currentShaderIndex}"
current-material="${this.currentMaterial}"
current-backend="${this.currentBackend}" >
current-backend="${this.currentBackend}"
?hide-inactive-variants="${this.hideInactiveVariants}" >
</material-sidepanel>
<code-viewer id="code-viewer"
?active=${shader && shader.active}
Expand Down

0 comments on commit f0b9a30

Please sign in to comment.