Additional markdown commands (#1630)

docs/docs/plugin/managers/markdown-extensions.md

@@ -20,8 +20,10 @@ Generally, the command should be URL encoded, e.g., `a b` => `a%20b` (in JS, `en
 
 - `center-camera` - Centers the camera
 - `apply-snapshot=key` - Loads snapshots with the provided key
+- `next-snapshot[=-1|1]` - Loads next/previous snapshot, the direction is optional and default to `1`
 - `play-snapshots` - Starts playback of state snapshots
 - `play-transition` - Plays an animation associated with the given snapshot
+- `stop-animation` - Stops currently playing animation
 - `focus-refs=ref1,ref2,...` - On click, focuses nodes with the provided refs
 - `highlight-refs=ref1,ref2,...` - On mouse over, highlights the provided refs
 - `query=...&lang=...&action=highlight,focus&focus-radius=...`

src/examples/mvs-stories/stories/animation.ts

@@ -24,8 +24,11 @@ const Steps = [
         description: `### Molecular Animation
 A story showcasing MolViewSpec animation capabilities.
 
-[🔄 Replay Intro](!play-transition)
-[⏵ Play Snapshots](!play-snapshots)
+[\[**🔄 Replay Intro**\]](!play-transition)
+[\[**⏵ Play Snapshots**\]](!play-snapshots)
+[\[**⏹ Stop Animation**\]](!stop-animation)
+
+[\[**➡️ Next Snapshot**\]](!next-snapshot)
 
 `,
         linger_duration_ms: 2000,

src/mol-plugin-state/manager/markdown-extensions.ts

@@ -47,6 +47,17 @@ export const BuiltInMarkdownExtension: MarkdownExtension[] = [
             manager.plugin.managers.snapshot.applyKey(key);
         }
     },
+    {
+        name: 'next-snapshot',
+        execute: ({ event, args, manager }) => {
+            if (event !== 'click' || !('next-snapshot' in args)) return;
+            let dir: -1 | 1 = (+args['next-snapshot'] || 1) as -1 | 1;
+            if (!dir) return;
+            if (dir < 0) dir = -1;
+            else dir = 1;
+            manager.plugin.managers.snapshot.applyNext(dir);
+        }
+    },
     {
         name: 'focus-refs',
         execute: ({ event, args, manager }) => {
@@ -206,7 +217,14 @@ export const BuiltInMarkdownExtension: MarkdownExtension[] = [
             if (event !== 'click' || !('play-snapshots' in args)) return;
             manager.plugin.managers.snapshot.play({ restart: true });
         }
-    }
+    },
+    {
+        name: 'stop-animation',
+        execute: ({ event, args, manager }) => {
+            if (event !== 'click' || !('stop-animation' in args)) return;
+            manager.plugin.managers.snapshot.stop();
+        }
+    },
 ];
 
 export class MarkdownExtensionManager {