const assert = require("assert");
|
const Helpers = require("../helpers");
|
|
Feature("Image zoom position").tag("@regress").config({ waitForAction: 50 });
|
|
const IMAGE =
|
"https://htx-pub.s3.us-east-1.amazonaws.com/examples/images/nick-owuor-astro-nic-visuals-wDifg5xc9Z4-unsplash.jpg";
|
|
const config = `
|
<View>
|
<Image name="img" value="$image" zoomby="2"/>
|
<Rectangle name="rect" toName="img"/>
|
</View>`;
|
|
async function getStrokeColor() {
|
const circle = window.Konva.stages[0].findOne("Circle");
|
|
return circle.attrs.stroke;
|
}
|
|
const relativeCoordsFF = new DataTable(["enabled"]);
|
|
relativeCoordsFF.add([true]);
|
relativeCoordsFF.add([false]);
|
|
Data(relativeCoordsFF).Scenario(
|
"Zoomed image should keep center image in center of canvas on resizes",
|
async ({ I, LabelStudio, AtImageView, AtOutliner, AtDetails, AtPanels, current }) => {
|
const AtDetailsPanel = AtPanels.usePanel(AtPanels.PANEL.DETAILS);
|
const AtOutlinerPanel = AtPanels.usePanel(AtPanels.PANEL.OUTLINER);
|
const FF3793 = current;
|
|
const params = {
|
config,
|
data: { image: IMAGE },
|
annotations: [
|
{
|
id: "1000",
|
result: [
|
{
|
original_width: 2242,
|
original_height: 2802,
|
image_rotation: 0,
|
value: {
|
x: 88.5670731707317,
|
y: 88.3130081300813,
|
width: 10.645325203252034,
|
height: 11.016260162601629,
|
rotation: 0,
|
},
|
id: "Nrzdt6xVq1",
|
from_name: "rect",
|
to_name: "img",
|
type: "rectangle",
|
origin: "manual",
|
},
|
{
|
original_width: 2242,
|
original_height: 2802,
|
image_rotation: 0,
|
value: {
|
x: 68.75,
|
y: 68.78556910569105,
|
width: 6.250000000000001,
|
height: 6.25,
|
rotation: 0,
|
},
|
id: "S_q7c7DTU4",
|
from_name: "rect",
|
to_name: "img",
|
type: "rectangle",
|
origin: "manual",
|
},
|
],
|
},
|
],
|
};
|
|
LabelStudio.setFeatureFlags({
|
fflag_fix_front_dev_3377_image_regions_shift_on_resize_280922_short: true,
|
fflag_fix_front_dev_3793_relative_coords_short: FF3793.enabled,
|
});
|
|
I.amOnPage("/");
|
LabelStudio.init(params);
|
LabelStudio.waitForObjectsReady();
|
AtOutliner.seeRegions(2);
|
|
await AtImageView.lookForStage();
|
|
AtImageView.selectPanTool();
|
|
I.say("Zoom into the first region");
|
for (let k = 0; k < 3; k++) {
|
I.click("[aria-label='zoom-in']");
|
AtImageView.drawByDrag(
|
AtImageView.percToX(95),
|
AtImageView.percToY(95),
|
-AtImageView.percToX(90),
|
-AtImageView.percToY(90),
|
);
|
}
|
|
AtImageView.selectMoveTool();
|
|
I.say("Check that there is a region at the center of visible area");
|
AtImageView.clickAt(AtImageView.percToX(50), AtImageView.percToY(50));
|
AtOutliner.seeSelectedRegion();
|
// these values depend on screen size, interface elements size, etc.
|
// so if they were changed slightly, just replace them with actual data.
|
AtDetails.seeFieldWithValue("X", FF3793.enabled ? "88.567" : "430.15");
|
I.pressKey("U");
|
|
I.say("Collapse the details panel");
|
AtDetailsPanel.collapsePanel();
|
await AtImageView.lookForStage();
|
|
I.say("Check that there is a region at the center of visible area");
|
AtImageView.clickAt(AtImageView.percToX(50), AtImageView.percToY(50));
|
AtOutliner.seeSelectedRegion();
|
I.pressKey("U");
|
|
I.say("Collapse the outliner panel");
|
AtOutlinerPanel.collapsePanel();
|
await AtImageView.lookForStage();
|
|
I.say("The region should be at the right side of visible area");
|
{
|
AtImageView.clickAt(AtImageView.percToX(25), AtImageView.percToY(50));
|
const thereIsTransformer = await AtImageView.isTransformerExist();
|
|
assert.strictEqual(thereIsTransformer, false);
|
}
|
{
|
AtImageView.clickAt(AtImageView.percToX(75), AtImageView.percToY(50));
|
const thereIsTransformer = await AtImageView.isTransformerExist();
|
|
assert.strictEqual(thereIsTransformer, true);
|
I.pressKey("U");
|
}
|
|
I.say("Reset changes");
|
AtDetailsPanel.expandPanel();
|
AtOutlinerPanel.expandPanel();
|
await AtImageView.lookForStage();
|
I.pressKey(["Shift", "1"]);
|
//
|
AtImageView.selectPanTool();
|
|
I.say("Zoom into the second region");
|
for (let k = 0; k < 3; k++) {
|
I.click("[aria-label='zoom-in']");
|
AtImageView.drawByDrag(
|
AtImageView.percToX(75),
|
AtImageView.percToY(75),
|
-AtImageView.percToX(25),
|
-AtImageView.percToY(25),
|
);
|
}
|
|
AtImageView.selectMoveTool();
|
|
I.say("Check that there is a region at the center of visible area");
|
AtImageView.clickAt(AtImageView.percToX(50), AtImageView.percToY(50));
|
AtOutliner.seeSelectedRegion();
|
AtDetails.seeFieldWithValue("X", FF3793.enabled ? "68.75" : "333.90");
|
I.pressKey("U");
|
|
I.say("Collapse the details panel");
|
AtDetailsPanel.collapsePanel();
|
await AtImageView.lookForStage();
|
|
I.say("Check that the region is still at the center of visible area");
|
AtImageView.clickAt(AtImageView.percToX(50), AtImageView.percToY(50));
|
AtOutliner.seeSelectedRegion();
|
I.pressKey("U");
|
|
I.say("Resize panels");
|
AtDetailsPanel.expandPanel();
|
|
for (const [shiftX, steps] of [
|
[100, 10],
|
[-100, 10],
|
[100, 10],
|
[-100, 10],
|
[100, 1],
|
[-100, 1],
|
[100, 1],
|
[-100, 1],
|
[100, 3],
|
[-100, 3],
|
]) {
|
await AtDetailsPanel.dragResizerBy(shiftX, 0, AtDetailsPanel.resizeLeft, steps);
|
}
|
for (const [shiftX, steps] of [
|
[-200, 25],
|
[200, 25],
|
[-200, 1],
|
[200, 1],
|
]) {
|
await AtOutlinerPanel.dragResizerBy(shiftX, 0, AtOutlinerPanel.resizeRight, steps);
|
}
|
|
I.waitTicks(3);
|
|
await AtImageView.lookForStage();
|
|
I.say("Check that the region is still at the center of visible area");
|
AtImageView.clickAt(AtImageView.percToX(50), AtImageView.percToY(50));
|
AtOutliner.seeSelectedRegion();
|
I.pressKey("U");
|
},
|
);
|
|
Scenario(
|
"Keeping the zoom center for different image sizes and scaling algorithms",
|
async ({ I, LabelStudio, AtImageView, AtPanels }) => {
|
const AtDetailsPanel = AtPanels.usePanel(AtPanels.PANEL.DETAILS);
|
const AtOutlinerPanel = AtPanels.usePanel(AtPanels.PANEL.OUTLINER);
|
const strokecolor = "rgb(0,111,222)";
|
|
const keyPointBeSelected = async () => {
|
const currentStokeColor = await I.executeScript(getStrokeColor);
|
const colorIsChanged = currentStokeColor !== strokecolor;
|
|
assert.strictEqual(colorIsChanged, true, "Stroke color must be changed if we are able to select keypoint");
|
};
|
|
const params = {
|
config: `
|
<View>
|
<Image name="img" value="$image" zoomby="8"/>
|
<KeyPoint name="point" toName="img" strokecolor="${strokecolor}" />
|
<Rectangle name="rect" toName="img"/>
|
</View>`,
|
annotations: [
|
{
|
id: "1000",
|
result: [],
|
},
|
],
|
};
|
|
LabelStudio.setFeatureFlags({
|
fflag_fix_front_dev_3377_image_regions_shift_on_resize_280922_short: true,
|
});
|
|
for (const [width, height] of [
|
[2242, 2802],
|
[768, 576],
|
]) {
|
I.amOnPage("/");
|
const imageUrl = await I.executeScript(Helpers.generateImageUrl, { width, height });
|
|
LabelStudio.init({
|
...params,
|
data: { image: imageUrl },
|
});
|
LabelStudio.waitForObjectsReady();
|
|
AtImageView.selectPanTool();
|
I.click("[aria-label='zoom-in']");
|
await AtImageView.lookForStage();
|
AtImageView.drawByDrag(
|
AtImageView.percToX(75),
|
AtImageView.percToY(25),
|
-AtImageView.percToX(25),
|
AtImageView.percToY(25),
|
);
|
|
I.say("Draw a point at the center of visible area");
|
I.pressKey("K");
|
AtImageView.drawByClick(AtImageView.percToX(50), AtImageView.percToY(50));
|
|
I.say("Collapse the details panel");
|
AtDetailsPanel.collapsePanel();
|
await AtImageView.lookForStage();
|
|
I.say("Check that the region is still at the center of visible area");
|
AtImageView.clickAt(AtImageView.percToX(50), AtImageView.percToY(50));
|
await keyPointBeSelected();
|
I.pressKey("U");
|
|
I.say("Collapse the outliner panel");
|
AtOutlinerPanel.collapsePanel();
|
await AtImageView.lookForStage();
|
|
I.say("Check that the region is still at the center of visible area");
|
AtImageView.clickAt(AtImageView.percToX(50), AtImageView.percToY(50));
|
await keyPointBeSelected();
|
I.pressKey("U");
|
|
AtDetailsPanel.expandPanel();
|
AtOutlinerPanel.expandPanel();
|
}
|
},
|
);
|
