Gittes-archive/LucasDower_ObjToSchematic
2
0
Fork 0
mirror of https://github.com/LucasDower/ObjToSchematic.git synced 2025-12-11 20:15:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

Refactored label element into the config element

Browse Source
This commit is contained in:
Lucas Dower 2023-03-02 18:10:54 +00:00
parent 41bea98e27
commit f5a33746a1
No known key found for this signature in database
GPG Key ID: B3EE6B8499593605
4 changed files with 20 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/ui/elements/checkbox.ts
View File

@ -54,14 +54,14 @@ export class CheckboxElement extends ConfigUIElement<boolean, HTMLSelectElement>
<path d="M5 12l5 5l10 -10" />
</svg>
</div>
<div class="checkbox-text" id="${this._getLabelId()}">${this.getValue() ? this._labelChecked : this._labelUnchecked}</div>
<div class="checkbox-text" id="${this._getTextId()}">${this.getValue() ? this._labelChecked : this._labelUnchecked}</div>
`;
}
protected override _onValueChanged(): void {
const checkboxElement = this._getElement();
const checkboxPipElement = UIUtil.getElementById(this._getPipId());
const checkboxTextElement = UIUtil.getElementById(this._getLabelId());
const checkboxTextElement = UIUtil.getElementById(this._getTextId());
checkboxTextElement.innerHTML = this.getValue() ? this._labelChecked : this._labelUnchecked;
checkboxPipElement.style.visibility = this.getValue() ? 'visible' : 'hidden';
@ -78,7 +78,7 @@ export class CheckboxElement extends ConfigUIElement<boolean, HTMLSelectElement>
const checkboxElement = this._getElement();
const checkboxPipElement = UIUtil.getElementById(this._getPipId());
const checkboxTextElement = UIUtil.getElementById(this._getLabelId());
const checkboxTextElement = UIUtil.getElementById(this._getTextId());
if (this.getEnabled()) {
checkboxElement.classList.remove('checkbox-disabled');
@ -95,7 +95,7 @@ export class CheckboxElement extends ConfigUIElement<boolean, HTMLSelectElement>
return this._getId() + '-pip';
}
private _getLabelId() {
private _getTextId() {
return this._getId() + '-label';
}
}

32
src/ui/elements/config_element.ts
View File

@ -1,6 +1,6 @@
import { ASSERT } from '../../util/error_util';
import { UIUtil } from '../../util/ui_util';
import { BaseUIElement } from './base_element';
import { LabelElement } from './label';
/**
* A `ConfigUIElement` is a UI element that has a value the user can change.
@ -8,9 +8,6 @@ import { LabelElement } from './label';
*/
export abstract class ConfigUIElement<T, F> extends BaseUIElement<F> {
private _label: string;
private _description?: string;
private _labelElement: LabelElement;
private _hasLabel: boolean;
private _value?: T;
private _cachedValue?: T;
private _onValueChangedListeners: Array<(newValue: T) => void>;
@ -19,9 +16,7 @@ export abstract class ConfigUIElement<T, F> extends BaseUIElement<F> {
public constructor(defaultValue?: T) {
super();
this._value = defaultValue;
this._label = 'unknown';
this._hasLabel = false;
this._labelElement = new LabelElement(this._label, this._description);
this._label = '';
this._onValueChangedListeners = [];
this._onEnabledChangedListeners = [];
}
@ -32,14 +27,7 @@ export abstract class ConfigUIElement<T, F> extends BaseUIElement<F> {
}
public setLabel(label: string) {
this._hasLabel = true;
this._label = label;
this._labelElement = new LabelElement(this._label, this._description);
return this;
}
public setDescription(text: string) {
this._labelElement = new LabelElement(this._label, text);
return this;
}
@ -93,7 +81,9 @@ export abstract class ConfigUIElement<T, F> extends BaseUIElement<F> {
public override generateHTML() {
return `
<div class="property">
${this._labelElement.generateHTML()}
<div class="prop-key-container" id="${this._getLabelId()}">
${this._label}
</div>
<div class="prop-value-container">
${this._generateInnerHTML()}
</div>
@ -107,8 +97,12 @@ export abstract class ConfigUIElement<T, F> extends BaseUIElement<F> {
protected abstract _generateInnerHTML(): string;
protected override _onEnabledChanged() {
if (this._hasLabel) {
this._labelElement.setEnabled(this.getEnabled());
const label = UIUtil.getElementById(this._getLabelId()) as HTMLDivElement;
if (this.getEnabled()) {
label.classList.remove('text-disabled');
} else {
label.classList.add('text-disabled');
}
this._onEnabledChangedListeners.forEach((listener) => {
@ -132,4 +126,8 @@ export abstract class ConfigUIElement<T, F> extends BaseUIElement<F> {
* A delegate that is called when the value of this element changes.
*/
protected abstract _onValueChanged(): void;
private _getLabelId() {
return this._getId() + '_label';
}
}

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

@ -1,41 +0,0 @@
import { getRandomID } from '../../util';
import { ASSERT } from '../../util/error_util';
export class LabelElement {
private _id: string;
private _text: string;
private _description?: string;
constructor(text: string, description?: string) {
this._id = getRandomID();
this._text = text;
this._description = description;
}
public generateHTML(): string {
if (this._description === undefined) {
return `
<div class="prop-key-container" id="${this._id}">
${this._text}
</div>
`;
} else {
return `
<div class="prop-key-container" id="${this._id}">
<abbr title="${this._description}">${this._text}</abbr>
</div>
`;
}
}
public setEnabled(isEnabled: boolean) {
const element = document.getElementById(this._id) as HTMLDivElement;
ASSERT(element !== null);
if (isEnabled) {
element.classList.remove('prop-key-container-disabled');
} else {
element.classList.add('prop-key-container-disabled');
}
}
}

2
styles.css
View File

@ -100,7 +100,7 @@ canvas {
overflow: auto;
}
.prop-key-container-disabled {
.text-disabled {
color: var(--text-disabled) !important;
}