Refactored UI into singleton

This commit is contained in:
Lucas Dower 2023-03-24 22:18:07 +00:00
parent 81c7d6d28b
commit 17b14e5424
2 changed files with 43 additions and 36 deletions

View File

@ -17,7 +17,6 @@ import { WorkerController } from './worker_controller';
import { TFromWorkerMessage } from './worker_types'; import { TFromWorkerMessage } from './worker_types';
export class AppContext { export class AppContext {
private _ui: UI;
private _workerController: WorkerController; private _workerController: WorkerController;
private _lastAction?: EAction; private _lastAction?: EAction;
public maxConstraint?: Vector3; public maxConstraint?: Vector3;
@ -37,16 +36,15 @@ export class AppContext {
throw Error('Could not load WebGL context'); throw Error('Could not load WebGL context');
} }
this._ui = new UI(this); UI.Get.bindToContext(this);
this._ui.build(); UI.Get.build();
this._ui.registerEvents(); UI.Get.registerEvents();
//this._ui.disable(EAction.Materials); UI.Get.updateMaterialsAction(this._materialManager);
this._ui.updateMaterialsAction(this._materialManager); UI.Get.disableAll();
this._ui.disableAll();
this._workerController = new WorkerController(); this._workerController = new WorkerController();
this._workerController.execute({ action: 'Init', params: {}}).then(() => { this._workerController.execute({ action: 'Init', params: {}}).then(() => {
this._ui.enable(EAction.Import); UI.Get.enable(EAction.Import);
}); });
Renderer.Get.toggleIsAxesEnabled(); Renderer.Get.toggleIsAxesEnabled();
@ -55,7 +53,7 @@ export class AppContext {
EventManager.Get.add(EAppEvent.onTaskStart, (...data) => { EventManager.Get.add(EAppEvent.onTaskStart, (...data) => {
if (this._lastAction) { if (this._lastAction) {
this._ui.getActionButton(this._lastAction) UI.Get.getActionButton(this._lastAction)
.startLoading() .startLoading()
.setProgress(0.0); .setProgress(0.0);
} }
@ -63,14 +61,14 @@ export class AppContext {
EventManager.Get.add(EAppEvent.onTaskProgress, (...data) => { EventManager.Get.add(EAppEvent.onTaskProgress, (...data) => {
if (this._lastAction) { if (this._lastAction) {
this._ui.getActionButton(this._lastAction) UI.Get.getActionButton(this._lastAction)
.setProgress(data[0][1]); .setProgress(data[0][1]);
} }
}); });
EventManager.Get.add(EAppEvent.onTaskEnd, (...data) => { EventManager.Get.add(EAppEvent.onTaskEnd, (...data) => {
if (this._lastAction) { if (this._lastAction) {
this._ui.getActionButton(this._lastAction) UI.Get.getActionButton(this._lastAction)
.stopLoading() .stopLoading()
.setProgress(0.0); .setProgress(0.0);
} }
@ -81,7 +79,7 @@ export class AppContext {
private async _import(): Promise<boolean> { private async _import(): Promise<boolean> {
// Gather data from the UI to send to the worker // Gather data from the UI to send to the worker
const components = this._ui.layout.import.components; const components = UI.Get.layout.import.components;
AppConsole.info('Importing mesh...'); AppConsole.info('Importing mesh...');
{ {
@ -94,7 +92,7 @@ export class AppContext {
}, },
}); });
this._ui.getActionButton(EAction.Import).resetLoading(); UI.Get.getActionButton(EAction.Import).resetLoading();
if (this._handleErrors(resultImport)) { if (this._handleErrors(resultImport)) {
return false; return false;
} }
@ -106,7 +104,7 @@ export class AppContext {
this.maxConstraint = Vector3.copy(resultImport.result.dimensions) this.maxConstraint = Vector3.copy(resultImport.result.dimensions)
.mulScalar(AppConfig.Get.CONSTRAINT_MAXIMUM_HEIGHT / 8.0).floor(); .mulScalar(AppConfig.Get.CONSTRAINT_MAXIMUM_HEIGHT / 8.0).floor();
this._materialManager = new MaterialMapManager(resultImport.result.materials); this._materialManager = new MaterialMapManager(resultImport.result.materials);
this._ui.updateMaterialsAction(this._materialManager); UI.Get.updateMaterialsAction(this._materialManager);
} }
AppConsole.info('Rendering mesh...'); AppConsole.info('Rendering mesh...');
@ -117,7 +115,7 @@ export class AppContext {
params: {}, params: {},
}); });
this._ui.getActionButton(EAction.Import).resetLoading(); UI.Get.getActionButton(EAction.Import).resetLoading();
if (this._handleErrors(resultRender)) { if (this._handleErrors(resultRender)) {
return false; return false;
} }
@ -143,7 +141,7 @@ export class AppContext {
}, },
}); });
this._ui.getActionButton(EAction.Materials).resetLoading(); UI.Get.getActionButton(EAction.Materials).resetLoading();
if (this._handleErrors(resultMaterials)) { if (this._handleErrors(resultMaterials)) {
return false; return false;
} }
@ -165,7 +163,7 @@ export class AppContext {
private async _voxelise(): Promise<boolean> { private async _voxelise(): Promise<boolean> {
// Gather data from the UI to send to the worker // Gather data from the UI to send to the worker
const components = this._ui.layout.voxelise.components; const components = UI.Get.layout.voxelise.components;
AppConsole.info('Loading voxel mesh...'); AppConsole.info('Loading voxel mesh...');
{ {
@ -182,7 +180,7 @@ export class AppContext {
}, },
}); });
this._ui.getActionButton(EAction.Voxelise).resetLoading(); UI.Get.getActionButton(EAction.Voxelise).resetLoading();
if (this._handleErrors(resultVoxelise)) { if (this._handleErrors(resultVoxelise)) {
return false; return false;
} }
@ -205,7 +203,7 @@ export class AppContext {
}, },
}); });
this._ui.getActionButton(EAction.Voxelise).resetLoading(); UI.Get.getActionButton(EAction.Voxelise).resetLoading();
if (this._handleErrors(resultRender)) { if (this._handleErrors(resultRender)) {
return false; return false;
} }
@ -224,7 +222,7 @@ export class AppContext {
private async _assign(): Promise<boolean> { private async _assign(): Promise<boolean> {
// Gather data from the UI to send to the worker // Gather data from the UI to send to the worker
const components = this._ui.layout.assign.components; const components = UI.Get.layout.assign.components;
AppConsole.info('Loading block mesh...'); AppConsole.info('Loading block mesh...');
{ {
@ -245,7 +243,7 @@ export class AppContext {
}, },
}); });
this._ui.getActionButton(EAction.Assign).resetLoading(); UI.Get.getActionButton(EAction.Assign).resetLoading();
if (this._handleErrors(resultAssign)) { if (this._handleErrors(resultAssign)) {
return false; return false;
} }
@ -267,7 +265,7 @@ export class AppContext {
}, },
}); });
this._ui.getActionButton(EAction.Assign).resetLoading(); UI.Get.getActionButton(EAction.Assign).resetLoading();
if (this._handleErrors(resultRender)) { if (this._handleErrors(resultRender)) {
return false; return false;
} }
@ -286,7 +284,7 @@ export class AppContext {
private async _export(): Promise<boolean> { private async _export(): Promise<boolean> {
// Gather data from the UI to send to the worker // Gather data from the UI to send to the worker
const components = this._ui.layout.export.components; const components = UI.Get.layout.export.components;
AppConsole.info('Exporting structure...'); AppConsole.info('Exporting structure...');
{ {
@ -299,7 +297,7 @@ export class AppContext {
}, },
}); });
this._ui.getActionButton(EAction.Export).resetLoading(); UI.Get.getActionButton(EAction.Export).resetLoading();
if (this._handleErrors(resultExport)) { if (this._handleErrors(resultExport)) {
return false; return false;
} }
@ -331,15 +329,15 @@ export class AppContext {
public async do(action: EAction) { public async do(action: EAction) {
// Disable the UI while the worker is working // Disable the UI while the worker is working
this._ui.disableAll(); UI.Get.disableAll();
this._lastAction = action; this._lastAction = action;
const success = await this._executeAction(action); const success = await this._executeAction(action);
if (success) { if (success) {
this._ui.enableTo(action + 1); UI.Get.enableTo(action + 1);
} else { } else {
this._ui.enableTo(action); UI.Get.enableTo(action);
} }
} }
@ -367,7 +365,7 @@ export class AppContext {
public draw() { public draw() {
Renderer.Get.update(); Renderer.Get.update();
this._ui.tick(this._workerController.isBusy()); UI.Get.tick(this._workerController.isBusy());
Renderer.Get.draw(); Renderer.Get.draw();
} }
} }

View File

@ -44,6 +44,15 @@ export interface ToolbarGroup {
} }
export class UI { export class UI {
/* Singleton */
private static _instance: UI;
public static get Get() {
return this._instance || (this._instance = new this());
}
public constructor() {
}
public uiOrder = ['import', 'materials', 'voxelise', 'assign', 'export']; public uiOrder = ['import', 'materials', 'voxelise', 'assign', 'export'];
private _ui = { private _ui = {
'import': { 'import': {
@ -59,7 +68,7 @@ export class UI {
componentOrder: ['input', 'rotation'], componentOrder: ['input', 'rotation'],
execButton: new ButtonComponent() execButton: new ButtonComponent()
.setOnClick(() => { .setOnClick(() => {
this._appContext.do(EAction.Import); this._appContext?.do(EAction.Import);
}) })
.setLabel('Load mesh'), .setLabel('Load mesh'),
}, },
@ -70,7 +79,7 @@ export class UI {
componentOrder: [], componentOrder: [],
execButton: new ButtonComponent() execButton: new ButtonComponent()
.setOnClick(() => { .setOnClick(() => {
this._appContext.do(EAction.Materials); this._appContext?.do(EAction.Materials);
}) })
.setLabel('Update materials'), .setLabel('Update materials'),
}, },
@ -142,7 +151,7 @@ export class UI {
], ],
execButton: new ButtonComponent() execButton: new ButtonComponent()
.setOnClick(() => { .setOnClick(() => {
this._appContext.do(EAction.Voxelise); this._appContext?.do(EAction.Voxelise);
}) })
.setLabel('Voxelise mesh'), .setLabel('Voxelise mesh'),
}, },
@ -240,7 +249,7 @@ export class UI {
], ],
execButton: new ButtonComponent() execButton: new ButtonComponent()
.setOnClick(() => { .setOnClick(() => {
this._appContext.do(EAction.Assign); this._appContext?.do(EAction.Assign);
}) })
.setLabel('Assign blocks'), .setLabel('Assign blocks'),
}, },
@ -278,7 +287,7 @@ export class UI {
execButton: new ButtonComponent() execButton: new ButtonComponent()
.setLabel('Export structure') .setLabel('Export structure')
.setOnClick(() => { .setOnClick(() => {
this._appContext.do(EAction.Export); this._appContext?.do(EAction.Export);
}), }),
}, },
}; };
@ -403,10 +412,10 @@ export class UI {
private _toolbarLeftDull: { [key: string]: ToolbarGroup } = this._toolbarLeft.groups; private _toolbarLeftDull: { [key: string]: ToolbarGroup } = this._toolbarLeft.groups;
private _toolbarRightDull: { [key: string]: ToolbarGroup } = this._toolbarRight.groups; private _toolbarRightDull: { [key: string]: ToolbarGroup } = this._toolbarRight.groups;
private _appContext: AppContext; private _appContext?: AppContext;
public constructor(appContext: AppContext) { public bindToContext(context: AppContext) {
this._appContext = appContext; this._appContext = context;
} }
public tick(isBusy: boolean) { public tick(isBusy: boolean) {