wip, converted param

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

@@ -47,6 +47,7 @@ function controlFor(param: PD.Any): ValueControl {
         case 'select': return SelectControl;
         case 'text': return TextControl;
         case 'interval': return IntervalControl;
+        case 'converted': return ConvertedControl;
         case 'group': throw Error('Must be handled separately');
         case 'mapped': throw Error('Must be handled separately');
     }
@@ -143,7 +144,6 @@ export class SelectControl extends React.PureComponent<ValueControlProps<PD.Sele
     }
 }
 
-
 export class MultiSelectControl extends React.PureComponent<ValueControlProps<PD.MultiSelect<any>>> {
     onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
         const value = Array.from(e.target.options).filter(option => option.selected).map(option => option.value);
@@ -152,7 +152,6 @@ export class MultiSelectControl extends React.PureComponent<ValueControlProps<PD
     }
 
     render() {
-        // return <span>multiselect TODO</span>;
         return <select multiple value={this.props.value || ''} onChange={this.onChange}>
             {this.props.param.options.map(([value, label]) => <option key={label} value={value}>{label}</option>)}
         </select>;
@@ -181,6 +180,19 @@ export class ColorControl extends React.PureComponent<ValueControlProps<PD.Color
     }
 }
 
+export class ConvertedControl extends React.PureComponent<ValueControlProps<PD.Converted<any, any>>> {
+    onChange = (v: any) => {
+        console.log('onChange', v)
+        this.props.onChange(this.props.param.toValue(v));
+    }
+
+    render() {
+        const Control: ValueControl = controlFor(this.props.param.param as PD.Any);
+
+        return <Control value={this.props.param.fromValue(this.props.value)} param={this.props.param} onChange={this.onChange} onEnter={this.props.onEnter} isEnabled={this.props.isEnabled} />
+    }
+}
+
 type GroupWrapperProps = { name: string, value: PD.Group<any>['defaultValue'], param: PD.Group<any>, onChange: ParamOnChange, onEnter?: () => void, isEnabled?: boolean }
 export class GroupControl extends React.PureComponent<GroupWrapperProps> {
     change(value: PD.Mapped<any>['defaultValue'] ) {

src/mol-util/param-definition.ts

@@ -117,12 +117,17 @@ export namespace ParamDefinition {
         };
     }
 
-    export interface Converted<T, C> extends Base<T> {
+    export interface Converted<T, C> extends Base<C> {
         type: 'converted',
-        convertedControl: Base<C>,
+        param: Base<C>,
+        /** converts from prop value to display value */
         fromValue(v: T): C,
+        /** converts from display value to prop value */
         toValue(v: C): T
     }
+    export function Converted<T, C>(param: Base<C>, fromValue: Converted<T, C>['fromValue'], toValue: Converted<T, C>['toValue']): Converted<T, C> {
+        return { type: 'converted', param, defaultValue: param.defaultValue, fromValue, toValue, label: param.label, description: param.description };
+    }
 
     export type Any = Value<any> | Select<any> | MultiSelect<any> | Boolean | Text | Color | Numeric | Interval | LineGraph | Group<any> | Mapped<any> | Converted<any, any>