Add bounding box tool

frontend/javascripts/oxalis/constants.js

@@ -157,6 +157,7 @@ export const AnnotationToolEnum = {
   ERASE_TRACE: "ERASE_TRACE",
   FILL_CELL: "FILL_CELL",
   PICK_CELL: "PICK_CELL",
+  BOUNDING_BOX: "BOUNDING_BOX",
 };
 export const VolumeTools = [
   AnnotationToolEnum.BRUSH,
@@ -232,7 +233,14 @@ export type LabeledVoxelsMap = Map<Vector4, Uint8Array>;
 // e.g., z in XY viewport).
 export type LabelMasksByBucketAndW = Map<Vector4, Map<number, Uint8Array>>;
 
-export type ShowContextMenuFunction = (number, number, ?number, Vector3, OrthoView) => void;
+export type ShowContextMenuFunction = (
+  number,
+  number,
+  ?number,
+  ?number,
+  Vector3,
+  OrthoView,
+) => void;
 
 const Constants = {
   ARBITRARY_VIEW: 4,

frontend/javascripts/oxalis/controller/combinations/bounding_box_handlers.js

@@ -0,0 +1,247 @@
+// @flow
+import { calculateGlobalPos } from "oxalis/model/accessors/view_mode_accessor";
+import _ from "lodash";
+import { type OrthoView, type Point2, type Vector3 } from "oxalis/constants";
+import Store from "oxalis/store";
+import { getSomeTracing } from "oxalis/model/accessors/tracing_accessor";
+import Dimension from "oxalis/model/dimensions";
+import { setUserBoundingBoxBoundsAction } from "oxalis/model/actions/annotation_actions";
+import { getBaseVoxelFactors } from "oxalis/model/scaleinfo";
+
+const getNeighbourEdgeIndexByEdgeIndex = {
+  // TODO: Use this to detect corners properly.
+  // The edges are indexed within the plane like this:
+  // See the distanceArray calculation as a reference.
+  //  +---0---+
+  //  |       |
+  //  2       3
+  //  |       |
+  //  +---1---+
+  //
+  "0": [2, 3],
+  "1": [2, 3],
+  "2": [0, 1],
+  "3": [0, 1],
+};
+const MAX_DISTANCE_TO_SELECTION = 15;
+
+function getDistanceToBoundingBoxEdge(
+  pos: Vector3,
+  min: Vector3,
+  max: Vector3,
+  compareToMin: boolean,
+  edgeDim: number,
+  otherDim: number,
+  planeRatio: Vector3,
+) {
+  // There are four cases how the distance to an edge needs to be calculated.
+  // Here are all cases visualized via a number that are referenced below:
+  // Note that this is the perspective of the rendered bounding box cross section.
+  // ---> x
+  // |  1                  1
+  // ↓    '.             .'
+  // y      ↘          ↙
+  //          +-------+
+  //          |       |
+  //    3 --> |       | <-- 3
+  //          |       |
+  //          +-------+
+  //        ↗           ↖
+  //      .'             '.
+  //     2                 2
+  //
+  // This example is for the xy viewport for x as the main direction / edgeDim.
+
+  // As the planeRatio is multiplied to the global coordinates passed to this method,
+  // the distance between the mouse and the bounding box is distorted by the factor of planeRatio.
+  // That's why we later divide exactly by this factor to let the hit box / distance
+  // between the mouse and bounding box be the same in each dimension.
+  const cornerToCompareWith = compareToMin ? min : max;
+  if (pos[edgeDim] < min[edgeDim]) {
+    // Case 1: Distance to the min corner is needed in edgeDim.
+    return (
+      Math.sqrt(
+        Math.abs(pos[edgeDim] - min[edgeDim]) ** 2 +
+          Math.abs(pos[otherDim] - cornerToCompareWith[otherDim]) ** 2,
+      ) / planeRatio[edgeDim]
+    );
+  }
+  if (pos[edgeDim] > max[edgeDim]) {
+    // Case 2: Distance to max Corner is needed in edgeDim.
+    return (
+      Math.sqrt(
+        Math.abs(pos[edgeDim] - max[edgeDim]) ** 2 +
+          Math.abs(pos[otherDim] - cornerToCompareWith[otherDim]) ** 2,
+      ) / planeRatio[edgeDim]
+    );
+  }
+  // Case 3:
+  // If the position is within the bounds of the edgeDim, the shortest distance
+  // to the edge is simply the difference between the otherDim values.
+  return Math.abs(pos[otherDim] - cornerToCompareWith[otherDim]) / planeRatio[edgeDim];
+}
+
+export type SelectedEdge = {
+  boxId: number,
+  direction: "horizontal" | "vertical",
+  isMaxEdge: boolean,
+  edgeId: number,
+  resizableDimension: 0 | 1 | 2,
+};
+
+export function getClosestHoveredBoundingBox(
+  pos: Point2,
+  plane: OrthoView,
+): [SelectedEdge, ?SelectedEdge] | null {
+  const state = Store.getState();
+  const globalPosition = calculateGlobalPos(state, pos, plane);
+  const { userBoundingBoxes } = getSomeTracing(state.tracing);
+  const reorderedIndices = Dimension.getIndices(plane);
+  const planeRatio = getBaseVoxelFactors(state.dataset.dataSource.scale);
+  const thirdDim = reorderedIndices[2];
+
+  const zoomedMaxDistanceToSelection = MAX_DISTANCE_TO_SELECTION * state.flycam.zoomStep;
+  let currentNearestDistance = zoomedMaxDistanceToSelection;
+  let currentNearestBoundingBox = null;
+  let currentNearestDistanceArray = null;
+
+  for (const bbox of userBoundingBoxes) {
+    const { min, max } = bbox.boundingBox;
+    const isCrossSectionOfViewportVisible =
+      globalPosition[thirdDim] >= min[thirdDim] && globalPosition[thirdDim] < max[thirdDim];
+    if (!isCrossSectionOfViewportVisible) {
+      continue;
+    }
+    // In getNeighbourEdgeIndexByEdgeIndex is a visualization
+    // of how the indices of the array map to the visible bbox edges.
+    const distanceArray = [
+      getDistanceToBoundingBoxEdge(
+        globalPosition,
+        min,
+        max,
+        true,
+        reorderedIndices[0],
+        reorderedIndices[1],
+        planeRatio,
+      ),
+      getDistanceToBoundingBoxEdge(
+        globalPosition,
+        min,
+        max,
+        false,
+        reorderedIndices[0],
+        reorderedIndices[1],
+        planeRatio,
+      ),
+      getDistanceToBoundingBoxEdge(
+        globalPosition,
+        min,
+        max,
+        true,
+        reorderedIndices[1],
+        reorderedIndices[0],
+        planeRatio,
+      ),
+      getDistanceToBoundingBoxEdge(
+        globalPosition,
+        min,
+        max,
+        false,
+        reorderedIndices[1],
+        reorderedIndices[0],
+        planeRatio,
+      ),
+    ];
+    const minimumDistance = Math.min(...distanceArray);
+    if (minimumDistance < currentNearestDistance) {
+      currentNearestDistance = minimumDistance;
+      currentNearestBoundingBox = bbox;
+      currentNearestDistanceArray = distanceArray;
+    }
+  }
+  if (currentNearestBoundingBox == null || currentNearestDistanceArray == null) {
+    return null;
+  }
+  const nearestBoundingBox = currentNearestBoundingBox;
+  const getEdgeInfoFromId = (edgeId: number) => {
+    const direction = edgeId < 2 ? "horizontal" : "vertical";
+    const isMaxEdge = edgeId % 2 === 1;
+    const resizableDimension = edgeId < 2 ? reorderedIndices[1] : reorderedIndices[0];
+    return {
+      boxId: nearestBoundingBox.id,
+      direction,
+      isMaxEdge,
+      edgeId,
+      resizableDimension,
+    };
+  };
+  const nearestEdgeIndex = currentNearestDistanceArray.indexOf(currentNearestDistance);
+  const primaryEdge = getEdgeInfoFromId(nearestEdgeIndex);
+  let secondaryEdge = null;
+  const [firstNeighbourId, secondNeighbourId] = getNeighbourEdgeIndexByEdgeIndex[nearestEdgeIndex];
+  const firstNeighbourEdgeDistance = currentNearestDistanceArray[firstNeighbourId];
+  const secondNeighbourEdgeDistance = currentNearestDistanceArray[secondNeighbourId];
+  if (
+    firstNeighbourEdgeDistance < secondNeighbourEdgeDistance &&
+    firstNeighbourEdgeDistance < zoomedMaxDistanceToSelection
+  ) {
+    secondaryEdge = getEdgeInfoFromId(firstNeighbourId);
+  } else if (
+    secondNeighbourEdgeDistance < firstNeighbourEdgeDistance &&
+    secondNeighbourEdgeDistance < zoomedMaxDistanceToSelection
+  ) {
+    secondaryEdge = getEdgeInfoFromId(secondNeighbourId);
+  }
+  return [primaryEdge, secondaryEdge];
+}
+
+export function handleResizingBoundingBox(
+  mousePosition: Point2,
+  planeId: OrthoView,
+  primaryEdge: SelectedEdge,
+  secondaryEdge: ?SelectedEdge,
+): { primary: boolean, secondary: boolean } {
+  const state = Store.getState();
+  const globalMousePosition = calculateGlobalPos(state, mousePosition, planeId);
+  const { userBoundingBoxes } = getSomeTracing(state.tracing);
+  const didMinAndMaxSwitch = { primary: false, secondary: false };
+  const bboxToResize = userBoundingBoxes.find(bbox => bbox.id === primaryEdge.boxId);
+  if (!bboxToResize) {
+    return didMinAndMaxSwitch;
+  }
+  const updatedBounds = {
+    min: [...bboxToResize.boundingBox.min],
+    max: [...bboxToResize.boundingBox.max],
+  };
+  function updateBoundsAccordingToEdge(edge: SelectedEdge): boolean {
+    const { resizableDimension } = edge;
+    // For a horizontal edge only consider delta.y, for vertical only delta.x
+    const newPositionValue = Math.round(globalMousePosition[resizableDimension]);
+    const minOrMax = edge.isMaxEdge ? "max" : "min";
+    const oppositeOfMinOrMax = edge.isMaxEdge ? "min" : "max";
+    const otherEdgeValue = bboxToResize.boundingBox[oppositeOfMinOrMax][resizableDimension];
+    if (otherEdgeValue === newPositionValue) {
+      // Do not allow the same value for min and max for one dimension.
+      return false;
+    }
+    const areMinAndMaxEdgeCrossing =
+      // If the min / max edge is moved over the other one.
+      (edge.isMaxEdge && newPositionValue < otherEdgeValue) ||
+      (!edge.isMaxEdge && newPositionValue > otherEdgeValue);
+    if (areMinAndMaxEdgeCrossing) {
+      // As the edge moved over the other one, the values for min and max must be switched.
+      updatedBounds[minOrMax][resizableDimension] = otherEdgeValue;
+      updatedBounds[oppositeOfMinOrMax][resizableDimension] = newPositionValue;
+      return true;
+    } else {
+      updatedBounds[minOrMax][resizableDimension] = newPositionValue;
+      return false;
+    }
+  }
+  didMinAndMaxSwitch.primary = updateBoundsAccordingToEdge(primaryEdge);
+  if (secondaryEdge) {
+    didMinAndMaxSwitch.secondary = updateBoundsAccordingToEdge(secondaryEdge);
+  }
+  Store.dispatch(setUserBoundingBoxBoundsAction(primaryEdge.boxId, updatedBounds));
+  return didMinAndMaxSwitch;
+}

frontend/javascripts/oxalis/controller/combinations/move_handlers.js

@@ -68,6 +68,15 @@ export const moveZ = (z: number, oneSlide: boolean): void => {
   }
 };
 
+export function moveWhenAltIsPressed(delta: Point2, position: Point2, _id: any, event: MouseEvent) {
+  // Always set the correct mouse position. Otherwise, using alt + mouse move and
+  // alt + scroll won't result in the correct zoomToMouse behavior.
+  setMousePosition(position);
+  if (event.altKey && !event.shiftKey && !event.ctrlKey) {
+    handleMovePlane(delta);
+  }
+}
+
 export const zoom = (value: number, zoomToMouse: boolean) => {
   const { activeViewport } = Store.getState().viewModeData.plane;
   if (OrthoViewValuesWithoutTDView.includes(activeViewport)) {

frontend/javascripts/oxalis/controller/combinations/skeleton_handlers.js

@@ -46,6 +46,7 @@ import getSceneController from "oxalis/controller/scene_controller_provider";
 import { renderToTexture } from "oxalis/view/rendering_utils";
 import { getBaseVoxelFactors } from "oxalis/model/scaleinfo";
 import Dimensions from "oxalis/model/dimensions";
+import { getClosestHoveredBoundingBox } from "oxalis/controller/combinations/bounding_box_handlers";
 
 const OrthoViewToNumber: OrthoViewMap<number> = {
   [OrthoViews.PLANE_XY]: 0,
@@ -139,7 +140,16 @@ export function handleOpenContextMenu(
   const nodeId = maybeGetNodeIdFromPosition(planeView, position, plane, isTouch);
   const state = Store.getState();
   const globalPosition = calculateGlobalPos(state, position);
-  showNodeContextMenuAt(event.pageX, event.pageY, nodeId, globalPosition, activeViewport);
+  const hoveredEdgesInfo = getClosestHoveredBoundingBox(position, plane);
+  const clickedBoundingBoxId = hoveredEdgesInfo != null ? hoveredEdgesInfo[0].boxId : null;
+  showNodeContextMenuAt(
+    event.pageX,
+    event.pageY,
+    nodeId,
+    clickedBoundingBoxId,
+    globalPosition,
+    activeViewport,
+  );
 }
 
 export function moveNode(dx: number, dy: number, nodeId: ?number) {
@@ -168,25 +178,6 @@ export function moveNode(dx: number, dy: number, nodeId: ?number) {
   );
 }
 
-export function openContextMenu(
-  planeView: PlaneView,
-  position: Point2,
-  plane: OrthoView,
-  isTouch: boolean,
-  event: MouseEvent,
-  showNodeContextMenuAt: ShowContextMenuFunction,
-) {
-  const state = Store.getState();
-  const { activeViewport } = state.viewModeData.plane;
-  if (activeViewport === OrthoViews.TDView) {
-    return;
-  }
-
-  const nodeId = maybeGetNodeIdFromPosition(planeView, position, plane, isTouch);
-  const globalPosition = calculateGlobalPos(state, position);
-  showNodeContextMenuAt(event.pageX, event.pageY, nodeId, globalPosition, activeViewport);
-}
-
 export function setWaypoint(
   position: Vector3,
   activeViewport: OrthoView,