DEV-1367: Image size problems (#411)

## changes
- fix the calculation of the stage size on the window resizing at a given image width
- add frame to crop the image to the stage size
- add height and maxheight params
- set max width as 100% by default

## commits
* Add shapes ignoring when dragging an image

* Add max-height attr

* Add test for canvas resize problem on setting custom image width

* [fix] Canvas resizing while custom image width is set

* Fix tests

* Fix tests

* Ignore not meaningful error

* Make changes accourding to comments

- set heuristic maxHeight default value
- add comment
- remove unused volatile
- remove duplicate functionality

* test: Fix config according to appearence of maxHeight

* test: Fix tests according to changing of default maxWidth value

* fix:Add removing default tool on all tools removing

* test: Allow to run tests over local start

Solved by preventing preserving selected tool

* fix: DEV-1367: Fix zooming in while space is available

Co-authored-by: Max Tkachenko <[email protected]>
Co-authored-by: hlomzik <[email protected]>

Author: 3 people

e2e/tests/empty-labels.test.js

@@ -45,9 +45,9 @@ examples.forEach(example => {
     if (regionsCount) {
       const restored = await LabelStudio.serialize();
 
-      Asserts.notDeepEqualWithTolerance(result, restored);
-      for (let i = result.length; i--; ) {
-        Asserts.deepEqualWithTolerance(Helpers.omitBy(result[i], isLabels), restored[i]);
+      Asserts.notDeepEqualWithTolerance(result, restored, 1);
+      for (let i = result.length; i--;) {
+        Asserts.deepEqualWithTolerance(Helpers.omitBy(result[i], isLabels), restored[i], 1);
       }
     }
   });
@@ -81,11 +81,12 @@ examples.forEach(example => {
     if (regionsCount) {
       const restored = await LabelStudio.serialize();
 
-      Asserts.notDeepEqualWithTolerance(result, restored);
-      for (let i = result.length; i--; ) {
+      Asserts.notDeepEqualWithTolerance(result, restored, 1);
+      for (let i = result.length; i--;) {
         Asserts.deepEqualWithTolerance(
           Helpers.omitBy(result[i], (val, key) => key === "from_name" || isLabels(val, key)),
           Helpers.omitBy(restored[i], (val, key) => key === "from_name" || isLabels(val, key)),
+          1,
         );
       }
     }
@@ -163,8 +164,8 @@ const MULTIPLE_TYPE = "multiple";
 
     const restored = await LabelStudio.serialize();
 
-    Asserts.notDeepEqualWithTolerance(result[0], restored[0]);
-    Asserts.deepEqualWithTolerance(Helpers.omitBy(result[0], isLabels), Helpers.omitBy(restored[0], isLabels));
+    Asserts.notDeepEqualWithTolerance(result[0], restored[0], 1);
+    Asserts.deepEqualWithTolerance(Helpers.omitBy(result[0], isLabels), Helpers.omitBy(restored[0], isLabels), 1);
     assert.strictEqual(restored[0].value.labels.length, 0);
     await clickLabelWithLengthExpection(2, 1, 1);
     switch (type) {
@@ -227,5 +228,6 @@ Scenario(`Consistency of empty labels`, async ({ I, LabelStudio, AtSidebar, AtIm
   Asserts.deepEqualWithTolerance(
     restored[0].value,
     convertToImageSize({ x: 200, y: 200, width: 100, height: 100, rotation: 0, rectanglelabels: [] }),
+    1,
   );
 });

e2e/tests/helpers.js

@@ -9,7 +9,13 @@
  * @param {object[]} params.predictions
  * @param {function} done
  */
-const initLabelStudio = async ({ config, data, annotations = [{ result: [] }], predictions = [] }, done) => {
+const initLabelStudio = async ({ 
+  config, 
+  data, 
+  annotations = [{ result: [] }], 
+  predictions = [],
+  settings = {},
+},  done) => {
   if (window.Konva && window.Konva.stages.length) window.Konva.stages.forEach(stage => stage.destroy());
 
   const interfaces = [
@@ -32,7 +38,7 @@ const initLabelStudio = async ({ config, data, annotations = [{ result: [] }], p
   const task = { data, annotations, predictions };
 
   window.LabelStudio.destroyAll();
-  new window.LabelStudio("label-studio", { interfaces, config, task });
+  new window.LabelStudio("label-studio", { interfaces, config, task, settings });
   done();
 };
 
@@ -54,7 +60,10 @@ const waitForImage = async done => {
   const img = document.querySelector("[alt=LS]");
 
   if (!img || img.complete) return done();
-  img.onload = done;
+  // this should be rewritten to isReady when it is ready
+  img.onload = ()=>{
+    setTimeout(done, 100);
+  };
 };
 
 /**
@@ -82,20 +91,20 @@ const waitForAudio = async done => {
  * to same structures but with rounded numbers (int for ints, fixed(2) for floats)
  * @param {*} data
  */
-const convertToFixed = data => {
+const convertToFixed = (data, fractionDigits = 2) => {
   if (["string", "number"].includes(typeof data)) {
     const n = Number(data);
 
-    return Number.isNaN(n) ? data : Number.isInteger(n) ? n : +Number(n).toFixed(2);
+    return Number.isNaN(n) ? data : Number.isInteger(n) ? n : +Number(n).toFixed(fractionDigits);
   }
   if (Array.isArray(data)) {
-    return data.map(n => convertToFixed(n));
+    return data.map(n => convertToFixed(n, fractionDigits));
   }
   if (typeof data === "object") {
     const result = {};
 
     for (const key in data) {
-      result[key] = convertToFixed(data[key]);
+      result[key] = convertToFixed(data[key], fractionDigits);
     }
     return result;
   }

e2e/tests/image.zoom-rotate.test.js

@@ -276,16 +276,40 @@ Data(layoutVariations).Scenario("Rotation in the two columns template", async fu
   const params = {
     config: resultConfig,
     data: { image: IMAGE },
+    annotations: [{
+      id: "rotations",
+      result: [
+        // The region just for canvas size visually indication
+        {
+          from_name: "label",
+          id: "EUsEHxTyrv",
+          image_rotation: 0,
+          origin: "manual",
+          original_height: 2802,
+          original_width: 2242,
+          to_name: "image",
+          type: "rectanglelabels",
+          value: {
+            height: 100,
+            labels: ["Label 2"],
+            rotation: 0,
+            width: 100,
+            x: 0,
+            y: 0,
+          },
+        },
+      ],
+    }],
   };
 
   I.say(`Two columns [config: ${twoColumnsConfigs.indexOf(config)}] [${direction}]`);
 
   LabelStudio.init(params);
   AtImageView.waitForImage();
-  AtSidebar.seeRegions(0);
+  AtSidebar.seeRegions(1);
 
   I.click(locate(`[aria-label='rotate-right']`));
-  I.wait(0.5);
+  AtSidebar.seeRegions(1);
 
   await compareSize(I, AtImageView, "Dimensions must be equal in landscape", "landscape, rotated");
 
@@ -297,11 +321,11 @@ Data(layoutVariations).Scenario("Rotation in the two columns template", async fu
   });
   AtSettings.close();
 
-  I.wait(0.5);
+  AtSidebar.seeRegions(1);
   await compareSize(I, AtImageView, "Dimensions must be equal in portrait", "portrait");
 
   I.click(locate(`[aria-label='rotate-right']`));
 
-  I.wait(0.5);
+  AtSidebar.seeRegions(1);
   await compareSize(I, AtImageView, "Dimensions must be equal after rotation in portrain", "portrait, rotated");
 });

e2e/tests/ocr.test.js

@@ -27,7 +27,14 @@ const H3_POINTS = [[1.25, 50.887573964497044], [21.875, 50.69033530571992], [22.
 
 Scenario("Basic scenario", async ({ I, LabelStudio, AtImageView, AtSettings, AtLabels, AtSidebar }) => {
   I.amOnPage("/");
-  LabelStudio.init({ config: createConfig({ shapes: ["Polygon"] }), data });
+
+  LabelStudio.init({
+    config: createConfig({ shapes: ["Polygon"] }),
+    data,
+    settings: {
+      preserveSelectedTool: false,
+    },
+  });
   AtImageView.waitForImage();
   AtSettings.open();
   AtSettings.setGeneralSettings({

e2e/tests/regression-tests/image-ctrl-drawing.test.js

@@ -14,7 +14,7 @@ const BLUEVIOLET = {
 };
 const getConfigWithShapes = (shapes, props = "") => `
    <View>
-    <Image name="img" value="$image" zoom="true" zoomBy="1.5" zoomControl="true" rotateControl="true"></Image>
+    <Image name="img" value="$image" zoom="true" zoomBy="1.5" zoomControl="true" rotateControl="true" maxWidth="750px" maxHeight="auto"/>
     ${shapes
     .map(
       shape => `
@@ -172,6 +172,9 @@ Scenario("How it works without ctrl", async function({ I, LabelStudio, AtSidebar
   const params = {
     config: getConfigWithShapes(Object.keys(createShape)),
     data: { image: IMAGE },
+    settings: {
+      preserveSelectedTool: false,
+    },
   };
 
   I.amOnPage("/");

e2e/tests/regression-tests/image-width.test.js

@@ -0,0 +1,45 @@
+/* global Feature, Scenario */
+const assert = require("assert");
+
+Feature("Image width parameter").tag("@regress");
+
+const IMAGE = "https://user.fm/files/v2-901310d5cb3fa90e0616ca10590bacb3/spacexmoon-800x501.jpg";
+
+const config = `
+  <View>
+    <Image name="img" value="$image" width="50%"/>
+    <Rectangle name="rect" toName="img"/>
+  </View>`;
+
+Scenario("Setting width 50% shouldn't break canvas size on resize of working area", async ({ I, LabelStudio, AtImageView, AtSidebar }) => {
+  const params = {
+    config,
+    data: { image: IMAGE },
+  };
+
+  I.amOnPage("/");
+  LabelStudio.init(params);
+  AtImageView.waitForImage();
+  AtSidebar.seeRegions(0);
+  await AtImageView.lookForStage();
+  let canvasSize = await AtImageView.getCanvasSize();
+  let imageSize = await AtImageView.getImageSize();
+
+  // The sizes of the canvas and image element should be equal (or almost equal)
+  assert.strictEqual(Math.ceil(imageSize.width), Math.ceil(canvasSize.width));
+  assert.strictEqual(Math.ceil(imageSize.height), Math.ceil(canvasSize.height));
+
+  // Create full-size region
+  // This step is just for visual identification of the bug
+  AtImageView.drawByDrag(5, 5, canvasSize.width - 10, canvasSize.height - 10);
+
+  I.resizeWindow(800, 900);
+  I.resizeWindow(1200, 900);
+
+  canvasSize = await AtImageView.getCanvasSize();
+  imageSize = await AtImageView.getImageSize();
+
+  // The sizes should still be equal (or almost equal)
+  assert.strictEqual(Math.ceil(imageSize.width), Math.ceil(canvasSize.width));
+  assert.strictEqual(Math.ceil(imageSize.height), Math.ceil(canvasSize.height));
+});

e2e/utils/asserts.js

@@ -1,11 +1,11 @@
 const assert = require("assert");
 const Helpers = require("../tests/helpers");
 
-function deepEqualWithTolerance(actual, expected) {
-  assert.deepStrictEqual(Helpers.convertToFixed(actual), Helpers.convertToFixed(expected));
+function deepEqualWithTolerance(actual, expected, fractionDigits = 2) {
+  assert.deepStrictEqual(Helpers.convertToFixed(actual, fractionDigits), Helpers.convertToFixed(expected, fractionDigits));
 }
-function notDeepEqualWithTolerance(actual, expected) {
-  assert.notDeepStrictEqual(Helpers.convertToFixed(actual), Helpers.convertToFixed(expected));
+function notDeepEqualWithTolerance(actual, expected, fractionDigits = 2) {
+  assert.notDeepStrictEqual(Helpers.convertToFixed(actual, fractionDigits), Helpers.convertToFixed(expected, fractionDigits));
 }
 
 module.exports = {

src/components/App/App.module.scss

@@ -27,7 +27,7 @@
   min-width: 320px;
   margin: 0 auto;
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   align-items: stretch;
   flex-direction: column;
   background-color: var(--main-bg-color);