Allow rotating ortho view

frontend/javascripts/libs/mjs.ts

@@ -387,6 +387,8 @@ const V3 = {
   prod(a: Vector3) {
     return a[0] * a[1] * a[2];
   },
+
+  multiply: scale3,
 };
 
 const V4 = {

frontend/javascripts/messages.tsx

@@ -22,6 +22,7 @@ export const settings: Partial<Record<keyof RecommendedConfiguration, string>> =
   moveValue: "Move Value (nm/s)",
   newNodeNewTree: "Single-node-tree mode (Soma clicking)",
   centerNewNode: "Auto-center Nodes",
+  applyNodeRotationOnActivation: "Auto-rotate to Nodes",
   highlightCommentedNodes: "Highlight Commented Nodes",
   overrideNodeRadius: "Override Node Radius",
   particleSize: "Particle Size",
@@ -159,7 +160,6 @@ instead. Only enable this option if you understand its effect. All layers will n
     "The current position is outside of the dataset's bounding box. No data will be shown here.",
   "tracing.out_of_task_bounds": "The current position is outside of the task's bounding box.",
   "tracing.copy_position": "Copy position to clipboard",
-  "tracing.copy_rotation": "Copy rotation to clipboard",
   "tracing.copy_sharing_link": "Copy sharing link to clipboard",
   "tracing.tree_length_notification": (treeName: string, lengthInNm: string, lengthInVx: string) =>
     `The tree ${treeName} has a total path length of ${lengthInNm} (${lengthInVx}).`,

frontend/javascripts/test/api/api_skeleton_latest.spec.ts

@@ -5,8 +5,17 @@ import { setTreeGroupsAction } from "viewer/model/actions/skeletontracing_action
 import { userSettings } from "types/schemas/user_settings.schema";
 import Store from "viewer/store";
 import { vi, describe, it, expect, beforeEach } from "vitest";
-import type { Vector3 } from "viewer/constants";
+import { OrthoBaseRotations, OrthoViews, OrthoViewToNumber, type Vector3 } from "viewer/constants";
 import { enforceSkeletonTracing } from "viewer/model/accessors/skeletontracing_accessor";
+import { setViewportAction } from "viewer/model/actions/view_mode_actions";
+import { setRotationAction } from "viewer/model/actions/flycam_actions";
+import * as THREE from "three";
+
+const toRadian = (arr: Vector3): Vector3 => [
+  THREE.MathUtils.degToRad(arr[0]),
+  THREE.MathUtils.degToRad(arr[1]),
+  THREE.MathUtils.degToRad(arr[2]),
+];
 
 // All the mocking is done in the helpers file, so it can be reused for both skeleton and volume API
 describe("API Skeleton", () => {
@@ -299,4 +308,108 @@ describe("API Skeleton", () => {
       true,
     );
   });
+  it<WebknossosTestContext>("should create skeleton nodes with correct properties", ({ api }) => {
+    Store.dispatch(setRotationAction([0, 0, 0]));
+    Store.dispatch(setViewportAction(OrthoViews.PLANE_XY));
+    api.tracing.createNode([10, 10, 10]);
+    const newNode = enforceSkeletonTracing(Store.getState().annotation)
+      .trees.getOrThrow(2)
+      .nodes.getOrThrow(4);
+    const propsToCheck = {
+      untransformedPosition: newNode.untransformedPosition,
+      additionalCoordinates: newNode.additionalCoordinates,
+      rotation: newNode.rotation,
+      viewport: newNode.viewport,
+      mag: newNode.mag,
+    };
+    expect(propsToCheck).toStrictEqual({
+      untransformedPosition: [10, 10, 10],
+      additionalCoordinates: [],
+      rotation: [0, 0, 0],
+      viewport: OrthoViewToNumber[OrthoViews.PLANE_XY],
+      mag: 0,
+    });
+  });
+  it<WebknossosTestContext>("should create skeleton nodes with correct properties", ({ api }) => {
+    Store.dispatch(setRotationAction([0, 0, 0]));
+    Store.dispatch(setViewportAction(OrthoViews.PLANE_YZ));
+    api.tracing.createNode([10, 10, 10]);
+    const newNode = enforceSkeletonTracing(Store.getState().annotation)
+      .trees.getOrThrow(2)
+      .nodes.getOrThrow(4);
+    const propsToCheck = {
+      untransformedPosition: newNode.untransformedPosition,
+      additionalCoordinates: newNode.additionalCoordinates,
+      rotation: newNode.rotation,
+      viewport: newNode.viewport,
+      mag: newNode.mag,
+    };
+    expect(propsToCheck).toStrictEqual({
+      untransformedPosition: [10, 10, 10],
+      additionalCoordinates: [],
+      rotation: [0, 270, 0],
+      viewport: OrthoViewToNumber[OrthoViews.PLANE_YZ],
+      mag: 0,
+    });
+  });
+
+  it<WebknossosTestContext>("should create skeleton nodes with correct properties", ({ api }) => {
+    Store.dispatch(setRotationAction([0, 0, 0]));
+    Store.dispatch(setViewportAction(OrthoViews.PLANE_XZ));
+    api.tracing.createNode([10, 10, 10]);
+    const newNode = enforceSkeletonTracing(Store.getState().annotation)
+      .trees.getOrThrow(2)
+      .nodes.getOrThrow(4);
+    const propsToCheck = {
+      untransformedPosition: newNode.untransformedPosition,
+      additionalCoordinates: newNode.additionalCoordinates,
+      rotation: newNode.rotation,
+      viewport: newNode.viewport,
+      mag: newNode.mag,
+    };
+    expect(propsToCheck).toStrictEqual({
+      untransformedPosition: [10, 10, 10],
+      additionalCoordinates: [],
+      rotation: [90, 0, 0],
+      viewport: OrthoViewToNumber[OrthoViews.PLANE_XZ],
+      mag: 0,
+    });
+  });
+  it<WebknossosTestContext>("should create skeleton nodes with correct rotation when flycam is rotated in XY viewport.", ({
+    api,
+  }) => {
+    const rotation = [20, 90, 10] as Vector3;
+    const rotationQuaternion = new THREE.Quaternion().setFromEuler(
+      new THREE.Euler(...toRadian(rotation), "ZYX"),
+    );
+    Store.dispatch(setRotationAction(rotation));
+    Store.dispatch(setViewportAction(OrthoViews.PLANE_XY));
+    api.tracing.createNode([10, 10, 10]);
+    const newNode = enforceSkeletonTracing(Store.getState().annotation)
+      .trees.getOrThrow(2)
+      .nodes.getOrThrow(4);
+    const newNodeQuaternion = new THREE.Quaternion().setFromEuler(
+      new THREE.Euler(...toRadian(newNode.rotation), "ZYX"),
+    );
+    expect(rotationQuaternion.angleTo(newNodeQuaternion)).toBeLessThan(0.000001);
+  });
+  it<WebknossosTestContext>("should create skeleton nodes with correct rotation when flycam is rotated  in YZ viewport.", ({
+    api,
+  }) => {
+    const rotation = [20, 90, 0] as Vector3;
+    const rotationQuaternion = new THREE.Quaternion()
+      .setFromEuler(new THREE.Euler(...toRadian(rotation), "ZYX"))
+      // Apply viewport's default rotation.
+      .multiply(new THREE.Quaternion().setFromEuler(OrthoBaseRotations[OrthoViews.PLANE_YZ]));
+    Store.dispatch(setRotationAction(rotation));
+    Store.dispatch(setViewportAction(OrthoViews.PLANE_YZ));
+    api.tracing.createNode([10, 10, 10]);
+    const newNode = enforceSkeletonTracing(Store.getState().annotation)
+      .trees.getOrThrow(2)
+      .nodes.getOrThrow(4);
+    const newNodeQuaternion = new THREE.Quaternion().setFromEuler(
+      new THREE.Euler(...toRadian(newNode.rotation), "ZYX"),
+    );
+    expect(rotationQuaternion.angleTo(newNodeQuaternion)).toBeLessThan(0.000001);
+  });
 });

frontend/javascripts/test/controller/url_manager.spec.ts

@@ -12,6 +12,7 @@ import defaultState from "viewer/default_state";
 import update from "immutability-helper";
 import DATASET from "../fixtures/dataset_server_object";
 import _ from "lodash";
+import { FlycamMatrixWithDefaultRotation } from "test/fixtures/flycam_object";
 
 describe("UrlManager", () => {
   it("should replace tracing in url", () => {
@@ -192,7 +193,7 @@ describe("UrlManager", () => {
       additionalCoordinates: [],
       mode,
       zoomStep: 1.3,
-      rotation: [0, 0, 180] as Vector3 as Vector3,
+      rotation: [0, 0, 180] as Vector3,
     };
     const initialState = update(defaultState, {
       temporaryConfiguration: {
@@ -206,10 +207,62 @@ describe("UrlManager", () => {
     expect(UrlManager.parseUrlHash()).toEqual(urlState as Partial<UrlManagerState>);
   });
 
+  it("should support hashes with active node id and without a rotation", () => {
+    location.hash = "#3705,5200,795,0,1.3,15";
+    const urlState = UrlManager.parseUrlHash();
+    expect(urlState).toStrictEqual({
+      position: [3705, 5200, 795],
+      mode: "orthogonal",
+      zoomStep: 1.3,
+      activeNode: 15,
+    });
+  });
+
+  it("should parse an empty rotation", () => {
+    location.hash = "#3584,3584,1024,0,2,0,0,0";
+    const urlState = UrlManager.parseUrlHash();
+    expect(urlState).toStrictEqual({
+      position: [3584, 3584, 1024],
+      mode: "orthogonal",
+      zoomStep: 2,
+      rotation: [0, 0, 0],
+    });
+  });
+
+  it("should parse a rotation and active node id correctly", () => {
+    location.hash = "#3334,3235,999,0,2,282,308,308,11";
+    const urlState = UrlManager.parseUrlHash();
+    expect(urlState).toStrictEqual({
+      position: [3334, 3235, 999],
+      mode: "orthogonal",
+      zoomStep: 2,
+      rotation: [282, 308, 308],
+      activeNode: 11,
+    });
+  });
+
   it("should build default url in csv format", () => {
     UrlManager.initialize();
     const url = UrlManager.buildUrl();
-    expect(url).toBe("#0,0,0,0,1.3");
+    // The default state in the store does not include the rotation of 180 degrees around z axis which is always subtracted from the rotation.
+    // Thus, the rotation of 180 around z is present.
+    expect(url).toBe("#0,0,0,0,1.3,0,0,180");
+  });
+
+  it("should build csv url hash without rotation if it is [0,0,0]", () => {
+    const rotationMatrixWithDefaultRotation = FlycamMatrixWithDefaultRotation;
+    const initialState = update(defaultState, {
+      flycam: {
+        currentMatrix: {
+          $set: rotationMatrixWithDefaultRotation,
+        },
+        rotation: {
+          $set: [0, 0, 0],
+        },
+      },
+    });
+    const hash = `#${UrlManager.buildUrlHashCsv(initialState)}`;
+    expect(hash).toBe("#0,0,0,0,1.3");
   });
 
   it("The dataset name should be correctly extracted from view URLs", () => {

frontend/javascripts/test/fixtures/flycam_object.ts

@@ -0,0 +1,5 @@
+import { M4x4 } from "libs/mjs";
+
+// Apply the default 180 z axis rotation to identity matrix as this is always applied on every flycam per default.
+// This can be useful in tests to get a calculated rotation of [0, 0, 0]. Otherwise it would be  [0, 0, 180].
+export const FlycamMatrixWithDefaultRotation = M4x4.rotate(Math.PI, [0, 0, 1], M4x4.identity(), []);

frontend/javascripts/test/fixtures/volumetracing_object.ts

@@ -2,6 +2,7 @@ import update from "immutability-helper";
 import { AnnotationTool } from "viewer/model/accessors/tool_accessor";
 import Constants from "viewer/constants";
 import defaultState from "viewer/default_state";
+import { FlycamMatrixWithDefaultRotation } from "./flycam_object";
 
 const volumeTracing = {
   type: "volume",
@@ -105,4 +106,11 @@ export const initialState = update(defaultState, {
       },
     },
   },
+  flycam: {
+    currentMatrix: {
+      // Apply the default 180 z axis rotation to get correct result in ortho related tests.
+      // This ensures the calculated flycam rotation is [0, 0, 0]. Otherwise it would be  [0, 0, 180].
+      $set: FlycamMatrixWithDefaultRotation,
+    },
+  },
 });

frontend/javascripts/test/reducers/flycam_reducer.spec.ts

@@ -4,13 +4,14 @@ import { UnitLong, OrthoViews } from "viewer/constants";
 import update from "immutability-helper";
 import {
   getPosition,
-  getRotation,
+  getRotationInDegrees,
   getUp,
   getLeft,
   getZoomedMatrix,
 } from "viewer/model/accessors/flycam_accessor";
 import * as FlycamActions from "viewer/model/actions/flycam_actions";
 import FlycamReducer from "viewer/model/reducers/flycam_reducer";
+import { FlycamMatrixWithDefaultRotation } from "test/fixtures/flycam_object";
 import { describe, it, expect } from "vitest";
 
 function equalWithEpsilon(a: number[], b: number[], epsilon = 1e-10) {
@@ -36,7 +37,9 @@ const initialState = {
   flycam: {
     zoomStep: 2,
     additionalCoordinates: [],
-    currentMatrix: M4x4.identity(),
+    // Apply the default 180 z axis rotation to get correct result in ortho related tests.
+    // This makes the calculated flycam rotation to  [0, 0, 0]. Otherwise it would be  [0, 0, 180].
+    currentMatrix: FlycamMatrixWithDefaultRotation,
     spaceDirectionOrtho: [1, 1, 1],
   },
   temporaryConfiguration: {
@@ -45,35 +48,42 @@ const initialState = {
 };
 
 describe("Flycam", () => {
+  // Removing the default rotation from the matrix to have an easy expected matrix. Else the scaled rotation matrix would be harder to test.
+  const stateWithoutDefaultFlycamRotation = update(initialState, {
+    flycam: { currentMatrix: { $set: M4x4.identity() } },
+  });
   it("should calculate zoomed matrix", () => {
-    expect(Array.from(getZoomedMatrix(initialState.flycam))).toEqual([
+    expect(Array.from(getZoomedMatrix(stateWithoutDefaultFlycamRotation.flycam))).toEqual([
       2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1,
     ]);
   });
 
   it("should move the flycam", () => {
     const moveAction = FlycamActions.moveFlycamAction([1, 2, 3]);
     const newState = FlycamReducer(initialState, moveAction);
-    equalWithEpsilon(getPosition(newState.flycam), [1, 2, 3]);
+    // Due to initial rotation of 180 degree around z axis, x and y values are inverted.
+    equalWithEpsilon(getPosition(newState.flycam), [-1, -2, 3]);
   });
 
   it("should move the flycam backwards", () => {
     const moveAction = FlycamActions.moveFlycamAction([-1, -2, -3]);
     const newState = FlycamReducer(initialState, moveAction);
-    equalWithEpsilon(getPosition(newState.flycam), [-1, -2, -3]);
+    // Due to initial rotation of 180 degree around z axis, x and y values are inverted.
+    equalWithEpsilon(getPosition(newState.flycam), [1, 2, -3]);
   });
 
   it("should move the flycam and move it again", () => {
     const moveAction = FlycamActions.moveFlycamAction([1, 2, 3]);
     let newState = FlycamReducer(initialState, moveAction);
     newState = FlycamReducer(newState, moveAction);
-    equalWithEpsilon(getPosition(newState.flycam), [2, 4, 6]);
+    // Due to initial rotation of 180 degree around z axis, x and y values are inverted.
+    equalWithEpsilon(getPosition(newState.flycam), [-2, -4, 6]);
   });
 
   it("should set the rotation the flycam", () => {
     const rotateAction = FlycamActions.setRotationAction([180, 0, 0]);
     const newState = FlycamReducer(initialState, rotateAction);
-    equalWithEpsilon(getRotation(newState.flycam), [180, 0, 0]);
+    equalWithEpsilon(getRotationInDegrees(newState.flycam), [180, 0, 0]);
     equalWithEpsilon(getUp(newState.flycam), [0, 1, -0]);
     equalWithEpsilon(getLeft(newState.flycam), [-1, 0, 0]);
   });
@@ -100,33 +110,33 @@ describe("Flycam", () => {
     const rotateAction = FlycamActions.rotateFlycamAction(0.5 * Math.PI, [1, 1, 0]);
     const newState = FlycamReducer(initialState, rotateAction);
     equalWithEpsilon(getPosition(newState.flycam), [0, 0, 0]);
-    equalWithEpsilon(V3.floor(getRotation(newState.flycam)), [270, 315, 135]);
+    equalWithEpsilon(V3.floor(getRotationInDegrees(newState.flycam)), [270, 315, 315]);
   });
 
   it("should pitch the flycam", () => {
     const rotateAction = FlycamActions.pitchFlycamAction(0.5 * Math.PI);
     const newState = FlycamReducer(initialState, rotateAction);
     equalWithEpsilon(getPosition(newState.flycam), [0, 0, 0]);
-    equalWithEpsilon(getRotation(newState.flycam), [270, 0, 180]);
+    equalWithEpsilon(getRotationInDegrees(newState.flycam), [270, 0, 0]);
   });
 
   it("should pitch the flycam with spherical cap radius", () => {
     const rotateAction = FlycamActions.pitchFlycamAction(0.5 * Math.PI, true);
     const newState = FlycamReducer(initialState, rotateAction);
-    equalWithEpsilon(getPosition(newState.flycam), [0, -200, -200]);
-    equalWithEpsilon(getRotation(newState.flycam), [270, 0, 180]);
+    equalWithEpsilon(getPosition(newState.flycam), [0, 200, -200]);
+    equalWithEpsilon(getRotationInDegrees(newState.flycam), [270, 0, 0]);
   });
 
   it("should yaw the flycam", () => {
     const rotateAction = FlycamActions.yawFlycamAction(0.5 * Math.PI);
     const newState = FlycamReducer(initialState, rotateAction);
-    equalWithEpsilon(getRotation(newState.flycam), [0, 270, 180]);
+    equalWithEpsilon(getRotationInDegrees(newState.flycam), [180, 270, 180]);
   });
 
   it("should roll the flycam", () => {
     const rotateAction = FlycamActions.rollFlycamAction(0.5 * Math.PI);
     const newState = FlycamReducer(initialState, rotateAction);
-    equalWithEpsilon(getRotation(newState.flycam), [0, 0, 90]);
+    equalWithEpsilon(getRotationInDegrees(newState.flycam), [0, 0, 270]);
   });
 
   it("should move in ortho mode", () => {