fix: LEAP-439: Add maskData exporting into new MIG serialization appr…

…oach (#1659) * fix: LEAP-439: Add maskData exporting into new MIG serialization approach * Update version of @heartexlabs/ls-test dependency * Add serialization/deserialization test for Magic Wand tool * fix import path * Configure timeouts * Update @heartexlabs/ls-test dependency version * Update @heartexlabs/ls-test dependency * Update "@heartexlabs/ls-test" dependency
HumanSignal · Jan 9, 2024 · a3e4f43 · a3e4f43
1 parent d4182be
commit a3e4f43
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 16 deletions.
diff --git a/src/regions/BrushRegion.js b/src/regions/BrushRegion.js
@@ -228,19 +228,24 @@ const Model = types
     let pathPoints,
       cachedPoints,
       lastPointX = -1,
-      lastPointY = -1;
+      lastPointY = -1,
+      maskImage;
 
     return {
       afterCreate() {
-        // if ()
-        // const newdata = ctx.createImageData(750, 937);
-        // newdata.data.set(decode(item._rle));
-        // const dec = decode(self._rle);
-        // self._rle_image =
-        // item._cached_mask = decode(item._rle);
-        // const newdata = ctx.createImageData(750, 937);
-        //     newdata.data.set(item._cached_mask);
-        //     var img = imagedata_to_image(newdata);
+        self.updateMaskImage();
+      },
+
+      updateMaskImage() {
+        if (self.maskDataURL) {
+          if (!maskImage) maskImage = new window.Image();
+
+          maskImage.src = self.maskDataURL;
+        }
+      },
+
+      getMaskImage() {
+        return maskImage;
       },
 
       setLayerRef(ref) {
@@ -349,6 +354,7 @@ const Model = types
         annotation.startAutosave();
 
         self.maskDataURL = maskDataURL;
+        self.updateMaskImage();
 
         self.notifyDrawingFinished();
 

diff --git a/src/utils/canvas.js b/src/utils/canvas.js
@@ -208,6 +208,13 @@ function exportRLE(region) {
     ctx.putImageData(imageData, 0, 0);
   }
 
+  const maskImage = region.getMaskImage?.();
+
+  if (maskImage) {
+    // Apply maskDataURL to existing image data
+    ctx.drawImage(maskImage, 0, 0);
+  }
+
   // If the region was changed manually, we'll have access to user tuoches
   // Render those on the canvas after RLE
   if (region.touches.length > 0) {

diff --git a/tests/functional/package.json b/tests/functional/package.json
@@ -20,7 +20,7 @@
     "cvg:summary": "nyc report --temp-dir=.nyc_output --reporter=text-summary --cwd=. --exclude-after-remap false"
   },
   "dependencies": {
-    "@heartexlabs/ls-test": "heartexlabs/ls-frontend-test#fa441d3d82b9aa238bf68a9bdcc33f7d8f6ec361"
+    "@heartexlabs/ls-test": "heartexlabs/ls-frontend-test#9ff949fc19abaf124477dfd41c6f230b00665ab3"
   },
   "devDependencies": {
     "ts-loader": "^9.4.2",

diff --git a/tests/functional/specs/image_segmentation/tools/magic-wand.cy.ts b/tests/functional/specs/image_segmentation/tools/magic-wand.cy.ts
@@ -1,6 +1,7 @@
 import { ImageView, LabelStudio, Sidebar } from '@heartexlabs/ls-test/helpers/LSF';
 import { magicWandConfig, magicWandImageData } from '../../../data/image_segmentation/tools/magic-wand';
-import { FF_DEV_4081 } from '../../../../../src/utils/feature-flags';
+import { FF_DEV_4081, FF_LSDV_4583 } from '../../../../../src/utils/feature-flags';
+import { Generator } from '@heartexlabs/ls-test/helpers/common/Generator';
 
 describe('Magic Wand tool', () => {
   beforeEach(() => {
@@ -40,4 +41,41 @@ describe('Magic Wand tool', () => {
 
     Sidebar.hasRegions(1);
   });
+
+  it.only('Should be able to serialize and deserialize the same region', () => {
+    LabelStudio.addFeatureFlagsOnPageLoad({
+      [FF_LSDV_4583]: true,
+    });
+    Generator.generateImageUrl({ width: 10, height: 10 })
+      .then((imageUrl) => {
+        LabelStudio.params()
+          .config(magicWandConfig)
+          .data({ image: imageUrl })
+          .withResult([])
+          .init();
+
+        ImageView.waitForImage();
+
+        ImageView.clickAtRelative(.15, .15);
+        ImageView.waitForPixelRelative(.15, .15, '#a1a1a1', { timeout: 10000 });
+
+        Sidebar.hasRegions(1);
+        ImageView.capture('RegionOnCanvas');
+
+        LabelStudio.serialize().then((data) => {
+          LabelStudio.params()
+            .config(magicWandConfig)
+            .data({ image: imageUrl })
+            .withResult(data)
+            .init();
+
+          ImageView.waitForImage();
+
+          Sidebar.hasRegions(1);
+          ImageView.waitForPixelRelative(.15, .15, '#a1a1a1', { timeout: 10000 });
+          ImageView.canvasShouldNotChange('RegionOnCanvas');
+        });
+      });
+
+  });
 });
diff --git a/tests/functional/yarn.lock b/tests/functional/yarn.lock
@@ -264,9 +264,9 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
-"@heartexlabs/ls-test@heartexlabs/ls-frontend-test#e760e117af39c187065ec8c704ce174e5d001eff":
+"@heartexlabs/ls-test@heartexlabs/ls-frontend-test#9ff949fc19abaf124477dfd41c6f230b00665ab3":
   version "1.0.8"
-  resolved "https://codeload.github.com/heartexlabs/ls-frontend-test/tar.gz/e760e117af39c187065ec8c704ce174e5d001eff"
+  resolved "https://codeload.github.com/heartexlabs/ls-frontend-test/tar.gz/9ff949fc19abaf124477dfd41c6f230b00665ab3"
   dependencies:
     "@cypress/code-coverage" "^3.10.0"
     "@cypress/webpack-preprocessor" "^5.17.0"
@@ -288,9 +288,9 @@
     webpack-cli "^5.0.1"
     yargs "^17.7.1"
 
-"@heartexlabs/ls-test@heartexlabs/ls-frontend-test#fa441d3d82b9aa238bf68a9bdcc33f7d8f6ec361":
+"@heartexlabs/ls-test@heartexlabs/ls-frontend-test#df8e7ea65179f5d143a4a299428116646f2236c4":
   version "1.0.8"
-  resolved "https://codeload.github.com/heartexlabs/ls-frontend-test/tar.gz/fa441d3d82b9aa238bf68a9bdcc33f7d8f6ec361"
+  resolved "https://codeload.github.com/heartexlabs/ls-frontend-test/tar.gz/df8e7ea65179f5d143a4a299428116646f2236c4"
   dependencies:
     "@cypress/code-coverage" "^3.10.0"
     "@cypress/webpack-preprocessor" "^5.17.0"