Update aspect ratio of 3D viewport when layout changes

CHANGELOG.md

@@ -29,7 +29,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 - Fixed a rendering bug when opening a task that only allowed flight/oblique mode tracing. [#3783](https://github.com/scalableminds/webknossos/pull/3783)
 - Fixed a bug where some NMLs caused the webKnossos tab to freeze during NML upload. [#3758](https://github.com/scalableminds/webknossos/pull/3758)
 - Fixed a bug where some skeleton save requests were wrongly rejected if they were sent more than once. [#3767](https://github.com/scalableminds/webknossos/pull/3767)
-
+- Fixed a bug which caused a wrong aspect ratio in the 3D viewport when changing the layout. [#3817](https://github.com/scalableminds/webknossos/pull/3817)
 
 ## [19.02.0](https://github.com/scalableminds/webknossos/releases/tag/19.02.0) - 2019-02-04
 [Commits](https://github.com/scalableminds/webknossos/compare/19.01.0...19.02.0)

frontend/javascripts/oxalis/controller/camera_controller.js

@@ -8,8 +8,16 @@ import * as THREE from "three";
 import TWEEN from "tween.js";
 import _ from "lodash";
 
-import { getInputCatcherAspectRatio } from "oxalis/model/accessors/view_mode_accessor";
+import {
+  type OrthoView,
+  type OrthoViewMap,
+  type OrthoViewRects,
+  OrthoViewValuesWithoutTDView,
+  OrthoViews,
+  type Vector3,
+} from "oxalis/constants";
 import { getBoundaries } from "oxalis/model/accessors/dataset_accessor";
+import { getInputCatcherAspectRatio } from "oxalis/model/accessors/view_mode_accessor";
 import {
   getPlaneExtentInVoxelFromStore,
   getPosition,
@@ -20,13 +28,6 @@ import { voxelToNm, getBaseVoxel } from "oxalis/model/scaleinfo";
 import Dimensions from "oxalis/model/dimensions";
 import Store, { type CameraData } from "oxalis/store";
 import api from "oxalis/api/internal_api";
-import {
-  type OrthoView,
-  type OrthoViewMap,
-  OrthoViewValuesWithoutTDView,
-  OrthoViews,
-  type Vector3,
-} from "oxalis/constants";
 
 type Props = {
   cameras: OrthoViewMap<THREE.OrthographicCamera>,
@@ -59,7 +60,7 @@ class CameraController extends React.PureComponent<Props> {
 
   // Non-TD-View methods
 
-  updateCamViewport(): void {
+  updateCamViewport(inputCatcherRects?: OrthoViewRects): void {
     const state = Store.getState();
     const { clippingDistance } = state.userConfiguration;
     const scaleFactor = getBaseVoxel(state.dataset.dataSource.scale);
@@ -79,6 +80,25 @@ class CameraController extends React.PureComponent<Props> {
       this.props.cameras[planeId].near = -clippingDistance;
       this.props.cameras[planeId].updateProjectionMatrix();
     }
+
+    if (inputCatcherRects != null) {
+      // Update td camera's aspect ratio
+      const tdCamera = this.props.cameras[OrthoViews.TDView];
+
+      const oldMid = (tdCamera.right + tdCamera.left) / 2;
+      const oldWidth = tdCamera.right - tdCamera.left;
+      const oldHeight = tdCamera.top - tdCamera.bottom;
+
+      const oldAspectRatio = oldWidth / oldHeight;
+      const tdRect = inputCatcherRects[OrthoViews.TDView];
+      const newAspectRatio = tdRect.width / tdRect.height;
+
+      const newWidth = (oldWidth * newAspectRatio) / oldAspectRatio;
+
+      tdCamera.left = oldMid - newWidth / 2;
+      tdCamera.right = oldMid + newWidth / 2;
+      tdCamera.updateProjectionMatrix();
+    }
   }
 
   update(): void {
@@ -105,7 +125,7 @@ class CameraController extends React.PureComponent<Props> {
       ),
       listenToStoreProperty(
         storeState => storeState.viewModeData.plane.inputCatcherRects,
-        () => this.updateCamViewport(),
+        inputCatcherRects => this.updateCamViewport(inputCatcherRects),
       ),
       listenToStoreProperty(
         storeState => storeState.flycam.currentMatrix,

frontend/stylesheets/_variables.less

@@ -4,3 +4,6 @@
 @standardViewportWidth: 380px;
 @mainColor: #2a3a48;
 @action-bar-height: 44px;
+@xyRed: rgb(200, 20, 20);
+@yzBlue: rgb(20, 20, 200);
+@xzGreen: rgb(20, 200, 20);

frontend/stylesheets/trace_view/_tracing_view.less

@@ -29,13 +29,13 @@
   opacity: 0.85;
 
   &.PLANE_XY {
-    border-color: rgb(200, 20, 20);
+    border-color: @xyRed;
   }
   &.PLANE_YZ {
-    border-color: rgb(20, 20, 200);
+    border-color: @yzBlue;
   }
   &.PLANE_XZ {
-    border-color: rgb(20, 200, 20);
+    border-color: @xzGreen;
   }
   &.TDView {
     border-color: white;
@@ -50,15 +50,16 @@
   position: relative;
 }
 #TDViewControls {
-  float: left;
+  text-align: right;
   height: 20px;
   position: absolute;
   top: 0px;
   z-index: 30;
   width: 100%;
 
   .ant-btn {
-    width: 25%;
+    width: 60px;
+    line-height: 26px;
     & > .colored-dot {
       display: inline-block;
       width: 10px;
@@ -67,13 +68,13 @@
       margin-right: 5px;
     }
     &:nth-child(2) .colored-dot {
-      background-color: red;
+      background-color: @xyRed;
     }
     &:nth-child(3) .colored-dot {
-      background-color: blue;
+      background-color: @yzBlue;
     }
     &:nth-child(4) .colored-dot {
-      background-color: #0f0;
+      background-color: @xzGreen;
     }
   }
 }