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

Added support for typing in slider values

Browse Source
This commit is contained in:
Lucas Dower 2022-10-24 18:54:58 +01:00
parent 48501d39aa
commit 95a92c7e0d
4 changed files with 57 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -7,14 +7,10 @@
</head>
<body>
<div class="progress-bar-container">
<div id="progress-bar" class="progress-bar" style="width:0%"></div>
</div>
<!-- The UI is dynamically built at runtime, see ./src/ui/layout.ts for details -->
<div class="column-properties" id="properties">
</div>
<div class="column-canvas">
<canvas id="canvas"></canvas>
<!-- The toolbar is dynamically built at runtime, see ./src/ui/layout.ts for details -->

21
src/ui/elements/label.ts
View File

@ -13,14 +13,19 @@ export class LabelElement {
}
public generateHTML(): string {
const description = false && this._description ? `<br><div style="font-weight: 300; font-size: 85%; color: var(--text-disabled);">
${this._description}
</div>` : '';
return `
<div class="prop-left" id="${this._id}">
${this._text}${description}
</div>
`;
if (this._description === undefined) {
return `
<div class="prop-left" id="${this._id}">
${this._text}
</div>
`;
} else {
return `
<div class="prop-left" id="${this._id}">
<abbr title="${this._description}">${this._text}</abbr>
</div>
`;
}
}
public setEnabled(isEnabled: boolean) {

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

@ -25,9 +25,7 @@ export class SliderElement extends LabelledElement<number> {
const norm = (this.getValue() - this._min) / (this._max - this._min);
return `
<div style="display: flex; flex-direction: row;">
<div class="slider-value" id="${this._id + '-value'}">
${this._value?.toFixed(this._decimals)}
</div>
<input type="number" id="${this._id}-value" min="${this._min}" max="${this._max}" step="${this._step}" value="${this.getValue().toFixed(this._decimals)}">
<div class="new-slider" id="${this._id}" style="flex-grow: 1;">
<div class="new-slider-bar" id="${this._id}-bar"style="width: ${norm * 100}%;">
</div>
@ -39,6 +37,7 @@ export class SliderElement extends LabelledElement<number> {
public registerEvents() {
const element = document.getElementById(this._id) as HTMLDivElement;
const elementBar = document.getElementById(this._id + '-bar') as HTMLDivElement;
const elementValue = document.getElementById(this._id + '-value') as HTMLInputElement;
ASSERT(element !== null);
element.onmouseenter = () => {
@ -84,6 +83,20 @@ export class SliderElement extends LabelledElement<number> {
this._onScrollSlider(e);
}
});
elementValue.addEventListener('change', () => {
this._onTypedValue();
});
}
private _onTypedValue() {
const elementValue = document.getElementById(this._id + '-value') as HTMLInputElement;
const typedNumber = parseFloat(elementValue.value);
if (!isNaN(typedNumber)) {
this._value = clamp(typedNumber, this._min, this._max);
}
this._onValueUpdated();
}
private _onScrollSlider(e: WheelEvent) {
@ -109,7 +122,7 @@ export class SliderElement extends LabelledElement<number> {
const box = element.getBoundingClientRect();
const left = box.x;
const right = box.x + box.width;
this._value = mapRange(e.clientX, left, right, this._min, this._max);
this._value = clamp(this._value, this._min, this._max);
@ -118,12 +131,12 @@ export class SliderElement extends LabelledElement<number> {
private _onValueUpdated() {
const elementBar = document.getElementById(this._id + '-bar') as HTMLDivElement;
const elementValue = document.getElementById(this._id + '-value') as HTMLDivElement;
const elementValue = document.getElementById(this._id + '-value') as HTMLInputElement;
ASSERT(elementBar !== null && elementValue !== null);
const norm = wayThrough(this.getValue(), this._min, this._max);
elementBar.style.width = `${norm * 100}%`;
elementValue.innerHTML = this.getValue().toFixed(this._decimals);
elementValue.value = this.getValue().toFixed(this._decimals);
}
public getDisplayValue() {
@ -135,17 +148,17 @@ export class SliderElement extends LabelledElement<number> {
const element = document.getElementById(this._id) as HTMLDivElement;
const elementBar = document.getElementById(this._id + '-bar') as HTMLDivElement;
const elementValue = document.getElementById(this._id + '-value') as HTMLDivElement;
const elementValue = document.getElementById(this._id + '-value') as HTMLInputElement;
ASSERT(element !== null && elementBar !== null && elementValue !== null);
if (this._isEnabled) {
element.classList.remove('new-slider-disabled');
elementBar.classList.remove('new-slider-bar-disabled');
elementValue.classList.remove('slider-value-disabled');
elementValue.disabled = false;
} else {
element.classList.add('new-slider-disabled');
elementBar.classList.add('new-slider-bar-disabled');
elementValue.classList.add('slider-value-disabled');
elementValue.disabled = true;
}
}
}

56
styles.css
View File

@ -88,6 +88,7 @@ canvas {
.prop-right {
flex-grow: 1;
padding: 0px 10px;
width: 0px;
}
@ -113,23 +114,25 @@ canvas {
overflow-wrap: anywhere;
}
.round-top {
border-radius: 8.5px 8.5px 0px 0px;
input {
margin-right: 3px;
border-radius: 5px;
border: 1px solid rgb(255, 255, 255, 0.0);
text-align: center;
background: var(--prop-standard);
font-family: 'Lexend', sans-serif;
font-weight: 300;
color: var(--text-standard);
outline-color: var(--prop-accent-hovered);
}
.round-bottom {
border-radius: 0px 0px 10px 10px;
border-width: 0.5px 0px 0px 0px;
input:disabled {
background: var(--prop-disabled);
color: var(--text-disabled);
}
code {
border-radius: 3px;
padding: 0px 5px;
margin: 0px 5px;
background: rgb(15, 15, 15);
font-size: 110%;
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
select {
@ -137,23 +140,22 @@ select {
height: 30px;
padding-left: 10px;
border-radius: 5px;
border: none;
font-family: 'Lexend', sans-serif;
font-weight: 300;
color: var(--text-standard);
background: var(--prop-standard);
border: 1px solid rgb(255, 255, 255, 0.0);
max-width: 100%;
outline-color: var(--prop-accent-hovered);
opacity: 1.0;
}
select:hover:enabled {
color: #C6C6C6;
background: var(--prop-hovered);
border: 1px solid rgb(255, 255, 255, 0.1);
}
select:disabled {
background: #282828 !important;
background: var(--prop-disabled) !important;
color: var(--text-disabled);
}
@ -172,22 +174,6 @@ select:disabled {
border: 1px solid rgb(255, 255, 255, 0.1);
}
.slider-value {
align-self: center;
font-weight: 300;
font-size: 85%;
margin-right: 8px;
color: var(--text-standard);
width: 20px;
text-align: center;
}
.slider-value-disabled {
color: var(--text-disabled);
}
.new-slider {
border-radius: 5px;
font-family: 'Lexend', sans-serif;