Minor cleanup and improved toolbar buttons styles

src/app_context.ts

@@ -23,6 +23,7 @@ export class AppContext {
     private _materialManager: MaterialMapManager;
 
     public constructor() {
+        AppConsole.info('Initialising...');
         this._materialManager = new MaterialMapManager(new Map());
 
         Logger.Get.enableLOG();
@@ -30,6 +31,7 @@ export class AppContext {
         Logger.Get.enableLOGWARN();
 
         AppConfig.Get.dumpConfig();
+        EventManager.Get.bindToContext(this);
 
         const gl = (<HTMLCanvasElement>document.getElementById('canvas')).getContext('webgl');
         if (!gl) {
@@ -45,36 +47,14 @@ export class AppContext {
         this._workerController = new WorkerController();
         this._workerController.execute({ action: 'Init', params: {}}).then(() => {
             UI.Get.enable(EAction.Import);
+            AppConsole.success('Ready');
         });
 
-        Renderer.Get.toggleIsAxesEnabled();
-        ArcballCamera.Get.setCameraMode('perspective');
         ArcballCamera.Get.toggleAngleSnap();
-
-        EventManager.Get.add(EAppEvent.onTaskStart, (...data) => {
-            if (this._lastAction) {
-                UI.Get.getActionButton(this._lastAction)
-                    .startLoading()
-                    .setProgress(0.0);
     }
-        });
 
-        EventManager.Get.add(EAppEvent.onTaskProgress, (...data) => {
-            if (this._lastAction) {
-                UI.Get.getActionButton(this._lastAction)
-                    .setProgress(data[0][1]);
-            }
-        });
-
-        EventManager.Get.add(EAppEvent.onTaskEnd, (...data) => {
-            if (this._lastAction) {
-                UI.Get.getActionButton(this._lastAction)
-                    .stopLoading()
-                    .setProgress(0.0);
-            }
-        });
-
-        AppConsole.info('Ready');
+    public getLastAction() {
+        return this._lastAction;
     }
 
     private async _import(): Promise<boolean> {

src/camera.ts

@@ -27,6 +27,7 @@ export class ArcballCamera {
     private _azimuthRelief = 0.0;
     private _elevationRelief = 0.0;
     private _isAngleSnapped = false;
+    private _angleSnap = true;
 
     private _gl: WebGLRenderingContext;
 
@@ -80,7 +81,6 @@ export class ArcballCamera {
         this._isPerspective = mode === 'perspective';
     }
 
-    private _angleSnap = false;
     public toggleAngleSnap() {
         this._angleSnap = !this._angleSnap;
 

src/event.ts

@@ -1,3 +1,5 @@
+import { AppContext } from './app_context';
+import { UI } from './ui/layout';
 import { ASSERT } from './util/error_util';
 import { LOG } from './util/log_util';
 
@@ -12,6 +14,7 @@ export enum EAppEvent {
 
 export class EventManager {
     private _eventsToListeners: Map<EAppEvent, ((...args: any[]) => void)[]>;
+    private _appContext?: AppContext;
 
     private static _instance: EventManager;
     public static get Get() {
@@ -22,6 +25,38 @@ export class EventManager {
         this._eventsToListeners = new Map();
     }
 
+    public bindToContext(context: AppContext) {
+        this._appContext = context;
+    }
+
+    public init() {
+        EventManager.Get.add(EAppEvent.onTaskStart, (...data) => {
+            const lastAction = this._appContext?.getLastAction();
+            if (lastAction !== undefined) {
+                UI.Get.getActionButton(lastAction)
+                    .startLoading()
+                    .setProgress(0.0);
+            }
+        });
+
+        EventManager.Get.add(EAppEvent.onTaskProgress, (...data) => {
+            ASSERT(this._appContext !== undefined, 'Not bound to context');
+            const lastAction = this._appContext?.getLastAction();
+            if (lastAction !== undefined) {
+                UI.Get.getActionButton(lastAction)
+                    .setProgress(data[0][1]);
+            }
+        });
+
+        EventManager.Get.add(EAppEvent.onTaskEnd, (...data) => {
+            const lastAction = this._appContext?.getLastAction();
+            if (lastAction !== undefined) {
+                UI.Get.getActionButton(lastAction)
+                    .resetLoading();
+            }
+        });
+    }
+
     public add(event: EAppEvent, delegate: (...args: any[]) => void) {
         if (!this._eventsToListeners.has(event)) {
             this._eventsToListeners.set(event, []);

src/renderer.ts

@@ -114,7 +114,7 @@ export class Renderer {
         this._debugBuffers[MeshType.BlockMesh] = {};
 
         this._isGridComponentEnabled = {};
-        this._axesEnabled = false;
+        this._axesEnabled = true;
         this._nightVisionEnabled = true;
 
         this._axisBuffer = new RenderBuffer([

src/ui/components/material_type.ts

@@ -14,6 +14,7 @@ export class MaterialTypeComponent extends ConfigComponent<MaterialType, HTMLDiv
 
         this._solidButton = new ToolbarItemComponent({ id: 'sw1', iconSVG: AppIcons.COLOUR_SWATCH })
             .setLabel('Solid')
+            .setGrow()
             .onClick(() => {
                 if (this._material.type === MaterialType.textured) {
                     this._onClickChangeTypeDelegate?.();
@@ -22,6 +23,7 @@ export class MaterialTypeComponent extends ConfigComponent<MaterialType, HTMLDiv
 
         this._texturedButton = new ToolbarItemComponent({ id: 'sw2', iconSVG: AppIcons.IMAGE })
             .setLabel('Textured')
+            .setGrow()
             .onClick(() => {
                 if (this._material.type === MaterialType.solid) {
                     this._onClickChangeTypeDelegate?.();

src/ui/components/toolbar_item.ts

@@ -14,11 +14,13 @@ export class ToolbarItemComponent extends BaseComponent<HTMLDivElement>  {
     private _label: string;
     private _onClick?: () => void;
     private _isActive: boolean;
+    private _grow: boolean;
 
     public constructor(params: TToolbarItemParams) {
         super();
 
         this._isActive = false;
+        this._grow = false;
 
         {
             const parser = new DOMParser();
@@ -33,6 +35,10 @@ export class ToolbarItemComponent extends BaseComponent<HTMLDivElement>  {
         this._label = '';
     }
 
+    public setGrow() {
+        this._grow = true;
+        return this;
+    }
 
     public setActive(isActive: boolean) {
         this._isActive = isActive;
@@ -85,11 +91,19 @@ export class ToolbarItemComponent extends BaseComponent<HTMLDivElement>  {
     }
 
     public generateHTML() {
+        if (this._grow) {
             return `
-            <div class="struct-prop container-icon-button" id="${this._getId()}">
+                <div class="struct-prop container-icon-button" style="width: unset; flex-grow: 1;" id="${this._getId()}">
                     ${this._iconSVG.outerHTML} ${this._label}
                 </div>
             `;
+        } else {
+            return `
+                <div class="struct-prop container-icon-button" style="aspect-ratio: 1;" id="${this._getId()}">
+                    ${this._iconSVG.outerHTML} ${this._label}
+                </div>
+            `;
+        }
     }
 
     public registerEvents(): void {

styles.css

@@ -29,6 +29,10 @@
 
   --border-radius: 5px;
   --property-height: 32px;
+
+  --font-size-big: 14.96px;
+  --font-size-standard: 13.6px;
+  --font-size-small: 12.24px
 }
 
 * {
@@ -96,7 +100,7 @@ canvas {
 
 .column-console {
   background: hsl(0, 0%, 5%);
-  font-size: 85%;
+  font-size: var(--font-size-standard);
   color: var(--text-dim);
   font-family: 'Courier Prime';
 }
@@ -129,7 +133,7 @@ canvas {
   flex-direction: row;
   align-items: center;
   color: var(--text-standard);
-  font-size: 85%;
+  font-size: var(--font-size-standard);
   padding: 5px 0px;
   border-bottom: 2px solid var(--gray-350);
 }
@@ -151,7 +155,7 @@ canvas {
   flex-direction: row;
   align-items: center;
   color: var(--text-standard);
-  font-size: 85%;
+  font-size: var(--font-size-standard);
   padding: 5px 0px;
   margin: 0px;
 }
@@ -166,7 +170,7 @@ canvas {
 .group-heading {
   color: var(--gray-700);
   letter-spacing: 4px;
-  font-size: 85%;
+  font-size: var(--font-size-standard);
   padding: 12px 0px;
 }
 
@@ -190,7 +194,7 @@ canvas {
 input {
   font-family: 'Rubik', sans-serif;
   text-align: center;
-  font-size: inherit;
+  font-size: var(--font-size-standard);
   outline: none;
 }
 input::-webkit-outer-spin-button,
@@ -264,7 +268,7 @@ select {
   border-color: var(--gray-500);
   color: var(--text-dark);
   background: var(--gray-400);
-  cursor: default;
+  cursor: inherit;
 }
 .style-inactive-enabled {
   border-color: var(--gray-600);
@@ -282,7 +286,7 @@ select {
   border-color: var(--blue-450);
   color: var(--text-dim);
   background: var(--blue-400);
-  cursor: default;
+  cursor: inherit;
 }
 .style-active-enabled {
   border-color: var(--blue-600);
@@ -325,7 +329,7 @@ select {
 
 .spinbox-key {
   color: #ffffffb9;
-  font-size: 85%;
+  font-size: var(--font-size-standard);
   padding-right: 5px;
 }
 
@@ -383,9 +387,9 @@ select {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0px 8px 0px 8px;
+  padding: 0px;
   text-align: center;
-  font-size: 85%;
+  font-size: var(--font-size-standard);
   pointer-events: all;
   gap: 2px;
 }
@@ -569,11 +573,11 @@ svg {
 }
 
 .title {
-  font-size: 110%;
+  font-size: var(--font-size-big);
 }
 
 .subtitle {
-  font-size: 90%;
+  font-size: var(--font-size-small);
   color: var(--text-dim);
 }
 
@@ -582,7 +586,7 @@ svg {
   justify-content: space-between;
   width: 100%;
   color: var(--text-standard);
-  font-size: 85%;
+  font-size: var(--font-size-standard);
   padding-top: 5px;
 }