Fixed up some UI issues with the vector spinbox

Fixed various linting issues

src/material-map.ts

@@ -1,4 +1,4 @@
-import { RGBAColours, RGBAUtil } from './colour';
+import { RGBAColours } from './colour';
 import { MaterialMap, MaterialType } from './mesh';
 import { ASSERT } from './util/error_util';
 import { AppPaths, PathUtil } from './util/path_util';

src/mesh.ts

@@ -5,7 +5,7 @@ import { Bounds } from './bounds';
 import { RGBA, RGBAColours, RGBAUtil } from './colour';
 import { degreesToRadians } from './math';
 import { StatusHandler } from './status';
-import { Texture, TextureConverter, TextureFiltering } from './texture';
+import { Texture, TextureConverter } from './texture';
 import { Triangle, UVTriangle } from './triangle';
 import { getRandomID, UV } from './util';
 import { AppError, ASSERT } from './util/error_util';

src/texture.ts

@@ -6,7 +6,7 @@ const TGA = require('tga');
 
 import { RGBA, RGBAColours, RGBAUtil } from './colour';
 import { AppConfig } from './config';
-import { clamp, wayThrough } from './math';
+import { clamp } from './math';
 import { UV } from './util';
 import { AppError, ASSERT } from './util/error_util';
 import { FileUtil } from './util/file_util';

src/ui/elements/vector_spinbox.ts

@@ -9,6 +9,8 @@ export class VectorSpinboxElement extends ConfigUIElement<Vector3, HTMLDivElemen
     private _dragging: TAxis | null;
     private _lastClientX: number;
     private _showY: boolean;
+    private _wrap: number;
+    private _units: string | null;
 
     public constructor() {
         super(new Vector3(0, 0, 0));
@@ -16,6 +18,8 @@ export class VectorSpinboxElement extends ConfigUIElement<Vector3, HTMLDivElemen
         this._dragging = null;
         this._lastClientX = 0.0;
         this._showY = true;
+        this._wrap = Infinity;
+        this._units = null;
     }
 
     /**
@@ -23,6 +27,17 @@ export class VectorSpinboxElement extends ConfigUIElement<Vector3, HTMLDivElemen
      */
     public setShowY(showY: boolean) {
         this._showY = showY;
+        return this;
+    }
+
+    public setWrap(wrap: number) {
+        this._wrap = wrap;
+        return this;
+    }
+
+    public setUnits(units: string) {
+        this._units = units;
+        return this;
     }
 
     protected override _generateInnerHTML() {
@@ -70,9 +85,11 @@ export class VectorSpinboxElement extends ConfigUIElement<Vector3, HTMLDivElemen
         const elementValue = UIUtil.getElementById(this._getValueId(axis));
 
         elementValue.onmouseenter = () => {
-            this._mouseover = axis;
-            if (this.getEnabled()) {
-                elementValue.classList.add('spinbox-value-hover');
+            if (this._dragging === null) {
+                this._mouseover = axis;
+                if (this.getEnabled()) {
+                    elementValue.classList.add('spinbox-value-hover');
+                }
             }
         };
 
@@ -106,7 +123,7 @@ export class VectorSpinboxElement extends ConfigUIElement<Vector3, HTMLDivElemen
 
         document.addEventListener('mouseup', () => {
             if (this._dragging !== null) {
-                const elementValue = UIUtil.getElementById(this._getKeyId(this._dragging));
+                const elementValue = UIUtil.getElementById(this._getValueId(this._dragging));
                 elementValue.classList.remove('spinbox-value-hover');
             }
 
@@ -125,13 +142,13 @@ export class VectorSpinboxElement extends ConfigUIElement<Vector3, HTMLDivElemen
 
         switch (this._dragging) {
             case 'x':
-                current.x += deltaX;
+                current.x = (current.x + deltaX) % this._wrap;
                 break;
             case 'y':
-                current.y += deltaX;
+                current.y += (current.y + deltaX) % this._wrap;
                 break;
             case 'z':
-                current.z += deltaX;
+                current.z += (current.z + deltaX) % this._wrap;
                 break;
         }
         this._setValue(current);
@@ -175,10 +192,10 @@ export class VectorSpinboxElement extends ConfigUIElement<Vector3, HTMLDivElemen
 
         const current = this.getValue().copy();
 
-        elementXV.innerHTML = current.x.toString();
+        elementXV.innerHTML = current.x.toString() + this._units;
         if (elementYV) {
-            elementYV.innerHTML = current.y.toString();
+            elementYV.innerHTML = current.y.toString() + this._units;
         }
-        elementZV.innerHTML = current.z.toString();
+        elementZV.innerHTML = current.z.toString() + this._units;
     }
 }

src/ui/layout.ts

@@ -3,8 +3,6 @@ import fs from 'fs';
 import { AppContext } from '../app_context';
 import { FallableBehaviour } from '../block_mesh';
 import { ArcballCamera } from '../camera';
-import { AppConfig } from '../config';
-import { EAppEvent, EventManager } from '../event';
 import { TExporters } from '../exporters/exporters';
 import { PaletteManager } from '../palette';
 import { MeshType, Renderer } from '../renderer';
@@ -12,11 +10,10 @@ import { EAction } from '../util';
 import { ASSERT } from '../util/error_util';
 import { LOG } from '../util/log_util';
 import { AppPaths } from '../util/path_util';
-import { TAxis, TTexelExtension } from '../util/type_util';
+import { TAxis } from '../util/type_util';
 import { TDithering } from '../util/type_util';
 import { TVoxelOverlapRule } from '../voxel_mesh';
 import { TVoxelisers } from '../voxelisers/voxelisers';
-import { BaseUIElement } from './elements/base_element';
 import { ButtonElement } from './elements/button';
 import { CheckboxElement } from './elements/checkbox';
 import { ComboBoxElement, ComboBoxItem } from './elements/combobox';
@@ -50,7 +47,9 @@ export class UI {
                     .setFileExtensions(['obj'])
                     .setLabel('Wavefront .obj file'),
                 'rotation': new VectorSpinboxElement()
-                    .setLabel('Rotation'),
+                    .setLabel('Rotation')
+                    .setWrap(360)
+                    .setUnits('°'),
             },
             elementsOrder: ['input', 'rotation'],
             submitButton: new ButtonElement()
@@ -413,7 +412,7 @@ export class UI {
 
     private _appContext: AppContext;
 
-    constructor(appContext: AppContext) {
+    public constructor(appContext: AppContext) {
         this._appContext = appContext;
     }
 

src/ui/misc.ts

@@ -185,7 +185,7 @@ export class UIMessageBuilder {
             const cssColourClass = this._getStatusCSSClass(style);
             this._messages.push({
                 groupId: groupId, body: `
-                <div style="padding-left: 16px;" ${cssColourClass ? `class="${cssColourClass}"` : ''}> - ${message}</div>
+                <div style="margin-left: 16px;" ${cssColourClass ? `class="message-builder-item ${cssColourClass}"` : ''}> - ${message}</div>
             `});
         }
         return this;

src/voxelisers/base-voxeliser.ts

@@ -2,7 +2,6 @@ import { RGBA, RGBAColours, RGBAUtil } from '../colour';
 import { AppConfig } from '../config';
 import { MaterialType, Mesh } from '../mesh';
 import { StatusHandler } from '../status';
-import { TextureFiltering } from '../texture';
 import { Triangle, UVTriangle } from '../triangle';
 import { UV } from '../util';
 import { ASSERT } from '../util/error_util';

src/worker_types.ts

@@ -4,7 +4,6 @@ import { RGBAUtil } from './colour';
 import { TExporters } from './exporters/exporters';
 import { MaterialMap } from './mesh';
 import { StatusMessage } from './status';
-import { TextureFiltering } from './texture';
 import { ColourSpace } from './util';
 import { AppError } from './util/error_util';
 import { TAxis } from './util/type_util';

styles.css

@@ -171,7 +171,7 @@ canvas {
   width: 100%;
   border: 1.5px solid var(--prop-sunken);
   transition-duration: 1s;
-  overflow-wrap: anywhere;
+  overflow: hidden;
 }
 
 .slider-number-input {
@@ -362,6 +362,11 @@ select:disabled {
   background: rgba(255, 255, 255, 0.2);
 }
 
+.message-builder-item {
+  overflow: auto;
+  white-space: nowrap;
+}
+
 .status-warning {
   transition-duration: 0.5s;
   color: orange;
@@ -654,58 +659,6 @@ svg {
   transition: width 0.1s;
 }
 
-
-
-
-/* Remove default bullets */
-ul {
-  list-style-type: none;
-  margin: 0;
-  padding-left: 10px;
-}
-
-/* Style the caret/arrow */
-.caret {
-  cursor: pointer;
-  user-select: none; /* Prevent text selection */
-}
-.caret:hover {
-  color: var(--text-standard) !important;
-}
-
-/* Create the caret/arrow with a unicode, and style it */
-.caret::before {
-  content: "\25B6";
-  display: inline-block;
-  margin-right: 6px;
-}
-
-
-/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
-.caret-down::before {
-  transform: rotate(90deg);
-}
-
-/* Hide the nested list */
-.nested {
-  display: none;
-}
-
-/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
-.active {
-  display: block;
-}
-
-
-a {
-  border-bottom: 1px solid currentColor;
-  cursor: pointer;
-  color: #8C8C8C80;
-}
-a:hover {
-  color: var(--text-standard) !important;
-}
-
 .colour-swatch {
   border: 1px solid #8C8C8C80;
   border-radius: 5px;
@@ -790,16 +743,6 @@ a:hover {
   stroke: var(--text-disabled);
 }
 
-
-.metadata-value {
-  display: inline;
-  color: rgb(128, 128, 128);
-  background-color: rgb(12, 12, 12);
-  padding: 0px 2px;
-  border-radius: 2px;
-  word-wrap: break-word;
-}
-
 .spinbox-main-container {
   display: flex;
   flex-direction: row;

tests/normal-corrected-ray-voxeliser.test.ts

@@ -2,7 +2,6 @@ import path from 'path';
 
 import { RGBAColours } from '../src/colour';
 import { ObjImporter } from '../src/importers/obj_importer';
-import { TextureFiltering } from '../src/texture';
 import { ASSERT } from '../src/util/error_util';
 import { Vector3 } from '../src/vector';
 import { NormalCorrectedRayVoxeliser } from '../src/voxelisers/normal-corrected-ray-voxeliser';

tests/objlitematic.test.ts

@@ -1,4 +1,3 @@
-import { TextureFiltering } from '../src/texture';
 import { ColourSpace } from '../src/util';
 import { AppPaths, PathUtil } from '../src/util/path_util';
 import { Vector3 } from '../src/vector';

tests/objobj.test.ts

@@ -1,4 +1,3 @@
-import { TextureFiltering } from '../src/texture';
 import { ColourSpace } from '../src/util';
 import { AppPaths, PathUtil } from '../src/util/path_util';
 import { Vector3 } from '../src/vector';

tests/objschem.test.ts

@@ -1,4 +1,3 @@
-import { TextureFiltering } from '../src/texture';
 import { ColourSpace } from '../src/util';
 import { AppPaths, PathUtil } from '../src/util/path_util';
 import { Vector3 } from '../src/vector';

tests/objschematic.test.ts

@@ -1,4 +1,3 @@
-import { TextureFiltering } from '../src/texture';
 import { ColourSpace } from '../src/util';
 import { AppPaths, PathUtil } from '../src/util/path_util';
 import { Vector3 } from '../src/vector';