mol-plugin: refactoring managers

src/examples/basic-wrapper/index.ts

@@ -80,11 +80,11 @@ class BasicWrapper {
     animate = {
         modelIndex: {
             maxFPS: 8,
-            onceForward: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'once', params: { direction: 'forward' } } }); },
-            onceBackward: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'once', params: { direction: 'backward' } } }); },
-            palindrome: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'palindrome', params: {} } }); },
-            loop: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'loop', params: {} } }); },
-            stop: () => this.plugin.state.animation.stop()
+            onceForward: () => { this.plugin.managers.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'once', params: { direction: 'forward' } } }); },
+            onceBackward: () => { this.plugin.managers.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'once', params: { direction: 'backward' } } }); },
+            palindrome: () => { this.plugin.managers.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'palindrome', params: {} } }); },
+            loop: () => { this.plugin.managers.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'loop', params: {} } }); },
+            stop: () => this.plugin.managers.animation.stop()
         }
     }
 

src/examples/proteopedia-wrapper/index.ts

@@ -290,11 +290,11 @@ class MolStarProteopediaWrapper {
     animate = {
         modelIndex: {
             maxFPS: 8,
-            onceForward: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'once', params: { direction: 'forward' } } }); },
-            onceBackward: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'once', params: { direction: 'backward' } } }); },
-            palindrome: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'palindrome', params: {} } }); },
-            loop: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'loop', params: {} } }); },
-            stop: () => this.plugin.state.animation.stop()
+            onceForward: () => { this.plugin.managers.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'once', params: { direction: 'forward' } } }); },
+            onceBackward: () => { this.plugin.managers.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'once', params: { direction: 'backward' } } }); },
+            palindrome: () => { this.plugin.managers.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'palindrome', params: {} } }); },
+            loop: () => { this.plugin.managers.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'loop', params: {} } }); },
+            stop: () => this.plugin.managers.animation.stop()
         }
     }
 

src/mol-plugin-state/animation/manager.ts → src/mol-plugin-state/manager/animation.ts

@@ -6,7 +6,7 @@
 
 import { StatefulPluginComponent } from '../component';
 import { PluginContext } from '../../mol-plugin/context';
-import { PluginStateAnimation } from './model';
+import { PluginStateAnimation } from '../animation/model';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 
 export { PluginAnimationManager };

src/mol-plugin-state/manager/snapshots.ts

@@ -283,7 +283,7 @@ class PluginStateSnapshotManager extends StatefulPluginComponent<{
     togglePlay() {
         if (this.state.isPlaying) {
             this.stop();
-            this.plugin.state.animation.stop();
+            this.plugin.managers.animation.stop();
         } else {
             this.play();
         }

src/mol-plugin-ui/controls.tsx

@@ -208,7 +208,7 @@ export class AnimationViewportControls extends PluginUIComponent<{}, { isEmpty:
     }
     toggleExpanded = () => this.setState({ isExpanded: !this.state.isExpanded });
     stop = () => {
-        this.plugin.state.animation.stop();
+        this.plugin.managers.animation.stop();
         this.plugin.managers.snapshot.stop();
     }
 

src/mol-plugin-ui/state/animation.tsx

@@ -12,19 +12,19 @@ import { PlayArrow } from '@material-ui/icons';
 
 export class AnimationControls extends PluginUIComponent<{ onStart?: () => void }> {
     componentDidMount() {
-        this.subscribe(this.plugin.state.animation.events.updated, () => this.forceUpdate());
+        this.subscribe(this.plugin.managers.animation.events.updated, () => this.forceUpdate());
     }
 
     updateParams: ParamOnChange = p => {
-        this.plugin.state.animation.updateParams({ [p.name]: p.value });
+        this.plugin.managers.animation.updateParams({ [p.name]: p.value });
     }
 
     updateCurrentParams: ParamOnChange = p => {
-        this.plugin.state.animation.updateCurrentParams({ [p.name]: p.value });
+        this.plugin.managers.animation.updateCurrentParams({ [p.name]: p.value });
     }
 
     startOrStop = () => {
-        const anim = this.plugin.state.animation;
+        const anim = this.plugin.managers.animation;
         if (anim.state.animationState === 'playing') anim.stop();
         else {
             if (this.props.onStart) this.props.onStart();
@@ -33,7 +33,7 @@ export class AnimationControls extends PluginUIComponent<{ onStart?: () => void
     }
 
     render() {
-        const anim = this.plugin.state.animation;
+        const anim = this.plugin.managers.animation;
         if (anim.isEmpty) return null;
 
         const isDisabled = anim.state.animationState === 'playing';

src/mol-plugin/context.ts

@@ -55,6 +55,8 @@ import { ViewportScreenshotHelper } from './util/viewport-screenshot';
 import { PLUGIN_VERSION, PLUGIN_VERSION_DATE } from './version';
 import { AssetManager } from '../mol-util/assets';
 import { PluginStateSnapshotManager } from '../mol-plugin-state/manager/snapshots';
+import { PluginAnimationManager } from '../mol-plugin-state/manager/animation';
+import { objectForEach } from '../mol-util/object';
 
 export class PluginContext {
     runTask = <T>(task: Task<T>) => this.tasks.run(task);
@@ -149,6 +151,7 @@ export class PluginContext {
         },
         interactivity: void 0 as any as InteractivityManager,
         camera: new CameraManager(this),
+        animation: new PluginAnimationManager(this),
         snapshot: new PluginStateSnapshotManager(this),
         lociLabels: void 0 as any as LociLabelManager,
         toast: new PluginToastManager(this),
@@ -242,6 +245,10 @@ export class PluginContext {
         this.state.dispose();
         this.tasks.dispose();
         this.layout.dispose();
+
+        objectForEach(this.managers, m => (m as any).dispose?.());
+        objectForEach(this.managers.structure, m => (m as any).dispose?.());
+
         this.disposed = true;
     }
 
@@ -326,7 +333,7 @@ export class PluginContext {
     private initAnimations() {
         if (!this.spec.animations) return;
         for (const anim of this.spec.animations) {
-            this.state.animation.register(anim);
+            this.managers.animation.register(anim);
         }
     }
 

src/mol-plugin/state.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author David Sehnal <david.sehnal@gmail.com>
  */
@@ -8,23 +8,22 @@ import { State, StateTransform, StateTransformer } from '../mol-state';
 import { PluginStateObject as SO } from '../mol-plugin-state/objects';
 import { Camera } from '../mol-canvas3d/camera';
 import { PluginBehavior } from './behavior';
-import { RxEventHelper } from '../mol-util/rx-event-helper';
 import { Canvas3DProps } from '../mol-canvas3d/canvas3d';
 import { PluginCommands } from './commands';
-import { PluginAnimationManager } from '../mol-plugin-state/animation/manager';
+import { PluginAnimationManager } from '../mol-plugin-state/manager/animation';
 import { ParamDefinition as PD } from '../mol-util/param-definition';
 import { UUID } from '../mol-util';
 import { InteractivityManager } from '../mol-plugin-state/manager/interactivity';
 import { produce } from 'immer';
 import { StructureFocusSnapshot } from '../mol-plugin-state/manager/structure/focus';
+
 export { PluginState };
 
 class PluginState {
-    private ev = RxEventHelper.create();
+    private get animation() { return this.plugin.managers.animation; }
 
     readonly data: State;
     readonly behaviors: State;
-    readonly animation: PluginAnimationManager;
 
     getSnapshot(params?: PluginState.GetSnapshotParams): PluginState.Snapshot {
         const p = { ...PluginState.DefaultGetSnapshotParams, ...params };
@@ -76,11 +75,6 @@ class PluginState {
         }
     }
 
-    applyTransform(state: State, a: StateTransform.Ref, transformer: StateTransformer, params: any) {
-        const tree = state.build().to(a).apply(transformer, params);
-        return PluginCommands.State.Update(this.plugin, { state, tree });
-    }
-
     updateTransform(state: State, a: StateTransform.Ref, params: any, canUndo?: string | boolean) {
         const tree = state.build().to(a).update(params);
         return PluginCommands.State.Update(this.plugin, { state, tree, options: { canUndo } });
@@ -98,7 +92,6 @@ class PluginState {
     }
 
     dispose() {
-        this.ev.dispose();
         this.data.dispose();
         this.behaviors.dispose();
         this.animation.dispose();
@@ -107,14 +100,10 @@ class PluginState {
     constructor(private plugin: import('./context').PluginContext) {
         this.data = State.create(new SO.Root({ }), { runTask: plugin.runTask, globalContext: plugin });
         this.behaviors = State.create(new PluginBehavior.Root({ }), { runTask: plugin.runTask, globalContext: plugin, rootState: { isLocked: true } });
-
-        this.animation = new PluginAnimationManager(plugin);
     }
 }
 
 namespace PluginState {
-    export type Kind = 'data' | 'behavior'
-
     export type CameraTransitionStyle = 'instant' | 'animate'
     export const GetSnapshotParams = {
         durationInMs: PD.Numeric(1500, { min: 100, max: 15000, step: 100 }, { label: 'Duration in ms' }),
@@ -125,8 +114,6 @@ namespace PluginState {
         canvas3d: PD.Boolean(true),
         interactivity: PD.Boolean(true),
         camera: PD.Boolean(true),
-        // TODO: make camera snapshots same as the StateSnapshots with "child states?"
-        cameraSnapshots: PD.Boolean(false),
         cameraTranstion: PD.MappedStatic('animate', {
             animate: PD.Group({
                 durationInMs: PD.Numeric(250, { min: 100, max: 5000, step: 500 }, { label: 'Duration in ms' }),