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

mol-plugin: ColorScaleControl tweaks

parent 2806c71b
No related branches found
No related tags found
No related merge requests found
......@@ -5,18 +5,16 @@
* @author Alexander Rose <alexander.rose@weirdbyte.de>
*/
import * as React from 'react'
import { Vec2 } 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';
import { memoize1 } from 'mol-util/memoize';
import { ParamDefinition as PD } from 'mol-util/param-definition';
import { camelCaseToWords } from 'mol-util/string';
import { ColorNames, ColorNamesValueMap } from 'mol-util/color/tables';
import { Color } from 'mol-util/color';
import { Vec2 } from 'mol-math/linear-algebra';
import * as React from 'react';
import LineGraphComponent from './line-graph/line-graph-component';
import { Slider, Slider2 } from './slider';
import { getColorListFromName } from 'mol-util/color/scale';
export interface ParameterControlsProps<P extends PD.Params = PD.Params> {
params: P,
......@@ -243,7 +241,6 @@ function ColorValueOption(color: Color) {
</option> : null
}
export class ColorControl extends SimpleParam<PD.Color> {
onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
this.update(Color(parseInt(e.target.value)));
......@@ -257,15 +254,32 @@ export class ColorControl extends SimpleParam<PD.Color> {
}
}
const colorScaleGradient = memoize1((n: ColorListName) => `linear-gradient(to right, ${getColorListFromName(n).map(c => Color.toStyle(c)).join(', ')})`);
export class ColorScaleControl extends SimpleParam<PD.ColorScale<any>> {
onChange = (e: React.ChangeEvent<HTMLSelectElement>) => { this.update(e.target.value); }
stripStyle(): React.CSSProperties {
return {
background: colorScaleGradient(this.props.value),
position: 'absolute',
bottom: '0',
height: '4px',
right: '0',
left: '0'
};
}
renderControl() {
return <select value={this.props.value || ''} onChange={this.onChange} disabled={this.props.isDisabled}>
return <div style={{ position: 'relative' }}>
<select value={this.props.value || ''} onChange={this.onChange} disabled={this.props.isDisabled}>
{this.props.param.options.map(([value, label]) =>
<option key={value} value={value} style={{background: `linear-gradient(to right, ${getColorListFromName(value).map(c => Color.toStyle(c)).join(', ')})`}}>
<option key={value} value={value}>
{label}
</option>)}
</select>;
</select>
<div style={this.stripStyle()} />
</div>;
}
}
......
......@@ -8,7 +8,7 @@ import { PluginCommands } from 'mol-plugin/command';
import { PluginContext } from 'mol-plugin/context';
import { State, Transform } from 'mol-state';
import { StateAction } from 'mol-state/action';
import { memoizeOne } from 'mol-util/memoize';
import { memoizeLatest } from 'mol-util/memoize';
import { StateTransformParameters, TransformContolBase } from './common';
import { ParamDefinition as PD } from 'mol-util/param-definition';
......@@ -47,7 +47,7 @@ class ApplyActionContol extends TransformContolBase<ApplyActionContol.Props, App
applyText() { return 'Apply'; }
isUpdate() { return false; }
private _getInfo = memoizeOne((t: Transform.Ref, v: string) => StateTransformParameters.infoFromAction(this.plugin, this.props.state, this.props.action, this.props.nodeRef));
private _getInfo = memoizeLatest((t: Transform.Ref, v: string) => StateTransformParameters.infoFromAction(this.plugin, this.props.state, this.props.action, this.props.nodeRef));
state = { ref: this.props.nodeRef, version: this.props.state.transforms.get(this.props.nodeRef).version, error: void 0, isInitial: true, params: this.getInfo().initialValues, busy: false };
......
......@@ -5,7 +5,7 @@
*/
import { State, Transform } from 'mol-state';
import { memoizeOne } from 'mol-util/memoize';
import { memoizeLatest } from 'mol-util/memoize';
import { StateTransformParameters, TransformContolBase } from './common';
export { UpdateTransformContol };
......@@ -45,7 +45,7 @@ class UpdateTransformContol extends TransformContolBase<UpdateTransformContol.Pr
return autoUpdate({ a: cell.obj!, b: parentCell.obj!, oldParams: this.getInfo().initialValues, newParams }, this.plugin);
}
private _getInfo = memoizeOne((t: Transform) => StateTransformParameters.infoFromTransform(this.plugin, this.props.state, this.props.transform));
private _getInfo = memoizeLatest((t: Transform) => StateTransformParameters.infoFromTransform(this.plugin, this.props.state, this.props.transform));
state: UpdateTransformContol.ComponentState = { transform: this.props.transform, error: void 0, isInitial: true, params: this.getInfo().initialValues, busy: false };
......
......@@ -4,7 +4,7 @@
* @author David Sehnal <david.sehnal@gmail.com>
*/
export function memoizeOne<Args extends any[], T>(f: (...args: Args) => T): (...args: Args) => T {
export function memoizeLatest<Args extends any[], T>(f: (...args: Args) => T): (...args: Args) => T {
let lastArgs: any[] | undefined = void 0, value: any = void 0;
return (...args) => {
if (!lastArgs || lastArgs.length !== args.length) {
......@@ -22,3 +22,13 @@ export function memoizeOne<Args extends any[], T>(f: (...args: Args) => T): (...
return value;
}
}
export function memoize1<A, T>(f: (a: A) => T): (a: A) => T {
const cache = new Map<A, T>();
return a => {
if (cache.has(a)) return cache.get(a)!;
const v = f(a);
cache.set(a, v);
return v;
}
}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment