wip, register ball-and-stick

src/apps/canvas/structure-view.ts

@@ -58,10 +58,10 @@ interface StructureViewProps {
 
 export async function StructureView(app: App, canvas3d: Canvas3D, models: ReadonlyArray<Model>, props: StructureViewProps = {}): Promise<StructureView> {
     const active: { [k: string]: boolean } = {
-        cartoon: true,
+        'cartoon': true,
+        'ball-and-stick': true,
         // point: false,
         // surface: false,
-        // ballAndStick: false,
         // carbohydrate: false,
         // spacefill: false,
         // distanceRestraint: false,
@@ -197,7 +197,7 @@ export async function StructureView(app: App, canvas3d: Canvas3D, models: Readon
                     if (structureRepresentations[k]) {
                         repr = structureRepresentations[k]
                     } else {
-                        repr = app.structureRepresentationRegistry.create('cartoon', app.reprCtx, structure)
+                        repr = app.structureRepresentationRegistry.create(k, app.reprCtx, structure)
                         structureRepresentations[k] = repr
                     }
                     await app.runTask(repr.createOrUpdate(app.reprCtx, {}, {}, structure).run(

src/mol-repr/structure/registry.ts

@@ -7,6 +7,7 @@
 import { Structure } from 'mol-model/structure';
 import { RepresentationProvider, RepresentationRegistry } from '../representation';
 import { CartoonRepresentationProvider } from './representation/cartoon';
+import { BallAndStickRepresentationProvider } from './representation/ball-and-stick';
 
 export class StructureRepresentationRegistry extends RepresentationRegistry<Structure> {
     constructor() {
@@ -20,6 +21,7 @@ export class StructureRepresentationRegistry extends RepresentationRegistry<Stru
 
 export const BuiltInStructureRepresentations = {
     'cartoon': CartoonRepresentationProvider,
+    'ball-and-stick': BallAndStickRepresentationProvider,
 }
 export type BuiltInStructureRepresentationsName = keyof typeof BuiltInStructureRepresentations
 export const BuiltInStructureRepresentationsNames = Object.keys(BuiltInStructureRepresentations)

src/mol-repr/structure/representation/ball-and-stick.ts

-// /**
-//  * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
-//  *
-//  * @author Alexander Rose <alexander.rose@weirdbyte.de>
-//  */
+/**
+ * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
 
-// import { ElementSphereVisual, ElementSphereParams } from '../visual/element-sphere';
-// import { IntraUnitLinkVisual, IntraUnitLinkParams } from '../visual/intra-unit-link-cylinder';
-// import { InterUnitLinkVisual, InterUnitLinkParams } from '../visual/inter-unit-link-cylinder';
-// import { ParamDefinition as PD } from 'mol-util/param-definition';
-// import { UnitsRepresentation } from '../units-representation';
-// import { ComplexRepresentation } from '../complex-representation';
-// import { StructureRepresentation } from '../representation';
-// import { Representation } from 'mol-repr/representation';
-// import { ThemeRegistryContext } from 'mol-theme/theme';
-// import { Structure } from 'mol-model/structure';
+import { ElementSphereVisual, ElementSphereParams, ElementSphereProps } from '../visual/element-sphere';
+import { IntraUnitLinkVisual, IntraUnitLinkParams } from '../visual/intra-unit-link-cylinder';
+import { InterUnitLinkVisual, InterUnitLinkParams, InterUnitLinkProps } from '../visual/inter-unit-link-cylinder';
+import { ParamDefinition as PD } from 'mol-util/param-definition';
+import { UnitsRepresentation } from '../units-representation';
+import { ComplexRepresentation } from '../complex-representation';
+import { StructureRepresentation, StructureRepresentationProvider } from '../representation';
+import { Representation } from 'mol-repr/representation';
+import { ThemeRegistryContext } from 'mol-theme/theme';
+import { Structure } from 'mol-model/structure';
+import { IntraUnitLinkProps } from '../visual/polymer-gap-cylinder';
+import { BuiltInSizeThemeName, BuiltInSizeThemeOptions } from 'mol-theme/size';
+import { BuiltInColorThemeName, BuiltInColorThemeOptions } from 'mol-theme/color';
+import { UnitKind, UnitKindOptions } from '../visual/util/common';
 
-// export const BallAndStickParams = {
-//     ...ElementSphereParams,
-//     ...IntraUnitLinkParams,
-//     ...InterUnitLinkParams,
-//     // TODO
-//     // unitKinds: PD.MultiSelect<UnitKind>('Unit Kind', '', ['atomic'], UnitKindOptions),
-// }
-// export function getBallAndStickParams(ctx: ThemeRegistryContext, structure: Structure) {
-//     return BallAndStickParams // TODO return copy
-// }
-// export type BallAndStickProps = PD.DefaultValues<typeof BallAndStickParams>
+const BallAndStickVisuals = {
+    'element-sphere': (defaultProps: ElementSphereProps) => UnitsRepresentation('Element sphere mesh', defaultProps, ElementSphereVisual),
+    'intra-link': (defaultProps: IntraUnitLinkProps) => UnitsRepresentation('Intra-unit link cylinder', defaultProps, IntraUnitLinkVisual),
+    'inter-link': (defaultProps: InterUnitLinkProps) => ComplexRepresentation('Inter-unit link cylinder', defaultProps, InterUnitLinkVisual),
+}
+type BallAndStickVisualName = keyof typeof BallAndStickVisuals
+const BallAndStickVisualOptions = Object.keys(BallAndStickVisuals).map(name => [name, name] as [BallAndStickVisualName, string])
 
-// export type BallAndStickRepresentation = StructureRepresentation<BallAndStickProps>
+export const BallAndStickParams = {
+    ...ElementSphereParams,
+    ...IntraUnitLinkParams,
+    ...InterUnitLinkParams,
+    unitKinds: PD.MultiSelect<UnitKind>('Unit Kind', '', ['atomic'], UnitKindOptions),
+    sizeFactor: PD.Numeric('Size Factor', '', 0.2, 0.01, 10, 0.01),
+    sizeTheme: PD.Select<BuiltInSizeThemeName>('Size Theme', '', 'uniform', BuiltInSizeThemeOptions),
+    colorTheme: PD.Select<BuiltInColorThemeName>('Color Theme', '', 'polymer-index', BuiltInColorThemeOptions),
+    visuals: PD.MultiSelect<BallAndStickVisualName>('Visuals', '', ['element-sphere', 'intra-link', 'inter-link'], BallAndStickVisualOptions),
+}
+export function getBallAndStickParams(ctx: ThemeRegistryContext, structure: Structure) {
+    return BallAndStickParams // TODO return copy
+}
+export type BallAndStickProps = PD.DefaultValues<typeof BallAndStickParams>
 
-// export function BallAndStickRepresentation(defaultProps: BallAndStickProps): BallAndStickRepresentation {
-//     return Representation.createMulti('Ball & Stick', defaultProps, [
-//         UnitsRepresentation('Element sphere mesh', defaultProps, ElementSphereVisual),
-//         UnitsRepresentation('Intra-unit link cylinder', defaultProps, IntraUnitLinkVisual),
-//         ComplexRepresentation('Inter-unit link cylinder', defaultProps, InterUnitLinkVisual)
-//     ])
-// }
+export type BallAndStickRepresentation = StructureRepresentation<BallAndStickProps>
+
+export function BallAndStickRepresentation(defaultProps: BallAndStickProps): BallAndStickRepresentation {
+    return Representation.createMulti('Ball & Stick', defaultProps, BallAndStickVisuals as unknown as Representation.Def<BallAndStickProps>)
+}
+
+export const BallAndStickRepresentationProvider: StructureRepresentationProvider<typeof BallAndStickParams> = {
\ No newline at end of file
+    factory: BallAndStickRepresentation, params: getBallAndStickParams
+}
\ No newline at end of file

src/mol-repr/structure/visual/element-sphere.ts

@@ -10,13 +10,12 @@ import { VisualUpdateState } from '../../util';
 import { createElementSphereMesh, markElement, getElementLoci, StructureElementIterator } from './util/element';
 import { UnitsMeshVisual, UnitsMeshParams } from '../units-visual';
 import { ParamDefinition as PD } from 'mol-util/param-definition';
+import { BuiltInSizeThemeName, BuiltInSizeThemeOptions } from 'mol-theme/size';
 
 export const ElementSphereParams = {
     ...UnitsMeshParams,
-    // TODO
-    // sizeTheme: PD.Select<SizeThemeName>('Size Theme', '', 'physical', SizeThemeOptions),
-    // sizeValue: PD.Numeric('Size Value', '', 0.2, 0, 10, 0.1),
-    // sizeFactor: PD.Numeric('Size Factor', '', 1, 0, 10, 0.1),
+    sizeTheme: PD.Select<BuiltInSizeThemeName>('Size Theme', '', 'physical', BuiltInSizeThemeOptions),
+    sizeFactor: PD.Numeric('Size Factor', '', 1, 0, 10, 0.1),
     detail: PD.Numeric('Sphere Detail', '', 0, 0, 3, 1),
 }
 export const DefaultElementSphereProps = PD.getDefaultValues(ElementSphereParams)

src/mol-repr/structure/visual/intra-unit-link-cylinder.ts

@@ -20,7 +20,7 @@ import { PickingId } from 'mol-geo/geometry/picking';
 import { VisualContext } from 'mol-repr/representation';
 import { Theme } from 'mol-theme/theme';
 
-async function createIntraUnitLinkCylinderMesh(ctx: VisualContext, unit: Unit, structure: Structure, theme: Theme, props: LinkCylinderProps, mesh?: Mesh) {
+async function createIntraUnitLinkCylinderMesh(ctx: VisualContext, unit: Unit, structure: Structure, theme: Theme, props: IntraUnitLinkProps, mesh?: Mesh) {
     if (!Unit.isAtomic(unit)) return Mesh.createEmpty(mesh)
 
     const location = StructureElement.create(unit)
@@ -29,6 +29,7 @@ async function createIntraUnitLinkCylinderMesh(ctx: VisualContext, unit: Unit, s
     const links = unit.links
     const { edgeCount, a, b, edgeProps, offset } = links
     const { order: _order, flags: _flags } = edgeProps
+    const { sizeFactor } = props
 
     if (!edgeCount) return Mesh.createEmpty(mesh)
 
@@ -56,7 +57,7 @@ async function createIntraUnitLinkCylinderMesh(ctx: VisualContext, unit: Unit, s
         flags: (edgeIndex: number) => BitFlags.create(_flags[edgeIndex]),
         radius: (edgeIndex: number) => {
             location.element = elements[a[edgeIndex]]
-            return theme.size.size(location)
+            return theme.size.size(location) * sizeFactor
         }
     }
 
@@ -66,10 +67,7 @@ async function createIntraUnitLinkCylinderMesh(ctx: VisualContext, unit: Unit, s
 export const IntraUnitLinkParams = {
     ...UnitsMeshParams,
     ...LinkCylinderParams,
-    // TODO
-    // sizeTheme: PD.Select<SizeThemeName>('Size Theme', '', 'physical', SizeThemeOptions),
-    // sizeValue: PD.Numeric('Size Value', '', 0.2, 0, 10, 0.1),
-    // sizeFactor: PD.Numeric('Size Factor', '', 1, 0, 10, 0.1),
+    sizeFactor: PD.Numeric('Size Factor', '', 0.2, 0, 10, 0.01),
 }
 export const DefaultIntraUnitLinkProps = PD.getDefaultValues(IntraUnitLinkParams)
 export type IntraUnitLinkProps = typeof DefaultIntraUnitLinkProps

src/mol-repr/structure/visual/util/element.ts

@@ -20,10 +20,11 @@ import { StructureGroup } from 'mol-repr/structure/units-visual';
 
 export interface ElementSphereMeshProps {
     detail: number,
+    sizeFactor: number
 }
 
 export async function createElementSphereMesh(ctx: VisualContext, unit: Unit, structure: Structure, theme: Theme, props: ElementSphereMeshProps, mesh?: Mesh) {
-    const { detail } = props
+    const { detail, sizeFactor } = props
 
     const { elements } = unit;
     const elementCount = elements.length;
@@ -40,7 +41,7 @@ export async function createElementSphereMesh(ctx: VisualContext, unit: Unit, st
         pos(elements[i], v)
 
         meshBuilder.setGroup(i)
-        addSphere(meshBuilder, v, theme.size.size(l), detail)
+        addSphere(meshBuilder, v, theme.size.size(l) * sizeFactor, detail)
 
         if (i % 10000 === 0 && ctx.runtime.shouldUpdate) {
             await ctx.runtime.update({ message: 'Sphere mesh', current: i, max: elementCount });