scalableminds
diff --git a/‎docs/ui/keyboard_shortcuts.md
Lines changed: 22 additions & 21 deletions b/‎docs/ui/keyboard_shortcuts.md
Lines changed: 22 additions & 21 deletions
diff --git a/‎frontend/javascripts/libs/mjs.ts
Lines changed: 2 additions & 0 deletions b/‎frontend/javascripts/libs/mjs.ts
Lines changed: 2 additions & 0 deletions
diff --git a/‎frontend/javascripts/messages.tsx
Lines changed: 1 addition & 1 deletion b/‎frontend/javascripts/messages.tsx
Lines changed: 1 addition & 1 deletion
diff --git a/‎frontend/javascripts/test/api/api_skeleton_latest.spec.ts
Lines changed: 107 additions & 1 deletion b/‎frontend/javascripts/test/api/api_skeleton_latest.spec.ts
Lines changed: 107 additions & 1 deletion
diff --git a/‎frontend/javascripts/test/controller/url_manager.spec.ts
Lines changed: 55 additions & 2 deletions b/‎frontend/javascripts/test/controller/url_manager.spec.ts
Lines changed: 55 additions & 2 deletions
diff --git a/‎frontend/javascripts/test/fixtures/flycam_object.ts
Lines changed: 5 additions & 0 deletions b/‎frontend/javascripts/test/fixtures/flycam_object.ts
Lines changed: 5 additions & 0 deletions
diff --git a/‎frontend/javascripts/test/fixtures/test_rotations.ts
Lines changed: 16 additions & 0 deletions b/‎frontend/javascripts/test/fixtures/test_rotations.ts
Lines changed: 16 additions & 0 deletions
diff --git a/‎frontend/javascripts/test/fixtures/volumetracing_object.ts
Lines changed: 8 additions & 0 deletions b/‎frontend/javascripts/test/fixtures/volumetracing_object.ts
Lines changed: 8 additions & 0 deletions
diff --git a/‎frontend/javascripts/test/libs/transform_spec_helpers.ts
Lines changed: 4 additions & 3 deletions b/‎frontend/javascripts/test/libs/transform_spec_helpers.ts
Lines changed: 4 additions & 3 deletions
@@ -40,27 +40,28 @@ A complete listing of all available keyboard & mouse shortcuts for WEBKNOSSOS ca
 
 Note that skeleton-specific mouse actions are usually only available when the skeleton tool is active.
 
-| Key Binding                               | Operation                                   |
-| --------------------------------------------- | ------------------------------------------- |
-| Left Mouse Drag or Arrow Keys                 | Move In-Plane                               |
-| ++alt++ + Mouse Move                          | Move In-Plane                               |
-| ++space++                                     | Move Forward                                |
-| Scroll Mousewheel (3D View)                   | Zoom In And Out                             |
-| Right-Click Drag (3D View)                    | Rotate 3D View                              |
-| Left Click                                    | Create New Node                             |
-| Left Click                                    | Select Node (Mark as Active Node) under cursor  |
-| Left Drag                                     | Move node under cursor                      |
-| Right Click (on node)                         | Bring up the context-menu with further actions  |
-| ++shift++ + ++alt++ + Left Click              | Merge Two Nodes and Combine Trees           |
-| ++shift++ + ++ctrl++ / ++cmd++ + Left Click   | Delete Edge / Split Trees                   |
-| ++c++                                         | Create New Tree                             |
-| ++ctrl++ / ++cmd++ + ++period++               | Navigate to the next Node (Mark as Active)  |
-| ++ctrl++ / ++cmd++ + ++comma++                | Navigate to previous Node (Mark as Active)  |
-| ++ctrl++ / ++cmd++ + Left Click or ++ctrl++ / ++cmd++ + Arrow Keys | Move the Active Node                        |
-| ++del++                                       | Delete Node / Split Trees                   |
-| ++b++                                         | Mark Node as New Branchpoint                |
-| ++j++                                         | Jump To Last Branchpoint                    |
-| ++s++                                         | Center Camera on Active Node                |
+| Key Binding                                                                                                                      | Operation                                         |
+| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- |
+| Left Mouse Drag or Arrow Keys                                                                                                    | Move In-Plane                                     |
+| ++alt++ + Mouse Move                                                                                                             | Move In-Plane                                     |
+| ++space++                                                                                                                        | Move Forward                                      |
+| ++shift++ + ++up++ / ++down++ / ++left++ / ++right++<br>++alt++ + ++left++ / ++right++                                           | Rotate Planes                                     |
+| ++ctrl++ / ++cmd++ + ++shift++ + ++up++ / ++down++ / ++left++ / ++right++<br>++ctrl++ / ++cmd++ + ++alt++ + ++left++ / ++right++ | Rotate Planes by 90°                              |
+| Right-Click Drag (3D View)                                                                                                       | Rotate 3D View                                    |
+| Left Click                                                                                                                       | Create New Node                                   |
+| Left Click                                                                                                                       | Select Node (Mark as Active Node) under cursor    |
+| Left Drag                                                                                                                        | Move node under cursor                            |
+| Right Click (on node)                                                                                                            | Bring up the context-menu with further actions    |
+| ++shift++ + ++alt++ + Left Click                                                                                                 | Merge Two Nodes and Combine Trees                 |
+| ++shift++ + ++ctrl++ / ++cmd++ + Left Click                                                                                      | Delete Edge / Split Trees                         |
+| ++c++                                                                                                                            | Create New Tree                                   |
+| ++ctrl++ / ++cmd++ + ++period++                                                                                                  | Navigate to the next Node (Mark as Active)        |
+| ++ctrl++ / ++cmd++ + ++comma++                                                                                                   | Navigate to previous Node (Mark as Active)        |
+| ++ctrl++ / ++cmd++ + Left Click or ++ctrl++ / ++cmd++ + Arrow Keys                                                               | Move the Active Node                              |
+| ++del++                                                                                                                          | Delete Node / Split Trees                         |
+| ++b++                                                                                                                            | Mark Node as New Branchpoint                      |
+| ++j++                                                                                                                            | Jump To Last Branchpoint                          |
+| ++s++                                                                                                                            | Center Camera on Active Node                      |
 
 
 Note that you can enable *Classic Controls* which will behave slightly different and more explicit for the mouse actions:
 
@@ -387,6 +387,8 @@ const V3 = {
   prod(a: Vector3) {
     return a[0] * a[1] * a[2];
   },
+
+  multiply: scale3,
 };
 
 const V4 = {
 
@@ -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}).`,
 
@@ -5,8 +5,42 @@ 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,
+  OrthoViewToNumber,
+  OrthoViewValuesWithoutTDView,
+  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";
+import {
+  eulerAngleToReducerInternalMatrix,
+  reducerInternalMatrixToEulerAngle,
+} from "viewer/model/helpers/rotation_helpers";
+import testRotations from "test/fixtures/test_rotations";
+import { map3 } from "libs/utils";
+
+const toRadian = (arr: Vector3): Vector3 => [
+  THREE.MathUtils.degToRad(arr[0]),
+  THREE.MathUtils.degToRad(arr[1]),
+  THREE.MathUtils.degToRad(arr[2]),
+];
+
+function applyRotationInFlycamReducerSpace(
+  flycamRotationInRadian: Vector3,
+  rotationToApply: THREE.Euler,
+): Vector3 {
+  // eulerAngleToReducerInternalMatrix and reducerInternalMatrixToEulerAngle are tested in rotation_helpers.spec.ts.
+  // Calculate expected rotation and make it a quaternion for equal comparison.
+  const rotationMatrix = eulerAngleToReducerInternalMatrix(flycamRotationInRadian);
+  const rotationMatrixWithViewport = rotationMatrix.multiply(
+    new THREE.Matrix4().makeRotationFromEuler(rotationToApply),
+  );
+  const resultingAngle = reducerInternalMatrixToEulerAngle(rotationMatrixWithViewport);
+  return resultingAngle;
+}
 
 describe("API Skeleton", () => {
   beforeEach<WebknossosTestContext>(async (context) => {
@@ -298,4 +332,76 @@ describe("API Skeleton", () => {
       true,
     );
   });
+
+  it<WebknossosTestContext>("should create skeleton nodes with correct properties.", ({ api }) => {
+    const flycamRotation = [0, 0, 0] as Vector3;
+    for (const planeId of OrthoViewValuesWithoutTDView) {
+      const rotationForComparison = applyRotationInFlycamReducerSpace(
+        flycamRotation,
+        OrthoBaseRotations[planeId],
+      );
+      const rotationQuaternion = new THREE.Quaternion().setFromEuler(
+        new THREE.Euler(...rotationForComparison),
+      );
+      Store.dispatch(setRotationAction(flycamRotation));
+      Store.dispatch(setViewportAction(planeId));
+      api.tracing.createNode([10, 10, 10], { activate: true });
+      const skeletonTracing = enforceSkeletonTracing(Store.getState().annotation);
+      // Throw error if no node / tree is active by passing -1 as id.
+      const newNode = skeletonTracing.trees
+        .getOrThrow(skeletonTracing.activeTreeId || -1)
+        .nodes.getOrThrow(skeletonTracing.activeNodeId || -1);
+      const propsToCheck = {
+        untransformedPosition: newNode.untransformedPosition,
+        additionalCoordinates: newNode.additionalCoordinates,
+        viewport: newNode.viewport,
+        mag: newNode.mag,
+      };
+      expect(propsToCheck).toStrictEqual({
+        untransformedPosition: [10, 10, 10],
+        additionalCoordinates: [],
+        viewport: OrthoViewToNumber[planeId],
+        mag: 0,
+      });
+      const newNodeQuaternion = new THREE.Quaternion().setFromEuler(
+        new THREE.Euler(...toRadian(newNode.rotation)),
+      );
+      expect(
+        rotationQuaternion.angleTo(newNodeQuaternion),
+        `Node rotation ${newNode.rotation} is not nearly equal to ${map3(THREE.MathUtils.radToDeg, rotationForComparison)} in viewport ${planeId}.`,
+      ).toBeLessThan(0.000001);
+    }
+  });
+  it<WebknossosTestContext>("should create skeleton nodes with correct rotation when flycam is rotated in all three viewports.", ({
+    api,
+  }) => {
+    for (const testRotation of testRotations) {
+      for (const planeId of OrthoViewValuesWithoutTDView) {
+        const rotationInRadian = toRadian(testRotation);
+        const resultingAngle = applyRotationInFlycamReducerSpace(
+          rotationInRadian,
+          OrthoBaseRotations[planeId],
+        );
+        const rotationQuaternion = new THREE.Quaternion().setFromEuler(
+          new THREE.Euler(...resultingAngle),
+        );
+        // Test node creation.
+        Store.dispatch(setRotationAction(testRotation));
+        Store.dispatch(setViewportAction(planeId));
+        api.tracing.createNode([10, 10, 10], { activate: true });
+        const skeletonTracing = enforceSkeletonTracing(Store.getState().annotation);
+        // Throw error if no node / tree is active by passing -1 as id.
+        const newNode = skeletonTracing.trees
+          .getOrThrow(skeletonTracing.activeTreeId || -1)
+          .nodes.getOrThrow(skeletonTracing.activeNodeId || -1);
+        const newNodeQuaternion = new THREE.Quaternion().setFromEuler(
+          new THREE.Euler(...toRadian(newNode.rotation)),
+        );
+        expect(
+          rotationQuaternion.angleTo(newNodeQuaternion),
+          `Node rotation ${newNode.rotation} is not nearly equal to ${map3(THREE.MathUtils.radToDeg, resultingAngle)} in viewport ${planeId}.`,
+        ).toBeLessThan(0.000001);
+      }
+    }
+  });
 });
@@ -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", () => {
 
@@ -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(), []);
@@ -0,0 +1,16 @@
+import type { Vector3 } from "viewer/constants";
+
+const testRotations: Vector3[] = [
+  [0, 0, 0],
+  [83, 0, 0],
+  [10, 10, 10],
+  [90, 160, 90],
+  [30, 90, 40],
+  [90, 90, 90],
+  [180, 180, 180],
+  [30, 30, 30],
+  [90, 90, 188],
+  [333, 222, 111],
+  [73, 400, 666],
+];
+export default testRotations;
@@ -1,6 +1,7 @@
 import update from "immutability-helper";
 import Constants from "viewer/constants";
 import defaultState from "viewer/default_state";
+import { FlycamMatrixWithDefaultRotation } from "./flycam_object";
 import { combinedReducer } from "viewer/store";
 import { setDatasetAction } from "viewer/model/actions/dataset_actions";
 import { convertFrontendBoundingBoxToServer } from "viewer/model/reducers/reducer_helpers";
@@ -110,6 +111,13 @@ const stateWithoutDatasetInitialization = 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,
+    },
+  },
 });
 
 export const initialState = combinedReducer(
 
@@ -6,14 +6,15 @@ export function almostEqual(
   vec1: Vector3,
   vec2: Vector3,
   threshold: number = 1,
+  message?: string,
 ) {
   const diffX = Math.abs(vec1[0] - vec2[0]);
   const diffY = Math.abs(vec1[1] - vec2[1]);
   const diffZ = Math.abs(vec1[2] - vec2[2]);
 
-  expect(diffX).toBeLessThan(threshold);
-  expect(diffY).toBeLessThan(threshold);
-  expect(diffZ).toBeLessThan(threshold);
+  expect(diffX, message).toBeLessThan(threshold);
+  expect(diffY, message).toBeLessThan(threshold);
+  expect(diffZ, message).toBeLessThan(threshold);
 }
 
 export function getPointsC555() {