Custom viewports

CHANGELOG.md

@@ -14,6 +14,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 - Added URLs to the tabs in the dashboard. [#3183](https://github.com/scalableminds/webknossos/pull/3183)
 - Improved security by enabling http security headers. [#3084](https://github.com/scalableminds/webknossos/pull/3084)
 - Added the possibility to write markdown in the annotation description. [#3081](https://github.com/scalableminds/webknossos/pull/3081)
+- Added customizable layouting to the tracing view. [#3070](https://github.com/scalableminds/webknossos/pull/3070)
 - Added the brush size to the settings on the left in volume tracing. The size can now also be adjusted by using only the keyboard. [#3126](https://github.com/scalableminds/webknossos/pull/3126)
 - Added a user documentation for webKnossos [#3011](https://github.com/scalableminds/webknossos/pull/3011)
 - Tree groups can now be activated. This allows to rename a tree group analogous to renaming a tree. Also, toggling the visibility of a tree group can now be done by using the shortcuts "1" and "2". [#3066](https://github.com/scalableminds/webknossos/pull/3066)

app/assets/javascripts/admin/help/keyboardshortcut_view.js

@@ -48,7 +48,7 @@ const KeyboardShortcutView = () => {
     },
     {
       keybinding: "K, L",
-      action: "Scale Up/down Viewport Size",
+      action: "Increase/Decrease Size of Layout",
     },
     {
       keybinding: "B, J",

app/assets/javascripts/libs/utils.js

@@ -457,6 +457,18 @@ export function sortArray8(arr: Array<number>): void {
   swap(arr, 3, 4);
 }
 
+export function waitForSelector(selector: string): Promise<*> {
+  const tryToResolve = resolve => {
+    const el = document.querySelector(selector);
+    if (el) {
+      resolve(el);
+    } else {
+      window.requestAnimationFrame(() => tryToResolve(resolve));
+    }
+  };
+  return new Promise(tryToResolve);
+}
+
 export function convertDecToBase256(num: number): Vector4 {
   const divMod = n => [Math.floor(n / 256), n % 256];
   let tmp = num;

app/assets/javascripts/messages.js

@@ -52,6 +52,8 @@ In order to restore the current window, a reload is necessary.`,
   "tracing.tree_viewer_no_cyclic_trees":
     "Cyclic trees are not supported by the abstract tree viewer.",
   "tracing.changed_move_value": "The move value was changed to: ",
+  "tracing.no_viewport_scaling_setting":
+    "Scaling the viewports via k/l is not supported anymore. Instead you can increase the viewport size by dragging the borders between the panes. You can also rearrange the panes by dragging the tabs.",
   "tracing.natural_sorting": "Correctly sort numbers in text (word2 < word10). This may be slow!",
   "tracing.cant_create_node_due_to_active_group":
     "You cannot create nodes, since no tree is active.",

app/assets/javascripts/oxalis/api/api_latest.js

@@ -804,7 +804,7 @@ class UserApi {
     - moveValue3d
     - rotateValue
     - crosshairSize
-    - scaleValue
+    - layoutScaleValue
     - mouseRotateValue
     - clippingDistance
     - clippingDistanceArbitrary

app/assets/javascripts/oxalis/api/api_v2.js

@@ -695,7 +695,7 @@ class UserApi {
     - moveValue3d
     - rotateValue
     - crosshairSize
-    - scaleValue
+    - layoutScaleValue
     - mouseRotateValue
     - clippingDistance
     - clippingDistanceArbitrary

app/assets/javascripts/oxalis/constants.js

@@ -17,6 +17,12 @@ export type BoundingBoxType = {
   min: Vector3,
   max: Vector3,
 };
+export type Rect = {
+  top: number,
+  left: number,
+  width: number,
+  height: number,
+};
 
 export const AnnotationContentTypes = ["skeleton", "volume", "hybrid"];
 export const Vector2Indicies = [0, 1];
@@ -31,8 +37,10 @@ export const OrthoViews = {
   PLANE_XZ: "PLANE_XZ",
   TDView: "TDView",
 };
+export const ArbitraryViewport = "arbitraryViewport";
 export type OrthoViewType = $Keys<typeof OrthoViews>;
 export type OrthoViewMapType<T> = { [key: OrthoViewType]: T };
+export type ViewportType = OrthoViewType | typeof ArbitraryViewport;
 export const OrthoViewValues: Array<OrthoViewType> = Object.keys(OrthoViews);
 export const OrthoViewIndices = {
   PLANE_XY: OrthoViewValues.indexOf("PLANE_XY"),
@@ -133,8 +141,8 @@ const Constants = {
 
   FPS: 50,
 
-  MIN_SCALE: 0.5,
-  MAX_SCALE: 20,
+  MIN_LAYOUT_SCALE: 1,
+  MAX_LAYOUT_SCALE: 5,
 
   MIN_BRUSH_SIZE: 5,
   MAX_BRUSH_SIZE: 5000,

app/assets/javascripts/oxalis/controller.js

@@ -181,12 +181,11 @@ class Controller extends React.PureComponent<Props, State> {
     ));
   }
 
-  scaleTrianglesPlane(delta: number): void {
-    let scale = Store.getState().userConfiguration.scale + delta;
-    scale = Math.min(constants.MAX_SCALE, scale);
-    scale = Math.max(constants.MIN_SCALE, scale);
-
-    Store.dispatch(updateUserSettingAction("scale", scale));
+  setLayoutScale(multiplier: number): void {
+    let scale = Store.getState().userConfiguration.layoutScaleValue + 0.05 * multiplier;
+    scale = Math.min(constants.MAX_LAYOUT_SCALE, scale);
+    scale = Math.max(constants.MIN_LAYOUT_SCALE, scale);
+    Store.dispatch(updateUserSettingAction("layoutScaleValue", scale));
   }
 
   isWebGlSupported() {
@@ -276,16 +275,8 @@ class Controller extends React.PureComponent<Props, State> {
     this.keyboardNoLoop = new InputKeyboardNoLoop(keyboardControls);
 
     this.keyboard = new InputKeyboard({
-      // Scale planes
-      l: timeFactor => {
-        const scaleValue = Store.getState().userConfiguration.scaleValue;
-        this.scaleTrianglesPlane(-scaleValue * timeFactor);
-      },
-
-      k: timeFactor => {
-        const scaleValue = Store.getState().userConfiguration.scaleValue;
-        this.scaleTrianglesPlane(scaleValue * timeFactor);
-      },
+      l: () => this.setLayoutScale(-1),
+      k: () => this.setLayoutScale(1),
     });
   }
 

app/assets/javascripts/oxalis/controller/combinations/skeletontracing_plane_controller.js

@@ -35,6 +35,7 @@ import {
 } from "oxalis/model/accessors/skeletontracing_accessor";
 import type { Point2, Vector3, OrthoViewType, OrthoViewMapType } from "oxalis/constants";
 import api from "oxalis/api/internal_api";
+import { getInputCatcherRect } from "oxalis/model/accessors/view_mode_accessor";
 import { V3 } from "libs/mjs";
 
 const OrthoViewToNumber: OrthoViewMapType<number> = {
@@ -131,12 +132,16 @@ function onClick(
   const pickingScene = new THREE.Scene();
   pickingScene.add(pickingNode);
 
+  let { width, height } = getInputCatcherRect(plane);
+  width = Math.round(width);
+  height = Math.round(height);
+
   const buffer = planeView.renderOrthoViewToTexture(plane, pickingScene);
   // Beware of the fact that new browsers yield float numbers for the mouse position
   const [x, y] = [Math.round(position.x), Math.round(position.y)];
   // compute the index of the pixel under the cursor,
   // while inverting along the y-axis, because OpenGL has its origin bottom-left :/
-  const index = (x + (planeView.curWidth - y) * planeView.curWidth) * 4;
+  const index = (x + (width - y) * height) * 4;
   // the nodeId can be reconstructed by interpreting the RGB values of the pixel as a base-255 number
   const nodeId = buffer.subarray(index, index + 3).reduce((a, b) => a * 255 + b, 0);
   SceneController.skeleton.stopPicking();

app/assets/javascripts/oxalis/controller/combinations/volumetracing_plane_controller.js

@@ -7,6 +7,7 @@ import _ from "lodash";
 import Store from "oxalis/store";
 import * as Utils from "libs/utils";
 import { OrthoViews, VolumeToolEnum, ContourModeEnum } from "oxalis/constants";
+import { getViewportScale } from "oxalis/model/accessors/view_mode_accessor";
 import { calculateGlobalPos } from "oxalis/controller/viewmodes/plane_controller";
 import Model from "oxalis/model";
 import { getPosition, getRequestLogZoomStep } from "oxalis/model/accessors/flycam_accessor";
@@ -33,7 +34,7 @@ import type { OrthoViewType, Point2 } from "oxalis/constants";
 const simulateTracing = async (): Promise<void> => {
   Store.dispatch(setToolAction(VolumeToolEnum.TRACE));
 
-  const controls = getPlaneMouseControls();
+  const controls = getPlaneMouseControls(OrthoViews.PLANE_XY);
   let pos = (x, y) => ({ x, y });
 
   controls.leftMouseDown(pos(100, 100), OrthoViews.PLANE_XY, ({}: any));
@@ -55,7 +56,7 @@ const simulateTracing = async (): Promise<void> => {
   await simulateTracing();
 };
 
-export function getPlaneMouseControls(): * {
+export function getPlaneMouseControls(planeId: OrthoViewType): * {
   return {
     leftDownMove: (delta: Point2, pos: Point2) => {
       const { tracing } = Store.getState();
@@ -65,7 +66,7 @@ export function getPlaneMouseControls(): * {
 
       if (tool === VolumeToolEnum.MOVE) {
         const state = Store.getState();
-        const viewportScale = state.userConfiguration.scale;
+        const viewportScale = getViewportScale(planeId);
         const { activeViewport } = state.viewModeData.plane;
         const v = [(delta.x * -1) / viewportScale, (delta.y * -1) / viewportScale, 0];
         Store.dispatch(movePlaneFlycamOrthoAction(v, activeViewport, true));

app/assets/javascripts/oxalis/controller/renderer.js

@@ -10,6 +10,8 @@ function getRenderer() {
     typeof document !== "undefined" && document.getElementById
       ? new THREE.WebGLRenderer({
           canvas: document.getElementById("render-canvas"),
+          // This prevents flickering when rendering to a buffer instead of the canvas
+          preserveDrawingBuffer: true,
           antialias: true,
         })
       : {};

app/assets/javascripts/oxalis/controller/viewmodes/arbitrary_controller.js

@@ -13,6 +13,7 @@ import * as Utils from "libs/utils";
 import Toast from "libs/toast";
 import type { ModeType, Point2 } from "oxalis/constants";
 import Store from "oxalis/store";
+import { getViewportScale } from "oxalis/model/accessors/view_mode_accessor";
 import Model from "oxalis/model";
 import {
   updateUserSettingAction,
@@ -32,7 +33,7 @@ import ArbitraryPlane from "oxalis/geometries/arbitrary_plane";
 import Crosshair from "oxalis/geometries/crosshair";
 import app from "app";
 import ArbitraryView from "oxalis/view/arbitrary_view";
-import constants from "oxalis/constants";
+import constants, { ArbitraryViewport } from "oxalis/constants";
 import type { Matrix4x4 } from "libs/mjs";
 import {
   yawFlycamAction,
@@ -52,7 +53,7 @@ import { listenToStoreProperty } from "oxalis/model/helpers/listener_helpers";
 import SceneController from "oxalis/controller/scene_controller";
 import api from "oxalis/api/internal_api";
 
-const CANVAS_SELECTOR = "#render-canvas";
+const arbitraryViewportSelector = "#inputcatcher_arbitraryViewport";
 
 type Props = {
   onRender: () => void,
@@ -92,33 +93,33 @@ class ArbitraryController extends React.PureComponent<Props> {
   }
 
   initMouse(): void {
-    this.input.mouse = new InputMouse(CANVAS_SELECTOR, {
-      leftDownMove: (delta: Point2) => {
-        if (this.props.viewMode === constants.MODE_ARBITRARY) {
-          Store.dispatch(
-            yawFlycamAction(delta.x * Store.getState().userConfiguration.mouseRotateValue, true),
-          );
-          Store.dispatch(
-            pitchFlycamAction(
-              delta.y * -1 * Store.getState().userConfiguration.mouseRotateValue,
-              true,
-            ),
-          );
-        } else if (this.props.viewMode === constants.MODE_ARBITRARY_PLANE) {
-          const f =
-            Store.getState().flycam.zoomStep /
-            (this.arbitraryView.width / constants.VIEWPORT_WIDTH);
-          Store.dispatch(moveFlycamAction([delta.x * f, delta.y * f, 0]));
-        }
-      },
-      scroll: this.scroll,
-      pinch: (delta: number) => {
-        if (delta < 0) {
-          Store.dispatch(zoomOutAction());
-        } else {
-          Store.dispatch(zoomInAction());
-        }
-      },
+    Utils.waitForSelector(arbitraryViewportSelector).then(() => {
+      this.input.mouse = new InputMouse(arbitraryViewportSelector, {
+        leftDownMove: (delta: Point2) => {
+          if (this.props.viewMode === constants.MODE_ARBITRARY) {
+            Store.dispatch(
+              yawFlycamAction(delta.x * Store.getState().userConfiguration.mouseRotateValue, true),
+            );
+            Store.dispatch(
+              pitchFlycamAction(
+                delta.y * -1 * Store.getState().userConfiguration.mouseRotateValue,
+                true,
+              ),
+            );
+          } else if (this.props.viewMode === constants.MODE_ARBITRARY_PLANE) {
+            const f = Store.getState().flycam.zoomStep / getViewportScale(ArbitraryViewport);
+            Store.dispatch(moveFlycamAction([delta.x * f, delta.y * f, 0]));
+          }
+        },
+        scroll: this.scroll,
+        pinch: (delta: number) => {
+          if (delta < 0) {
+            Store.dispatch(zoomOutAction());
+          } else {
+            Store.dispatch(zoomInAction());
+          }
+        },
+      });
     });
   }
 
@@ -290,7 +291,7 @@ class ArbitraryController extends React.PureComponent<Props> {
           this.setClippingDistance(clippingDistanceArbitrary);
           this.crosshair.setScale(crosshairSize);
           this.crosshair.setVisibility(displayCrosshair);
-          this.arbitraryView.resize();
+          this.arbitraryView.resizeThrottled();
         },
       ),
       listenToStoreProperty(