uiconfig-blueprint 0.1.0-dev.7 → 0.1.0-dev.9

package/src/bpComponents/BPVectorInputComponent.tsx

@@ -6,12 +6,14 @@ import type {Vector2, Vector3, Vector4} from "three";
 import {ExtendedNumericInput} from "../components/ExtendedNumericInput";
 import {wIcon3, xIcon3, yIcon3, zIcon3} from "../components/variableIcons";
 import {getOrCall} from 'ts-browser-helpers'
+import {getNumberTransformFunctions} from "./GetNumberTransformFunctions";
 
 export type BPVectorComponentState = BPValueComponentState<Vector2|Vector3|Vector4> & {
     min: number,
     max: number,
     step: number,
     components: 1|2|3|4,
+    unit?: string,
 }
 
 export class BPVectorInputComponent extends BPInputComponent<Vector2|Vector3|Vector4, BPVectorComponentState> {
@@ -73,21 +75,34 @@ export class BPVectorInputComponent extends BPInputComponent<Vector2|Vector3|Vec
         let ret = []
         if (!this.state.value) return <></>;
 
+        const unit = this.props.config.unit as string|undefined; // todo add to uiconfig, getOrCall
+        const unitType = this.props.config.unitType as string|undefined; // todo add to uiconfig, getOrCall
+        const targetUnit = this.state.unit || unit
+        const transformValue = getNumberTransformFunctions(unit, unitType, targetUnit);
+
+        const props = {
+            disabled: this.state.disabled,
+            readOnly: this.state.readOnly,
+            min: this.state.min,
+            max: this.state.max,
+            stepSize: this.state.step,
+            minorStepSize: this.state.step / 10,
+            majorStepSize: this.state.step * 10,
+            buttonPosition: "none",
+            ...transformValue,
+        } as const
+
         // console.warn(this.state.value)
         if (this.state.components > 0) {
             const x = (
                 <ExtendedNumericInput
                     style={{maxWidth: "8rem", minWidth: "2rem"}}
-                    disabled={this.state.disabled} readOnly={this.state.readOnly}
                     // defaultValue={state}
                     leftIcon={xIcon3}
                     value={this.state.value.x}
                     key={this.props.config.uuid + '_x'}
                     ref={this._inputs[0]}
-                    min={this.state.min} max={this.state.max} stepSize={this.state.step}
-                    minorStepSize={this.state.step / 10}
-                    majorStepSize={this.state.step * 10}
-                    buttonPosition="none"
+                    {...props}
                     onChange2={(v, last) => {
                         this.state.value.x = v
                         this.setValue(this.state.value, last) // todo: does need refresh?
@@ -100,15 +115,11 @@ export class BPVectorInputComponent extends BPInputComponent<Vector2|Vector3|Vec
                 <ExtendedNumericInput
                     style={{maxWidth: "8rem", minWidth: "2rem"}}
                     // defaultValue={state}
-                    disabled={this.state.disabled} readOnly={this.state.readOnly}
                     value={this.state.value.y}
                     leftIcon={yIcon3}
                     key={this.props.config.uuid + '_y'}
                     ref={this._inputs[1]}
-                    min={this.state.min} max={this.state.max} stepSize={this.state.step}
-                    minorStepSize={this.state.step / 10}
-                    majorStepSize={this.state.step * 10}
-                    buttonPosition="none"
+                    {...props}
                     onChange2={(v, last) => {
                         this.state.value.y = v
                         this.setValue(this.state.value, last) // todo: does need refresh?
@@ -121,15 +132,11 @@ export class BPVectorInputComponent extends BPInputComponent<Vector2|Vector3|Vec
                 <ExtendedNumericInput
                     style={{maxWidth: "8rem", minWidth: "2rem"}}
                     // defaultValue={state}
-                    disabled={this.state.disabled} readOnly={this.state.readOnly}
                     value={(this.state.value as Vector3|Vector4).z}
                     key={this.props.config.uuid + '_z'}
                     leftIcon={zIcon3}
-                    min={this.state.min} max={this.state.max} stepSize={this.state.step}
                     ref={this._inputs[2]}
-                    minorStepSize={this.state.step / 10}
-                    majorStepSize={this.state.step * 10}
-                    buttonPosition="none"
+                    {...props}
                     onChange2={(v, last) => {
                         (this.state.value as Vector3 | Vector4).z = v
                         this.setValue(this.state.value, last) // todo: does need refresh?
@@ -142,15 +149,11 @@ export class BPVectorInputComponent extends BPInputComponent<Vector2|Vector3|Vec
                 <ExtendedNumericInput
                     style={{maxWidth: "8rem", minWidth: "2rem"}}
                     // defaultValue={state}
-                    disabled={this.state.disabled} readOnly={this.state.readOnly}
                     value={(this.state.value as Vector4).w}
                     key={this.props.config.uuid + '_w'}
                     leftIcon={wIcon3}
                     ref={this._inputs[3]}
-                    min={this.state.min} max={this.state.max} stepSize={this.state.step}
-                    minorStepSize={this.state.step / 10}
-                    majorStepSize={this.state.step * 10}
-                    buttonPosition="none"
+                    {...props}
                     onChange2={(v, last) => {
                         (this.state.value as Vector4).w = v
                         this.setValue(this.state.value, last) // todo: does need refresh?

package/src/bpComponents/GetNumberTransformFunctions.tsx

@@ -0,0 +1,14 @@
+import {NumberUnits} from "./NumberUnits";
+
+export function getNumberTransformFunctions(unit: string | undefined, unitType1: string | undefined, targetUnit: string | undefined) {
+    const unitType = unit ? Object.entries(NumberUnits).find(([k, v]) => !!v[unit] && (!unitType1 || k === unitType1)) : undefined
+    const target = targetUnit !== unit && unitType && targetUnit ? unitType[1][targetUnit] : undefined
+    const source = targetUnit !== unit && unitType && unit ? unitType[1][unit] : undefined
+    const transformValue = target && source ?
+        (v: number) => target.from(source.to(v)) :
+        undefined;
+    const invTransformValue = target && source ?
+        (v: number) => source.from(target.to(v)) :
+        undefined;
+    return {transformValue, invTransformValue};
+}

package/src/bpComponents/NumberUnits.tsx

@@ -0,0 +1,123 @@
+export interface NumberUnit{
+    name: string;
+    symbol: string;
+    from: (value: number) => number;
+    to: (value: number) => number;
+}
+export const NumberUnits: Record<string, Record<string, NumberUnit>> = {
+    'distance': {
+        'm': {
+            'name': 'Meters',
+            'symbol': 'm',
+            from: (v: number) => v,
+            to: (v: number) => v,
+        },
+        'cm': {
+            'name': 'Centimeters',
+            'symbol': 'cm',
+            from: (v: number) => v / 100,
+            to: (v: number) => v * 100,
+        },
+        'mm': {
+            'name': 'Millimeters',
+            'symbol': 'mm',
+            from: (v: number) => v / 1000,
+            to: (v: number) => v * 1000,
+        },
+        'in': {
+            'name': 'Inches',
+            'symbol': 'in',
+            from: (v: number) => v * 0.0254,
+            to: (v: number) => v / 0.0254,
+        },
+        'ft': {
+            'name': 'Feet',
+            'symbol': 'ft',
+            from: (v: number) => v * 0.3048,
+            to: (v: number) => v / 0.3048,
+        },
+        'km': {
+            'name': 'Kilometers',
+            'symbol': 'km',
+            from: (v: number) => v * 1000,
+            to: (v: number) => v / 1000,
+        },
+        'mi': {
+            'name': 'Miles',
+            'symbol': 'mi',
+            from: (v: number) => v * 1609.34,
+            to: (v: number) => v / 1609.34,
+        },
+    },
+    'angle': {
+        'rad': {
+            'name': 'Radians',
+            'symbol': 'rad',
+            from: (v: number) => v,
+            to: (v: number) => v,
+        },
+        'deg': {
+            'name': 'Degrees',
+            'symbol': 'deg',
+            from: (v: number) => v * Math.PI / 180,
+            to: (v: number) => v * 180 / Math.PI,
+        },
+        'grad': {
+            'name': 'Gradians',
+            'symbol': 'grad',
+            from: (v: number) => v * Math.PI / 200,
+            to: (v: number) => v * 200 / Math.PI,
+        },
+    },
+    'temperature': {
+        'celsius': {
+            'name': 'Celsius',
+            'symbol': '°C',
+            from: (v: number) => v,
+            to: (v: number) => v,
+        },
+        'fahrenheit': {
+            'name': 'Fahrenheit',
+            'symbol': '°F',
+            from: (v: number) => (v - 32) * 5 / 9,
+            to: (v: number) => v * 9 / 5 + 32,
+        },
+        'kelvin': {
+            'name': 'Kelvin',
+            'symbol': 'K',
+            from: (v: number) => v - 273.15,
+            to: (v: number) => v + 273.15,
+        },
+    },
+    'pixel': {
+        'px': {
+            'name': 'Pixels',
+            'symbol': 'px',
+            from: (v: number) => v,
+            to: (v: number) => v,
+        },
+        'dp': {
+            'name': 'Density-independent Pixels',
+            'symbol': 'dp',
+            from: (v: number) => v * window.devicePixelRatio,
+            to: (v: number) => v / window.devicePixelRatio,
+        },
+        // todo
+        // 'sp': {
+        //     'name': 'Scale-independent Pixels',
+        //     'symbol': 'sp',
+        //     from: (v: number) => {
+        //         const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) / 16;
+        //         return v * fontSize * window.devicePixelRatio;
+        //     }
+        // },
+        // 'rem': {
+        //     'name': 'Root em',
+        //     'symbol': 'rem',
+        //     from: (v: number) => {
+        //         const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) / 16;
+        //         return v * fontSize * window.devicePixelRatio;
+        //     }
+        // }
+    }
+}

package/src/components/DialogContext.tsx

@@ -156,6 +156,7 @@ function DialogPromptButtons({
                 onClick={() => updateLoading('popup-close', doClose())}/>
         <Button text={submitButtonText}
                 intent="primary"
+                data-dialog-submit="true"
                 loading={loadingState['popup-submit']}
                 onClick={() => updateLoading('popup-submit', doSubmit())}/>
     </>
@@ -172,6 +173,18 @@ function DialogPromptContent({
     showInput?: boolean,
 }){
     const {state, setState} = useDialog() as {state: DialogPromptState, setState: Dispatch<SetStateAction<DialogPromptState>>}
+    const {loadingState} = useLoadingState()
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter') {
+            // Get the submit button using the data attribute and simulate a click
+            const submitButton = document.querySelector('[data-dialog-submit="true"]') as HTMLButtonElement;
+            if (submitButton && !loadingState['popup-submit']) {
+                submitButton.click();
+            }
+        }
+    }
+
     return <FormGroup
         helperText={state.helperText||undefined}
         intent={state.intent}
@@ -184,13 +197,14 @@ function DialogPromptContent({
             placeholder={placeholder}
             defaultValue={state.value}
             style={{display: showInput ? 'block' : 'none'}}
+            autoFocus={true}
             onChange={(e: any) => {
                 state.value = e.target.value
                 state.helperText = ''
                 state.intent = Intent.NONE
                 setState({...state})
-            }} // todo: submit on enter
+            }}
+            onKeyDown={handleKeyDown}
         />
     </FormGroup>
-
 }

package/src/components/ExtendedNumericInput.tsx

@@ -20,7 +20,7 @@
 import React from "react";
 
 import type {HTMLInputProps, NumericInputProps} from "@blueprintjs/core";
-import {NumericInput} from "@blueprintjs/core";
+import {NumericInput} from "./NumericInput";
 import {DraggableIcon} from "./DraggableIcon";
 
 export interface IExtendedNumericInputState {
@@ -35,40 +35,87 @@ const NumberAbbreviation = {
 
 const NUMBER_ABBREVIATION_REGEX = /((\.\d+)|(\d+(\.\d+)?))(k|m|b)\b/gi;
 const SCIENTIFIC_NOTATION_REGEX = /((\.\d+)|(\d+(\.\d+)?))(e\d+)\b/gi;
+type Props = HTMLInputProps & NumericInputProps & {
+    onChange2?: (v: number, last?: boolean) => void,
+    transformValue?: (v: number) => number,
+    invTransformValue?: (v: number) => number,
+    draggableIcon?: boolean
+    value?: number | undefined
+    defaultValue?: number | undefined
+}
 // todo: bounds and stepsize
-export class ExtendedNumericInput extends React.PureComponent<HTMLInputProps & NumericInputProps & { onChange2: (v: number, last?: boolean) => void }, IExtendedNumericInputState> {
+export class ExtendedNumericInput extends React.PureComponent<Props, IExtendedNumericInputState> {
+    invTransformValue = (v: number|undefined) => {
+        v = v || 0
+        const v1 = this.props.invTransformValue ? this.props.invTransformValue(v) : v;
+        return v1
+    }
+    transformValue = (v: number|undefined) => {
+        v = v || 0
+        const v1 = this.props.transformValue ? this.props.transformValue(v) : v;
+        return v1
+    }
+
     public state: IExtendedNumericInputState = {
-        value: (this.props.value ?? this.props.defaultValue ?? '').toString(),
+        value: this.invTransformValue(this.props.value ?? this.props.defaultValue).toString(),
     };
 
     async setValue(val?: number) {
         return new Promise<void>((resolve) => {
-            this.setState({value: (val ?? this.props.value ?? this.props.defaultValue ?? '').toString()}, resolve)
+            this.setState({value: this.invTransformValue(val ?? this.props.value ?? this.props.defaultValue).toString()}, resolve)
         })
     }
 
+    componentDidUpdate(prevProps: Props) {
+        if (prevProps.value !== this.props.value && this.props.value !== undefined) {
+            this.setState({ value: this.invTransformValue(this.props.value).toString() });
+        }
+    }
     public render() {
         const {value} = this.state;
-        const props2: HTMLInputProps & NumericInputProps & { onChange2?: (v: number, last?: boolean) => void } = {...this.props, leftIcon: undefined}
-        if (props2.onChange2) delete props2.onChange2
+       const {
+            invTransformValue,
+            transformValue,
+            draggableIcon,
+            onChange2,
+            value: _value,
+            leftIcon,
+            defaultValue,
+            ...props2
+        } = this.props;
+
+        if(transformValue && !invTransformValue ||
+              !transformValue && invTransformValue) {
+            console.error('ExtendedNumericInput: Both transformValue and invTransformValue must be provided or neither. This is to ensure that the value can be transformed back and forth correctly.');
+        }
+
+        if(transformValue){
+            if(props2.min !== undefined) props2.min = this.invTransformValue(props2.min);
+            if(props2.max !== undefined) props2.max = this.invTransformValue(props2.max);
+            if(props2.stepSize !== undefined) props2.stepSize = this.invTransformValue(props2.stepSize);
+            if(props2.minorStepSize /*!== undefined*/) props2.minorStepSize = this.invTransformValue(props2.minorStepSize);
+            if(props2.majorStepSize /*!== undefined*/) props2.majorStepSize = this.invTransformValue(props2.majorStepSize);
+        }
 
         return (
             <NumericInput
                 {...props2}
-                leftElement={(
-                    <DraggableIcon icon={this.props.leftIcon ?? "variable"}
+                leftElement={(  // props2.leftElement could be null
+                    props2.leftElement !== undefined ? props2.leftElement :
+                        draggableIcon !== false ? <DraggableIcon icon={leftIcon ?? "variable"}
                                    size={16}
-                                   disabled={this.props.readOnly}
-                                   small={this.props.small}
+                                   disabled={props2.readOnly}
+                                   small={props2.small}
                                    value={parseFloat(value ?? '0')}
-                                   stepSize={this.props.stepSize}
+                                   stepSize={props2.stepSize}
                                    onChange={(v, last) => {
                                        this.handleValueChange(v, v.toString(), null, last, true)
-                                   }}/>
+                                   }}/> : undefined
                 )}
                 // leftIcon={"variable"}
-                buttonPosition={this.props.buttonPosition ?? (this.props.disabled ? "none" : "right")}
+                buttonPosition={props2.buttonPosition ?? (props2.disabled ? "none" : "right")}
                 allowNumericCharactersOnly={false}
+                clampValueOnBlur={true}
                 onBlur={this.handleBlur}
                 onKeyDown={this.handleKeyDown}
                 onButtonClick={this.handleButtonClick}
@@ -108,9 +155,11 @@ export class ExtendedNumericInput extends React.PureComponent<HTMLInputProps & N
     private handleValueChange = (_valueAsNumber: number, valueAsString: string, inputElement: HTMLInputElement | null, last?: boolean, dispatchOnChange2 = false) => {
         this._lastChangedValue = [_valueAsNumber, valueAsString]
         this.setState({value: valueAsString}, () => {
-            this.props.onValueChange?.(_valueAsNumber, valueAsString, inputElement)
-            if(dispatchOnChange2)
-                this.props.onChange2?.(_valueAsNumber, last)
+            const transformed = this.transformValue(_valueAsNumber)
+            this.props.onValueChange?.(transformed, valueAsString, inputElement)
+            if(dispatchOnChange2) {
+                this.props.onChange2?.(transformed, last)
+            }
         });
     };
 
@@ -125,8 +174,10 @@ export class ExtendedNumericInput extends React.PureComponent<HTMLInputProps & N
         result = this.evaluateSimpleMathExpression(result);
         result = this.nanStringToEmptyString(result);
         this.setState({value: result}, () => {
-            this.props.onValueChange?.(parseFloat(result) || 0, result, null)
-            this.props.onChange2?.(parseFloat(result) || 0)
+            const _valueAsNumber = parseFloat(result) || 0;
+            const transformed = this.transformValue(_valueAsNumber)
+            this.props.onValueChange?.(transformed, result, null)
+            this.props.onChange2?.(transformed, true)
         });
 
         // the user could have typed a different expression that evaluates to
@@ -152,7 +203,7 @@ export class ExtendedNumericInput extends React.PureComponent<HTMLInputProps & N
     };
 
     // Adapted from http://stackoverflow.com/questions/2276021/evaluating-a-string-as-a-mathematical-expression-in-javascript
-    // maybe try a better solution from above, right now it only works left to right
+    // todo - use a proper parser and evaluator, right now it only works left to right
     private evaluateSimpleMathExpression = (value: string) => {
         // leave empty strings empty
         if (!value) {