mirror/ObjToSchematic
2
0
Fork 1
mirror of https://github.com/LucasDower/ObjToSchematic.git synced 2025-02-17 13:39:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

* Updated vector components to use number inputs instead of spinboxes* Fixed file-input component not updating style when disabled* Renamed image component to match others* Fixed actions not disabling correctly

Browse Source
This commit is contained in:
Lucas Dower 2023-03-25 14:28:51 +00:00
parent 97ea5146b0
commit fbc8a45333
No known key found for this signature in database
GPG Key ID: B3EE6B8499593605
7 changed files with 36 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/ui/components/combobox.ts
View File

@ -67,8 +67,6 @@ export class ComboboxComponent<T> extends ConfigComponent<T, HTMLSelectElement>
protected _onValueChanged(): void {
super._onValueChanged();
console.log('combo changed');
}
protected _onEnabledChanged(): void {

6
src/ui/components/file_input.ts
View File

@ -55,6 +55,12 @@ export class FileComponent extends ConfigComponent<File, HTMLDivElement> {
this._updateStyles();
}
protected _onEnabledChanged(): void {
super._onEnabledChanged();
this._updateStyles();
}
protected override _updateStyles() {
const parsedPath = path.parse(this._loadedFilePath);
this._getElement().innerHTML = parsedPath.name + parsedPath.ext;

0
src/ui/components/image_element.ts → src/ui/components/image.ts
View File

2
src/ui/components/textured_material.ts
View File

@ -5,7 +5,7 @@ import { TTexelInterpolation } from '../../util/type_util';
import { HTMLBuilder } from '../misc';
import { ComboboxComponent } from './combobox';
import { ConfigComponent } from './config';
import { ImageComponent } from './image_element';
import { ImageComponent } from './image';
import { MaterialTypeComponent } from './material_type';
import { SliderComponent } from './slider';

85
src/ui/components/vector_spinbox.ts → src/ui/components/vector.ts
View File

@ -1,25 +1,16 @@
import { ASSERT } from '../../util/error_util';
import { TAxis } from '../../util/type_util';
import { UIUtil } from '../../util/ui_util';
import { Vector3 } from '../../vector';
import { ConfigComponent } from './config';
export class VectorSpinboxComponent extends ConfigComponent<Vector3, HTMLDivElement> {
export class VectorComponent extends ConfigComponent<Vector3, HTMLDivElement> {
private _mouseover: TAxis | null;
private _dragging: TAxis | null;
private _lastClientX: number;
private _showY: boolean;
private _wrap: number;
private _units: string | null;
public constructor() {
super(new Vector3(0, 0, 0));
this._mouseover = null;
this._dragging = null;
this._lastClientX = 0.0;
this._showY = true;
this._wrap = Infinity;
this._units = null;
}
/**
@ -30,43 +21,27 @@ export class VectorSpinboxComponent extends ConfigComponent<Vector3, HTMLDivElem
return this;
}
public setWrap(wrap: number) {
this._wrap = wrap;
return this;
}
public setUnits(units: string) {
this._units = units;
return this;
}
protected override _generateInnerHTML() {
let html = '';
html += '<div class="spinbox-main-container">';
html += `
<div class="spinbox-element-container">
<div class="spinbox-key" id="${this._getKeyId('x')}">X</div>
<div class="spinbox-value struct-prop" id="${this._getValueId('x')}">
${this.getValue().x}
</div>
<input type="number" class="spinbox-value struct-prop" min="-360" max="360" value="${this.getValue().x}" id="${this._getValueId('x')}"></input>
</div>
`;
if (this._showY) {
html += `
<div class="spinbox-element-container">
<div class="spinbox-key" id="${this._getKeyId('y')}">Y</div>
<div class="spinbox-value struct-prop" id="${this._getValueId('y')}">
${this.getValue().y}
</div>
<input type="number" class="spinbox-value struct-prop" min="-360" max="360" value="${this.getValue().y}" id="${this._getValueId('y')}"></input>
</div>
`;
}
html += `
<div class="spinbox-element-container">
<div class="spinbox-key" id="${this._getKeyId('z')}">Z</div>
<div class="spinbox-value struct-prop" id="${this._getValueId('z')}">
${this.getValue().z}
</div>
<input type="number" class="spinbox-value struct-prop" min="-360" max="360" value="${this.getValue().z}" id="${this._getValueId('z')}"></input>
</div>
`;
html += '</div>';
@ -101,27 +76,10 @@ export class VectorSpinboxComponent extends ConfigComponent<Vector3, HTMLDivElem
this._registerAxis('y');
}
this._registerAxis('z');
document.addEventListener('mousedown', (e: any) => {
if (this.enabled && this._mouseover !== null) {
this._dragging = this._mouseover;
this._lastClientX = e.clientX;
}
});
document.addEventListener('mousemove', (e: any) => {
if (this.enabled && this._dragging !== null) {
this._updateValue(e);
}
});
document.addEventListener('mouseup', () => {
this._dragging = null;
this._updateStyles();
});
}
private _updateValue(e: MouseEvent) {
/*
ASSERT(this.enabled, 'Not enabled');
ASSERT(this._dragging !== null, 'Dragging nothing');
@ -142,42 +100,47 @@ export class VectorSpinboxComponent extends ConfigComponent<Vector3, HTMLDivElem
break;
}
this._setValue(current);
*/
}
protected override _updateStyles(): void {
// Update keys
{
const elementXK = UIUtil.getElementById(this._getKeyId('x'));
elementXK.classList.remove('text-standard');
elementXK.classList.add(this.enabled ? 'text-standard' : 'text-dark');
const elementYK = UIUtil.getElementById(this._getKeyId('y'));
elementYK.classList.remove('text-standard');
elementYK.classList.add(this.enabled ? 'text-standard' : 'text-dark');
const elementZK = UIUtil.getElementById(this._getKeyId('z'));
elementZK.classList.remove('text-standard');
elementZK.classList.add(this.enabled ? 'text-standard' : 'text-dark');
}
const elementXV = UIUtil.getElementById(this._getValueId('x'));
const elementYV = UIUtil.getElementById(this._getValueId('y'));
const elementZV = UIUtil.getElementById(this._getValueId('z'));
// Update text
{
const current = this.getValue().copy();
elementXV.innerHTML = current.x.toString() + this._units;
if (elementYV) {
elementYV.innerHTML = current.y.toString() + this._units;
}
elementZV.innerHTML = current.z.toString() + this._units;
}
// Update styles
{
UIUtil.updateStyles(elementXV, {
isActive: false,
isEnabled: this.enabled,
isHovered: this._dragging === 'x' || (this._mouseover === 'x' && this._dragging === null),
isHovered: this._mouseover === 'x',
});
UIUtil.updateStyles(elementYV, {
isActive: false,
isEnabled: this.enabled,
isHovered: this._dragging === 'y' || (this._mouseover === 'y' && this._dragging === null),
isHovered: this._mouseover === 'y',
});
UIUtil.updateStyles(elementZV, {
isActive: false,
isEnabled: this.enabled,
isHovered: this._dragging === 'z' || (this._mouseover === 'z' && this._dragging === null),
isHovered: this._mouseover === 'z',
});
}
}

10
src/ui/layout.ts
View File

@ -26,7 +26,7 @@ import { SliderComponent } from './components/slider';
import { SolidMaterialComponent } from './components/solid_material';
import { TexturedMaterialComponent } from './components/textured_material';
import { ToolbarItemComponent } from './components/toolbar_item';
import { VectorSpinboxComponent } from './components/vector_spinbox';
import { VectorComponent } from './components/vector';
import { AppConsole } from './console';
import { AppIcons } from './icons';
import { HTMLBuilder, MiscComponents } from './misc';
@ -60,10 +60,8 @@ export class UI {
components: {
'input': new FileComponent()
.setLabel('3D Model (.obj, .gltf/.glb)'),
'rotation': new VectorSpinboxComponent()
.setLabel('Rotation')
.setWrap(360)
.setUnits('°'),
'rotation': new VectorComponent()
.setLabel('Rotation'),
},
componentOrder: ['input', 'rotation'],
execButton: new ButtonComponent()
@ -552,6 +550,8 @@ export class UI {
private _forEachComponent(action: EAction, functor: (component: ConfigComponent<unknown, unknown>) => void) {
const group = this._getGroup(action);
console.log(group);
for (const elementName of group.componentOrder) {
const element = group.components[elementName];
functor(element);

1
styles.css
View File

@ -328,7 +328,6 @@ select {
}
.spinbox-key {
color: #ffffffb9;
font-size: var(--font-size-standard);
padding-right: 5px;
}