mol-plugin: snapshot duration

src/mol-plugin/behavior/static/state.ts

@@ -128,7 +128,7 @@ export function Snapshots(ctx: PluginContext) {
     });
 
     PluginCommands.State.Snapshots.Add.subscribe(ctx, ({ name, description, params }) => {
-        const entry = PluginStateSnapshotManager.Entry(ctx.state.getSnapshot(params), name, description);
+        const entry = PluginStateSnapshotManager.Entry(ctx.state.getSnapshot(params), { name, description });
         ctx.state.snapshots.add(entry);
     });
 

src/mol-plugin/state.ts

@@ -56,7 +56,8 @@ class PluginState {
             cameraSnapshots: p.cameraSnapshots ? this.cameraSnapshots.getStateSnapshot() : void 0,
             canvas3d: p.canvas3d ? {
                 props: this.plugin.canvas3d.props
-            } : void 0
+            } : void 0,
+            durationInMs: params && params.durationInMs
         };
     }
 
@@ -111,6 +112,7 @@ namespace PluginState {
 
     export type CameraTransitionStyle = 'instant' | 'animate'
     export const GetSnapshotParams = {
+        durationInMs: PD.Numeric(1500, { min: 100, max: 15000, step: 100 }, { label: 'Duration in MS' }),
         data: PD.Boolean(true),
         behavior: PD.Boolean(false),
         animation: PD.Boolean(true),
@@ -120,7 +122,7 @@ namespace PluginState {
         cameraSnapshots: PD.Boolean(false),
         cameraTranstionStyle: PD.Select<CameraTransitionStyle>('animate', [['animate', 'Animate'], ['instant', 'Instant']])
     };
-    export type GetSnapshotParams = Partial<PD.Value<typeof GetSnapshotParams>>
+    export type GetSnapshotParams = Partial<PD.Values<typeof GetSnapshotParams>>
     export const DefaultGetSnapshotParams = PD.getDefaultValues(GetSnapshotParams);
 
     export interface Snapshot {
@@ -135,6 +137,7 @@ namespace PluginState {
         cameraSnapshots?: CameraSnapshotManager.StateSnapshot,
         canvas3d?: {
             props?: Canvas3DProps
-        }
+        },
+        durationInMs?: number
     }
 }

src/mol-plugin/state/snapshots.ts

@@ -61,7 +61,10 @@ class PluginStateSnapshotManager extends PluginComponent<{
 
         const idx = this.getIndex(old);
         // The id changes here!
-        const e = PluginStateSnapshotManager.Entry(snapshot, old.name, old.description);
+        const e = PluginStateSnapshotManager.Entry(snapshot, {
+            name: old.name,
+            description: old.description
+        });
         this.entryMap.set(snapshot.id, e);
         this.updateState({ current: e.snapshot.id, entries: this.state.entries.set(idx, e) });
         this.events.changed.next();
@@ -174,7 +177,8 @@ class PluginStateSnapshotManager extends PluginComponent<{
         }
         const snapshot = this.setCurrent(next)!;
         await this.plugin.state.setSnapshot(snapshot);
-        this.timeoutHandle = setTimeout(this.next, this.state.nextSnapshotDelayInMs);
+        const delay = typeof snapshot.durationInMs !== 'undefined' ? snapshot.durationInMs : this.state.nextSnapshotDelayInMs;
+        this.timeoutHandle = setTimeout(this.next, delay);
     };
 
     play() {
@@ -213,8 +217,8 @@ namespace PluginStateSnapshotManager {
         snapshot: PluginState.Snapshot
     }
 
-    export function Entry(snapshot: PluginState.Snapshot, name?: string, description?: string): Entry {
-        return { timestamp: +new Date(), name, snapshot, description };
+    export function Entry(snapshot: PluginState.Snapshot, params: {name?: string, description?: string }): Entry {
+        return { timestamp: +new Date(), snapshot, ...params };
     }
 
     export interface RemoteSnapshot {