added Canvas3DParams

src/mol-canvas3d/canvas3d.ts

@@ -26,15 +26,16 @@ import { MarkerAction } from 'mol-geo/geometry/marker-data';
 import { Loci, EmptyLoci, isEmptyLoci } from 'mol-model/loci';
 import { Color } from 'mol-util/color';
 import { Camera } from './camera';
+import { ParamDefinition as PD } from 'mol-util/param-definition';
 
-export const DefaultCanvas3DProps = {
+export const Canvas3DParams = {
     // TODO: FPS cap?
-    // maxFps: 30,
-    cameraPosition: Vec3.create(0, 0, 50),
-    cameraMode: 'perspective' as Camera.Mode,
-    backgroundColor: Color(0x000000),
+    // maxFps: PD.Numeric(30),
+    cameraPosition: PD.Vec3(Vec3.create(0, 0, 50)), // TODO or should it be in a seperate 'state' property?
+    cameraMode: PD.Select('perspective', [['perspective', 'Perspective'], ['orthographic', 'Orthographic']]),
+    backgroundColor: PD.Color(Color(0x000000)),
 }
-export type Canvas3DProps = typeof DefaultCanvas3DProps
+export type Canvas3DParams = typeof Canvas3DParams
 
 export { Canvas3D }
 
@@ -64,18 +65,18 @@ interface Canvas3D {
     readonly camera: Camera
     downloadScreenshot: () => void
     getImageData: (variant: RenderVariant) => ImageData
-    setProps: (props: Partial<Canvas3DProps>) => void
+    setProps: (props: Partial<PD.Values<Canvas3DParams>>) => void
 
     /** Returns a copy of the current Canvas3D instance props */
-    readonly props: Canvas3DProps
+    readonly props: PD.Values<Canvas3DParams>
     readonly input: InputObserver
     readonly stats: RendererStats
     dispose: () => void
 }
 
 namespace Canvas3D {
-    export function create(canvas: HTMLCanvasElement, container: Element, props: Partial<Canvas3DProps> = {}): Canvas3D {
-        const p = { ...props, ...DefaultCanvas3DProps }
+    export function create(canvas: HTMLCanvasElement, container: Element, props: Partial<PD.Values<Canvas3DParams>> = {}): Canvas3D {
+        const p = { ...PD.getDefaultValues(Canvas3DParams), ...props }
 
         const reprRenderObjects = new Map<Representation.Any, Set<RenderObject>>()
         const reprUpdatedSubscriptions = new Map<Representation.Any, Subscription>()
@@ -353,7 +354,7 @@ namespace Canvas3D {
                 }
             },
             didDraw,
-            setProps: (props: Partial<Canvas3DProps>) => {
+            setProps: (props: Partial<PD.Values<Canvas3DParams>>) => {
                 if (props.cameraMode !== undefined && props.cameraMode !== camera.state.mode) {
                     camera.setState({ mode: props.cameraMode })
                 }

src/mol-gl/_spec/renderer.spec.ts

@@ -69,7 +69,6 @@ function createPoints() {
         ...size,
 
         uAlpha: ValueCell.create(1.0),
-        uPickingAlphaThreshold: ValueCell.create(0.3),
         uHighlightColor: ValueCell.create(Vec3.create(1.0, 0.4, 0.6)),
         uSelectColor: ValueCell.create(Vec3.create(0.2, 1.0, 0.1)),
         uInstanceCount: ValueCell.create(1),

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

@@ -44,6 +44,7 @@ function controlFor(param: PD.Any): ParamControl | undefined {
         case 'converted': return ConvertedControl;
         case 'multi-select': return MultiSelectControl;
         case 'color': return ColorControl;
+        case 'vec3': return Vec3Control;
         case 'select': return SelectControl;
         case 'text': return TextControl;
         case 'interval': return IntervalControl;
@@ -166,6 +167,17 @@ export class ColorControl extends SimpleParam<PD.Color> {
     }
 }
 
+export class Vec3Control extends SimpleParam<PD.Vec3> {
+    // onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    //     this.setState({ value: e.target.value });
+    //     this.props.onChange(e.target.value);
+    // }
+
+    renderControl() {
+        return <span>vec3 TODO</span>;
+    }
+}
+
 export class MultiSelectControl extends React.PureComponent<ParamProps<PD.MultiSelect<any>>, { isExpanded: boolean }> {
     state = { isExpanded: false }
 

src/mol-util/param-definition.ts

@@ -7,7 +7,7 @@
 
 import { Color as ColorData } from './color';
 import { shallowEqual } from 'mol-util';
-import { Vec2 } from 'mol-math/linear-algebra';
+import { Vec2 as Vec2Data, Vec3 as Vec3Data } from 'mol-math/linear-algebra';
 import { deepClone } from './object';
 
 export namespace ParamDefinition {
@@ -75,6 +75,13 @@ export namespace ParamDefinition {
         return setInfo<Color>({ type: 'color', defaultValue }, info)
     }
 
+    export interface Vec3 extends Base<Vec3Data> {
+        type: 'vec3'
+    }
+    export function Vec3(defaultValue: Vec3Data, info?: Info): Vec3 {
+        return setInfo<Vec3>({ type: 'vec3', defaultValue }, info)
+    }
+
     export interface Range {
         /** If given treat as a range. */
         min?: number
@@ -108,10 +115,10 @@ export namespace ParamDefinition {
         return setInfo<Interval>(setRange({ type: 'interval', defaultValue }, range), info)
     }
 
-    export interface LineGraph extends Base<Vec2[]> {
+    export interface LineGraph extends Base<Vec2Data[]> {
         type: 'line-graph'
     }
-    export function LineGraph(defaultValue: Vec2[], info?: Info): LineGraph {
+    export function LineGraph(defaultValue: Vec2Data[], info?: Info): LineGraph {
         return setInfo<LineGraph>({ type: 'line-graph', defaultValue }, info)
     }
 
@@ -149,7 +156,7 @@ export namespace ParamDefinition {
         return { type: 'converted', defaultValue: toValue(converted.defaultValue), converted, fromValue, toValue };
     }
 
-    export type Any = Value<any> | Select<any> | MultiSelect<any> | Boolean | Text | Color | Numeric | Interval | LineGraph | Group<any> | Mapped<any> | Converted<any, any>
+    export type Any = Value<any> | Select<any> | MultiSelect<any> | Boolean | Text | Color | Vec3 | Numeric | Interval | LineGraph | Group<any> | Mapped<any> | Converted<any, any>
 
     export type Params = { [k: string]: Any }
     export type Values<T extends Params> = { [k in keyof T]: T[k]['defaultValue'] }
@@ -210,9 +217,11 @@ export namespace ParamDefinition {
             const u = a as LineGraph['defaultValue'], v = b as LineGraph['defaultValue'];
             if (u.length !== v.length) return false;
             for (let i = 0, _i = u.length; i < _i; i++) {
-                if (!Vec2.areEqual(u[i], v[i])) return false;
+                if (!Vec2Data.areEqual(u[i], v[i])) return false;
             }
             return true;
+        } else if (p.type === 'vec3') {
+            return Vec3Data.equals(a, b);
         } else if (typeof a === 'object' && typeof b === 'object') {
             return shallowEqual(a, b);
         }