Add measurement tools

frontend/javascripts/libs/format_utils.ts

@@ -140,8 +140,8 @@ const nmFactorToUnit = new Map([
   [1e9, "m"],
   [1e12, "km"],
 ]);
-export function formatNumberToLength(lengthInNm: number): string {
-  return formatNumberToUnit(lengthInNm, nmFactorToUnit);
+export function formatNumberToLength(lengthInNm: number, roundTo: number = 2): string {
+  return formatNumberToUnit(lengthInNm, nmFactorToUnit, false, roundTo);
 }
 
 const byteFactorToUnit = new Map([

frontend/javascripts/libs/resizable_buffer.ts

@@ -54,7 +54,9 @@ class ResizableBuffer<T extends Float32Array> {
   }
 
   set(element: Array<number> | T, i: number): void {
+    this.ensureCapacity((i + 1) * this.elementLength);
     this.buffer.set(element, i * this.elementLength);
+    this.length = Math.max(this.length, (i + 1) * this.elementLength);
   }
 
   push(element: Array<number> | T): void {
@@ -132,7 +134,10 @@ class ResizableBuffer<T extends Float32Array> {
       const { buffer } = this;
 
       while (this.capacity < newCapacity) {
-        this.capacity = Math.floor(this.capacity * GROW_MULTIPLIER);
+        this.capacity = Math.max(
+          this.capacity + this.elementLength,
+          Math.floor(this.capacity * GROW_MULTIPLIER),
+        );
         this.capacity -= this.capacity % this.elementLength;
       }
 

frontend/javascripts/oxalis/constants.ts

@@ -182,6 +182,8 @@ export enum AnnotationToolEnum {
   QUICK_SELECT = "QUICK_SELECT",
   BOUNDING_BOX = "BOUNDING_BOX",
   PROOFREAD = "PROOFREAD",
+  LINE_MEASUREMENT = "LINE_MEASUREMENT",
+  AREA_MEASUREMENT = "AREA_MEASUREMENT",
 }
 export const VolumeTools: Array<keyof typeof AnnotationToolEnum> = [
   AnnotationToolEnum.BRUSH,
@@ -205,6 +207,11 @@ export const ToolsWithInterpolationCapabilities: Array<keyof typeof AnnotationTo
   AnnotationToolEnum.QUICK_SELECT,
 ];
 
+export const MeasurementTools: Array<keyof typeof AnnotationToolEnum> = [
+  AnnotationToolEnum.LINE_MEASUREMENT,
+  AnnotationToolEnum.AREA_MEASUREMENT,
+];
+
 export type AnnotationTool = keyof typeof AnnotationToolEnum;
 export const enum ContourModeEnum {
   DRAW = "DRAW",

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

@@ -51,7 +51,11 @@ import {
 } from "oxalis/model/actions/proofread_actions";
 import { calculateGlobalPos } from "oxalis/model/accessors/view_mode_accessor";
 import { V3 } from "libs/mjs";
-import { setQuickSelectStateAction } from "oxalis/model/actions/ui_actions";
+import {
+  hideMeasurementTooltipAction,
+  setQuickSelectStateAction,
+  showMeasurementTooltipAction,
+} from "oxalis/model/actions/ui_actions";
 
 export type ActionDescriptor = {
   leftClick?: string;
@@ -780,6 +784,159 @@ export class QuickSelectTool {
   static onToolDeselected() {}
 }
 
+export class LineMeasurementTool {
+  static DOUBLE_CLICK_TIME_THRESHOLD = 600;
+  static getPlaneMouseControls(_planeId: OrthoView): any {
+    let initialPlane: OrthoView = OrthoViews.PLANE_XY;
+    let isMeasuring = false;
+    let lastLeftClickTime = 0;
+    const SceneController = getSceneController();
+    const { lineMeasurementGeometry } = SceneController;
+    const guardFromResettedTool = (func: Function) => {
+      // TODO: Problem typing is lost
+      return (...args: any) => {
+        if (lineMeasurementGeometry.isResetted && isMeasuring) {
+          isMeasuring = false;
+          return;
+        }
+        func(...args);
+      };
+    };
+    const mouseMove = guardFromResettedTool(
+      (_delta: Point2, pos: Point2, plane: OrthoView | null | undefined, evt: MouseEvent) => {
+        if (plane !== initialPlane || !isMeasuring) {
+          return;
+        }
+        const state = Store.getState();
+        const newPos = V3.floor(calculateGlobalPos(state, pos, initialPlane));
+        lineMeasurementGeometry.setTopPoint(newPos);
+        Store.dispatch(showMeasurementTooltipAction([evt.clientX, evt.clientY]));
+      },
+    );
+    const rightClick = guardFromResettedTool((pos: Point2, plane: OrthoView, event: MouseEvent) => {
+      if (isMeasuring) {
+        mouseMove({ x: 0, y: 0 }, pos, plane, event);
+        isMeasuring = false;
+      } else {
+        lineMeasurementGeometry.reset();
+        lineMeasurementGeometry.hide();
+        Store.dispatch(hideMeasurementTooltipAction());
+      }
+    });
+    const leftClick = guardFromResettedTool((pos: Point2, plane: OrthoView, event: MouseEvent) => {
+      const currentTime = Date.now();
+      if (currentTime - lastLeftClickTime <= this.DOUBLE_CLICK_TIME_THRESHOLD) {
+        rightClick(pos, plane, event);
+        return;
+      }
+      lastLeftClickTime = currentTime;
+      const state = Store.getState();
+      const position = V3.floor(calculateGlobalPos(state, pos, plane));
+      initialPlane = plane;
+      if (!isMeasuring) {
+        lineMeasurementGeometry.setStartPoint(position, plane);
+        isMeasuring = true;
+      } else {
+        lineMeasurementGeometry.addPoint(position);
+        Store.dispatch(showMeasurementTooltipAction([event.clientX, event.clientY]));
+      }
+    });
+    return {
+      mouseMove,
+      rightClick,
+      leftClick,
+    };
+  }
+
+  static getActionDescriptors(
+    _activeTool: AnnotationTool,
+    _useLegacyBindings: boolean,
+    _shiftKey: boolean,
+    _ctrlKey: boolean,
+    _altKey: boolean,
+  ): ActionDescriptor {
+    return {
+      leftClick: "Left Click to measure distance",
+      rightClick: "Finish Measurement and reset",
+    };
+  }
+
+  static onToolDeselected() {
+    const { lineMeasurementGeometry } = getSceneController();
+    lineMeasurementGeometry.reset();
+    lineMeasurementGeometry.hide();
+    Store.dispatch(hideMeasurementTooltipAction());
+  }
+}
+
+export class AreaMeasurementTool {
+  static getPlaneMouseControls(): any {
+    let initialPlane: OrthoView = OrthoViews.PLANE_XY;
+    let isMeasuring = false;
+    const SceneController = getSceneController();
+    const { areaMeasurementGeometry } = SceneController;
+    return {
+      leftDownMove: (
+        _delta: Point2,
+        pos: Point2,
+        id: string | null | undefined,
+        event: MouseEvent,
+      ) => {
+        if (id == null) {
+          return;
+        }
+        if (!isMeasuring) {
+          initialPlane = id as OrthoView;
+          isMeasuring = true;
+          areaMeasurementGeometry.reset();
+          areaMeasurementGeometry.show();
+          areaMeasurementGeometry.setViewport(id as OrthoView);
+        }
+        if (id !== initialPlane) {
+          return;
+        }
+        const state = Store.getState();
+        const position = V3.floor(calculateGlobalPos(state, pos, initialPlane));
+        areaMeasurementGeometry.addEdgePoint(position);
+        Store.dispatch(showMeasurementTooltipAction([event.clientX, event.clientY]));
+      },
+      leftMouseUp: (event: MouseEvent) => {
+        if (!isMeasuring) {
+          return;
+        }
+        // Stop drawing area and close the drawn area if still measuring.
+        isMeasuring = false;
+        areaMeasurementGeometry.connectToStartPoint();
+        Store.dispatch(showMeasurementTooltipAction([event.clientX, event.clientY]));
+      },
+      rightClick: () => {
+        areaMeasurementGeometry.reset();
+        Store.dispatch(hideMeasurementTooltipAction());
+      },
+    };
+  }
+
+  static getActionDescriptors(
+    _activeTool: AnnotationTool,
+    _useLegacyBindings: boolean,
+    _shiftKey: boolean,
+    _ctrlKey: boolean,
+    _altKey: boolean,
+  ): ActionDescriptor {
+    return {
+      leftDrag: "Drag to measure area",
+      rightClick: "Reset Measurement",
+    };
+  }
+
+  static onToolDeselected() {
+    const { areaMeasurementGeometry } = getSceneController();
+    areaMeasurementGeometry.reset();
+    areaMeasurementGeometry.hide();
+    Store.dispatch(hideMeasurementTooltipAction());
+  }
+}
+
 export class ProofreadTool {
   static getPlaneMouseControls(_planeId: OrthoView, planeView: PlaneView): any {
     return {
@@ -849,6 +1006,8 @@ const toolToToolClass = {
   [AnnotationToolEnum.ERASE_BRUSH]: EraseTool,
   [AnnotationToolEnum.FILL_CELL]: FillCellTool,
   [AnnotationToolEnum.PICK_CELL]: PickCellTool,
+  [AnnotationToolEnum.LINE_MEASUREMENT]: LineMeasurementTool,
+  [AnnotationToolEnum.AREA_MEASUREMENT]: AreaMeasurementTool,
 };
 export function getToolClassForAnnotationTool(activeTool: AnnotationTool) {
   return toolToToolClass[activeTool];

frontend/javascripts/oxalis/controller/scene_controller.ts

@@ -15,7 +15,11 @@ import { getRenderer } from "oxalis/controller/renderer";
 import { setSceneController } from "oxalis/controller/scene_controller_provider";
 import ArbitraryPlane from "oxalis/geometries/arbitrary_plane";
 import Cube from "oxalis/geometries/cube";
-import { ContourGeometry, QuickSelectGeometry } from "oxalis/geometries/helper_geometries";
+import {
+  ContourGeometry,
+  LineMeasurementGeometry,
+  QuickSelectGeometry,
+} from "oxalis/geometries/helper_geometries";
 import Plane from "oxalis/geometries/plane";
 import Skeleton from "oxalis/geometries/skeleton";
 import {
@@ -60,6 +64,10 @@ class SceneController {
   contour: ContourGeometry;
   // @ts-expect-error ts-migrate(2564) FIXME: Property 'quickSelectGeometry' has no initializer and is not d... Remove this comment to see the full error message
   quickSelectGeometry: QuickSelectGeometry;
+  // @ts-expect-error ts-migrate(2564) FIXME: Property 'lineMeasurementGeometry' has no initializer and is not d... Remove this comment to see the full error message
+  lineMeasurementGeometry: LineMeasurementGeometry;
+  // @ts-expect-error ts-migrate(2564) FIXME: Property 'areaMeasurementGeometry' has no initializer and is not d... Remove this comment to see the full error message
+  areaMeasurementGeometry: ContourGeometry;
   // @ts-expect-error ts-migrate(2304) FIXME: Cannot find name 'OrthoViewWithoutTDMap'.
   planes: OrthoViewWithoutTDMap<Plane>;
   // @ts-expect-error ts-migrate(2564) FIXME: Property 'rootNode' has no initializer and is not ... Remove this comment to see the full error message
@@ -238,6 +246,15 @@ class SceneController {
     this.quickSelectGeometry = new QuickSelectGeometry();
     this.annotationToolsGeometryGroup.add(this.quickSelectGeometry.getMeshGroup());
 
+    this.lineMeasurementGeometry = new LineMeasurementGeometry();
+    this.lineMeasurementGeometry
+      .getMeshes()
+      .forEach((mesh) => this.annotationToolsGeometryGroup.add(mesh));
+    this.areaMeasurementGeometry = new ContourGeometry(true);
+    this.areaMeasurementGeometry
+      .getMeshes()
+      .forEach((mesh) => this.annotationToolsGeometryGroup.add(mesh));
+
     if (state.tracing.skeleton != null) {
       this.addSkeleton((_state) => getSkeletonTracing(_state.tracing), true);
     }
@@ -324,7 +341,8 @@ class SceneController {
     this.taskBoundingBox?.updateForCam(id);
 
     this.segmentMeshController.isosurfacesLODRootGroup.visible = id === OrthoViews.TDView;
-    this.annotationToolsGeometryGroup.visible = id !== OrthoViews.TDView;
+    this.annotationToolsGeometryGroup.visible = true || id !== OrthoViews.TDView;
+    this.lineMeasurementGeometry.updateForCam(id);
 
     const originalPosition = getPosition(Store.getState().flycam);
     if (id !== OrthoViews.TDView) {

frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx

@@ -48,6 +48,8 @@ import {
   BoundingBoxTool,
   QuickSelectTool,
   ProofreadTool,
+  LineMeasurementTool,
+  AreaMeasurementTool,
 } from "oxalis/controller/combinations/tool_controls";
 import type {
   ShowContextMenuFunction,
@@ -334,6 +336,8 @@ class PlaneController extends React.PureComponent<Props> {
       this.props.showContextMenuAt,
     );
     const proofreadControls = ProofreadTool.getPlaneMouseControls(planeId, this.planeView);
+    const lineMeasurementControls = LineMeasurementTool.getPlaneMouseControls(planeId);
+    const areaMeasurementControls = AreaMeasurementTool.getPlaneMouseControls();
 
     const allControlKeys = _.union(
       Object.keys(moveControls),
@@ -345,6 +349,8 @@ class PlaneController extends React.PureComponent<Props> {
       Object.keys(boundingBoxControls),
       Object.keys(quickSelectControls),
       Object.keys(proofreadControls),
+      Object.keys(lineMeasurementControls),
+      Object.keys(areaMeasurementControls),
     );
 
     const controls: Record<string, any> = {};
@@ -363,6 +369,8 @@ class PlaneController extends React.PureComponent<Props> {
         [AnnotationToolEnum.BOUNDING_BOX]: boundingBoxControls[controlKey],
         [AnnotationToolEnum.QUICK_SELECT]: quickSelectControls[controlKey],
         [AnnotationToolEnum.PROOFREAD]: proofreadControls[controlKey],
+        [AnnotationToolEnum.LINE_MEASUREMENT]: lineMeasurementControls[controlKey],
+        [AnnotationToolEnum.AREA_MEASUREMENT]: areaMeasurementControls[controlKey],
       });
     }
 

frontend/javascripts/oxalis/default_state.ts

@@ -222,6 +222,7 @@ const defaultState: OxalisState = {
   activeUser: null,
   activeOrganization: null,
   uiInformation: {
+    measurementTooltipPosition: null,
     activeTool: "MOVE",
     showDropzoneModal: false,
     showVersionRestore: false,