const assert = require("assert");
const Asserts = require("../utils/asserts");
const Helpers = require("./helpers");

Feature("Image transformer");

const IMAGE = "https://data.heartex.net/open-images/train_0/mini/0030019819f25b28.jpg";

const annotationEmpty = {
  id: "1000",
  result: [],
};

const getParamsWithShape = (shape, params = "") => ({
  config: `
  <View>
    <Image name="img" value="$image" />
    <${shape} ${params} name="tag" toName="img" />
  </View>`,
  data: { image: IMAGE },
  annotations: [annotationEmpty],
});

const getParamsWithLabels = (shape) => ({
  config: `
  <View>
    <Image name="img" value="$image" />
    <${shape}Labels name="tag" toName="img">
      <Label value="${shape}" background="orange"/>
    </${shape}Labels>
  </View>`,
  data: { image: IMAGE },
  annotations: [annotationEmpty],
});

const shapes = {
  Rectangle: {
    drawAction: "drawByDrag",
    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: "drawByDrag",
    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: "drawByClickingPoints",
    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,
        },
      };
    },
  },
};

function drawShapeByBbox(Shape, x, y, width, height, where) {
  where[Shape.drawAction](...Shape.byBBox(x, y, width, height).params);
}

const shapesTable = new DataTable(["shapeName"]);

for (const shapeName of Object.keys(shapes)) {
  shapesTable.add([shapeName]);
}

Data(shapesTable)
  .Scenario(
    "Check transformer existing for different shapes, their amount and modes.",
    async ({ I, LabelStudio, AtImageView, AtOutliner, AtPanels, current }) => {
      const { shapeName } = current;
      const Shape = shapes[shapeName];

      I.amOnPage("/");
      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];
      let isTransformerExist;
      const AtDetailsPanel = AtPanels.usePanel(AtPanels.PANEL.DETAILS);

      LabelStudio.init(getParamsWithLabels(shapeName));
      AtDetailsPanel.collapsePanel();

      LabelStudio.waitForObjectsReady();
      AtOutliner.seeRegions(0);
      await AtImageView.lookForStage();

      // Draw two regions
      I.pressKey("1");
      drawShapeByBbox(Shape, bbox1.x, bbox1.y, bbox1.width, bbox1.height, AtImageView);
      AtOutliner.seeRegions(1);
      I.pressKey("1");
      drawShapeByBbox(Shape, bbox2.x, bbox2.y, bbox2.width, bbox2.height, AtImageView);
      AtOutliner.seeRegions(2);

      // Check that it wasn't a cause to show a transformer
      isTransformerExist = await AtImageView.isTransformerExist();
      assert.strictEqual(isTransformerExist, false);

      // Select the first region
      AtImageView.clickAt(...getCenter(bbox1));
      AtOutliner.seeSelectedRegion();

      // Match if transformer exist with expectations in single selected mode
      isTransformerExist = await AtImageView.isTransformerExist();
      assert.strictEqual(isTransformerExist, Shape.hasTransformer);

      // Match if rotator at transformer exist with expectations in single selected mode
      isTransformerExist = await AtImageView.isRotaterExist();
      assert.strictEqual(isTransformerExist, Shape.hasRotator);

      // Switch to move tool
      I.pressKey("v");

      // Match if rotator at transformer exist with expectations in single selected mode with move tool chosen
      isTransformerExist = await AtImageView.isTransformerExist();
      assert.strictEqual(isTransformerExist, Shape.hasMoveToolTransformer);

      // Deselect the previous selected region
      I.pressKey(["u"]);

      // Select 2 regions
      AtImageView.drawThroughPoints(
        [
          [bbox1.x - 5, bbox1.y - 5],
          [bbox2.x + bbox2.width + 5, bbox2.y + bbox2.height + 5],
        ],
        "steps",
        10,
      );

      // Match if transformer exist with expectations in multiple selected mode
      isTransformerExist = await AtImageView.isTransformerExist();
      assert.strictEqual(isTransformerExist, Shape.hasMultiSelectionTransformer);

      // Match if rotator exist with expectations in multiple selected mode
      isTransformerExist = await AtImageView.isRotaterExist();
      assert.strictEqual(isTransformerExist, Shape.hasMultiSelectionRotator);
    },
  )
  .retry(3);

Data(shapesTable.filter(({ shapeName }) => shapes[shapeName].hasMoveToolTransformer)).Scenario(
  "Resizing a single region",
  async ({ I, LabelStudio, AtImageView, AtOutliner, AtPanels, current }) => {
    const { shapeName } = current;
    const Shape = shapes[shapeName];
    const AtDetailsPanel = AtPanels.usePanel(AtPanels.PANEL.DETAILS);

    I.amOnPage("/");
    LabelStudio.init(getParamsWithShape(shapeName, Shape.params));
    AtDetailsPanel.collapsePanel();
    LabelStudio.waitForObjectsReady();
    AtOutliner.seeRegions(0);
    await AtImageView.lookForStage();
    const canvasSize = await AtImageView.getCanvasSize();
    const convertToImageSize = Helpers.getSizeConvertor(canvasSize.width, canvasSize.height);

    // Draw a region in bbox {x1:50,y1:50,x2:150,y2:150}
    I.pressKey(Shape.hotKey);
    drawShapeByBbox(Shape, 50, 50, 100, 100, AtImageView);
    AtOutliner.seeRegions(1);
    AtOutliner.dontSeeIncompleteRegion();

    // Select the shape
    AtImageView.clickAt(100, 100);
    AtOutliner.seeSelectedRegion();

    // Switch to move tool to force appearance of transformer
    I.pressKey("v");
    const isTransformerExist = await AtImageView.isTransformerExist();

    assert.strictEqual(isTransformerExist, true);

    // Transform the shape
    // Move the top anchor up for 50px (limited by image border) => {x1:50,y1:0,x2:150,y2:150}
    AtImageView.drawByDrag(100, 50, 0, -100);
    // Move the left anchor left for 50px (limited by image border) => {x1:0,y1:0,x2:150,y2:150}
    AtImageView.drawByDrag(50, 75, -300, -100);
    // Move the right anchor left for 50px => {x1:0,y1:0,x2:100,y2:150}
    AtImageView.drawByDrag(150, 75, -50, 0);
    // Move the bottom anchor down for 100px => {x1:0,y1:0,x2:100,y2:250}
    AtImageView.drawByDrag(50, 150, 10, 100);
    // Move the right-bottom anchor right for 200px and down for 50px => {x1:0,y1:0,x2:300,y2:300}
    AtImageView.drawByDrag(100, 250, 200, 50);
    // Check resulting sizes
    const rectangleResult = await LabelStudio.serialize();
    const exceptedResult = Shape.byBBox(0, 0, 300, 300).result;

    Asserts.deepEqualWithTolerance(rectangleResult[0].value, convertToImageSize(exceptedResult));
  },
);

// Currently flipping is handled correctly only for rectangles.
Data(shapesTable.filter(({ shapeName }) => shapeName === "Rectangle")).Scenario(
  "Flip region during resizing",
  async ({ I, LabelStudio, AtImageView, AtOutliner, AtPanels, current }) => {
    const { shapeName } = current;
    const Shape = shapes[shapeName];
    const AtDetailsPanel = AtPanels.usePanel(AtPanels.PANEL.DETAILS);

    I.amOnPage("/");
    LabelStudio.init(getParamsWithShape(shapeName, Shape.params));
    AtDetailsPanel.collapsePanel();
    LabelStudio.waitForObjectsReady();
    AtOutliner.seeRegions(0);
    await AtImageView.lookForStage();
    const canvasSize = await AtImageView.getCanvasSize();
    const convertToImageSize = Helpers.getSizeConvertor(canvasSize.width, canvasSize.height);
    let rectangleResult;

    // Draw a region in bbox {x1:50,y1:50,x2:150,y2:150}
    I.pressKey(Shape.hotKey);
    drawShapeByBbox(Shape, 50, 50, 100, 100, AtImageView);
    AtOutliner.seeRegions(1);
    AtOutliner.dontSeeIncompleteRegion();

    // Select the shape
    AtImageView.clickAt(100, 100);
    AtOutliner.seeSelectedRegion();

    // Switch to move tool to force appearance of transformer
    I.pressKey("v");
    const isTransformerExist = await AtImageView.isTransformerExist();

    assert.strictEqual(isTransformerExist, true);

    // Flip the shape horizontally
    // Move the left anchor to the right further than region width, effectively flipping it and reducing width to 50px
    AtImageView.drawByDrag(50, 100, 150, 0);
    // Check resulting sizes
    rectangleResult = await LabelStudio.serialize();
    const exceptedResult = Shape.byBBox(150, 50, 50, 100).result;
    Asserts.deepEqualWithTolerance(rectangleResult[0].value, convertToImageSize(exceptedResult));

    // new center of the region
    const center = [150 + 25, 50 + 50];

    // Rotate the shape by 45 degrees, rotation handle is 50px above the top anchor
    // we move the rotation handle to the right to rotate the shape by 45 degrees
    AtImageView.drawByDrag(center[0], 0, center[1], 0);

    rectangleResult = await LabelStudio.serialize();
    Asserts.deepEqualWithTolerance(rectangleResult[0].value.rotation, 45);
    // Flip the shape horizontally with non-zero rotation
    const shift = (50 * 2) / Math.SQRT2;
    AtImageView.drawByDrag(center[0] - 25 / Math.SQRT2, center[1] - 25 / Math.SQRT2, shift, shift);

    const secondFlipResult = {
      ...convertToImageSize(
        Shape.byBBox(
          center[0] + 25 / Math.SQRT2 + 50 / Math.SQRT2,
          center[1] + 25 / Math.SQRT2 - 50 / Math.SQRT2,
          50,
          100,
        ).result,
      ),
      rotation: 45,
    };

    rectangleResult = await LabelStudio.serialize();
    // flipping is not very precise, so we have to increase the tolerance
    Asserts.deepEqualWithTolerance(rectangleResult[0].value, secondFlipResult, 0);
  },
);

Data(shapesTable.filter(({ shapeName }) => shapes[shapeName].hasMoveToolTransformer)).Scenario(
  "Resizing a single region with zoom",
  async ({ I, LabelStudio, AtImageView, AtOutliner, AtPanels, Regions, current }) => {
    const { shapeName } = current;
    const Shape = shapes[shapeName];
    const AtDetailsPanel = AtPanels.usePanel(AtPanels.PANEL.DETAILS);

    LabelStudio.setFeatureFlags({
      fflag_fix_front_dev_3377_image_regions_shift_on_resize_280922_short: true,
      fflag_fix_front_dev_3793_relative_coords_short: true,
    });

    I.amOnPage("/");

    LabelStudio.init(getParamsWithShape(shapeName, Shape.params));
    AtDetailsPanel.collapsePanel();
    LabelStudio.waitForObjectsReady();
    AtOutliner.seeRegions(0);
    AtDetailsPanel.seeExpandButton();
    await AtImageView.lookForStage();

    // Draw a region in bbox {x1:50,y1:50,x2:150,y2:150}
    I.pressKey(Shape.hotKey);
    drawShapeByBbox(Shape, 50, 50, 300, 300, AtImageView);
    AtOutliner.seeRegions(1);
    AtOutliner.dontSeeIncompleteRegion();

    // Select the shape
    AtImageView.clickAt(100, 100);
    AtOutliner.seeSelectedRegion();

    // Switch to move tool to force appearance of transformer
    I.pressKey("v");
    const isTransformerExist = await AtImageView.isTransformerExist();

    assert.strictEqual(isTransformerExist, true);

    // it won't be real zoom scale, so we have to compensate it,
    // and in the current specific situation it should be done my maxScale
    const { maxScale } = await AtImageView.getZoomProps();
    AtImageView.setZoom(3 * maxScale, 0, 0);

    await AtImageView.lookForStage();
    const prevRegionBBox = await Regions.getBBoxByRegionIdx(0);

    // Transform the shape
    AtImageView.drawByDrag(150, 150, -150, -150);

    AtImageView.drawByDrag(0, 0, -300, -100);

    AtImageView.drawByDrag(0, 0, 150, 150);

    // Check resulting sizes
    const regionBBox = await Regions.getBBoxByRegionIdx(0);

    Asserts.deepEqualWithTolerance(regionBBox, prevRegionBBox, 2);
  },
);

Data(shapesTable.filter(({ shapeName }) => shapes[shapeName].hasMultiSelectionRotator)).Scenario(
  "Simple rotating",
  async ({ I, LabelStudio, AtImageView, AtOutliner, AtPanels, current }) => {
    const { shapeName } = current;
    const Shape = shapes[shapeName];
    const AtDetailsPanel = AtPanels.usePanel(AtPanels.PANEL.DETAILS);

    I.amOnPage("/");
    LabelStudio.init(getParamsWithShape(shapeName, Shape.params));
    AtDetailsPanel.collapsePanel();
    LabelStudio.waitForObjectsReady();
    AtOutliner.seeRegions(0);
    await AtImageView.lookForStage();
    const canvasSize = await AtImageView.getCanvasSize();

    // Draw a region in bbox {x1:40%,y1:40%,x2:60%,y2:60%}
    const rectangle = {
      x: canvasSize.width * 0.4,
      y: canvasSize.height * 0.4,
      width: canvasSize.width * 0.2,
      height: canvasSize.height * 0.2,
    };
    const rectangleCenter = {
      x: rectangle.x + rectangle.width / 2,
      y: rectangle.y + rectangle.height / 2,
    };

    I.pressKey(Shape.hotKey);
    drawShapeByBbox(Shape, rectangle.x, rectangle.y, rectangle.width, rectangle.height, AtImageView);
    AtOutliner.seeRegions(1);

    // Select the shape and check that transformer appears
    AtImageView.clickAt(rectangleCenter.x, rectangleCenter.y);
    AtOutliner.seeSelectedRegion();

    // Switch to move tool to force appearance of transformer
    I.pressKey("v");
    const isTransformerExist = await AtImageView.isTransformerExist();

    assert.strictEqual(isTransformerExist, true);

    // The rotator anchor must be above top anchor by 50 pixels
    const rotatorPosition = {
      x: rectangleCenter.x,
      y: rectangle.y - 50,
    };

    // Rotate for 45 degrees clockwise
    AtImageView.drawThroughPoints(
      [
        [rotatorPosition.x, rotatorPosition.y],
        [rectangleCenter.x + 500, rectangleCenter.y - 500],
      ],
      "steps",
      5,
    );

    // Check resulting rotation
    const rectangleResult = await LabelStudio.serialize();

    Asserts.deepEqualWithTolerance(Math.round(rectangleResult[0].value.rotation), 45);
  },
);

Data(shapesTable.filter(({ shapeName }) => shapes[shapeName].hasMultiSelectionRotator)).Scenario(
  "Rotating of unrotatable region",
  async ({ I, LabelStudio, AtImageView, AtOutliner, AtPanels, current }) => {
    const { shapeName } = current;
    const Shape = shapes[shapeName];
    const AtDetailsPanel = AtPanels.usePanel(AtPanels.PANEL.DETAILS);

    I.amOnPage("/");
    LabelStudio.init(getParamsWithShape(shapeName, Shape.params));
    AtDetailsPanel.collapsePanel();
    LabelStudio.waitForObjectsReady();
    AtOutliner.seeRegions(0);
    await AtImageView.lookForStage();
    const canvasSize = await AtImageView.getCanvasSize();

    // Draw a region which we cannot rotate 'cause of position near the image's border {x1:0,y1:20%,x2:20%,y2:50%}
    const rectangle = {
      x: 0,
      y: canvasSize.height * 0.2,
      width: canvasSize.width * 0.2,
      height: canvasSize.height * 0.3,
    };
    const rectangleCenter = {
      x: rectangle.x + rectangle.width / 2,
      y: rectangle.y + rectangle.height / 2,
    };

    I.pressKey(Shape.hotKey);
    drawShapeByBbox(Shape, rectangle.x, rectangle.y, rectangle.width, rectangle.height, AtImageView);
    AtOutliner.seeRegions(1);

    // Select the shape and check that transformer appears
    AtImageView.clickAt(rectangleCenter.x, rectangleCenter.y);
    AtOutliner.seeSelectedRegion();

    // Switch to move tool to force appearance of transformer
    I.pressKey("v");
    const isTransformerExist = await AtImageView.isTransformerExist();

    assert.strictEqual(isTransformerExist, true);

    // The rotator anchor must be above top anchor by 50 pixels
    const rotatorPosition = {
      x: rectangleCenter.x,
      y: rectangle.y - 50,
    };

    // Rotate for 45 degrees clockwise
    AtImageView.drawByDrag(rotatorPosition.x, rotatorPosition.y, rectangleCenter.y - rotatorPosition.y + 100, -100);

    // Check the region hasn't been rotated
    const rectangleResult = await LabelStudio.serialize();

    Asserts.deepEqualWithTolerance(rectangleResult[0].value.rotation, 0);
  },
);

Data(shapesTable.filter(({ shapeName }) => shapes[shapeName].hasMultiSelectionRotator)).Scenario(
  "Broke the limits with rotation",
  async ({ I, LabelStudio, AtImageView, AtOutliner, AtPanels, current }) => {
    const { shapeName } = current;
    const Shape = shapes[shapeName];
    const AtDetailsPanel = AtPanels.usePanel(AtPanels.PANEL.DETAILS);

    I.amOnPage("/");
    LabelStudio.init(getParamsWithShape(shapeName, Shape.params));
    AtDetailsPanel.collapsePanel();
    LabelStudio.waitForObjectsReady();
    AtOutliner.seeRegions(0);
    await AtImageView.lookForStage();
    const canvasSize = await AtImageView.getCanvasSize();

    {
      // Draw a region which have limitation at rotating by bbox {x1:5,y1:100,x2:305,y2:350}
      const rectangle = {
        x: 5,
        y: 100,
        width: 300,
        height: 300,
      };
      const rectangleCenter = {
        x: rectangle.x + rectangle.width / 2,
        y: rectangle.y + rectangle.height / 2,
      };

      I.pressKey(Shape.hotKey);
      drawShapeByBbox(Shape, rectangle.x, rectangle.y, rectangle.width, rectangle.height, AtImageView);
      AtOutliner.seeRegions(1);

      // Select the shape and check that transformer appears
      AtImageView.clickAt(rectangleCenter.x, rectangleCenter.y);
      AtOutliner.seeSelectedRegion();

      // Switch to move tool to force appearance of transformer
      I.pressKey("v");
      const isTransformerExist = await AtImageView.isTransformerExist();

      assert.strictEqual(isTransformerExist, true);

      // The rotator anchor must be above top anchor by 50 pixels
      const rotatorPosition = {
        x: rectangleCenter.x,
        y: rectangle.y - 50,
      };

      // Rotate for 45 degrees clockwise
      AtImageView.drawThroughPoints(
        [
          [rotatorPosition.x, rotatorPosition.y],
          [rectangleCenter.x + 500, rectangleCenter.y - 500],
        ],
        "steps",
        200,
      );

      // Check that we cannot rotate it like this
      let rectangleResult = await LabelStudio.serialize();

      assert.notStrictEqual(Math.round(rectangleResult[0].value.rotation), 0, "Region must be rotated");
      assert.notStrictEqual(Math.round(rectangleResult[0].value.rotation), 45, "Angle must not be 45 degrees");

      // Undo changes
      I.pressKey(["CommandOrControl", "z"]);

      // Rotate for 90 degrees clockwise instead
      AtImageView.drawThroughPoints(
        [
          [rotatorPosition.x, rotatorPosition.y],
          [rectangle.x + rectangle.width + 100, rectangleCenter.y],
          [rectangle.x + rectangle.width + 200, rectangleCenter.y],
        ],
        "steps",
        200,
      );

      // Check the resulted rotation
      rectangleResult = await LabelStudio.serialize();

      Asserts.deepEqualWithTolerance(rectangleResult[0].value.rotation, 90, "Angle must be 90 degrees");
      // remove region
      I.pressKey("Backspace");
    }

    I.say("Check that it works same way with right border");

    {
      // Draw a region which have limitation at rotating by bbox {x1:100% - 305,y1:100,x2:100% - 5,y2:350}
      const rectangle = {
        x: canvasSize.width - 305,
        y: 100,
        width: 300,
        height: 300,
      };
      const rectangleCenter = {
        x: rectangle.x + rectangle.width / 2,
        y: rectangle.y + rectangle.height / 2,
      };

      I.pressKey(Shape.hotKey);
      drawShapeByBbox(Shape, rectangle.x, rectangle.y, rectangle.width, rectangle.height, AtImageView);
      AtOutliner.seeRegions(1);

      // Select the shape and check that transformer appears
      AtImageView.clickAt(rectangleCenter.x, rectangleCenter.y);
      AtOutliner.seeSelectedRegion();

      // Switch to move tool to force appearance of transformer
      I.pressKey("v");
      const isTransformerExist = await AtImageView.isTransformerExist();

      assert.strictEqual(isTransformerExist, true);

      // The rotator anchor must be above top anchor by 50 pixels
      const rotatorPosition = {
        x: rectangleCenter.x,
        y: rectangle.y - 50,
      };

      // Rotate for 45 degrees clockwise
      AtImageView.drawThroughPoints(
        [
          [rotatorPosition.x, rotatorPosition.y],
          [rectangleCenter.x + 500, rectangleCenter.y - 500],
        ],
        "steps",
        200,
      );

      // Check the resulted rotation
      let rectangleResult = await LabelStudio.serialize();

      assert.notStrictEqual(Math.round(rectangleResult[0].value.rotation), 0);
      assert.notStrictEqual(Math.round(rectangleResult[0].value.rotation), 45);

      // Undo changes
      I.pressKey(["CommandOrControl", "z"]);

      // Rotate for 90 degrees clockwise instead
      AtImageView.drawThroughPoints(
        [
          [rotatorPosition.x, rotatorPosition.y],
          [rectangle.x + rectangle.width + 100, rectangleCenter.y],
          [rectangle.x + rectangle.width + 200, rectangleCenter.y],
        ],
        "steps",
        200,
      );

      // Check that we cannot rotate it like this
      rectangleResult = await LabelStudio.serialize();

      Asserts.deepEqualWithTolerance(rectangleResult[0].value.rotation, 90);
    }
  },
);

Data(shapesTable.filter(({ shapeName }) => shapes[shapeName].hasMultiSelectionRotator)).Scenario(
  "Check the initial rotation of transformer for the single region",
  async ({ I, LabelStudio, AtImageView, AtOutliner, AtPanels, current }) => {
    const { shapeName } = current;
    const Shape = shapes[shapeName];
    const AtDetailsPanel = AtPanels.usePanel(AtPanels.PANEL.DETAILS);

    I.amOnPage("/");
    LabelStudio.init(getParamsWithShape(shapeName, Shape.params));
    AtDetailsPanel.collapsePanel();
    LabelStudio.waitForObjectsReady();
    AtOutliner.seeRegions(0);
    await AtImageView.lookForStage();

    const bbox = {
      x: 100,
      y: 100,
      width: 100,
      height: 100,
    };
    const bboxCenter = {
      x: bbox.x + bbox.width / 2,
      y: bbox.y + bbox.height / 2,
    };

    // Draw a region
    I.pressKey(Shape.hotKey);
    drawShapeByBbox(Shape, bbox.x, bbox.y, bbox.width, bbox.height, AtImageView);
    AtOutliner.seeRegions(1);

    // Select it
    AtImageView.clickAt(bboxCenter.x, bboxCenter.y);
    AtOutliner.seeSelectedRegion();

    // Switch to move tool to force appearance of transformer
    I.pressKey("v");
    const isTransformerExist = await AtImageView.isTransformerExist();

    assert.strictEqual(isTransformerExist, true);

    // The rotator anchor must be above top anchor by 50 pixels
    let rotatorPosition = {
      x: bboxCenter.x,
      y: bbox.y - 50,
    };

    // Rotate for 90 degrees clockwise
    AtImageView.drawThroughPoints(
      [
        [rotatorPosition.x, rotatorPosition.y],
        [bbox.x + bbox.width + 100, bboxCenter.y],
        [bbox.x + bbox.width + 200, bboxCenter.y],
      ],
      "steps",
      10,
    );

    // Unselect current region
    I.pressKey("u");
    AtOutliner.dontSeeSelectedRegion();

    // Select it again
    AtImageView.clickAt(bboxCenter.x, bboxCenter.y);
    AtOutliner.seeSelectedRegion();

    // Wait for transformer to be properly initialized after re-selection
    I.waitTicks(3);

    // The trick is that we turn it further, based on the assumption that transformer appears in rotated state on region selection
    // So let's try to rotate it
    // The rotator anchor must be to the right of the right anchor by 50 pixels

    rotatorPosition = {
      x: bbox.x + bbox.width + 50,
      y: bboxCenter.y,
    };

    // Rotate for 90 degrees clockwise once again
    AtImageView.drawThroughPoints(
      [
        [rotatorPosition.x, rotatorPosition.y],
        [bboxCenter.x, bbox.y + bbox.height + 100],
        [bboxCenter.x, bbox.y + bbox.height + 200],
      ],
      "steps",
      10,
    );

    // Check that region has been rotated for 180 degrees
    const rectangleResult = await LabelStudio.serialize();

    Asserts.deepEqualWithTolerance(rectangleResult[0].value.rotation, 180);
  },
);

Data(shapesTable.filter(({ shapeName }) => shapes[shapeName].hasMultiSelectionRotator)).Scenario(
  "Check the initial rotation of transformer for the couple of regions",
  async ({ I, LabelStudio, AtImageView, AtOutliner, AtPanels, current }) => {
    const { shapeName } = current;
    const Shape = shapes[shapeName];
    const AtDetailsPanel = AtPanels.usePanel(AtPanels.PANEL.DETAILS);

    I.amOnPage("/");
    LabelStudio.init(getParamsWithShape(shapeName, Shape.params));
    AtDetailsPanel.collapsePanel();
    LabelStudio.waitForObjectsReady();
    AtOutliner.seeRegions(0);
    await AtImageView.lookForStage();

    const bbox1 = {
      x: 100,
      y: 100,
      width: 40,
      height: 40,
    };

    const bbox2 = {
      x: 160,
      y: 160,
      width: 40,
      height: 40,
    };

    const transformerBbox = {
      x: bbox1.x,
      y: bbox1.y,
      width: bbox2.x + bbox2.width - bbox1.x,
      height: bbox2.y + bbox2.height - bbox1.y,
    };
    const transformerBboxCenter = {
      x: transformerBbox.x + transformerBbox.width / 2,
      y: transformerBbox.y + transformerBbox.height / 2,
    };

    // Draw the first region
    I.pressKey(Shape.hotKey);
    drawShapeByBbox(Shape, bbox1.x, bbox1.y, bbox1.width, bbox1.height, AtImageView);
    AtOutliner.seeRegions(1);

    // Draw the second region
    I.pressKey(Shape.hotKey);
    drawShapeByBbox(Shape, bbox2.x, bbox2.y, bbox2.width, bbox2.height, AtImageView);
    AtOutliner.seeRegions(2);

    // Switch to move tool and select them
    I.pressKey("v");
    AtImageView.drawThroughPoints([
      [transformerBbox.x - 20, transformerBbox.y - 20],
      [transformerBbox.x + transformerBbox.width + 20, transformerBbox.y + transformerBbox.height + 20],
    ]);
    AtOutliner.seeSelectedRegion();

    // The rotator anchor must be above top anchor by 50 pixels
    const rotatorPosition = {
      x: transformerBboxCenter.x,
      y: transformerBbox.y - 50,
    };

    // Rotate for 180 degrees clockwise
    AtImageView.drawThroughPoints(
      [
        [rotatorPosition.x, rotatorPosition.y],
        [transformerBboxCenter.x + 100, transformerBboxCenter.y + 100],
        [transformerBboxCenter.x, transformerBboxCenter.y + 100],
        [transformerBboxCenter.x, transformerBboxCenter.y + 200],
      ],
      "steps",
      10,
    );

    // Unselect current regions
    I.pressKey("u");
    AtOutliner.dontSeeSelectedRegion();

    // Select them again
    AtImageView.drawThroughPoints([
      [transformerBbox.x - 20, transformerBbox.y - 20],
      [transformerBbox.x + transformerBbox.width + 20, transformerBbox.y + transformerBbox.height + 20],
    ]);
    AtOutliner.seeSelectedRegion();

    // Wait for transformer to be properly initialized after re-selection
    I.waitTicks(3);

    // So we have couple of rotated regions, let's check if rotates still appears above the top anchor

    // Rotate for 90 degrees clockwise
    AtImageView.drawThroughPoints(
      [
        [rotatorPosition.x, rotatorPosition.y],
        [transformerBboxCenter.x + 100, transformerBboxCenter.y],
        [transformerBboxCenter.x + 200, transformerBboxCenter.y],
      ],
      "steps",
      10,
    );

    // Check that region has been rotated for (180 + 90) degrees
    const rectangleResult = await LabelStudio.serialize();

    Asserts.deepEqualWithTolerance(rectangleResult[0].value.rotation, 180 + 90);
  },
);

// KeyPoints are transformed unpredictable so for now just skip them
Data(
  shapesTable.filter(({ shapeName }) => shapes[shapeName].hasMultiSelectionTransformer && shapeName !== "KeyPoint"),
).Scenario(
  "Transforming of multiple regions",
  async ({ I, LabelStudio, AtImageView, AtOutliner, AtPanels, current }) => {
    const { shapeName } = current;
    const Shape = shapes[shapeName];
    const AtDetailsPanel = AtPanels.usePanel(AtPanels.PANEL.DETAILS);

    I.amOnPage("/");
    LabelStudio.init(getParamsWithShape(shapeName, Shape.params));
    AtDetailsPanel.collapsePanel();
    LabelStudio.waitForObjectsReady();
    AtOutliner.seeRegions(0);
    await AtImageView.lookForStage();
    const canvasSize = await AtImageView.getCanvasSize();
    const convertToImageSize = Helpers.getSizeConvertor(canvasSize.width, canvasSize.height);

    const bbox1 = {
      x: 100,
      y: 100,
      width: 50,
      height: 50,
    };

    const bbox2 = {
      x: 150,
      y: 150,
      width: 50,
      height: 50,
    };

    const transformerBbox = {
      x: bbox1.x,
      y: bbox1.y,
      width: bbox2.x + bbox2.width - bbox1.x,
      height: bbox2.y + bbox2.height - bbox1.y,
    };
    const transformerBboxCenter = {
      get x() {
        return transformerBbox.x + transformerBbox.width / 2;
      },
      get y() {
        return transformerBbox.y + transformerBbox.height / 2;
      },
    };

    // Draw the first region
    I.pressKey(Shape.hotKey);
    drawShapeByBbox(Shape, bbox1.x, bbox1.y, bbox1.width, bbox1.height, AtImageView);
    AtOutliner.seeRegions(1);

    // Draw the second region
    I.pressKey(Shape.hotKey);
    I.pressKeyDown("CommandOrControl");
    drawShapeByBbox(Shape, bbox2.x, bbox2.y, bbox2.width, bbox2.height, AtImageView);
    I.pressKeyUp("CommandOrControl");
    AtOutliner.seeRegions(2);

    // Switch to move tool and select them
    I.pressKey("v");
    AtImageView.drawThroughPoints([
      [transformerBbox.x - 20, transformerBbox.y - 20],
      [transformerBbox.x + transformerBbox.width + 20, transformerBbox.y + transformerBbox.height + 20],
    ]);
    AtOutliner.seeSelectedRegion();
    // Scale the shapes vertically
    AtImageView.drawByDrag(transformerBboxCenter.x, transformerBbox.y + transformerBbox.height, 0, 50);
    transformerBbox.height += 50;
    AtOutliner.seeSelectedRegion();
    // Scale the shapes horizontally
    AtImageView.drawByDrag(transformerBbox.x + transformerBbox.width, transformerBboxCenter.y, 50, 0);
    transformerBbox.width += 50;
    AtOutliner.seeSelectedRegion();
    // Scale the shapes in both directions
    AtImageView.drawByDrag(
      transformerBbox.x + transformerBbox.width,
      transformerBbox.y + transformerBbox.height,
      50,
      50,
    );
    transformerBbox.height += 50;
    transformerBbox.width += 50;
    AtOutliner.seeSelectedRegion();

    // Check resulting sizes
    const rectangleResult = await LabelStudio.serialize();
    const exceptedResult1 = Shape.byBBox(bbox1.x, bbox1.y, bbox1.width + 50, bbox1.height + 50).result;
    const exceptedResult2 = Shape.byBBox(bbox2.x + 50, bbox2.y + 50, bbox2.width + 50, bbox2.height + 50).result;

    Asserts.deepEqualWithTolerance(rectangleResult[0].value, convertToImageSize(exceptedResult1));
    Asserts.deepEqualWithTolerance(rectangleResult[1].value, convertToImageSize(exceptedResult2));
  },
);

Data(shapesTable.filter(({ shapeName }) => shapes[shapeName].hasMultiSelectionTransformer)).Scenario(
  "Move regions by drag",
  async ({ I, LabelStudio, AtImageView, AtOutliner, AtPanels, current }) => {
    const { shapeName } = current;
    const Shape = shapes[shapeName];
    const AtDetailsPanel = AtPanels.usePanel(AtPanels.PANEL.DETAILS);

    I.amOnPage("/");
    LabelStudio.init(getParamsWithShape(shapeName, Shape.params));
    AtDetailsPanel.collapsePanel();
    LabelStudio.waitForObjectsReady();
    AtOutliner.seeRegions(0);
    await AtImageView.lookForStage();
    const canvasSize = await AtImageView.getCanvasSize();
    const convertToImageSize = Helpers.getSizeConvertor(canvasSize.width, canvasSize.height);

    const bbox1 = {
      x: 100,
      y: 100,
      width: 20,
      height: 20,
    };
    const bbox1Center = {
      x: bbox1.x + bbox1.width / 2,
      y: bbox1.y + bbox1.height / 2,
    };

    const bbox2 = {
      x: 140,
      y: 140,
      width: 20,
      height: 20,
    };
    const bbox2Center = {
      x: bbox2.x + bbox2.width / 2,
      y: bbox2.y + bbox2.height / 2,
    };

    const transformerBbox = {
      x: bbox1.x,
      y: bbox1.y,
      width: bbox2.x + bbox2.width - bbox1.x,
      height: bbox2.y + bbox2.height - bbox1.y,
    };
    const transformerBboxCenter = {
      x: transformerBbox.x + transformerBbox.width / 2,
      y: transformerBbox.y + transformerBbox.height / 2,
    };

    // Draw the first region
    I.pressKey(Shape.hotKey);
    drawShapeByBbox(Shape, bbox1.x, bbox1.y, bbox1.width, bbox1.height, AtImageView);
    AtOutliner.seeRegions(1);

    // Draw the second region
    I.pressKey(Shape.hotKey);
    drawShapeByBbox(Shape, bbox2.x, bbox2.y, bbox2.width, bbox2.height, AtImageView);
    AtOutliner.seeRegions(2);

    if (shapeName === "KeyPoint") {
      // Draw more points to get more space in transformer
      I.pressKey(Shape.hotKey);
      drawShapeByBbox(Shape, bbox1.x, bbox1.y, 0, 0, AtImageView);
      AtOutliner.seeRegions(3);

      I.pressKey(Shape.hotKey);
      drawShapeByBbox(Shape, bbox2.x + bbox2.width, bbox2.y + bbox2.height, 0, 0, AtImageView);
      AtOutliner.seeRegions(4);
    }

    // Switch to move tool and select them
    I.pressKey("v");
    AtImageView.drawThroughPoints([
      [transformerBbox.x - 20, transformerBbox.y - 20],
      [transformerBbox.x + transformerBbox.width + 20, transformerBbox.y + transformerBbox.height + 20],
    ]);
    AtOutliner.seeSelectedRegion();

    const dragShapes = (startPoint, shift, rememberShift = true) => {
      AtImageView.drawThroughPoints(
        [
          [startPoint.x, startPoint.y],
          [startPoint.x + shift.x, startPoint.y + shift.y],
          [startPoint.x + shift.x, startPoint.y + shift.y],
        ],
        "steps",
        10,
      );
      AtOutliner.seeSelectedRegion();

      if (rememberShift) {
        bbox1Center.x += shift.x;
        bbox1Center.y += shift.y;
        bbox2Center.x += shift.x;
        bbox2Center.y += shift.y;
        transformerBboxCenter.x += shift.x;
        transformerBboxCenter.y += shift.y;
      }
    };

    // Drag shapes by holding onto the first region
    dragShapes(bbox1Center, { x: 100, y: 0 });
    // Drag shapes by holding onto the second region
    dragShapes(bbox2Center, { x: 0, y: 100 });
    // Drag shapes by holding onto the transformer background
    dragShapes(transformerBboxCenter, { x: 150, y: 150 }, false);
    // Move back throught history to check that transformer's background moving with it
    I.pressKey(["CommandOrControl", "z"]);
    // Drag shapes by holding onto the transformer background again
    dragShapes(transformerBboxCenter, { x: 100, y: 100 }, false);

    // Check that dragging was successful
    const rectangleResult = await LabelStudio.serialize();
    const exceptedResult1 = Shape.byBBox(bbox1.x + 200, bbox1.y + 200, bbox1.width, bbox1.height).result;
    const exceptedResult2 = Shape.byBBox(bbox2.x + 200, bbox2.y + 200, bbox2.width, bbox2.height).result;

    Asserts.deepEqualWithTolerance(rectangleResult[0].value, convertToImageSize(exceptedResult1));
    Asserts.deepEqualWithTolerance(rectangleResult[1].value, convertToImageSize(exceptedResult2));
  },
);

Data(shapesTable.filter(({ shapeName }) => shapes[shapeName].hasMultiSelectionRotator)).Scenario(
  "Limitation of dragging a single rotated region",
  async ({ I, LabelStudio, AtImageView, AtOutliner, AtPanels, current }) => {
    const { shapeName } = current;
    const Shape = shapes[shapeName];
    const AtDetailsPanel = AtPanels.usePanel(AtPanels.PANEL.DETAILS);

    I.amOnPage("/");
    LabelStudio.init(getParamsWithShape(shapeName, Shape.params));
    AtDetailsPanel.collapsePanel();
    LabelStudio.waitForObjectsReady();
    AtOutliner.seeRegions(0);
    await AtImageView.lookForStage();
    const canvasSize = await AtImageView.getCanvasSize();

    const bbox = {
      x: canvasSize.width / 2 - 50,
      y: canvasSize.height / 2 - 50,
      width: 100,
      height: 100,
    };
    const bboxCenter = {
      x: bbox.x + bbox.width / 2,
      y: bbox.y + bbox.height / 2,
    };

    // Draw a region
    I.pressKey(Shape.hotKey);
    drawShapeByBbox(Shape, bbox.x, bbox.y, bbox.width, bbox.height, AtImageView);
    AtOutliner.seeRegions(1);

    // Select it
    AtImageView.clickAt(bboxCenter.x, bboxCenter.y);
    AtOutliner.seeSelectedRegion();

    // Switch to move tool to force appearance of transformer
    I.pressKey("v");
    const isTransformerExist = await AtImageView.isTransformerExist();

    assert.strictEqual(isTransformerExist, true);

    // The rotator anchor must be above top anchor by 50 pixels
    const rotatorPosition = {
      x: bboxCenter.x,
      y: bbox.y - 50,
    };

    // Rotate for 180 degrees clockwise
    AtImageView.drawThroughPoints(
      [
        [rotatorPosition.x, rotatorPosition.y],
        [bboxCenter.x + 100, bboxCenter.y],
        [bboxCenter.x, bboxCenter.y + 100],
        [bboxCenter.x, bboxCenter.y + 200],
      ],
      "steps",
      10,
    );

    // When we have the  rotated region, we need to check its behavior when we drag it across the borders of the image
    let rectangleResult;

    I.say("Drag the region over the left border");
    AtImageView.drawThroughPoints(
      [
        [bboxCenter.x, bboxCenter.y],
        [-500, bboxCenter.y],
      ],
      "steps",
      20,
    );
    AtOutliner.seeSelectedRegion();
    // moving of the region should be constrained by borders
    rectangleResult = await LabelStudio.serialize();
    Asserts.deepEqualWithTolerance(
      (rectangleResult[0].value.x * canvasSize.width) / 100,
      Shape.byBBox(bbox.width, bbox.y + bbox.height, -bbox.width, -bbox.height).result.x,
    );
    // reset position by undo
    I.pressKey(["CommandOrControl", "z"]);

    I.say("Drag the region over the top border");
    AtImageView.drawThroughPoints(
      [
        [bboxCenter.x, bboxCenter.y],
        [bboxCenter.x, -500],
      ],
      "steps",
      20,
    );
    AtOutliner.seeSelectedRegion();
    // moving of the region should be constrained by borders
    rectangleResult = await LabelStudio.serialize();
    Asserts.deepEqualWithTolerance(
      (rectangleResult[0].value.y * canvasSize.height) / 100,
      Shape.byBBox(bbox.x + bbox.width, bbox.height, -bbox.width, -bbox.height).result.y,
    );
    // reset position by undo
    I.pressKey(["CommandOrControl", "z"]);

    I.say("Drag the region over the right border");
    AtImageView.drawThroughPoints(
      [
        [bboxCenter.x, bboxCenter.y],
        [canvasSize.width + 500, bboxCenter.y],
      ],
      "steps",
      20,
    );
    AtOutliner.seeSelectedRegion();
    // moving of the region should be constrained by borders
    rectangleResult = await LabelStudio.serialize();

    Asserts.deepEqualWithTolerance(
      (rectangleResult[0].value.x * canvasSize.width) / 100,
      Shape.byBBox(canvasSize.width, bbox.y + bbox.height, -bbox.width, -bbox.height).result.x,
    );
    // reset position by undo
    I.pressKey(["CommandOrControl", "z"]);

    I.say("Drag the region over the bottom border");
    AtImageView.drawThroughPoints(
      [
        [bboxCenter.x, bboxCenter.y],
        [bboxCenter.x, canvasSize.height + 500],
      ],
      "steps",
      20,
    );
    AtOutliner.seeSelectedRegion();
    // moving of the region should be constrained by borders
    rectangleResult = await LabelStudio.serialize();
    Asserts.deepEqualWithTolerance(
      (rectangleResult[0].value.y * canvasSize.height) / 100,
      Shape.byBBox(bbox.x + bbox.width, canvasSize.height, -bbox.width, -bbox.height).result.y,
    );
  },
);

Data(shapesTable.filter(({ shapeName }) => shapes[shapeName].hasMultiSelectionRotator)).Scenario(
  "Limitation of dragging a couple of rotated regions",
  async ({ I, LabelStudio, AtImageView, AtOutliner, AtPanels, current }) => {
    const { shapeName } = current;
    const Shape = shapes[shapeName];
    const AtDetailsPanel = AtPanels.usePanel(AtPanels.PANEL.DETAILS);

    I.amOnPage("/");
    LabelStudio.init(getParamsWithShape(shapeName, Shape.params));
    AtDetailsPanel.collapsePanel();
    LabelStudio.waitForObjectsReady();
    AtOutliner.seeRegions(0);
    await AtImageView.lookForStage();
    const canvasSize = await AtImageView.getCanvasSize();

    const bbox1 = {
      x: canvasSize.width / 2 - 50,
      y: canvasSize.height / 2 - 50,
      width: 50,
      height: 50,
    };

    const bbox2 = {
      x: canvasSize.width / 2,
      y: canvasSize.height / 2,
      width: 50,
      height: 50,
    };

    const transformerBbox = {
      x: bbox1.x,
      y: bbox1.y,
      width: bbox2.x + bbox2.width - bbox1.x,
      height: bbox2.y + bbox2.height - bbox1.y,
    };
    const transformerBboxCenter = {
      get x() {
        return transformerBbox.x + transformerBbox.width / 2;
      },
      get y() {
        return transformerBbox.y + transformerBbox.height / 2;
      },
    };

    // Draw the first region
    I.pressKey(Shape.hotKey);
    drawShapeByBbox(Shape, bbox1.x, bbox1.y, bbox1.width, bbox1.height, AtImageView);
    AtOutliner.seeRegions(1);

    // Draw the second region
    I.pressKey(Shape.hotKey);
    I.pressKeyDown("CommandOrControl");
    drawShapeByBbox(Shape, bbox2.x, bbox2.y, bbox2.width, bbox2.height, AtImageView);
    I.pressKeyUp("CommandOrControl");
    AtOutliner.seeRegions(2);

    // Select them by move tool
    I.pressKey("v");
    AtImageView.drawThroughPoints(
      [
        [transformerBbox.x - 50, transformerBbox.y - 50],
        [transformerBbox.x + transformerBbox.width + 50, transformerBbox.y + transformerBbox.height + 50],
      ],
      "steps",
      10,
    );
    AtOutliner.seeSelectedRegion();

    // The rotator anchor must be above top anchor by 50 pixels
    const rotatorPosition = {
      x: transformerBboxCenter.x,
      y: transformerBbox.y - 50,
    };

    // Rotate for 180 degrees clockwise
    AtImageView.drawThroughPoints(
      [
        [rotatorPosition.x, rotatorPosition.y],
        [transformerBboxCenter.x + 100, transformerBboxCenter.y],
        [transformerBboxCenter.x, transformerBboxCenter.y + 100],
        [transformerBboxCenter.x, transformerBboxCenter.y + 200],
      ],
      "steps",
      10,
    );

    // When we have the  rotated region, we need to check its behavior when we drag it across the borders of the image
    let rectangleResult;

    I.say("Drag the region over the left border");
    AtImageView.drawThroughPoints(
      [
        [transformerBboxCenter.x, transformerBboxCenter.y],
        [-500, transformerBboxCenter.y],
      ],
      "steps",
      20,
    );
    AtOutliner.seeSelectedRegion();
    // moving of the region should be constrained by borders
    rectangleResult = await LabelStudio.serialize();
    Asserts.deepEqualWithTolerance(
      (rectangleResult[0].value.x * canvasSize.width) / 100,
      Shape.byBBox(transformerBbox.width, transformerBbox.y + transformerBbox.height, -bbox1.width, -bbox1.height)
        .result.x,
    );
    Asserts.deepEqualWithTolerance(
      (rectangleResult[1].value.x * canvasSize.width) / 100,
      Shape.byBBox(bbox2.width, transformerBbox.y + bbox2.height, -bbox2.width, -bbox2.height).result.x,
    );
    // reset position by undo
    I.pressKey(["CommandOrControl", "z"]);

    I.say("Drag the region over the top border");
    AtImageView.drawThroughPoints(
      [
        [transformerBboxCenter.x, transformerBboxCenter.y],
        [transformerBboxCenter.x, -500],
      ],
      "steps",
      20,
    );
    AtOutliner.seeSelectedRegion();
    // moving of the region should be constrained by borders
    rectangleResult = await LabelStudio.serialize();
    Asserts.deepEqualWithTolerance(
      (rectangleResult[0].value.y * canvasSize.height) / 100,
      Shape.byBBox(transformerBbox.x + transformerBbox.width, transformerBbox.height, -bbox1.width, -bbox1.height)
        .result.y,
    );
    Asserts.deepEqualWithTolerance(
      (rectangleResult[1].value.y * canvasSize.height) / 100,
      Shape.byBBox(transformerBbox.x + bbox2.width, bbox2.height, -bbox2.width, -bbox2.height).result.y,
    );
    // reset position by undo
    I.pressKey(["CommandOrControl", "z"]);

    I.say("Drag the region over the right border");
    AtImageView.drawThroughPoints(
      [
        [transformerBboxCenter.x, transformerBboxCenter.y],
        [canvasSize.width + 500, transformerBboxCenter.y],
      ],
      "steps",
      20,
    );
    AtOutliner.seeSelectedRegion();
    // moving of the region should be constrained by borders
    rectangleResult = await LabelStudio.serialize();

    Asserts.deepEqualWithTolerance(
      (rectangleResult[0].value.x * canvasSize.width) / 100,
      Shape.byBBox(canvasSize.width, transformerBbox.y + transformerBbox.height, -bbox1.width, -bbox1.height).result.x,
    );
    Asserts.deepEqualWithTolerance(
      (rectangleResult[1].value.x * canvasSize.width) / 100,
      Shape.byBBox(
        canvasSize.width - transformerBbox.width + bbox2.width,
        transformerBbox.y + bbox2.height,
        -bbox2.width,
        -bbox2.height,
      ).result.x,
    );
    // reset position by undo
    I.pressKey(["CommandOrControl", "z"]);

    I.say("Drag the region over the bottom border");
    AtImageView.drawThroughPoints(
      [
        [transformerBboxCenter.x, transformerBboxCenter.y],
        [transformerBboxCenter.x, canvasSize.height + 500],
      ],
      "steps",
      20,
    );
    AtOutliner.seeSelectedRegion();
    // moving of the region should be constrained by borders
    rectangleResult = await LabelStudio.serialize();
    Asserts.deepEqualWithTolerance(
      (rectangleResult[0].value.y * canvasSize.height) / 100,
      Shape.byBBox(transformerBbox.x + transformerBbox.width, canvasSize.height, -bbox1.width, -bbox1.height).result.y,
    );
    Asserts.deepEqualWithTolerance(
      (rectangleResult[1].value.y * canvasSize.height) / 100,
      Shape.byBBox(
        transformerBbox.x + bbox2.width,
        canvasSize.height - transformerBbox.height + bbox2.height,
        -bbox2.width,
        -bbox2.height,
      ).result.y,
    );
  },
);

Data(shapesTable.filter(({ shapeName }) => shapes[shapeName].hasRotator)).Scenario(
  "Rotating the region near the border",
  async ({ I, LabelStudio, AtImageView, AtOutliner, AtPanels, current }) => {
    const { shapeName } = current;
    const Shape = shapes[shapeName];
    const AtDetailsPanel = AtPanels.usePanel(AtPanels.PANEL.DETAILS);

    I.amOnPage("/");
    LabelStudio.init(getParamsWithShape(shapeName, Shape.params));
    AtDetailsPanel.collapsePanel();
    LabelStudio.waitForObjectsReady();
    AtOutliner.seeRegions(0);
    await AtImageView.lookForStage();
    const canvasSize = await AtImageView.getCanvasSize();

    const bbox = {
      x: canvasSize.width - Math.ceil(Math.sqrt(100 ** 2 + 100 ** 2)) / 2 - 50,
      y: canvasSize.height - Math.ceil(Math.sqrt(100 ** 2 + 100 ** 2)) / 2 - 50,
      width: 100,
      height: 100,
    };

    const bboxCenter = {
      x: bbox.x + bbox.width / 2,
      y: bbox.y + bbox.height / 2,
    };

    // Draw the region
    I.pressKey(Shape.hotKey);
    drawShapeByBbox(Shape, bbox.x, bbox.y, bbox.width, bbox.height, AtImageView);
    AtOutliner.seeRegions(1);

    // Select it
    AtImageView.clickAt(bboxCenter.x, bboxCenter.y);
    AtOutliner.seeSelectedRegion();

    // The rotator anchor must be above top anchor by 50 pixels
    const rotatorPosition = {
      x: bboxCenter.x,
      y: bbox.y - 50,
    };

    // Check 7 different rotations
    const rotatorWayPoints = [[rotatorPosition.x, rotatorPosition.y]];
    const angle45 = Math.PI / 4;

    for (let i = 0; i < 8; i++) {
      const angle = angle45 * i;

      rotatorWayPoints.push([bboxCenter.x + Math.sin(angle) * 100, bboxCenter.y - Math.cos(angle) * 100]);
      rotatorWayPoints.push([bboxCenter.x + Math.sin(angle) * 1000, bboxCenter.y - Math.cos(angle) * 1000]);

      // Rotate clockwise by 45 * i degrees
      AtImageView.drawThroughPoints(rotatorWayPoints, "steps", 10);
      AtOutliner.seeSelectedRegion();
      // Check that rotating was successful
      const rectangleResult = await LabelStudio.serialize();

      Asserts.deepEqualWithTolerance(Math.round(rectangleResult[0].value.rotation), 45 * i);

      // undo rotation
      I.pressKey(["CommandOrControl", "z"]);
      // clear unnecessary waypoints
      rotatorWayPoints.pop();
    }
  },
);