allow to continously place skeleton nodes like in a draw tool

Author: philippotto

frontend/javascripts/oxalis/controller/combinations/tool_controls.ts

@@ -240,6 +240,7 @@ export class SkeletonTool {
     };
 
     let draggingNodeId: number | null | undefined = null;
+    let lastContinouslyPlacedNodeTimestamp: number | null = null;
     let didDragNode: boolean = false;
     return {
       leftMouseDown: (pos: Point2, plane: OrthoView, _event: MouseEvent, isTouch: boolean) => {
@@ -266,21 +267,39 @@ export class SkeletonTool {
       },
       leftDownMove: (
         delta: Point2,
-        _pos: Point2,
-        _id: string | null | undefined,
+        pos: Point2,
+        plane: string | null | undefined,
         event: MouseEvent,
       ) => {
-        const { annotation } = Store.getState();
+        const { annotation, userConfiguration } = Store.getState();
         const { useLegacyBindings } = Store.getState().userConfiguration;
 
-        if (
-          annotation.skeleton != null &&
-          (draggingNodeId != null || (useLegacyBindings && (event.ctrlKey || event.metaKey)))
-        ) {
-          didDragNode = true;
-          SkeletonHandlers.moveNode(delta.x, delta.y, draggingNodeId, true);
+        const { continuousNodeCreation } = userConfiguration;
+
+        if (continuousNodeCreation) {
+          if (
+            lastContinouslyPlacedNodeTimestamp &&
+            Date.now() - lastContinouslyPlacedNodeTimestamp < 200
+          ) {
+            return;
+          }
+          lastContinouslyPlacedNodeTimestamp = Date.now();
+
+          if (plane) {
+            const globalPosition = calculateGlobalPos(Store.getState(), pos);
+            // SkeletonHandlers.handleCreateNodeFromEvent(pos, false);
+            api.tracing.createNode(globalPosition, { center: false });
+          }
         } else {
-          MoveHandlers.handleMovePlane(delta);
+          if (
+            annotation.skeleton != null &&
+            (draggingNodeId != null || (useLegacyBindings && (event.ctrlKey || event.metaKey)))
+          ) {
+            didDragNode = true;
+            SkeletonHandlers.moveNode(delta.x, delta.y, draggingNodeId, true);
+          } else {
+            MoveHandlers.handleMovePlane(delta);
+          }
         }
       },
       leftClick: (pos: Point2, plane: OrthoView, event: MouseEvent, isTouch: boolean) => {

frontend/javascripts/oxalis/controller/scene_controller.ts

@@ -78,7 +78,7 @@ THREE.BatchedMesh.prototype.raycast = acceleratedRaycast;
 
 type EigenData = { eigenvalue: number; vector: number[] };
 
-function createPointCloud(points: Vector3[], color: string) {
+function _createPointCloud(points: Vector3[], color: string) {
   // Convert points to Three.js geometry
   const geometry = new THREE.BufferGeometry();
   const vertices = new Float32Array(_.flatten(points));

frontend/javascripts/oxalis/default_state.ts

@@ -71,6 +71,7 @@ const defaultState: OxalisState = {
     moveValue3d: 300,
     moveValue: 300,
     newNodeNewTree: false,
+    continuousNodeCreation: false,
     centerNewNode: true,
     overrideNodeRadius: true,
     particleSize: 5,

frontend/javascripts/oxalis/model/bucket_data_handling/data_cube.ts

@@ -1052,14 +1052,14 @@ window.test = (point: Vector3) => {
   // )
 };
 
-let rayHelper;
 // Function to check intersection
-function checkLineIntersection(geometry, _pointA: Vector3, _pointB: Vector3) {
+function checkLineIntersection(geometry: THREE.BufferGeometry, _pointA: Vector3, _pointB: Vector3) {
   // Create BVH from geometry if not already built
   if (!geometry.boundsTree) {
     geometry.computeBoundsTree();
   }
-  const mul = (vec) => [11.24 * vec[0], 11.24 * vec[1], 28 * vec[2]];
+  const scale = Store.getState().dataset.dataSource.scale.factor;
+  const mul = (vec: Vector3) => [scale[0] * vec[0], scale[1] * vec[1], scale[2] * vec[2]];
   // geometry.boundsTree = undefined;
   const pointA = new THREE.Vector3(...mul(_pointA));
   const pointB = new THREE.Vector3(...mul(_pointB));
@@ -1075,17 +1075,10 @@ function checkLineIntersection(geometry, _pointA: Vector3, _pointB: Vector3) {
   raycaster.far = pointA.distanceTo(pointB); // Limit to segment length
   raycaster.firstHitOnly = true;
 
-  // if (rayHelper != null) {
-  //   window.rootGroup.remove(rayHelper);
-  // }
-
-  // rayHelper = new THREE.ArrowHelper(ray.direction, ray.origin, raycaster.far, 0xff0000);
-  // window.rootGroup.add(rayHelper);
-
   const intersects = raycaster.intersectObject(window.bentMesh, true);
   const retval = intersects.length > 0; // Returns true if an intersection is found
 
   return retval;
 }
 
-window.checkLineIntersection = checkLineIntersection;
+// window.checkLineIntersection = checkLineIntersection;

frontend/javascripts/oxalis/model/sagas/mesh_saga.ts

@@ -7,7 +7,7 @@ import { areVec3AlmostEqual, chunkDynamically, sleep } from "libs/utils";
 import _ from "lodash";
 import type { ActionPattern } from "redux-saga/effects";
 import type { APIDataset, APIMeshFile, APISegmentationLayer } from "types/api_flow_types";
-
+import type * as THREE from "three";
 import {
   computeAdHocMesh,
   getBucketPositionsForAdHocMesh,

frontend/javascripts/oxalis/store.ts

@@ -390,6 +390,7 @@ export type UserConfiguration = {
   readonly moveValue3d: number;
   readonly moveValue: number;
   readonly newNodeNewTree: boolean;
+  readonly continuousNodeCreation: boolean;
   readonly centerNewNode: boolean;
   readonly overrideNodeRadius: boolean;
   readonly particleSize: number;

frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx

@@ -391,6 +391,12 @@ function SkeletonSpecificButtons() {
   const isNewNodeNewTreeModeOn = useSelector(
     (state: OxalisState) => state.userConfiguration.newNodeNewTree,
   );
+  const isContinuousNodeCreationEnabled = useSelector(
+    (state: OxalisState) => state.userConfiguration.continuousNodeCreation,
+  );
+  const toggleContinuousNodeCreation = () =>
+    dispatch(updateUserSettingAction("continuousNodeCreation", !isContinuousNodeCreationEnabled));
+
   const dataset = useSelector((state: OxalisState) => state.dataset);
   const isUserAdminOrManager = useIsActiveUserAdminOrManager();
 
@@ -455,6 +461,15 @@ function SkeletonSpecificButtons() {
           alt="Merger Mode"
         />
       </ToggleButton>
+      <ToggleButton
+        active={isContinuousNodeCreationEnabled}
+        onClick={toggleContinuousNodeCreation}
+        style={NARROW_BUTTON_STYLE}
+        title="When activated, clicking and dragging creates nodes like a drawing tool."
+      >
+        <i className="fas fa-pen" />
+      </ToggleButton>
+
       {isMergerModeEnabled && isMaterializeVolumeAnnotationEnabled && isUserAdminOrManager && (
         <ButtonComponent
           style={NARROW_BUTTON_STYLE}