mol-plugin: vec3 and numeric parameter input

src/mol-plugin/ui/controls/parameters.tsx

@@ -5,7 +5,7 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { Vec2 } from 'mol-math/linear-algebra';
+import { Vec2, Vec3 } from 'mol-math/linear-algebra';
 import { Color } from 'mol-util/color';
 import { ColorListName, getColorListFromName } from 'mol-util/color/scale';
 import { ColorNames, ColorNamesValueMap } from 'mol-util/color/tables';
@@ -152,12 +152,55 @@ export class LineGraphControl extends React.PureComponent<ParamProps<PD.LineGrap
     }
 }
 
-export class NumberInputControl extends SimpleParam<PD.Numeric> {
-    onChange = (e: React.ChangeEvent<HTMLInputElement>) => { this.update(+e.target.value); }
-    renderControl() {
-        return <span>
-            number input TODO
-        </span>
+export class NumberInputControl extends React.PureComponent<ParamProps<PD.Numeric>, { value: string }> {
+    state = { value: '0' };
+
+    protected update(value: any) {
+        this.props.onChange({ param: this.props.param, name: this.props.name, value });
+    }
+
+    onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = +e.target.value;
+        this.setState({ value: e.target.value }, () => {
+            if (!Number.isNaN(value) && value !== this.props.value) {
+                this.update(value);
+            }
+        });
+    }
+
+    onKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (!this.props.onEnter) return;
+        if ((e.keyCode === 13 || e.charCode === 13)) {
+            this.props.onEnter();
+        }
+    }
+
+    onBlur = () => {
+        this.setState({ value: '' + this.props.value });
+    }
+
+    static getDerivedStateFromProps(props: { value: number }, state: { value: string }) {
+        const value = +state.value;
+        if (Number.isNaN(value) || value === props.value) return null;
+        return { value: '' + props.value };
+    }
+
+    render() {
+        const placeholder = this.props.param.label || camelCaseToWords(this.props.name);
+        const label = this.props.param.label || camelCaseToWords(this.props.name);
+        return <div className='msp-control-row'>
+            <span title={this.props.param.description}>{label}</span>
+            <div>
+                <input type='text'
+                    onBlur={this.onBlur}
+                    value={this.state.value}
+                    placeholder={placeholder}
+                    onChange={this.onChange}
+                    onKeyPress={this.props.onEnter ? this.onKeyPress : void 0}
+                    disabled={this.props.isDisabled}
+                />
+            </div>
+        </div>;
     }
 }
 
@@ -297,16 +340,48 @@ export class ColorScaleControl extends SimpleParam<PD.ColorScale<any>> {
     }
 }
 
-export class Vec3Control extends SimpleParam<PD.Vec3> {
-    // onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    //     this.setState({ value: e.target.value });
-    //     this.props.onChange(e.target.value);
-    // }
+export class Vec3Control extends React.PureComponent<ParamProps<PD.Vec3>, { isExpanded: boolean }> {
+    state = { isExpanded: false }
+
+    components = {
+        0: PD.Numeric(0, void 0, { label: 'X' }),
+        1: PD.Numeric(0, void 0, { label: 'Y' }),
+        2: PD.Numeric(0, void 0, { label: 'Z' })
+    }
 
-    renderControl() {
-        return <span>vec3 TODO</span>;
+    change(value: PD.MultiSelect<any>['defaultValue']) {
+        this.props.onChange({ name: this.props.name, param: this.props.param, value });
+    }
+
+    componentChange: ParamOnChange = ({ name, value }) => {
+        const v = Vec3.copy(Vec3.zero(), this.props.value);
+        v[+name] = value;
+        this.change(v);
+    }
+
+    toggleExpanded = (e: React.MouseEvent<HTMLButtonElement>) => {
+        this.setState({ isExpanded: !this.state.isExpanded });
+        e.currentTarget.blur();
     }
+
+    render() {
+        const v = this.props.value;
+        const label = this.props.param.label || camelCaseToWords(this.props.name);
+        const value = `[${v[0].toFixed(2)}, ${v[1].toFixed(2)}, ${v[2].toFixed(2)}]`;
+        return <>
+            <div className='msp-control-row'>
+                <span>{label}</span>
+                <div>
+                    <button onClick={this.toggleExpanded}>{value}</button>
+                </div>
+            </div>
+            <div className='msp-control-offset' style={{ display: this.state.isExpanded ? 'block' : 'none' }}>
+                <ParameterControls params={this.components} values={v} onChange={this.componentChange} onEnter={this.props.onEnter} />
+            </div>
+        </>;
     }
+}
+
 
 export class FileControl extends React.PureComponent<ParamProps<PD.FileParam>> {
     change(value: File) {
@@ -366,7 +441,8 @@ export class MultiSelectControl extends React.PureComponent<ParamProps<PD.MultiS
                         <button onClick={this.toggle(value)} disabled={this.props.isDisabled}>
                             <span style={{ float: sel ? 'left' : 'right' }}>{sel ? `✓ ${label}` : `${label} ✗`}</span>
                         </button>
-                </div> })}
+                    </div>
+                })}
             </div>
         </>;
     }