test: add integration test for transformer functionality

Author: Gondragos

web/libs/editor/tests/e2e/tests/image.transformer.test.js

@@ -127,7 +127,7 @@ for (const shapeName of Object.keys(shapes)) {
   shapesTable.add([shapeName]);
 }
 
-Data(shapesTable).Scenario(
+Data(shapesTable).only.Scenario(
   "Check transformer existing for different shapes, their amount and modes.",
   async ({ I, LabelStudio, AtImageView, AtOutliner, AtPanels, current }) => {
     const { shapeName } = current;

web/libs/editor/tests/integration/e2e/image_segmentation/transformer.only.cy.ts

@@ -0,0 +1,173 @@
+import { ImageView, Labels, LabelStudio, Sidebar } from "@humansignal/frontend-test/helpers/LSF";
+import { Hotkeys } from "@humansignal/frontend-test/helpers/LSF/Hotkeys";
+
+const IMAGE = "https://data.heartex.net/open-images/train_0/mini/0030019819f25b28.jpg";
+
+const annotationEmpty = {
+  id: "1000",
+  result: [],
+};
+
+const shapes = {
+  Rectangle: {
+    drawAction: "drawRect",
+    hasTransformer: true,
+    hasRotator: true,
+    hasMoveToolTransformer: true,
+    hasMultiSelectionTransformer: true,
+    hasMultiSelectionRotator: true,
+    hotKey: "r",
+    byBBox(x, y, width, height) {
+      return {
+        params: [x, y, width, height],
+        result: { width, height, rotation: 0, x, y },
+      };
+    },
+  },
+  Ellipse: {
+    drawAction: "drawRect",
+    hasTransformer: true,
+    hasRotator: true,
+    hasMoveToolTransformer: true,
+    hasMultiSelectionTransformer: true,
+    hasMultiSelectionRotator: true,
+    hotKey: "o",
+    byBBox(x, y, width, height) {
+      return {
+        params: [x + width / 2, y + height / 2, width / 2, height / 2],
+        result: {
+          radiusX: width / 2,
+          radiusY: height / 2,
+          rotation: 0,
+          x: x + width / 2,
+          y: y + height / 2,
+        },
+      };
+    },
+  },
+  Polygon: {
+    drawAction: "drawPolygon",
+    hasTransformer: false,
+    hasRotator: false,
+    hasMoveToolTransformer: true,
+    hasMultiSelectionTransformer: true,
+    hasMultiSelectionRotator: false,
+    hotKey: "p",
+    byBBox(x, y, width, height) {
+      const points = [];
+
+      points.push([x, y]);
+      points.push([x + width, y]);
+      points.push([x + width / 2, y + height / 2]);
+      points.push([x + width, y + height]);
+      points.push([x, y + height]);
+      return {
+        params: [[...points, points[0]]],
+        result: {
+          points,
+          closed: true,
+        },
+      };
+    },
+  },
+  KeyPoint: {
+    drawAction: "clickAt",
+    hasTransformer: false,
+    hasRotator: false,
+    hasMoveToolTransformer: false,
+    hasMultiSelectionTransformer: true,
+    hasMultiSelectionRotator: false,
+    hotKey: "k",
+    params: 'strokeWidth="2"',
+    byBBox(x, y, width, height) {
+      return {
+        params: [x + width / 2, y + height / 2],
+        result: {
+          x: x + width / 2,
+          y: y + height / 2,
+          width: 2,
+        },
+      };
+    },
+  },
+};
+
+const getParamsWithLabels = (shapeName) => ({
+  config: `
+  <View>
+    <Image name="img" value="$image" />
+    <${shapeName}Labels name="tag" toName="img">
+      <Label value="${shapeName}" background="orange"/>
+    </${shapeName}Labels>
+  </View>`,
+  data: { image: IMAGE },
+});
+
+function drawShapeByBbox(Shape, bbox) {
+  ImageView[Shape.drawAction](...Shape.byBBox(bbox.x, bbox.y, bbox.width, bbox.height).params);
+}
+
+describe("Image Transformer", () => {
+  for (const shapeName in shapes) {
+    it(`should exist for different shapes, their amount and modes. -- ${shapeName}`, () => {
+      const Shape = shapes[shapeName];
+      const { config, data } = getParamsWithLabels(shapeName);
+      const bbox1 = {
+        x: 100,
+        y: 100,
+        width: 200,
+        height: 200,
+      };
+      const bbox2 = {
+        x: 400,
+        y: 100,
+        width: 200,
+        height: 200,
+      };
+      const getCenter = (bbox) => [bbox.x + bbox.width / 2, bbox.y + bbox.height / 2];
+
+      LabelStudio.params().config(config).data(data).withResult([]).init();
+      LabelStudio.waitForObjectsReady();
+      Sidebar.hasRegions(0);
+
+      // Draw two regions
+      Labels.selectWithHotkey("1");
+      drawShapeByBbox(Shape, bbox1);
+      Sidebar.hasRegions(1);
+
+      Labels.selectWithHotkey("1");
+      drawShapeByBbox(Shape, bbox2);
+      Sidebar.hasRegions(2);
+
+      // Check that it wasn't a cause to show a transformer
+      ImageView.hasNoTransformer();
+
+      // Select the first region
+      ImageView.clickAt(...getCenter(bbox1));
+      Sidebar.hasSelectedRegions(1);
+
+      // Match if transformer exist with expectations in single selected mode
+      ImageView.shouldHaveTransformer(Shape.hasTransformer);
+
+      // Match if rotator at transformer exist with expectations in single selected mode
+      ImageView.shouldHaveRotater(Shape.hasRotator);
+
+      ImageView.selectMoveToolByButton();
+      // Match if transformer exist with expectations in single selected mode with move tool chosen
+      ImageView.shouldHaveTransformer(Shape.hasMoveToolTransformer);
+
+      // Deselect the previous selected region
+      Hotkeys.unselect();
+
+      // Select 2 regions
+      ImageView.drawThroughPoints(
+        [
+          [bbox1.x - 5, bbox1.y - 5],
+          [bbox2.x + bbox2.width + 5, bbox2.y + bbox2.height + 5],
+        ],
+        "steps",
+        10,
+      );
+    });
+  }
+});

web/libs/frontend-test/src/helpers/LSF/Hotkeys.ts

@@ -19,6 +19,9 @@ export const Hotkeys = {
   redo() {
     pressHotkey("{ctrl}{shift}z", "{command}{shift}z");
   },
+  unselect() {
+    pressHotkey("u");
+  },
   deleteRegion() {
     pressHotkey("{backspace}");
   },

web/libs/frontend-test/src/helpers/LSF/ImageView.ts

@@ -135,7 +135,8 @@ export const ImageView = {
       drawingArea
         .trigger("mousemove", point[0], point[1], { eventConstructor: "MouseEvent", ...options })
         .trigger("mousedown", point[0], point[1], { eventConstructor: "MouseEvent", buttons: 1, ...options })
-        .trigger("mouseup", point[0], point[1], { eventConstructor: "MouseEvent", buttons: 1, ...options });
+        .trigger("mouseup", point[0], point[1], { eventConstructor: "MouseEvent", buttons: 1, ...options })
+        .wait(0.016);
     });
   },
 
@@ -153,6 +154,82 @@ export const ImageView = {
       this.drawPolygon(realPoints, autoclose, options);
     });
   },
+
+  /**
+   * Mousedown - mousemove - mouseup drawing through the list of points on the ImageView. Works in couple of lookForStage.
+   * @example
+   * await  AtImageView.lookForStage();
+   * AtImageView.drawThroughPoints([[50,50],[200,100],[50,200],[300,300]]);
+   * @param {number[][]} points - list of pairs of coords
+   * @param {"steps"|"rate"} mode - mode of firing mousemove event
+   * @param {number} parameter - parameter for mode
+   * @param {MouseInteractionOptions} options - options for mousemove event
+   */
+  drawThroughPoints(points: [number, number][], mode = "steps", parameter = 1, options = {}) {
+    const drawingArea = this.drawingArea.scrollIntoView();
+
+    const calcSteps = {
+      steps: () => parameter,
+      rate: (p1, p2) => Math.sqrt((p1[0] - p2[0]) ** 2 + (p1[1] - p2[1]) ** 2) / parameter,
+    }[mode];
+    const startPoint = points[0];
+
+    drawingArea
+      .trigger("mousemove", startPoint[0], startPoint[1], { eventConstructor: "MouseEvent", ...options })
+      .trigger("mousedown", startPoint[0], startPoint[1], { eventConstructor: "MouseEvent", buttons: 1, ...options });
+    let i;
+    for (i = 1; i < points.length; i++) {
+      const prevPoint = points[i - 1];
+      const curPoint = points[i];
+      const steps = calcSteps(prevPoint, curPoint);
+
+      for (let k = 1; k <= steps; k++) {
+        const curX = prevPoint[0] + ((curPoint[0] - prevPoint[0]) * k) / steps;
+        const curY = prevPoint[1] + ((curPoint[1] - prevPoint[1]) * k) / steps;
+        drawingArea.trigger("mousemove", curX, curY, { eventConstructor: "MouseEvent", ...options }).wait(0.002);
+      }
+    }
+    drawingArea.trigger("mouseup", points[i - 1][0], points[i - 1][1], {
+      eventConstructor: "MouseEvent",
+      buttons: 1,
+      ...options,
+    });
+  },
+
+  get isTransformerThere() {
+    return cy.window().then((win) => {
+      const stage = win.Konva!.stages[0];
+      const anchors = stage.find("._anchor").filter((shape) => shape.getAttr("visible") !== false);
+
+      return !!anchors.length;
+    });
+  },
+
+  get isRotaterThere() {
+    return cy.window().then((win) => {
+      const stage = win.Konva!.stages[0];
+      const rotaters = stage.find(".rotater").filter((shape) => shape.getAttr("visible") !== false);
+
+      return !!rotaters.length;
+    });
+  },
+
+  hasTransformer() {
+    this.isTransformerThere.should("be.true");
+  },
+
+  hasNoTransformer() {
+    this.isTransformerThere.should("be.false");
+  },
+
+  shouldHaveTransformer(should = true) {
+    this.isTransformerThere.should("be.eq", should);
+  },
+
+  shouldHaveRotater(should = true) {
+    this.isRotaterThere.should("be.eq", should);
+  },
+
   /**
    * Captures a screenshot of an element to compare later
    * @param {string} name name of the screenshot