Split toolbar, update pathing

index.html

@@ -23,7 +23,7 @@
 </body>
 
 <script>
-    require("./dist/client.js");
+    require("./dist/src/client.js");
 </script>
 
 </html>

package.json

@@ -8,10 +8,10 @@
   },
   "scripts": {
     "lint": "eslint --fix ./src/**/*.ts && eslint --fix ./tools/**/*.ts",
-    "debug": "tsc && electron ./dist/main.js --enable-logging",
+    "debug": "tsc && electron ./dist/src/main.js --enable-logging",
     "build": "npm run lint && tsc",
     "test": "jest --config jestconfig.json",
-    "start": "npm run build && electron ./dist/main.js --enable-logging",
+    "start": "npm run build && electron ./dist/src/main.js --enable-logging",
     "atlas": "node ./dist/tools/build-atlas.js",
     "palette": "node ./dist/tools/build-palette.js",
     "export": "electron-packager . ObjToSchematic --platform=win32 --arch=x64"

src/block_atlas.ts

@@ -1,5 +1,5 @@
 import { HashMap } from './hash_map';
-import { UV, RGB, ASSERT, fileExists, ColourSpace } from './util';
+import { UV, RGB, ASSERT, fileExists, ColourSpace, ATLASES_DIR, PALETTES_DIR } from './util';
 import { Vector3 } from './vector';
 
 import fs from 'fs';
@@ -52,14 +52,12 @@ export class BlockAtlas {
         this._atlasLoaded = false;
         this._palette = [];
         this._paletteLoaded = false;
-
-        // this.loadAtlas(path.join(__dirname, '../resources/atlases/vanilla.atlas'));
     }
 
     public loadAtlas(atlasID: string) {
         this._cachedBlocks = new HashMap(1024);
 
-        const atlasDir = path.join(__dirname, '../resources/atlases', atlasID + '.atlas');
+        const atlasDir = path.join(ATLASES_DIR, atlasID + '.atlas');
         ASSERT(fileExists(atlasDir), `Atlas to load does not exist ${atlasDir}`);
 
         const blocksString = fs.readFileSync(atlasDir, 'utf-8');
@@ -85,7 +83,7 @@ export class BlockAtlas {
     public loadPalette(paletteID: string) {
         this._cachedBlocks = new HashMap(1024);
 
-        const paletteDir = path.join(__dirname, '../resources/palettes', paletteID + '.palette');
+        const paletteDir = path.join(PALETTES_DIR, paletteID + '.palette');
         ASSERT(fileExists(paletteDir), `Palette to load does not exist ${paletteDir}`);
 
         const palette: BlockPalette = JSON.parse(fs.readFileSync(paletteDir, 'utf8'));
@@ -131,6 +129,6 @@ export class BlockAtlas {
     public getAtlasTexturePath() {
         ASSERT(this._atlasLoaded, 'No atlas texture available');
         ASSERT(this._atlasTextureID, 'No atlas texture ID available');
-        return path.join(__dirname, '../resources/atlases', this._atlasTextureID + '.png');
+        return path.join(ATLASES_DIR, this._atlasTextureID + '.png');
     }
 }

src/main.ts

@@ -1,6 +1,7 @@
 import { app, BrowserWindow } from 'electron';
 import path from 'path';
 import url from 'url';
+import { BASE_DIR, STATIC_DIR } from './util';
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
@@ -16,8 +17,7 @@ function createWindow() {
     mainWindow = new BrowserWindow({
         width: width,
         height: height,
-        icon: path.join(__dirname, process.platform === 'win32' ?
-            '../resources/static/icon.ico' : '../resources/static/icon.png'),
+        icon: path.join(STATIC_DIR, process.platform === 'win32' ? './icon.ico' : './icon.png'),
         minWidth: 1280,
         minHeight: 720,
         webPreferences: {
@@ -31,7 +31,7 @@ function createWindow() {
 
     // Load index.html
     mainWindow.loadURL(url.format({
-        pathname: path.join(__dirname, '../index.html'),
+        pathname: path.join(BASE_DIR, './index.html'),
         protocol: 'file:',
         slashes: true,
     }));

src/schematic.ts

@@ -4,7 +4,7 @@ import path from 'path';
 import { NBT, TagType, writeUncompressed } from 'prismarine-nbt';
 import { Vector3 } from './vector';
 import { BlockMesh } from './block_mesh';
-import { LOG, Warnable } from './util';
+import { LOG, RESOURCES_DIR, Warnable } from './util';
 
 export abstract class Exporter extends Warnable {
     protected _sizeVector!: Vector3;
@@ -46,7 +46,9 @@ export class Schematic extends Exporter {
         const metaData = Array<number>(bufferSize);
         const bounds = blockMesh.getVoxelMesh().getBounds();
 
-        const schematicBlocks: { [blockName: string]: { id: number, meta: number, name: string } } = JSON.parse(fs.readFileSync(path.join(__dirname, '../resources/block_ids.json'), 'utf8'));
+        const schematicBlocks: { [blockName: string]: { id: number, meta: number, name: string } } = JSON.parse(
+            fs.readFileSync(path.join(RESOURCES_DIR, './block_ids.json'), 'utf8'),
+        );
 
         const blocks = blockMesh.getBlocks();
         const unsupportedBlocks = new Set<string>();

src/shaders.ts

@@ -2,6 +2,7 @@ import * as twgl from 'twgl.js';
 import * as fs from 'fs';
 import * as path from 'path';
 import { Renderer } from './renderer';
+import { SHADERS_DIR } from './util';
 
 export class ShaderManager {
     public readonly textureTriProgram: twgl.ProgramInfo;
@@ -40,7 +41,7 @@ export class ShaderManager {
     }
 
     private _getShader(filename: string) {
-        const absPath = path.join(__dirname, '../shaders/' + filename);
+        const absPath = path.join(SHADERS_DIR, filename);
         return fs.readFileSync(absPath, 'utf8');
     }
 }

src/ui/elements/toolbar_item.ts

@@ -1,4 +1,4 @@
-import { ASSERT, getRandomID } from '../../util';
+import { ASSERT, getRandomID, STATIC_DIR } from '../../util';
 
 import path from 'path';
 import fs from 'fs';
@@ -18,7 +18,7 @@ export class ToolbarItemElement {
     ) {
         this._id = getRandomID();
         this._iconName = iconName;
-        this._iconPath = path.join(__dirname, '../../../resources/static/', iconName + '.svg');
+        this._iconPath = path.join(STATIC_DIR, iconName + '.svg');
         this._isEnabled = false;
         this._isActive = false;
         this._onClick = onClick;

src/ui/layout.ts

@@ -5,7 +5,7 @@ import { FileInputElement } from './elements/file_input';
 import { ButtonElement } from './elements/button';
 import { OutputElement } from './elements/output';
 import { Action, AppContext } from '../app_context';
-import { ASSERT, LOG } from '../util';
+import { ASSERT, ATLASES_DIR, LOG } from '../util';
 
 import fs from 'fs';
 import path from 'path';
@@ -113,7 +113,7 @@ export class UI {
         },
     };
 
-    private _toolbar = {
+    private _toolbarLeft = {
         groups: {
             'viewmode': {
                 elements: {
@@ -168,19 +168,6 @@ export class UI {
                 },
                 elementsOrder: ['zoomOut', 'zoomIn', 'centre'],
             },
-            /*
-            'camera': {
-                elements: {
-                    'translate': new ToolbarItemElement('translate', () => {
-                        // ArcballCamera.Get.onZoomOut();
-                    }),
-                    'rotate': new ToolbarItemElement('rotate', () => {
-                        // ArcballCamera.Get.onZoomIn();
-                    }),
-                },
-                elementsOrder: ['translate', 'rotate'],
-            },
-            */
             'debug': {
                 elements: {
                     'grid': new ToolbarItemElement('grid', () => {
@@ -189,6 +176,17 @@ export class UI {
                         const isEnabled = args[0][0][0] as boolean;
                         return isEnabled;
                     }),
+                },
+                elementsOrder: ['grid'],
+            },
+        },
+        groupsOrder: ['viewmode', 'zoom', 'debug'],
+    };
+
+    private _toolbarRight = {
+        groups: {
+            'debug': {
+                elements: {
                     'wireframe': new ToolbarItemElement('wireframe', () => {
                         Renderer.Get.toggleIsWireframeEnabled();
                     }, EAppEvent.onWireframeEnabledChanged, (...args: any[]) => {
@@ -217,19 +215,16 @@ export class UI {
                         const devBufferAvailable = Renderer.Get.getModelsAvailable() >= 2;
                         return modelUsed === MeshType.TriangleMesh && devBufferAvailable;
                     }),
-                    /*
-                    'bounds': new ToolbarItemElement('bounds', () => {
-                    }),
-                    */
                 },
-                elementsOrder: ['grid', 'wireframe', 'normals', 'dev'], // ['grid', 'bounds'],
+                elementsOrder: ['wireframe', 'normals', 'dev'],
             },
         },
-        groupsOrder: ['viewmode', 'zoom', 'debug'],
+        groupsOrder: ['debug'],
     };
 
     private _uiDull: { [key: string]: Group } = this._ui;
-    private _toolbarDull: { [key: string]: ToolbarGroup } = this._toolbar.groups;
+    private _toolbarLeftDull: { [key: string]: ToolbarGroup } = this._toolbarLeft.groups;
+    private _toolbarRightDull: { [key: string]: ToolbarGroup } = this._toolbarRight.groups;
 
     private _appContext: AppContext;
 
@@ -269,15 +264,30 @@ export class UI {
         
         // Build toolbar
         let toolbarHTML = '';
-        for (const toolbarGroupName of this._toolbar.groupsOrder) {
+        // Left
+        toolbarHTML += '<div class="toolbar-column">';
+        for (const toolbarGroupName of this._toolbarLeft.groupsOrder) {
             toolbarHTML += '<div class="toolbar-group">';
-            const toolbarGroup = this._toolbarDull[toolbarGroupName];
+            const toolbarGroup = this._toolbarLeftDull[toolbarGroupName];
             for (const groupElementName of toolbarGroup.elementsOrder) {
                 const groupElement = toolbarGroup.elements[groupElementName];
                 toolbarHTML += groupElement.generateHTML();
             }
             toolbarHTML += '</div>';
         }
+        toolbarHTML += '</div>';
+        // Right
+        toolbarHTML += '<div class="toolbar-column">';
+        for (const toolbarGroupName of this._toolbarRight.groupsOrder) {
+            toolbarHTML += '<div class="toolbar-group">';
+            const toolbarGroup = this._toolbarRightDull[toolbarGroupName];
+            for (const groupElementName of toolbarGroup.elementsOrder) {
+                const groupElement = toolbarGroup.elements[groupElementName];
+                toolbarHTML += groupElement.generateHTML();
+            }
+            toolbarHTML += '</div>';
+        }
+        toolbarHTML += '</div>';
 
         document.getElementById('toolbar')!.innerHTML = toolbarHTML;
     }
@@ -348,9 +358,16 @@ export class UI {
             }
         }
 
-        // Register toolbar
-        for (const toolbarGroupName of this._toolbar.groupsOrder) {
-            const toolbarGroup = this._toolbarDull[toolbarGroupName];
+        // Register toolbar left
+        for (const toolbarGroupName of this._toolbarLeft.groupsOrder) {
+            const toolbarGroup = this._toolbarLeftDull[toolbarGroupName];
+            for (const groupElementName of toolbarGroup.elementsOrder) {
+                toolbarGroup.elements[groupElementName].registerEvents();
+            }
+        } 
+        // Register toolbar right
+        for (const toolbarGroupName of this._toolbarRight.groupsOrder) {
+            const toolbarGroup = this._toolbarRightDull[toolbarGroupName];
             for (const groupElementName of toolbarGroup.elementsOrder) {
                 toolbarGroup.elements[groupElementName].registerEvents();
             }
@@ -365,10 +382,6 @@ export class UI {
         return this._uiDull;
     }
 
-    public get toolbar() {
-        return this._toolbar;
-    }
-
     public enable(action: Action) {
         LOG('enabling', action);
 
@@ -426,9 +439,8 @@ export class UI {
 
     private _getTextureAtlases(): ComboBoxItem[] {
         const textureAtlases: ComboBoxItem[] = [];
-        const palettesDir = path.join(__dirname, '../../resources/atlases');
 
-        fs.readdirSync(palettesDir).forEach((file) => {
+        fs.readdirSync(ATLASES_DIR).forEach((file) => {
             if (file.endsWith('.atlas')) {
                 const paletteID = file.split('.')[0];
                 let paletteName = paletteID.replace('-', ' ').toLowerCase();
@@ -442,7 +454,7 @@ export class UI {
 
     private _getBlockPalettes(): ComboBoxItem[] {
         const blockPalettes: ComboBoxItem[] = [];
-        const palettesDir = path.join(__dirname, '../../resources/palettes');
+        const palettesDir = path.join(__dirname, '../../../resources/palettes');
 
         fs.readdirSync(palettesDir).forEach((file) => {
             if (file.endsWith('.palette')) {

src/util.ts

@@ -2,6 +2,8 @@ import { AppConfig } from './config';
 import { Vector3 } from './vector';
 import { clamp } from './math';
 
+import path from 'path';
+
 const convert = require('color-convert');
 
 import fs from 'fs';
@@ -278,6 +280,13 @@ export class Warnable {
     }
 }
 
+export const BASE_DIR = path.join(__dirname, '/../../');
+export const RESOURCES_DIR = path.join(BASE_DIR, './resources/');
+export const ATLASES_DIR = path.join(RESOURCES_DIR, './atlases');
+export const PALETTES_DIR = path.join(RESOURCES_DIR, './palettes/');
+export const STATIC_DIR = path.join(RESOURCES_DIR, './static/');
+export const SHADERS_DIR = path.join(RESOURCES_DIR, './shaders/');
+
 export function getRandomID(): string {
     return (Math.random() + 1).toString(36).substring(7);
 }

styles.css

@@ -42,14 +42,13 @@ canvas {
   position: absolute;
   width: var(--properties-width);
   height: 100%;
-  border-right: 2px solid var(--prop-dark);
   overflow: auto;
 }
 
 .column-canvas {
   position: absolute;
   margin-left: var(--properties-width);
-  width: 80%;
+  width: calc(100% - var(--properties-width));
   height: 100%;
 }
 
@@ -371,16 +370,26 @@ select:disabled {
   display: flex;
   position: inherit;
   flex-direction: row;
-  width: 90%;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.toolbar-column {
+  display: flex;
+  flex-direction: row;
+  margin: 20px 10px;
+}
+.toolbar-column:last-child {
+  flex-direction: row-reverse !important;
 }
 
 .toolbar-group {
   display: flex;
   flex-direction: row;
-  margin-left: 20px;
-  margin-top: 20px;
   box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 16px;
   border-radius: 5px;
+  margin-left: 10px;
+  margin-right: 10px;
 }
 
 .toolbar-item {