From 2be9d9bc025b322a4d8730572b2fe328e717c703 Mon Sep 17 00:00:00 2001 From: Lucas Dower Date: Mon, 14 Nov 2022 19:16:44 +0000 Subject: [PATCH] Added toggle for calculating lighting --- src/app_context.ts | 3 +++ src/block_mesh.ts | 12 +++++++----- src/renderer.ts | 15 +++++++++++++++ src/ui/elements/base.ts | 11 ++++++++++- src/ui/elements/combobox.ts | 16 ++++++++++++++++ src/ui/elements/toolbar_item.ts | 11 +++++++++-- src/ui/layout.ts | 18 ++++++++++++++++-- src/worker_types.ts | 1 + styles.css | 9 +++++++++ tests/objlitematic.test.ts | 2 ++ tests/objobj.test.ts | 2 ++ tests/objschem.test.ts | 2 ++ tests/objschematic.test.ts | 2 ++ tools/headless-config.ts | 1 + 14 files changed, 95 insertions(+), 10 deletions(-) diff --git a/src/app_context.ts b/src/app_context.ts index c6548df..2d38b8a 100644 --- a/src/app_context.ts +++ b/src/app_context.ts @@ -323,6 +323,8 @@ export class AppContext { this._ui.getActionOutput(EAction.Assign) .setTaskInProgress('action', '[Block Mesh]: Loading...'); + Renderer.Get.setLightingAvailable(uiElements.calculateLighting.getCachedValue()); + const payload: TToWorkerMessage = { action: 'Assign', params: { @@ -332,6 +334,7 @@ export class AppContext { colourSpace: ColourSpace.RGB, fallable: uiElements.fallable.getCachedValue() as FallableBehaviour, resolution: Math.pow(2, uiElements.colourAccuracy.getCachedValue()), + calculateLighting: uiElements.calculateLighting.getCachedValue(), lightThreshold: uiElements.lightThreshold.getCachedValue(), }, }; diff --git a/src/block_mesh.ts b/src/block_mesh.ts index b5a3c3e..d8dfc36 100644 --- a/src/block_mesh.ts +++ b/src/block_mesh.ts @@ -48,11 +48,13 @@ export class BlockMesh { blockMesh._assignBlocks(blockMeshParams); //blockMesh._calculateLighting(blockMeshParams.lightThreshold); - blockMesh._lighting.init(); - blockMesh._lighting.addSunLightValues(); - blockMesh._lighting.addEmissiveBlocks(); - blockMesh._lighting.addLightToDarkness(blockMeshParams.lightThreshold); - blockMesh._lighting.dumpInfo(); + if (blockMeshParams.calculateLighting) { + blockMesh._lighting.init(); + blockMesh._lighting.addSunLightValues(); + blockMesh._lighting.addEmissiveBlocks(); + blockMesh._lighting.addLightToDarkness(blockMeshParams.lightThreshold); + blockMesh._lighting.dumpInfo(); + } return blockMesh; } diff --git a/src/renderer.ts b/src/renderer.ts index c06ce6d..e441bdf 100644 --- a/src/renderer.ts +++ b/src/renderer.ts @@ -126,6 +126,14 @@ export class Renderer { // ///////////////////////////////////////////////////////////////////////// + private _lightingAvailable: boolean = false; + public setLightingAvailable(isAvailable: boolean) { + this._lightingAvailable = isAvailable; + if (!isAvailable) { + this._nightVisionEnabled = true; + } + } + public toggleIsGridEnabled() { this._gridEnabled = !this._gridEnabled; } @@ -142,8 +150,15 @@ export class Renderer { this._axesEnabled = !this._axesEnabled; } + public canToggleNightVision() { + return this._lightingAvailable; + } + public toggleIsNightVisionEnabled() { this._nightVisionEnabled = !this._nightVisionEnabled; + if (!this._lightingAvailable) { + this._nightVisionEnabled = true; + } } public isNightVisionEnabled() { diff --git a/src/ui/elements/base.ts b/src/ui/elements/base.ts index 698a6f9..f24e22a 100644 --- a/src/ui/elements/base.ts +++ b/src/ui/elements/base.ts @@ -13,7 +13,10 @@ export abstract class BaseUIElement { this._isEnabled = true; } - public setEnabled(isEnabled: boolean) { + public setEnabled(isEnabled: boolean, isGroupEnable: boolean = true) { + if (isEnabled && isGroupEnable && !this._obeyGroupEnables) { + return; + } this._isEnabled = isEnabled; this._onEnabledChanged(); } @@ -37,4 +40,10 @@ export abstract class BaseUIElement { protected abstract _onEnabledChanged(): void; + + private _obeyGroupEnables: boolean = true; + public setObeyGroupEnables(shouldListen: boolean) { + this._obeyGroupEnables = shouldListen; + return this; + } } diff --git a/src/ui/elements/combobox.ts b/src/ui/elements/combobox.ts index 8885b57..887aa5f 100644 --- a/src/ui/elements/combobox.ts +++ b/src/ui/elements/combobox.ts @@ -29,6 +29,14 @@ export class ComboBoxElement extends LabelledElement { } public registerEvents(): void { + const element = document.getElementById(this._id) as HTMLSelectElement; + ASSERT(element !== null); + + element.addEventListener('change', () => { + if (this._onValueChangedDelegate) { + this._onValueChangedDelegate(element.value); + } + }); } protected getValue() { @@ -43,5 +51,13 @@ export class ComboBoxElement extends LabelledElement { const element = document.getElementById(this._id) as HTMLSelectElement; ASSERT(element !== null); element.disabled = !this._isEnabled; + + this._onValueChangedDelegate?.(element.value); + } + + private _onValueChangedDelegate?: (value: any) => void; + public onValueChanged(delegate: (value: any) => void) { + this._onValueChangedDelegate = delegate; + return this; } } diff --git a/src/ui/elements/toolbar_item.ts b/src/ui/elements/toolbar_item.ts index 689cb05..3793a64 100644 --- a/src/ui/elements/toolbar_item.ts +++ b/src/ui/elements/toolbar_item.ts @@ -98,8 +98,10 @@ export class ToolbarItemElement { element.classList.remove('toolbar-item-disabled'); element.classList.remove('toolbar-item-active'); + element.classList.remove('toolbar-item-disabled-active'); svgElement.classList.remove('icon-disabled'); svgElement.classList.remove('icon-active'); + svgElement.classList.remove('icon-disabled-active'); if (this._isEnabled) { if (this._isActive) { @@ -107,8 +109,13 @@ export class ToolbarItemElement { svgElement.classList.add('icon-active'); } } else { - element.classList.add('toolbar-item-disabled'); - svgElement.classList.add('icon-disabled'); + if (this._isActive) { + element.classList.add('toolbar-item-disabled-active'); + svgElement.classList.add('icon-disabled-active'); + } else { + element.classList.add('toolbar-item-disabled'); + svgElement.classList.add('icon-disabled'); + } } } diff --git a/src/ui/layout.ts b/src/ui/layout.ts index 23c3d47..9259ffc 100644 --- a/src/ui/layout.ts +++ b/src/ui/layout.ts @@ -151,9 +151,20 @@ export class UI { }, ]), 'colourAccuracy': new SliderElement('Colour accuracy', 1, 8, 1, 5, 0.1), - 'lightThreshold': new SliderElement('Light threshold', 0, 14, 0, 0, 1), + 'calculateLighting': new ComboBoxElement('Calculate lighting', [ + { id: false, displayText: 'Off' }, + { id: true, displayText: 'On' }, + ]).onValueChanged((value: any) => { + if (value === 'true') { + this._ui.assign.elements.lightThreshold.setEnabled(true, false); + } else { + this._ui.assign.elements.lightThreshold.setEnabled(false, false); + } + }), + 'lightThreshold': new SliderElement('Light threshold', 0, 14, 0, 0, 1) + .setObeyGroupEnables(false), }, - elementsOrder: ['textureAtlas', 'blockPalette', 'dithering', 'fallable', 'colourAccuracy', 'lightThreshold'], + elementsOrder: ['textureAtlas', 'blockPalette', 'dithering', 'fallable', 'colourAccuracy', 'calculateLighting', 'lightThreshold'], submitButton: new ButtonElement('Assign blocks', () => { this._appContext.do(EAction.Assign); }), @@ -240,6 +251,9 @@ export class UI { }) .isActive(() => { return Renderer.Get.isNightVisionEnabled(); + }) + .isEnabled(() => { + return Renderer.Get.canToggleNightVision(); }), }, elementsOrder: ['grid', 'axes', 'night-vision'], diff --git a/src/worker_types.ts b/src/worker_types.ts index 2f83d3a..f69e61b 100644 --- a/src/worker_types.ts +++ b/src/worker_types.ts @@ -96,6 +96,7 @@ export namespace AssignParams { colourSpace: ColourSpace, fallable: FallableBehaviour, resolution: RGBAUtil.TColourAccuracy, + calculateLighting: boolean, lightThreshold: number, } diff --git a/styles.css b/styles.css index cf9207b..382abae 100644 --- a/styles.css +++ b/styles.css @@ -447,6 +447,11 @@ select:disabled { border: 1px solid var(--prop-accent-border-hovered) !important; } +.toolbar-item-disabled-active { + background-color: var(--prop-accent-disabled) !important; + border: 1px solid var(--prop-accent-disabled) !important; +} + .toolbar-item-disabled { background-color: var(--prop-disabled) !important; border: 1px solid var(--prop-disabled) !important; @@ -482,6 +487,10 @@ svg { stroke: var(--text-disabled) !important; } +.icon-disabled-active { + stroke: #808080 !important; +} + .palette-container { width: 100%; height: 200px; diff --git a/tests/objlitematic.test.ts b/tests/objlitematic.test.ts index 6791d4e..1c26bd0 100644 --- a/tests/objlitematic.test.ts +++ b/tests/objlitematic.test.ts @@ -23,6 +23,8 @@ const baseConfig: THeadlessConfig = { colourSpace: ColourSpace.RGB, fallable: 'replace-falling', resolution: 32, + calculateLighting: false, + lightThreshold: 0, }, export: { filepath: '', // Must be an absolute path to the file (can be anywhere) diff --git a/tests/objobj.test.ts b/tests/objobj.test.ts index 537e67e..05ac035 100644 --- a/tests/objobj.test.ts +++ b/tests/objobj.test.ts @@ -23,6 +23,8 @@ const baseConfig: THeadlessConfig = { colourSpace: ColourSpace.RGB, fallable: 'replace-falling', resolution: 32, + calculateLighting: false, + lightThreshold: 0, }, export: { filepath: '', // Must be an absolute path to the file (can be anywhere) diff --git a/tests/objschem.test.ts b/tests/objschem.test.ts index a9a9340..1a811e6 100644 --- a/tests/objschem.test.ts +++ b/tests/objschem.test.ts @@ -23,6 +23,8 @@ const baseConfig: THeadlessConfig = { colourSpace: ColourSpace.RGB, fallable: 'replace-falling', resolution: 32, + calculateLighting: false, + lightThreshold: 0, }, export: { filepath: '', // Must be an absolute path to the file (can be anywhere) diff --git a/tests/objschematic.test.ts b/tests/objschematic.test.ts index 4499513..5b98ff9 100644 --- a/tests/objschematic.test.ts +++ b/tests/objschematic.test.ts @@ -23,6 +23,8 @@ const baseConfig: THeadlessConfig = { colourSpace: ColourSpace.RGB, fallable: 'replace-falling', resolution: 32, + calculateLighting: false, + lightThreshold: 0, }, export: { filepath: '', // Must be an absolute path to the file (can be anywhere) diff --git a/tools/headless-config.ts b/tools/headless-config.ts index 740ef58..ea0db6a 100644 --- a/tools/headless-config.ts +++ b/tools/headless-config.ts @@ -21,6 +21,7 @@ export const headlessConfig: THeadlessConfig = { colourSpace: ColourSpace.RGB, fallable: 'replace-falling', resolution: 32, + calculateLighting: false, lightThreshold: 0, }, export: {