Added support for resizing the sidebar

package-lock.json

@@ -8,6 +8,9 @@
       "name": "objtoschematic",
       "version": "0.7.4",
       "license": "BSD-3-Clause",
+      "dependencies": {
+        "split.js": "^1.6.5"
+      },
       "devDependencies": {
         "@types/adm-zip": "^0.5.0",
         "@types/jest": "^27.4.1",
@@ -8814,6 +8817,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/split.js": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/split.js/-/split.js-1.6.5.tgz",
+      "integrity": "sha512-mPTnGCiS/RiuTNsVhCm9De9cCAUsrNFFviRbADdKiiV+Kk8HKp/0fWu7Kr8pi3/yBmsqLFHuXGT9UUZ+CNLwFw=="
+    },
     "node_modules/stack-trace": {
       "version": "0.0.10",
       "resolved": "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.10.tgz",
@@ -17270,6 +17278,11 @@
         }
       }
     },
+    "split.js": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/split.js/-/split.js-1.6.5.tgz",
+      "integrity": "sha512-mPTnGCiS/RiuTNsVhCm9De9cCAUsrNFFviRbADdKiiV+Kk8HKp/0fWu7Kr8pi3/yBmsqLFHuXGT9UUZ+CNLwFw=="
+    },
     "stack-trace": {
       "version": "0.0.10",
       "resolved": "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.10.tgz",

package.json

@@ -9,6 +9,7 @@
   },
   "scripts": {
     "lint": "eslint --fix src tools tests --ext .ts",
+    "lint-src": "eslint --fix src --ext .ts",
     "test": "jest --config jestconfig.json",
     "start": "webpack serve --config ./webpack.dev.js",
     "dist": "webpack --config ./webpack.prod.js",
@@ -72,5 +73,8 @@
     "webpack-merge": "^5.8.0",
     "webpack-strip-block": "^0.3.0",
     "worker-loader": "^3.0.8"
+  },
+  "dependencies": {
+    "split.js": "^1.6.5"
   }
 }

src/ui/elements/labelled_element.ts

@@ -1,32 +0,0 @@
-import { BaseUIElement } from './base_element';
-import { LabelElement } from './label';
-
-export abstract class LabelledElement<Type> extends BaseUIElement<Type> {
-    private _label: string;
-    private _labelElement: LabelElement;
-
-    public constructor(label: string) {
-        super();
-        this._label = label;
-        this._labelElement = new LabelElement(label);
-    }
-
-    public generateHTML() {
-        return `
-            ${this._labelElement.generateHTML()}
-            <div class="prop-value-container">
-                ${this.generateInnerHTML()}
-            </div>
-        `;
-    }
-
-    protected abstract generateInnerHTML(): string;
-
-    protected _onEnabledChanged() {
-        this._labelElement.setEnabled(this.getEnabled());
-    }
-
-    public addDescription(text: string) {
-        this._labelElement = new LabelElement(this._label, text);
-    }
-}

src/ui/layout.ts

@@ -1,3 +1,5 @@
+import Split from 'split.js';
+
 import { AppContext } from '../app_context';
 import { FallableBehaviour } from '../block_mesh';
 import { ArcballCamera } from '../camera';
@@ -7,7 +9,6 @@ import { MeshType, Renderer } from '../renderer';
 import { EAction } from '../util';
 import { ASSERT } from '../util/error_util';
 import { LOG } from '../util/log_util';
-import { AppPaths } from '../util/path_util';
 import { TAxis } from '../util/type_util';
 import { TDithering } from '../util/type_util';
 import { TVoxelOverlapRule } from '../voxel_mesh';
@@ -312,7 +313,7 @@ export class UI {
                         .isEnabled(() => {
                             return Renderer.Get.getModelsAvailable() >= MeshType.VoxelMesh;
                         }),
-                    'blockMesh': new ToolbarItemElement({ id: 'blockMesh', iconSVG: AppIcons.BLOCK  })
+                    'blockMesh': new ToolbarItemElement({ id: 'blockMesh', iconSVG: AppIcons.BLOCK })
                         .onClick(() => {
                             Renderer.Get.setModelToUse(MeshType.BlockMesh);
                         })
@@ -487,6 +488,16 @@ export class UI {
 
             toolbarHTML.placeInto('toolbar');
         }
+
+        Split(['.column-properties', '.column-canvas'], {
+            sizes: [20, 80],
+            minSize: [400, 500],
+        });
+
+        const item = document.getElementsByClassName('gutter').item(0);
+        if (item !== null) {
+            item.innerHTML = `<div class='gutter-line'></div>`;
+        }
     }
 
     public cacheValues(action: EAction) {
@@ -657,7 +668,7 @@ export class UI {
             }
         });
         */
-        textureAtlases.push({ payload: 'vanilla', displayText: 'Vanilla '});
+        textureAtlases.push({ payload: 'vanilla', displayText: 'Vanilla ' });
 
         return textureAtlases;
     }

src/util/ui_util.ts

@@ -3,7 +3,7 @@ import { ASSERT } from './error_util';
 export namespace UIUtil {
     export function getElementById(id: string) {
         const element = document.getElementById(id);
-        //ASSERT(element !== null, `Attempting to getElement of nonexistent element: ${id}`);
+        ASSERT(element !== null, `Attempting to getElement of nonexistent element: ${id}`);
         return element as HTMLElement;
     }
 }

styles.css

@@ -1,9 +1,8 @@
 @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400&display=swap');
 
 :root {
-  --properties-width: max(400px, 20%);
   --pill-radius: 5px;
-  --prop-bg: hsl(0, 0%, 10%);
+  --prop-bg: rgb(26, 26, 26);
   --prop-alt: hsl(0, 0%, 15%);
 
   --prop-accent-border-hovered: #33AAC2;
@@ -32,32 +31,56 @@
 
 body {
   margin: 0px;
-  background: rgb(25, 25, 25);
   font-family: 'Lexend', sans-serif;
   overflow: hidden;
   user-select: none;
 }
 
 canvas {
-  position: absolute;
   width: 100%;
   height: 100%;
 }
 
+.content {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+}
+
+.split {
+  width: 100%;
+  height: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.gutter {
+  cursor: col-resize;
+  height: 100%;
+  background: rgb(20, 20, 20);
+  border-left: 1px solid rgb(15, 15, 15);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.gutter-line {
+  background-color: hsl(0, 0%, 20%);
+  width: 2px;
+  height: 20%;
+  border-radius: 2px;
+}
 
 .column-properties {
   background: var(--prop-bg);
-  position: absolute;
-  width: var(--properties-width);
-  height: 100%;
   overflow: auto;
 }
 
 .column-canvas {
-  position: absolute;
-  margin-left: var(--properties-width);
-  width: calc(100% - var(--properties-width));
-  height: 100%;
   cursor: crosshair;
 }
 
@@ -378,16 +401,16 @@ select:disabled {
 }
 
 ::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.2);
+  background: rgb(20, 20, 20);
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.1);
+  background: rgb(50, 50, 50);
   border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.2);
+  background: rgb(60, 60, 60);
 }
 
 .message-builder-item {
@@ -457,9 +480,10 @@ select:disabled {
 
 .toolbar {
   display: flex;
-  position: inherit;
+  position: relative;
-  flex-direction: row;
+  top: -100vh;
   width: 100%;
+  flex-direction: row;
   justify-content: space-between;
   cursor: inherit;
   pointer-events: none;

template.html

@@ -2,34 +2,47 @@
 <html>
   <head>
     <!-- Google tag (gtag.js) -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-W0SCWQ7HGJ"></script>
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-W0SCWQ7HGJ"
+    ></script>
     <script>
       window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
+      function gtag() {
-      gtag('js', new Date());
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
 
-      gtag('config', 'G-W0SCWQ7HGJ');
+      gtag("config", "G-W0SCWQ7HGJ");
     </script>
     <meta charset="utf8" />
     <title>ObjToSchematic Web</title>
     <meta
       name="description"
       content="A tool to convert 3D models into Minecraft formats such as .schematic, .litematic, .schem and .nbt."
-      />
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta property="og:title" content="ObjToSchematic" />
-    <meta property="og:description" content="A tool to convert 3D models into Minecraft formats such as .schematic, .litematic, .schem and .nbt." />
+    <meta
+      property="og:description"
+      content="A tool to convert 3D models into Minecraft formats such as .schematic, .litematic, .schem and .nbt."
+    />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://objtoschematic.com/" />
     <meta property="og:image" content="https://i.imgur.com/TwdIpyb.png" />
   </head>
   <body>
-    <div class="column-properties" id="properties"></div>
+    <div class="content">
-    <div class="column-canvas">
+      <div class="split column-properties" id="properties"></div>
-      <canvas id="canvas"></canvas>
+      <div class="split column-canvas">
-      <div class="toolbar" id="toolbar"></div>
+        <canvas id="canvas"></canvas>
+        <div class="toolbar" id="toolbar"></div>
+      </div>
     </div>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9188679203215896"
+    <script
-     crossorigin="anonymous"></script>
+      async
+      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9188679203215896"
+      crossorigin="anonymous"
+    ></script>
   </body>
 </html>