uiconfig-blueprint 0.1.0-dev.1 → 0.1.0-dev.11

package/src/bpComponents/BPValueComponent.tsx

@@ -1,30 +1,52 @@
 import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
 import {BPLabelledComponent, BPLabelledComponentState} from "./BPLabelledComponent";
+import {equalsPrimitive, PrimitiveVal} from "uiconfig.js";
 
 export type BPValueComponentState<TStateValue> = BPLabelledComponentState & {
     value: TStateValue
 }
 
-export abstract class BPValueComponent<TValue, TState extends BPValueComponentState<TStateValue>, TStateValue> extends BPLabelledComponent<TValue, TState> {
+export abstract class BPValueComponent<TValue extends PrimitiveVal, TState extends BPValueComponentState<TStateValue>, TStateValue> extends BPLabelledComponent<TValue, TState> {
 
     protected constructor(props: BPComponentProps<TValue>, context: UiConfigRendererContextType, state: TState) {
         super(props, context, state);
+        this.setValue = this.setValue.bind(this)
     }
 
     abstract convertValueToState(value: TValue, state: TState): TState;
 
     abstract convertStateToValue(state: TState): Promise<TValue>;
 
+    // this should be state.value ideally which is initialValue in parent component
+    // a separate variable is made here so that it can be undefined in the beginning.
+    private _lastValRef: TValue | undefined
+
     getUpdatedState(state: TState): TState {
-        const val = this.context.methods.getValue(this.props.config)
+        const val = this.context.methods.getValue<TValue>(this.props.config, this._lastValRef, false) // this has to be false otherwise the children component will rerender everytime. like sliders
+        if(this._lastValRef !== undefined && val !== undefined){
+            // changed from outside, so we need to update the children
+            this.keyVersion++
+        }
+        this._lastValRef = val
+        // console.log('getUpdatedState', val);
         state = super.getUpdatedState(state)
-        return val ? this.convertValueToState(val, state) : state
+        state = val !== undefined ? this.convertValueToState(val, state) : state
+        return state
     }
 
     protected _previousLast = false
 
+    // is this really required?
     doesNeedRefresh(state: TState, _last?: boolean): boolean {
-        return this._previousLast !== _last || this.state.value !== state.value
+        const needsRefresh = this._previousLast !== _last || !equals(this.state.value, state.value);
+        this._previousLast = _last ?? true;
+        // console.log('doesNeedRefresh', needsRefresh, this.state.value, state.value);
+        return needsRefresh;
+    }
+
+    setState(state: TState, callback?: () => void) {
+        // this.keyVersion++ // dont in getUpdatedState
+        super.setState(state, callback);
     }
 
     async setValue(value: TStateValue, last?: boolean) {
@@ -39,8 +61,13 @@ export abstract class BPValueComponent<TValue, TState extends BPValueComponentSt
             return
         }
         let val = await this.convertStateToValue(state)
+        this._lastValRef = val
         await this.context.methods.setValue(this.props.config, val, {last}, this.forceOnChange)
         await this.refreshConfigState(state)
     }
 
 }
+
+function equals(a: any, b: any){
+    return equalsPrimitive(a, b)
+}

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/AppToaster.tsx

@@ -8,6 +8,26 @@ import {OverlayToaster, Toaster} from "@blueprintjs/core";
 
 // hack for blueprint 5, remove in blueprint 6
 export const AppToasterRef = {ref: null as Toaster | null}
+
+/**
+ * Usage
+ * ```
+ * AppToaster().show({
+ *    message: 'Message',
+ *    intent: 'primary',
+ *    icon: "tick",
+ *    isCloseButtonShown: false,
+ *    // action: {
+ *    //     onClick: () => {},
+ *    //     text: "Cancel",
+ *    // },
+ *    timeout: 5000,
+ * }, 'toast-id')
+ *
+ * AppToaster().dismiss('toast-id')
+ * ```
+ *
+ */
 export const AppToaster = ()=>AppToasterRef.ref ?? {show: ()=>{}, dismiss: ()=>{}} as any as Toaster
 
 /**

package/src/components/ConfigurationPanelComponent.tsx

@@ -31,6 +31,7 @@ export function ConfigurationPanelComponent({config}: { config: UiObjectConfig<a
         } as Panel<{ config: UiObjectConfig }>
     }, [config])
     const [currentPanelStack, setCurrentPanelStack] = React.useState<Array<Panel<{ config: UiObjectConfig }>>>([stackItem()]);
+    const [isMinimized, setIsMinimized] = React.useState(false);
 
     React.useEffect(() => {
         setCurrentPanelStack([stackItem()])
@@ -40,7 +41,7 @@ export function ConfigurationPanelComponent({config}: { config: UiObjectConfig<a
 
     return (
         <VisualStyleContext.Provider value={{...defaultVisualStyle, ...style}}>
-        <Card id="bpInspectorCard" className={style.darkMode?Classes.DARK:""} style={{height: "100%", flexGrow: "1", position: "relative"}}>
+        <Card className={`bpInspectorCard ${style.darkMode?Classes.DARK:""}`} style={{display: isMinimized ? 'none' : 'block'}}>
             <PanelStack2 className="inspectorPanelStack"
                          showPanelHeader={true}
                          renderActivePanelOnly={true}
@@ -48,16 +49,26 @@ export function ConfigurationPanelComponent({config}: { config: UiObjectConfig<a
                          onClose={() => setCurrentPanelStack(currentPanelStack.slice(0, -1))}
                          stack={currentPanelStack}/>
             <div className={"bpPanelStackHeaderOverlay " + Classes.PANEL_STACK2_HEADER}>
-                <Popover targetProps={{style: {position: "absolute", right: "5px"}}}
+                <Popover targetProps={{style: {position: "absolute", right: "30px"}}}
                          minimal={true}
                          targetTagName={"div"}
                     content={
                     <ThemeSettingsMenuComponent/>
                 } placement="bottom">
-                    <Button icon="cog" small minimal text="" />
+                    <Button icon="more" small minimal text="" />
                 </Popover>
+                <Button icon="minus" small minimal text="" style={{position: "absolute", right: "5px"}}
+                        onClick={() => {
+                            setIsMinimized(!isMinimized);
+                        }}
+                />
             </div>
         </Card>
+        {isMinimized && <Button icon="cog" small text="Configuration" style={{position: "absolute", right: "5px"}}
+                onClick={() => {
+                    setIsMinimized(!isMinimized);
+                }}
+        />}
         </VisualStyleContext.Provider>
     )
 }

package/src/components/DialogContext.tsx

@@ -23,10 +23,20 @@ export function setupDialog(){
         setDialog({...dialog, isOpen: true, ...d})
     }, [dialog, setDialog])
     const close = useCallback(()=>setDialog({...dialog, isOpen: false}), [dialog, setDialog])
-    return {dialog, open, close, setDialog}
+    const setDialogState = useCallback((state: any)=>{
+        setDialog({...dialog, state})
+    }, [dialog, setDialog])
+    return {dialog, open, close, setDialog, state: dialog.state, setState: setDialogState}
 }
-export const DialogContext = createContext<{dialog: DialogStateType, open: (d: Partial<DialogStateType>)=>void, close: ()=>void, setDialog: Dispatch<SetStateAction<DialogStateType>>}>(
-    {dialog: defaultDialogContext, open: ()=>{}, close: ()=>{}, setDialog: ()=>{}}
+export const DialogContext = createContext<{
+    dialog: DialogStateType,
+    open: (d: Partial<DialogStateType>)=>void,
+    close: ()=>void,
+    setDialog: Dispatch<SetStateAction<DialogStateType>>,
+    setState: Dispatch<SetStateAction<any>>,
+    state: any
+}>(
+    {dialog: defaultDialogContext, open: ()=>{}, close: ()=>{}, setDialog: ()=>{}, setState: ()=>{}, state: {}}
 )
 export const useDialog = () => useContext(DialogContext)
 
@@ -48,6 +58,21 @@ export function DialogComponent(){
     </Dialog>)
 }
 
+interface DialogPromptState {
+    value: string,
+    intent: Intent,
+    helperText: string,
+}
+interface DialogPromptProps extends Partial<DialogStateType>{
+    closeButtonText?: string,
+    submitButtonText?: string,
+    message?: string,
+    placeholder?: string,
+    value?: string,
+    showInput?: boolean,
+    onClose?: (value: string)=>boolean|undefined|Promise<boolean|undefined>, // does not close if false
+    onSubmit?: (value: string)=>boolean|undefined|any|Promise<boolean|undefined|any>, // does not close if false
+}
 /**
  * Usage:
  * ```tsx
@@ -66,9 +91,6 @@ export function DialogComponent(){
  */
 export function useDialogPrompt(){
     const {open, close} = useDialog()
-    const {loadingState, updateLoading} = useLoadingState()
-    const [intent, setIntent] = useState<Intent>(Intent.NONE)
-    const [helperText, setHelperText] = useState('')
     const prompt = useCallback(({
         closeButtonText = 'Close',
         submitButtonText = 'Okay',
@@ -77,74 +99,112 @@ export function useDialogPrompt(){
         value = '',
         showInput = true,
         onClose, onSubmit,
-        ...props}: Partial<DialogStateType> &
-        {
-            closeButtonText?: string,
-            submitButtonText?: string,
-            message?: string,
-            placeholder?: string,
-            value?: string,
-            showInput?: boolean,
-            onClose?: (value: string)=>boolean|undefined|Promise<boolean|undefined>, // does not close if false
-            onSubmit?: (value: string)=>boolean|undefined|any|Promise<boolean|undefined|any>, // does not close if false
-    }) => {
+        ...props}: DialogPromptProps) => {
         return new Promise<string|null>((resolve)=>{
-            const state = {value}
-            const doClose = async()=> {
-                if (onClose && (await onClose(state.value)) !== false) return
-                close()
-                resolve(null)
-            }
-            const doSubmit = async()=> {
-                if (onSubmit) {
-                    const res = await onSubmit(state.value)
-                    if(res.error){
-                        setIntent(Intent.DANGER)
-                        setHelperText(res.error)
-                    }
-                    if(res !== false) return
-                }
-                close()
-                resolve(state.value)
-            }
             open({
                 canClose: false,
                 ...props,
-                state,
+                state: {
+                    value,
+                    intent: Intent.NONE,
+                    helperText: '',
+                } as DialogPromptState,
                 content: (
-                    <FormGroup
-                        helperText={helperText||undefined}
-                        intent={intent}
-                        label={message}
-                        labelFor="dialog-prompt-text-input"
-                    >
-                        <InputGroup
-                            intent={intent}
-                            id="dialog-prompt-text-input"
-                            placeholder={placeholder}
-                            defaultValue={state.value}
-                            style={{display: showInput ? 'block' : 'none'}}
-                            onChange={(e: any) => {
-                                state.value = e.target.value
-                                if(helperText) setHelperText('')
-                                if(intent !== Intent.NONE) setIntent(Intent.NONE)
-                            }} // todo: submit on enter
-                        />
-                    </FormGroup>
+                    <DialogPromptContent message={message} showInput={showInput} placeholder={placeholder}/>
                 ),
                 actions: (
-                    <>
-                        <Button text={closeButtonText}
-                                loading={loadingState['popup-close']}
-                                onClick={() => updateLoading('popup-close', doClose())}/>
-                        <Button text={submitButtonText}
-                                intent="primary"
-                                loading={loadingState['popup-submit']}
-                                onClick={() => updateLoading('popup-submit', doSubmit())}/>
-                    </>
+                    <DialogPromptButtons closeButtonText={closeButtonText} submitButtonText={submitButtonText} onClose={onClose} onSubmit={onSubmit} resolve={resolve}/>
                 ),
             })
         })
-    }, [open, close, loadingState, updateLoading])
+    }, [open, close])
     return {prompt, close}
 }
+
+function DialogPromptButtons({
+    closeButtonText = 'Close',
+    submitButtonText = 'Okay',
+    onClose, onSubmit, resolve
+ }:{
+    closeButtonText?: string,
+    submitButtonText?: string,
+    onClose?: (value: string)=>boolean|undefined|Promise<boolean|undefined>, // does not close if false
+    onSubmit?: (value: string)=>boolean|undefined|{error: string}|Promise<boolean|undefined|{error: string}>, // does not close if false
+    resolve: (value: string|null)=>void,
+}){
+    const {loadingState, updateLoading} = useLoadingState()
+    const {state, setState, close} = useDialog() as {state: DialogPromptState, setState: Dispatch<SetStateAction<DialogPromptState>>, close: ()=>void}
+    const doClose = async()=> {
+        if (onClose && (await onClose(state.value)) !== true) return
+        close()
+        resolve(null)
+    }
+    const doSubmit = async()=> {
+        if (onSubmit) {
+            const res = await onSubmit(state.value)
+            if(res && (res as any).error){
+                setState({...state, intent: Intent.DANGER, helperText: (res as any).error})
+            }
+            if(res !== true) return
+        }
+        close()
+        resolve(state.value)
+    }
+    return <>
+        <Button text={closeButtonText}
+                loading={loadingState['popup-close']}
+                onClick={() => updateLoading('popup-close', doClose())}/>
+        <Button text={submitButtonText}
+                intent="primary"
+                data-dialog-submit="true"
+                loading={loadingState['popup-submit']}
+                onClick={() => updateLoading('popup-submit', doSubmit())}/>
+    </>
+
+}
+
+function DialogPromptContent({
+    message = 'Enter some text: ',
+    placeholder = '',
+    showInput = true,
+}: {
+    message?: string,
+    placeholder?: string,
+    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}
+        label={message}
+        labelFor="dialog-prompt-text-input"
+    >
+        <InputGroup
+            intent={state.intent}
+            id="dialog-prompt-text-input"
+            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})
+            }}
+            onKeyDown={handleKeyDown}
+        />
+    </FormGroup>
+}

package/src/components/DraggableIcon.tsx

@@ -2,13 +2,13 @@ import * as React from "react";
 import {Icon, IconName, MaybeElement} from "@blueprintjs/core";
 
 // todo: bounds and stepsize
-export class DraggableIcon extends React.Component<{ icon: IconName | MaybeElement, size?: number, value: number, stepSize?: number, small?: boolean, onChange: (v: number, last?: boolean) => void }> {
+export class DraggableIcon extends React.Component<{ icon: IconName | MaybeElement, size?: number, value: number, stepSize?: number, small?: boolean, disabled?: boolean, onChange: (v: number, last?: boolean) => void }> {
     private cursor = 'auto'
     private dragStartOffset = -Infinity
     private dragStartValue = -Infinity
     private lastValue = -Infinity
     private removeEvents = () => {
-        if (isFinite(this.lastValue)) this.props.onChange(this.lastValue)
+        if (isFinite(this.lastValue) && !this.props.disabled) this.props.onChange(this.lastValue)
         this.lastValue = -Infinity
         this.dragStartOffset = -Infinity
         this.dragStartValue = -Infinity
@@ -42,7 +42,7 @@ export class DraggableIcon extends React.Component<{ icon: IconName | MaybeEleme
                 let val = this.dragStartValue - off;
                 // val = Math.min(props.max, Math.max(props.min, val)); // todo
                 val = Number(val.toFixed(Math.max(1, -Math.log10(stepSize / 10)))); // clip decimal places depending on step size
-                this.props.onChange(val, false)
+                if(!this.props.disabled) this.props.onChange(val, false)
                 this.lastValue = val;
             }
         } else {
@@ -55,9 +55,10 @@ export class DraggableIcon extends React.Component<{ icon: IconName | MaybeEleme
         // const [dragging, setDragging] = React.useState(false)
 
         return (
-            <div style={{cursor: 'ew-resize', marginLeft: "6px", marginRight: "6px", marginTop: this.props.small ? "3px" : "6px", marginBottom: this.props.small ? "3px" : "6px"}}
+            <div style={{cursor: !this.props.disabled ? 'ew-resize': 'auto', marginLeft: "6px", marginRight: "6px", marginTop: this.props.small ? "3px" : "6px", marginBottom: this.props.small ? "3px" : "6px"}}
                  onMouseDown={(ev) => {
                      // if(dragging) return
+                     if(this.props.disabled) return
                      this.dragStartOffset = ev.clientX
                      this.dragStartValue = this.props.value
                      ev.stopPropagation()
@@ -69,7 +70,7 @@ export class DraggableIcon extends React.Component<{ icon: IconName | MaybeEleme
                      // setDragging(true)
                  }}
             >
-                <Icon icon={this.props.icon} size={this.props.size}/>
+                <Icon icon={this.props.icon} size={this.props.size} aria-disabled={this.props.disabled} />
             </div>
         )
     }