Vector input binder for changing all inputs

src/components/NumericInput/index.ts

@@ -157,7 +157,7 @@ class NumericInput extends InputElement {
         this._updatePosition(evt.movementX, evt.shiftKey);
     };
 
-    protected _onSliderMouseDown = () => {
+    protected _onSliderMouseDown = (evt: MouseEvent) => {
         this._sliderControl.dom.requestPointerLock();
         this._sliderMovement = 0.0;
         this._sliderPrevValue = this.value;
@@ -169,6 +169,8 @@ class NumericInput extends InputElement {
             this.binding.historyCombine = true;
             this.binding.historyPostfix = `(${Date.now()})`;
         }
+
+        this.emit('slider:mousedown', evt);
     };
 
     protected _onSliderMouseUp = () => {
@@ -185,6 +187,9 @@ class NumericInput extends InputElement {
             this._historyPostfix = null;
         }
         this.focus();
+
+        this.emit('slider:mouseup');
+
     };
 
     protected _onInputChange(evt: Event) {

src/components/VectorInput/index.ts

@@ -43,6 +43,8 @@ class VectorInput extends Element implements IBindable, IFocusable, IPlaceholder
 
     protected _applyingChange = false;
 
+    protected _bindAllInputs = false;
+
     constructor(args: Readonly<VectorInputArgs> = {}) {
         const elementArgs = { ...args };
         // set binding after inputs have been created
@@ -64,8 +66,25 @@ class VectorInput extends Element implements IBindable, IFocusable, IPlaceholder
                 renderChanges: args.renderChanges,
                 placeholder: args.placeholder ? (Array.isArray(args.placeholder) ? args.placeholder[i] : args.placeholder) : null
             });
+            input.on('slider:mousedown', (evt: MouseEvent) => {
+                this._bindAllInputs = !!evt.altKey;
+                if (this._bindAllInputs) {
+                    for (let i = 0; i < this._inputs.length; i++) {
+                        if (this._inputs[i] === input) continue;
+                        this._inputs[i].class.add(pcuiClass.FOCUS);
+                    }
+                }
+            });
+            input.on('slider:mouseup', () => {
+                this._onInputChange(input);
+                this._bindAllInputs = false;
+                for (let i = 0; i < this._inputs.length; i++) {
+                    if (this._inputs[i] === input) continue;
+                    this._inputs[i].class.remove(pcuiClass.FOCUS);
+                }
+            });
             input.on('change', () => {
-                this._onInputChange();
+                this._onInputChange(input);
             });
             input.on('focus', () => {
                 this.emit('focus');
@@ -90,7 +109,8 @@ class VectorInput extends Element implements IBindable, IFocusable, IPlaceholder
         }
     }
 
-    protected _onInputChange() {
+
+    protected _onInputChange(input: NumericInput) {
         if (this._applyingChange) return;
 
         // check if any of our inputs have the MULTIPLE_VALUES class and if so inherit it for us as well
@@ -102,7 +122,17 @@ class VectorInput extends Element implements IBindable, IFocusable, IPlaceholder
             this.class.remove(pcuiClass.MULTIPLE_VALUES);
         }
 
-        this.emit('change', this.value);
+        if (this._bindAllInputs) {
+            const value = Array(this._inputs.length).fill(input.value);
+            const changed = this._updateValue(value);
+
+            if (changed && this._binding) {
+                this._binding.setValue(value);
+            }
+        } else {
+            this.emit('change', this.value);
+        }
+
     }
 
     protected _updateValue(value: number[]) {