Updated configurable constraint limits for each axis

res/config.json

@@ -13,5 +13,8 @@
     "CAMERA_DEFAULT_AZIMUTH_RADIANS": -1.0,
     "CAMERA_DEFAULT_ELEVATION_RADIANS": 1.3,
     "CAMERA_SENSITIVITY_ROTATION": 0.005,
-    "CAMERA_SENSITIVITY_ZOOM": 0.005
+    "CAMERA_SENSITIVITY_ZOOM": 0.005,
+    "CONSTRAINT_MAXIMUM_WIDTH": 1024,
+    "CONSTRAINT_MAXIMUM_HEIGHT": 380,
+    "CONSTRAINT_MAXIMUM_DEPTH": 1024
 }

src/config.ts

@@ -30,6 +30,9 @@ export class AppConfig {
     public readonly CAMERA_DEFAULT_ELEVATION_RADIANS: number;
     public readonly CAMERA_SENSITIVITY_ROTATION: number;
     public readonly CAMERA_SENSITIVITY_ZOOM: number;
+    public readonly CONSTRAINT_MAXIMUM_WIDTH: number;
+    public readonly CONSTRAINT_MAXIMUM_HEIGHT: number;
+    public readonly CONSTRAINT_MAXIMUM_DEPTH: number;
 
     private constructor() {
         this.RELEASE_MODE = false;
@@ -54,6 +57,9 @@ export class AppConfig {
         this.CAMERA_DEFAULT_ELEVATION_RADIANS = configJSON.CAMERA_DEFAULT_ELEVATION_RADIANS;
         this.CAMERA_SENSITIVITY_ROTATION = configJSON.CAMERA_SENSITIVITY_ROTATION;
         this.CAMERA_SENSITIVITY_ZOOM = configJSON.CAMERA_SENSITIVITY_ZOOM;
+        this.CONSTRAINT_MAXIMUM_WIDTH = configJSON.CONSTRAINT_MAXIMUM_WIDTH;
+        this.CONSTRAINT_MAXIMUM_HEIGHT = configJSON.CONSTRAINT_MAXIMUM_HEIGHT;
+        this.CONSTRAINT_MAXIMUM_DEPTH = configJSON.CONSTRAINT_MAXIMUM_DEPTH;
     }
 
     public dumpConfig() {

src/event.ts

@@ -6,6 +6,7 @@ export enum EAppEvent {
     onTaskStart,
     onTaskProgress,
     onTaskEnd,
+    onComboBoxChanged,
 }
 /* eslint-enable */
 

src/ui/elements/combobox.ts

@@ -1,3 +1,4 @@
+import { EAppEvent, EventManager } from '../../event';
 import { ASSERT } from '../../util/error_util';
 import { LabelledElement } from './labelled_element';
 
@@ -29,6 +30,12 @@ export class ComboBoxElement<T> extends LabelledElement<T> {
     }
 
     public registerEvents(): void {
+        const element = document.getElementById(this._id) as HTMLSelectElement;
+        ASSERT(element !== null);
+
+        element.addEventListener('change', () => {
+            EventManager.Get.broadcast(EAppEvent.onComboBoxChanged, element.value);
+        });
     }
 
     protected getValue() {

src/ui/elements/slider.ts

@@ -19,6 +19,7 @@ export class SliderElement extends LabelledElement<number> {
         this._step = step;
         this._dragging = false;
         this._hovering = false;
+        this._customEvents = () => { };
     }
 
     public generateInnerHTML() {
@@ -85,6 +86,20 @@ export class SliderElement extends LabelledElement<number> {
         elementValue.addEventListener('change', () => {
             this._onTypedValue();
         });
+
+        this._customEvents(this);
+    }
+
+    private _customEvents: (slider: SliderElement) => void;
+    public registerCustomEvents(delegate: (slider: SliderElement) => void) {
+        this._customEvents = delegate;
+        return this;
+    }
+
+    public setMax(value: number) {
+        this._max = value;
+        this._value = clamp(this._value!, this._min, this._max);
+        this._onValueUpdated();
     }
 
     private _onTypedValue() {

src/ui/layout.ts

@@ -3,6 +3,8 @@ import fs from 'fs';
 import { AppContext } from '../app_context';
 import { TBlockAssigners } from '../assigners/assigners';
 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';
@@ -67,7 +69,18 @@ export class UI {
                         displayText: 'Z (depth) (blue)',
                     },
                 ]),
-                'size': new SliderElement('Size', 3, 380, 0, 80, 1),
+                'size': new SliderElement('Size', 3, 380, 0, 80, 1)
+                    .registerCustomEvents((slider: SliderElement) => {
+                        EventManager.Get.add(EAppEvent.onComboBoxChanged, (value: any) => {
+                            if (value[0] === 'x') {
+                                slider.setMax(AppConfig.Get.CONSTRAINT_MAXIMUM_WIDTH);
+                            } else if (value[0] === 'y') {
+                                slider.setMax(AppConfig.Get.CONSTRAINT_MAXIMUM_HEIGHT);
+                            } else {
+                                slider.setMax(AppConfig.Get.CONSTRAINT_MAXIMUM_DEPTH);
+                            }
+                        });
+                    }),
                 'voxeliser': new ComboBoxElement<TVoxelisers>('Algorithm', [
                     {
                         id: 'bvh-ray',