Issue #2: camera movements synchronized by setTimeout calls

src/apps/tm-viewer/index.html

@@ -74,11 +74,13 @@
             });
 
             function load(pdbId) {
-                    viewer.plugin.clear();
-                    tm_molstar.loadWithUNITMPMembraneRepresentation(viewer.plugin, {
+                viewer.plugin.clear();
+                tm_molstar.loadInitialSnapshot(viewer.plugin);
+                setTimeout(() =>
+                tm_molstar.loadWithUNITMPMembraneRepresentation(viewer.plugin, {
                     structureUrl: `https://cs.litemol.org/${pdbId}/full`,
                     regionDescriptorUrl: `http://localhost:8000/build/data/${pdbId}.json`,
-                });
+                }), 100);
             }
 
             function $(id) { return document.getElementById(id); }
@@ -101,8 +103,8 @@
             ];
             idList.forEach((pdbId) => addControl(pdbId, () => load(pdbId)));
             addControl('Reset', () => {
-                viewer.plugin.clear();
                 tm_molstar.loadInitialSnapshot(viewer.plugin)
+                setTimeout(() => viewer.plugin.clear(), 500);
             });
 
             // Debug section

src/extensions/tmdet/behavior.ts

@@ -132,11 +132,10 @@ export async function loadWithUNITMPMembraneRepresentation(plugin: PluginUIConte
     // cartoon, colors etc.
     await createStructureRepresentation(plugin, pdbtmDescriptor);
 
-    rotateCamera(plugin);
     //
-    // reset the camera because the membranes render 1st and the structure might not be fully visible
+    // It also resets the camera because the membranes render 1st and the structure might not be fully visible
     //
-    requestAnimationFrame(() => plugin.canvas3d?.requestCameraReset({ durationMs: 1000 }));
+    rotateCamera(plugin);
 }
 
 async function downloadRegionDescriptor(plugin: PluginUIContext, params: any): Promise<any> {

src/extensions/tmdet/camera.ts

@@ -2,25 +2,30 @@ import { PluginUIContext } from '../../mol-plugin-ui/context';
 import { Quat, Vec3 } from '../../mol-math/linear-algebra';
 import { PluginCommands } from '../../mol-plugin/commands';
 import { Camera } from '../../mol-canvas3d/camera';
+import { DebugUtil } from '../../apps/tm-viewer';
 
 let initialSnapshot: Camera.Snapshot;
 
 export function storeCameraSnapshot(plugin: PluginUIContext): void {
-    initialSnapshot = plugin.canvas3d!.camera.getSnapshot();
-    console.log('initialSnapshot stored:', initialSnapshot);
+    if (!initialSnapshot) {
+        initialSnapshot = plugin.canvas3d!.camera.getSnapshot();
+        DebugUtil.log('initialSnapshot stored:', initialSnapshot);
+    }
 }
 
 export function loadInitialSnapshot(plugin: PluginUIContext): void {
     if (!initialSnapshot) {
-        console.log('initialSnapshot is undefined');
+        DebugUtil.log('initialSnapshot is undefined');
     } else {
-        console.log('initialSnapshot:', initialSnapshot);
-        //PluginCommands.Camera.Reset(plugin, { snapshot: initialSnapshot, durationMs: 10 });
-        requestAnimationFrame(() => plugin.canvas3d?.requestCameraReset({ snapshot: initialSnapshot }));
+        DebugUtil.log('initialSnapshot:', initialSnapshot);
+        PluginCommands.Camera.Reset(plugin, { snapshot: initialSnapshot });
+        DebugUtil.log('before settimeout');
+        setTimeout(() => { DebugUtil.log('in settimeout') }, 2000);
+        DebugUtil.log('after settimeout');
     }
 }
 
-export function rotateCamera(plugin: PluginUIContext) {
+export async function rotateCamera(plugin: PluginUIContext) {
     function rot90q(v: Vec3, axis: Vec3 = Vec3.create(1, 0, 0)): Vec3 {
         const q = Quat.setAxisAngle(Quat(), axis, -Math.PI/2);
         return Vec3.transformQuat(Vec3(), v, q);
@@ -32,7 +37,6 @@ export function rotateCamera(plugin: PluginUIContext) {
         return Vec3.add(Vec3(), v, u);
     }
 
-
     const cam = plugin.canvas3d!.camera;
     const snapshot = cam.getSnapshot();
     const newSnapshot = {
@@ -42,6 +46,14 @@ export function rotateCamera(plugin: PluginUIContext) {
         target: snapshot.target,
         up: Vec3.negUnitZ
     };
+    const duration = 100;
+    PluginCommands.Camera.Reset(plugin, { snapshot: newSnapshot, durationMs: duration }).then(() => {
+        DebugUtil.log('on reset fulfill');
+        setTimeout(()=> {
+            DebugUtil.log('In setTimeout');
+            requestAnimationFrame(() => plugin.canvas3d?.requestCameraReset());
+        }, duration * 1.5);
+        DebugUtil.log('after setTimeout');
+    });
 
-    PluginCommands.Camera.Reset(plugin, { snapshot: newSnapshot, durationMs: 1000 });
 }

src/extensions/tmdet/debug-utils.ts

@@ -8,6 +8,7 @@ import { StateTransforms } from "../../mol-plugin-state/transforms";
 import { PluginUIContext } from "../../mol-plugin-ui/context";
 import { Expression } from "../../mol-script/language/expression";
 import { Color } from "../../mol-util/color";
+import { rotateCamera as RC } from "./camera";
 import { TmDetDescriptorCache } from "./prop";
 import { getChainExpression as GCE, getCurrentHierarchy as GCH, transformationForStateTransform, transformWholeModel } from "./transformation";
 import { PDBTMTransformationMatrix } from "./types";
@@ -153,4 +154,15 @@ export namespace DebugUtil {
         const tmx = TmDetDescriptorCache.get(entityId)?.additional_entry_annotations.membrane.transformation_matrix;
         transformWholeModel(plugin, tmx!);
     }
+
+    //
+    // Camera
+    //
+    export function rotateCamera() {
+        RC(plugin);
+    }
+
+    export function requestCameraReset() {
+        requestAnimationFrame(() => plugin.canvas3d?.requestCameraReset({ durationMs: 1000 }));
+    }
 }