Skip to content
Snippets Groups Projects
Commit 0cd0e306 authored by David Sehnal's avatar David Sehnal
Browse files

updated Group and Mapped parameter definitions

parent aaa342a3
No related branches found
No related tags found
No related merge requests found
......@@ -36,7 +36,7 @@ const CreateStructureRepresentation = PluginStateTransform.Create<SO.Molecule.St
type: PD.Mapped('Type', '',
ctx.structureReprensentation.registry.default.name,
ctx.structureReprensentation.registry.types,
name => ctx.structureReprensentation.registry.get(name)!.getParams(ctx.structureReprensentation.themeCtx, a.data))
name => PD.Group('Params', '', ctx.structureReprensentation.registry.get(name)!.getParams(ctx.structureReprensentation.themeCtx, a.data)))
})
},
apply({ a, params }, plugin: PluginContext) {
......
......@@ -29,6 +29,7 @@ export class ParameterControls<P extends PD.Params> extends React.PureComponent<
{Object.keys(params).map(key => {
const param = params[key];
if (param.type === 'mapped') return <MappedControl param={param} key={key} {...common} name={key} value={values[key]} />
if (param.type === 'group') return <GroupControl param={param} key={key} {...common} name={key} value={values[key]} />
return <ParamWrapper control={controlFor(param)} param={param} key={key} {...common} name={key} value={values[key]} />
})}
</div>;
......@@ -45,14 +46,12 @@ function controlFor(param: PD.Any): ValueControl {
case 'select': return SelectControl;
case 'text': return TextControl;
case 'interval': return IntervalControl;
case 'group': return GroupControl;
case 'group': throw Error('Must be handled separately');
case 'mapped': throw Error('Must be handled separately');
}
throw new Error('not supported');
}
type MappedWrapperProps = { name: string, value: PD.Mapped<any>['defaultValue'], param: PD.Mapped<any>, onChange: ParamOnChange, onEnter?: () => void, isEnabled?: boolean }
type ParamWrapperProps = { name: string, value: any, param: PD.Base<any>, onChange: ParamOnChange, control: ValueControl, onEnter?: () => void, isEnabled?: boolean }
export type ParamOnChange = (params: { param: PD.Base<any>, name: string, value: any }) => void
type ValueControlProps<P extends PD.Base<any> = PD.Base<any>> = { value: any, param: P, isEnabled?: boolean, onChange: (v: any) => void, onEnter?: () => void }
......@@ -176,41 +175,55 @@ export class ColorControl extends React.PureComponent<ValueControlProps<PD.Color
}
}
export class GroupControl extends React.PureComponent<ValueControlProps<PD.Group<any>>> {
// onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
// this.setState({ value: e.target.value });
// this.props.onChange(e.target.value);
// }
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'] ) {
this.props.onChange({ name: this.props.name, param: this.props.param, value });
}
onChangeParam: ParamOnChange = e => {
const value: PD.Mapped<any>['defaultValue'] = this.props.value;
this.change({ ...value.params, [e.name]: e.value });
}
render() {
return <span>group TODO</span>;
const value: PD.Mapped<any>['defaultValue'] = this.props.value;
const params = this.props.param.params;
return <div>
<ParameterControls params={params} onChange={this.onChangeParam} values={value.params} onEnter={this.props.onEnter} isEnabled={this.props.isEnabled} />
</div>
}
}
type MappedWrapperProps = { name: string, value: PD.Mapped<any>['defaultValue'], param: PD.Mapped<any>, onChange: ParamOnChange, onEnter?: () => void, isEnabled?: boolean }
export class MappedControl extends React.PureComponent<MappedWrapperProps> {
change(value: PD.Mapped<any>['defaultValue'] ) {
this.props.onChange({ name: this.props.name, param: this.props.param, value });
}
onChangeName: ParamOnChange = e => {
this.change({ name: e.value, params: PD.getDefaultValues(this.props.param.map(e.value)) });
this.change({ name: e.value, params: this.props.param.map(e.value).defaultValue });
}
onChangeParam: ParamOnChange = e => {
const value: PD.Mapped<any>['defaultValue'] = this.props.value;
this.change({ name: value.name, params: { ...value.params, [e.name]: e.value } });
this.change({ name: value.name, params: e.value });
}
render() {
const value: PD.Mapped<any>['defaultValue'] = this.props.value;
const params = this.props.param.map(value.name);
const param = this.props.param.map(value.name);
return <div>
<ParamWrapper control={SelectControl} param={this.props.param.select}
isEnabled={this.props.isEnabled} onChange={this.onChangeName} onEnter={this.props.onEnter}
name={'name'} value={value.name} />
<div style={{ borderLeft: '5px solid #777', paddingLeft: '5px' }}>
<ParameterControls params={params} onChange={this.onChangeParam} values={value.params} onEnter={this.props.onEnter} isEnabled={this.props.isEnabled} />
{param.type === 'group'
? <GroupControl param={param} value={value} name='param' onChange={this.onChangeParam} onEnter={this.props.onEnter} isEnabled={this.props.isEnabled} />
: param.type === 'mapped' ? 'nested mapped params are not supported'
: <ParamWrapper control={controlFor(param)} param={param} onChange={this.onChangeParam} onEnter={this.props.onEnter} isEnabled={this.props.isEnabled} name={'value'} value={value} />}
</div>
</div>
}
......
......@@ -90,25 +90,25 @@ export namespace ParamDefinition {
return { type: 'interval', label, description, defaultValue }
}
export interface Group<T extends { [key: string]: any }> extends Base<T> {
export interface Group<T> extends Base<T> {
type: 'group',
params: T
params: Params
}
export function Group<T extends { [key: string]: any }>(label: string, description: string, params: T): Group<T> {
return { type: 'group', label, description, defaultValue: getDefaultValues(params), params };
export function Group<P extends Params>(label: string, description: string, params: P): Group<Values<P>> {
return { type: 'group', label, description, defaultValue: getDefaultValues(params) as any, params };
}
export interface Mapped<T> extends Base<{ name: string, params: T }> {
type: 'mapped',
select: Select<string>,
map(name: string): Params
map(name: string): Any
}
export function Mapped<T>(label: string, description: string, defaultKey: string, names: [string, string][], map: Mapped<T>['map']): Mapped<T> {
return {
type: 'mapped',
label,
description,
defaultValue: { name: defaultKey, params: getDefaultValues(map(defaultKey)) as any },
defaultValue: { name: defaultKey, params: map(defaultKey).defaultValue as any },
select: Select<string>(label, description, defaultKey, names),
map
};
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment