From b07f9c7040f151550d3d1f5e4d21c4b002b9f60e Mon Sep 17 00:00:00 2001
From: Alexander Rose <alexander.rose@weirdbyte.de>
Date: Sat, 29 Sep 2018 18:01:31 -0700
Subject: [PATCH] wip
---
.../component/parameter/multi-select.tsx | 44 +++++++++++++++++++
src/mol-app/component/parameters.tsx | 3 ++
.../structure/complex-visual.ts | 2 +-
.../representation/ball-and-stick.ts | 2 +-
.../structure/representation/cartoon.ts | 2 +-
.../representation/structure/units-visual.ts | 37 +++++++++++-----
.../visual/carbohydrate-symbol-mesh.ts | 2 +-
.../structure/visual/element-point.ts | 4 +-
.../structure/visual/element-sphere.ts | 3 +-
.../visual/inter-unit-link-cylinder.ts | 4 +-
.../visual/intra-unit-link-cylinder.ts | 4 +-
.../visual/polymer-backbone-cylinder.ts | 2 +-
.../structure/visual/polymer-gap-cylinder.ts | 2 +-
13 files changed, 87 insertions(+), 24 deletions(-)
create mode 100644 src/mol-app/component/parameter/multi-select.tsx
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 000000000..d23e31fee
--- /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 d5446e33c..084fb13df 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 a20063eda..72e36694c 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 e10c4a0ef..b4cddb856 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 0691430a6..e9934ed66 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 fe2abda3d..fa2307e11 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 70c535d04..7d9dc5e03 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 4ca4230e0..76b471b83 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 979d073da..e82210526 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 c6b9af62d..d12124bfa 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 26f4f849d..417c33d57 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 ebb2e9795..e5cbd038c 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 b70b28171..aebd1c37d 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),
}
--
GitLab