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

Issue #2: transformation/camera rotation debug

cycle20 2 years ago
parent
9632590068
commit
4b26880c9e
5 changed files with 82 additions and 12 deletions
Unified View Show Diff Stats
  1. 17 10
      src/apps/tm-viewer/index.html
  2. 1 0
      src/apps/tm-viewer/index.ts
  3. 6 1
      src/extensions/tmdet/behavior.ts
  4. 48 0
      src/extensions/tmdet/camera.ts
  5. 10 1
      src/extensions/tmdet/transformation.ts

+ 17 - 10
src/apps/tm-viewer/index.html
View File 

@@ -27,25 +27,27 @@
 
                 padding: 2px;
 
                 padding: 2px;
 
             }
 
             }
 
             #app {
 
             #app {
 
-                position: absolute;
 
-                left: 100px;
 
-                top: 100px;
 
+                max-width: 100%;
 
+                flex: 0 0 100%;
 
+                position: relative;
 
+                left: 2px;
 
+                top: 2px;
 
                 width: 800px;
 
                 width: 800px;
 
                 height: 600px;
 
                 height: 600px;
 
             }
 
             }
 
 
 
             #controls {
 
             #controls {
 
                 position: absolute;
 
                 position: absolute;
 
-                width: 150px;
 
-                bottom: 100px;
 
-                right: 50px;
 
+                top: 2px;
 
+                left: 810px;
 
                 z-index: 10;
 
                 z-index: 10;
 
+                width: 15rem;
 
                 font-family: sans-serif;
 
                 font-family: sans-serif;
 
                 font-size: smaller;
 
                 font-size: smaller;
 
             }
 
             }
 
 
 
             #controls > button {
 
             #controls > button {
 
-                display: block;
 
+                /*display: block;*/
 
                 width: 100%;
 
                 width: 100%;
 
                 text-align: left;
 
                 text-align: left;
 
                 margin: 5px 0px;
 
                 margin: 5px 0px;
 
@@ -59,13 +61,14 @@
 
         <link rel="stylesheet" type="text/css" href="molstar.css" />
 
         <link rel="stylesheet" type="text/css" href="molstar.css" />
 
     </head>
 
     </head>
 
     <body>
 
     <body>
 
-         <div id="controls"></div>
 
         <div id="app"></div>
 
         <div id="app"></div>
 
+        <div id="controls"></div>
 
         <script type="text/javascript" src="./tm_molstar.js"></script>
 
         <script type="text/javascript" src="./tm_molstar.js"></script>
 
         <script type="text/javascript">
 
         <script type="text/javascript">
 
             // init viewer
 
             // init viewer
 
             var viewer = new tm_molstar.Viewer('app', {
 
             var viewer = new tm_molstar.Viewer('app', {
 
                 layoutShowControls: false,
 
                 layoutShowControls: false,
 
+                layoutIsExpanded: false,
 
                 viewportShowExpand: true,
 
                 viewportShowExpand: true,
 
                 collapseLeftPanel: true
 
                 collapseLeftPanel: true
 
             });
 
             });
 
@@ -88,15 +91,19 @@
 
             }
 
             }
 
 
 
             let idList = [
 
             let idList = [
 
-                '1a0s', // PASSED
 
+                '1a0s', // TODO: wrong rotation
 
                 '2atk', // PASSED
 
                 '2atk', // PASSED
 
-                '1afo', // PASSED
 
+                '1afo', // TODO: something is wrong with the rotation
 
                 '1xl4', // PASSED
 
                 '1xl4', // PASSED
 
                 '1xl6', // PASSED
 
                 '1xl6', // PASSED
 
                 '4x8a', // TODO: something is very wrong with membrane planes
 
                 '4x8a', // TODO: something is very wrong with membrane planes
 
                 '6xvf', // TODO: something is very wrong with membrane planes
 
                 '6xvf', // TODO: something is very wrong with membrane planes
 
             ];
 
             ];
 
             idList.forEach((pdbId) => addControl(pdbId, () => load(pdbId)));
 
             idList.forEach((pdbId) => addControl(pdbId, () => load(pdbId)));
 
+            addControl('Reset', () => {
 
+                viewer.plugin.clear();
 
+                tm_molstar.loadInitialSnapshot(viewer.plugin)
 
+            });
 
         </script>
 
         </script>
 
     </body>
 
     </body>
 
 </html>
 
 </html>

+ 1 - 0
src/apps/tm-viewer/index.ts
View File 

@@ -23,6 +23,7 @@ require('mol-plugin-ui/skin/light.scss');
 
 export { PLUGIN_VERSION as version } from '../../mol-plugin/version';
 
 export { PLUGIN_VERSION as version } from '../../mol-plugin/version';
 
 export { setDebugMode, setProductionMode } from '../../mol-util/debug';
 
 export { setDebugMode, setProductionMode } from '../../mol-util/debug';
 
 export { loadWithUNITMPMembraneRepresentation } from '../../extensions/tmdet/behavior';
 
 export { loadWithUNITMPMembraneRepresentation } from '../../extensions/tmdet/behavior';
 
+export { loadInitialSnapshot } from '../../extensions/tmdet/camera';
 
 
 
 const Extensions = {
 
 const Extensions = {
 
     'tmdet-membrane-orientation': PluginSpec.Behavior(TMDETMembraneOrientation)
 
     'tmdet-membrane-orientation': PluginSpec.Behavior(TMDETMembraneOrientation)

+ 6 - 1
src/extensions/tmdet/behavior.ts
View File 

@@ -25,6 +25,8 @@ import { ComponentsType, PDBTMDescriptor, PMS } from './types';
 
 import { registerTmDetSymmetry } from './symmetry';
 
 import { registerTmDetSymmetry } from './symmetry';
 
 import { StripedResidues } from './coloring';
 
 import { StripedResidues } from './coloring';
 
 import { TmDetColorThemeProvider } from './tmdet-color-theme';
 
 import { TmDetColorThemeProvider } from './tmdet-color-theme';
 
+import { storeCameraSnapshot } from './camera';
 
+// import { loadInitialSnapshot, rotateCamera, storeCameraSnapshot } from './camera';
 
 
 
 const Tag = MembraneOrientation.Tag;
 
 const Tag = MembraneOrientation.Tag;
 
 const TMDET_MEMBRANE_ORIENTATION = 'Membrane Orientation';
 
 const TMDET_MEMBRANE_ORIENTATION = 'Membrane Orientation';
 
@@ -112,6 +114,8 @@ export const isTransmembrane = StructureSelectionQuery('Residues Embedded in Mem
 
 export let membraneOrientation: MembraneOrientation;
 
 export let membraneOrientation: MembraneOrientation;
 
 
 
 export async function loadWithUNITMPMembraneRepresentation(plugin: PluginUIContext, params: any) {
 
 export async function loadWithUNITMPMembraneRepresentation(plugin: PluginUIContext, params: any) {
 
+    storeCameraSnapshot(plugin);
 
+
 
     const pdbtmDescriptor = await downloadRegionDescriptor(plugin, params);
 
     const pdbtmDescriptor = await downloadRegionDescriptor(plugin, params);
 
 
 
     membraneOrientation = createMembraneOrientation(pdbtmDescriptor);
 
     membraneOrientation = createMembraneOrientation(pdbtmDescriptor);
 
@@ -121,10 +125,11 @@ export async function loadWithUNITMPMembraneRepresentation(plugin: PluginUIConte
 
     // cartoon, colors etc.
 
     // cartoon, colors etc.
 
     await createStructureRepresentation(plugin, pdbtmDescriptor);
 
     await createStructureRepresentation(plugin, pdbtmDescriptor);
 
 
 
+    //rotateCamera(plugin);
 
     //
 
     //
 
     // reset the camera because the membranes render 1st and the structure might not be fully visible
 
     // reset the camera because the membranes render 1st and the structure might not be fully visible
 
     //
 
     //
 
-    requestAnimationFrame(() => plugin.canvas3d?.requestCameraReset());
 
+    //requestAnimationFrame(() => plugin.canvas3d?.requestCameraReset());
 
 }
 
 }
 
 
 
 async function downloadRegionDescriptor(plugin: PluginUIContext, params: any): Promise<any> {
 
 async function downloadRegionDescriptor(plugin: PluginUIContext, params: any): Promise<any> {

+ 48 - 0
src/extensions/tmdet/camera.ts
View File 

@@ -0,0 +1,48 @@
 
+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';
 
+
 
+let initialSnapshot: Camera.Snapshot;
 
+
 
+export function storeCameraSnapshot(plugin: PluginUIContext): void {
 
+    initialSnapshot = plugin.canvas3d!.camera.getSnapshot();
 
+    console.log('initialSnapshot stored:', initialSnapshot);
 
+}
 
+
 
+export function loadInitialSnapshot(plugin: PluginUIContext): void {
 
+    if (!initialSnapshot) {
 
+        console.log('initialSnapshot is undefined');
 
+    } else {
 
+        console.log('initialSnapshot:', initialSnapshot);
 
+        //PluginCommands.Camera.Reset(plugin, { snapshot: initialSnapshot, durationMs: 10 });
 
+        requestAnimationFrame(() => plugin.canvas3d?.requestCameraReset({ snapshot: initialSnapshot }));
 
+    }
 
+}
 
+
 
+export function rotateCamera(plugin: PluginUIContext): void {
 
+    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);
 
+    }
 
+    function sub(v: Vec3, u: Vec3): Vec3 {
 
+        return Vec3.sub(Vec3(), v, u);
 
+    }
 
+    function add(v: Vec3, u: Vec3): Vec3 {
 
+        return Vec3.add(Vec3(), v, u);
 
+    }
 
+
 
+
 
+    const cam = plugin.canvas3d!.camera;
 
+    const snapshot = cam.getSnapshot();
 
+    const newSnapshot = {
 
+        ...snapshot,
 
+        // target + rotateBy90(postition - target)
 
+        position: add(snapshot.target, rot90q(sub(snapshot.position, snapshot.target))),
 
+        target: snapshot.target,
 
+        up: Vec3.negUnitZ
 
+    };
 
+
 
+    PluginCommands.Camera.Reset(plugin, { snapshot: newSnapshot, durationMs: 1000 });
 
+    //requestAnimationFrame(() => this.plugin.canvas3d?.requestCameraReset({ snapshot: newSnapshot }));
 
+}

+ 10 - 1
src/extensions/tmdet/transformation.ts
View File 

@@ -37,7 +37,6 @@ export async function applyTransformations(ctx: PluginUIContext, pdbtmDescriptor
 
  * @param chainId Id of chain to be selected for transformation
 
  * @param chainId Id of chain to be selected for transformation
 
  */
 
  */
 
  export function chainTransformation(plugin: PluginUIContext, pdbtmDescriptor: PDBTMDescriptor, transformationMatrix: PDBTMTransformationMatrix, chainId: string): void {
 
  export function chainTransformation(plugin: PluginUIContext, pdbtmDescriptor: PDBTMDescriptor, transformationMatrix: PDBTMTransformationMatrix, chainId: string): void {
 
-    // TODO: const color: Color = Color.fromArray([255, 0, 0], 0);
 
     const query: Expression = getChainExpression(chainId);
 
     const query: Expression = getChainExpression(chainId);
 
 
 
     let transformation = transformationForStateTransform(transformationMatrix);
 
     let transformation = transformationForStateTransform(transformationMatrix);
 
@@ -98,6 +97,16 @@ export function createMembraneOrientation(pdbtmDescriptor: PDBTMDescriptor): Mem
 
         // (NOTE: the TMDET extension calculates and sets it during applying preset)
 
         // (NOTE: the TMDET extension calculates and sets it during applying preset)
 
         radius: membrane.radius
 
         radius: membrane.radius
 
     };
 
     };
 
+    // const result: MembraneOrientation = {
 
+    //     planePoint1: membraneNormal,
 
+    //     planePoint2: vneg(membraneNormal),
 
+    //     centroid: Vec3.zero(),
 
+    //     normalVector: membraneNormal,
 
+
 
+    //     // (NOTE: the TMDET extension calculates and sets it during applying preset)
 
+    //     radius: membrane.radius
 
+    // };
 
+
 
     return result;
 
     return result;
 
 }
 
 }