LabelingSystem/web/libs/editor/tests/e2e/tests/image.magic-wand.test.js

const { doDrawingAction, hasKonvaPixelColorAtPoint, setKonvaLayersOpacity, serialize } = require("./helpers");
const assert = require("assert");

Feature("Test Image Magic Wand");

const CLOUDSHADOW = {
  color: "#1EAE3B",
  rgbArray: [30, 174, 59],
};
const HAZE = {
  color: "#68eee5",
  rgbArray: [104, 238, 229],
};
const CLOUD = {
  color: "#1b32de",
  rgbArray: [27, 50, 222],
};

const config = `
  <View>
    <Labels name="labels_1" toName="image_1">
      <Label hotkey="1" value="Snow" background="#F61E33" />
      <Label hotkey="2" value="Cloud Shadow" background="${CLOUDSHADOW.color}" />
      <Label hotkey="3" value="Haze" background="${HAZE.color}" />
      <Label hotkey="4" value="Cloud" background="${CLOUD.color}" />
      <Label hotkey="5" value="Exclude" background="#2C2C2B" />
    </Labels>
    <MagicWand name="magicwand_1" toName="image_1" />
    <View style="width: 100%; margin-bottom: 20%; margin-side: 10%;">
      <Image name="image_1" value="$image" zoomControl="true" zoom="true" crossOrigin="anonymous" />
    </View>
  </View>`;

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

const data = {
  image: [
    "http://htx-pub.s3.amazonaws.com/samples/magicwand/magic_wand_scale_1_20200902_015806_26_2235_1B_AnalyticMS_00750_00750.jpg",
    "http://htx-pub.s3.amazonaws.com/samples/magicwand/magic_wand_scale_2_20200902_015806_26_2235_1B_AnalyticMS_00750_00750.jpg",
    "http://htx-pub.s3.amazonaws.com/samples/magicwand/magic_wand_scale_3_20200902_015806_26_2235_1B_AnalyticMS_00750_00750.jpg",
    "http://htx-pub.s3.amazonaws.com/samples/magicwand/magic_wand_false_color_20200902_015806_26_2235_1B_AnalyticMS_00750_00750.jpg",
  ],
  thumb:
    "http://htx-pub.s3.amazonaws.com/samples/magicwand/magic_wand_thumbnail_20200902_015806_26_2235_1B_AnalyticMS_00750_00750.jpg",
};

async function assertMagicWandPixel(I, x, y, assertValue, rgbArray, msg) {
  const hasPixel = await I.executeScript(hasKonvaPixelColorAtPoint, [x, y, rgbArray, 1]);

  assert.equal(hasPixel, assertValue, msg);
}

Scenario(
  "Make sure the magic wand works in a variety of scenarios",
  async ({ I, LabelStudio, AtImageView, AtOutliner, AtPanels }) => {
    const AtDetailsPanel = AtPanels.usePanel(AtPanels.PANEL.DETAILS);
    const params = {
      config,
      data,
      annotations: [annotationEmpty],
    };

    I.amOnPage("/");

    LabelStudio.init(params);

    AtDetailsPanel.collapsePanel();
    LabelStudio.waitForObjectsReady();
    await AtImageView.lookForStage();

    I.say("Making sure magic wand button is present");
    I.seeElement('.lsf-toolbar__group button[aria-label="magicwand"]');

    I.say("Making sure Eraser button is present");
    I.seeElement('.lsf-toolbar__group button[aria-label="eraser"]');

    I.say("Select magic wand & cloud class");
    I.pressKey("W");
    I.pressKey("4");

    AtOutliner.seeRegions(0);

    I.say("Magic wanding clouds with cloud class in upper left of image");
    await doDrawingAction(I, { msg: "Fill in clouds upper left", fromX: 454, fromY: 184, toX: 650, toY: 644 });
    I.waitTicks(2);
    await doDrawingAction(I, { msg: "Fill in clouds lower left", fromX: 454, fromY: 834, toX: 650, toY: 644 });
    I.waitTicks(2);

    I.say("Ensuring repeated magic wands back to back with same class collapsed into single region");
    AtOutliner.seeRegions(1);
    AtOutliner.see("Cloud");

    // Force all the magic wand regions to be a consistent color with no opacity to make testing
    // magic wand pixel colors more robust.
    I.say("Ensuring cloud magic wand pixels are correctly filled color");
    await I.executeScript(setKonvaLayersOpacity, [1.0]);
    await assertMagicWandPixel(
      I,
      0,
      0,
      false,
      CLOUD.rgbArray,
      "Far upper left corner should not have magic wand cloud class",
    );
    await assertMagicWandPixel(I, 260, 50, true, CLOUD.rgbArray, "Upper left should have magic wand cloud class");
    await assertMagicWandPixel(I, 300, 620, true, CLOUD.rgbArray, "Lower left should have magic wand cloud class");
    await assertMagicWandPixel(
      I,
      675,
      650,
      false,
      CLOUD.rgbArray,
      "Far lower right corner should not have magic wand cloud class",
    );

    // Make sure the region made from this is correct.
    I.say("Ensuring magic wand brushregion was created correctly");
    const result = await I.executeScript(serialize);
    const entry = result[1];

    assert.equal(entry.from_name, "labels_1");
    assert.equal(entry.type, "labels");
    const labels = entry.value.labels;

    assert.equal(labels.length, 1);
    assert.equal(labels[0], "Cloud");
    assert.equal(entry.value.rle.length > 0, true);

    // Undo the bottom left area we just added, make sure its gone but our region list is still
    // 1, then redo it and ensure its back and our region list is still 1 again.
    I.say("Undoing last cloud magic wand and ensuring it worked correctly");
    I.click('button[aria-label="Undo"]');
    I.waitTicks(2);
    await assertMagicWandPixel(
      I,
      300,
      620,
      false,
      CLOUD.rgbArray,
      "Undone lower left should not have magic wand cloud class anymore",
    );
    await assertMagicWandPixel(I, 260, 50, true, CLOUD.rgbArray, "Upper left should still have magic wand cloud class");
    AtOutliner.seeRegions(1);

    I.say("Redoing last cloud magic wand and ensuring it worked correctly");
    I.click('button[aria-label="Redo"]');
    I.waitTicks(2);
    await assertMagicWandPixel(
      I,
      300,
      620,
      true,
      CLOUD.rgbArray,
      "Redone lower left should have magic wand cloud class again",
    );
    await assertMagicWandPixel(I, 260, 50, true, CLOUD.rgbArray, "Upper left should still have magic wand cloud class");
    AtOutliner.seeRegions(1);

    I.say("Unselecting last magic wand region");
    I.pressKey("Escape");

    // @todo currently gallery doesn't work well with CORS, so this is not covered by test
    // Change to the false color view, zoom in, and magic wand with a new class.
    // I.say('Changing to false-color view');
    // I.click('[class*="gallery--"] img[src*="false_color"]');

    I.say("Zooming in");
    I.click('button[aria-label="zoom-in"]');
    I.click('button[aria-label="zoom-in"]');
    I.click('button[aria-label="zoom-in"]');
    I.click('button[aria-label="zoom-in"]');
    I.click('button[aria-label="zoom-in"]');

    I.say("Selecting cloud shadow class");
    I.pressKey("2");

    I.say("Magic wanding cloud shadows with cloud shadow class in center of zoomed image");
    await doDrawingAction(I, { msg: "Cloud shadow in middle of image", fromX: 600, fromY: 500, toX: 500, toY: 500 });
    I.waitTicks(2);

    I.say("Ensuring new cloud shadow magic wand region gets added to sidebar");
    AtOutliner.seeRegions(2);
    AtOutliner.see("Cloud Shadow");

    I.say("Ensuring cloud shadow magic wand pixels are correctly filled color");
    await I.executeScript(setKonvaLayersOpacity, [1.0]);
    await assertMagicWandPixel(
      I,
      0,
      0,
      false,
      CLOUDSHADOW.rgbArray,
      "Zoomed upper left corner should not have cloud shadow",
    );
    await assertMagicWandPixel(
      I,
      350,
      360,
      true,
      CLOUDSHADOW.rgbArray,
      "Center area should have magic wand cloud shadow class",
    );

    // Make sure if you have a region selected then change the class the region class changes.
    I.say("Changing class of existing selected region to Haze should change it to new class");
    I.pressKey("3");
    AtOutliner.seeRegions(2);
    AtOutliner.dontSee("Cloud Shadow");
    AtOutliner.see("Haze");
    I.waitTicks(2);
    await I.executeScript(setKonvaLayersOpacity, [1.0]);
    await assertMagicWandPixel(I, 350, 360, true, HAZE.rgbArray, "Center area should have magic wand haze class");
  },
);