From 41bea98e27f4e25eb0a2dce2eedb2e408bca90dc Mon Sep 17 00:00:00 2001 From: Lucas Dower Date: Thu, 2 Mar 2023 17:58:41 +0000 Subject: [PATCH] Minor refactor to UI building --- src/config.ts | 2 +- src/ui/elements/config_element.ts | 8 +- src/ui/layout.ts | 125 +++++++++++++++--------------- src/ui/misc.ts | 24 ++++++ 4 files changed, 91 insertions(+), 68 deletions(-) diff --git a/src/config.ts b/src/config.ts index 09baf8f..30caf6d 100644 --- a/src/config.ts +++ b/src/config.ts @@ -11,7 +11,7 @@ export class AppConfig { public readonly RELEASE_MODE = true; public readonly MAJOR_VERSION = 0; public readonly MINOR_VERSION = 7; - public readonly HOTFIX_VERSION = 9; + public readonly HOTFIX_VERSION = 10; public readonly VERSION_TYPE: 'd' | 'a' | 'r' = 'r'; // dev, alpha, or release build public readonly MINECRAFT_VERSION = '1.19.3'; diff --git a/src/ui/elements/config_element.ts b/src/ui/elements/config_element.ts index a32ec16..99e5602 100644 --- a/src/ui/elements/config_element.ts +++ b/src/ui/elements/config_element.ts @@ -92,9 +92,11 @@ export abstract class ConfigUIElement extends BaseUIElement { public override generateHTML() { return ` - ${this._labelElement.generateHTML()} -
- ${this._generateInnerHTML()} +
+ ${this._labelElement.generateHTML()} +
+ ${this._generateInnerHTML()} +
`; } diff --git a/src/ui/layout.ts b/src/ui/layout.ts index 453a2d8..20598e9 100644 --- a/src/ui/layout.ts +++ b/src/ui/layout.ts @@ -23,6 +23,7 @@ import { SliderElement } from './elements/slider'; import { ToolbarItemElement } from './elements/toolbar_item'; import { VectorSpinboxElement } from './elements/vector_spinbox'; import { AppIcons } from './icons'; +import { HTMLBuilder } from './misc'; export interface Group { label: string; @@ -436,63 +437,56 @@ export class UI { } public build() { - const groupHTML: { [key: string]: string } = {}; - for (const groupName in this._ui) { - const group = this._uiDull[groupName]; - groupHTML[groupName] = ` -
-
-
-
-
-
- ${group.label.toUpperCase()} -
-
-
-
-
-
- `; - groupHTML[groupName] += this._getGroupHTML(group); - } + // Build properties + { + const sidebarHTML = new HTMLBuilder(); - let itemHTML = ''; - for (const groupName of this.uiOrder) { - itemHTML += groupHTML[groupName]; - } + sidebarHTML.add(`
`); + { + sidebarHTML.add(HeaderUIElement.Get.generateHTML()); - document.getElementById('properties')!.innerHTML = `
- ` + HeaderUIElement.Get.generateHTML() + itemHTML + `
`; + for (const groupName of this.uiOrder) { + const group = this._uiDull[groupName]; + sidebarHTML.add(this._getGroupHTML(group)); + } + } + sidebarHTML.add(`
`); + + sidebarHTML.placeInto('properties'); + } // Build toolbar - let toolbarHTML = ''; - // Left - toolbarHTML += '
'; - for (const toolbarGroupName of this._toolbarLeft.groupsOrder) { - toolbarHTML += '
'; - const toolbarGroup = this._toolbarLeftDull[toolbarGroupName]; - for (const groupElementName of toolbarGroup.elementsOrder) { - const groupElement = toolbarGroup.elements[groupElementName]; - toolbarHTML += groupElement.generateHTML(); - } - toolbarHTML += '
'; - } - toolbarHTML += '
'; - // Right - toolbarHTML += '
'; - for (const toolbarGroupName of this._toolbarRight.groupsOrder) { - toolbarHTML += '
'; - const toolbarGroup = this._toolbarRightDull[toolbarGroupName]; - for (const groupElementName of toolbarGroup.elementsOrder) { - const groupElement = toolbarGroup.elements[groupElementName]; - toolbarHTML += groupElement.generateHTML(); - } - toolbarHTML += '
'; - } - toolbarHTML += '
'; + { + const toolbarHTML = new HTMLBuilder(); - document.getElementById('toolbar')!.innerHTML = toolbarHTML; + // Left + toolbarHTML.add('
'); + for (const toolbarGroupName of this._toolbarLeft.groupsOrder) { + toolbarHTML.add('
'); + const toolbarGroup = this._toolbarLeftDull[toolbarGroupName]; + for (const groupElementName of toolbarGroup.elementsOrder) { + const groupElement = toolbarGroup.elements[groupElementName]; + toolbarHTML.add(groupElement.generateHTML()); + } + toolbarHTML.add('
'); + } + toolbarHTML.add('
'); + + // Right + toolbarHTML.add('
'); + for (const toolbarGroupName of this._toolbarRight.groupsOrder) { + toolbarHTML.add('
'); + const toolbarGroup = this._toolbarRightDull[toolbarGroupName]; + for (const groupElementName of toolbarGroup.elementsOrder) { + const groupElement = toolbarGroup.elements[groupElementName]; + toolbarHTML.add(groupElement.generateHTML()); + } + toolbarHTML.add('
'); + } + toolbarHTML.add('
'); + + toolbarHTML.placeInto('toolbar'); + } } public cacheValues(action: EAction) { @@ -522,20 +516,31 @@ export class UI { for (const elementName of group.elementsOrder) { const element = group.elements[elementName]; ASSERT(element !== undefined, `No element for: ${elementName}`); - groupHTML += this._buildSubcomponent(element, group.label === 'Materials'); + groupHTML += element.generateHTML(); } return groupHTML; } private _getGroupHTML(group: Group) { return ` +
+
+
+
+
+
+ ${group.label.toUpperCase()} +
+
+
+
+
+
${this._getGroupSubcomponentsHTML(group)}
-
- ${group.submitButton.generateHTML()} -
+ ${group.submitButton.generateHTML()}
${group.output.generateHTML()} @@ -543,14 +548,6 @@ export class UI { `; } - private _buildSubcomponent(element: ConfigUIElement, bigPadding: boolean) { - return ` -
- ${element.generateHTML()} -
- `; - } - public getActionOutput(action: EAction) { const group = this._getEActionGroup(action); return group.output; diff --git a/src/ui/misc.ts b/src/ui/misc.ts index 697223c..8de1072 100644 --- a/src/ui/misc.ts +++ b/src/ui/misc.ts @@ -1,3 +1,4 @@ +import { ASSERT } from '../util/error_util'; import { OutputStyle } from './elements/output'; type TMessage = { @@ -9,6 +10,29 @@ interface IUIOutputElement { buildHTML(): string; } +export class HTMLBuilder { + private _html: string; + + public constructor() { + this._html = ''; + } + + public add(html: string) { + this._html += html; + return this; + } + + public toString() { + return this._html; + } + + public placeInto(elementId: string) { + const element = document.getElementById(elementId); + ASSERT(element !== null, `Could not place HTML into element with id '${elementId}'`); + element.innerHTML = this._html; + } +} + export class UITreeBuilder implements IUIOutputElement { private _rootLabel: string; private _children: Array<{ html: string, warning: boolean } | UITreeBuilder>;