diff --git a/src/mol-app/component/parameter/multi-select.tsx b/src/mol-app/component/parameter/multi-select.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d23e31feebdb027d975acf840782108e75ea88eb
--- /dev/null
+++ b/src/mol-app/component/parameter/multi-select.tsx
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import * as React from 'react'
+import { MultiSelectParam } from 'mol-view/parameter';
+
+export interface MultiSelectParamComponentProps<T extends string> {
+ param: MultiSelectParam<T>
+ value: T[]
+ onChange(v: T[]): void
+}
+
+export interface MultiSelectParamComponentState<T extends string> {
+ value: T[]
+}
+
+export class MultiSelectParamComponent<T extends string> extends React.Component<MultiSelectParamComponentProps<T>, MultiSelectParamComponentState<T>> {
+ state = {
+ value: this.props.value
+ }
+
+ onChange(value: T[]) {
+ this.setState({ value })
+ this.props.onChange(value)
+ }
+
+ render() {
+ return <div>
+ <span>{this.props.param.label} </span>
+ <select multiple value={this.state.value} onChange={e => {
+ const value = Array.from(e.target.options).filter(option => option.selected).map(option => option.value)
+ this.onChange(value as T[])
+ }}>
+ {this.props.param.options.map(v => {
+ const [value, label] = v
+ return <option key={label} value={value}>{label}</option>
+ })}
+ </select>
+ </div>;
+ }
+}
\ No newline at end of file
diff --git a/src/mol-app/component/parameters.tsx b/src/mol-app/component/parameters.tsx
index d5446e33cba28cd5a68bdd38a3e5fd8ed52425d3..084fb13df72dcfe9b3e306af17a795225850d105 100644
--- a/src/mol-app/component/parameters.tsx
+++ b/src/mol-app/component/parameters.tsx
@@ -10,6 +10,7 @@ import { BooleanParamComponent } from './parameter/boolean';
import { NumberParamComponent } from './parameter/number';
import { RangeParamComponent } from './parameter/range';
import { SelectParamComponent } from './parameter/select';
+import { MultiSelectParamComponent } from './parameter/multi-select';
interface ParametersProps<P extends Params> {
params: P
@@ -29,6 +30,8 @@ function getParamComponent<P extends Param>(p: Param, value: P['defaultValue'],
return <RangeParamComponent param={p} value={value} onChange={onChange} />
case 'select':
return <SelectParamComponent param={p} value={value} onChange={onChange} />
+ case 'multi-select':
+ return <MultiSelectParamComponent param={p} value={value} onChange={onChange} />
}
return ''
}
diff --git a/src/mol-geo/representation/structure/complex-visual.ts b/src/mol-geo/representation/structure/complex-visual.ts
index a20063eda17134cbfec34d22f79b4305ce0891f9..72e36694c3d5daeb207207562f92796ba6baaaaf 100644
--- a/src/mol-geo/representation/structure/complex-visual.ts
+++ b/src/mol-geo/representation/structure/complex-visual.ts
@@ -63,7 +63,7 @@ export function ComplexMeshVisual<P extends ComplexMeshProps>(builder: ComplexMe
}
async function update(ctx: RuntimeContext, props: Partial<P>) {
- const newProps = Object.assign({}, currentProps, props)
+ const newProps = Object.assign({}, currentProps, props, { structure: currentStructure })
if (!renderObject) return false
diff --git a/src/mol-geo/representation/structure/representation/ball-and-stick.ts b/src/mol-geo/representation/structure/representation/ball-and-stick.ts
index e10c4a0ef73959d91ecad7644547a995648b9b69..b4cddb856e24903fa6820df0849c7f8ae33f39ff 100644
--- a/src/mol-geo/representation/structure/representation/ball-and-stick.ts
+++ b/src/mol-geo/representation/structure/representation/ball-and-stick.ts
@@ -22,7 +22,7 @@ export const BallAndStickParams = {
...ElementSphereParams,
...IntraUnitLinkParams,
sizeTheme: SelectParam<SizeThemeName>('Size Theme', '', 'uniform', SizeThemeOptions),
- sizeValue: NumberParam('Size Value', '', 1, 0, 0.1, 20),
+ sizeValue: NumberParam('Size Value', '', 0.2, 0, 10, 0.1),
sizeFactor: NumberParam('Size Factor', '', 1, 0, 10, 0.1),
unitKinds: MultiSelectParam<UnitKind>('Unit Kind', '', ['atomic'], UnitKindOptions),
}
diff --git a/src/mol-geo/representation/structure/representation/cartoon.ts b/src/mol-geo/representation/structure/representation/cartoon.ts
index 0691430a676146066839082891c4b0334d8b8675..e9934ed66376b1776b81cbdd43b30d88c6394797 100644
--- a/src/mol-geo/representation/structure/representation/cartoon.ts
+++ b/src/mol-geo/representation/structure/representation/cartoon.ts
@@ -24,7 +24,7 @@ export const CartoonParams = {
...NucleotideBlockParams,
// ...PolymerDirectionParams,
sizeTheme: SelectParam<SizeThemeName>('Size Theme', '', 'uniform', SizeThemeOptions),
- sizeValue: NumberParam('Size Value', '', 0.6, 0, 0.1, 20),
+ sizeValue: NumberParam('Size Value', '', 0.6, 0, 10, 0.1),
}
export const DefaultCartoonProps = paramDefaultValues(CartoonParams)
export type CartoonProps = typeof DefaultCartoonProps
diff --git a/src/mol-geo/representation/structure/units-visual.ts b/src/mol-geo/representation/structure/units-visual.ts
index fe2abda3d8cdf74a5a7ca02163ffc0d9b968b6a2..fa2307e111b3ae8ae386b51dee75b8122d6c4821 100644
--- a/src/mol-geo/representation/structure/units-visual.ts
+++ b/src/mol-geo/representation/structure/units-visual.ts
@@ -21,8 +21,8 @@ import { deepEqual, ValueCell, UUID } from 'mol-util';
import { Interval } from 'mol-data/int';
import { Points } from '../../geometry/points/points';
import { updateRenderableState } from '../../geometry/geometry';
-import { createColors } from '../../geometry/color-data';
-import { createSizes } from '../../geometry/size-data';
+import { createColors, ColorProps } from '../../geometry/color-data';
+import { createSizes, SizeProps } from '../../geometry/size-data';
import { Lines } from '../../geometry/lines/lines';
import { MultiSelectParam, paramDefaultValues } from 'mol-view/parameter';
@@ -55,6 +55,21 @@ function includesUnitKind(unitKinds: UnitKind[], unit: Unit) {
return false
}
+function sizeChanged(oldProps: SizeProps, newProps: SizeProps) {
+ return (
+ oldProps.sizeTheme !== newProps.sizeTheme ||
+ oldProps.sizeValue !== newProps.sizeValue ||
+ oldProps.sizeFactor !== newProps.sizeFactor
+ )
+}
+
+function colorChanged(oldProps: ColorProps, newProps: ColorProps) {
+ return (
+ oldProps.colorTheme !== newProps.colorTheme ||
+ oldProps.colorValue !== newProps.colorValue
+ )
+}
+
// mesh
export const UnitsMeshParams = {
@@ -103,7 +118,7 @@ export function UnitsMeshVisual<P extends UnitsMeshProps>(builder: UnitsMeshVisu
async function update(ctx: RuntimeContext, props: Partial<P> = {}) {
if (!renderObject) return
- const newProps = Object.assign({}, currentProps, props)
+ const newProps = Object.assign({}, currentProps, props, { structure: currentStructure })
const unit = currentGroup.units[0]
locationIt.reset()
@@ -118,8 +133,8 @@ export function UnitsMeshVisual<P extends UnitsMeshProps>(builder: UnitsMeshVisu
if (currentGroup.units.length !== locationIt.instanceCount) updateState.updateTransform = true
- if (newProps.sizeTheme !== currentProps.sizeTheme) updateState.createGeometry = true
- if (newProps.colorTheme !== currentProps.colorTheme) updateState.updateColor = true
+ if (sizeChanged(currentProps, newProps)) updateState.createGeometry = true
+ if (colorChanged(currentProps, newProps)) updateState.updateColor = true
if (!deepEqual(newProps.unitKinds, currentProps.unitKinds)) updateState.createGeometry = true
//
@@ -253,7 +268,7 @@ export function UnitsPointsVisual<P extends UnitsPointsProps>(builder: UnitsPoin
async function update(ctx: RuntimeContext, props: Partial<P> = {}) {
if (!renderObject) return
- const newProps = Object.assign({}, currentProps, props)
+ const newProps = Object.assign({}, currentProps, props, { structure: currentStructure })
const unit = currentGroup.units[0]
locationIt.reset()
@@ -268,8 +283,8 @@ export function UnitsPointsVisual<P extends UnitsPointsProps>(builder: UnitsPoin
if (currentGroup.units.length !== locationIt.instanceCount) updateState.updateTransform = true
- if (newProps.sizeTheme !== currentProps.sizeTheme) updateState.updateSize = true
- if (newProps.colorTheme !== currentProps.colorTheme) updateState.updateColor = true
+ if (sizeChanged(currentProps, newProps)) updateState.updateSize = true
+ if (colorChanged(currentProps, newProps)) updateState.updateColor = true
if (!deepEqual(newProps.unitKinds, currentProps.unitKinds)) updateState.createGeometry = true
//
@@ -407,7 +422,7 @@ export function UnitsLinesVisual<P extends UnitsLinesProps>(builder: UnitsLinesV
async function update(ctx: RuntimeContext, props: Partial<P> = {}) {
if (!renderObject) return
- const newProps = Object.assign({}, currentProps, props)
+ const newProps = Object.assign({}, currentProps, props, { structure: currentStructure })
const unit = currentGroup.units[0]
locationIt.reset()
@@ -422,8 +437,8 @@ export function UnitsLinesVisual<P extends UnitsLinesProps>(builder: UnitsLinesV
if (currentGroup.units.length !== locationIt.instanceCount) updateState.updateTransform = true
- if (newProps.sizeTheme !== currentProps.sizeTheme) updateState.updateSize = true
- if (newProps.colorTheme !== currentProps.colorTheme) updateState.updateColor = true
+ if (sizeChanged(currentProps, newProps)) updateState.updateSize = true
+ if (colorChanged(currentProps, newProps)) updateState.updateColor = true
if (!deepEqual(newProps.unitKinds, currentProps.unitKinds)) updateState.createGeometry = true
//
diff --git a/src/mol-geo/representation/structure/visual/carbohydrate-symbol-mesh.ts b/src/mol-geo/representation/structure/visual/carbohydrate-symbol-mesh.ts
index 70c535d04b46834f49dfe7c70cc198efe36c855c..7d9dc5e03b54191575ccd2970db9ca7f62d9bcb6 100644
--- a/src/mol-geo/representation/structure/visual/carbohydrate-symbol-mesh.ts
+++ b/src/mol-geo/representation/structure/visual/carbohydrate-symbol-mesh.ts
@@ -148,7 +148,7 @@ async function createCarbohydrateSymbolMesh(ctx: RuntimeContext, structure: Stru
export const CarbohydrateSymbolParams = {
...ComplexMeshParams,
sizeTheme: SelectParam<SizeThemeName>('Size Theme', '', 'uniform', SizeThemeOptions),
- sizeValue: NumberParam('Size Value', '', 1, 0, 20, 0.1),
+ sizeValue: NumberParam('Size Value', '', 1, 0, 10, 0.1),
detail: NumberParam('Sphere Detail', '', 0, 0, 3, 1),
}
export const DefaultCarbohydrateSymbolProps = paramDefaultValues(CarbohydrateSymbolParams)
diff --git a/src/mol-geo/representation/structure/visual/element-point.ts b/src/mol-geo/representation/structure/visual/element-point.ts
index 4ca4230e06c44be82f8e4905cdf41e92724574df..76b471b83d66e71d997001b8b1d8d9348d625d51 100644
--- a/src/mol-geo/representation/structure/visual/element-point.ts
+++ b/src/mol-geo/representation/structure/visual/element-point.ts
@@ -18,8 +18,8 @@ import { SelectParam, NumberParam, BooleanParam, paramDefaultValues } from 'mol-
export const ElementPointParams = {
...UnitsPointsParams,
sizeTheme: SelectParam<SizeThemeName>('Size Theme', '', 'uniform', SizeThemeOptions),
- sizeValue: NumberParam('Size Value', '', 1, 0, 20, 0.1),
- pointSizeAttenuation: BooleanParam('Point Size Attenuation', '', true),
+ sizeValue: NumberParam('Size Value', '', 3, 0, 20, 0.1),
+ pointSizeAttenuation: BooleanParam('Point Size Attenuation', '', false),
}
export const DefaultElementPointProps = paramDefaultValues(ElementPointParams)
export type ElementPointProps = typeof DefaultElementPointProps
diff --git a/src/mol-geo/representation/structure/visual/element-sphere.ts b/src/mol-geo/representation/structure/visual/element-sphere.ts
index 979d073da90540b962d4d3a6beb26d3d5b5e2c11..e822105264c6ac5d9fa43fa68f6b20c307813750 100644
--- a/src/mol-geo/representation/structure/visual/element-sphere.ts
+++ b/src/mol-geo/representation/structure/visual/element-sphere.ts
@@ -14,7 +14,8 @@ import { SizeThemeName, SizeThemeOptions } from 'mol-view/theme/size';
export const ElementSphereParams = {
...UnitsMeshParams,
sizeTheme: SelectParam<SizeThemeName>('Size Theme', '', 'physical', SizeThemeOptions),
- sizeValue: NumberParam('Size Value', '', 1, 0, 20, 0.1),
+ sizeValue: NumberParam('Size Value', '', 0.2, 0, 10, 0.1),
+ sizeFactor: NumberParam('Size Factor', '', 1, 0, 10, 0.1),
detail: NumberParam('Sphere Detail', '', 0, 0, 3, 1),
}
export const DefaultElementSphereProps = paramDefaultValues(ElementSphereParams)
diff --git a/src/mol-geo/representation/structure/visual/inter-unit-link-cylinder.ts b/src/mol-geo/representation/structure/visual/inter-unit-link-cylinder.ts
index c6b9af62db5a28cd6de097a068257704f7067951..d12124bfa48eadc937354b0100aa129d893b7472 100644
--- a/src/mol-geo/representation/structure/visual/inter-unit-link-cylinder.ts
+++ b/src/mol-geo/representation/structure/visual/inter-unit-link-cylinder.ts
@@ -53,8 +53,8 @@ export const InterUnitLinkParams = {
...ComplexMeshParams,
...LinkCylinderParams,
sizeTheme: SelectParam<SizeThemeName>('Size Theme', '', 'physical', SizeThemeOptions),
- sizeValue: NumberParam('Size Value', '', 1, 0, 20, 0.1),
- sizeFactor: NumberParam('Size Factor', '', 0.3, 0, 10, 0.1),
+ sizeValue: NumberParam('Size Value', '', 0.2, 0, 10, 0.1),
+ sizeFactor: NumberParam('Size Factor', '', 1, 0, 10, 0.1),
}
export const DefaultInterUnitLinkProps = paramDefaultValues(InterUnitLinkParams)
export type InterUnitLinkProps = typeof DefaultInterUnitLinkProps
diff --git a/src/mol-geo/representation/structure/visual/intra-unit-link-cylinder.ts b/src/mol-geo/representation/structure/visual/intra-unit-link-cylinder.ts
index 26f4f849d4b8ea86e47f10af4efd1219722a8835..417c33d57fcbd8abca783d3118ef24e99d18c75e 100644
--- a/src/mol-geo/representation/structure/visual/intra-unit-link-cylinder.ts
+++ b/src/mol-geo/representation/structure/visual/intra-unit-link-cylinder.ts
@@ -67,8 +67,8 @@ export const IntraUnitLinkParams = {
...UnitsMeshParams,
...LinkCylinderParams,
sizeTheme: SelectParam<SizeThemeName>('Size Theme', '', 'physical', SizeThemeOptions),
- sizeValue: NumberParam('Size Value', '', 1, 0, 20, 0.1),
- sizeFactor: NumberParam('Size Factor', '', 0.3, 0, 10, 0.1),
+ sizeValue: NumberParam('Size Value', '', 0.2, 0, 10, 0.1),
+ sizeFactor: NumberParam('Size Factor', '', 1, 0, 10, 0.1),
}
export const DefaultIntraUnitLinkProps = paramDefaultValues(IntraUnitLinkParams)
export type IntraUnitLinkProps = typeof DefaultIntraUnitLinkProps
diff --git a/src/mol-geo/representation/structure/visual/polymer-backbone-cylinder.ts b/src/mol-geo/representation/structure/visual/polymer-backbone-cylinder.ts
index ebb2e97951b69d59c9d02a6ada806dbad5821bb8..e5cbd038cdaf789fd3d1bb0291ab1ee9b92ad5c3 100644
--- a/src/mol-geo/representation/structure/visual/polymer-backbone-cylinder.ts
+++ b/src/mol-geo/representation/structure/visual/polymer-backbone-cylinder.ts
@@ -21,7 +21,7 @@ import { paramDefaultValues, NumberParam, SelectParam } from 'mol-view/parameter
export const PolymerBackboneCylinderParams = {
sizeTheme: SelectParam<SizeThemeName>('Size Theme', '', 'uniform', SizeThemeOptions),
- sizeValue: NumberParam('Size Value', '', 1, 0, 20, 0.1),
+ sizeValue: NumberParam('Size Value', '', 1, 0, 10, 0.1),
radialSegments: NumberParam('Radial Segments', '', 16, 3, 56, 1),
}
export const DefaultPolymerBackboneCylinderProps = paramDefaultValues(PolymerBackboneCylinderParams)
diff --git a/src/mol-geo/representation/structure/visual/polymer-gap-cylinder.ts b/src/mol-geo/representation/structure/visual/polymer-gap-cylinder.ts
index b70b281719db2d7fb033e6b01ae0a288ea97059e..aebd1c37da3ceb6dbe1bdc98c68bbd4bdc8ff6f6 100644
--- a/src/mol-geo/representation/structure/visual/polymer-gap-cylinder.ts
+++ b/src/mol-geo/representation/structure/visual/polymer-gap-cylinder.ts
@@ -23,7 +23,7 @@ const segmentCount = 10
export const PolymerGapCylinderParams = {
sizeTheme: SelectParam<SizeThemeName>('Size Theme', '', 'physical', SizeThemeOptions),
- sizeValue: NumberParam('Size Value', '', 1, 0, 20, 0.1),
+ sizeValue: NumberParam('Size Value', '', 1, 0, 10, 0.1),
sizeFactor: NumberParam('Size Factor', '', 0.3, 0, 10, 0.1),
radialSegments: NumberParam('Radial Segments', '', 16, 3, 56, 1),
}