renamed Viewer to Canvas3D, Context to WebGLContext, moved themes to mol-theme

src/apps/canvas/app.ts

@@ -4,7 +4,7 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import Viewer from 'mol-canvas3d/viewer';
+import Canvas3D from 'mol-canvas3d/canvas3d';
 import { getCifFromUrl, getModelsFromMmcif, getCifFromFile, getCcp4FromUrl, getVolumeFromCcp4, getCcp4FromFile, getVolumeFromVolcif } from './util';
 import { StructureView } from './structure-view';
 import { BehaviorSubject } from 'rxjs';
@@ -13,7 +13,7 @@ import { VolumeView } from './volume-view';
 import { Ccp4File } from 'mol-io/reader/ccp4/schema';
 
 export class App {
-    viewer: Viewer
+    canvas3d: Canvas3D
     container: HTMLDivElement | null = null;
     canvas: HTMLCanvasElement | null = null;
     structureView: StructureView | null = null;
@@ -27,8 +27,8 @@ export class App {
         this.container = _container
 
         try {
-            this.viewer = Viewer.create(this.canvas, this.container)
-            this.viewer.animate()
+            this.canvas3d = Canvas3D.create(this.canvas, this.container)
+            this.canvas3d.animate()
             return true
         } catch (e) {
             console.error(e)
@@ -63,7 +63,7 @@ export class App {
 
     async loadMmcif(cif: CifBlock, assemblyId?: string) {
         const models = await this.runTask(getModelsFromMmcif(cif), 'Build models')
-        this.structureView = await this.runTask(StructureView(this, this.viewer, models, { assemblyId }), 'Init structure view')
+        this.structureView = await this.runTask(StructureView(this, this.canvas3d, models, { assemblyId }), 'Init structure view')
         this.structureLoaded.next(this.structureView)
     }
 
@@ -85,7 +85,7 @@ export class App {
 
     async loadCcp4(ccp4: Ccp4File) {
         const volume = await this.runTask(getVolumeFromCcp4(ccp4), 'Get Volume')
-        this.volumeView = await this.runTask(VolumeView(this, this.viewer, volume), 'Init volume view')
+        this.volumeView = await this.runTask(VolumeView(this, this.canvas3d, volume), 'Init volume view')
         this.volumeLoaded.next(this.volumeView)
     }
 
@@ -105,7 +105,7 @@ export class App {
 
     async loadVolcif(cif: CifBlock) {
         const volume = await this.runTask(getVolumeFromVolcif(cif), 'Get Volume')
-        this.volumeView = await this.runTask(VolumeView(this, this.viewer, volume), 'Init volume view')
+        this.volumeView = await this.runTask(VolumeView(this, this.canvas3d, volume), 'Init volume view')
         this.volumeLoaded.next(this.volumeView)
     }
 

src/apps/canvas/assembly-symmetry.ts

@@ -12,7 +12,7 @@ import { Tensor } from 'mol-math/linear-algebra';
 import { addSphere } from 'mol-geo/geometry/mesh/builder/sphere';
 import { addCylinder } from 'mol-geo/geometry/mesh/builder/cylinder';
 import { Shape } from 'mol-model/shape';
-import { ColorTheme } from 'mol-canvas3d/theme/color';
+import { ColorTheme } from 'mol-theme/color';
 import { Location } from 'mol-model/location';
 import { StructureElement, Unit, StructureProperties } from 'mol-model/structure';
 

src/apps/canvas/component/representation.tsx

@@ -5,19 +5,19 @@
  */
 
 import * as React from 'react'
-import Viewer from 'mol-canvas3d/viewer';
+import Canvas3D from 'mol-canvas3d/canvas3d';
 import { App } from '../app';
 import { Params } from 'mol-util/parameter';
 import { Representation } from 'mol-geo/representation';
 import { ParametersComponent } from 'mol-app/component/parameters';
 import { Progress } from 'mol-task';
-import { ColorTheme } from 'mol-canvas3d/theme/color';
+import { ColorTheme } from 'mol-theme/color';
 import { getColorThemeProps } from 'mol-geo/geometry/color-data';
 import { ColorThemeComponent } from 'mol-app/component/color-theme';
 
 export interface RepresentationComponentProps {
     app: App
-    viewer: Viewer
+    viewer: Canvas3D
     repr: Representation<Params>
 }
 

src/apps/canvas/component/viewport.tsx

@@ -8,7 +8,7 @@ import * as React from 'react'
 import { App } from '../app';
 import { MarkerAction } from 'mol-geo/geometry/marker-data';
 import { EmptyLoci, Loci, areLociEqual } from 'mol-model/loci';
-import { labelFirst } from 'mol-canvas3d/label';
+import { labelFirst } from 'mol-theme/label';
 
 interface ViewportProps {
     app: App
@@ -31,7 +31,7 @@ export class Viewport extends React.Component<ViewportProps, ViewportState> {
     };
 
     handleResize() {
-        this.props.app.viewer.handleResize()
+        this.props.app.canvas3d.handleResize()
     }
 
     componentDidMount() {
@@ -40,7 +40,7 @@ export class Viewport extends React.Component<ViewportProps, ViewportState> {
         }
         this.handleResize()
 
-        const viewer = this.props.app.viewer
+        const viewer = this.props.app.canvas3d
 
         viewer.input.resize.subscribe(() => this.handleResize())
 

src/apps/canvas/structure-view.ts

@@ -11,7 +11,7 @@ import { getStructureFromModel } from './util';
 import { AssemblySymmetry } from 'mol-model-props/rcsb/symmetry';
 import { ShapeRepresentation, ShapeProps } from 'mol-geo/representation/shape';
 import { getAxesShape } from './assembly-symmetry';
-import Viewer from 'mol-canvas3d/viewer';
+import Canvas3D from 'mol-canvas3d/canvas3d';
 import { CarbohydrateRepresentation } from 'mol-geo/representation/structure/representation/carbohydrate';
 // import { MeshBuilder } from 'mol-geo/mesh/mesh-builder';
 // import { addSphere } from 'mol-geo/mesh/builder/sphere';
@@ -30,7 +30,7 @@ import { Progress } from 'mol-task';
 
 export interface StructureView {
     readonly app: App
-    readonly viewer: Viewer
+    readonly viewer: Canvas3D
 
     readonly label: string
     readonly models: ReadonlyArray<Model>
@@ -64,7 +64,7 @@ interface StructureViewProps {
     symmetryFeatureId?: number
 }
 
-export async function StructureView(app: App, viewer: Viewer, models: ReadonlyArray<Model>, props: StructureViewProps = {}): Promise<StructureView> {
+export async function StructureView(app: App, viewer: Canvas3D, models: ReadonlyArray<Model>, props: StructureViewProps = {}): Promise<StructureView> {
     const active: { [k: string]: boolean } = {
         cartoon: false,
         point: false,

src/apps/canvas/volume-view.ts

@@ -4,7 +4,7 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import Viewer from 'mol-canvas3d/viewer';
+import Canvas3D from 'mol-canvas3d/canvas3d';
 import { BehaviorSubject } from 'rxjs';
 import { App } from './app';
 import { Progress } from 'mol-task';
@@ -15,7 +15,7 @@ import { DirectVolumeRepresentation } from 'mol-geo/representation/volume/direct
 
 export interface VolumeView {
     readonly app: App
-    readonly viewer: Viewer
+    readonly viewer: Canvas3D
 
     readonly label: string
     readonly volume: VolumeData
@@ -32,7 +32,7 @@ interface VolumeViewProps {
 
 }
 
-export async function VolumeView(app: App, viewer: Viewer, volume: VolumeData, props: VolumeViewProps = {}): Promise<VolumeView> {
+export async function VolumeView(app: App, viewer: Canvas3D, volume: VolumeData, props: VolumeViewProps = {}): Promise<VolumeView> {
     const active: { [k: string]: boolean } = {
         isosurface: true,
         directVolume: false,

src/mol-app/component/color-theme.tsx

@@ -5,7 +5,7 @@
  */
 
 import * as React from 'react'
-import { ColorTheme } from 'mol-canvas3d/theme/color';
+import { ColorTheme } from 'mol-theme/color';
 import { Color } from 'mol-util/color';
 
 export interface ColorThemeComponentProps {

src/mol-canvas3d/viewer.ts → src/mol-canvas3d/canvas3d.ts

@@ -16,7 +16,7 @@ import TrackballControls from './controls/trackball'
 import { Viewport } from './camera/util'
 import { PerspectiveCamera } from './camera/perspective'
 import { resizeCanvas } from './util';
-import { createContext, getGLContext, Context } from 'mol-gl/webgl/context';
+import { createContext, getGLContext, WebGLContext } from 'mol-gl/webgl/context';
 import { Representation } from 'mol-geo/representation';
 import { createRenderTarget } from 'mol-gl/webgl/render-target';
 import Scene from 'mol-gl/scene';
@@ -26,8 +26,8 @@ import { MarkerAction } from 'mol-geo/geometry/marker-data';
 import { Loci, EmptyLoci, isEmptyLoci } from 'mol-model/loci';
 import { Color } from 'mol-util/color';
 
-interface Viewer {
-    webgl: Context,
+interface Canvas3D {
+    webgl: WebGLContext,
 
     center: (p: Vec3) => void
 
@@ -61,8 +61,8 @@ interface Viewer {
     dispose: () => void
 }
 
-namespace Viewer {
-    export function create(canvas: HTMLCanvasElement, container: Element): Viewer {
+namespace Canvas3D {
+    export function create(canvas: HTMLCanvasElement, container: Element): Canvas3D {
         const reprMap = new Map<Representation<any>, Set<RenderObject>>()
         const reprCount = new BehaviorSubject(0)
         const identified = new BehaviorSubject('')
@@ -350,4 +350,4 @@ namespace Viewer {
     }
 }
 
-export default Viewer
+export default Canvas3D

src/mol-geo/geometry/color-data.ts

@@ -10,7 +10,7 @@ import { Color } from 'mol-util/color';
 import { Vec2, Vec3 } from 'mol-math/linear-algebra';
 import { LocationIterator } from '../util/location-iterator';
 import { NullLocation } from 'mol-model/location';
-import { LocationColor, ColorThemeProps, ColorTheme, ColorThemeName } from 'mol-canvas3d/theme/color';
+import { LocationColor, ColorThemeProps, ColorTheme, ColorThemeName } from 'mol-theme/color';
 import { RuntimeContext } from 'mol-task';
 import { getGranularity } from './geometry';
 import { Structure } from 'mol-model/structure';

src/mol-geo/geometry/geometry.ts

@@ -10,14 +10,14 @@ import { RenderableState } from 'mol-gl/renderable';
 import { ValueCell } from 'mol-util';
 import { BaseValues } from 'mol-gl/renderable/schema';
 import { Color } from 'mol-util/color';
-import { ColorThemeOptions, ColorThemeName } from 'mol-canvas3d/theme/color';
+import { ColorThemeOptions, ColorThemeName } from 'mol-theme/color';
 import { LocationIterator } from '../util/location-iterator';
 import { ColorType } from './color-data';
 import { SizeType } from './size-data';
 import { Lines } from './lines/lines';
 import { paramDefaultValues, RangeParam, BooleanParam, SelectParam, ColorParam, ValueParam } from 'mol-util/parameter'
 import { DirectVolume } from './direct-volume/direct-volume';
-import { Context } from 'mol-gl/webgl/context';
+import { WebGLContext } from 'mol-gl/webgl/context';
 
 //
 
@@ -67,7 +67,7 @@ export namespace Geometry {
         quality: SelectParam<VisualQuality>('Quality', '', 'auto', VisualQualityOptions),
         colorTheme: SelectParam<ColorThemeName>('Color Theme', '', 'uniform', ColorThemeOptions),
         colorValue: ColorParam('Color Value', '', Color(0xCCCCCC)),
-        webgl: ValueParam('WebGL Context', '', undefined as Context | undefined),
+        webgl: ValueParam('WebGL Context', '', undefined as WebGLContext | undefined),
     }
     export const DefaultProps = paramDefaultValues(Params)
     export type Props = typeof DefaultProps

src/mol-geo/geometry/lines/lines.ts

@@ -14,7 +14,7 @@ import { createMarkers } from '../marker-data';
 import { createSizes } from '../size-data';
 import { TransformData } from '../transform-data';
 import { LocationIterator } from '../../util/location-iterator';
-import { SizeThemeName, SizeThemeOptions } from 'mol-canvas3d/theme/size';
+import { SizeThemeName, SizeThemeOptions } from 'mol-theme/size';
 import { LinesValues } from 'mol-gl/renderable/lines';
 import { Mesh } from '../mesh/mesh';
 import { LinesBuilder } from './lines-builder';

src/mol-geo/geometry/points/points.ts

@@ -15,7 +15,7 @@ import { createMarkers } from '../marker-data';
 import { createSizes } from '../size-data';
 import { TransformData } from '../transform-data';
 import { LocationIterator } from '../../util/location-iterator';
-import { SizeThemeName, SizeThemeOptions } from 'mol-canvas3d/theme/size';
+import { SizeThemeName, SizeThemeOptions } from 'mol-theme/size';
 import { BooleanParam, NumberParam, SelectParam, paramDefaultValues } from 'mol-util/parameter';
 
 /** Point cloud */

src/mol-geo/geometry/size-data.ts

@@ -10,7 +10,7 @@ import { TextureImage, createTextureImage } from 'mol-gl/renderable/util';
 import { LocationIterator } from '../util/location-iterator';
 import { Location, NullLocation } from 'mol-model/location';
 import { RuntimeContext } from 'mol-task';
-import { SizeThemeProps, SizeTheme, SizeThemeName } from 'mol-canvas3d/theme/size';
+import { SizeThemeProps, SizeTheme, SizeThemeName } from 'mol-theme/size';
 import { getGranularity } from './geometry';
 import { Structure } from 'mol-model/structure';
 

src/mol-geo/representation/shape/index.ts

@@ -11,7 +11,7 @@ import { PickingId } from '../../geometry/picking';
 import { Loci, EmptyLoci, isEveryLoci } from 'mol-model/loci';
 import { MarkerAction, applyMarkerAction } from '../../geometry/marker-data';
 import { ValueCell } from 'mol-util';
-import { ColorThemeName, ColorThemeOptions } from 'mol-canvas3d/theme/color';
+import { ColorThemeName, ColorThemeOptions } from 'mol-theme/color';
 import { Shape } from 'mol-model/shape';
 import { LocationIterator } from '../../util/location-iterator';
 import { OrderedSet, Interval } from 'mol-data/int';

src/mol-geo/representation/structure/index.ts

@@ -6,8 +6,8 @@
  */
 
 import { Structure } from 'mol-model/structure';
-import { ColorThemeName, ColorThemeOptions } from 'mol-canvas3d/theme/color';
-import { SizeThemeName, SizeThemeOptions } from 'mol-canvas3d/theme/size';
+import { ColorThemeName, ColorThemeOptions } from 'mol-theme/color';
+import { SizeThemeName, SizeThemeOptions } from 'mol-theme/size';
 import { Representation, RepresentationProps } from '..';
 import { Geometry } from '../../geometry/geometry';
 import { Mesh } from '../../geometry/mesh/mesh';

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

@@ -13,7 +13,7 @@ import { Task } from 'mol-task';
 import { Loci, isEmptyLoci } from 'mol-model/loci';
 import { MarkerAction } from '../../../geometry/marker-data';
 import { InterUnitLinkVisual } from '../visual/inter-unit-link-cylinder';
-import { SizeThemeName, SizeThemeOptions } from 'mol-canvas3d/theme/size';
+import { SizeThemeName, SizeThemeOptions } from 'mol-theme/size';
 import { getQualityProps } from '../../util';
 import { paramDefaultValues, SelectParam, NumberParam, MultiSelectParam } from 'mol-util/parameter';
 import { UnitKind, UnitKindOptions } from '../visual/util/common';

src/mol-geo/representation/structure/representation/carbohydrate.ts

@@ -12,7 +12,7 @@ import { Loci, isEmptyLoci } from 'mol-model/loci';
 import { MarkerAction } from '../../../geometry/marker-data';
 import { CarbohydrateSymbolVisual, CarbohydrateSymbolParams } from '../visual/carbohydrate-symbol-mesh';
 import { CarbohydrateLinkVisual, CarbohydrateLinkParams } from '../visual/carbohydrate-link-cylinder';
-import { SizeThemeName, SizeThemeOptions } from 'mol-canvas3d/theme/size';
+import { SizeThemeName, SizeThemeOptions } from 'mol-theme/size';
 import { getQualityProps } from '../../util';
 import { paramDefaultValues, SelectParam, NumberParam } from 'mol-util/parameter';
 

src/mol-geo/representation/structure/representation/cartoon.ts

@@ -13,7 +13,7 @@ import { MarkerAction } from '../../../geometry/marker-data';
 import { PolymerTraceVisual,  PolymerTraceParams } from '../visual/polymer-trace-mesh';
 import { PolymerGapVisual, PolymerGapParams } from '../visual/polymer-gap-cylinder';
 import { NucleotideBlockVisual, NucleotideBlockParams } from '../visual/nucleotide-block-mesh';
-import { SizeThemeName, SizeThemeOptions } from 'mol-canvas3d/theme/size';
+import { SizeThemeName, SizeThemeOptions } from 'mol-theme/size';
 import { getQualityProps } from '../../util';
 import { paramDefaultValues, SelectParam, NumberParam } from 'mol-util/parameter';
 // import { PolymerDirectionVisual, DefaultPolymerDirectionProps } from '../visual/polymer-direction-wedge';

src/mol-geo/representation/structure/representation/distance-restraint.ts

@@ -11,7 +11,7 @@ import { Task } from 'mol-task';
 import { Loci } from 'mol-model/loci';
 import { MarkerAction } from '../../../geometry/marker-data';
 import { CrossLinkRestraintVisual, CrossLinkRestraintParams } from '../visual/cross-link-restraint-cylinder';
-import { SizeThemeName, SizeThemeOptions } from 'mol-canvas3d/theme/size';
+import { SizeThemeName, SizeThemeOptions } from 'mol-theme/size';
 import { getQualityProps } from '../../util';
 import { paramDefaultValues, SelectParam, NumberParam } from 'mol-util/parameter';
 

src/mol-geo/representation/structure/representation/molecular-surface.ts

@@ -16,7 +16,7 @@ import { GaussianWireframeVisual, GaussianWireframeParams } from '../visual/gaus
 import { getQualityProps } from '../../util';
 import { paramDefaultValues, MultiSelectParam, SelectParam } from 'mol-util/parameter';
 import { GaussianDensityVolumeParams, GaussianDensityVolumeVisual } from '../visual/gaussian-density-volume';
-import { SizeThemeName, SizeThemeOptions } from 'mol-canvas3d/theme/size';
+import { SizeThemeName, SizeThemeOptions } from 'mol-theme/size';
 
 const VisualOptions = [['surface', 'Surface'], ['wireframe', 'Wireframe'], ['volume', 'Volume']] as [string, string][]
 

src/mol-geo/representation/structure/visual/carbohydrate-link-cylinder.ts

@@ -15,7 +15,7 @@ import { LocationIterator } from '../../../util/location-iterator';
 import { createLinkCylinderMesh, LinkCylinderProps, LinkCylinderParams } from './util/link';
 import { OrderedSet, Interval } from 'mol-data/int';
 import { ComplexMeshVisual } from '../complex-visual';
-import { SizeTheme, SizeThemeName, SizeThemeOptions } from 'mol-canvas3d/theme/size';
+import { SizeTheme, SizeThemeName, SizeThemeOptions } from 'mol-theme/size';
 import { LinkType } from 'mol-model/structure/model/types';
 import { BitFlags } from 'mol-util';
 import { UnitsMeshParams } from '../units-visual';

src/mol-geo/representation/structure/visual/carbohydrate-symbol-mesh.ts

@@ -16,7 +16,7 @@ import { getSaccharideShape, SaccharideShapes } from 'mol-model/structure/struct
 import { LocationIterator } from '../../../util/location-iterator';
 import { OrderedSet, Interval } from 'mol-data/int';
 import { ComplexMeshVisual, ComplexMeshParams } from '../complex-visual';
-import { SizeTheme, SizeThemeName, SizeThemeOptions } from 'mol-canvas3d/theme/size';
+import { SizeTheme, SizeThemeName, SizeThemeOptions } from 'mol-theme/size';
 import { addSphere } from '../../../geometry/mesh/builder/sphere';
 import { Box, PerforatedBox } from '../../../primitive/box';
 import { OctagonalPyramid, PerforatedOctagonalPyramid } from '../../../primitive/pyramid';

src/mol-geo/representation/structure/visual/cross-link-restraint-cylinder.ts

@@ -15,7 +15,7 @@ import { Loci, EmptyLoci } from 'mol-model/loci';
 import { ComplexMeshVisual, ComplexMeshParams } from '../complex-visual';
 import { LocationIterator } from '../../../util/location-iterator';
 import { Interval } from 'mol-data/int';
-import { SizeTheme, SizeThemeOptions, SizeThemeName } from 'mol-canvas3d/theme/size';
+import { SizeTheme, SizeThemeOptions, SizeThemeName } from 'mol-theme/size';
 import { BitFlags } from 'mol-util';
 import { LinkType } from 'mol-model/structure/model/types';
 import { SelectParam, NumberParam, paramDefaultValues } from 'mol-util/parameter';

src/mol-geo/representation/structure/visual/element-point.ts

@@ -9,7 +9,7 @@ import { RuntimeContext } from 'mol-task'
 import { UnitsVisual, VisualUpdateState } from '..';
 import { getElementLoci, StructureElementIterator, markElement } from './util/element';
 import { Vec3 } from 'mol-math/linear-algebra';
-import { SizeThemeOptions, SizeThemeName } from 'mol-canvas3d/theme/size';
+import { SizeThemeOptions, SizeThemeName } from 'mol-theme/size';
 import { UnitsPointsVisual, UnitsPointsParams } from '../units-visual';
 import { Points } from '../../../geometry/points/points';
 import { PointsBuilder } from '../../../geometry/points/points-builder';

src/mol-geo/representation/structure/visual/element-sphere.ts

@@ -9,7 +9,7 @@ import { UnitsVisual, VisualUpdateState } from '..';
 import { createElementSphereMesh, markElement, getElementLoci, StructureElementIterator } from './util/element';
 import { UnitsMeshVisual, UnitsMeshParams } from '../units-visual';
 import { NumberParam, paramDefaultValues, SelectParam } from 'mol-util/parameter';
-import { SizeThemeName, SizeThemeOptions } from 'mol-canvas3d/theme/size';
+import { SizeThemeName, SizeThemeOptions } from 'mol-theme/size';
 
 export const ElementSphereParams = {
     ...UnitsMeshParams,

src/mol-geo/representation/structure/visual/gaussian-density-point.ts

@@ -13,7 +13,7 @@ import { Vec3 } from 'mol-math/linear-algebra';
 import { UnitsPointsVisual, UnitsPointsParams } from '../units-visual';
 import { Points } from '../../../geometry/points/points';
 import { PointsBuilder } from '../../../geometry/points/points-builder';
-import { SizeThemeOptions, SizeThemeName } from 'mol-canvas3d/theme/size';
+import { SizeThemeOptions, SizeThemeName } from 'mol-theme/size';
 import { GaussianDensityProps, GaussianDensityParams } from 'mol-model/structure/structure/unit/gaussian-density';
 import { paramDefaultValues, SelectParam, NumberParam, BooleanParam } from 'mol-util/parameter';
 

src/mol-geo/representation/structure/visual/gaussian-surface-wireframe.ts

@@ -13,7 +13,7 @@ import { computeMarchingCubesLines } from '../../../util/marching-cubes/algorith
 import { Lines } from '../../../geometry/lines/lines';
 import { GaussianDensityProps, GaussianDensityParams } from 'mol-model/structure/structure/unit/gaussian-density';
 import { paramDefaultValues, SelectParam, NumberParam, BooleanParam } from 'mol-util/parameter';
-import { SizeThemeName, SizeThemeOptions } from 'mol-canvas3d/theme/size';
+import { SizeThemeName, SizeThemeOptions } from 'mol-theme/size';
 
 async function createGaussianWireframe(ctx: RuntimeContext, unit: Unit, structure: Structure, props: GaussianDensityProps, lines?: Lines): Promise<Lines> {
     const { smoothness } = props

src/mol-geo/representation/structure/visual/inter-unit-link-cylinder.ts

@@ -14,7 +14,7 @@ import { Vec3 } from 'mol-math/linear-algebra';
 import { Loci, EmptyLoci } from 'mol-model/loci';
 import { ComplexMeshVisual, ComplexMeshParams } from '../complex-visual';
 import { Interval } from 'mol-data/int';
-import { SizeTheme, SizeThemeName, SizeThemeOptions } from 'mol-canvas3d/theme/size';
+import { SizeTheme, SizeThemeName, SizeThemeOptions } from 'mol-theme/size';
 import { BitFlags } from 'mol-util';
 import { SelectParam, NumberParam, paramDefaultValues } from 'mol-util/parameter';
 

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

@@ -15,7 +15,7 @@ import { Vec3 } from 'mol-math/linear-algebra';
 import { Loci, EmptyLoci } from 'mol-model/loci';
 import { UnitsMeshVisual, UnitsMeshParams } from '../units-visual';
 import { Interval } from 'mol-data/int';
-import { SizeTheme, SizeThemeName, SizeThemeOptions } from 'mol-canvas3d/theme/size';
+import { SizeTheme, SizeThemeName, SizeThemeOptions } from 'mol-theme/size';
 import { BitFlags } from 'mol-util';
 import { SelectParam, NumberParam, paramDefaultValues } from 'mol-util/parameter';
 

src/mol-geo/representation/structure/visual/polymer-backbone-cylinder.ts

@@ -13,7 +13,7 @@ import { PolymerBackboneIterator } from './util/polymer';
 import { getElementLoci, markElement, StructureElementIterator } from './util/element';
 import { Vec3 } from 'mol-math/linear-algebra';
 import { UnitsMeshVisual, UnitsMeshParams } from '../units-visual';
-import { SizeTheme, SizeThemeOptions, SizeThemeName } from 'mol-canvas3d/theme/size';
+import { SizeTheme, SizeThemeOptions, SizeThemeName } from 'mol-theme/size';
 import { CylinderProps } from '../../../primitive/cylinder';
 import { OrderedSet } from 'mol-data/int';
 import { addCylinder } from '../../../geometry/mesh/builder/cylinder';

src/mol-geo/representation/structure/visual/polymer-direction-wedge.ts

@@ -13,7 +13,7 @@ import { PolymerTraceIterator, createCurveSegmentState, interpolateCurveSegment,
 import { Vec3, Mat4 } from 'mol-math/linear-algebra';
 import { SecondaryStructureType, isNucleic } from 'mol-model/structure/model/types';
 import { UnitsMeshVisual, UnitsMeshParams } from '../units-visual';
-import { SizeTheme, SizeThemeName, SizeThemeOptions } from 'mol-canvas3d/theme/size';
+import { SizeTheme, SizeThemeName, SizeThemeOptions } from 'mol-theme/size';
 import { Wedge } from '../../../primitive/wedge';
 import { SelectParam, NumberParam, paramDefaultValues } from 'mol-util/parameter';
 

src/mol-geo/representation/structure/visual/polymer-gap-cylinder.ts

@@ -12,7 +12,7 @@ import { MeshBuilder } from '../../../geometry/mesh/mesh-builder';
 import { PolymerGapIterator, PolymerGapLocationIterator, markPolymerGapElement, getPolymerGapElementLoci } from './util/polymer';
 import { Vec3 } from 'mol-math/linear-algebra';
 import { UnitsMeshVisual, UnitsMeshParams } from '../units-visual';
-import { SizeTheme, SizeThemeOptions, SizeThemeName } from 'mol-canvas3d/theme/size';
+import { SizeTheme, SizeThemeOptions, SizeThemeName } from 'mol-theme/size';
 import { CylinderProps } from '../../../primitive/cylinder';
 import { addSphere } from '../../../geometry/mesh/builder/sphere';
 import { addFixedCountDashedCylinder } from '../../../geometry/mesh/builder/cylinder';

src/mol-geo/representation/structure/visual/polymer-trace-mesh.ts

@@ -12,7 +12,7 @@ import { MeshBuilder } from '../../../geometry/mesh/mesh-builder';
 import { PolymerTraceIterator, createCurveSegmentState, interpolateCurveSegment, PolymerLocationIterator, getPolymerElementLoci, markPolymerElement } from './util/polymer';
 import { SecondaryStructureType, isNucleic } from 'mol-model/structure/model/types';
 import { UnitsMeshVisual, UnitsMeshParams } from '../units-visual';
-import { SizeTheme, SizeThemeName, SizeThemeOptions } from 'mol-canvas3d/theme/size';
+import { SizeTheme, SizeThemeName, SizeThemeOptions } from 'mol-theme/size';
 import { addSheet } from '../../../geometry/mesh/builder/sheet';
 import { addTube } from '../../../geometry/mesh/builder/tube';
 import { SelectParam, NumberParam, paramDefaultValues } from 'mol-util/parameter';

src/mol-geo/representation/structure/visual/util/element.ts

@@ -13,7 +13,7 @@ import { MeshBuilder } from '../../../../geometry/mesh/mesh-builder';
 import { Loci, EmptyLoci } from 'mol-model/loci';
 import { Interval, OrderedSet } from 'mol-data/int';
 import { PickingId } from '../../../../geometry/picking';
-import { SizeTheme, SizeThemeName } from 'mol-canvas3d/theme/size';
+import { SizeTheme, SizeThemeName } from 'mol-theme/size';
 import { LocationIterator } from '../../../../util/location-iterator';
 import { addSphere } from '../../../../geometry/mesh/builder/sphere';
 

src/mol-geo/representation/structure/visual/util/link.ts

@@ -9,7 +9,7 @@ import { RuntimeContext } from 'mol-task';
 import { Mesh } from '../../../../geometry/mesh/mesh';
 import { MeshBuilder } from '../../../../geometry/mesh/mesh-builder';
 import { LinkType } from 'mol-model/structure/model/types';
-import { SizeThemeName, SizeThemeOptions } from 'mol-canvas3d/theme/size';
+import { SizeThemeName, SizeThemeOptions } from 'mol-theme/size';
 import { CylinderProps } from '../../../../primitive/cylinder';
 import { LocationIterator } from '../../../../util/location-iterator';
 import { Unit, StructureElement, Structure, Link } from 'mol-model/structure';

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

@@ -16,7 +16,7 @@ import { paramDefaultValues } from 'mol-util/parameter';
 import { DirectVolume } from '../../geometry/direct-volume/direct-volume';
 import { Vec3, Mat4 } from 'mol-math/linear-algebra';
 import { Box3D } from 'mol-math/geometry';
-import { Context } from 'mol-gl/webgl/context';
+import { WebGLContext } from 'mol-gl/webgl/context';
 import { createTexture } from 'mol-gl/webgl/texture';
 import { LocationIterator } from 'mol-geo/util/location-iterator';
 import { NullLocation } from 'mol-model/location';
@@ -85,7 +85,7 @@ function createVolumeTexture2d(volume: VolumeData, maxTextureSize: number) {
     return textureImage
 }
 
-export function createDirectVolume2d(ctx: RuntimeContext, webgl: Context, volume: VolumeData, directVolume?: DirectVolume) {
+export function createDirectVolume2d(ctx: RuntimeContext, webgl: WebGLContext, volume: VolumeData, directVolume?: DirectVolume) {
     const gridDimension = volume.data.space.dimensions as Vec3
     const textureImage = createVolumeTexture2d(volume, webgl.maxTextureSize)
     // debugTexture(createImageData(textureImage.array, textureImage.width, textureImage.height), 1/3)
@@ -155,7 +155,7 @@ function createVolumeTexture3d(volume: VolumeData) {
     return textureVolume
 }
 
-export function createDirectVolume3d(ctx: RuntimeContext, webgl: Context, volume: VolumeData, directVolume?: DirectVolume) {
+export function createDirectVolume3d(ctx: RuntimeContext, webgl: WebGLContext, volume: VolumeData, directVolume?: DirectVolume) {
     const gridDimension = volume.data.space.dimensions as Vec3
     const textureVolume = createVolumeTexture3d(volume)
     const transform = VolumeData.getGridToCartesianTransform(volume)

src/mol-gl/render-object.ts

@@ -7,7 +7,7 @@
 import { PointsRenderable, MeshRenderable, RenderableState, MeshValues, PointsValues, LinesValues, LinesRenderable, Renderable } from './renderable'
 import { RenderableValues } from './renderable/schema';
 import { idFactory } from 'mol-util/id-factory';
-import { Context } from './webgl/context';
+import { WebGLContext } from './webgl/context';
 import { GaussianDensityValues, GaussianDensityRenderable } from './renderable/gaussian-density';
 import { DirectVolumeValues, DirectVolumeRenderable } from './renderable/direct-volume';
 
@@ -40,7 +40,7 @@ export function createDirectVolumeRenderObject(values: DirectVolumeValues, state
     return { id: getNextId(), type: 'direct-volume', values, state }
 }
 
-export function createRenderable(ctx: Context, o: RenderObject): Renderable<any> {
+export function createRenderable(ctx: WebGLContext, o: RenderObject): Renderable<any> {
     switch (o.type) {
         case 'mesh': return MeshRenderable(ctx, o.id, o.values, o.state)
         case 'points': return PointsRenderable(ctx, o.id, o.values, o.state)

src/mol-gl/renderable/direct-volume.ts

@@ -5,7 +5,7 @@
  */
 
 import { Renderable, RenderableState, createRenderable } from '../renderable'
-import { Context } from '../webgl/context';
+import { WebGLContext } from '../webgl/context';
 import { createRenderItem } from '../webgl/render-item';
 import { AttributeSpec, Values, UniformSpec, GlobalUniformSchema, InternalSchema, TextureSpec, ValueSpec, ElementsSpec, DefineSpec, InternalValues } from './schema';
 import { DirectVolumeShaderCode } from '../shader-code';
@@ -53,7 +53,7 @@ export const DirectVolumeSchema = {
 export type DirectVolumeSchema = typeof DirectVolumeSchema
 export type DirectVolumeValues = Values<DirectVolumeSchema>
 
-export function DirectVolumeRenderable(ctx: Context, id: number, values: DirectVolumeValues, state: RenderableState): Renderable<DirectVolumeValues> {
+export function DirectVolumeRenderable(ctx: WebGLContext, id: number, values: DirectVolumeValues, state: RenderableState): Renderable<DirectVolumeValues> {
     const schema = { ...GlobalUniformSchema, ...InternalSchema, ...DirectVolumeSchema }
     const internalValues: InternalValues = {
         uObjectId: ValueCell.create(id)

src/mol-gl/renderable/gaussian-density.ts

@@ -5,7 +5,7 @@
  */
 
 import { Renderable, RenderableState, createRenderable } from '../renderable'
-import { Context } from '../webgl/context';
+import { WebGLContext } from '../webgl/context';
 import { createRenderItem } from '../webgl/render-item';
 import { AttributeSpec, Values, UniformSpec, ValueSpec, DefineSpec, TextureSpec } from './schema';
 import { GaussianDensityShaderCode } from '../shader-code';
@@ -35,7 +35,7 @@ export const GaussianDensitySchema = {
 export type GaussianDensitySchema = typeof GaussianDensitySchema
 export type GaussianDensityValues = Values<GaussianDensitySchema>
 
-export function GaussianDensityRenderable(ctx: Context, id: number, values: GaussianDensityValues, state: RenderableState): Renderable<GaussianDensityValues> {
+export function GaussianDensityRenderable(ctx: WebGLContext, id: number, values: GaussianDensityValues, state: RenderableState): Renderable<GaussianDensityValues> {
     const schema = { ...GaussianDensitySchema }
     const shaderCode = GaussianDensityShaderCode
     const renderItem = createRenderItem(ctx, 'points', shaderCode, schema, values)

src/mol-gl/renderable/lines.ts

@@ -5,7 +5,7 @@
  */
 
 import { Renderable, RenderableState, createRenderable } from '../renderable'
-import { Context } from '../webgl/context';
+import { WebGLContext } from '../webgl/context';
 import { createRenderItem } from '../webgl/render-item';
 import { GlobalUniformSchema, BaseSchema, AttributeSpec, DefineSpec, Values, InternalSchema, SizeSchema, ElementsSpec, InternalValues } from './schema';
 import { ValueCell } from 'mol-util';
@@ -25,7 +25,7 @@ export const LinesSchema = {
 export type LinesSchema = typeof LinesSchema
 export type LinesValues = Values<LinesSchema>
 
-export function LinesRenderable(ctx: Context, id: number, values: LinesValues, state: RenderableState): Renderable<LinesValues> {
+export function LinesRenderable(ctx: WebGLContext, id: number, values: LinesValues, state: RenderableState): Renderable<LinesValues> {
     const schema = { ...GlobalUniformSchema, ...InternalSchema, ...LinesSchema }
     const internalValues: InternalValues = {
         uObjectId: ValueCell.create(id)

src/mol-gl/renderable/mesh.ts

@@ -5,7 +5,7 @@
  */
 
 import { Renderable, RenderableState, createRenderable } from '../renderable'
-import { Context } from '../webgl/context';
+import { WebGLContext } from '../webgl/context';
 import { createRenderItem } from '../webgl/render-item';
 import { GlobalUniformSchema, BaseSchema, AttributeSpec, ElementsSpec, DefineSpec, Values, InternalSchema, InternalValues } from './schema';
 import { MeshShaderCode } from '../shader-code';
@@ -23,7 +23,7 @@ export const MeshSchema = {
 export type MeshSchema = typeof MeshSchema
 export type MeshValues = Values<MeshSchema>
 
-export function MeshRenderable(ctx: Context, id: number, values: MeshValues, state: RenderableState): Renderable<MeshValues> {
+export function MeshRenderable(ctx: WebGLContext, id: number, values: MeshValues, state: RenderableState): Renderable<MeshValues> {
     const schema = { ...GlobalUniformSchema, ...InternalSchema, ...MeshSchema }
     const internalValues: InternalValues = {
         uObjectId: ValueCell.create(id)

src/mol-gl/renderable/points.ts

@@ -5,7 +5,7 @@
  */
 
 import { Renderable, RenderableState, createRenderable } from '../renderable'
-import { Context } from '../webgl/context';
+import { WebGLContext } from '../webgl/context';
 import { createRenderItem } from '../webgl/render-item';
 import { GlobalUniformSchema, BaseSchema, AttributeSpec, UniformSpec, DefineSpec, Values, InternalSchema, SizeSchema, InternalValues } from './schema';
 import { PointsShaderCode } from '../shader-code';
@@ -22,7 +22,7 @@ export const PointsSchema = {
 export type PointsSchema = typeof PointsSchema
 export type PointsValues = Values<PointsSchema>
 
-export function PointsRenderable(ctx: Context, id: number, values: PointsValues, state: RenderableState): Renderable<PointsValues> {
+export function PointsRenderable(ctx: WebGLContext, id: number, values: PointsValues, state: RenderableState): Renderable<PointsValues> {
     const schema = { ...GlobalUniformSchema, ...InternalSchema, ...PointsSchema }
     const internalValues: InternalValues = {
         uObjectId: ValueCell.create(id)

src/mol-gl/renderer.ts

@@ -9,7 +9,7 @@ import { Viewport } from 'mol-canvas3d/camera/util';
 import { Camera } from 'mol-canvas3d/camera/base';
 
 import Scene from './scene';
-import { Context, createImageData } from './webgl/context';
+import { WebGLContext, createImageData } from './webgl/context';
 import { Mat4, Vec3, Vec4 } from 'mol-math/linear-algebra';
 import { Renderable } from './renderable';
 import { Color } from 'mol-util/color';
@@ -49,7 +49,7 @@ export const DefaultRendererProps = {
 export type RendererProps = Partial<typeof DefaultRendererProps>
 
 namespace Renderer {
-    export function create(ctx: Context, camera: Camera, props: RendererProps = {}): Renderer {
+    export function create(ctx: WebGLContext, camera: Camera, props: RendererProps = {}): Renderer {
         const { gl } = ctx
         let { clearColor, viewport: _viewport } = { ...DefaultRendererProps, ...props }
 

src/mol-gl/scene.ts

@@ -5,7 +5,7 @@
  */
 
 import { Renderable } from './renderable'
-import { Context } from './webgl/context';
+import { WebGLContext } from './webgl/context';
 import { RenderableValues, BaseValues } from './renderable/schema';
 import { RenderObject, createRenderable } from './render-object';
 import { Object3D, createObject3D } from './object3d';
@@ -48,7 +48,7 @@ interface Scene extends Object3D {
 }
 
 namespace Scene {
-    export function create(ctx: Context): Scene {
+    export function create(ctx: WebGLContext): Scene {
         const renderableMap = new Map<RenderObject, Renderable<RenderableValues & BaseValues>>()
         let boundingSphere: Sphere3D | undefined
 

src/mol-gl/shader-code.ts

@@ -6,7 +6,7 @@
 
 import { ValueCell } from 'mol-util';
 import { idFactory } from 'mol-util/id-factory';
-import { Context } from './webgl/context';
+import { WebGLContext } from './webgl/context';
 
 export type DefineKind = 'boolean' | 'string' | 'number'
 export type DefineType = boolean | string
@@ -85,7 +85,7 @@ function getDefinesCode (defines: ShaderDefines) {
     return lines.join('\n') + '\n'
 }
 
-function getGlsl100FragPrefix(ctx: Context, extensions: ShaderExtensions) {
+function getGlsl100FragPrefix(ctx: WebGLContext, extensions: ShaderExtensions) {
     const prefix: string[] = []
     if (extensions.standardDerivatives) {
         prefix.push('#extension GL_OES_standard_derivatives : enable')
@@ -117,7 +117,7 @@ layout(location = 0) out highp vec4 out_FragColor;
 #define enabledFragDepth
 `
 
-export function addShaderDefines(ctx: Context, defines: ShaderDefines, shaders: ShaderCode): ShaderCode {
+export function addShaderDefines(ctx: WebGLContext, defines: ShaderDefines, shaders: ShaderCode): ShaderCode {
     const { isWebGL2 } = ctx
     const header = getDefinesCode(defines)
     const vertPrefix = isWebGL2 ? glsl300VertPrefix : ''

src/mol-gl/webgl/buffer.ts

@@ -4,7 +4,7 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { Context } from './context'
+import { WebGLContext } from './context'
 import { ValueCell } from 'mol-util';
 import { RenderableSchema } from '../renderable/schema';
 import { idFactory } from 'mol-util/id-factory';
@@ -29,7 +29,7 @@ export type ArrayKind = keyof DataTypeArrayType
 
 export type BufferItemSize = 1 | 2 | 3 | 4 | 16
 
-export function getUsageHint(ctx: Context, usageHint: UsageHint) {
+export function getUsageHint(ctx: WebGLContext, usageHint: UsageHint) {
     const { gl } = ctx
     switch (usageHint) {
         case 'static': return gl.STATIC_DRAW
@@ -38,7 +38,7 @@ export function getUsageHint(ctx: Context, usageHint: UsageHint) {
     }
 }
 
-export function getDataType(ctx: Context, dataType: DataType) {
+export function getDataType(ctx: WebGLContext, dataType: DataType) {
     const { gl } = ctx
     switch (dataType) {
         case 'uint8': return gl.UNSIGNED_BYTE
@@ -51,7 +51,7 @@ export function getDataType(ctx: Context, dataType: DataType) {
     }
 }
 
-function dataTypeFromArray(ctx: Context, array: ArrayType) {
+function dataTypeFromArray(ctx: WebGLContext, array: ArrayType) {
     const { gl } = ctx
     if (array instanceof Uint8Array) {
         return gl.UNSIGNED_BYTE
@@ -72,7 +72,7 @@ function dataTypeFromArray(ctx: Context, array: ArrayType) {
     }
 }
 
-export function getBufferType(ctx: Context, bufferType: BufferType) {
+export function getBufferType(ctx: WebGLContext, bufferType: BufferType) {
     const { gl } = ctx
     switch (bufferType) {
         case 'attribute': return gl.ARRAY_BUFFER
@@ -98,7 +98,7 @@ export interface Buffer {
     destroy: () => void
 }
 
-export function createBuffer(ctx: Context, array: ArrayType, itemSize: BufferItemSize, usageHint: UsageHint, bufferType: BufferType): Buffer {
+export function createBuffer(ctx: WebGLContext, array: ArrayType, itemSize: BufferItemSize, usageHint: UsageHint, bufferType: BufferType): Buffer {
     const { gl } = ctx
     const _buffer = gl.createBuffer()
     if (_buffer === null) {
@@ -162,7 +162,7 @@ export interface AttributeBuffer extends Buffer {
     bind: (location: number) => void
 }
 
-export function createAttributeBuffer<T extends ArrayType, S extends BufferItemSize>(ctx: Context, array: ArrayType, itemSize: S, divisor: number, usageHint: UsageHint = 'dynamic'): AttributeBuffer {
+export function createAttributeBuffer<T extends ArrayType, S extends BufferItemSize>(ctx: WebGLContext, array: ArrayType, itemSize: S, divisor: number, usageHint: UsageHint = 'dynamic'): AttributeBuffer {
     const { gl } = ctx
     const { instancedArrays } = ctx.extensions
 
@@ -188,7 +188,7 @@ export function createAttributeBuffer<T extends ArrayType, S extends BufferItemS
     }
 }
 
-export function createAttributeBuffers(ctx: Context, schema: RenderableSchema, values: AttributeValues) {
+export function createAttributeBuffers(ctx: WebGLContext, schema: RenderableSchema, values: AttributeValues) {
     const buffers: AttributeBuffers = {}
     Object.keys(schema).forEach(k => {
         const spec = schema[k]
@@ -206,7 +206,7 @@ export interface ElementsBuffer extends Buffer {
     bind: () => void
 }
 
-export function createElementsBuffer(ctx: Context, array: ElementsType, usageHint: UsageHint = 'static'): ElementsBuffer {
+export function createElementsBuffer(ctx: WebGLContext, array: ElementsType, usageHint: UsageHint = 'static'): ElementsBuffer {
     const { gl } = ctx
     const buffer = createBuffer(ctx, array, 1, usageHint, 'elements')
     const { _buffer } = buffer

src/mol-gl/webgl/context.ts

@@ -8,6 +8,7 @@ import { createProgramCache, ProgramCache } from './program'
 import { createShaderCache, ShaderCache } from './shader'
 import { GLRenderingContext, COMPAT_instanced_arrays, COMPAT_standard_derivatives, COMPAT_vertex_array_object, getInstancedArrays, getStandardDerivatives, getVertexArrayObject, isWebGL2, COMPAT_element_index_uint, getElementIndexUint, COMPAT_texture_float, getTextureFloat, COMPAT_texture_float_linear, getTextureFloatLinear, COMPAT_blend_minmax, getBlendMinMax, getFragDepth, COMPAT_frag_depth } from './compat';
 import { createFramebufferCache, FramebufferCache } from './framebuffer';
+import { Scheduler } from 'mol-task';
 
 export function getGLContext(canvas: HTMLCanvasElement, contextAttributes?: WebGLContextAttributes): GLRenderingContext | null {
     function getContext(contextId: 'webgl' | 'experimental-webgl' | 'webgl2') {
@@ -65,14 +66,14 @@ function fence(gl: WebGL2RenderingContext) {
             gl.flush(); // Ensure the fence is submitted.
             const check = () => {
                 const status = gl.getSyncParameter(sync, gl.SYNC_STATUS)
-                if (status == gl.SIGNALED) {
-                    gl.deleteSync(sync);
-                    resolve();
+                if (status === gl.SIGNALED) {
+                    gl.deleteSync(sync)
+                    resolve()
                 } else {
-                    setTimeout(check, 0)
+                    Scheduler.setImmediate(check, 0)
                 }
             }
-            setTimeout(check, 0)
+            Scheduler.setImmediate(check, 0)
         }
     })
 }
@@ -115,7 +116,7 @@ type Extensions = {
 }
 
 /** A WebGL context object, including the rendering context, resource caches and counts */
-export interface Context {
+export interface WebGLContext {
     readonly gl: GLRenderingContext
     readonly isWebGL2: boolean
     readonly extensions: Extensions
@@ -145,7 +146,7 @@ export interface Context {
     destroy: () => void
 }
 
-export function createContext(gl: GLRenderingContext): Context {
+export function createContext(gl: GLRenderingContext): WebGLContext {
     const instancedArrays = getInstancedArrays(gl)
     if (instancedArrays === null) {
         throw new Error('Could not find support for "instanced_arrays"')

src/mol-gl/webgl/framebuffer.ts

@@ -4,7 +4,7 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { Context } from './context'
+import { WebGLContext } from './context'
 import { idFactory } from 'mol-util/id-factory';
 import { ReferenceCache, createReferenceCache } from 'mol-util/reference-cache';
 
@@ -17,7 +17,7 @@ export interface Framebuffer {
     destroy: () => void
 }
 
-export function createFramebuffer (ctx: Context): Framebuffer {
+export function createFramebuffer (ctx: WebGLContext): Framebuffer {
     const { gl } = ctx
     const _framebuffer = gl.createFramebuffer()
     if (_framebuffer === null) {
@@ -40,12 +40,12 @@ export function createFramebuffer (ctx: Context): Framebuffer {
     }
 }
 
-export type FramebufferCache = ReferenceCache<Framebuffer, string, Context>
+export type FramebufferCache = ReferenceCache<Framebuffer, string, WebGLContext>
 
 export function createFramebufferCache(): FramebufferCache {
     return createReferenceCache(
         (name: string) => name,
-        (ctx: Context) => createFramebuffer(ctx),
+        (ctx: WebGLContext) => createFramebuffer(ctx),
         (framebuffer: Framebuffer) => { framebuffer.destroy() }
     )
 }

src/mol-gl/webgl/program.ts

@@ -5,7 +5,7 @@
  */
 
 import { ShaderCode, DefineValues, addShaderDefines } from '../shader-code'
-import { Context } from './context';
+import { WebGLContext } from './context';
 import { getUniformUpdaters, getTextureUniformUpdaters, UniformValues } from './uniform';
 import { AttributeBuffers } from './buffer';
 import { TextureId, Textures } from './texture';
@@ -29,7 +29,7 @@ export interface Program {
 
 type AttributeLocations = { [k: string]: number }
 
-function getAttributeLocations(ctx: Context, program: WebGLProgram, schema: RenderableSchema) {
+function getAttributeLocations(ctx: WebGLContext, program: WebGLProgram, schema: RenderableSchema) {
     const { gl } = ctx
     const locations: AttributeLocations = {}
     gl.useProgram(program)
@@ -52,7 +52,7 @@ export interface ProgramProps {
     schema: RenderableSchema
 }
 
-export function createProgram(ctx: Context, props: ProgramProps): Program {
+export function createProgram(ctx: WebGLContext, props: ProgramProps): Program {
     const { gl, shaderCache } = ctx
     const { defineValues, shaderCode: _shaderCode, schema } = props
 
@@ -112,7 +112,7 @@ export function createProgram(ctx: Context, props: ProgramProps): Program {
     }
 }
 
-export type ProgramCache = ReferenceCache<Program, ProgramProps, Context>
+export type ProgramCache = ReferenceCache<Program, ProgramProps, WebGLContext>
 
 function defineValueHash(v: boolean | number | string): number {
     return typeof v === 'boolean' ? (v ? 1 : 0) :
@@ -129,7 +129,7 @@ export function createProgramCache(): ProgramCache {
             })
             return hashFnv32a(array).toString()
         },
-        (ctx: Context, props: ProgramProps) => createProgram(ctx, props),
+        (ctx: WebGLContext, props: ProgramProps) => createProgram(ctx, props),
         (program: Program) => { program.destroy() }
     )
 }

src/mol-gl/webgl/render-item.ts

@@ -6,7 +6,7 @@
 
 import { createAttributeBuffers, createElementsBuffer, ElementsBuffer, createAttributeBuffer, ArrayKind } from './buffer';
 import { createTextures } from './texture';
-import { Context } from './context';
+import { WebGLContext } from './context';
 import { ShaderCode } from '../shader-code';
 import { Program } from './program';
 import { RenderableSchema, RenderableValues, AttributeSpec, getValueVersions, splitValues, Values } from '../renderable/schema';
@@ -20,7 +20,7 @@ const getNextRenderItemId = idFactory()
 
 export type DrawMode = 'points' | 'lines' | 'line-strip' | 'line-loop' | 'triangles' | 'triangle-strip' | 'triangle-fan'
 
-export function getDrawMode(ctx: Context, drawMode: DrawMode) {
+export function getDrawMode(ctx: WebGLContext, drawMode: DrawMode) {
     const { gl } = ctx
     switch (drawMode) {
         case 'points': return gl.POINTS
@@ -68,7 +68,7 @@ interface ValueChanges {
  *
  * - assumes that `values.drawCount` and `values.instanceCount` exist
  */
-export function createRenderItem(ctx: Context, drawMode: DrawMode, shaderCode: ShaderCode, schema: RenderableSchema, values: RenderableValues): RenderItem {
+export function createRenderItem(ctx: WebGLContext, drawMode: DrawMode, shaderCode: ShaderCode, schema: RenderableSchema, values: RenderableValues): RenderItem {
     const id = getNextRenderItemId()
     const { programCache } = ctx
     const { instancedArrays, vertexArrayObject } = ctx.extensions

src/mol-gl/webgl/render-target.ts

@@ -4,7 +4,7 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { Context, createImageData } from './context'
+import { WebGLContext, createImageData } from './context'
 import { idFactory } from 'mol-util/id-factory';
 import { createTexture, Texture } from './texture';
 import { createFramebuffer } from './framebuffer';
@@ -28,7 +28,7 @@ export interface RenderTarget {
     destroy: () => void
 }
 
-export function createRenderTarget (ctx: Context, _width: number, _height: number): RenderTarget {
+export function createRenderTarget (ctx: WebGLContext, _width: number, _height: number): RenderTarget {
     const { gl } = ctx
 
     const image: Helpers.Mutable<TextureImage<Uint8Array>> = {

src/mol-gl/webgl/renderbuffer.ts

@@ -4,7 +4,7 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { Context } from './context'
+import { WebGLContext } from './context'
 import { idFactory } from 'mol-util/id-factory';
 
 const getNextRenderbufferId = idFactory()
@@ -12,7 +12,7 @@ const getNextRenderbufferId = idFactory()
 export type RenderbufferFormat = 'depth16' | 'stencil8' | 'rgba4' | 'depth-stencil'
 export type RenderbufferAttachment = 'depth' | 'stencil' | 'depth-stencil' | 'color0'
 
-export function getFormat(ctx: Context, format: RenderbufferFormat) {
+export function getFormat(ctx: WebGLContext, format: RenderbufferFormat) {
     const { gl } = ctx
     switch (format) {
         case 'depth16': return gl.DEPTH_COMPONENT16
@@ -22,7 +22,7 @@ export function getFormat(ctx: Context, format: RenderbufferFormat) {
     }
 }
 
-export function getAttachment(ctx: Context, attachment: RenderbufferAttachment) {
+export function getAttachment(ctx: WebGLContext, attachment: RenderbufferAttachment) {
     const { gl } = ctx
     switch (attachment) {
         case 'depth': return gl.DEPTH_ATTACHMENT
@@ -41,7 +41,7 @@ export interface Renderbuffer {
     destroy: () => void
 }
 
-export function createRenderbuffer (ctx: Context, format: RenderbufferFormat, attachment: RenderbufferAttachment, _width: number, _height: number): Renderbuffer {
+export function createRenderbuffer (ctx: WebGLContext, format: RenderbufferFormat, attachment: RenderbufferAttachment, _width: number, _height: number): Renderbuffer {
     const { gl } = ctx
     const _renderbuffer = gl.createRenderbuffer()
     if (_renderbuffer === null) {

src/mol-gl/webgl/shader.ts

@@ -5,7 +5,7 @@
  */
 
 import { createReferenceCache, ReferenceCache } from 'mol-util/reference-cache';
-import { Context } from './context';
+import { WebGLContext } from './context';
 import { idFactory } from 'mol-util/id-factory';
 
 const getNextShaderId = idFactory()
@@ -26,7 +26,7 @@ export interface Shader {
     destroy: () => void
 }
 
-function createShader(ctx: Context, props: ShaderProps): Shader {
+function createShader(ctx: WebGLContext, props: ShaderProps): Shader {
     const { gl } = ctx
     const { type, source } = props
 
@@ -54,12 +54,12 @@ function createShader(ctx: Context, props: ShaderProps): Shader {
     }
 }
 
-export type ShaderCache = ReferenceCache<Shader, ShaderProps, Context>
+export type ShaderCache = ReferenceCache<Shader, ShaderProps, WebGLContext>
 
 export function createShaderCache(): ShaderCache {
     return createReferenceCache(
         (props: ShaderProps) => JSON.stringify(props),
-        (ctx: Context, props: ShaderProps) => createShader(ctx, props),
+        (ctx: WebGLContext, props: ShaderProps) => createShader(ctx, props),
         (shader: Shader) => { shader.destroy() }
     )
 }

src/mol-gl/webgl/texture.ts

@@ -4,7 +4,7 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { Context } from './context'
+import { WebGLContext } from './context'
 import { TextureImage, TextureVolume } from '../renderable/util';
 import { ValueCell } from 'mol-util';
 import { RenderableSchema } from '../renderable/schema';
@@ -29,7 +29,7 @@ export type TextureFormat = 'alpha' | 'rgb' | 'rgba'
 export type TextureAttachment = 'depth' | 'stencil' | 'color0' | 'color1' | 'color2' | 'color3' | 'color4' | 'color5' | 'color6' | 'color7' | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7
 export type TextureFilter = 'nearest' | 'linear'
 
-export function getTarget(ctx: Context, kind: TextureKind): number {
+export function getTarget(ctx: WebGLContext, kind: TextureKind): number {
     const { gl } = ctx
     switch (kind) {
         case 'image-uint8': return gl.TEXTURE_2D
@@ -44,7 +44,7 @@ export function getTarget(ctx: Context, kind: TextureKind): number {
     throw new Error('unknown texture kind')
 }
 
-export function getFormat(ctx: Context, format: TextureFormat): number {
+export function getFormat(ctx: WebGLContext, format: TextureFormat): number {
     const { gl } = ctx
     switch (format) {
         case 'alpha': return gl.ALPHA
@@ -53,7 +53,7 @@ export function getFormat(ctx: Context, format: TextureFormat): number {
     }
 }
 
-export function getInternalFormat(ctx: Context, format: TextureFormat, type: TextureType): number {
+export function getInternalFormat(ctx: WebGLContext, format: TextureFormat, type: TextureType): number {
     const { gl, isWebGL2 } = ctx
     if (isWebGL2) {
         switch (format) {
@@ -77,7 +77,7 @@ export function getInternalFormat(ctx: Context, format: TextureFormat, type: Tex
     return getFormat(ctx, format)
 }
 
-export function getType(ctx: Context, type: TextureType): number {
+export function getType(ctx: WebGLContext, type: TextureType): number {
     const { gl } = ctx
     switch (type) {
         case 'ubyte': return gl.UNSIGNED_BYTE
@@ -85,7 +85,7 @@ export function getType(ctx: Context, type: TextureType): number {
     }
 }
 
-export function getFilter(ctx: Context, type: TextureFilter): number {
+export function getFilter(ctx: WebGLContext, type: TextureFilter): number {
     const { gl } = ctx
     switch (type) {
         case 'nearest': return gl.NEAREST
@@ -93,7 +93,7 @@ export function getFilter(ctx: Context, type: TextureFilter): number {
     }
 }
 
-export function getAttachment(ctx: Context, attachment: TextureAttachment): number {
+export function getAttachment(ctx: WebGLContext, attachment: TextureAttachment): number {
     const { gl } = ctx
     switch (attachment) {
         case 'depth': return gl.DEPTH_ATTACHMENT
@@ -140,7 +140,7 @@ export type TextureId = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 1
 export type TextureValues = { [k: string]: ValueCell<TextureValueType> }
 export type Textures = { [k: string]: Texture }
 
-export function createTexture(ctx: Context, kind: TextureKind, _format: TextureFormat, _type: TextureType, _filter: TextureFilter): Texture {
+export function createTexture(ctx: WebGLContext, kind: TextureKind, _format: TextureFormat, _type: TextureType, _filter: TextureFilter): Texture {
     const id = getNextTextureId()
     const { gl } = ctx
     const texture = gl.createTexture()
@@ -244,7 +244,7 @@ export function createTexture(ctx: Context, kind: TextureKind, _format: TextureF
     }
 }
 
-export function createTextures(ctx: Context, schema: RenderableSchema, values: TextureValues) {
+export function createTextures(ctx: WebGLContext, schema: RenderableSchema, values: TextureValues) {
     const textures: Textures = {}
     Object.keys(schema).forEach((k, i) => {
         const spec = schema[k]

src/mol-gl/webgl/uniform.ts

@@ -5,7 +5,7 @@
  */
 
 import { Mat3, Mat4, Vec2, Vec3, Vec4 } from 'mol-math/linear-algebra'
-import { Context } from './context';
+import { WebGLContext } from './context';
 import { ValueCell } from 'mol-util';
 import { RenderableSchema } from '../renderable/schema';
 
@@ -29,7 +29,7 @@ export interface UniformUpdater {
 export type UniformValues = { [k: string]: ValueCell<UniformType> }
 export type UniformUpdaters = { [k: string]: UniformUpdater }
 
-function createUniformSetter(ctx: Context, program: WebGLProgram, name: string, kind: UniformKind): (value: any) => void {
+function createUniformSetter(ctx: WebGLContext, program: WebGLProgram, name: string, kind: UniformKind): (value: any) => void {
     const { gl } = ctx
     const location = gl.getUniformLocation(program, name)
     if (location === null) {
@@ -46,7 +46,7 @@ function createUniformSetter(ctx: Context, program: WebGLProgram, name: string,
     }
 }
 
-function createUniformUpdater(ctx: Context, program: WebGLProgram, name: string, kind: UniformKind): UniformUpdater {
+function createUniformUpdater(ctx: WebGLContext, program: WebGLProgram, name: string, kind: UniformKind): UniformUpdater {
     const setter = createUniformSetter(ctx, program, name, kind)
     let _value: UniformType | undefined = undefined
     return {
@@ -62,7 +62,7 @@ function createUniformUpdater(ctx: Context, program: WebGLProgram, name: string,
     }
 }
 
-export function getUniformUpdaters(ctx: Context, program: WebGLProgram, schema: RenderableSchema) {
+export function getUniformUpdaters(ctx: WebGLContext, program: WebGLProgram, schema: RenderableSchema) {
     const updaters: UniformUpdaters = {}
     Object.keys(schema).forEach(k => {
         const spec = schema[k]
@@ -73,7 +73,7 @@ export function getUniformUpdaters(ctx: Context, program: WebGLProgram, schema:
     return updaters
 }
 
-export function getTextureUniformUpdaters(ctx: Context, program: WebGLProgram, schema: RenderableSchema) {
+export function getTextureUniformUpdaters(ctx: WebGLContext, program: WebGLProgram, schema: RenderableSchema) {
     const updaters: UniformUpdaters = {}
     Object.keys(schema).forEach(k => {
         const spec = schema[k]

src/mol-gl/webgl/vertex-array.ts

@@ -4,11 +4,11 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { Context } from './context';
+import { WebGLContext } from './context';
 import { Program } from './program';
 import { AttributeBuffers, ElementsBuffer } from './buffer';
 
-export function createVertexArray(ctx: Context, program: Program, attributeBuffers: AttributeBuffers, elementsBuffer?: ElementsBuffer) {
+export function createVertexArray(ctx: WebGLContext, program: Program, attributeBuffers: AttributeBuffers, elementsBuffer?: ElementsBuffer) {
     const { vertexArrayObject } = ctx.extensions
     let vertexArray: WebGLVertexArrayObject | null = null
     if (vertexArrayObject) {
@@ -22,7 +22,7 @@ export function createVertexArray(ctx: Context, program: Program, attributeBuffe
     return vertexArray
 }
 
-export function deleteVertexArray(ctx: Context, vertexArray: WebGLVertexArrayObject | null) {
+export function deleteVertexArray(ctx: WebGLContext, vertexArray: WebGLVertexArrayObject | null) {
     const { vertexArrayObject } = ctx.extensions
     if (vertexArrayObject && vertexArray) {
         vertexArrayObject.deleteVertexArray(vertexArray)

src/mol-math/geometry/gaussian-density.ts

@@ -9,7 +9,7 @@ import { Vec3 } from '../linear-algebra';
 import { RuntimeContext, Task } from 'mol-task';
 import { PositionData, DensityData } from './common';
 import { GaussianDensityCPU } from './gaussian-density/cpu';
-import { Context } from 'mol-gl/webgl/context';
+import { WebGLContext } from 'mol-gl/webgl/context';
 
 // import { GaussianDensityGPU } from './gaussian-density/gpu';
 const GaussianDensityGPU = typeof document !== 'undefined'
@@ -21,7 +21,7 @@ export const DefaultGaussianDensityProps = {
     radiusOffset: 0,
     smoothness: 1.5,
     useGpu: true,
-    webgl: undefined as Context | undefined
+    webgl: undefined as WebGLContext | undefined
 }
 export type GaussianDensityProps = typeof DefaultGaussianDensityProps
 

src/mol-math/geometry/gaussian-density/gpu.ts

@@ -15,7 +15,7 @@ import { GaussianDensityValues } from 'mol-gl/renderable/gaussian-density'
 import { ValueCell, defaults } from 'mol-util'
 import { RenderableState, Renderable } from 'mol-gl/renderable'
 import { createRenderable, createGaussianDensityRenderObject } from 'mol-gl/render-object'
-import { Context, createContext, getGLContext } from 'mol-gl/webgl/context';
+import { WebGLContext, createContext, getGLContext } from 'mol-gl/webgl/context';
 import { createTexture, Texture } from 'mol-gl/webgl/texture';
 import { GLRenderingContext, isWebGL2 } from 'mol-gl/webgl/compat';
 import { decodeIdRGB } from 'mol-geo/geometry/picking';
@@ -39,7 +39,7 @@ export async function GaussianDensityGPU(ctx: RuntimeContext, position: Position
     return { field, idField, transform }
 }
 
-export async function GaussianDensityTexture(ctx: RuntimeContext, webgl: Context, position: PositionData, box: Box3D, radius: (index: number) => number, props: GaussianDensityProps, oldTexture?: Texture): Promise<DensityTextureData> {
+export async function GaussianDensityTexture(ctx: RuntimeContext, webgl: WebGLContext, position: PositionData, box: Box3D, radius: (index: number) => number, props: GaussianDensityProps, oldTexture?: Texture): Promise<DensityTextureData> {
     console.time(`GaussianDensityTexture, ${webgl.isWebGL2 ? '3d' : '2d'}`)
     const { texture, scale, bbox, dim } = webgl.isWebGL2 ?
         await GaussianDensityTexture3d(ctx, webgl, position, box, radius, props, oldTexture) :
@@ -55,7 +55,7 @@ export async function GaussianDensityTexture(ctx: RuntimeContext, webgl: Context
 
 //
 
-async function GaussianDensityTexture2d(ctx: RuntimeContext, webgl: Context, position: PositionData, box: Box3D, radius: (index: number) => number, props: GaussianDensityProps, texture?: Texture) {
+async function GaussianDensityTexture2d(ctx: RuntimeContext, webgl: WebGLContext, position: PositionData, box: Box3D, radius: (index: number) => number, props: GaussianDensityProps, texture?: Texture) {
     const { smoothness } = props
 
     const { drawCount, positions, radii, groups, delta, expandedBox, dim } = await prepareGaussianDensityData(ctx, position, box, radius, props)
@@ -116,7 +116,7 @@ async function GaussianDensityTexture2d(ctx: RuntimeContext, webgl: Context, pos
     return { texture, scale: Vec3.inverse(Vec3.zero(), delta), bbox: expandedBox, dim }
 }
 
-async function GaussianDensityTexture3d(ctx: RuntimeContext, webgl: Context, position: PositionData, box: Box3D, radius: (index: number) => number, props: GaussianDensityProps, texture?: Texture) {
+async function GaussianDensityTexture3d(ctx: RuntimeContext, webgl: WebGLContext, position: PositionData, box: Box3D, radius: (index: number) => number, props: GaussianDensityProps, texture?: Texture) {
     const { smoothness } = props
 
     const { drawCount, positions, radii, groups, delta, expandedBox, dim } = await prepareGaussianDensityData(ctx, position, box, radius, props)
@@ -165,7 +165,7 @@ async function GaussianDensityTexture3d(ctx: RuntimeContext, webgl: Context, pos
 
 //
 
-let webglContext: Context
+let webglContext: WebGLContext
 function getWebGLContext() {
     if (webglContext) return webglContext
     const canvas = document.createElement('canvas')
@@ -220,7 +220,7 @@ async function prepareGaussianDensityData(ctx: RuntimeContext, position: Positio
     return { drawCount: n, positions, radii, groups, delta, expandedBox, dim }
 }
 
-function getGaussianDensityRenderObject(webgl: Context, drawCount: number, positions: Float32Array, radii: Float32Array, groups: Float32Array, minDistanceTexture: Texture, box: Box3D, dimensions: Vec3, smoothness: number) {
+function getGaussianDensityRenderObject(webgl: WebGLContext, drawCount: number, positions: Float32Array, radii: Float32Array, groups: Float32Array, minDistanceTexture: Texture, box: Box3D, dimensions: Vec3, smoothness: number) {
     const extent = Vec3.sub(Vec3.zero(), box.max, box.min)
     const { texDimX, texDimY } = getTexture2dSize(webgl.maxTextureSize, dimensions)
 
@@ -263,7 +263,7 @@ function setRenderingDefaults(gl: GLRenderingContext) {
     gl.enable(gl.BLEND)
 }
 
-function setupMinDistanceRendering(webgl: Context, renderable: Renderable<any>) {
+function setupMinDistanceRendering(webgl: WebGLContext, renderable: Renderable<any>) {
     const { gl } = webgl
     ValueCell.update(renderable.values.dCalcType, 'minDistance')
     renderable.update()
@@ -273,7 +273,7 @@ function setupMinDistanceRendering(webgl: Context, renderable: Renderable<any>)
     gl.blendEquation(webgl.extensions.blendMinMax.MAX)
 }
 
-function setupDensityRendering(webgl: Context, renderable: Renderable<any>) {
+function setupDensityRendering(webgl: WebGLContext, renderable: Renderable<any>) {
     const { gl } = webgl
     ValueCell.update(renderable.values.dCalcType, 'density')
     renderable.update()
@@ -282,7 +282,7 @@ function setupDensityRendering(webgl: Context, renderable: Renderable<any>) {
     gl.blendEquation(gl.FUNC_ADD)
 }
 
-function setupGroupIdRendering(webgl: Context, renderable: Renderable<any>) {
+function setupGroupIdRendering(webgl: WebGLContext, renderable: Renderable<any>) {
     const { gl } = webgl
     ValueCell.update(renderable.values.dCalcType, 'groupId')
     renderable.update()
@@ -308,7 +308,7 @@ function getTexture2dSize(maxTexSize: number, gridDim: Vec3) {
     return { texDimX, texDimY, texRows, texCols }
 }
 
-async function fieldFromTexture2d(ctx: Context, texture: Texture, dim: Vec3) {
+async function fieldFromTexture2d(ctx: WebGLContext, texture: Texture, dim: Vec3) {
     console.log('isWebGL2', isWebGL2(ctx.gl))
     console.time('fieldFromTexture2d')
     const { framebufferCache } = ctx
@@ -326,7 +326,7 @@ async function fieldFromTexture2d(ctx: Context, texture: Texture, dim: Vec3) {
 
     const framebuffer = framebufferCache.get(ctx, FramebufferName).value
     framebuffer.bind()
-    texture.attachFramebuffer(framebuffer, 0)   
+    texture.attachFramebuffer(framebuffer, 0)
     await ctx.readPixelsAsync(0, 0, width, height, image)
 
     let j = 0

src/mol-model/structure/structure/unit/gaussian-density.ts

@@ -5,12 +5,12 @@
  */
 
 import { Unit, StructureElement, ElementIndex } from 'mol-model/structure';
-import { SizeTheme } from 'mol-canvas3d/theme/size';
+import { SizeTheme } from 'mol-theme/size';
 import { GaussianDensity } from 'mol-math/geometry/gaussian-density';
 import { Task, RuntimeContext } from 'mol-task';
 import { DensityData } from 'mol-math/geometry';
 import { NumberParam, paramDefaultValues, BooleanParam, ValueParam } from 'mol-util/parameter';
-import { Context } from 'mol-gl/webgl/context';
+import { WebGLContext } from 'mol-gl/webgl/context';
 import { GaussianDensityTexture } from 'mol-math/geometry/gaussian-density/gpu';
 import { Texture } from 'mol-gl/webgl/texture';
 
@@ -20,7 +20,7 @@ export const GaussianDensityParams = {
     smoothness: NumberParam('Smoothness', '', 1.5, 0.5, 2.5, 0.1),
     useGpu: BooleanParam('Use GPU', '', true),
     ignoreCache: BooleanParam('Ignore Cache', '', false),
-    webgl: ValueParam('WebGL Context', '', undefined as Context | undefined),
+    webgl: ValueParam('WebGL Context', '', undefined as WebGLContext | undefined),
 }
 export const DefaultGaussianDensityProps = paramDefaultValues(GaussianDensityParams)
 export type GaussianDensityProps = typeof DefaultGaussianDensityProps

src/mol-plugin/context.ts

@@ -5,7 +5,7 @@
  */
 
 import { State, StateTree, StateSelection, Transformer } from 'mol-state';
-import Viewer from 'mol-canvas3d/viewer';
+import Canvas3D from 'mol-canvas3d/canvas3d';
 import { StateTransforms } from './state/transforms';
 import { Subject } from 'rxjs';
 import { PluginStateObjects as SO } from './state/objects';
@@ -22,13 +22,13 @@ export class PluginContext {
         stateUpdated: new Subject<undefined>()
     };
 
-    viewer: Viewer;
+    canvas3d: Canvas3D;
 
     initViewer(canvas: HTMLCanvasElement, container: HTMLDivElement) {
         try {
-            this.viewer = Viewer.create(canvas, container);
-            this.viewer.animate();
-            console.log('viewer created');
+            this.canvas3d = Canvas3D.create(canvas, container);
+            this.canvas3d.animate();
+            console.log('canvas3d created');
             return true;
         } catch (e) {
             console.error(e);
@@ -60,24 +60,24 @@ export class PluginContext {
         this.state.data.context.events.object.created.subscribe(o => {
             if (!SO.StructureRepresentation3D.is(o.obj)) return;
             console.log('adding repr', o.obj.data.repr);
-            this.viewer.add(o.obj.data.repr);
-            this.viewer.requestDraw(true);
+            this.canvas3d.add(o.obj.data.repr);
+            this.canvas3d.requestDraw(true);
         });
         this.state.data.context.events.object.updated.subscribe(o => {
             const oo = o.obj;
             if (!SO.StructureRepresentation3D.is(oo)) return;
             console.log('adding repr', oo.data.repr);
-            this.viewer.add(oo.data.repr);
-            this.viewer.requestDraw(true);
+            this.canvas3d.add(oo.data.repr);
+            this.canvas3d.requestDraw(true);
         });
     }
 
     _test_centerView() {
         const sel = StateSelection.select('structure', this.state.data);
         const center = (sel[0].obj! as SO.Structure).data.boundary.sphere.center;
-        console.log({ sel, center, rc: this.viewer.reprCount });
-        this.viewer.center(center);
-        this.viewer.requestDraw(true);
+        console.log({ sel, center, rc: this.canvas3d.reprCount });
+        this.canvas3d.center(center);
+        this.canvas3d.requestDraw(true);
     }
 
     _test_nextModel() {

src/mol-plugin/ui/viewport.tsx

@@ -27,7 +27,7 @@ export class Viewport extends React.Component<ViewportProps, ViewportState> {
     };
 
     handleResize() {
-        this.props.plugin.viewer.handleResize();
+        this.props.plugin.canvas3d.handleResize();
     }
 
     componentDidMount() {
@@ -36,13 +36,13 @@ export class Viewport extends React.Component<ViewportProps, ViewportState> {
         }
         this.handleResize();
 
-        const viewer = this.props.plugin.viewer;
+        const viewer = this.props.plugin.canvas3d;
         viewer.input.resize.subscribe(() => this.handleResize());
 
         let prevLoci: Loci = EmptyLoci;
-        viewer.input.move.subscribe(({x, y, inside, buttons}) => {
+        viewer.input.move.subscribe(async ({x, y, inside, buttons}) => {
             if (!inside || buttons) return;
-            const p = viewer.identify(x, y);
+            const p = await viewer.identify(x, y);
             if (p) {
                 const loci = viewer.getLoci(p);
 

src/mol-util/color/scale.ts

@@ -6,7 +6,7 @@
 
 import { Color } from './color'
 import { ColorBrewer } from './tables'
-import { ScaleLegend } from 'mol-canvas3d/theme/color';
+import { ScaleLegend } from 'mol-theme/color';
 import { defaults } from 'mol-util';
 
 export interface ColorScale {