Home Explore Help
Sign In
web
/
TmMolStar
3
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

mol-plugin: improved model index animation; added animation to BasicWrapper

David Sehnal 6 years ago
parent
c41d4656f6
commit
9ee014bcff
5 changed files with 81 additions and 19 deletions
Split View Show Diff Stats
  1. 45 8
      src/apps/basic-wrapper/index.html
  2. 9 0
      src/apps/basic-wrapper/index.ts
  3. 9 4
      src/mol-plugin/state/animation/built-in.ts
  4. 12 1
      src/mol-plugin/state/animation/manager.ts
  5. 6 6
      src/mol-plugin/state/animation/model.ts

+ 45 - 8
src/apps/basic-wrapper/index.html
View File 

@@ -12,23 +12,39 @@
 
             }
 
             #app {
 
                 position: absolute;
 
-                left: 100px;
 
+                left: 160px;
 
                 top: 100px;
 
                 width: 600px;
 
                 height: 600px;
 
                 border: 1px solid #ccc;
 
             }
 
+
 
+            #controls {
 
+                position: absolute;
 
+                width: 130px;
 
+                top: 10px;
 
+                left: 10px;
 
+            }
 
+
 
+            #controls > button {
 
+                display: block;
 
+                width: 100%;
 
+            }
 
+
 
+            #controls > hr {
 
+                margin: 5px 0;
 
+            }
 
         </style>
 
         <link rel="stylesheet" type="text/css" href="app.css" />
 
         <script type="text/javascript" src="./index.js"></script>
 
     </head>
 
     <body>
 
-        <button id='spin'>Toggle Spin</button>
 
-        <button id='asym'>Load Asym Unit</button>
 
-        <button id='asm'>Load Assemly 1</button>
 
+        <div id='controls'>
 
+
 
+        </div>
 
         <div id="app"></div>
 
         <script>            
-            var pdbId = '5ire', assemblyId= '1';
 
+            var pdbId = '1grm', assemblyId= '1';
 
             var url = 'https://www.ebi.ac.uk/pdbe/static/entry/' + pdbId + '_updated.cif';
 
             var format = 'cif';
 
 
@@ -40,9 +56,30 @@
 
             BasicMolStarWrapper.load({ url: url, format: format, assemblyId: assemblyId });
 
             BasicMolStarWrapper.toggleSpin();
 
 
-            document.getElementById('spin').onclick = () => BasicMolStarWrapper.toggleSpin();
 
-            document.getElementById('asym').onclick = () => BasicMolStarWrapper.load({ url: url, format: format });
 
-            document.getElementById('asm').onclick = () => BasicMolStarWrapper.load({ url: url, format: format, assemblyId: assemblyId });
 
+            addControl('Toggle Spin', () => BasicMolStarWrapper.toggleSpin());
 
+
 
+            addSeparator();
 
+
 
+            addControl('Load Asym Unit', () => BasicMolStarWrapper.load({ url: url, format: format }));
 
+            addControl('Load Assembly 1', () => BasicMolStarWrapper.load({ url: url, format: format, assemblyId: assemblyId }));
 
+
 
+            addSeparator();
 
+
 
+            addControl('Play Forward', () => BasicMolStarWrapper.animate.modelIndex.forward(8 /** maxFPS */));
 
+            addControl('Stop', () => BasicMolStarWrapper.animate.modelIndex.stop());
 
+            addControl('Play Backward', () => BasicMolStarWrapper.animate.modelIndex.backward(8 /** maxFPS */));
 
+
 
+            function addControl(label, action) {
 
+                var btn = document.createElement('button');
 
+                btn.onclick = action;
 
+                btn.innerText = label;
 
+                document.getElementById('controls').appendChild(btn);
 
+            }
 
+
 
+            function addSeparator() {
 
+                var hr = document.createElement('hr');
 
+                document.getElementById('controls').appendChild(hr);
 
+            }
 
         </script>
 
     </body>
 
 </html>

+ 9 - 0
src/apps/basic-wrapper/index.ts
View File 

@@ -13,6 +13,7 @@ import { StructureRepresentation3DHelpers } from 'mol-plugin/state/transforms/re
 
 import { Color } from 'mol-util/color';
 
 import { StateTreeBuilder } from 'mol-state/tree/builder';
 
 import { PluginStateObject as PSO } from 'mol-plugin/state/objects';
 
+import { AnimateModelIndex } from 'mol-plugin/state/animation/built-in';
 
 require('mol-plugin/skin/light.scss')
 
 
 type SupportedFormats = 'cif' | 'pdb'
 
@@ -98,6 +99,14 @@ class BasicWrapper {
 
         PluginCommands.Canvas3D.SetSettings.dispatch(this.plugin, { settings: { trackball: { ...trackball, spin: !trackball.spin } } });
 
         if (!spinning) PluginCommands.Camera.Reset.dispatch(this.plugin, { });
 
     }
 
+
 
+    animate = {
 
+        modelIndex: {
 
+            forward: (maxFPS = 8) => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, maxFPS | 0), direction: 'forward' }) },
 
+            backward: (maxFPS = 8) => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, maxFPS | 0), direction: 'backward' }) },
 
+            stop: () => this.plugin.state.animation.stop()
 
+        }
 
+    }
 
 }
 
 
 (window as any).BasicMolStarWrapper = new BasicWrapper();

+ 9 - 4
src/mol-plugin/state/animation/built-in.ts
View File 

@@ -14,8 +14,11 @@ import { ParamDefinition } from 'mol-util/param-definition';
 
 export const AnimateModelIndex = PluginStateAnimation.create({
 
     name: 'built-in.animate-model-index',
 
     display: { name: 'Animate Model Index' },
 
-    params: () => ({ maxFPS: ParamDefinition.Numeric(3, { min: 0.5, max: 30, step: 0.5 }) }),
 
-    initialState: () => ({ frame: 1 }),
 
+    params: () => ({
 
+        direction: ParamDefinition.Select('forward', [['forward', 'Forward'], ['backward', 'Backward']]),
 
+        maxFPS: ParamDefinition.Numeric(3, { min: 0.5, max: 30, step: 0.5 })
 
+    }),
 
+    initialState: () => ({ }),
 
     async apply(animState, t, ctx) {
 
         // limit fps
 
         if (t.current > 0 && t.current - t.lastApplied < 1000 / ctx.params.maxFPS) {
 
@@ -28,19 +31,21 @@ export const AnimateModelIndex = PluginStateAnimation.create({
 
 
         const update = state.build();
 
 
+        const dir = ctx.params.direction === 'backward' ? -1 : 1;
 
+
 
         for (const m of models) {
 
             const parent = StateSelection.findAncestorOfType(state.tree, state.cells, m.transform.ref, [PluginStateObject.Molecule.Trajectory]);
 
             if (!parent || !parent.obj) continue;
 
             const traj = parent.obj as PluginStateObject.Molecule.Trajectory;
 
             update.to(m.transform.ref).update(StateTransforms.Model.ModelFromTrajectory,
 
                 old => {
 
-                    let modelIndex = animState.frame % traj.data.length;
 
+                    let modelIndex = (old.modelIndex + dir) % traj.data.length;
 
                     if (modelIndex < 0) modelIndex += traj.data.length;
 
                     return { modelIndex };
 
                 });
 
         }
 
 
         await PluginCommands.State.Update.dispatch(ctx.plugin, { state, tree: update });
 
-        return { kind: 'next', state: { frame: animState.frame + 1 } };
 
+        return { kind: 'next', state: {} };
 
     }
 
 })

+ 12 - 1
src/mol-plugin/state/animation/manager.ts
View File 

@@ -13,6 +13,7 @@ export { PluginAnimationManager }
 
 
 // TODO: pause functionality (this needs to reset if the state tree changes)
 
 // TODO: handle unregistered animations on state restore
 
+// TODO: better API
 
 
 class PluginAnimationManager extends PluginComponent<PluginAnimationManager.State> {
 
     private map = new Map<string, PluginStateAnimation>();
 
@@ -37,7 +38,7 @@ class PluginAnimationManager extends PluginComponent<PluginAnimationManager.Stat
 
     updateParams(newParams: Partial<PluginAnimationManager.State['params']>) {
 
         this.updateState({ params: { ...this.latestState.params, ...newParams } });
 
         const anim = this.map.get(this.latestState.params.current)!;
 
-        const params = anim.params(this.context);
 
+        const params = anim.params(this.context) as PD.Params;
 
         this._current = {
 
             anim,
 
             params,
 
@@ -69,6 +70,16 @@ class PluginAnimationManager extends PluginComponent<PluginAnimationManager.Stat
 
         }
 
     }
 
 
+    play<P>(animation: PluginStateAnimation<P>, params: P) {
 
+        this.stop();
 
+        if (!this.map.has(animation.name)) {
 
+            this.register(animation);
 
+        }
 
+        this.updateParams({ current: animation.name });
 
+        this.updateParams(params);
 
+        this.start();
 
+    }
 
+
 
     start() {
 
         this.updateState({ animationState: 'playing' });
 
         this.triggerUpdate();

+ 6 - 6
src/mol-plugin/state/animation/model.ts
View File 

@@ -12,11 +12,11 @@ export { PluginStateAnimation }
 
 // TODO: helpers for building animations (once more animations are added)
 
 //       for example "composite animation"
 
 
-interface PluginStateAnimation<P extends PD.Params = any, S = any> {
 
+interface PluginStateAnimation<P = any, S = any> {
 
     name: string,
 
     readonly display: { readonly name: string, readonly description?: string },
 
-    params: (ctx: PluginContext) => P,
 
-    initialState(params: PD.Values<P>, ctx: PluginContext): S,
 
+    params: (ctx: PluginContext) => PD.For<P>,
 
+    initialState(params: P, ctx: PluginContext): S,
 
 
     /**
 
      * Apply the current frame and modify the state.
 
@@ -38,12 +38,12 @@ namespace PluginStateAnimation {
 
     }
 
 
     export type ApplyResult<S> = { kind: 'finished' } | { kind: 'skip' } | { kind: 'next', state: S }
 
-    export interface Context<P extends PD.Params> {
 
-        params: PD.Values<P>,
 
+    export interface Context<P> {
 
+        params: P,
 
         plugin: PluginContext
 
     }
 
 
-    export function create<P extends PD.Params, S>(params: PluginStateAnimation<P, S>) {
 
+    export function create<P, S>(params: PluginStateAnimation<P, S>) {
 
         return params;
 
     }
 
 }