mol-plugin: use color strips for Color and ColorScale controls

src/mol-geo/geometry/direct-volume/direct-volume.ts

@@ -21,6 +21,7 @@ import { transformPositionArray } from 'mol-geo/util';
 import { calculateBoundingSphere } from 'mol-gl/renderable/util';
 import { Theme } from 'mol-theme/theme';
 import { RenderableState } from 'mol-gl/renderable';
+import { ColorListOptions, ColorListName } from 'mol-util/color/scale';
 
 const VolumeBox = Box()
 const RenderModeOptions = [['isosurface', 'Isosurface'], ['volume', 'Volume']] as [string, string][]
@@ -73,6 +74,7 @@ export namespace DirectVolume {
         isoValue: PD.Numeric(0.22, { min: -1, max: 1, step: 0.01 }),
         renderMode: PD.Select('isosurface', RenderModeOptions),
         controlPoints: PD.LineGraph([Vec2.create(0.19, 0.1), Vec2.create(0.2, 0.5), Vec2.create(0.21, 0.1), Vec2.create(0.4, 0.3)]),
+        list: PD.ColorScale<ColorListName>('RdYlBu', ColorListOptions),
     }
     export type Params = typeof Params
 
@@ -89,7 +91,7 @@ export namespace DirectVolume {
         const boundingSphere = getBoundingSphere(gridDimension.ref.value, gridTransform.ref.value, transform.aTransform.ref.value, transform.instanceCount.ref.value)
 
         const controlPoints = getControlPointsFromVec2Array(props.controlPoints)
-        const transferTex = createTransferFunctionTexture(controlPoints)
+        const transferTex = createTransferFunctionTexture(controlPoints, props.list)
 
         const maxSteps = Math.ceil(Vec3.magnitude(gridDimension.ref.value)) * 2 * 5
 
@@ -126,7 +128,7 @@ export namespace DirectVolume {
         ValueCell.updateIfChanged(values.dRenderMode, props.renderMode)
 
         const controlPoints = getControlPointsFromVec2Array(props.controlPoints)
-        createTransferFunctionTexture(controlPoints, values.tTransferTex)
+        createTransferFunctionTexture(controlPoints, props.list, values.tTransferTex)
     }
 
     export function updateBoundingSphere(values: DirectVolumeValues, directVolume: DirectVolume) {

src/mol-geo/geometry/direct-volume/transfer-function.ts

@@ -6,10 +6,10 @@
 
 import { TextureImage } from 'mol-gl/renderable/util';
 import { spline } from 'mol-math/interpolate';
-import { ColorScale } from 'mol-util/color';
-import { ColorMatplotlib } from 'mol-util/color/tables';
+import { ColorScale, Color } from 'mol-util/color';
 import { ValueCell } from 'mol-util';
 import { Vec2 } from 'mol-math/linear-algebra';
+import { ColorListName } from 'mol-util/color/scale';
 
 export interface ControlPoint { x: number, alpha: number }
 
@@ -24,8 +24,7 @@ export function getControlPointsFromVec2Array(array: Vec2[]): ControlPoint[] {
     return array.map(v => ({ x: v[0], alpha: v[1] }))
 }
 
-// TODO move core function to mol-canvas3d/color
-export function createTransferFunctionTexture(controlPoints: ControlPoint[], texture?: ValueCell<TextureImage<Uint8Array>>): ValueCell<TextureImage<Uint8Array>> {
+export function createTransferFunctionTexture(controlPoints: ControlPoint[], listOrName: Color[] | ColorListName, texture?: ValueCell<TextureImage<Uint8Array>>): ValueCell<TextureImage<Uint8Array>> {
     const cp = [
         { x: 0, alpha: 0 },
         { x: 0, alpha: 0 },
@@ -33,10 +32,7 @@ export function createTransferFunctionTexture(controlPoints: ControlPoint[], tex
         { x: 1, alpha: 0 },
         { x: 1, alpha: 0 },
     ]
-    const scale = ColorScale.create({
-        domain: [0, 1],
-        listOrName: ColorMatplotlib.viridis
-    })
+    const scale = ColorScale.create({ domain: [0, 1], listOrName })
 
     const n = 256
     const array = texture ? texture.ref.value.array : new Uint8Array(n * 4)