mol-plugin: basic animation support

src/mol-plugin/skin/base/components/misc.scss

@@ -66,4 +66,8 @@
     background: white;
     cursor: inherit;
     display: block;
+}
+
+.msp-animation-section {
+    margin-bottom: $control-spacing;
 }

src/mol-plugin/state.ts

@@ -45,6 +45,7 @@ class PluginState {
         return {
             data: this.dataState.getSnapshot(),
             behaviour: this.behaviorState.getSnapshot(),
+            animation: this.animation.getSnapshot(),
             cameraSnapshots: this.cameraSnapshots.getStateSnapshot(),
             canvas3d: {
                 camera: this.plugin.canvas3d.camera.getSnapshot(),
@@ -62,6 +63,9 @@ class PluginState {
             if (snapshot.canvas3d.camera) this.plugin.canvas3d.camera.setState(snapshot.canvas3d.camera);
         }
         this.plugin.canvas3d.requestDraw(true);
+        if (snapshot.animation) {
+            this.animation.setSnapshot(snapshot.animation);
+        }
     }
 
     dispose() {
@@ -94,6 +98,7 @@ namespace PluginState {
     export interface Snapshot {
         data?: State.Snapshot,
         behaviour?: State.Snapshot,
+        animation?: PluginAnimationManager.Snapshot,
         cameraSnapshots?: CameraSnapshotManager.StateSnapshot,
         canvas3d?: {
             camera?: Camera.Snapshot,

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

@@ -82,7 +82,7 @@ class PluginAnimationManager extends PluginComponent<PluginAnimationManager.Stat
         this.triggerUpdate();
     }
 
-    animate = async (t: number) => {
+    private animate = async (t: number) => {
         if (this._current.startedTime < 0) this._current.startedTime = t;
         const newState = await this._current.anim.apply(
             this._current.state,
@@ -100,6 +100,38 @@ class PluginAnimationManager extends PluginComponent<PluginAnimationManager.Stat
         }
     }
 
+    getSnapshot(): PluginAnimationManager.Snapshot {
+        if (!this.current) return { state: this.latestState };
+
+        return {
+            state: this.latestState,
+            current: {
+                paramValues: this._current.paramValues,
+                state: this._current.anim.stateSerialization ? this._current.anim.stateSerialization.toJSON(this._current.state) : this._current.state
+            }
+        };
+    }
+
+    setSnapshot(snapshot: PluginAnimationManager.Snapshot) {
+        this.updateState({ animationState: snapshot.state.animationState });
+        this.updateParams(snapshot.state.params);
+
+        if (snapshot.current) {
+            this.current.paramValues = snapshot.current.paramValues;
+            this.current.state = this._current.anim.stateSerialization
+                ? this._current.anim.stateSerialization.fromJSON(snapshot.current.state)
+                : snapshot.current.state;
+            this.triggerUpdate();
+            if (this.latestState.animationState === 'playing') this.resume();
+        }
+    }
+
+    private resume() {
+        this._current.lastTime = 0;
+        this._current.startedTime = -1;
+        requestAnimationFrame(this.animate);
+    }
+
     constructor(ctx: PluginContext) {
         super(ctx, { params: { current: '' }, animationState: 'stopped' });
     }
@@ -119,4 +151,12 @@ namespace PluginAnimationManager {
         params: { current: string },
         animationState: 'stopped' | 'playing'
     }
+
+    export interface Snapshot {
+        state: State,
+        current?: {
+            paramValues: any,
+            state: any
+        }
+    }
 }

src/mol-plugin/state/animation/model.ts

@@ -23,9 +23,9 @@ interface PluginStateAnimation<P extends PD.Params = any, S = any> {
 
     /**
      * The state must be serializable to JSON. If JSON.stringify is not enough,
-     * custom serializer can be provided.
+     * custom converted to an object that works with JSON.stringify can be provided.
      */
-    stateSerialization?: { toJSON?(state: S): any, fromJSON?(data: any): S }
+    stateSerialization?: { toJSON(state: S): any, fromJSON(data: any): S }
 }
 
 namespace PluginStateAnimation {

src/mol-plugin/ui/plugin.tsx

@@ -62,8 +62,8 @@ class Layout extends PluginComponent {
                     {layout.showControls && this.region('right', <div className='msp-scrollable-container msp-right-controls'>
                         <CurrentObject />
                         <Controls />
-                        <CameraSnapshots />
                         <AnimationControls />
+                        <CameraSnapshots />
                         <StateSnapshots />
                     </div>)}
                     {layout.showControls && this.region('bottom', <Log />)}

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

@@ -33,8 +33,7 @@ export class AnimationControls extends PluginComponent<{ }> {
 
         const isDisabled = anim.latestState.animationState === 'playing';
 
-        // TODO: give it its own style
-        return <div style={{ marginBottom: '10px' }}>
+        return <div className='msp-animation-section'>
             <div className='msp-section-header'>Animations</div>
 
             <ParameterControls params={anim.getParams()} values={anim.latestState.params} onChange={this.updateParams} isDisabled={isDisabled} />