zhangyuheng/ObjToSchematic
1
0
Fork 0
forked from mirror/ObjToSchematic
Code Pull Requests 1 Activity

Added slider for material alpha values

Browse Source
This commit is contained in:
Lucas Dower 2023-01-22 17:49:48 +00:00
parent 7d36f73c4a
commit 3b2d126264
No known key found for this signature in database
GPG Key ID: B3EE6B8499593605
4 changed files with 57 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/ui/elements/slider.ts
View File

@ -19,6 +19,7 @@ export class SliderElement extends ConfigUIElement<number, HTMLDivElement> {
private _dragging: boolean;
private _hovering: boolean;
private _internalValue: number;
private _small: boolean;
public constructor() {
super();
@ -29,6 +30,7 @@ export class SliderElement extends ConfigUIElement<number, HTMLDivElement> {
this._internalValue = 0.5;
this._dragging = false;
this._hovering = false;
this._small = false;
}
public override setDefaultValue(value: number) {
@ -37,6 +39,11 @@ export class SliderElement extends ConfigUIElement<number, HTMLDivElement> {
return this;
}
public setSmall() {
this._small = true;
return this;
}
/**
* Set the minimum value the slider can be set to.
*/
@ -123,12 +130,12 @@ export class SliderElement extends ConfigUIElement<number, HTMLDivElement> {
});
}
protected override _generateInnerHTML() {
public override _generateInnerHTML() {
const norm = (this._internalValue - this._min) / (this._max - this._min);
return `
<input class="slider-number-input" type="number" id="${this._getSliderValueId()}" min="${this._min}" max="${this._max}" step="${this._step}" value="${this.getValue().toFixed(this._decimals)}">
<div class="new-slider" id="${this._getId()}" style="flex-grow: 1;">
<input class="${this._small ? 'slider-height-small' : 'slider-height-normal'}" type="number" id="${this._getSliderValueId()}" min="${this._min}" max="${this._max}" step="${this._step}" value="${this.getValue().toFixed(this._decimals)}">
<div class="new-slider ${this._small ? 'slider-bar-height-small' : 'slider-bar-height-normal'} " id="${this._getId()}" style="flex-grow: 1;">
<div class="new-slider-bar" id="${this._getSliderBarId()}" style="width: ${norm * 100}%;">
</div>
</div>

17
src/ui/elements/solid_material_element.ts
View File

@ -4,11 +4,13 @@ import { getRandomID } from '../../util';
import { UIUtil } from '../../util/ui_util';
import { ConfigUIElement } from './config_element';
import { MaterialTypeElement } from './material_type_element';
import { SliderElement } from './slider';
export class SolidMaterialElement extends ConfigUIElement<SolidMaterial, HTMLDivElement> {
private _materialName: string;
private _colourId: string;
private _typeElement: MaterialTypeElement;
private _alphaElement: SliderElement;
public constructor(materialName: string, material: SolidMaterial) {
super(material);
@ -16,15 +18,28 @@ export class SolidMaterialElement extends ConfigUIElement<SolidMaterial, HTMLDiv
this._colourId = getRandomID();
this._typeElement = new MaterialTypeElement(MaterialType.solid);
this._alphaElement = new SliderElement()
.setMin(0.0)
.setMax(1.0)
.setDefaultValue(material.colour.a)
.setDecimals(2)
.setStep(0.01)
.setSmall();
}
public override registerEvents(): void {
this._typeElement.registerEvents();
this._alphaElement.registerEvents();
this._typeElement.onClickChangeTypeDelegate(() => {
this._onChangeTypeDelegate?.();
});
this._alphaElement.addValueChangedListener((newAlpha) => {
this.getValue().colour.a = newAlpha;
});
const swatchElement = UIUtil.getElementById(this._colourId) as HTMLInputElement;
swatchElement.addEventListener('change', () => {
const material = this.getValue();
@ -51,7 +66,7 @@ export class SolidMaterialElement extends ConfigUIElement<SolidMaterial, HTMLDiv
addSubproperty('Type', this._typeElement._generateInnerHTML());
addSubproperty('Colour', `<input class="colour-swatch" type="color" id="${this._colourId}" value="${RGBAUtil.toHexString(material.colour)}">`);
addSubproperty('Alpha', `${material.colour.a.toFixed(4)}`);
addSubproperty('Alpha', this._alphaElement._generateInnerHTML());
return `
<div class="subproperty-container">

17
src/ui/elements/textured_material_element.ts
View File

@ -4,6 +4,7 @@ import { ComboBoxElement } from './combobox';
import { ConfigUIElement } from './config_element';
import { ImageElement } from './image_element';
import { MaterialTypeElement } from './material_type_element';
import { SliderElement } from './slider';
export class TexturedMaterialElement extends ConfigUIElement<TexturedMaterial, HTMLDivElement> {
private _materialName: string;
@ -12,6 +13,7 @@ export class TexturedMaterialElement extends ConfigUIElement<TexturedMaterial, H
private _wrapElement: ComboBoxElement<'clamp' | 'repeat'>;
private _imageElement: ImageElement;
private _typeElement: MaterialTypeElement;
private _alphaElement: SliderElement;
public constructor(materialName: string, material: TexturedMaterial) {
super(material);
@ -33,6 +35,14 @@ export class TexturedMaterialElement extends ConfigUIElement<TexturedMaterial, H
this._imageElement = new ImageElement(material.path);
this._typeElement = new MaterialTypeElement(MaterialType.textured);
this._alphaElement = new SliderElement()
.setMin(0.0)
.setMax(1.0)
.setDefaultValue(material.alphaFactor)
.setDecimals(2)
.setStep(0.01)
.setSmall();
}
public override registerEvents(): void {
@ -40,6 +50,7 @@ export class TexturedMaterialElement extends ConfigUIElement<TexturedMaterial, H
this._typeElement.registerEvents();
this._filteringElement.registerEvents();
this._wrapElement.registerEvents();
this._alphaElement.registerEvents();
this._imageElement.addValueChangedListener((newPath) => {
const material = this.getValue();
@ -59,6 +70,10 @@ export class TexturedMaterialElement extends ConfigUIElement<TexturedMaterial, H
this._typeElement.onClickChangeTypeDelegate(() => {
this._onChangeTypeDelegate?.();
});
this._alphaElement.addValueChangedListener((newAlpha) => {
this.getValue().alphaFactor = newAlpha;
});
}
protected override _generateInnerHTML(): string {
@ -79,7 +94,7 @@ export class TexturedMaterialElement extends ConfigUIElement<TexturedMaterial, H
};
addSubproperty('Type', this._typeElement._generateInnerHTML());
addSubproperty('Alpha', material.alphaFactor.toFixed(4));
addSubproperty('Alpha', this._alphaElement._generateInnerHTML());
addSubproperty('File', this._imageElement._generateInnerHTML());
addSubproperty('Filtering', this._filteringElement._generateInnerHTML());
addSubproperty('Wrap', this._wrapElement._generateInnerHTML());

17
styles.css
View File

@ -174,10 +174,15 @@ canvas {
overflow: hidden;
}
.slider-number-input {
.slider-height-normal {
height: calc(var(--property-height) - 4px);
}
.slider-height-small {
height: calc(var(--subproperty-height) - 4px);
font-size: 100%;
}
input {
user-select: none;
margin-right: 3px;
@ -231,14 +236,22 @@ select:disabled {
color: var(--text-disabled);
}
.slider-bar-height-normal {
height: calc(var(--property-height) - 2px);
}
.slider-bar-height-small {
height: calc(var(--subproperty-height) - 2px);
}
.new-slider {
border-radius: var(--border-radius);
font-family: 'Lexend', sans-serif;
font-weight: 300;
background: var(--prop-standard);
cursor: ew-resize;
height: calc(var(--property-height) - 2px);
border: 1px solid var(--prop-bg);
overflow: hidden;
}
.new-slider-hover {
border: 1px solid rgba(255, 255, 255, 0.1) !important;