Refactor labelling code in preparation to support transformed layers

frontend/javascripts/dashboard/dataset/dataset_rotation_form_item.tsx

@@ -3,7 +3,7 @@ import { Col, Form, type FormInstance, InputNumber, Row, Slider, Tooltip, Typogr
 import FormItem from "antd/es/form/FormItem";
 import Checkbox, { type CheckboxChangeEvent } from "antd/lib/checkbox/Checkbox";
 import { useCallback, useEffect, useMemo } from "react";
-import type { APIDataLayer } from "types/api_types";
+import type { APIDataLayer, AffineTransformation } from "types/api_types";
 import {
   AXIS_TO_TRANSFORM_INDEX,
   EXPECTED_TRANSFORMATION_LENGTH,
@@ -64,13 +64,7 @@ export const AxisRotationFormItem: React.FC<AxisRotationFormItemProps> = ({
       y: RotationAndMirroringSettings;
       z: RotationAndMirroringSettings;
     } = form.getFieldValue(["datasetRotation"]);
-    const transformations = [
-      fromCenterToOrigin(datasetBoundingBox),
-      getRotationMatrixAroundAxis("x", rotationValues["x"]),
-      getRotationMatrixAroundAxis("y", rotationValues["y"]),
-      getRotationMatrixAroundAxis("z", rotationValues["z"]),
-      fromOriginToCenter(datasetBoundingBox),
-    ];
+    const transformations = getRotationalTransformation(datasetBoundingBox, rotationValues);
     const dataLayersWithUpdatedTransforms = dataLayers.map((layer) => {
       return {
         ...layer,
@@ -227,3 +221,20 @@ export const AxisRotationSettingForDataset: React.FC<AxisRotationSettingForDatas
     </div>
   );
 };
+
+export function getRotationalTransformation(
+  datasetBoundingBox: BoundingBox,
+  rotationValues: {
+    x: RotationAndMirroringSettings;
+    y: RotationAndMirroringSettings;
+    z: RotationAndMirroringSettings;
+  },
+): AffineTransformation[] {
+  return [
+    fromCenterToOrigin(datasetBoundingBox),
+    getRotationMatrixAroundAxis("x", rotationValues["x"]),
+    getRotationMatrixAroundAxis("y", rotationValues["y"]),
+    getRotationMatrixAroundAxis("z", rotationValues["z"]),
+    fromOriginToCenter(datasetBoundingBox),
+  ];
+}

frontend/javascripts/libs/drawing.ts

@@ -1,17 +1,10 @@
-import type { Vector3 } from "viewer/constants";
 type RangeItem = [number, number, number, boolean | null, boolean, boolean];
+
 // This is a class with static methods and constants dealing with drawing
-// lines and filling polygons
-// Macros
-// Constants
-const SMOOTH_LENGTH = 4;
-const SMOOTH_ALPHA = 0.2;
+// lines and filling polygons.
 
 class Drawing {
-  alpha: number = SMOOTH_ALPHA;
-  smoothLength: number = SMOOTH_LENGTH;
-
-  drawHorizontalLine2d(
+  private drawHorizontalLine2d(
     y: number,
     x1: number,
     x2: number,
@@ -91,7 +84,7 @@ class Drawing {
     }
   }
 
-  addNextLine(
+  private addNextLine(
     newY: number,
     isNext: boolean,
     downwards: boolean,
@@ -135,7 +128,7 @@ class Drawing {
     }
   }
 
-  paintBorder(
+  private paintBorder(
     x1: number,
     y1: number,
     x2: number,
@@ -212,19 +205,15 @@ class Drawing {
 
     while (ranges.length) {
       const r = ranges.pop();
-      // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
+      if (r == null) {
+        throw new Error("Array is expected to be not empty.");
+      }
       let minX = r[0];
-      // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
       let maxX = r[1];
-      // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
       y = r[2];
-      // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
       const down = r[3] === true;
-      // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
       const up = r[3] === false;
-      // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
       const extendLeft = r[4];
-      // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
       const extendRight = r[5];
 
       if (extendLeft) {
@@ -250,19 +239,15 @@ class Drawing {
           maxX++;
         }
       } else {
-        // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
         r[0]--;
-        // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
         r[1]++;
       }
 
       if (y < height) {
-        // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'RangeItem | undefined' is not as... Remove this comment to see the full error message
         this.addNextLine(y + 1, !up, true, minX, maxX, r, ranges, test, paint);
       }
 
       if (y > 0) {
-        // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'RangeItem | undefined' is not as... Remove this comment to see the full error message
         this.addNextLine(y - 1, !down, false, minX, maxX, r, ranges, test, paint);
       }
     }
@@ -288,40 +273,6 @@ class Drawing {
       }
     }
   }
-
-  // Source : http://twistedoakstudios.com/blog/Post3138_mouse-path-smoothing-for-jack-lumber
-  smoothLine(points: Array<Vector3>, callback: (arg0: Vector3) => void): Array<Vector3> {
-    const smoothLength = this.smoothLength || SMOOTH_LENGTH;
-    const a = this.alpha || SMOOTH_ALPHA;
-
-    if (points.length > 2 + smoothLength) {
-      for (let i = 0; i < smoothLength; i++) {
-        const j = points.length - i - 2;
-        const p0 = points[j];
-        const p1 = points[j + 1];
-        const p = [0, 0, 0];
-
-        for (let k = 0; k < 3; k++) {
-          p[k] = p0[k] * (1 - a) + p1[k] * a;
-        }
-
-        // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'number[]' is not assignable to p... Remove this comment to see the full error message
-        callback(p);
-        // @ts-expect-error ts-migrate(2322) FIXME: Type 'number[]' is not assignable to type 'Vector3... Remove this comment to see the full error message
-        points[j] = p;
-      }
-    }
-
-    return points;
-  }
-
-  setSmoothLength(v: number): void {
-    this.smoothLength = v;
-  }
-
-  setAlpha(v: number): void {
-    this.alpha = v;
-  }
 }
 
 export default new Drawing();

frontend/javascripts/test/global_mocks.ts

@@ -140,6 +140,9 @@ vi.mock("antd", () => {
     Form: {
       Item: {},
     },
+    Typography: {
+      Text: {},
+    },
   };
 });